use TextArrayField in ListGuesser

Author: slax57

packages/ra-ui-materialui/src/field/TextArrayField.stories.tsx

@@ -46,5 +46,5 @@ export const Direction = () => (
 );
 
 export const Gap = () => (
-    <TextArrayField record={book} source="genres" gap={2} />
+    <TextArrayField record={book} source="genres" sx={{ gap: 2 }} />
 );

packages/ra-ui-materialui/src/field/TextArrayField.tsx

@@ -43,7 +43,11 @@ export const TextArrayField = <
     } = props;
     const data = useFieldValue(props) || emptyArray;
     return (
-        <Stack direction="row" gap={1} {...rest}>
+        <Stack
+            direction="row"
+            {...rest}
+            sx={{ gap: 1, flexWrap: 'wrap', ...rest.sx }}
+        >
             {data.length === 0
                 ? emptyText
                 : data.map((item: ReactNode, index: number) => (

packages/ra-ui-materialui/src/list/ListGuesser.spec.tsx

@@ -10,7 +10,7 @@ describe('<ListGuesser />', () => {
         await screen.findAllByText('top seller', undefined, { timeout: 2000 });
         expect(logSpy).toHaveBeenCalledWith(`Guessed List:
 
-import { DataTable, DateField, EmailField, List, ReferenceArrayField, ReferenceField } from 'react-admin';
+import { DataTable, DateField, EmailField, List, ReferenceArrayField, ReferenceField, TextArrayField } from 'react-admin';
 
 export const ProductList = () => (
     <List>
@@ -30,6 +30,9 @@ export const ProductList = () => (
             <DataTable.Col source="email">
                 <EmailField source="email" />
             </DataTable.Col>
+            <DataTable.Col source="sizes">
+                <TextArrayField source="sizes" />
+            </DataTable.Col>
         </DataTable>
     </List>
 );`);

packages/ra-ui-materialui/src/list/ListGuesser.stories.tsx

@@ -23,6 +23,7 @@ const data = {
             tags_ids: [1],
             last_update: new Date('2023-10-01').toISOString(),
             email: '[email protected]',
+            sizes: ['S', 'M', 'L', 'XL'],
         },
         {
             id: 2,
@@ -32,6 +33,7 @@ const data = {
             tags_ids: [2, 3],
             last_update: new Date('2023-11-01').toISOString(),
             email: '[email protected]',
+            sizes: ['S', 'M', 'L'],
         },
         {
             id: 3,
@@ -41,6 +43,7 @@ const data = {
             tags_ids: [2, 4],
             last_update: new Date('2023-12-01').toISOString(),
             email: '[email protected]',
+            sizes: ['XS', 'S', 'M'],
         },
         {
             id: 4,
@@ -50,6 +53,7 @@ const data = {
             tags_ids: [1, 4, 3],
             last_update: new Date('2023-10-15').toISOString(),
             email: '[email protected]',
+            sizes: ['M', 'L', 'XL', 'XXL'],
         },
         {
             id: 5,
@@ -59,6 +63,7 @@ const data = {
             tags_ids: [1, 4, 3],
             last_update: new Date('2023-10-15').toISOString(),
             email: '[email protected]',
+            sizes: ['One Size'],
         },
     ],
     categories: [

packages/ra-ui-materialui/src/list/listFieldTypes.tsx

@@ -12,6 +12,7 @@ import {
     UrlField,
     ArrayFieldProps,
     TextField,
+    TextArrayField,
 } from '../field';
 
 export const listFieldTypes = {
@@ -51,6 +52,19 @@ ${children.map(child => `            ${child.getRepresentation()}`).join('\n')}
                 </ArrayField>
             </DataTable.Col>`,
     },
+    scalar_array: {
+        component: (props: ArrayFieldProps) => {
+            return (
+                <DataTable.Col {...props}>
+                    <TextArrayField {...props} />
+                </DataTable.Col>
+            );
+        },
+        representation: props =>
+            `<DataTable.Col source="${props.source}">
+                <TextArrayField source="${props.source}" />
+            </DataTable.Col>`,
+    },
     boolean: {
         component: props => (
             <DataTable.Col {...props}>