@akbarsafari00/bonyan-content-manager 5.52.1-fa.2

package/dist/admin/pages/ListConfiguration/components/Settings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.js","sources":["../../../../../admin/src/pages/ListConfiguration/components/Settings.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { useForm, InputRenderer, type InputProps } from '@strapi/admin/strapi-admin';\r\nimport { Flex, Grid, Typography, useCollator } from '@strapi/design-system';\r\nimport { type MessageDescriptor, useIntl } from 'react-intl';\r\n\r\nimport { useDoc } from '../../../hooks/useDocument';\r\nimport { type EditFieldLayout } from '../../../hooks/useDocumentLayout';\r\nimport { getTranslation } from '../../../utils/translations';\r\nimport { type FormData } from '../ListConfigurationPage';\r\n\r\nimport type { DistributiveOmit } from 'react-redux';\r\n\r\nexport type InputPropsWithMessageDescriptors = DistributiveOmit<\r\n  InputProps,\r\n  'hint' | 'label' | 'placeholder'\r\n> & {\r\n  hint?: MessageDescriptor;\r\n  label: MessageDescriptor;\r\n  placeholder?: MessageDescriptor;\r\n};\r\n\r\n/**\r\n * @internal\r\n * @description Form inputs are always displayed in a grid, so we need\r\n * to use the size property to determine how many columns the input should\r\n * take up.\r\n */\r\nexport type FormLayoutInputProps = InputPropsWithMessageDescriptors & { size: number };\r\n\r\nconst EXCLUDED_SORT_ATTRIBUTE_TYPES = [\r\n  'media',\r\n  'richtext',\r\n  'dynamiczone',\r\n  'relation',\r\n  'component',\r\n  'json',\r\n  'blocks',\r\n];\r\n\r\ninterface SortOption {\r\n  value: string;\r\n  label: string;\r\n}\r\n\r\nconst Settings = () => {\r\n  const { formatMessage, locale } = useIntl();\r\n  const formatter = useCollator(locale, {\r\n    sensitivity: 'base',\r\n  });\r\n  const { schema } = useDoc();\r\n\r\n  const layout = useForm<FormData['layout']>(\r\n    'Settings',\r\n    (state) => (state.values as FormData).layout ?? []\r\n  );\r\n  const currentSortBy = useForm<FormData['settings']['defaultSortBy']>(\r\n    'Settings',\r\n    (state) => (state.values as FormData).settings.defaultSortBy\r\n  );\r\n  const onChange = useForm('Settings', (state) => state.onChange);\r\n\r\n  const sortOptions = React.useMemo(\r\n    () =>\r\n      Object.values(layout).reduce<SortOption[]>((acc, field) => {\r\n        if (schema && !EXCLUDED_SORT_ATTRIBUTE_TYPES.includes(schema.attributes[field.name].type)) {\r\n          acc.push({\r\n            value: field.name,\r\n            label: typeof field.label !== 'string' ? formatMessage(field.label) : field.label,\r\n          });\r\n        }\r\n\r\n        return acc;\r\n      }, []),\r\n    [formatMessage, layout, schema]\r\n  );\r\n\r\n  const sortOptionsSorted = sortOptions.sort((a, b) => formatter.compare(a.label, b.label));\r\n\r\n  React.useEffect(() => {\r\n    if (sortOptionsSorted.findIndex((opt) => opt.value === currentSortBy) === -1) {\r\n      onChange('settings.defaultSortBy', sortOptionsSorted[0]?.value);\r\n    }\r\n  }, [currentSortBy, onChange, sortOptionsSorted]);\r\n\r\n  const formLayout = React.useMemo(\r\n    () =>\r\n      SETTINGS_FORM_LAYOUT.map((row) =>\r\n        row.map((field) => {\r\n          if (field.type === 'enumeration') {\r\n            return {\r\n              ...field,\r\n              hint: field.hint ? formatMessage(field.hint) : undefined,\r\n              label: formatMessage(field.label),\r\n              options: field.name === 'settings.defaultSortBy' ? sortOptionsSorted : field.options,\r\n            };\r\n          } else {\r\n            return {\r\n              ...field,\r\n              hint: field.hint ? formatMessage(field.hint) : undefined,\r\n              label: formatMessage(field.label),\r\n            };\r\n          }\r\n        })\r\n      ) as [top: EditFieldLayout[], bottom: EditFieldLayout[]],\r\n    [formatMessage, sortOptionsSorted]\r\n  );\r\n\r\n  return (\r\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={4}>\r\n      <Typography variant=\"delta\" tag=\"h2\">\r\n        {formatMessage({\r\n          id: getTranslation('containers.SettingPage.settings'),\r\n          defaultMessage: 'Settings',\r\n        })}\r\n      </Typography>\r\n      <Grid.Root key=\"bottom\" gap={4}>\r\n        {formLayout.map((row) =>\r\n          row.map(({ size, ...field }) => (\r\n            <Grid.Item key={field.name} xs={12} col={size} direction=\"column\" alignItems=\"stretch\">\r\n              {/* @ts-expect-error – issue with EnumerationProps conflicting with InputProps */}\r\n              <InputRenderer {...field} />\r\n            </Grid.Item>\r\n          ))\r\n        )}\r\n      </Grid.Root>\r\n    </Flex>\r\n  );\r\n};\r\n\r\nconst SETTINGS_FORM_LAYOUT: FormLayoutInputProps[][] = [\r\n  [\r\n    {\r\n      label: {\r\n        id: getTranslation('form.Input.search'),\r\n        defaultMessage: 'Enable search',\r\n      },\r\n      name: 'settings.searchable',\r\n      size: 4,\r\n      type: 'boolean' as const,\r\n    },\r\n    {\r\n      label: {\r\n        id: getTranslation('form.Input.filters'),\r\n        defaultMessage: 'Enable filters',\r\n      },\r\n      name: 'settings.filterable',\r\n      size: 4,\r\n      type: 'boolean' as const,\r\n    },\r\n    {\r\n      label: {\r\n        id: getTranslation('form.Input.bulkActions'),\r\n        defaultMessage: 'Enable bulk actions',\r\n      },\r\n      name: 'settings.bulkable',\r\n      size: 4,\r\n      type: 'boolean' as const,\r\n    },\r\n  ],\r\n  [\r\n    {\r\n      hint: {\r\n        id: getTranslation('form.Input.pageEntries.inputDescription'),\r\n        defaultMessage: 'Note: You can override this value in the Collection Type settings page.',\r\n      },\r\n      label: {\r\n        id: getTranslation('form.Input.pageEntries'),\r\n        defaultMessage: 'Entries per page',\r\n      },\r\n      name: 'settings.pageSize',\r\n      options: ['10', '20', '50', '100'].map((value) => ({ value, label: value })),\r\n      size: 6,\r\n      type: 'enumeration' as const,\r\n    },\r\n    {\r\n      label: {\r\n        id: getTranslation('form.Input.defaultSort'),\r\n        defaultMessage: 'Default sort attribute',\r\n      },\r\n      name: 'settings.defaultSortBy',\r\n      options: [],\r\n      size: 3,\r\n      type: 'enumeration' as const,\r\n    },\r\n    {\r\n      label: {\r\n        id: getTranslation('form.Input.sort.order'),\r\n        defaultMessage: 'Default sort order',\r\n      },\r\n      name: 'settings.defaultSortOrder',\r\n      options: ['ASC', 'DESC'].map((value) => ({ value, label: value })),\r\n      size: 3,\r\n      type: 'enumeration' as const,\r\n    },\r\n  ],\r\n];\r\n\r\nexport { Settings };\r\n"],"names":["EXCLUDED_SORT_ATTRIBUTE_TYPES","Settings","formatMessage","locale","useIntl","formatter","useCollator","sensitivity","schema","useDoc","layout","useForm","state","values","currentSortBy","settings","defaultSortBy","onChange","sortOptions","React","useMemo","Object","reduce","acc","field","includes","attributes","name","type","push","value","label","sortOptionsSorted","sort","a","b","compare","useEffect","findIndex","opt","formLayout","SETTINGS_FORM_LAYOUT","map","row","hint","undefined","options","_jsxs","Flex","direction","alignItems","gap","_jsx","Typography","variant","tag","id","getTranslation","defaultMessage","Grid","Root","size","Item","xs","col","InputRenderer"],"mappings":"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"}

