Add support for SimpleFormIterator inline and sx props

docs/ArrayInput.md

@@ -42,13 +42,26 @@ import { ArrayInput, SimpleFormIterator, DateInput, TextInput } from 'react-admi
 
 `<ArrayInput>` expects a single child, which must be a *form iterator* component. A form iterator is a component accepting a `fields` object as passed by [react-hook-form](https://react-hook-form.com/api/usefieldarray), and defining a layout for an array of fields. It also receives several functions to manipulate the array values. For instance, the `<SimpleFormIterator>` component displays an array of react-admin Inputs in an unordered list (`<ul>`), one sub-form by list item (`<li>`). It also provides controls for adding and removing a sub-record (a backlink in this example).
 
+By using `<SimpleFormIterator inline>`, child inputs apper inline.
+
+```jsx
+import { ArrayInput, SimpleFormIterator, DateInput, TextInput } from 'react-admin';
+
+<ArrayInput source="backlinks">
+    <SimpleFormIterator inline>
+        <DateInput source="date" />
+        <TextInput source="url" />
+    </SimpleFormIterator>
+</ArrayInput>
+```
+
 You can pass `disableAdd`, `disableRemove` and `disableReordering` as props of `SimpleFormIterator`, to disable `ADD`, `REMOVE` and the `UP/DOWN` button(s) respectively. Default value of each is `false`.
 
 ```jsx
 import { ArrayInput, SimpleFormIterator, DateInput, TextInput } from 'react-admin';
 
 <ArrayInput source="backlinks">
-    <SimpleFormIterator disableRemove >
+    <SimpleFormIterator disableRemove>
         <DateInput source="date" />
         <TextInput source="url" />
     </SimpleFormIterator>

packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.stories.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+
+import { Edit } from '../../detail';
+import { SimpleForm } from '../../form';
+import { ArrayInput } from './ArrayInput';
+import { SimpleFormIterator } from './SimpleFormIterator';
+import { TextInput } from '../TextInput';
+import { AdminContext } from '../../AdminContext';
+
+export default { title: 'ra-ui-materialui/input/SimpleFormIterator' };
+
+const dataProvider = {
+    getOne: () =>
+        Promise.resolve({
+            data: {
+                id: 1,
+                title: 'War and Peace',
+                authors: [
+                    {
+                        name: 'Leo Tolstoy',
+                        role: 'head_writer',
+                    },
+                    {
+                        name: 'Alexander Pushkin',
+                        role: 'co_writer',
+                    },
+                ],
+            },
+        }),
+} as any;
+
+export const Basic = () => (
+    <AdminContext dataProvider={dataProvider}>
+        <Edit resource="books" id="1">
+            <SimpleForm>
+                <ArrayInput source="authors" fullWidth>
+                    <SimpleFormIterator>
+                        <TextInput source="name" />
+                        <TextInput source="role" />
+                    </SimpleFormIterator>
+                </ArrayInput>
+            </SimpleForm>
+        </Edit>
+    </AdminContext>
+);
+
+export const Inline = () => (
+    <AdminContext dataProvider={dataProvider}>
+        <Edit resource="books" id="1">
+            <SimpleForm>
+                <ArrayInput source="authors" fullWidth>
+                    <SimpleFormIterator inline>
+                        <TextInput source="name" />
+                        <TextInput source="role" />
+                    </SimpleFormIterator>
+                </ArrayInput>
+            </SimpleForm>
+        </Edit>
+    </AdminContext>
+);
+
+export const Sx = () => (
+    <AdminContext dataProvider={dataProvider}>
+        <Edit resource="books" id="1">
+            <SimpleForm>
+                <ArrayInput source="authors" fullWidth>
+                    <SimpleFormIterator
+                        sx={{
+                            border: 'solid lightgrey 1px',
+                            borderRadius: 2,
+                            mt: 3,
+                            p: 1,
+                            '& .RaSimpleFormIterator-form': {
+                                flexDirection: 'row',
+                                gap: '1em',
+                            },
+                        }}
+                    >
+                        <TextInput source="name" />
+                        <TextInput source="role" />
+                    </SimpleFormIterator>
+                </ArrayInput>
+            </SimpleForm>
+        </Edit>
+    </AdminContext>
+);

packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.tsx

@@ -9,7 +9,7 @@ import {
     useCallback,
     useMemo,
 } from 'react';
-import { styled } from '@mui/material';
+import { styled, SxProps } from '@mui/material';
 import clsx from 'clsx';
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
@@ -43,7 +43,9 @@ export const SimpleFormIterator = (props: SimpleFormIteratorProps) => {
         disableAdd,
         disableRemove,
         disableReordering,
+        inline,
         getItemLabel = DefaultLabelFn,
+        sx,
     } = props;
     const { append, fields, move, remove } = useArrayInput(props);
     const record = useRecordContext(props);
@@ -106,7 +108,7 @@ export const SimpleFormIterator = (props: SimpleFormIteratorProps) => {
     );
     return fields ? (
         <SimpleFormIteratorContext.Provider value={context}>
-            <Root className={className}>
+            <Root className={className} sx={sx}>
                 {fields.map((member, index) => (
                     <SimpleFormIteratorItem
                         key={member.id}
@@ -124,6 +126,7 @@ export const SimpleFormIterator = (props: SimpleFormIteratorProps) => {
                         reOrderButtons={reOrderButtons}
                         resource={resource}
                         source={source}
+                        inline={inline}
                     >
                         {children}
                     </SimpleFormIteratorItem>
@@ -163,6 +166,7 @@ SimpleFormIterator.propTypes = {
     fields: PropTypes.array,
     fieldState: PropTypes.object,
     formState: PropTypes.object,
+    inline: PropTypes.bool,
     record: PropTypes.object,
     source: PropTypes.string,
     resource: PropTypes.string,
@@ -182,6 +186,7 @@ export interface SimpleFormIteratorProps extends Partial<UseFieldArrayReturn> {
     disableRemove?: boolean | DisableRemoveFunction;
     disableReordering?: boolean;
     getItemLabel?: (index: number) => string;
+    inline?: boolean;
     meta?: {
         // the type defined in FieldArrayRenderProps says error is boolean, which is wrong.
         error?: any;
@@ -192,6 +197,7 @@ export interface SimpleFormIteratorProps extends Partial<UseFieldArrayReturn> {
     reOrderButtons?: ReactElement;
     resource?: string;
     source?: string;
+    sx?: SxProps;
 }
 
 const Root = styled('ul', {
@@ -225,6 +231,10 @@ const Root = styled('ul', {
         flexDirection: 'column',
         flex: 2,
     },
+    [`& .${SimpleFormIteratorClasses.inline}`]: {
+        flexDirection: 'row',
+        gap: '1em',
+    },
     [`& .${SimpleFormIteratorClasses.action}`]: {
         paddingTop: '0.5em',
     },

packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIteratorItem.tsx

@@ -30,6 +30,7 @@ export const SimpleFormIteratorItem = React.forwardRef(
             disableRemove,
             getItemLabel,
             index,
+            inline = false,
             member,
             record,
             removeButton,
@@ -97,7 +98,12 @@ export const SimpleFormIteratorItem = React.forwardRef(
                                 })}
                         </div>
                     </div>
-                    <section className={SimpleFormIteratorClasses.form}>
+                    <section
+                        className={clsx(
+                            SimpleFormIteratorClasses.form,
+                            inline && SimpleFormIteratorClasses.inline
+                        )}
+                    >
                         {Children.map(
                             children,
                             (input: ReactElement, index2) => {
@@ -146,6 +152,7 @@ export type SimpleFormIteratorItemProps = Partial<ArrayInputContextValue> & {
     disableReordering?: boolean;
     getItemLabel?: (index: number) => string;
     index: number;
+    inline?: boolean;
     member: string;
     onRemoveField: (index: number) => void;
     onReorder: (origin: number, destination: number) => void;

packages/ra-ui-materialui/src/input/ArrayInput/useSimpleFormIteratorStyles.ts

@@ -3,6 +3,7 @@ export const SimpleFormIteratorPrefix = 'RaSimpleFormIterator';
 export const SimpleFormIteratorClasses = {
     line: `${SimpleFormIteratorPrefix}-line`,
     index: `${SimpleFormIteratorPrefix}-index`,
+    inline: `${SimpleFormIteratorPrefix}-inline`,
     indexContainer: `${SimpleFormIteratorPrefix}-indexContainer`,
     form: `${SimpleFormIteratorPrefix}-form`,
     action: `${SimpleFormIteratorPrefix}-action`,