marmelab · antoinefricker · Jul 29, 2022 · Jul 29, 2022 · Jul 29, 2022 · Jul 29, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Changelog
 
+## v4.2.6
+
+* Fix `<DeleteButton mutationOptions>` ignores `meta` parameter ([#8023](https://github.com/marmelab/react-admin/pull/8023)) ([septentrion-730n](https://github.com/septentrion-730n))
+* Fix `<NumberInput>` state only changes on blur ([#8033](https://github.com/marmelab/react-admin/pull/8033)) ([fzaninotto](https://github.com/fzaninotto))
+* Fix `<ArrayInput>` adds previously removed item ([#8029](https://github.com/marmelab/react-admin/pull/8029)) ([djhi](https://github.com/djhi))
+* [TypeScript] Fix `<MenuItemLink>` prop type isn't exported ([#8040](https://github.com/marmelab/react-admin/pull/8040)) ([fzaninotto](https://github.com/fzaninotto))
+* [Doc] Add Search component ([#8021](https://github.com/marmelab/react-admin/pull/8021)) ([fzaninotto](https://github.com/fzaninotto))
+* [Doc] Fix typos in Search documentation ([#8024](https://github.com/marmelab/react-admin/pull/8024)) ([septentrion-730n](https://github.com/septentrion-730n))
+* [Demo] Fix Pending reviews link on Dashboard ([#8036](https://github.com/marmelab/react-admin/pull/8036)) ([arimet](https://github.com/arimet))
+* [Demo] Fix Category List does not use RecordContext ([#8035](https://github.com/marmelab/react-admin/pull/8035)) ([arimet](https://github.com/arimet))
+
 ## v4.2.5
 
 - Fix Input label proptypes and `<DatagridInput>` imports ([#8019](https://github.com/marmelab/react-admin/pull/8019)) by ([megantaylor](https://github.com/megantaylor))

diff --git a/docs/Buttons.md b/docs/Buttons.md
@@ -244,11 +244,11 @@ export const PostList = () => (
 
 ![Bulk Delete button](./img/bulk-delete-button.png)
 
-| Prop         | Required | Type            | Default            | Description                         |
-| ------------ | -------- | --------------- | ------------------ | ----------------------------------- |
-| `label`      | Optional | `string`        | 'ra.action.delete' | label or translation message to use |
-| `icon`       | Optional | `ReactElement`  | `<DeleteIcon>`     | iconElement, e.g. `<CommentIcon />` |
-| `exporter`   | Optional | `Function`      | -                  | Override the List exporter function |
+| Prop                | Required | Type            | Default            | Description                                        |
+| --------------------| -------- | --------------- | ------------------ | ---------------------------------------------------|
+| `label`             | Optional | `string`        | 'ra.action.delete' | label or translation message to use                |
+| `icon`              | Optional | `ReactElement`  | `<DeleteIcon>`     | iconElement, e.g. `<CommentIcon />`                |
+| `mutationOptions`   | Optional | `object`        | null               | options for react-query `useMutation` hook         |
 
 ### `<FilterButton>`
 
@@ -277,6 +277,7 @@ Delete the current record after a confirm dialog has been accepted. To be used i
 | `confirmContent`                                           | Optional | `ReactNode`                      | 'ra.message.delete_content' | Message or React component to be used as the body of the confirm dialog |
 | `redirect`                                                 | Optional | `string | false | Function`      | 'list'                      | Custom redirection after success side effect                            |
 | `translateOptions`                                         | Optional | `{ id?: string, name?: string }` | {}                          | Custom id and name to be used in the confirm dialog's title             |
+| `mutationOptions`                                          | Optional |                                  | null                        | options for react-query `useMutation` hook                              |
 
 {% raw %}
 ```jsx

diff --git a/docs/Create.md b/docs/Create.md
@@ -336,7 +336,27 @@ export const UserCreate = (props) => {
 
 The `transform` function can also return a `Promise`, which allows you to do all sorts of asynchronous calls (e.g. to the `dataProvider`) during the transformation.
 
-**Tip**: If you want to have different transformations based on the button clicked by the user (e.g. if the creation form displays two submit buttons, one to "save", and another to "save and notify other admins"), you can set the `transform` prop on [the `<SaveButton>` component](./SaveButton.md), too. 
+**Tip**: If you want to have different transformations based on the button clicked by the user (e.g. if the creation form displays two submit buttons, one to "save", and another to "save and notify other admins"), you can set the `transform` prop on [the `<SaveButton>` component](./SaveButton.md), too.
+
+**Tip**: A frequent usage of the `transform` function is to stripe empty string values returned by the form.
+
+```jsx
+export const UserCreate = (props) => {
+    const transform = (data) => {
+        const sanitizedData = {};
+        for (const key in data) {
+            if (typeof data[key] === "string" && data[key].length === 0) continue;
+            sanitizedData[key] = data[key]; 
+        }
+        return sanitizedData;
+    };
+    return (
+        <Create {...props} transform={transform}>
+            ...
+        </Create>
+    );
+}
+```
 
 ## Adding `meta` To The DataProvider Call
 

diff --git a/docs/Edit.md b/docs/Edit.md
@@ -523,7 +523,7 @@ The `transform` function can also return a `Promise`, which allows you to do all
 
 **Tip**: If you want to have different transformations based on the button clicked by the user (e.g. if the creation form displays two submit buttons, one to "save", and another to "save and notify other admins"), you can set the `transform` prop on [the `<SaveButton>` component](./SaveButton.md), too.
 
-**Tip**: `<Edit>`’s transform prop function also get the `previousData` in its second argument:
+**Tip**: The `transform` function also get the `previousData` in its second argument:
 
 ```jsx
 export const UserEdit = (props) => {
@@ -539,6 +539,26 @@ export const UserEdit = (props) => {
 }
 ```
 
+**Tip**: A frequent usage of the `transform` function is to stripe empty string values returned by the form.
+
+```jsx
+export const UserEdit = (props) => {
+    const transform = (data) => {
+        const sanitizedData = {};
+        for (const key in data) {
+            if (typeof data[key] === "string" && data[key].trim().length === 0) continue;
+            sanitizedData[key] = data[key]; 
+        }
+        return sanitizedData;
+    };
+    return (
+        <Edit {...props} transform={transform}>
+            ...
+        </Edit>
+    );
+}
+```
+
 ## Adding `meta` To The DataProvider Call
 
 You can pass a custom `meta` to the `dataProvider` call, using either `queryOptions`, or `mutationOptions`:

diff --git a/docs/ImageField.md b/docs/ImageField.md
@@ -5,7 +5,9 @@ title: "The ImageField Component"
 
 # `<ImageField>`
 
-If you need to display an image based on a path contained in a record field, you can use the `<ImageField />` component:
+When you need to display an image based on a path contained in a record field, use the `<ImageField />` component.
+
+## Usage
 
 ```jsx
 import { ImageField } from 'react-admin';
@@ -18,9 +20,28 @@ import { ImageField } from 'react-admin';
 </div>
 ```
 
+You can also use `<ImageField>` on fields that contain an array of image objects:
+
+```js
+<ImageField source="pictures" src="url" title="desc" />
+
+// Renders the record
+// {
+//     id: 123,
+//     pictures: [
+//         { url: 'image1.jpg', desc: 'First image' },
+//         { url: 'image2.jpg', desc: 'Second image' },
+//     ]
+// } as
+<ul>
+    <li><img src="image1.jpg" title="First image" /></li>
+    <li><img src="image2.jpg" title="Second image" /></li>
+</ul>
+```
+
 This field is also often used within the [`<ImageInput />`](./ImageInput.md) component to display a preview.
 
-## Properties
+## Props
 
 | Prop    | Required | Type   | Default      | Description                                                                              |
 | ------- | -------- | ------ | ------------ | ---------------------------------------------------------------------------------------- |
@@ -29,18 +50,23 @@ This field is also often used within the [`<ImageInput />`](./ImageInput.md) com
 
 `<ImageField>` also accepts the [common field props](./Fields.md#common-field-props).
 
-## `sx`: CSS API
+## `src`
 
-The `<ImageField>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (as most MUI components, see their [documentation about it](https://mui.com/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses:
+If the record actually contains an array of images in the property defined by the `source` prop, the `src` prop will be needed to determine the `src` value of the images, for example:
 
-| Rule name               | Description                                                                    |
-|-------------------------|--------------------------------------------------------------------------------|
-| `& .RaImageField-list`  | Applied to the underlying `<ul>` component when `sourceValue` prop is an array |
-| `& .RaImageField-image` | Applied to each underlying `<img>` component                                   |
+```js
+// This is the record
+{
+    pictures: [
+        { url: 'image1.jpg', desc: 'First image' },
+        { url: 'image2.jpg', desc: 'Second image' },
+    ]
+}
 
-To override the style of all instances of `<ImageField>` using the [MUI style overrides](https://mui.com/customization/globals/#css), use the `RaImageField` key.
+<ImageField source="pictures" src="url" title="desc" />
+```
 
-## Usage
+## `title`
 
 The optional `title` prop points to the picture title property, used for both `alt` and `title` attributes. It can either be a hard-written string, or a path within your JSON object:
 
@@ -54,16 +80,24 @@ The optional `title` prop points to the picture title property, used for both `a
 // renders img title as "Picture", since "Picture" is not a path in previous given object
 ```
 
-If the record actually contains an array of images in the property defined by the `source` prop, the `src` prop will be needed to determine the `src` value of the images, for example:
+## `sx`: CSS API
 
-```js
-// This is the record
-{
-    pictures: [
-        { url: 'image1.jpg', desc: 'First image' },
-        { url: 'image2.jpg', desc: 'Second image' },
-    ]
-}
+The `<ImageField>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (as most MUI components, see their [documentation about it](https://mui.com/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses:
 
-<ImageField source="pictures" src="url" title="desc" />
+| Rule name               | Description                                                                    |
+|-------------------------|--------------------------------------------------------------------------------|
+| `& .RaImageField-list`  | Applied to the underlying `<ul>` component when `sourceValue` prop is an array |
+| `& .RaImageField-image` | Applied to each underlying `<img>` component                                   |
+
+For instance, to specify a size for the image:
+
+{% raw %}
+```jsx
+ <ImageField
+    source="thumbnail"
+    sx={{ '& img': { maxWidth: 50, maxHeight: 50, objectFit: 'contain' } }}
+/>
 ```
+{% endraw %}
+
+To override the style of all instances of `<ImageField>` using the [MUI style overrides](https://mui.com/customization/globals/#css), use the `RaImageField` key.
diff --git a/docs/Inputs.md b/docs/Inputs.md
@@ -376,6 +376,23 @@ const dateParser = value => {
 <DateInput source="isodate" format={dateFormatter} parse={dateParser} defaultValue={new Date()} />
 ```
 
+**Tip:** To spread a conversion behaviour to your whole application, you can import a `react-admin`component then re-export them with their `transform` and/or `parse` props set.
+
+```jsx
+import * as React from 'react';
+import { TextInput } from 'react-admin';
+
+const FilledOrNullTextInput = props => {
+    return (
+        <TextInput
+            {...props}
+            transform={ v => typeof v === 'string' && v.length === 0 ? null : v }
+            />
+    );
+};
+export default FilledOrNullTextInput;
+```
+
 ## Linking Two Inputs
 
 Edition forms often contain linked inputs, e.g. country and city (the choices of the latter depending on the value of the former).
@@ -513,7 +530,7 @@ import { FormDataConsumer } from 'react-admin';
 
 MUI offers [3 variants for text fields](https://mui.com/material-ui/react-text-field/#basic-textfield): `outlined`, `filled`, and `standard`. The default react-admin theme uses the `filled` variant.
 
-Most Input components pass their additional props down to the root component, which is often an MUI Field component. This means you can pass a `variant` prop to override the varaint of a single input:
+Most Input components pass their additional props down to the root component, which is often an MUI Field component. This means you can pass a `variant` prop to override the variant of a single input:
 
 ```jsx
 <TextInput source="name" variant="outlined" />

diff --git a/docs/JsonSchemaForm.md b/docs/JsonSchemaForm.md
@@ -0,0 +1,70 @@
+---
+layout: default
+title: "JsonSchemaForm"
+---
+
+# `<JsonSchemaForm>`
+
+This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" src="./img/premium.svg" /> component allows to render a form from a JSON Schema description based on [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form).
+
+For instance, to generate the following form:
+
+![JsonSchemaForm](https://marmelab.com/ra-enterprise/modules/assets/jsonschemaform.webp)
+
+Configure the <Edit> view with a <JsonSchemaForm> child as follows:
+
+{% raw %}
+```jsx
+import { Edit } from "react-admin";
+import { JsonSchemaForm } from "@react-admin/ra-form-layout";
+
+const CustomerEdit = () => (
+  <Edit>
+    <JsonSchemaForm
+      schema={{
+        type: "object",
+        properties: {
+          id: { type: "number" },
+          first_name: { type: "string", title: "First name" },
+          last_name: { type: "string", minLength: 3 },
+          dob: { type: "string", format: "date" },
+          sex: { type: "string", enum: ["male", "female"] },
+          employer_id: { type: "number" },
+          occupations: {
+            type: "array",
+            items: {
+              type: "object",
+              properties: {
+                name: { type: "string" },
+                from: { type: "string", format: "date" },
+                to: { type: "string", format: "date" },
+              },
+            },
+          },
+        },
+        required: ["id", "last_name", "employer_id"],
+      }}
+      uiSchema={{
+        id: { "ui:disabled": true },
+        employer_id: {
+          "ui:widget": "reference",
+          "ui:options": {
+            reference: "employers",
+            optionText: "name",
+          },
+        },
+      }}
+      onChange={(change) =>
+        process.env.NODE_ENV !== "test" && console.log("changed", change)
+      }
+      onError={(error) =>
+        process.env.NODE_ENV !== "test" && console.log("error", error)
+      }
+    />
+  </Edit>
+);
+```
+{% endraw %}
+
+Check [the `ra-form-layout` documentation](https://marmelab.com/ra-enterprise/modules/ra-form-layout#jsonschemaform) for more details.
+