package/dist/admin/pages/ListConfiguration/components/Settings.mjs

@@ -0,0 +1,180 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useForm, InputRenderer } from '@strapi/admin/strapi-admin';
+import { useCollator, Flex, Typography, Grid } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { useDoc } from '../../../hooks/useDocument.mjs';
+import { getTranslation } from '../../../utils/translations.mjs';
+
+const EXCLUDED_SORT_ATTRIBUTE_TYPES = [
+    'media',
+    'richtext',
+    'dynamiczone',
+    'relation',
+    'component',
+    'json',
+    'blocks'
+];
+const Settings = ()=>{
+    const { formatMessage, locale } = useIntl();
+    const formatter = useCollator(locale, {
+        sensitivity: 'base'
+    });
+    const { schema } = useDoc();
+    const layout = useForm('Settings', (state)=>state.values.layout ?? []);
+    const currentSortBy = useForm('Settings', (state)=>state.values.settings.defaultSortBy);
+    const onChange = useForm('Settings', (state)=>state.onChange);
+    const sortOptions = React.useMemo(()=>Object.values(layout).reduce((acc, field)=>{
+            if (schema && !EXCLUDED_SORT_ATTRIBUTE_TYPES.includes(schema.attributes[field.name].type)) {
+                acc.push({
+                    value: field.name,
+                    label: typeof field.label !== 'string' ? formatMessage(field.label) : field.label
+                });
+            }
+            return acc;
+        }, []), [
+        formatMessage,
+        layout,
+        schema
+    ]);
+    const sortOptionsSorted = sortOptions.sort((a, b)=>formatter.compare(a.label, b.label));
+    React.useEffect(()=>{
+        if (sortOptionsSorted.findIndex((opt)=>opt.value === currentSortBy) === -1) {
+            onChange('settings.defaultSortBy', sortOptionsSorted[0]?.value);
+        }
+    }, [
+        currentSortBy,
+        onChange,
+        sortOptionsSorted
+    ]);
+    const formLayout = React.useMemo(()=>SETTINGS_FORM_LAYOUT.map((row)=>row.map((field)=>{
+                if (field.type === 'enumeration') {
+                    return {
+                        ...field,
+                        hint: field.hint ? formatMessage(field.hint) : undefined,
+                        label: formatMessage(field.label),
+                        options: field.name === 'settings.defaultSortBy' ? sortOptionsSorted : field.options
+                    };
+                } else {
+                    return {
+                        ...field,
+                        hint: field.hint ? formatMessage(field.hint) : undefined,
+                        label: formatMessage(field.label)
+                    };
+                }
+            })), [
+        formatMessage,
+        sortOptionsSorted
+    ]);
+    return /*#__PURE__*/ jsxs(Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 4,
+        children: [
+            /*#__PURE__*/ jsx(Typography, {
+                variant: "delta",
+                tag: "h2",
+                children: formatMessage({
+                    id: getTranslation('containers.SettingPage.settings'),
+                    defaultMessage: 'Settings'
+                })
+            }),
+            /*#__PURE__*/ jsx(Grid.Root, {
+                gap: 4,
+                children: formLayout.map((row)=>row.map(({ size, ...field })=>/*#__PURE__*/ jsx(Grid.Item, {
+                            xs: 12,
+                            col: size,
+                            direction: "column",
+                            alignItems: "stretch",
+                            children: /*#__PURE__*/ jsx(InputRenderer, {
+                                ...field
+                            })
+                        }, field.name)))
+            }, "bottom")
+        ]
+    });
+};
+const SETTINGS_FORM_LAYOUT = [
+    [
+        {
+            label: {
+                id: getTranslation('form.Input.search'),
+                defaultMessage: 'Enable search'
+            },
+            name: 'settings.searchable',
+            size: 4,
+            type: 'boolean'
+        },
+        {
+            label: {
+                id: getTranslation('form.Input.filters'),
+                defaultMessage: 'Enable filters'
+            },
+            name: 'settings.filterable',
+            size: 4,
+            type: 'boolean'
+        },
+        {
+            label: {
+                id: getTranslation('form.Input.bulkActions'),
+                defaultMessage: 'Enable bulk actions'
+            },
+            name: 'settings.bulkable',
+            size: 4,
+            type: 'boolean'
+        }
+    ],
+    [
+        {
+            hint: {
+                id: getTranslation('form.Input.pageEntries.inputDescription'),
+                defaultMessage: 'Note: You can override this value in the Collection Type settings page.'
+            },
+            label: {
+                id: getTranslation('form.Input.pageEntries'),
+                defaultMessage: 'Entries per page'
+            },
+            name: 'settings.pageSize',
+            options: [
+                '10',
+                '20',
+                '50',
+                '100'
+            ].map((value)=>({
+                    value,
+                    label: value
+                })),
+            size: 6,
+            type: 'enumeration'
+        },
+        {
+            label: {
+                id: getTranslation('form.Input.defaultSort'),
+                defaultMessage: 'Default sort attribute'
+            },
+            name: 'settings.defaultSortBy',
+            options: [],
+            size: 3,
+            type: 'enumeration'
+        },
+        {
+            label: {
+                id: getTranslation('form.Input.sort.order'),
+                defaultMessage: 'Default sort order'
+            },
+            name: 'settings.defaultSortOrder',
+            options: [
+                'ASC',
+                'DESC'
+            ].map((value)=>({
+                    value,
+                    label: value
+                })),
+            size: 3,
+            type: 'enumeration'
+        }
+    ]
+];
+
+export { Settings };
+//# sourceMappingURL=Settings.mjs.map

