npm - @strapi/content-manager - Versions diffs - 0.0.0-experimental.4e8289da194e4249b943687480ee5bc44df3a99b → 0.0.0-experimental.5012b17fdc42545b7826f8fab2f323ecbd113cc3 - Mend

@strapi/content-manager 0.0.0-experimental.4e8289da194e4249b943687480ee5bc44df3a99b → 0.0.0-experimental.5012b17fdc42545b7826f8fab2f323ecbd113cc3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (224) hide show

package/dist/admin/components/ConfigurationForm/Form.js CHANGED Viewed

@@ -44,7 +44,7 @@ const ConfigurationForm = ({ attributes: attributes$1, fieldSizes, layout: editL
         layout,
         settings
     ]);
-    return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Layouts.Root, {
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
         children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Main, {
             children: /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.Form, {
                 initialValues: initialValues,

package/dist/admin/components/ConfigurationForm/Form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Form.js","sources":["../../../../admin/src/components/ConfigurationForm/Form.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Form,\n FormProps,\n useForm,\n InputRenderer,\n BackButton,\n Layouts,\n} from '@strapi/admin/strapi-admin';\nimport { Button, Divider, Flex, Grid, Main, Typography } from '@strapi/design-system';\nimport { generateNKeysBetween } from 'fractional-indexing';\nimport pipe from 'lodash/fp/pipe';\nimport { useIntl } from 'react-intl';\n\nimport { ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD } from '../../constants/attributes';\nimport { capitalise } from '../../utils/strings';\nimport { getTranslation } from '../../utils/translations';\n\nimport { Fields, FieldsProps, TEMP_FIELD_NAME } from './Fields';\n\nimport type { EditFieldLayout, EditLayout } from '../../hooks/useDocumentLayout';\n\n/* -------------------------------------------------------------------------------------------------\n * ConfigurationForm\n * -----------------------------------------------------------------------------------------------/\n\ninterface ConfigurationFormProps extends Pick<FieldsProps, 'attributes' \| 'fieldSizes'> {\n layout: EditLayout;\n onSubmit: FormProps<ConfigurationFormData>['onSubmit'];\n}\n\n/\n Every key in EditFieldLayout is turned to optional never and then we overwrite the ones we are using.\n /\n\ntype EditFieldSpacerLayout = {\n [key in keyof Omit<EditFieldLayout, 'name' \| 'size'>]?: never;\n} & {\n description?: never;\n editable?: never;\n name: '_TEMP_';\n size: number;\n __temp_key__: string;\n};\n\ninterface ConfigurationFormData extends Pick<EditLayout, 'settings'> {\n layout: Array<{\n __temp_key__: string;\n children: Array<\n \| (Pick<EditFieldLayout, 'label' \| 'size' \| 'name' \| 'placeholder' \| 'mainField'> & {\n description: EditFieldLayout['hint'];\n editable: EditFieldLayout['disabled'];\n __temp_key__: string;\n })\n \| EditFieldSpacerLayout\n >;\n }>;\n}\n\nconst ConfigurationForm = ({\n attributes,\n fieldSizes,\n layout: editLayout,\n onSubmit,\n}: ConfigurationFormProps) => {\n const { components, settings, layout, metadatas } = editLayout;\n\n const { formatMessage } = useIntl();\n\n const initialValues: ConfigurationFormData = React.useMemo(() => {\n const transformations = pipe(\n flattenPanels,\n replaceMainFieldWithNameOnly,\n extractMetadata,\n addTmpSpaceToLayout,\n addTmpKeysToLayout\n );\n\n return {\n layout: transformations(layout),\n settings,\n };\n }, [layout, settings]);\n\n return (\n <Layouts.Root>\n <Main>\n <Form initialValues={initialValues} onSubmit={onSubmit} method=\"PUT\">\n <Header name={settings.displayName ?? ''} />\n <Layouts.Content>\n <Flex\n alignItems=\"stretch\"\n background=\"neutral0\"\n direction=\"column\"\n gap={6}\n hasRadius\n shadow=\"tableShadow\"\n paddingTop={6}\n paddingBottom={6}\n paddingLeft={7}\n paddingRight={7}\n >\n <Typography variant=\"delta\" tag=\"h2\">\n {formatMessage({\n id: getTranslation('containers.SettingPage.settings'),\n defaultMessage: 'Settings',\n })}\n </Typography>\n <Grid.Root>\n <Grid.Item col={6} s={12} direction=\"column\" alignItems=\"stretch\">\n <InputRenderer\n type=\"enumeration\"\n label={formatMessage({\n id: getTranslation('containers.SettingPage.editSettings.entry.title'),\n defaultMessage: 'Entry title',\n })}\n hint={formatMessage({\n id: getTranslation(\n 'containers.SettingPage.editSettings.entry.title.description'\n ),\n defaultMessage: 'Set the display field of your entry',\n })}\n name=\"settings.mainField\"\n options={Object.entries(attributes).reduce<\n Array<{ label: string; value: string }>\n >((acc, [key, attribute]) => {\n if (!attribute) {\n return acc;\n }\n\n /\n Create the list of attributes from the schema as to which can\n * be our `mainField` and dictate the display name of the schema\n * we're editing.\n /\n if (!ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD.includes(attribute.type)) {\n acc.push({\n label: key,\n value: key,\n });\n }\n\n return acc;\n }, [])}\n />\n </Grid.Item>\n <Grid.Item\n paddingTop={6}\n paddingBottom={6}\n col={12}\n s={12}\n direction=\"column\"\n alignItems=\"stretch\"\n >\n <Divider />\n </Grid.Item>\n <Grid.Item col={12} s={12} direction=\"column\" alignItems=\"stretch\">\n <Typography variant=\"delta\" tag=\"h3\">\n {formatMessage({\n id: getTranslation('containers.SettingPage.view'),\n defaultMessage: 'View',\n })}\n </Typography>\n </Grid.Item>\n <Grid.Item col={12} s={12} direction=\"column\" alignItems=\"stretch\">\n <Fields\n attributes={attributes}\n components={components}\n fieldSizes={fieldSizes}\n metadatas={metadatas}\n />\n </Grid.Item>\n </Grid.Root>\n </Flex>\n </Layouts.Content>\n </Form>\n </Main>\n </Layouts.Root>\n );\n};\n\n/\n @internal\n * @description Panels don't exist in the layout, so we flatten by one.\n /\nconst flattenPanels = (layout: EditLayout['layout']): EditLayout['layout'][number] =>\n layout.flat(1);\n\n/\n @internal\n * @description We don't need the mainField object in the layout, we only need the name.\n /\nconst replaceMainFieldWithNameOnly = (layout: EditLayout['layout'][number]) =>\n layout.map((row) =>\n row.map((field) => ({\n ...field,\n mainField: field.mainField?.name,\n }))\n );\n\n/\n @internal\n * @description We extract the metadata values from the field layout, because these are editable by the user.\n /\nconst extractMetadata = (\n layout: EditLayout['layout'][number]\n): Array<Exclude<ConfigurationFormData['layout'], { name: '_TEMP_' }>[number]['children']> => {\n return layout.map((row) =>\n row.map(({ label, disabled, hint, placeholder, size, name, mainField }) => ({\n label,\n editable: !disabled,\n description: hint,\n mainField,\n placeholder,\n size,\n name,\n __temp_key__: '',\n }))\n );\n};\n\n/\n @internal\n * @description Each row of the layout has a max size of 12 (based on bootstrap grid system)\n * So in order to offer a better drop zone we add the _TEMP_ div to complete the remaining substract (12 - existing)\n /\nconst addTmpSpaceToLayout = (\n layout: ReturnType<typeof extractMetadata>\n): Array<ConfigurationFormData['layout'][number]['children']> => [\n ...layout.map((row) => {\n const totalSpaceTaken = row.reduce((acc, field) => acc + field.size, 0);\n\n if (totalSpaceTaken < 12) {\n return [\n ...row,\n {\n name: TEMP_FIELD_NAME,\n size: 12 - totalSpaceTaken,\n __temp_key__: '',\n } satisfies EditFieldSpacerLayout,\n ];\n }\n\n return row;\n }),\n];\n\n/\n @internal\n * @description At this point of the transformations we have Field[][], but each row for the form should have a __temp_key__\n * applied. This means we need to change it so `Field` is nested under the children property.\n /\nconst addTmpKeysToLayout = (\n layout: ReturnType<typeof addTmpSpaceToLayout>\n): ConfigurationFormData['layout'] => {\n const keys = generateNKeysBetween(undefined, undefined, layout.length);\n\n return layout.map((row, rowIndex) => {\n const fieldKeys = generateNKeysBetween(undefined, undefined, row.length);\n\n return {\n __temp_key__: keys[rowIndex],\n children: row.map((field, fieldIndex) => {\n return {\n ...field,\n __temp_key__: fieldKeys[fieldIndex],\n };\n }),\n };\n });\n};\n\n/ -------------------------------------------------------------------------------------------------\n * Header\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderProps {\n name: string;\n}\n\nconst Header = ({ name }: HeaderProps) => {\n const { formatMessage } = useIntl();\n const modified = useForm('Header', (state) => state.modified);\n const isSubmitting = useForm('Header', (state) => state.isSubmitting);\n\n return (\n <Layouts.Header\n title={formatMessage(\n {\n id: getTranslation('components.SettingsViewWrapper.pluginHeader.title'),\n defaultMessage: `Configure the view - {name}`,\n },\n { name: capitalise(name) }\n )}\n subtitle={formatMessage({\n id: getTranslation('components.SettingsViewWrapper.pluginHeader.description.edit-settings'),\n defaultMessage: 'Customize how the edit view will look like.',\n })}\n navigationAction={<BackButton />}\n primaryAction={\n <Button disabled={!modified} loading={isSubmitting} type=\"submit\">\n {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}\n </Button>\n }\n />\n );\n};\n\nexport { ConfigurationForm };\nexport type { ConfigurationFormProps, ConfigurationFormData, EditFieldSpacerLayout };\n"],"names":["ConfigurationForm","attributes","fieldSizes","layout","editLayout","onSubmit","components","settings","metadatas","formatMessage","useIntl","initialValues","React","useMemo","transformations","pipe","flattenPanels","replaceMainFieldWithNameOnly","extractMetadata","addTmpSpaceToLayout","addTmpKeysToLayout","_jsx","Layouts","Root","Main","_jsxs","Form","method","Header","name","displayName","Content","Flex","alignItems","background","direction","gap","hasRadius","shadow","paddingTop","paddingBottom","paddingLeft","paddingRight","Typography","variant","tag","id","getTranslation","defaultMessage","Grid","Item","col","s","InputRenderer","type","label","hint","options","Object","entries","reduce","acc","key","attribute","ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD","includes","push","value","Divider","Fields","flat","map","row","field","mainField","disabled","placeholder","size","editable","description","__temp_key__","totalSpaceTaken","TEMP_FIELD_NAME","keys","generateNKeysBetween","undefined","length","rowIndex","fieldKeys","children","fieldIndex","modified","useForm","state","isSubmitting","title","capitalise","subtitle","navigationAction","BackButton","primaryAction","Button","loading"],"mappings":"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"}
1	+ {"version":3,"file":"Form.js","sources":["../../../../admin/src/components/ConfigurationForm/Form.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Form,\n FormProps,\n useForm,\n InputRenderer,\n BackButton,\n Layouts,\n} from '@strapi/admin/strapi-admin';\nimport { Button, Divider, Flex, Grid, Main, Typography } from '@strapi/design-system';\nimport { generateNKeysBetween } from 'fractional-indexing';\nimport pipe from 'lodash/fp/pipe';\nimport { useIntl } from 'react-intl';\n\nimport { ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD } from '../../constants/attributes';\nimport { capitalise } from '../../utils/strings';\nimport { getTranslation } from '../../utils/translations';\n\nimport { Fields, FieldsProps, TEMP_FIELD_NAME } from './Fields';\n\nimport type { EditFieldLayout, EditLayout } from '../../hooks/useDocumentLayout';\n\n/* -------------------------------------------------------------------------------------------------\n * ConfigurationForm\n * -----------------------------------------------------------------------------------------------/\n\ninterface ConfigurationFormProps extends Pick<FieldsProps, 'attributes' \| 'fieldSizes'> {\n layout: EditLayout;\n onSubmit: FormProps<ConfigurationFormData>['onSubmit'];\n}\n\n/\n Every key in EditFieldLayout is turned to optional never and then we overwrite the ones we are using.\n /\n\ntype EditFieldSpacerLayout = {\n [key in keyof Omit<EditFieldLayout, 'name' \| 'size'>]?: never;\n} & {\n description?: never;\n editable?: never;\n name: '_TEMP_';\n size: number;\n __temp_key__: string;\n};\n\ninterface ConfigurationFormData extends Pick<EditLayout, 'settings'> {\n layout: Array<{\n __temp_key__: string;\n children: Array<\n \| (Pick<EditFieldLayout, 'label' \| 'size' \| 'name' \| 'placeholder' \| 'mainField'> & {\n description: EditFieldLayout['hint'];\n editable: EditFieldLayout['disabled'];\n __temp_key__: string;\n })\n \| EditFieldSpacerLayout\n >;\n }>;\n}\n\nconst ConfigurationForm = ({\n attributes,\n fieldSizes,\n layout: editLayout,\n onSubmit,\n}: ConfigurationFormProps) => {\n const { components, settings, layout, metadatas } = editLayout;\n\n const { formatMessage } = useIntl();\n\n const initialValues: ConfigurationFormData = React.useMemo(() => {\n const transformations = pipe(\n flattenPanels,\n replaceMainFieldWithNameOnly,\n extractMetadata,\n addTmpSpaceToLayout,\n addTmpKeysToLayout\n );\n\n return {\n layout: transformations(layout),\n settings,\n };\n }, [layout, settings]);\n\n return (\n <>\n <Main>\n <Form initialValues={initialValues} onSubmit={onSubmit} method=\"PUT\">\n <Header name={settings.displayName ?? ''} />\n <Layouts.Content>\n <Flex\n alignItems=\"stretch\"\n background=\"neutral0\"\n direction=\"column\"\n gap={6}\n hasRadius\n shadow=\"tableShadow\"\n paddingTop={6}\n paddingBottom={6}\n paddingLeft={7}\n paddingRight={7}\n >\n <Typography variant=\"delta\" tag=\"h2\">\n {formatMessage({\n id: getTranslation('containers.SettingPage.settings'),\n defaultMessage: 'Settings',\n })}\n </Typography>\n <Grid.Root>\n <Grid.Item col={6} s={12} direction=\"column\" alignItems=\"stretch\">\n <InputRenderer\n type=\"enumeration\"\n label={formatMessage({\n id: getTranslation('containers.SettingPage.editSettings.entry.title'),\n defaultMessage: 'Entry title',\n })}\n hint={formatMessage({\n id: getTranslation(\n 'containers.SettingPage.editSettings.entry.title.description'\n ),\n defaultMessage: 'Set the display field of your entry',\n })}\n name=\"settings.mainField\"\n options={Object.entries(attributes).reduce<\n Array<{ label: string; value: string }>\n >((acc, [key, attribute]) => {\n if (!attribute) {\n return acc;\n }\n\n /\n Create the list of attributes from the schema as to which can\n * be our `mainField` and dictate the display name of the schema\n * we're editing.\n /\n if (!ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD.includes(attribute.type)) {\n acc.push({\n label: key,\n value: key,\n });\n }\n\n return acc;\n }, [])}\n />\n </Grid.Item>\n <Grid.Item\n paddingTop={6}\n paddingBottom={6}\n col={12}\n s={12}\n direction=\"column\"\n alignItems=\"stretch\"\n >\n <Divider />\n </Grid.Item>\n <Grid.Item col={12} s={12} direction=\"column\" alignItems=\"stretch\">\n <Typography variant=\"delta\" tag=\"h3\">\n {formatMessage({\n id: getTranslation('containers.SettingPage.view'),\n defaultMessage: 'View',\n })}\n </Typography>\n </Grid.Item>\n <Grid.Item col={12} s={12} direction=\"column\" alignItems=\"stretch\">\n <Fields\n attributes={attributes}\n components={components}\n fieldSizes={fieldSizes}\n metadatas={metadatas}\n />\n </Grid.Item>\n </Grid.Root>\n </Flex>\n </Layouts.Content>\n </Form>\n </Main>\n </>\n );\n};\n\n/\n @internal\n * @description Panels don't exist in the layout, so we flatten by one.\n /\nconst flattenPanels = (layout: EditLayout['layout']): EditLayout['layout'][number] =>\n layout.flat(1);\n\n/\n @internal\n * @description We don't need the mainField object in the layout, we only need the name.\n /\nconst replaceMainFieldWithNameOnly = (layout: EditLayout['layout'][number]) =>\n layout.map((row) =>\n row.map((field) => ({\n ...field,\n mainField: field.mainField?.name,\n }))\n );\n\n/\n @internal\n * @description We extract the metadata values from the field layout, because these are editable by the user.\n /\nconst extractMetadata = (\n layout: EditLayout['layout'][number]\n): Array<Exclude<ConfigurationFormData['layout'], { name: '_TEMP_' }>[number]['children']> => {\n return layout.map((row) =>\n row.map(({ label, disabled, hint, placeholder, size, name, mainField }) => ({\n label,\n editable: !disabled,\n description: hint,\n mainField,\n placeholder,\n size,\n name,\n __temp_key__: '',\n }))\n );\n};\n\n/\n @internal\n * @description Each row of the layout has a max size of 12 (based on bootstrap grid system)\n * So in order to offer a better drop zone we add the _TEMP_ div to complete the remaining substract (12 - existing)\n /\nconst addTmpSpaceToLayout = (\n layout: ReturnType<typeof extractMetadata>\n): Array<ConfigurationFormData['layout'][number]['children']> => [\n ...layout.map((row) => {\n const totalSpaceTaken = row.reduce((acc, field) => acc + field.size, 0);\n\n if (totalSpaceTaken < 12) {\n return [\n ...row,\n {\n name: TEMP_FIELD_NAME,\n size: 12 - totalSpaceTaken,\n __temp_key__: '',\n } satisfies EditFieldSpacerLayout,\n ];\n }\n\n return row;\n }),\n];\n\n/\n @internal\n * @description At this point of the transformations we have Field[][], but each row for the form should have a __temp_key__\n * applied. This means we need to change it so `Field` is nested under the children property.\n /\nconst addTmpKeysToLayout = (\n layout: ReturnType<typeof addTmpSpaceToLayout>\n): ConfigurationFormData['layout'] => {\n const keys = generateNKeysBetween(undefined, undefined, layout.length);\n\n return layout.map((row, rowIndex) => {\n const fieldKeys = generateNKeysBetween(undefined, undefined, row.length);\n\n return {\n __temp_key__: keys[rowIndex],\n children: row.map((field, fieldIndex) => {\n return {\n ...field,\n __temp_key__: fieldKeys[fieldIndex],\n };\n }),\n };\n });\n};\n\n/ -------------------------------------------------------------------------------------------------\n * Header\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderProps {\n name: string;\n}\n\nconst Header = ({ name }: HeaderProps) => {\n const { formatMessage } = useIntl();\n const modified = useForm('Header', (state) => state.modified);\n const isSubmitting = useForm('Header', (state) => state.isSubmitting);\n\n return (\n <Layouts.Header\n title={formatMessage(\n {\n id: getTranslation('components.SettingsViewWrapper.pluginHeader.title'),\n defaultMessage: `Configure the view - {name}`,\n },\n { name: capitalise(name) }\n )}\n subtitle={formatMessage({\n id: getTranslation('components.SettingsViewWrapper.pluginHeader.description.edit-settings'),\n defaultMessage: 'Customize how the edit view will look like.',\n })}\n navigationAction={<BackButton />}\n primaryAction={\n <Button disabled={!modified} loading={isSubmitting} type=\"submit\">\n {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}\n </Button>\n }\n />\n );\n};\n\nexport { ConfigurationForm };\nexport type { ConfigurationFormProps, ConfigurationFormData, EditFieldSpacerLayout };\n"],"names":["ConfigurationForm","attributes","fieldSizes","layout","editLayout","onSubmit","components","settings","metadatas","formatMessage","useIntl","initialValues","React","useMemo","transformations","pipe","flattenPanels","replaceMainFieldWithNameOnly","extractMetadata","addTmpSpaceToLayout","addTmpKeysToLayout","_jsx","_Fragment","Main","_jsxs","Form","method","Header","name","displayName","Layouts","Content","Flex","alignItems","background","direction","gap","hasRadius","shadow","paddingTop","paddingBottom","paddingLeft","paddingRight","Typography","variant","tag","id","getTranslation","defaultMessage","Grid","Root","Item","col","s","InputRenderer","type","label","hint","options","Object","entries","reduce","acc","key","attribute","ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD","includes","push","value","Divider","Fields","flat","map","row","field","mainField","disabled","placeholder","size","editable","description","__temp_key__","totalSpaceTaken","TEMP_FIELD_NAME","keys","generateNKeysBetween","undefined","length","rowIndex","fieldKeys","children","fieldIndex","modified","useForm","state","isSubmitting","title","capitalise","subtitle","navigationAction","BackButton","primaryAction","Button","loading"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DMA,MAAAA,iBAAAA,GAAoB,CAAC,cACzBC,YAAU,EACVC,UAAU,EACVC,MAAQC,EAAAA,UAAU,EAClBC,QAAQ,EACe,GAAA;IACvB,MAAM,EAAEC,UAAU,EAAEC,QAAQ,EAAEJ,MAAM,EAAEK,SAAS,EAAE,GAAGJ,UAAAA;IAEpD,MAAM,EAAEK,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAE1B,MAAMC,aAAAA,GAAuCC,gBAAMC,CAAAA,OAAO,CAAC,IAAA;AACzD,QAAA,MAAMC,eAAkBC,GAAAA,IAAAA,CACtBC,aACAC,EAAAA,4BAAAA,EACAC,iBACAC,mBACAC,EAAAA,kBAAAA,CAAAA;QAGF,OAAO;AACLjB,YAAAA,MAAAA,EAAQW,eAAgBX,CAAAA,MAAAA,CAAAA;AACxBI,YAAAA;AACF,SAAA;KACC,EAAA;AAACJ,QAAAA,MAAAA;AAAQI,QAAAA;AAAS,KAAA,CAAA;IAErB,qBACEc,cAAA,CAAAC,mBAAA,EAAA;AACE,QAAA,QAAA,gBAAAD,cAACE,CAAAA,iBAAAA,EAAAA;AACC,YAAA,QAAA,gBAAAC,eAACC,CAAAA,gBAAAA,EAAAA;gBAAKd,aAAeA,EAAAA,aAAAA;gBAAeN,QAAUA,EAAAA,QAAAA;gBAAUqB,MAAO,EAAA,KAAA;;kCAC7DL,cAACM,CAAAA,MAAAA,EAAAA;wBAAOC,IAAMrB,EAAAA,QAAAA,CAASsB,WAAW,IAAI;;AACtC,kCAAAR,cAAA,CAACS,oBAAQC,OAAO,EAAA;AACd,wBAAA,QAAA,gBAAAP,eAACQ,CAAAA,iBAAAA,EAAAA;4BACCC,UAAW,EAAA,SAAA;4BACXC,UAAW,EAAA,UAAA;4BACXC,SAAU,EAAA,QAAA;4BACVC,GAAK,EAAA,CAAA;4BACLC,SAAS,EAAA,IAAA;4BACTC,MAAO,EAAA,aAAA;4BACPC,UAAY,EAAA,CAAA;4BACZC,aAAe,EAAA,CAAA;4BACfC,WAAa,EAAA,CAAA;4BACbC,YAAc,EAAA,CAAA;;8CAEdrB,cAACsB,CAAAA,uBAAAA,EAAAA;oCAAWC,OAAQ,EAAA,OAAA;oCAAQC,GAAI,EAAA,IAAA;8CAC7BpC,aAAc,CAAA;AACbqC,wCAAAA,EAAAA,EAAIC,2BAAe,CAAA,iCAAA,CAAA;wCACnBC,cAAgB,EAAA;AAClB,qCAAA;;AAEF,8CAAAxB,eAAA,CAACyB,kBAAKC,IAAI,EAAA;;AACR,sDAAA7B,cAAA,CAAC4B,kBAAKE,IAAI,EAAA;4CAACC,GAAK,EAAA,CAAA;4CAAGC,CAAG,EAAA,EAAA;4CAAIlB,SAAU,EAAA,QAAA;4CAASF,UAAW,EAAA,SAAA;AACtD,4CAAA,QAAA,gBAAAZ,cAACiC,CAAAA,yBAAAA,EAAAA;gDACCC,IAAK,EAAA,aAAA;AACLC,gDAAAA,KAAAA,EAAO/C,aAAc,CAAA;AACnBqC,oDAAAA,EAAAA,EAAIC,2BAAe,CAAA,iDAAA,CAAA;oDACnBC,cAAgB,EAAA;AAClB,iDAAA,CAAA;AACAS,gDAAAA,IAAAA,EAAMhD,aAAc,CAAA;AAClBqC,oDAAAA,EAAAA,EAAIC,2BACF,CAAA,6DAAA,CAAA;oDAEFC,cAAgB,EAAA;AAClB,iDAAA,CAAA;gDACApB,IAAK,EAAA,oBAAA;gDACL8B,OAASC,EAAAA,MAAAA,CAAOC,OAAO,CAAC3D,YAAY4D,CAAAA,CAAAA,MAAM,CAExC,CAACC,GAAAA,EAAK,CAACC,GAAAA,EAAKC,SAAU,CAAA,GAAA;AACtB,oDAAA,IAAI,CAACA,SAAW,EAAA;wDACd,OAAOF,GAAAA;AACT;AAEA;;;;AAIC,0BACD,IAAI,CAACG,oDAAAA,CAA0CC,QAAQ,CAACF,SAAAA,CAAUT,IAAI,CAAG,EAAA;AACvEO,wDAAAA,GAAAA,CAAIK,IAAI,CAAC;4DACPX,KAAOO,EAAAA,GAAAA;4DACPK,KAAOL,EAAAA;AACT,yDAAA,CAAA;AACF;oDAEA,OAAOD,GAAAA;AACT,iDAAA,EAAG,EAAE;;;AAGT,sDAAAzC,cAAA,CAAC4B,kBAAKE,IAAI,EAAA;4CACRZ,UAAY,EAAA,CAAA;4CACZC,aAAe,EAAA,CAAA;4CACfY,GAAK,EAAA,EAAA;4CACLC,CAAG,EAAA,EAAA;4CACHlB,SAAU,EAAA,QAAA;4CACVF,UAAW,EAAA,SAAA;AAEX,4CAAA,QAAA,gBAAAZ,cAACgD,CAAAA,oBAAAA,EAAAA,EAAAA;;AAEH,sDAAAhD,cAAA,CAAC4B,kBAAKE,IAAI,EAAA;4CAACC,GAAK,EAAA,EAAA;4CAAIC,CAAG,EAAA,EAAA;4CAAIlB,SAAU,EAAA,QAAA;4CAASF,UAAW,EAAA,SAAA;AACvD,4CAAA,QAAA,gBAAAZ,cAACsB,CAAAA,uBAAAA,EAAAA;gDAAWC,OAAQ,EAAA,OAAA;gDAAQC,GAAI,EAAA,IAAA;0DAC7BpC,aAAc,CAAA;AACbqC,oDAAAA,EAAAA,EAAIC,2BAAe,CAAA,6BAAA,CAAA;oDACnBC,cAAgB,EAAA;AAClB,iDAAA;;;AAGJ,sDAAA3B,cAAA,CAAC4B,kBAAKE,IAAI,EAAA;4CAACC,GAAK,EAAA,EAAA;4CAAIC,CAAG,EAAA,EAAA;4CAAIlB,SAAU,EAAA,QAAA;4CAASF,UAAW,EAAA,SAAA;AACvD,4CAAA,QAAA,gBAAAZ,cAACiD,CAAAA,aAAAA,EAAAA;gDACCrE,UAAYA,EAAAA,YAAAA;gDACZK,UAAYA,EAAAA,UAAAA;gDACZJ,UAAYA,EAAAA,UAAAA;gDACZM,SAAWA,EAAAA;;;;;;;;;;;;AAU/B;AAEA;;;AAGC,IACD,MAAMQ,aAAgB,GAAA,CAACb,MACrBA,GAAAA,MAAAA,CAAOoE,IAAI,CAAC,CAAA,CAAA;AAEd;;;AAGC,IACD,MAAMtD,4BAAAA,GAA+B,CAACd,MAAAA,GACpCA,OAAOqE,GAAG,CAAC,CAACC,GAAAA,GACVA,GAAID,CAAAA,GAAG,CAAC,CAACE,SAAW;AAClB,gBAAA,GAAGA,KAAK;gBACRC,SAAWD,EAAAA,KAAAA,CAAMC,SAAS,EAAE/C;aAC9B,CAAA,CAAA,CAAA;AAGJ;;;IAIA,MAAMV,kBAAkB,CACtBf,MAAAA,GAAAA;IAEA,OAAOA,MAAAA,CAAOqE,GAAG,CAAC,CAACC,GAAAA,GACjBA,IAAID,GAAG,CAAC,CAAC,EAAEhB,KAAK,EAAEoB,QAAQ,EAAEnB,IAAI,EAAEoB,WAAW,EAAEC,IAAI,EAAElD,IAAI,EAAE+C,SAAS,EAAE,IAAM;AAC1EnB,gBAAAA,KAAAA;AACAuB,gBAAAA,QAAAA,EAAU,CAACH,QAAAA;gBACXI,WAAavB,EAAAA,IAAAA;AACbkB,gBAAAA,SAAAA;AACAE,gBAAAA,WAAAA;AACAC,gBAAAA,IAAAA;AACAlD,gBAAAA,IAAAA;gBACAqD,YAAc,EAAA;aAChB,CAAA,CAAA,CAAA;AAEJ,CAAA;AAEA;;;;IAKA,MAAM9D,mBAAsB,GAAA,CAC1BhB,MAC+D,GAAA;WAC5DA,MAAOqE,CAAAA,GAAG,CAAC,CAACC,GAAAA,GAAAA;YACb,MAAMS,eAAAA,GAAkBT,GAAIZ,CAAAA,MAAM,CAAC,CAACC,KAAKY,KAAUZ,GAAAA,GAAAA,GAAMY,KAAMI,CAAAA,IAAI,EAAE,CAAA,CAAA;AAErE,YAAA,IAAII,kBAAkB,EAAI,EAAA;gBACxB,OAAO;AACFT,oBAAAA,GAAAA,GAAAA;AACH,oBAAA;wBACE7C,IAAMuD,EAAAA,sBAAAA;AACNL,wBAAAA,IAAAA,EAAM,EAAKI,GAAAA,eAAAA;wBACXD,YAAc,EAAA;AAChB;AACD,iBAAA;AACH;YAEA,OAAOR,GAAAA;AACT,SAAA;AACD,KAAA;AAED;;;;IAKA,MAAMrD,qBAAqB,CACzBjB,MAAAA,GAAAA;AAEA,IAAA,MAAMiF,IAAOC,GAAAA,uCAAAA,CAAqBC,SAAWA,EAAAA,SAAAA,EAAWnF,OAAOoF,MAAM,CAAA;AAErE,IAAA,OAAOpF,MAAOqE,CAAAA,GAAG,CAAC,CAACC,GAAKe,EAAAA,QAAAA,GAAAA;AACtB,QAAA,MAAMC,SAAYJ,GAAAA,uCAAAA,CAAqBC,SAAWA,EAAAA,SAAAA,EAAWb,IAAIc,MAAM,CAAA;QAEvE,OAAO;YACLN,YAAcG,EAAAA,IAAI,CAACI,QAAS,CAAA;AAC5BE,YAAAA,QAAAA,EAAUjB,GAAID,CAAAA,GAAG,CAAC,CAACE,KAAOiB,EAAAA,UAAAA,GAAAA;gBACxB,OAAO;AACL,oBAAA,GAAGjB,KAAK;oBACRO,YAAcQ,EAAAA,SAAS,CAACE,UAAW;AACrC,iBAAA;AACF,aAAA;AACF,SAAA;AACF,KAAA,CAAA;AACF,CAAA;AAUA,MAAMhE,MAAS,GAAA,CAAC,EAAEC,IAAI,EAAe,GAAA;IACnC,MAAM,EAAEnB,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAMkF,WAAWC,mBAAQ,CAAA,QAAA,EAAU,CAACC,KAAAA,GAAUA,MAAMF,QAAQ,CAAA;AAC5D,IAAA,MAAMG,eAAeF,mBAAQ,CAAA,QAAA,EAAU,CAACC,KAAAA,GAAUA,MAAMC,YAAY,CAAA;IAEpE,qBACE1E,cAAA,CAACS,oBAAQH,MAAM,EAAA;AACbqE,QAAAA,KAAAA,EAAOvF,aACL,CAAA;AACEqC,YAAAA,EAAAA,EAAIC,2BAAe,CAAA,mDAAA,CAAA;YACnBC,cAAgB,EAAA,CAAC,2BAA2B;SAE9C,EAAA;AAAEpB,YAAAA,IAAAA,EAAMqE,kBAAWrE,CAAAA,IAAAA;AAAM,SAAA,CAAA;AAE3BsE,QAAAA,QAAAA,EAAUzF,aAAc,CAAA;AACtBqC,YAAAA,EAAAA,EAAIC,2BAAe,CAAA,uEAAA,CAAA;YACnBC,cAAgB,EAAA;AAClB,SAAA,CAAA;AACAmD,QAAAA,gBAAAA,gBAAkB9E,cAAC+E,CAAAA,sBAAAA,EAAAA,EAAAA,CAAAA;AACnBC,QAAAA,aAAAA,gBACEhF,cAACiF,CAAAA,mBAAAA,EAAAA;AAAO1B,YAAAA,QAAAA,EAAU,CAACgB,QAAAA;YAAUW,OAASR,EAAAA,YAAAA;YAAcxC,IAAK,EAAA,QAAA;sBACtD9C,aAAc,CAAA;gBAAEqC,EAAI,EAAA,aAAA;gBAAeE,cAAgB,EAAA;AAAO,aAAA;;;AAKrE,CAAA;;;;"}

package/dist/admin/components/ConfigurationForm/Form.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Layouts, Form, InputRenderer, useForm, BackButton } from '@strapi/admin/strapi-admin';
+import { Form, Layouts, InputRenderer, useForm, BackButton } from '@strapi/admin/strapi-admin';
 import { Main, Flex, Typography, Grid, Divider, Button } from '@strapi/design-system';
 import { generateNKeysBetween } from 'fractional-indexing';
 import pipe from 'lodash/fp/pipe';
@@ -23,7 +23,7 @@ const ConfigurationForm = ({ attributes, fieldSizes, layout: editLayout, onSubmi
         layout,
         settings
     ]);
-    return /*#__PURE__*/ jsx(Layouts.Root, {
+    return /*#__PURE__*/ jsx(Fragment, {
         children: /*#__PURE__*/ jsx(Main, {
             children: /*#__PURE__*/ jsxs(Form, {
                 initialValues: initialValues,

package/dist/admin/components/ConfigurationForm/Form.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Form.mjs","sources":["../../../../admin/src/components/ConfigurationForm/Form.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Form,\n FormProps,\n useForm,\n InputRenderer,\n BackButton,\n Layouts,\n} from '@strapi/admin/strapi-admin';\nimport { Button, Divider, Flex, Grid, Main, Typography } from '@strapi/design-system';\nimport { generateNKeysBetween } from 'fractional-indexing';\nimport pipe from 'lodash/fp/pipe';\nimport { useIntl } from 'react-intl';\n\nimport { ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD } from '../../constants/attributes';\nimport { capitalise } from '../../utils/strings';\nimport { getTranslation } from '../../utils/translations';\n\nimport { Fields, FieldsProps, TEMP_FIELD_NAME } from './Fields';\n\nimport type { EditFieldLayout, EditLayout } from '../../hooks/useDocumentLayout';\n\n/* -------------------------------------------------------------------------------------------------\n * ConfigurationForm\n * -----------------------------------------------------------------------------------------------/\n\ninterface ConfigurationFormProps extends Pick<FieldsProps, 'attributes' \| 'fieldSizes'> {\n layout: EditLayout;\n onSubmit: FormProps<ConfigurationFormData>['onSubmit'];\n}\n\n/\n Every key in EditFieldLayout is turned to optional never and then we overwrite the ones we are using.\n /\n\ntype EditFieldSpacerLayout = {\n [key in keyof Omit<EditFieldLayout, 'name' \| 'size'>]?: never;\n} & {\n description?: never;\n editable?: never;\n name: '_TEMP_';\n size: number;\n __temp_key__: string;\n};\n\ninterface ConfigurationFormData extends Pick<EditLayout, 'settings'> {\n layout: Array<{\n __temp_key__: string;\n children: Array<\n \| (Pick<EditFieldLayout, 'label' \| 'size' \| 'name' \| 'placeholder' \| 'mainField'> & {\n description: EditFieldLayout['hint'];\n editable: EditFieldLayout['disabled'];\n __temp_key__: string;\n })\n \| EditFieldSpacerLayout\n >;\n }>;\n}\n\nconst ConfigurationForm = ({\n attributes,\n fieldSizes,\n layout: editLayout,\n onSubmit,\n}: ConfigurationFormProps) => {\n const { components, settings, layout, metadatas } = editLayout;\n\n const { formatMessage } = useIntl();\n\n const initialValues: ConfigurationFormData = React.useMemo(() => {\n const transformations = pipe(\n flattenPanels,\n replaceMainFieldWithNameOnly,\n extractMetadata,\n addTmpSpaceToLayout,\n addTmpKeysToLayout\n );\n\n return {\n layout: transformations(layout),\n settings,\n };\n }, [layout, settings]);\n\n return (\n <Layouts.Root>\n <Main>\n <Form initialValues={initialValues} onSubmit={onSubmit} method=\"PUT\">\n <Header name={settings.displayName ?? ''} />\n <Layouts.Content>\n <Flex\n alignItems=\"stretch\"\n background=\"neutral0\"\n direction=\"column\"\n gap={6}\n hasRadius\n shadow=\"tableShadow\"\n paddingTop={6}\n paddingBottom={6}\n paddingLeft={7}\n paddingRight={7}\n >\n <Typography variant=\"delta\" tag=\"h2\">\n {formatMessage({\n id: getTranslation('containers.SettingPage.settings'),\n defaultMessage: 'Settings',\n })}\n </Typography>\n <Grid.Root>\n <Grid.Item col={6} s={12} direction=\"column\" alignItems=\"stretch\">\n <InputRenderer\n type=\"enumeration\"\n label={formatMessage({\n id: getTranslation('containers.SettingPage.editSettings.entry.title'),\n defaultMessage: 'Entry title',\n })}\n hint={formatMessage({\n id: getTranslation(\n 'containers.SettingPage.editSettings.entry.title.description'\n ),\n defaultMessage: 'Set the display field of your entry',\n })}\n name=\"settings.mainField\"\n options={Object.entries(attributes).reduce<\n Array<{ label: string; value: string }>\n >((acc, [key, attribute]) => {\n if (!attribute) {\n return acc;\n }\n\n /\n Create the list of attributes from the schema as to which can\n * be our `mainField` and dictate the display name of the schema\n * we're editing.\n /\n if (!ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD.includes(attribute.type)) {\n acc.push({\n label: key,\n value: key,\n });\n }\n\n return acc;\n }, [])}\n />\n </Grid.Item>\n <Grid.Item\n paddingTop={6}\n paddingBottom={6}\n col={12}\n s={12}\n direction=\"column\"\n alignItems=\"stretch\"\n >\n <Divider />\n </Grid.Item>\n <Grid.Item col={12} s={12} direction=\"column\" alignItems=\"stretch\">\n <Typography variant=\"delta\" tag=\"h3\">\n {formatMessage({\n id: getTranslation('containers.SettingPage.view'),\n defaultMessage: 'View',\n })}\n </Typography>\n </Grid.Item>\n <Grid.Item col={12} s={12} direction=\"column\" alignItems=\"stretch\">\n <Fields\n attributes={attributes}\n components={components}\n fieldSizes={fieldSizes}\n metadatas={metadatas}\n />\n </Grid.Item>\n </Grid.Root>\n </Flex>\n </Layouts.Content>\n </Form>\n </Main>\n </Layouts.Root>\n );\n};\n\n/\n @internal\n * @description Panels don't exist in the layout, so we flatten by one.\n /\nconst flattenPanels = (layout: EditLayout['layout']): EditLayout['layout'][number] =>\n layout.flat(1);\n\n/\n @internal\n * @description We don't need the mainField object in the layout, we only need the name.\n /\nconst replaceMainFieldWithNameOnly = (layout: EditLayout['layout'][number]) =>\n layout.map((row) =>\n row.map((field) => ({\n ...field,\n mainField: field.mainField?.name,\n }))\n );\n\n/\n @internal\n * @description We extract the metadata values from the field layout, because these are editable by the user.\n /\nconst extractMetadata = (\n layout: EditLayout['layout'][number]\n): Array<Exclude<ConfigurationFormData['layout'], { name: '_TEMP_' }>[number]['children']> => {\n return layout.map((row) =>\n row.map(({ label, disabled, hint, placeholder, size, name, mainField }) => ({\n label,\n editable: !disabled,\n description: hint,\n mainField,\n placeholder,\n size,\n name,\n __temp_key__: '',\n }))\n );\n};\n\n/\n @internal\n * @description Each row of the layout has a max size of 12 (based on bootstrap grid system)\n * So in order to offer a better drop zone we add the _TEMP_ div to complete the remaining substract (12 - existing)\n /\nconst addTmpSpaceToLayout = (\n layout: ReturnType<typeof extractMetadata>\n): Array<ConfigurationFormData['layout'][number]['children']> => [\n ...layout.map((row) => {\n const totalSpaceTaken = row.reduce((acc, field) => acc + field.size, 0);\n\n if (totalSpaceTaken < 12) {\n return [\n ...row,\n {\n name: TEMP_FIELD_NAME,\n size: 12 - totalSpaceTaken,\n __temp_key__: '',\n } satisfies EditFieldSpacerLayout,\n ];\n }\n\n return row;\n }),\n];\n\n/\n @internal\n * @description At this point of the transformations we have Field[][], but each row for the form should have a __temp_key__\n * applied. This means we need to change it so `Field` is nested under the children property.\n /\nconst addTmpKeysToLayout = (\n layout: ReturnType<typeof addTmpSpaceToLayout>\n): ConfigurationFormData['layout'] => {\n const keys = generateNKeysBetween(undefined, undefined, layout.length);\n\n return layout.map((row, rowIndex) => {\n const fieldKeys = generateNKeysBetween(undefined, undefined, row.length);\n\n return {\n __temp_key__: keys[rowIndex],\n children: row.map((field, fieldIndex) => {\n return {\n ...field,\n __temp_key__: fieldKeys[fieldIndex],\n };\n }),\n };\n });\n};\n\n/ -------------------------------------------------------------------------------------------------\n * Header\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderProps {\n name: string;\n}\n\nconst Header = ({ name }: HeaderProps) => {\n const { formatMessage } = useIntl();\n const modified = useForm('Header', (state) => state.modified);\n const isSubmitting = useForm('Header', (state) => state.isSubmitting);\n\n return (\n <Layouts.Header\n title={formatMessage(\n {\n id: getTranslation('components.SettingsViewWrapper.pluginHeader.title'),\n defaultMessage: `Configure the view - {name}`,\n },\n { name: capitalise(name) }\n )}\n subtitle={formatMessage({\n id: getTranslation('components.SettingsViewWrapper.pluginHeader.description.edit-settings'),\n defaultMessage: 'Customize how the edit view will look like.',\n })}\n navigationAction={<BackButton />}\n primaryAction={\n <Button disabled={!modified} loading={isSubmitting} type=\"submit\">\n {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}\n </Button>\n }\n />\n );\n};\n\nexport { ConfigurationForm };\nexport type { ConfigurationFormProps, ConfigurationFormData, EditFieldSpacerLayout };\n"],"names":["ConfigurationForm","attributes","fieldSizes","layout","editLayout","onSubmit","components","settings","metadatas","formatMessage","useIntl","initialValues","React","useMemo","transformations","pipe","flattenPanels","replaceMainFieldWithNameOnly","extractMetadata","addTmpSpaceToLayout","addTmpKeysToLayout","_jsx","Layouts","Root","Main","_jsxs","Form","method","Header","name","displayName","Content","Flex","alignItems","background","direction","gap","hasRadius","shadow","paddingTop","paddingBottom","paddingLeft","paddingRight","Typography","variant","tag","id","getTranslation","defaultMessage","Grid","Item","col","s","InputRenderer","type","label","hint","options","Object","entries","reduce","acc","key","attribute","ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD","includes","push","value","Divider","Fields","flat","map","row","field","mainField","disabled","placeholder","size","editable","description","__temp_key__","totalSpaceTaken","TEMP_FIELD_NAME","keys","generateNKeysBetween","undefined","length","rowIndex","fieldKeys","children","fieldIndex","modified","useForm","state","isSubmitting","title","capitalise","subtitle","navigationAction","BackButton","primaryAction","Button","loading"],"mappings":"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"}
1	+ {"version":3,"file":"Form.mjs","sources":["../../../../admin/src/components/ConfigurationForm/Form.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n Form,\n FormProps,\n useForm,\n InputRenderer,\n BackButton,\n Layouts,\n} from '@strapi/admin/strapi-admin';\nimport { Button, Divider, Flex, Grid, Main, Typography } from '@strapi/design-system';\nimport { generateNKeysBetween } from 'fractional-indexing';\nimport pipe from 'lodash/fp/pipe';\nimport { useIntl } from 'react-intl';\n\nimport { ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD } from '../../constants/attributes';\nimport { capitalise } from '../../utils/strings';\nimport { getTranslation } from '../../utils/translations';\n\nimport { Fields, FieldsProps, TEMP_FIELD_NAME } from './Fields';\n\nimport type { EditFieldLayout, EditLayout } from '../../hooks/useDocumentLayout';\n\n/* -------------------------------------------------------------------------------------------------\n * ConfigurationForm\n * -----------------------------------------------------------------------------------------------/\n\ninterface ConfigurationFormProps extends Pick<FieldsProps, 'attributes' \| 'fieldSizes'> {\n layout: EditLayout;\n onSubmit: FormProps<ConfigurationFormData>['onSubmit'];\n}\n\n/\n Every key in EditFieldLayout is turned to optional never and then we overwrite the ones we are using.\n /\n\ntype EditFieldSpacerLayout = {\n [key in keyof Omit<EditFieldLayout, 'name' \| 'size'>]?: never;\n} & {\n description?: never;\n editable?: never;\n name: '_TEMP_';\n size: number;\n __temp_key__: string;\n};\n\ninterface ConfigurationFormData extends Pick<EditLayout, 'settings'> {\n layout: Array<{\n __temp_key__: string;\n children: Array<\n \| (Pick<EditFieldLayout, 'label' \| 'size' \| 'name' \| 'placeholder' \| 'mainField'> & {\n description: EditFieldLayout['hint'];\n editable: EditFieldLayout['disabled'];\n __temp_key__: string;\n })\n \| EditFieldSpacerLayout\n >;\n }>;\n}\n\nconst ConfigurationForm = ({\n attributes,\n fieldSizes,\n layout: editLayout,\n onSubmit,\n}: ConfigurationFormProps) => {\n const { components, settings, layout, metadatas } = editLayout;\n\n const { formatMessage } = useIntl();\n\n const initialValues: ConfigurationFormData = React.useMemo(() => {\n const transformations = pipe(\n flattenPanels,\n replaceMainFieldWithNameOnly,\n extractMetadata,\n addTmpSpaceToLayout,\n addTmpKeysToLayout\n );\n\n return {\n layout: transformations(layout),\n settings,\n };\n }, [layout, settings]);\n\n return (\n <>\n <Main>\n <Form initialValues={initialValues} onSubmit={onSubmit} method=\"PUT\">\n <Header name={settings.displayName ?? ''} />\n <Layouts.Content>\n <Flex\n alignItems=\"stretch\"\n background=\"neutral0\"\n direction=\"column\"\n gap={6}\n hasRadius\n shadow=\"tableShadow\"\n paddingTop={6}\n paddingBottom={6}\n paddingLeft={7}\n paddingRight={7}\n >\n <Typography variant=\"delta\" tag=\"h2\">\n {formatMessage({\n id: getTranslation('containers.SettingPage.settings'),\n defaultMessage: 'Settings',\n })}\n </Typography>\n <Grid.Root>\n <Grid.Item col={6} s={12} direction=\"column\" alignItems=\"stretch\">\n <InputRenderer\n type=\"enumeration\"\n label={formatMessage({\n id: getTranslation('containers.SettingPage.editSettings.entry.title'),\n defaultMessage: 'Entry title',\n })}\n hint={formatMessage({\n id: getTranslation(\n 'containers.SettingPage.editSettings.entry.title.description'\n ),\n defaultMessage: 'Set the display field of your entry',\n })}\n name=\"settings.mainField\"\n options={Object.entries(attributes).reduce<\n Array<{ label: string; value: string }>\n >((acc, [key, attribute]) => {\n if (!attribute) {\n return acc;\n }\n\n /\n Create the list of attributes from the schema as to which can\n * be our `mainField` and dictate the display name of the schema\n * we're editing.\n /\n if (!ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD.includes(attribute.type)) {\n acc.push({\n label: key,\n value: key,\n });\n }\n\n return acc;\n }, [])}\n />\n </Grid.Item>\n <Grid.Item\n paddingTop={6}\n paddingBottom={6}\n col={12}\n s={12}\n direction=\"column\"\n alignItems=\"stretch\"\n >\n <Divider />\n </Grid.Item>\n <Grid.Item col={12} s={12} direction=\"column\" alignItems=\"stretch\">\n <Typography variant=\"delta\" tag=\"h3\">\n {formatMessage({\n id: getTranslation('containers.SettingPage.view'),\n defaultMessage: 'View',\n })}\n </Typography>\n </Grid.Item>\n <Grid.Item col={12} s={12} direction=\"column\" alignItems=\"stretch\">\n <Fields\n attributes={attributes}\n components={components}\n fieldSizes={fieldSizes}\n metadatas={metadatas}\n />\n </Grid.Item>\n </Grid.Root>\n </Flex>\n </Layouts.Content>\n </Form>\n </Main>\n </>\n );\n};\n\n/\n @internal\n * @description Panels don't exist in the layout, so we flatten by one.\n /\nconst flattenPanels = (layout: EditLayout['layout']): EditLayout['layout'][number] =>\n layout.flat(1);\n\n/\n @internal\n * @description We don't need the mainField object in the layout, we only need the name.\n /\nconst replaceMainFieldWithNameOnly = (layout: EditLayout['layout'][number]) =>\n layout.map((row) =>\n row.map((field) => ({\n ...field,\n mainField: field.mainField?.name,\n }))\n );\n\n/\n @internal\n * @description We extract the metadata values from the field layout, because these are editable by the user.\n /\nconst extractMetadata = (\n layout: EditLayout['layout'][number]\n): Array<Exclude<ConfigurationFormData['layout'], { name: '_TEMP_' }>[number]['children']> => {\n return layout.map((row) =>\n row.map(({ label, disabled, hint, placeholder, size, name, mainField }) => ({\n label,\n editable: !disabled,\n description: hint,\n mainField,\n placeholder,\n size,\n name,\n __temp_key__: '',\n }))\n );\n};\n\n/\n @internal\n * @description Each row of the layout has a max size of 12 (based on bootstrap grid system)\n * So in order to offer a better drop zone we add the _TEMP_ div to complete the remaining substract (12 - existing)\n /\nconst addTmpSpaceToLayout = (\n layout: ReturnType<typeof extractMetadata>\n): Array<ConfigurationFormData['layout'][number]['children']> => [\n ...layout.map((row) => {\n const totalSpaceTaken = row.reduce((acc, field) => acc + field.size, 0);\n\n if (totalSpaceTaken < 12) {\n return [\n ...row,\n {\n name: TEMP_FIELD_NAME,\n size: 12 - totalSpaceTaken,\n __temp_key__: '',\n } satisfies EditFieldSpacerLayout,\n ];\n }\n\n return row;\n }),\n];\n\n/\n @internal\n * @description At this point of the transformations we have Field[][], but each row for the form should have a __temp_key__\n * applied. This means we need to change it so `Field` is nested under the children property.\n /\nconst addTmpKeysToLayout = (\n layout: ReturnType<typeof addTmpSpaceToLayout>\n): ConfigurationFormData['layout'] => {\n const keys = generateNKeysBetween(undefined, undefined, layout.length);\n\n return layout.map((row, rowIndex) => {\n const fieldKeys = generateNKeysBetween(undefined, undefined, row.length);\n\n return {\n __temp_key__: keys[rowIndex],\n children: row.map((field, fieldIndex) => {\n return {\n ...field,\n __temp_key__: fieldKeys[fieldIndex],\n };\n }),\n };\n });\n};\n\n/ -------------------------------------------------------------------------------------------------\n * Header\n * -----------------------------------------------------------------------------------------------*/\n\ninterface HeaderProps {\n name: string;\n}\n\nconst Header = ({ name }: HeaderProps) => {\n const { formatMessage } = useIntl();\n const modified = useForm('Header', (state) => state.modified);\n const isSubmitting = useForm('Header', (state) => state.isSubmitting);\n\n return (\n <Layouts.Header\n title={formatMessage(\n {\n id: getTranslation('components.SettingsViewWrapper.pluginHeader.title'),\n defaultMessage: `Configure the view - {name}`,\n },\n { name: capitalise(name) }\n )}\n subtitle={formatMessage({\n id: getTranslation('components.SettingsViewWrapper.pluginHeader.description.edit-settings'),\n defaultMessage: 'Customize how the edit view will look like.',\n })}\n navigationAction={<BackButton />}\n primaryAction={\n <Button disabled={!modified} loading={isSubmitting} type=\"submit\">\n {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}\n </Button>\n }\n />\n );\n};\n\nexport { ConfigurationForm };\nexport type { ConfigurationFormProps, ConfigurationFormData, EditFieldSpacerLayout };\n"],"names":["ConfigurationForm","attributes","fieldSizes","layout","editLayout","onSubmit","components","settings","metadatas","formatMessage","useIntl","initialValues","React","useMemo","transformations","pipe","flattenPanels","replaceMainFieldWithNameOnly","extractMetadata","addTmpSpaceToLayout","addTmpKeysToLayout","_jsx","_Fragment","Main","_jsxs","Form","method","Header","name","displayName","Layouts","Content","Flex","alignItems","background","direction","gap","hasRadius","shadow","paddingTop","paddingBottom","paddingLeft","paddingRight","Typography","variant","tag","id","getTranslation","defaultMessage","Grid","Root","Item","col","s","InputRenderer","type","label","hint","options","Object","entries","reduce","acc","key","attribute","ATTRIBUTE_TYPES_THAT_CANNOT_BE_MAIN_FIELD","includes","push","value","Divider","Fields","flat","map","row","field","mainField","disabled","placeholder","size","editable","description","__temp_key__","totalSpaceTaken","TEMP_FIELD_NAME","keys","generateNKeysBetween","undefined","length","rowIndex","fieldKeys","children","fieldIndex","modified","useForm","state","isSubmitting","title","capitalise","subtitle","navigationAction","BackButton","primaryAction","Button","loading"],"mappings":"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"}

package/dist/admin/components/LeftMenu.js CHANGED Viewed

@@ -4,9 +4,9 @@ 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 qs = require('qs');
 var reactIntl = require('react-intl');
+var useContentManagerInitData = require('../hooks/useContentManagerInitData.js');
 var useContentTypeSchema = require('../hooks/useContentTypeSchema.js');
 var hooks = require('../modules/hooks.js');
 var translations = require('../utils/translations.js');
@@ -34,6 +34,8 @@ const LeftMenu = ()=>{
     const [search, setSearch] = React__namespace.useState('');
     const [{ query }] = strapiAdmin.useQueryParams();
     const { formatMessage, locale } = reactIntl.useIntl();
+    // Initialize Content Manager data to ensure links are available
+    const { isLoading } = useContentManagerInitData.useContentManagerInitData();
     const collectionTypeLinks = hooks.useTypedSelector((state)=>state['content-manager'].app.collectionTypeLinks);
     const singleTypeLinks = hooks.useTypedSelector((state)=>state['content-manager'].app.singleTypeLinks);
     const { schemas } = useContentTypeSchema.useContentTypeSchema();
@@ -66,7 +68,7 @@ const LeftMenu = ()=>{
                 ...section,
                 links: section.links/**
            * Filter by the search value
-           */ .filter((link)=>startsWith(link.title, search))/**
+           */ .filter((link)=>startsWith(link.title, search.trim()))/**
            * Sort correctly using the language
            */ .sort((a, b)=>formatter.compare(a.title, b.title))/**
            * Apply the formated strings to the links from react-intl
@@ -90,8 +92,8 @@ const LeftMenu = ()=>{
     const handleClear = ()=>{
         setSearch('');
     };
-    const handleChangeSearch = ({ target: { value } })=>{
-        setSearch(value);
+    const handleChangeSearch = (event)=>{
+        setSearch(event.target.value);
     };
     const label = formatMessage({
         id: translations.getTranslation('header.name'),
@@ -116,57 +118,77 @@ const LeftMenu = ()=>{
         }
         return query.plugins;
     };
+    // Show loading state while data is being fetched
+    if (isLoading) {
+        return /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.SubNav.Main, {
+            "aria-label": label,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Header, {
+                    label: label
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Divider, {}),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                    padding: 4,
+                    justifyContent: "center",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {})
+                })
+            ]
+        });
+    }
     return /*#__PURE__*/ jsxRuntime.jsxs(strapiAdmin.SubNav.Main, {
         "aria-label": label,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Header, {
                 label: label
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Divider, {
-                background: "neutral150"
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                padding: 5,
-                gap: 3,
-                direction: 'column',
-                alignItems: 'stretch',
-                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextInput, {
-                    startAction: /*#__PURE__*/ jsxRuntime.jsx(Icons.Search, {
-                        fill: "neutral500"
-                    }),
-                    value: search,
-                    onChange: handleChangeSearch,
-                    "aria-label": "Search",
-                    placeholder: formatMessage({
-                        id: 'content-manager.components.LeftMenu.Search.label',
-                        defaultMessage: 'Search for a content type'
-                    }),
-                    endAction: /*#__PURE__*/ jsxRuntime.jsx(Icons.Cross, {
-                        onClick: handleClear,
-                        fill: "neutral500",
-                        cursor: "pointer"
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Divider, {}),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.ScrollArea, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                        padding: 5,
+                        paddingBottom: 0,
+                        gap: 3,
+                        direction: "column",
+                        alignItems: "stretch",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Searchbar, {
+                            value: search,
+                            onChange: handleChangeSearch,
+                            onClear: handleClear,
+                            placeholder: formatMessage({
+                                id: 'search.placeholder',
+                                defaultMessage: 'Search'
+                            }),
+                            size: "S",
+                            // eslint-disable-next-line react/no-children-prop
+                            children: undefined,
+                            name: 'search_contentType',
+                            clearLabel: formatMessage({
+                                id: 'clearLabel',
+                                defaultMessage: 'Clear'
+                            })
+                        })
                     }),
-                    size: "S"
-                })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Sections, {
-                children: menu.map((section)=>{
-                    return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Section, {
-                        label: section.title,
-                        children: section.links.map((link)=>{
-                            return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Link, {
-                                to: {
-                                    pathname: link.to,
-                                    search: qs.stringify({
-                                        ...qs.parse(link.search ?? ''),
-                                        plugins: getPluginsParamsForLink(link)
-                                    })
-                                },
-                                label: link.title
-                            }, link.uid);
+                    /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Sections, {
+                        children: menu.map((section)=>{
+                            return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Section, {
+                                label: section.title,
+                                badgeLabel: section.links.length.toString(),
+                                children: section.links.map((link)=>{
+                                    return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.SubNav.Link, {
+                                        to: {
+                                            pathname: link.to,
+                                            search: qs.stringify({
+                                                ...qs.parse(link.search ?? ''),
+                                                plugins: getPluginsParamsForLink(link)
+                                            })
+                                        },
+                                        label: link.title
+                                    }, link.uid);
+                                })
+                            }, section.id);
                         })
-                    }, section.id);
-                })
+                    })
+                ]
             })
         ]
     });

package/dist/admin/components/LeftMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LeftMenu.js","sources":["../../../admin/src/components/LeftMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams, SubNav } from '@strapi/admin/strapi-admin';\nimport { Divider, Flex, TextInput, useCollator, useFilter } from '@strapi/design-system';\nimport { Cross, Search } from '@strapi/icons';\nimport { parse, stringify } from 'qs';\nimport { useIntl } from 'react-intl';\n\nimport { useContentTypeSchema } from '../hooks/useContentTypeSchema';\nimport { useTypedSelector } from '../modules/hooks';\nimport { getTranslation } from '../utils/translations';\n\nimport type { ContentManagerLink } from '../hooks/useContentManagerInitData';\n\nconst LeftMenu = () => {\n const [search, setSearch] = React.useState('');\n const [{ query }] = useQueryParams<{ plugins?: object }>();\n const { formatMessage, locale } = useIntl();\n\n const collectionTypeLinks = useTypedSelector(\n (state) => state['content-manager'].app.collectionTypeLinks\n );\n\n const singleTypeLinks = useTypedSelector((state) => state['content-manager'].app.singleTypeLinks);\n const { schemas } = useContentTypeSchema();\n\n const { startsWith } = useFilter(locale, {\n sensitivity: 'base',\n });\n\n const formatter = useCollator(locale, {\n sensitivity: 'base',\n });\n\n const menu = React.useMemo(\n () =>\n [\n {\n id: 'collectionTypes',\n title: formatMessage({\n id: getTranslation('components.LeftMenu.collection-types'),\n defaultMessage: 'Collection Types',\n }),\n searchable: true,\n links: collectionTypeLinks,\n },\n {\n id: 'singleTypes',\n title: formatMessage({\n id: getTranslation('components.LeftMenu.single-types'),\n defaultMessage: 'Single Types',\n }),\n searchable: true,\n links: singleTypeLinks,\n },\n ].map((section) => ({\n ...section,\n links: section.links\n /*\n Filter by the search value\n /\n .filter((link) => startsWith(link.title, search))\n /\n Sort correctly using the language\n /\n .sort((a, b) => formatter.compare(a.title, b.title))\n /\n Apply the formated strings to the links from react-intl\n */\n .map((link) => {\n return {\n ...link,\n title: formatMessage({ id: link.title, defaultMessage: link.title }),\n };\n }),\n })),\n [collectionTypeLinks, search, singleTypeLinks, startsWith, formatMessage, formatter]\n );\n\n const handleClear = () => {\n setSearch('');\n };\n\n const handleChangeSearch = ({ target: { value } }: { target: { value: string } }) => {\n setSearch(value);\n };\n\n const label = formatMessage({\n id: getTranslation('header.name'),\n defaultMessage: 'Content Manager',\n });\n\n const getPluginsParamsForLink = (link: ContentManagerLink) => {\n const schema = schemas.find((schema) => schema.uid === link.uid);\n const isI18nEnabled = Boolean((schema?.pluginOptions?.i18n as any)?.localized);\n\n // The search params have the i18n plugin\n if (query.plugins && 'i18n' in query.plugins) {\n // Prepare removal of i18n from the plugins search params\n const { i18n, ...restPlugins } = query.plugins;\n\n // i18n is not enabled, remove it from the plugins search params\n if (!isI18nEnabled) {\n return restPlugins;\n }\n\n // i18n is enabled, put the plugins search params back together\n return { i18n, ...restPlugins };\n }\n\n return query.plugins;\n };\n\n return (\n <SubNav.Main aria-label={label}>\n <SubNav.Header label={label} />\n <Divider background=\"neutral150\" />\n <Flex padding={5} gap={3} direction={'column'} alignItems={'stretch'}>\n <TextInput\n startAction={<Search fill=\"neutral500\" />}\n value={search}\n onChange={handleChangeSearch}\n aria-label=\"Search\"\n placeholder={formatMessage({\n id: 'content-manager.components.LeftMenu.Search.label',\n defaultMessage: 'Search for a content type',\n })}\n endAction={<Cross onClick={handleClear} fill=\"neutral500\" cursor=\"pointer\" />}\n size=\"S\"\n />\n </Flex>\n <SubNav.Sections>\n {menu.map((section) => {\n return (\n <SubNav.Section key={section.id} label={section.title}>\n {section.links.map((link) => {\n return (\n <SubNav.Link\n key={link.uid}\n to={{\n pathname: link.to,\n search: stringify({\n ...parse(link.search ?? ''),\n plugins: getPluginsParamsForLink(link),\n }),\n }}\n label={link.title}\n />\n );\n })}\n </SubNav.Section>\n );\n })}\n </SubNav.Sections>\n </SubNav.Main>\n );\n};\n\nexport { LeftMenu };\n"],"names":["LeftMenu","search","setSearch","React","useState","query","useQueryParams","formatMessage","locale","useIntl","collectionTypeLinks","useTypedSelector","state","app","singleTypeLinks","schemas","useContentTypeSchema","startsWith","useFilter","sensitivity","formatter","useCollator","menu","useMemo","id","title","getTranslation","defaultMessage","searchable","links","map","section","filter","link","sort","a","b","compare","handleClear","handleChangeSearch","target","value","label","getPluginsParamsForLink","schema","find","uid","isI18nEnabled","Boolean","pluginOptions","i18n","localized","plugins","restPlugins","_jsxs","SubNav","Main","aria-label","_jsx","Header","Divider","background","Flex","padding","gap","direction","alignItems","TextInput","startAction","Search","fill","onChange","placeholder","endAction","Cross","onClick","cursor","size","Sections","Section","Link","to","pathname","stringify","parse"],"mappings":"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"}
1	+ {"version":3,"file":"LeftMenu.js","sources":["../../../admin/src/components/LeftMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams, SubNav } from '@strapi/admin/strapi-admin';\nimport {\n Flex,\n Searchbar,\n useCollator,\n useFilter,\n Divider,\n ScrollArea,\n Loader,\n} from '@strapi/design-system';\nimport { parse, stringify } from 'qs';\nimport { useIntl } from 'react-intl';\n\nimport { useContentManagerInitData } from '../hooks/useContentManagerInitData';\nimport { useContentTypeSchema } from '../hooks/useContentTypeSchema';\nimport { useTypedSelector } from '../modules/hooks';\nimport { getTranslation } from '../utils/translations';\n\nimport type { ContentManagerLink } from '../hooks/useContentManagerInitData';\n\nconst LeftMenu = () => {\n const [search, setSearch] = React.useState('');\n const [{ query }] = useQueryParams<{ plugins?: object }>();\n const { formatMessage, locale } = useIntl();\n\n // Initialize Content Manager data to ensure links are available\n const { isLoading } = useContentManagerInitData();\n\n const collectionTypeLinks = useTypedSelector(\n (state) => state['content-manager'].app.collectionTypeLinks\n );\n\n const singleTypeLinks = useTypedSelector((state) => state['content-manager'].app.singleTypeLinks);\n const { schemas } = useContentTypeSchema();\n\n const { startsWith } = useFilter(locale, {\n sensitivity: 'base',\n });\n\n const formatter = useCollator(locale, {\n sensitivity: 'base',\n });\n\n const menu = React.useMemo(\n () =>\n [\n {\n id: 'collectionTypes',\n title: formatMessage({\n id: getTranslation('components.LeftMenu.collection-types'),\n defaultMessage: 'Collection Types',\n }),\n searchable: true,\n links: collectionTypeLinks,\n },\n {\n id: 'singleTypes',\n title: formatMessage({\n id: getTranslation('components.LeftMenu.single-types'),\n defaultMessage: 'Single Types',\n }),\n searchable: true,\n links: singleTypeLinks,\n },\n ].map((section) => ({\n ...section,\n links: section.links\n /*\n Filter by the search value\n /\n .filter((link) => startsWith(link.title, search.trim()))\n /\n Sort correctly using the language\n /\n .sort((a, b) => formatter.compare(a.title, b.title))\n /\n Apply the formated strings to the links from react-intl\n */\n .map((link) => {\n return {\n ...link,\n title: formatMessage({ id: link.title, defaultMessage: link.title }),\n };\n }),\n })),\n [collectionTypeLinks, search, singleTypeLinks, startsWith, formatMessage, formatter]\n );\n\n const handleClear = () => {\n setSearch('');\n };\n\n const handleChangeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n setSearch(event.target.value);\n };\n\n const label = formatMessage({\n id: getTranslation('header.name'),\n defaultMessage: 'Content Manager',\n });\n\n const getPluginsParamsForLink = (link: ContentManagerLink) => {\n const schema = schemas.find((schema) => schema.uid === link.uid);\n const isI18nEnabled = Boolean((schema?.pluginOptions?.i18n as any)?.localized);\n\n // The search params have the i18n plugin\n if (query.plugins && 'i18n' in query.plugins) {\n // Prepare removal of i18n from the plugins search params\n const { i18n, ...restPlugins } = query.plugins;\n\n // i18n is not enabled, remove it from the plugins search params\n if (!isI18nEnabled) {\n return restPlugins;\n }\n\n // i18n is enabled, put the plugins search params back together\n return { i18n, ...restPlugins };\n }\n\n return query.plugins;\n };\n\n // Show loading state while data is being fetched\n if (isLoading) {\n return (\n <SubNav.Main aria-label={label}>\n <SubNav.Header label={label} />\n <Divider />\n <Flex padding={4} justifyContent=\"center\">\n <Loader />\n </Flex>\n </SubNav.Main>\n );\n }\n\n return (\n <SubNav.Main aria-label={label}>\n <SubNav.Header label={label} />\n <Divider />\n <ScrollArea>\n <Flex padding={5} paddingBottom={0} gap={3} direction=\"column\" alignItems=\"stretch\">\n <Searchbar\n value={search}\n onChange={handleChangeSearch}\n onClear={handleClear}\n placeholder={formatMessage({\n id: 'search.placeholder',\n defaultMessage: 'Search',\n })}\n size=\"S\"\n // eslint-disable-next-line react/no-children-prop\n children={undefined}\n name={'search_contentType'}\n clearLabel={formatMessage({ id: 'clearLabel', defaultMessage: 'Clear' })}\n />\n </Flex>\n <SubNav.Sections>\n {menu.map((section) => {\n return (\n <SubNav.Section\n key={section.id}\n label={section.title}\n badgeLabel={section.links.length.toString()}\n >\n {section.links.map((link) => {\n return (\n <SubNav.Link\n key={link.uid}\n to={{\n pathname: link.to,\n search: stringify({\n ...parse(link.search ?? ''),\n plugins: getPluginsParamsForLink(link),\n }),\n }}\n label={link.title}\n />\n );\n })}\n </SubNav.Section>\n );\n })}\n </SubNav.Sections>\n </ScrollArea>\n </SubNav.Main>\n );\n};\n\nexport { LeftMenu };\n"],"names":["LeftMenu","search","setSearch","React","useState","query","useQueryParams","formatMessage","locale","useIntl","isLoading","useContentManagerInitData","collectionTypeLinks","useTypedSelector","state","app","singleTypeLinks","schemas","useContentTypeSchema","startsWith","useFilter","sensitivity","formatter","useCollator","menu","useMemo","id","title","getTranslation","defaultMessage","searchable","links","map","section","filter","link","trim","sort","a","b","compare","handleClear","handleChangeSearch","event","target","value","label","getPluginsParamsForLink","schema","find","uid","isI18nEnabled","Boolean","pluginOptions","i18n","localized","plugins","restPlugins","_jsxs","SubNav","Main","aria-label","_jsx","Header","Divider","Flex","padding","justifyContent","Loader","ScrollArea","paddingBottom","gap","direction","alignItems","Searchbar","onChange","onClear","placeholder","size","children","undefined","name","clearLabel","Sections","Section","badgeLabel","length","toString","Link","to","pathname","stringify","parse"],"mappings":"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"}

package/dist/admin/components/LeftMenu.mjs CHANGED Viewed

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { useQueryParams, SubNav } from '@strapi/admin/strapi-admin';
-import { useFilter, useCollator, Divider, Flex, TextInput } from '@strapi/design-system';
-import { Search, Cross } from '@strapi/icons';
+import { useFilter, useCollator, Divider, Flex, Loader, ScrollArea, Searchbar } from '@strapi/design-system';
 import { stringify, parse } from 'qs';
 import { useIntl } from 'react-intl';
+import { useContentManagerInitData } from '../hooks/useContentManagerInitData.mjs';
 import { useContentTypeSchema } from '../hooks/useContentTypeSchema.mjs';
 import { useTypedSelector } from '../modules/hooks.mjs';
 import { getTranslation } from '../utils/translations.mjs';
@@ -13,6 +13,8 @@ const LeftMenu = ()=>{
     const [search, setSearch] = React.useState('');
     const [{ query }] = useQueryParams();
     const { formatMessage, locale } = useIntl();
+    // Initialize Content Manager data to ensure links are available
+    const { isLoading } = useContentManagerInitData();
     const collectionTypeLinks = useTypedSelector((state)=>state['content-manager'].app.collectionTypeLinks);
     const singleTypeLinks = useTypedSelector((state)=>state['content-manager'].app.singleTypeLinks);
     const { schemas } = useContentTypeSchema();
@@ -45,7 +47,7 @@ const LeftMenu = ()=>{
                 ...section,
                 links: section.links/**
            * Filter by the search value
-           */ .filter((link)=>startsWith(link.title, search))/**
+           */ .filter((link)=>startsWith(link.title, search.trim()))/**
            * Sort correctly using the language
            */ .sort((a, b)=>formatter.compare(a.title, b.title))/**
            * Apply the formated strings to the links from react-intl
@@ -69,8 +71,8 @@ const LeftMenu = ()=>{
     const handleClear = ()=>{
         setSearch('');
     };
-    const handleChangeSearch = ({ target: { value } })=>{
-        setSearch(value);
+    const handleChangeSearch = (event)=>{
+        setSearch(event.target.value);
     };
     const label = formatMessage({
         id: getTranslation('header.name'),
@@ -95,57 +97,77 @@ const LeftMenu = ()=>{
         }
         return query.plugins;
     };
+    // Show loading state while data is being fetched
+    if (isLoading) {
+        return /*#__PURE__*/ jsxs(SubNav.Main, {
+            "aria-label": label,
+            children: [
+                /*#__PURE__*/ jsx(SubNav.Header, {
+                    label: label
+                }),
+                /*#__PURE__*/ jsx(Divider, {}),
+                /*#__PURE__*/ jsx(Flex, {
+                    padding: 4,
+                    justifyContent: "center",
+                    children: /*#__PURE__*/ jsx(Loader, {})
+                })
+            ]
+        });
+    }
     return /*#__PURE__*/ jsxs(SubNav.Main, {
         "aria-label": label,
         children: [
             /*#__PURE__*/ jsx(SubNav.Header, {
                 label: label
             }),
-            /*#__PURE__*/ jsx(Divider, {
-                background: "neutral150"
-            }),
-            /*#__PURE__*/ jsx(Flex, {
-                padding: 5,
-                gap: 3,
-                direction: 'column',
-                alignItems: 'stretch',
-                children: /*#__PURE__*/ jsx(TextInput, {
-                    startAction: /*#__PURE__*/ jsx(Search, {
-                        fill: "neutral500"
-                    }),
-                    value: search,
-                    onChange: handleChangeSearch,
-                    "aria-label": "Search",
-                    placeholder: formatMessage({
-                        id: 'content-manager.components.LeftMenu.Search.label',
-                        defaultMessage: 'Search for a content type'
-                    }),
-                    endAction: /*#__PURE__*/ jsx(Cross, {
-                        onClick: handleClear,
-                        fill: "neutral500",
-                        cursor: "pointer"
+            /*#__PURE__*/ jsx(Divider, {}),
+            /*#__PURE__*/ jsxs(ScrollArea, {
+                children: [
+                    /*#__PURE__*/ jsx(Flex, {
+                        padding: 5,
+                        paddingBottom: 0,
+                        gap: 3,
+                        direction: "column",
+                        alignItems: "stretch",
+                        children: /*#__PURE__*/ jsx(Searchbar, {
+                            value: search,
+                            onChange: handleChangeSearch,
+                            onClear: handleClear,
+                            placeholder: formatMessage({
+                                id: 'search.placeholder',
+                                defaultMessage: 'Search'
+                            }),
+                            size: "S",
+                            // eslint-disable-next-line react/no-children-prop
+                            children: undefined,
+                            name: 'search_contentType',
+                            clearLabel: formatMessage({
+                                id: 'clearLabel',
+                                defaultMessage: 'Clear'
+                            })
+                        })
                     }),
-                    size: "S"
-                })
-            }),
-            /*#__PURE__*/ jsx(SubNav.Sections, {
-                children: menu.map((section)=>{
-                    return /*#__PURE__*/ jsx(SubNav.Section, {
-                        label: section.title,
-                        children: section.links.map((link)=>{
-                            return /*#__PURE__*/ jsx(SubNav.Link, {
-                                to: {
-                                    pathname: link.to,
-                                    search: stringify({
-                                        ...parse(link.search ?? ''),
-                                        plugins: getPluginsParamsForLink(link)
-                                    })
-                                },
-                                label: link.title
-                            }, link.uid);
+                    /*#__PURE__*/ jsx(SubNav.Sections, {
+                        children: menu.map((section)=>{
+                            return /*#__PURE__*/ jsx(SubNav.Section, {
+                                label: section.title,
+                                badgeLabel: section.links.length.toString(),
+                                children: section.links.map((link)=>{
+                                    return /*#__PURE__*/ jsx(SubNav.Link, {
+                                        to: {
+                                            pathname: link.to,
+                                            search: stringify({
+                                                ...parse(link.search ?? ''),
+                                                plugins: getPluginsParamsForLink(link)
+                                            })
+                                        },
+                                        label: link.title
+                                    }, link.uid);
+                                })
+                            }, section.id);
                         })
-                    }, section.id);
-                })
+                    })
+                ]
             })
         ]
     });