package/dist/admin/pages/ListConfiguration/components/Settings.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.mjs","sources":["../../../../../admin/src/pages/ListConfiguration/components/Settings.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { useForm, InputRenderer, type InputProps } from '@strapi/admin/strapi-admin';\r\nimport { Flex, Grid, Typography, useCollator } from '@strapi/design-system';\r\nimport { type MessageDescriptor, useIntl } from 'react-intl';\r\n\r\nimport { useDoc } from '../../../hooks/useDocument';\r\nimport { type EditFieldLayout } from '../../../hooks/useDocumentLayout';\r\nimport { getTranslation } from '../../../utils/translations';\r\nimport { type FormData } from '../ListConfigurationPage';\r\n\r\nimport type { DistributiveOmit } from 'react-redux';\r\n\r\nexport type InputPropsWithMessageDescriptors = DistributiveOmit<\r\n  InputProps,\r\n  'hint' | 'label' | 'placeholder'\r\n> & {\r\n  hint?: MessageDescriptor;\r\n  label: MessageDescriptor;\r\n  placeholder?: MessageDescriptor;\r\n};\r\n\r\n/**\r\n * @internal\r\n * @description Form inputs are always displayed in a grid, so we need\r\n * to use the size property to determine how many columns the input should\r\n * take up.\r\n */\r\nexport type FormLayoutInputProps = InputPropsWithMessageDescriptors & { size: number };\r\n\r\nconst EXCLUDED_SORT_ATTRIBUTE_TYPES = [\r\n  'media',\r\n  'richtext',\r\n  'dynamiczone',\r\n  'relation',\r\n  'component',\r\n  'json',\r\n  'blocks',\r\n];\r\n\r\ninterface SortOption {\r\n  value: string;\r\n  label: string;\r\n}\r\n\r\nconst Settings = () => {\r\n  const { formatMessage, locale } = useIntl();\r\n  const formatter = useCollator(locale, {\r\n    sensitivity: 'base',\r\n  });\r\n  const { schema } = useDoc();\r\n\r\n  const layout = useForm<FormData['layout']>(\r\n    'Settings',\r\n    (state) => (state.values as FormData).layout ?? []\r\n  );\r\n  const currentSortBy = useForm<FormData['settings']['defaultSortBy']>(\r\n    'Settings',\r\n    (state) => (state.values as FormData).settings.defaultSortBy\r\n  );\r\n  const onChange = useForm('Settings', (state) => state.onChange);\r\n\r\n  const sortOptions = React.useMemo(\r\n    () =>\r\n      Object.values(layout).reduce<SortOption[]>((acc, field) => {\r\n        if (schema && !EXCLUDED_SORT_ATTRIBUTE_TYPES.includes(schema.attributes[field.name].type)) {\r\n          acc.push({\r\n            value: field.name,\r\n            label: typeof field.label !== 'string' ? formatMessage(field.label) : field.label,\r\n          });\r\n        }\r\n\r\n        return acc;\r\n      }, []),\r\n    [formatMessage, layout, schema]\r\n  );\r\n\r\n  const sortOptionsSorted = sortOptions.sort((a, b) => formatter.compare(a.label, b.label));\r\n\r\n  React.useEffect(() => {\r\n    if (sortOptionsSorted.findIndex((opt) => opt.value === currentSortBy) === -1) {\r\n      onChange('settings.defaultSortBy', sortOptionsSorted[0]?.value);\r\n    }\r\n  }, [currentSortBy, onChange, sortOptionsSorted]);\r\n\r\n  const formLayout = React.useMemo(\r\n    () =>\r\n      SETTINGS_FORM_LAYOUT.map((row) =>\r\n        row.map((field) => {\r\n          if (field.type === 'enumeration') {\r\n            return {\r\n              ...field,\r\n              hint: field.hint ? formatMessage(field.hint) : undefined,\r\n              label: formatMessage(field.label),\r\n              options: field.name === 'settings.defaultSortBy' ? sortOptionsSorted : field.options,\r\n            };\r\n          } else {\r\n            return {\r\n              ...field,\r\n              hint: field.hint ? formatMessage(field.hint) : undefined,\r\n              label: formatMessage(field.label),\r\n            };\r\n          }\r\n        })\r\n      ) as [top: EditFieldLayout[], bottom: EditFieldLayout[]],\r\n    [formatMessage, sortOptionsSorted]\r\n  );\r\n\r\n  return (\r\n    <Flex direction=\"column\" alignItems=\"stretch\" gap={4}>\r\n      <Typography variant=\"delta\" tag=\"h2\">\r\n        {formatMessage({\r\n          id: getTranslation('containers.SettingPage.settings'),\r\n          defaultMessage: 'Settings',\r\n        })}\r\n      </Typography>\r\n      <Grid.Root key=\"bottom\" gap={4}>\r\n        {formLayout.map((row) =>\r\n          row.map(({ size, ...field }) => (\r\n            <Grid.Item key={field.name} xs={12} col={size} direction=\"column\" alignItems=\"stretch\">\r\n              {/* @ts-expect-error – issue with EnumerationProps conflicting with InputProps */}\r\n              <InputRenderer {...field} />\r\n            </Grid.Item>\r\n          ))\r\n        )}\r\n      </Grid.Root>\r\n    </Flex>\r\n  );\r\n};\r\n\r\nconst SETTINGS_FORM_LAYOUT: FormLayoutInputProps[][] = [\r\n  [\r\n    {\r\n      label: {\r\n        id: getTranslation('form.Input.search'),\r\n        defaultMessage: 'Enable search',\r\n      },\r\n      name: 'settings.searchable',\r\n      size: 4,\r\n      type: 'boolean' as const,\r\n    },\r\n    {\r\n      label: {\r\n        id: getTranslation('form.Input.filters'),\r\n        defaultMessage: 'Enable filters',\r\n      },\r\n      name: 'settings.filterable',\r\n      size: 4,\r\n      type: 'boolean' as const,\r\n    },\r\n    {\r\n      label: {\r\n        id: getTranslation('form.Input.bulkActions'),\r\n        defaultMessage: 'Enable bulk actions',\r\n      },\r\n      name: 'settings.bulkable',\r\n      size: 4,\r\n      type: 'boolean' as const,\r\n    },\r\n  ],\r\n  [\r\n    {\r\n      hint: {\r\n        id: getTranslation('form.Input.pageEntries.inputDescription'),\r\n        defaultMessage: 'Note: You can override this value in the Collection Type settings page.',\r\n      },\r\n      label: {\r\n        id: getTranslation('form.Input.pageEntries'),\r\n        defaultMessage: 'Entries per page',\r\n      },\r\n      name: 'settings.pageSize',\r\n      options: ['10', '20', '50', '100'].map((value) => ({ value, label: value })),\r\n      size: 6,\r\n      type: 'enumeration' as const,\r\n    },\r\n    {\r\n      label: {\r\n        id: getTranslation('form.Input.defaultSort'),\r\n        defaultMessage: 'Default sort attribute',\r\n      },\r\n      name: 'settings.defaultSortBy',\r\n      options: [],\r\n      size: 3,\r\n      type: 'enumeration' as const,\r\n    },\r\n    {\r\n      label: {\r\n        id: getTranslation('form.Input.sort.order'),\r\n        defaultMessage: 'Default sort order',\r\n      },\r\n      name: 'settings.defaultSortOrder',\r\n      options: ['ASC', 'DESC'].map((value) => ({ value, label: value })),\r\n      size: 3,\r\n      type: 'enumeration' as const,\r\n    },\r\n  ],\r\n];\r\n\r\nexport { Settings };\r\n"],"names":["EXCLUDED_SORT_ATTRIBUTE_TYPES","Settings","formatMessage","locale","useIntl","formatter","useCollator","sensitivity","schema","useDoc","layout","useForm","state","values","currentSortBy","settings","defaultSortBy","onChange","sortOptions","React","useMemo","Object","reduce","acc","field","includes","attributes","name","type","push","value","label","sortOptionsSorted","sort","a","b","compare","useEffect","findIndex","opt","formLayout","SETTINGS_FORM_LAYOUT","map","row","hint","undefined","options","_jsxs","Flex","direction","alignItems","gap","_jsx","Typography","variant","tag","id","getTranslation","defaultMessage","Grid","Root","size","Item","xs","col","InputRenderer"],"mappings":"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"}

package/dist/admin/pages/ListConfiguration/components/SortDisplayedFields.js

@@ -0,0 +1,168 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var useDocument = require('../../../hooks/useDocument.js');
+var attributes = require('../../../utils/attributes.js');
+var translations = require('../../../utils/translations.js');
+var DraggableCard = require('./DraggableCard.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const SortDisplayedFields = ({ metadatas })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { schema } = useDocument.useDoc();
+    const [isDraggingSibling, setIsDraggingSibling] = React__namespace.useState(false);
+    const [lastAction, setLastAction] = React__namespace.useState(null);
+    const scrollableContainerRef = React__namespace.useRef(null);
+    const values = strapiAdmin.useForm('SortDisplayedFields', (state)=>state.values.layout ?? []);
+    const addFieldRow = strapiAdmin.useForm('SortDisplayedFields', (state)=>state.addFieldRow);
+    const removeFieldRow = strapiAdmin.useForm('SortDisplayedFields', (state)=>state.removeFieldRow);
+    const moveFieldRow = strapiAdmin.useForm('SortDisplayedFields', (state)=>state.moveFieldRow);
+    /**
+   * This is our list of fields that are not displayed in the current layout
+   * so we create their default state to be added to the layout.
+   */ const nonDisplayedFields = React__namespace.useMemo(()=>{
+        if (!schema) {
+            return [];
+        }
+        const displayedFieldNames = values.map((field)=>field.name);
+        return Object.entries(schema.attributes).reduce((acc, [name, attribute])=>{
+            if (!displayedFieldNames.includes(name) && attributes.checkIfAttributeIsDisplayable(attribute)) {
+                const metadata = metadatas[name] || {
+                    label: name
+                };
+                acc.push({
+                    name,
+                    label: metadata.label || name,
+                    sortable: metadata.sortable
+                });
+            }
+            return acc;
+        }, []);
+    }, [
+        metadatas,
+        values,
+        schema
+    ]);
+    const handleAddField = (field)=>{
+        setLastAction('add');
+        addFieldRow('layout', field);
+    };
+    const handleRemoveField = (index)=>{
+        setLastAction('remove');
+        removeFieldRow('layout', index);
+    };
+    const handleMoveField = (dragIndex, hoverIndex)=>{
+        moveFieldRow('layout', dragIndex, hoverIndex);
+    };
+    React__namespace.useEffect(()=>{
+        if (lastAction === 'add' && scrollableContainerRef?.current) {
+            scrollableContainerRef.current.scrollLeft = scrollableContainerRef.current.scrollWidth;
+        }
+    }, [
+        lastAction
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        alignItems: "stretch",
+        direction: "column",
+        gap: 4,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                variant: "delta",
+                tag: "h2",
+                children: formatMessage({
+                    id: translations.getTranslation('containers.SettingPage.view'),
+                    defaultMessage: 'View'
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                padding: 4,
+                borderColor: "neutral300",
+                borderStyle: "dashed",
+                borderWidth: "1px",
+                hasRadius: true,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                        flex: "1",
+                        overflow: "auto hidden",
+                        ref: scrollableContainerRef,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                            gap: 3,
+                            children: values.map((field, index)=>/*#__PURE__*/ jsxRuntime.jsx(DraggableCard.DraggableCard, {
+                                    index: index,
+                                    isDraggingSibling: isDraggingSibling,
+                                    onMoveField: handleMoveField,
+                                    onRemoveField: ()=>handleRemoveField(index),
+                                    setIsDraggingSibling: setIsDraggingSibling,
+                                    ...field,
+                                    attribute: schema.attributes[field.name],
+                                    label: typeof field.label === 'object' ? formatMessage(field.label) : field.label
+                                }, field.name))
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Trigger, {
+                                paddingLeft: 2,
+                                paddingRight: 2,
+                                justifyContent: "center",
+                                endIcon: null,
+                                disabled: nonDisplayedFields.length === 0,
+                                variant: "tertiary",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                                        tag: "span",
+                                        children: formatMessage({
+                                            id: translations.getTranslation('components.FieldSelect.label'),
+                                            defaultMessage: 'Add a field'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(Icons.Plus, {
+                                        "aria-hidden": true,
+                                        focusable: false,
+                                        style: {
+                                            position: 'relative',
+                                            top: 2
+                                        }
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Content, {
+                                children: nonDisplayedFields.map((field)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                                        onSelect: ()=>handleAddField(field),
+                                        children: typeof field.label === 'object' ? formatMessage(field.label) : field.label
+                                    }, field.name))
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+exports.SortDisplayedFields = SortDisplayedFields;
+//# sourceMappingURL=SortDisplayedFields.js.map

package/dist/admin/pages/ListConfiguration/components/SortDisplayedFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortDisplayedFields.js","sources":["../../../../../admin/src/pages/ListConfiguration/components/SortDisplayedFields.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { useForm } from '@strapi/admin/strapi-admin';\r\nimport { Box, Flex, VisuallyHidden, Typography, Menu } from '@strapi/design-system';\r\nimport { Plus } from '@strapi/icons';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { useDoc } from '../../../hooks/useDocument';\r\nimport { checkIfAttributeIsDisplayable } from '../../../utils/attributes';\r\nimport { getTranslation } from '../../../utils/translations';\r\n\r\nimport { DraggableCard, DraggableCardProps } from './DraggableCard';\r\n\r\nimport type { ListLayout } from '../../../hooks/useDocumentLayout';\r\nimport type { FormData } from '../ListConfigurationPage';\r\n\r\ninterface SortDisplayedFieldsProps extends Pick<ListLayout, 'metadatas'> {}\r\n\r\nconst SortDisplayedFields = ({ metadatas }: SortDisplayedFieldsProps) => {\r\n  const { formatMessage } = useIntl();\r\n  const { schema } = useDoc();\r\n  const [isDraggingSibling, setIsDraggingSibling] = React.useState(false);\r\n  const [lastAction, setLastAction] = React.useState<string | null>(null);\r\n  const scrollableContainerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  const values = useForm<FormData['layout']>(\r\n    'SortDisplayedFields',\r\n    (state) => (state.values as FormData).layout ?? []\r\n  );\r\n  const addFieldRow = useForm('SortDisplayedFields', (state) => state.addFieldRow);\r\n  const removeFieldRow = useForm('SortDisplayedFields', (state) => state.removeFieldRow);\r\n  const moveFieldRow = useForm('SortDisplayedFields', (state) => state.moveFieldRow);\r\n\r\n  /**\r\n   * This is our list of fields that are not displayed in the current layout\r\n   * so we create their default state to be added to the layout.\r\n   */\r\n  const nonDisplayedFields = React.useMemo(() => {\r\n    if (!schema) {\r\n      return [];\r\n    }\r\n\r\n    const displayedFieldNames = values.map((field) => field.name);\r\n\r\n    return Object.entries(schema.attributes).reduce<Array<FormData['layout'][number]>>(\r\n      (acc, [name, attribute]) => {\r\n        if (!displayedFieldNames.includes(name) && checkIfAttributeIsDisplayable(attribute)) {\r\n          const metadata = metadatas[name] || { label: name };\r\n\r\n          acc.push({\r\n            name,\r\n            label: metadata.label || name,\r\n            sortable: metadata.sortable,\r\n          });\r\n        }\r\n\r\n        return acc;\r\n      },\r\n      []\r\n    );\r\n  }, [metadatas, values, schema]);\r\n\r\n  const handleAddField = (field: FormData['layout'][number]) => {\r\n    setLastAction('add');\r\n    addFieldRow('layout', field);\r\n  };\r\n\r\n  const handleRemoveField = (index: number) => {\r\n    setLastAction('remove');\r\n    removeFieldRow('layout', index);\r\n  };\r\n\r\n  const handleMoveField: DraggableCardProps['onMoveField'] = (dragIndex, hoverIndex) => {\r\n    moveFieldRow('layout', dragIndex, hoverIndex);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    if (lastAction === 'add' && scrollableContainerRef?.current) {\r\n      scrollableContainerRef.current.scrollLeft = scrollableContainerRef.current.scrollWidth;\r\n    }\r\n  }, [lastAction]);\r\n\r\n  return (\r\n    <Flex alignItems=\"stretch\" direction=\"column\" gap={4}>\r\n      <Typography variant=\"delta\" tag=\"h2\">\r\n        {formatMessage({\r\n          id: getTranslation('containers.SettingPage.view'),\r\n          defaultMessage: 'View',\r\n        })}\r\n      </Typography>\r\n\r\n      <Flex padding={4} borderColor=\"neutral300\" borderStyle=\"dashed\" borderWidth=\"1px\" hasRadius>\r\n        <Box flex=\"1\" overflow=\"auto hidden\" ref={scrollableContainerRef}>\r\n          <Flex gap={3}>\r\n            {values.map((field, index) => (\r\n              <DraggableCard\r\n                key={field.name}\r\n                index={index}\r\n                isDraggingSibling={isDraggingSibling}\r\n                onMoveField={handleMoveField}\r\n                onRemoveField={() => handleRemoveField(index)}\r\n                setIsDraggingSibling={setIsDraggingSibling}\r\n                {...field}\r\n                attribute={schema!.attributes[field.name]}\r\n                label={typeof field.label === 'object' ? formatMessage(field.label) : field.label}\r\n              />\r\n            ))}\r\n          </Flex>\r\n        </Box>\r\n\r\n        <Menu.Root>\r\n          <Menu.Trigger\r\n            paddingLeft={2}\r\n            paddingRight={2}\r\n            justifyContent=\"center\"\r\n            endIcon={null}\r\n            disabled={nonDisplayedFields.length === 0}\r\n            variant=\"tertiary\"\r\n          >\r\n            <VisuallyHidden tag=\"span\">\r\n              {formatMessage({\r\n                id: getTranslation('components.FieldSelect.label'),\r\n                defaultMessage: 'Add a field',\r\n              })}\r\n            </VisuallyHidden>\r\n            <Plus aria-hidden focusable={false} style={{ position: 'relative', top: 2 }} />\r\n          </Menu.Trigger>\r\n          <Menu.Content>\r\n            {nonDisplayedFields.map((field) => (\r\n              <Menu.Item key={field.name} onSelect={() => handleAddField(field)}>\r\n                {typeof field.label === 'object' ? formatMessage(field.label) : field.label}\r\n              </Menu.Item>\r\n            ))}\r\n          </Menu.Content>\r\n        </Menu.Root>\r\n      </Flex>\r\n    </Flex>\r\n  );\r\n};\r\n\r\nexport { SortDisplayedFields };\r\nexport type { SortDisplayedFieldsProps };\r\n"],"names":["SortDisplayedFields","metadatas","formatMessage","useIntl","schema","useDoc","isDraggingSibling","setIsDraggingSibling","React","useState","lastAction","setLastAction","scrollableContainerRef","useRef","values","useForm","state","layout","addFieldRow","removeFieldRow","moveFieldRow","nonDisplayedFields","useMemo","displayedFieldNames","map","field","name","Object","entries","attributes","reduce","acc","attribute","includes","checkIfAttributeIsDisplayable","metadata","label","push","sortable","handleAddField","handleRemoveField","index","handleMoveField","dragIndex","hoverIndex","useEffect","current","scrollLeft","scrollWidth","_jsxs","Flex","alignItems","direction","gap","_jsx","Typography","variant","tag","id","getTranslation","defaultMessage","padding","borderColor","borderStyle","borderWidth","hasRadius","Box","flex","overflow","ref","DraggableCard","onMoveField","onRemoveField","Menu","Root","Trigger","paddingLeft","paddingRight","justifyContent","endIcon","disabled","length","VisuallyHidden","Plus","aria-hidden","focusable","style","position","top","Content","Item","onSelect"],"mappings":"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"}

package/dist/admin/pages/ListConfiguration/components/SortDisplayedFields.mjs

@@ -0,0 +1,146 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useForm } from '@strapi/admin/strapi-admin';
+import { Flex, Typography, Box, Menu, VisuallyHidden } from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { useDoc } from '../../../hooks/useDocument.mjs';
+import { checkIfAttributeIsDisplayable } from '../../../utils/attributes.mjs';
+import { getTranslation } from '../../../utils/translations.mjs';
+import { DraggableCard } from './DraggableCard.mjs';
+
+const SortDisplayedFields = ({ metadatas })=>{
+    const { formatMessage } = useIntl();
+    const { schema } = useDoc();
+    const [isDraggingSibling, setIsDraggingSibling] = React.useState(false);
+    const [lastAction, setLastAction] = React.useState(null);
+    const scrollableContainerRef = React.useRef(null);
+    const values = useForm('SortDisplayedFields', (state)=>state.values.layout ?? []);
+    const addFieldRow = useForm('SortDisplayedFields', (state)=>state.addFieldRow);
+    const removeFieldRow = useForm('SortDisplayedFields', (state)=>state.removeFieldRow);
+    const moveFieldRow = useForm('SortDisplayedFields', (state)=>state.moveFieldRow);
+    /**
+   * This is our list of fields that are not displayed in the current layout
+   * so we create their default state to be added to the layout.
+   */ const nonDisplayedFields = React.useMemo(()=>{
+        if (!schema) {
+            return [];
+        }
+        const displayedFieldNames = values.map((field)=>field.name);
+        return Object.entries(schema.attributes).reduce((acc, [name, attribute])=>{
+            if (!displayedFieldNames.includes(name) && checkIfAttributeIsDisplayable(attribute)) {
+                const metadata = metadatas[name] || {
+                    label: name
+                };
+                acc.push({
+                    name,
+                    label: metadata.label || name,
+                    sortable: metadata.sortable
+                });
+            }
+            return acc;
+        }, []);
+    }, [
+        metadatas,
+        values,
+        schema
+    ]);
+    const handleAddField = (field)=>{
+        setLastAction('add');
+        addFieldRow('layout', field);
+    };
+    const handleRemoveField = (index)=>{
+        setLastAction('remove');
+        removeFieldRow('layout', index);
+    };
+    const handleMoveField = (dragIndex, hoverIndex)=>{
+        moveFieldRow('layout', dragIndex, hoverIndex);
+    };
+    React.useEffect(()=>{
+        if (lastAction === 'add' && scrollableContainerRef?.current) {
+            scrollableContainerRef.current.scrollLeft = scrollableContainerRef.current.scrollWidth;
+        }
+    }, [
+        lastAction
+    ]);
+    return /*#__PURE__*/ jsxs(Flex, {
+        alignItems: "stretch",
+        direction: "column",
+        gap: 4,
+        children: [
+            /*#__PURE__*/ jsx(Typography, {
+                variant: "delta",
+                tag: "h2",
+                children: formatMessage({
+                    id: getTranslation('containers.SettingPage.view'),
+                    defaultMessage: 'View'
+                })
+            }),
+            /*#__PURE__*/ jsxs(Flex, {
+                padding: 4,
+                borderColor: "neutral300",
+                borderStyle: "dashed",
+                borderWidth: "1px",
+                hasRadius: true,
+                children: [
+                    /*#__PURE__*/ jsx(Box, {
+                        flex: "1",
+                        overflow: "auto hidden",
+                        ref: scrollableContainerRef,
+                        children: /*#__PURE__*/ jsx(Flex, {
+                            gap: 3,
+                            children: values.map((field, index)=>/*#__PURE__*/ jsx(DraggableCard, {
+                                    index: index,
+                                    isDraggingSibling: isDraggingSibling,
+                                    onMoveField: handleMoveField,
+                                    onRemoveField: ()=>handleRemoveField(index),
+                                    setIsDraggingSibling: setIsDraggingSibling,
+                                    ...field,
+                                    attribute: schema.attributes[field.name],
+                                    label: typeof field.label === 'object' ? formatMessage(field.label) : field.label
+                                }, field.name))
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(Menu.Root, {
+                        children: [
+                            /*#__PURE__*/ jsxs(Menu.Trigger, {
+                                paddingLeft: 2,
+                                paddingRight: 2,
+                                justifyContent: "center",
+                                endIcon: null,
+                                disabled: nonDisplayedFields.length === 0,
+                                variant: "tertiary",
+                                children: [
+                                    /*#__PURE__*/ jsx(VisuallyHidden, {
+                                        tag: "span",
+                                        children: formatMessage({
+                                            id: getTranslation('components.FieldSelect.label'),
+                                            defaultMessage: 'Add a field'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Plus, {
+                                        "aria-hidden": true,
+                                        focusable: false,
+                                        style: {
+                                            position: 'relative',
+                                            top: 2
+                                        }
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Menu.Content, {
+                                children: nonDisplayedFields.map((field)=>/*#__PURE__*/ jsx(Menu.Item, {
+                                        onSelect: ()=>handleAddField(field),
+                                        children: typeof field.label === 'object' ? formatMessage(field.label) : field.label
+                                    }, field.name))
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { SortDisplayedFields };
+//# sourceMappingURL=SortDisplayedFields.mjs.map

package/dist/admin/pages/ListConfiguration/components/SortDisplayedFields.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortDisplayedFields.mjs","sources":["../../../../../admin/src/pages/ListConfiguration/components/SortDisplayedFields.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { useForm } from '@strapi/admin/strapi-admin';\r\nimport { Box, Flex, VisuallyHidden, Typography, Menu } from '@strapi/design-system';\r\nimport { Plus } from '@strapi/icons';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { useDoc } from '../../../hooks/useDocument';\r\nimport { checkIfAttributeIsDisplayable } from '../../../utils/attributes';\r\nimport { getTranslation } from '../../../utils/translations';\r\n\r\nimport { DraggableCard, DraggableCardProps } from './DraggableCard';\r\n\r\nimport type { ListLayout } from '../../../hooks/useDocumentLayout';\r\nimport type { FormData } from '../ListConfigurationPage';\r\n\r\ninterface SortDisplayedFieldsProps extends Pick<ListLayout, 'metadatas'> {}\r\n\r\nconst SortDisplayedFields = ({ metadatas }: SortDisplayedFieldsProps) => {\r\n  const { formatMessage } = useIntl();\r\n  const { schema } = useDoc();\r\n  const [isDraggingSibling, setIsDraggingSibling] = React.useState(false);\r\n  const [lastAction, setLastAction] = React.useState<string | null>(null);\r\n  const scrollableContainerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  const values = useForm<FormData['layout']>(\r\n    'SortDisplayedFields',\r\n    (state) => (state.values as FormData).layout ?? []\r\n  );\r\n  const addFieldRow = useForm('SortDisplayedFields', (state) => state.addFieldRow);\r\n  const removeFieldRow = useForm('SortDisplayedFields', (state) => state.removeFieldRow);\r\n  const moveFieldRow = useForm('SortDisplayedFields', (state) => state.moveFieldRow);\r\n\r\n  /**\r\n   * This is our list of fields that are not displayed in the current layout\r\n   * so we create their default state to be added to the layout.\r\n   */\r\n  const nonDisplayedFields = React.useMemo(() => {\r\n    if (!schema) {\r\n      return [];\r\n    }\r\n\r\n    const displayedFieldNames = values.map((field) => field.name);\r\n\r\n    return Object.entries(schema.attributes).reduce<Array<FormData['layout'][number]>>(\r\n      (acc, [name, attribute]) => {\r\n        if (!displayedFieldNames.includes(name) && checkIfAttributeIsDisplayable(attribute)) {\r\n          const metadata = metadatas[name] || { label: name };\r\n\r\n          acc.push({\r\n            name,\r\n            label: metadata.label || name,\r\n            sortable: metadata.sortable,\r\n          });\r\n        }\r\n\r\n        return acc;\r\n      },\r\n      []\r\n    );\r\n  }, [metadatas, values, schema]);\r\n\r\n  const handleAddField = (field: FormData['layout'][number]) => {\r\n    setLastAction('add');\r\n    addFieldRow('layout', field);\r\n  };\r\n\r\n  const handleRemoveField = (index: number) => {\r\n    setLastAction('remove');\r\n    removeFieldRow('layout', index);\r\n  };\r\n\r\n  const handleMoveField: DraggableCardProps['onMoveField'] = (dragIndex, hoverIndex) => {\r\n    moveFieldRow('layout', dragIndex, hoverIndex);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    if (lastAction === 'add' && scrollableContainerRef?.current) {\r\n      scrollableContainerRef.current.scrollLeft = scrollableContainerRef.current.scrollWidth;\r\n    }\r\n  }, [lastAction]);\r\n\r\n  return (\r\n    <Flex alignItems=\"stretch\" direction=\"column\" gap={4}>\r\n      <Typography variant=\"delta\" tag=\"h2\">\r\n        {formatMessage({\r\n          id: getTranslation('containers.SettingPage.view'),\r\n          defaultMessage: 'View',\r\n        })}\r\n      </Typography>\r\n\r\n      <Flex padding={4} borderColor=\"neutral300\" borderStyle=\"dashed\" borderWidth=\"1px\" hasRadius>\r\n        <Box flex=\"1\" overflow=\"auto hidden\" ref={scrollableContainerRef}>\r\n          <Flex gap={3}>\r\n            {values.map((field, index) => (\r\n              <DraggableCard\r\n                key={field.name}\r\n                index={index}\r\n                isDraggingSibling={isDraggingSibling}\r\n                onMoveField={handleMoveField}\r\n                onRemoveField={() => handleRemoveField(index)}\r\n                setIsDraggingSibling={setIsDraggingSibling}\r\n                {...field}\r\n                attribute={schema!.attributes[field.name]}\r\n                label={typeof field.label === 'object' ? formatMessage(field.label) : field.label}\r\n              />\r\n            ))}\r\n          </Flex>\r\n        </Box>\r\n\r\n        <Menu.Root>\r\n          <Menu.Trigger\r\n            paddingLeft={2}\r\n            paddingRight={2}\r\n            justifyContent=\"center\"\r\n            endIcon={null}\r\n            disabled={nonDisplayedFields.length === 0}\r\n            variant=\"tertiary\"\r\n          >\r\n            <VisuallyHidden tag=\"span\">\r\n              {formatMessage({\r\n                id: getTranslation('components.FieldSelect.label'),\r\n                defaultMessage: 'Add a field',\r\n              })}\r\n            </VisuallyHidden>\r\n            <Plus aria-hidden focusable={false} style={{ position: 'relative', top: 2 }} />\r\n          </Menu.Trigger>\r\n          <Menu.Content>\r\n            {nonDisplayedFields.map((field) => (\r\n              <Menu.Item key={field.name} onSelect={() => handleAddField(field)}>\r\n                {typeof field.label === 'object' ? formatMessage(field.label) : field.label}\r\n              </Menu.Item>\r\n            ))}\r\n          </Menu.Content>\r\n        </Menu.Root>\r\n      </Flex>\r\n    </Flex>\r\n  );\r\n};\r\n\r\nexport { SortDisplayedFields };\r\nexport type { SortDisplayedFieldsProps };\r\n"],"names":["SortDisplayedFields","metadatas","formatMessage","useIntl","schema","useDoc","isDraggingSibling","setIsDraggingSibling","React","useState","lastAction","setLastAction","scrollableContainerRef","useRef","values","useForm","state","layout","addFieldRow","removeFieldRow","moveFieldRow","nonDisplayedFields","useMemo","displayedFieldNames","map","field","name","Object","entries","attributes","reduce","acc","attribute","includes","checkIfAttributeIsDisplayable","metadata","label","push","sortable","handleAddField","handleRemoveField","index","handleMoveField","dragIndex","hoverIndex","useEffect","current","scrollLeft","scrollWidth","_jsxs","Flex","alignItems","direction","gap","_jsx","Typography","variant","tag","id","getTranslation","defaultMessage","padding","borderColor","borderStyle","borderWidth","hasRadius","Box","flex","overflow","ref","DraggableCard","onMoveField","onRemoveField","Menu","Root","Trigger","paddingLeft","paddingRight","justifyContent","endIcon","disabled","length","VisuallyHidden","Plus","aria-hidden","focusable","style","position","top","Content","Item","onSelect"],"mappings":";;;;;;;;;;;AAkBA,MAAMA,mBAAAA,GAAsB,CAAC,EAAEC,SAAS,EAA4B,GAAA;IAClE,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAEC,MAAM,EAAE,GAAGC,MAAAA,EAAAA;AACnB,IAAA,MAAM,CAACC,iBAAAA,EAAmBC,oBAAAA,CAAqB,GAAGC,KAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;AACjE,IAAA,MAAM,CAACC,UAAAA,EAAYC,aAAAA,CAAc,GAAGH,KAAAA,CAAMC,QAAQ,CAAgB,IAAA,CAAA;IAClE,MAAMG,sBAAAA,GAAyBJ,KAAAA,CAAMK,MAAM,CAAiB,IAAA,CAAA;IAE5D,MAAMC,MAAAA,GAASC,OAAAA,CACb,qBAAA,EACA,CAACC,KAAAA,GAAU,KAACA,CAAMF,MAAM,CAAcG,MAAM,IAAI,EAAE,CAAA;AAEpD,IAAA,MAAMC,cAAcH,OAAAA,CAAQ,qBAAA,EAAuB,CAACC,KAAAA,GAAUA,MAAME,WAAW,CAAA;AAC/E,IAAA,MAAMC,iBAAiBJ,OAAAA,CAAQ,qBAAA,EAAuB,CAACC,KAAAA,GAAUA,MAAMG,cAAc,CAAA;AACrF,IAAA,MAAMC,eAAeL,OAAAA,CAAQ,qBAAA,EAAuB,CAACC,KAAAA,GAAUA,MAAMI,YAAY,CAAA;AAEjF;;;AAGC,MACD,MAAMC,kBAAAA,GAAqBb,KAAAA,CAAMc,OAAO,CAAC,IAAA;AACvC,QAAA,IAAI,CAAClB,MAAAA,EAAQ;AACX,YAAA,OAAO,EAAE;AACX,QAAA;AAEA,QAAA,MAAMmB,sBAAsBT,MAAAA,CAAOU,GAAG,CAAC,CAACC,KAAAA,GAAUA,MAAMC,IAAI,CAAA;AAE5D,QAAA,OAAOC,MAAAA,CAAOC,OAAO,CAACxB,MAAAA,CAAOyB,UAAU,CAAA,CAAEC,MAAM,CAC7C,CAACC,GAAAA,EAAK,CAACL,IAAAA,EAAMM,SAAAA,CAAU,GAAA;AACrB,YAAA,IAAI,CAACT,mBAAAA,CAAoBU,QAAQ,CAACP,IAAAA,CAAAA,IAASQ,8BAA8BF,SAAAA,CAAAA,EAAY;AACnF,gBAAA,MAAMG,QAAAA,GAAWlC,SAAS,CAACyB,IAAAA,CAAK,IAAI;oBAAEU,KAAAA,EAAOV;AAAK,iBAAA;AAElDK,gBAAAA,GAAAA,CAAIM,IAAI,CAAC;AACPX,oBAAAA,IAAAA;oBACAU,KAAAA,EAAOD,QAAAA,CAASC,KAAK,IAAIV,IAAAA;AACzBY,oBAAAA,QAAAA,EAAUH,SAASG;AACrB,iBAAA,CAAA;AACF,YAAA;YAEA,OAAOP,GAAAA;AACT,QAAA,CAAA,EACA,EAAE,CAAA;IAEN,CAAA,EAAG;AAAC9B,QAAAA,SAAAA;AAAWa,QAAAA,MAAAA;AAAQV,QAAAA;AAAO,KAAA,CAAA;AAE9B,IAAA,MAAMmC,iBAAiB,CAACd,KAAAA,GAAAA;QACtBd,aAAAA,CAAc,KAAA,CAAA;AACdO,QAAAA,WAAAA,CAAY,QAAA,EAAUO,KAAAA,CAAAA;AACxB,IAAA,CAAA;AAEA,IAAA,MAAMe,oBAAoB,CAACC,KAAAA,GAAAA;QACzB9B,aAAAA,CAAc,QAAA,CAAA;AACdQ,QAAAA,cAAAA,CAAe,QAAA,EAAUsB,KAAAA,CAAAA;AAC3B,IAAA,CAAA;IAEA,MAAMC,eAAAA,GAAqD,CAACC,SAAAA,EAAWC,UAAAA,GAAAA;AACrExB,QAAAA,YAAAA,CAAa,UAAUuB,SAAAA,EAAWC,UAAAA,CAAAA;AACpC,IAAA,CAAA;AAEApC,IAAAA,KAAAA,CAAMqC,SAAS,CAAC,IAAA;QACd,IAAInC,UAAAA,KAAe,KAAA,IAASE,sBAAAA,EAAwBkC,OAAAA,EAAS;AAC3DlC,YAAAA,sBAAAA,CAAuBkC,OAAO,CAACC,UAAU,GAAGnC,sBAAAA,CAAuBkC,OAAO,CAACE,WAAW;AACxF,QAAA;IACF,CAAA,EAAG;AAACtC,QAAAA;AAAW,KAAA,CAAA;AAEf,IAAA,qBACEuC,IAAA,CAACC,IAAAA,EAAAA;QAAKC,UAAAA,EAAW,SAAA;QAAUC,SAAAA,EAAU,QAAA;QAASC,GAAAA,EAAK,CAAA;;0BACjDC,GAAA,CAACC,UAAAA,EAAAA;gBAAWC,OAAAA,EAAQ,OAAA;gBAAQC,GAAAA,EAAI,IAAA;0BAC7BvD,aAAAA,CAAc;AACbwD,oBAAAA,EAAAA,EAAIC,cAAAA,CAAe,6BAAA,CAAA;oBACnBC,cAAAA,EAAgB;AAClB,iBAAA;;0BAGFX,IAAA,CAACC,IAAAA,EAAAA;gBAAKW,OAAAA,EAAS,CAAA;gBAAGC,WAAAA,EAAY,YAAA;gBAAaC,WAAAA,EAAY,QAAA;gBAASC,WAAAA,EAAY,KAAA;gBAAMC,SAAS,EAAA,IAAA;;kCACzFX,GAAA,CAACY,GAAAA,EAAAA;wBAAIC,IAAAA,EAAK,GAAA;wBAAIC,QAAAA,EAAS,aAAA;wBAAcC,GAAAA,EAAKzD,sBAAAA;AACxC,wBAAA,QAAA,gBAAA0C,GAAA,CAACJ,IAAAA,EAAAA;4BAAKG,GAAAA,EAAK,CAAA;AACRvC,4BAAAA,QAAAA,EAAAA,MAAAA,CAAOU,GAAG,CAAC,CAACC,KAAAA,EAAOgB,sBAClBa,GAAA,CAACgB,aAAAA,EAAAA;oCAEC7B,KAAAA,EAAOA,KAAAA;oCACPnC,iBAAAA,EAAmBA,iBAAAA;oCACnBiE,WAAAA,EAAa7B,eAAAA;AACb8B,oCAAAA,aAAAA,EAAe,IAAMhC,iBAAAA,CAAkBC,KAAAA,CAAAA;oCACvClC,oBAAAA,EAAsBA,oBAAAA;AACrB,oCAAA,GAAGkB,KAAK;AACTO,oCAAAA,SAAAA,EAAW5B,MAAAA,CAAQyB,UAAU,CAACJ,KAAAA,CAAMC,IAAI,CAAC;oCACzCU,KAAAA,EAAO,OAAOX,KAAAA,CAAMW,KAAK,KAAK,QAAA,GAAWlC,cAAcuB,KAAAA,CAAMW,KAAK,CAAA,GAAIX,KAAAA,CAAMW;AARvEX,iCAAAA,EAAAA,KAAAA,CAAMC,IAAI,CAAA;;;AAcvB,kCAAAuB,IAAA,CAACwB,KAAKC,IAAI,EAAA;;AACR,0CAAAzB,IAAA,CAACwB,KAAKE,OAAO,EAAA;gCACXC,WAAAA,EAAa,CAAA;gCACbC,YAAAA,EAAc,CAAA;gCACdC,cAAAA,EAAe,QAAA;gCACfC,OAAAA,EAAS,IAAA;gCACTC,QAAAA,EAAU3D,kBAAAA,CAAmB4D,MAAM,KAAK,CAAA;gCACxCzB,OAAAA,EAAQ,UAAA;;kDAERF,GAAA,CAAC4B,cAAAA,EAAAA;wCAAezB,GAAAA,EAAI,MAAA;kDACjBvD,aAAAA,CAAc;AACbwD,4CAAAA,EAAAA,EAAIC,cAAAA,CAAe,8BAAA,CAAA;4CACnBC,cAAAA,EAAgB;AAClB,yCAAA;;kDAEFN,GAAA,CAAC6B,IAAAA,EAAAA;wCAAKC,aAAW,EAAA,IAAA;wCAACC,SAAAA,EAAW,KAAA;wCAAOC,KAAAA,EAAO;4CAAEC,QAAAA,EAAU,UAAA;4CAAYC,GAAAA,EAAK;AAAE;;;;AAE5E,0CAAAlC,GAAA,CAACmB,KAAKgB,OAAO,EAAA;AACVpE,gCAAAA,QAAAA,EAAAA,kBAAAA,CAAmBG,GAAG,CAAC,CAACC,KAAAA,iBACvB6B,GAAA,CAACmB,KAAKiB,IAAI,EAAA;AAAkBC,wCAAAA,QAAAA,EAAU,IAAMpD,cAAAA,CAAed,KAAAA,CAAAA;kDACxD,OAAOA,KAAAA,CAAMW,KAAK,KAAK,QAAA,GAAWlC,cAAcuB,KAAAA,CAAMW,KAAK,CAAA,GAAIX,KAAAA,CAAMW;AADxDX,qCAAAA,EAAAA,KAAAA,CAAMC,IAAI,CAAA;;;;;;;;AASxC;;;;"}