@strapi/content-manager 5.42.1 → 5.44.0

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentCategory.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Accordion, Box, Flex, FlexComponent, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ComponentIcon } from '../../../../../components/ComponentIcon';\n\ninterface ComponentCategoryProps {\n  category: string;\n  components?: Array<{\n    uid: string;\n    displayName: string;\n    icon?: string;\n  }>;\n  onAddComponent: (\n    componentUid: string\n  ) => React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n  variant?: Accordion.Variant;\n}\n\nconst ComponentCategory = ({\n  category,\n  components = [],\n  variant = 'primary',\n  onAddComponent,\n}: ComponentCategoryProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Accordion.Item value={category}>\n      <Accordion.Header variant={variant}>\n        <Accordion.Trigger>\n          {formatMessage({ id: category, defaultMessage: category })}\n        </Accordion.Trigger>\n      </Accordion.Header>\n      <ResponsiveAccordionContent>\n        <Grid paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>\n          {components.map(({ uid, displayName, icon }) => (\n            <ComponentBox\n              key={uid}\n              tag=\"button\"\n              type=\"button\"\n              background=\"neutral100\"\n              justifyContent=\"center\"\n              onClick={onAddComponent(uid)}\n              hasRadius\n              height=\"8.4rem\"\n              shrink={0}\n              borderColor=\"neutral200\"\n            >\n              <Flex direction=\"column\" gap={1} alignItems=\"center\" justifyContent=\"center\">\n                <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />\n\n                <Typography variant=\"pi\" fontWeight=\"bold\">\n                  {displayName}\n                </Typography>\n              </Flex>\n            </ComponentBox>\n          ))}\n        </Grid>\n      </ResponsiveAccordionContent>\n    </Accordion.Item>\n  );\n};\n\nconst ResponsiveAccordionContent = styled(Accordion.Content)`\n  container-type: inline-size;\n`;\n\n/**\n * TODO:\n * JSDOM cannot handle container queries.\n * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n * for failing to parse the stylesheet.\n */\nconst Grid =\n  process.env.NODE_ENV !== 'test'\n    ? styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-template-columns: repeat(auto-fill, 14rem);\n          grid-gap: 4px;\n        }\n      `\n    : styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-gap: 4px;\n        }\n      `;\n\nconst ComponentBox = styled<FlexComponent<'button'>>(Flex)`\n  color: ${({ theme }) => theme.colors.neutral600};\n  cursor: pointer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n\n  &:focus,\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nexport { ComponentCategory };\nexport type { ComponentCategoryProps };\n"],"names":["ComponentCategory","category","components","variant","onAddComponent","formatMessage","useIntl","_jsxs","Accordion","Item","value","_jsx","Header","Trigger","id","defaultMessage","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","displayName","icon","ComponentBox","tag","type","background","justifyContent","onClick","hasRadius","height","shrink","borderColor","Flex","direction","gap","alignItems","ComponentIcon","color","Typography","fontWeight","styled","Content","process","env","NODE_ENV","Box","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":"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"}
+{"version":3,"file":"ComponentCategory.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Accordion, Box, Flex, FlexComponent, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ComponentIcon } from '../../../../../components/ComponentIcon';\n\ninterface ComponentCategoryProps {\n  category: string;\n  components?: Array<{\n    uid: string;\n    displayName: string;\n    icon?: string;\n  }>;\n  onAddComponent: (\n    componentUid: string\n  ) => React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n  variant?: Accordion.Variant;\n}\n\nconst ComponentCategory = ({\n  category,\n  components = [],\n  variant = 'primary',\n  onAddComponent,\n}: ComponentCategoryProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Accordion.Item value={category}>\n      <Accordion.Header variant={variant}>\n        <Accordion.Trigger>\n          {formatMessage({ id: category, defaultMessage: category })}\n        </Accordion.Trigger>\n      </Accordion.Header>\n      <ResponsiveAccordionContent>\n        <Grid paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>\n          {components.map(({ uid, displayName, icon }) => (\n            <ComponentBox\n              key={uid}\n              tag=\"button\"\n              type=\"button\"\n              background=\"neutral100\"\n              justifyContent=\"center\"\n              onClick={onAddComponent(uid)}\n              hasRadius\n              height=\"8.4rem\"\n              shrink={0}\n              borderColor=\"neutral200\"\n            >\n              <Flex direction=\"column\" gap={1} alignItems=\"center\" justifyContent=\"center\">\n                <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />\n\n                <Typography variant=\"pi\" fontWeight=\"bold\">\n                  {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                </Typography>\n              </Flex>\n            </ComponentBox>\n          ))}\n        </Grid>\n      </ResponsiveAccordionContent>\n    </Accordion.Item>\n  );\n};\n\nconst ResponsiveAccordionContent = styled(Accordion.Content)`\n  container-type: inline-size;\n`;\n\n/**\n * TODO:\n * JSDOM cannot handle container queries.\n * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n * for failing to parse the stylesheet.\n */\nconst Grid =\n  process.env.NODE_ENV !== 'test'\n    ? styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-template-columns: repeat(auto-fill, 14rem);\n          grid-gap: 4px;\n        }\n      `\n    : styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-gap: 4px;\n        }\n      `;\n\nconst ComponentBox = styled<FlexComponent<'button'>>(Flex)`\n  color: ${({ theme }) => theme.colors.neutral600};\n  cursor: pointer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n\n  &:focus,\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nexport { ComponentCategory };\nexport type { ComponentCategoryProps };\n"],"names":["ComponentCategory","category","components","variant","onAddComponent","formatMessage","useIntl","_jsxs","Accordion","Item","value","_jsx","Header","Trigger","id","defaultMessage","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","displayName","icon","ComponentBox","tag","type","background","justifyContent","onClick","hasRadius","height","shrink","borderColor","Flex","direction","gap","alignItems","ComponentIcon","color","Typography","fontWeight","styled","Content","process","env","NODE_ENV","Box","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.mjs

@@ -49,7 +49,10 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
                                     /*#__PURE__*/ jsx(Typography, {
                                         variant: "pi",
                                         fontWeight: "bold",
-                                        children: displayName
+                                        children: formatMessage({
+                                            id: uid,
+                                            defaultMessage: displayName ?? uid
+                                        })
                                     })
                                 ]
                             })

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentCategory.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Accordion, Box, Flex, FlexComponent, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ComponentIcon } from '../../../../../components/ComponentIcon';\n\ninterface ComponentCategoryProps {\n  category: string;\n  components?: Array<{\n    uid: string;\n    displayName: string;\n    icon?: string;\n  }>;\n  onAddComponent: (\n    componentUid: string\n  ) => React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n  variant?: Accordion.Variant;\n}\n\nconst ComponentCategory = ({\n  category,\n  components = [],\n  variant = 'primary',\n  onAddComponent,\n}: ComponentCategoryProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Accordion.Item value={category}>\n      <Accordion.Header variant={variant}>\n        <Accordion.Trigger>\n          {formatMessage({ id: category, defaultMessage: category })}\n        </Accordion.Trigger>\n      </Accordion.Header>\n      <ResponsiveAccordionContent>\n        <Grid paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>\n          {components.map(({ uid, displayName, icon }) => (\n            <ComponentBox\n              key={uid}\n              tag=\"button\"\n              type=\"button\"\n              background=\"neutral100\"\n              justifyContent=\"center\"\n              onClick={onAddComponent(uid)}\n              hasRadius\n              height=\"8.4rem\"\n              shrink={0}\n              borderColor=\"neutral200\"\n            >\n              <Flex direction=\"column\" gap={1} alignItems=\"center\" justifyContent=\"center\">\n                <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />\n\n                <Typography variant=\"pi\" fontWeight=\"bold\">\n                  {displayName}\n                </Typography>\n              </Flex>\n            </ComponentBox>\n          ))}\n        </Grid>\n      </ResponsiveAccordionContent>\n    </Accordion.Item>\n  );\n};\n\nconst ResponsiveAccordionContent = styled(Accordion.Content)`\n  container-type: inline-size;\n`;\n\n/**\n * TODO:\n * JSDOM cannot handle container queries.\n * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n * for failing to parse the stylesheet.\n */\nconst Grid =\n  process.env.NODE_ENV !== 'test'\n    ? styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-template-columns: repeat(auto-fill, 14rem);\n          grid-gap: 4px;\n        }\n      `\n    : styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-gap: 4px;\n        }\n      `;\n\nconst ComponentBox = styled<FlexComponent<'button'>>(Flex)`\n  color: ${({ theme }) => theme.colors.neutral600};\n  cursor: pointer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n\n  &:focus,\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nexport { ComponentCategory };\nexport type { ComponentCategoryProps };\n"],"names":["ComponentCategory","category","components","variant","onAddComponent","formatMessage","useIntl","_jsxs","Accordion","Item","value","_jsx","Header","Trigger","id","defaultMessage","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","displayName","icon","ComponentBox","tag","type","background","justifyContent","onClick","hasRadius","height","shrink","borderColor","Flex","direction","gap","alignItems","ComponentIcon","color","Typography","fontWeight","styled","Content","process","env","NODE_ENV","Box","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":"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"}
+{"version":3,"file":"ComponentCategory.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/ComponentCategory.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Accordion, Box, Flex, FlexComponent, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { ComponentIcon } from '../../../../../components/ComponentIcon';\n\ninterface ComponentCategoryProps {\n  category: string;\n  components?: Array<{\n    uid: string;\n    displayName: string;\n    icon?: string;\n  }>;\n  onAddComponent: (\n    componentUid: string\n  ) => React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\n  variant?: Accordion.Variant;\n}\n\nconst ComponentCategory = ({\n  category,\n  components = [],\n  variant = 'primary',\n  onAddComponent,\n}: ComponentCategoryProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Accordion.Item value={category}>\n      <Accordion.Header variant={variant}>\n        <Accordion.Trigger>\n          {formatMessage({ id: category, defaultMessage: category })}\n        </Accordion.Trigger>\n      </Accordion.Header>\n      <ResponsiveAccordionContent>\n        <Grid paddingTop={4} paddingBottom={4} paddingLeft={3} paddingRight={3}>\n          {components.map(({ uid, displayName, icon }) => (\n            <ComponentBox\n              key={uid}\n              tag=\"button\"\n              type=\"button\"\n              background=\"neutral100\"\n              justifyContent=\"center\"\n              onClick={onAddComponent(uid)}\n              hasRadius\n              height=\"8.4rem\"\n              shrink={0}\n              borderColor=\"neutral200\"\n            >\n              <Flex direction=\"column\" gap={1} alignItems=\"center\" justifyContent=\"center\">\n                <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />\n\n                <Typography variant=\"pi\" fontWeight=\"bold\">\n                  {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                </Typography>\n              </Flex>\n            </ComponentBox>\n          ))}\n        </Grid>\n      </ResponsiveAccordionContent>\n    </Accordion.Item>\n  );\n};\n\nconst ResponsiveAccordionContent = styled(Accordion.Content)`\n  container-type: inline-size;\n`;\n\n/**\n * TODO:\n * JSDOM cannot handle container queries.\n * This is a temporary workaround so that tests do not fail in the CI when jestdom throws an error\n * for failing to parse the stylesheet.\n */\nconst Grid =\n  process.env.NODE_ENV !== 'test'\n    ? styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-template-columns: repeat(auto-fill, 14rem);\n          grid-gap: 4px;\n        }\n      `\n    : styled(Box)`\n        display: grid;\n        grid-template-columns: repeat(auto-fill, 100%);\n        grid-gap: 12px;\n\n        ${({ theme }) => theme.breakpoints.medium} {\n          grid-gap: 4px;\n        }\n      `;\n\nconst ComponentBox = styled<FlexComponent<'button'>>(Flex)`\n  color: ${({ theme }) => theme.colors.neutral600};\n  cursor: pointer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n\n  &:focus,\n  &:hover {\n    border: 1px solid ${({ theme }) => theme.colors.primary200};\n    background: ${({ theme }) => theme.colors.primary100};\n    color: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nexport { ComponentCategory };\nexport type { ComponentCategoryProps };\n"],"names":["ComponentCategory","category","components","variant","onAddComponent","formatMessage","useIntl","_jsxs","Accordion","Item","value","_jsx","Header","Trigger","id","defaultMessage","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","displayName","icon","ComponentBox","tag","type","background","justifyContent","onClick","hasRadius","height","shrink","borderColor","Flex","direction","gap","alignItems","ComponentIcon","color","Typography","fontWeight","styled","Content","process","env","NODE_ENV","Box","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.js

@@ -46,16 +46,31 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
     const mainFieldValue = strapiAdmin.useForm('DynamicComponent', (state)=>objects.getIn(state.values, `${name}.${index}.${mainField}`));
     const displayedValue = mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();
     const displayTitle = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
-    const [category] = componentUid.split('.');
-    const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find((component)=>component.uid === componentUid) ?? {
-        icon: null,
-        displayName: null
-    };
+    const { icon, displayName } = React__namespace.useMemo(()=>{
+        const [category] = componentUid.split('.');
+        const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find((component)=>component.uid === componentUid) ?? {
+            icon: null,
+            displayName: null
+        };
+        return {
+            icon,
+            displayName: formatMessage({
+                id: componentUid,
+                defaultMessage: displayName || componentUid
+            })
+        };
+    }, [
+        componentUid,
+        dynamicComponentsByCategory,
+        formatMessage
+    ]);
+    const tempKey = strapiAdmin.useForm('DynamicComponent', (state)=>objects.getIn(state.values, `${name}.${index}.__temp_key__`));
     const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
         type: `${dragAndDrop.ItemTypes.DYNAMIC_ZONE}_${name}`,
         index,
         item: {
             index,
+            id: tempKey,
             displayedValue: `${displayName} ${displayTitle}`,
             icon
         },
@@ -188,11 +203,17 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                         children: Object.entries(dynamicComponentsByCategory).map(([category, components])=>/*#__PURE__*/ jsxRuntime.jsxs(React__namespace.Fragment, {
                                                 children: [
                                                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Label, {
-                                                        children: category
+                                                        children: formatMessage({
+                                                            id: category,
+                                                            defaultMessage: category
+                                                        })
                                                     }),
                                                     components.map(({ displayName, uid })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
                                                             onSelect: ()=>onAddComponent(uid, index),
-                                                            children: displayName
+                                                            children: formatMessage({
+                                                                id: uid,
+                                                                defaultMessage: displayName ?? uid
+                                                            })
                                                         }, uid))
                                                 ]
                                             }, category))
@@ -211,11 +232,17 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                         children: Object.entries(dynamicComponentsByCategory).map(([category, components])=>/*#__PURE__*/ jsxRuntime.jsxs(React__namespace.Fragment, {
                                                 children: [
                                                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Label, {
-                                                        children: category
+                                                        children: formatMessage({
+                                                            id: category,
+                                                            defaultMessage: category
+                                                        })
                                                     }),
                                                     components.map(({ displayName, uid })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
                                                             onSelect: ()=>onAddComponent(uid, index + 1),
-                                                            children: displayName
+                                                            children: formatMessage({
+                                                                id: uid,
+                                                                defaultMessage: displayName ?? uid
+                                                            })
                                                         }, uid))
                                                 ]
                                             }, category))

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicComponent.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useIsDesktop } from '@strapi/admin/strapi-admin';\nimport {\n  Accordion,\n  Box,\n  Flex,\n  Grid,\n  IconButton,\n  useComposedRefs,\n  Menu,\n  BoxComponent,\n} from '@strapi/design-system';\nimport { Drag, More, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { COMPONENT_ICONS } from '../../../../../components/ComponentIcon';\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { type EditFieldLayout, useDocumentLayout } from '../../../../../hooks/useDocumentLayout';\nimport { type UseDragAndDropOptions, useDragAndDrop } from '../../../../../hooks/useDragAndDrop';\nimport { getIn } from '../../../../../utils/objects';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { InputRenderer, type InputRendererProps } from '../../InputRenderer';\n\nimport type { ComponentPickerProps } from './ComponentPicker';\n\ninterface DynamicComponentProps\n  extends Pick<UseDragAndDropOptions, 'onGrabItem' | 'onDropItem' | 'onCancel'>,\n    Pick<ComponentPickerProps, 'dynamicComponentsByCategory'> {\n  componentUid: string;\n  disabled?: boolean;\n  index: number;\n  name: string;\n  onAddComponent: (componentUid: string, index: number) => void;\n  onRemoveComponentClick: (index: number) => void;\n  onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n  totalLength: number;\n  children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicComponent = ({\n  componentUid,\n  disabled,\n  index,\n  name,\n  onRemoveComponentClick,\n  onMoveComponent,\n  onGrabItem,\n  onDropItem,\n  onCancel,\n  dynamicComponentsByCategory = {},\n  onAddComponent,\n  totalLength,\n  children,\n}: DynamicComponentProps) => {\n  const { formatMessage } = useIntl();\n  const { currentDocumentMeta } = useDocumentContext('DynamicComponent');\n  const isDesktop = useIsDesktop();\n\n  const {\n    edit: { components },\n  } = useDocumentLayout(currentDocumentMeta.model);\n\n  const { mainField = 'id' } = components[componentUid]?.settings ?? {};\n\n  const mainFieldValue = useForm('DynamicComponent', (state) =>\n    getIn(state.values, `${name}.${index}.${mainField}`)\n  );\n\n  const displayedValue = mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();\n  const displayTitle = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n  const [category] = componentUid.split('.');\n  const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n    (component) => component.uid === componentUid\n  ) ?? { icon: null, displayName: null };\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n      index,\n      item: {\n        index,\n        displayedValue: `${displayName} ${displayTitle}`,\n        icon,\n      },\n      onMoveItem: onMoveComponent,\n      onDropItem,\n      onGrabItem,\n      onCancel,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  /**\n   * We don't need the accordion's to communicate with each other,\n   * so a unique value for their state is enough.\n   */\n  const accordionValue = React.useId();\n\n  const componentPath = `${name}.${index}`;\n  const hasValue = useForm(\n    'DynamicComponent',\n    (state) => getIn(state.values, componentPath) != null\n  );\n  const isNewItem = useForm(\n    'DynamicComponent',\n    (state) => getIn(state.values, componentPath)?.id == null\n  );\n  const rawError = useForm('DynamicComponent', (state) => getIn(state.errors, componentPath));\n\n  const [collapseToOpen, setCollapseToOpen] = React.useState<string>(\n    isNewItem ? accordionValue : ''\n  );\n\n  React.useEffect(() => {\n    if (rawError && hasValue) {\n      setCollapseToOpen(accordionValue);\n    }\n  }, [rawError, hasValue, accordionValue]);\n\n  const composedBoxRefs = useComposedRefs(boxRef, dropRef);\n\n  const canMoveUp = index > 0;\n  const canMoveDown = index < totalLength - 1;\n  const handleRemoveCurrentComponent = React.useCallback(() => {\n    onRemoveComponentClick(index);\n  }, [onRemoveComponentClick, index]);\n\n  const accordionActions = disabled ? null : (\n    <>\n      <IconButton\n        variant=\"ghost\"\n        label={formatMessage(\n          {\n            id: getTranslation('components.DynamicZone.delete-label'),\n            defaultMessage: 'Delete {name}',\n          },\n          { name: displayTitle }\n        )}\n        onClick={handleRemoveCurrentComponent}\n      >\n        <Trash />\n      </IconButton>\n      {isDesktop && (\n        <IconButton\n          variant=\"ghost\"\n          onClick={(e) => e.stopPropagation()}\n          data-handler-id={handlerId}\n          ref={dragRef}\n          label={formatMessage({\n            id: getTranslation('components.DragHandle-label'),\n            defaultMessage: 'Drag',\n          })}\n          onKeyDown={handleKeyDown}\n        >\n          <Drag />\n        </IconButton>\n      )}\n      {!isDesktop && (\n        <>\n          {canMoveUp && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onMoveComponent(index - 1, index);\n              }}\n              disabled={!canMoveUp}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-up'),\n                defaultMessage: 'Move up',\n              })}\n            >\n              <ArrowUp />\n            </IconButton>\n          )}\n          {canMoveDown && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onMoveComponent(index + 1, index);\n              }}\n              disabled={!canMoveDown}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-down'),\n                defaultMessage: 'Move down',\n              })}\n            >\n              <ArrowDown />\n            </IconButton>\n          )}\n        </>\n      )}\n      <Menu.Root>\n        <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n          <IconButton\n            variant=\"ghost\"\n            label={formatMessage({\n              id: getTranslation('components.DynamicZone.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            tag=\"span\"\n          >\n            <More aria-hidden focusable={false} />\n          </IconButton>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-above'),\n                defaultMessage: 'Add component above',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-below'),\n                defaultMessage: 'Add component below',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index + 1)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n        </Menu.Content>\n      </Menu.Root>\n    </>\n  );\n\n  const accordionTitle = displayTitle ? `${displayName} ${displayTitle}` : displayName;\n\n  return (\n    <ComponentContainer tag=\"li\" width=\"100%\">\n      <Flex justifyContent=\"center\">\n        <Rectangle background=\"neutral200\" />\n      </Flex>\n      <StyledBox ref={composedBoxRefs} hasRadius>\n        {isDragging ? (\n          <Preview />\n        ) : (\n          <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\n            <Accordion.Item value={accordionValue}>\n              <Accordion.Header>\n                <Accordion.Trigger\n                  icon={\n                    icon && COMPONENT_ICONS[icon]\n                      ? COMPONENT_ICONS[icon]\n                      : COMPONENT_ICONS.dashboard\n                  }\n                >\n                  {accordionTitle}\n                </Accordion.Trigger>\n                <Accordion.Actions>{accordionActions}</Accordion.Actions>\n              </Accordion.Header>\n              <Accordion.Content>\n                <AccordionContentRadius background=\"neutral0\">\n                  <DynamicComponentFields\n                    componentUid={componentUid}\n                    index={index}\n                    layout={components[componentUid]?.layout}\n                    name={name}\n                  >\n                    {children}\n                  </DynamicComponentFields>\n                </AccordionContentRadius>\n              </Accordion.Content>\n            </Accordion.Item>\n          </Accordion.Root>\n        )}\n      </StyledBox>\n    </ComponentContainer>\n  );\n};\n\n// TODO: Delete once https://github.com/strapi/design-system/pull/858\n// is merged and released.\nconst StyledBox = styled<BoxComponent>(Box)`\n  > div:first-child {\n    box-shadow: ${({ theme }) => theme.shadows.tableShadow};\n  }\n`;\n\nconst AccordionContentRadius = styled<BoxComponent>(Box)`\n  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};\n`;\n\nconst Rectangle = styled<BoxComponent>(Box)`\n  width: ${({ theme }) => theme.spaces[2]};\n  height: ${({ theme }) => theme.spaces[4]};\n`;\n\nconst Preview = styled.span`\n  display: block;\n  background-color: ${({ theme }) => theme.colors.primary100};\n  outline: 1px dashed ${({ theme }) => theme.colors.primary500};\n  outline-offset: -1px;\n  padding: ${({ theme }) => theme.spaces[6]};\n`;\n\nconst ComponentContainer = styled<BoxComponent<'li'>>(Box)`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n`;\n\ninterface DynamicComponentFieldsProps extends Pick<DynamicComponentProps, 'children'> {\n  componentUid: string;\n  index: number;\n  layout?: EditFieldLayout[][];\n  name: string;\n}\n\nconst DynamicComponentFields = React.memo(\n  ({ children, componentUid, index, layout, name }: DynamicComponentFieldsProps) => {\n    const { formatMessage } = useIntl();\n\n    return (\n      <Box padding={{ initial: 4, medium: 6 }}>\n        <Grid.Root gap={4}>\n          {layout?.map((row, rowInd) => {\n            return (\n              <Grid.Item col={12} key={rowInd} xs={12} direction=\"column\" alignItems=\"stretch\">\n                <ResponsiveGridRoot gap={4}>\n                  {row.map(({ size, ...field }) => {\n                    const fieldName = `${name}.${index}.${field.name}`;\n\n                    const fieldWithTranslatedLabel = {\n                      ...field,\n                      label: formatMessage({\n                        id: `content-manager.components.${componentUid}.${field.name}`,\n                        defaultMessage: field.label,\n                      }),\n                    };\n\n                    return (\n                      <ResponsiveGridItem\n                        col={size}\n                        key={fieldName}\n                        s={12}\n                        xs={12}\n                        direction=\"column\"\n                        alignItems=\"stretch\"\n                      >\n                        {children ? (\n                          children({\n                            ...fieldWithTranslatedLabel,\n                            name: fieldName,\n                          })\n                        ) : (\n                          <InputRenderer {...fieldWithTranslatedLabel} name={fieldName} />\n                        )}\n                      </ResponsiveGridItem>\n                    );\n                  })}\n                </ResponsiveGridRoot>\n              </Grid.Item>\n            );\n          })}\n        </Grid.Root>\n      </Box>\n    );\n  }\n);\n\nDynamicComponentFields.displayName = 'DynamicComponentFields';\n\nconst MemoizedDynamicComponent = React.memo(DynamicComponent);\n\nexport { MemoizedDynamicComponent as DynamicComponent };\nexport type { DynamicComponentProps };\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","totalLength","children","formatMessage","useIntl","currentDocumentMeta","useDocumentContext","isDesktop","useIsDesktop","edit","components","useDocumentLayout","model","mainField","settings","mainFieldValue","useForm","state","getIn","values","displayedValue","String","trim","displayTitle","length","category","split","icon","displayName","find","component","uid","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","React","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","componentPath","hasValue","isNewItem","id","rawError","errors","collapseToOpen","setCollapseToOpen","useState","composedBoxRefs","useComposedRefs","canMoveUp","canMoveDown","handleRemoveCurrentComponent","useCallback","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","getTranslation","defaultMessage","onClick","Trash","e","stopPropagation","data-handler-id","ref","onKeyDown","Drag","ArrowUp","ArrowDown","Menu","Root","Trigger","size","endIcon","paddingLeft","paddingRight","tag","More","aria-hidden","focusable","Content","SubRoot","SubTrigger","SubContent","Object","entries","map","Fragment","Label","Item","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","value","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","DynamicComponentFields","layout","styled","Box","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500","memo","padding","initial","medium","Grid","gap","row","rowInd","col","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","s","InputRenderer","MemoizedDynamicComponent"],"mappings":"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"}
+{"version":3,"file":"DynamicComponent.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useIsDesktop } from '@strapi/admin/strapi-admin';\nimport {\n  Accordion,\n  Box,\n  Flex,\n  Grid,\n  IconButton,\n  useComposedRefs,\n  Menu,\n  BoxComponent,\n} from '@strapi/design-system';\nimport { Drag, More, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { COMPONENT_ICONS } from '../../../../../components/ComponentIcon';\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { type EditFieldLayout, useDocumentLayout } from '../../../../../hooks/useDocumentLayout';\nimport { type UseDragAndDropOptions, useDragAndDrop } from '../../../../../hooks/useDragAndDrop';\nimport { getIn } from '../../../../../utils/objects';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { InputRenderer, type InputRendererProps } from '../../InputRenderer';\n\nimport type { ComponentPickerProps } from './ComponentPicker';\n\ninterface DynamicComponentProps\n  extends Pick<UseDragAndDropOptions, 'onGrabItem' | 'onDropItem' | 'onCancel'>,\n    Pick<ComponentPickerProps, 'dynamicComponentsByCategory'> {\n  componentUid: string;\n  disabled?: boolean;\n  index: number;\n  name: string;\n  onAddComponent: (componentUid: string, index: number) => void;\n  onRemoveComponentClick: (index: number) => void;\n  onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n  totalLength: number;\n  children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicComponent = ({\n  componentUid,\n  disabled,\n  index,\n  name,\n  onRemoveComponentClick,\n  onMoveComponent,\n  onGrabItem,\n  onDropItem,\n  onCancel,\n  dynamicComponentsByCategory = {},\n  onAddComponent,\n  totalLength,\n  children,\n}: DynamicComponentProps) => {\n  const { formatMessage } = useIntl();\n  const { currentDocumentMeta } = useDocumentContext('DynamicComponent');\n  const isDesktop = useIsDesktop();\n\n  const {\n    edit: { components },\n  } = useDocumentLayout(currentDocumentMeta.model);\n\n  const { mainField = 'id' } = components[componentUid]?.settings ?? {};\n\n  const mainFieldValue = useForm('DynamicComponent', (state) =>\n    getIn(state.values, `${name}.${index}.${mainField}`)\n  );\n\n  const displayedValue = mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();\n  const displayTitle = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n  const { icon, displayName } = React.useMemo(() => {\n    const [category] = componentUid.split('.');\n    const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n      (component) => component.uid === componentUid\n    ) ?? { icon: null, displayName: null };\n\n    return {\n      icon,\n      displayName: formatMessage({\n        id: componentUid,\n        defaultMessage: displayName || componentUid,\n      }),\n    };\n  }, [componentUid, dynamicComponentsByCategory, formatMessage]);\n\n  const tempKey = useForm('DynamicComponent', (state) =>\n    getIn(state.values, `${name}.${index}.__temp_key__`)\n  ) as string | undefined;\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n      index,\n      item: {\n        index,\n        id: tempKey,\n        displayedValue: `${displayName} ${displayTitle}`,\n        icon,\n      },\n      onMoveItem: onMoveComponent,\n      onDropItem,\n      onGrabItem,\n      onCancel,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  /**\n   * We don't need the accordion's to communicate with each other,\n   * so a unique value for their state is enough.\n   */\n  const accordionValue = React.useId();\n\n  const componentPath = `${name}.${index}`;\n  const hasValue = useForm(\n    'DynamicComponent',\n    (state) => getIn(state.values, componentPath) != null\n  );\n  const isNewItem = useForm(\n    'DynamicComponent',\n    (state) => getIn(state.values, componentPath)?.id == null\n  );\n  const rawError = useForm('DynamicComponent', (state) => getIn(state.errors, componentPath));\n\n  const [collapseToOpen, setCollapseToOpen] = React.useState<string>(\n    isNewItem ? accordionValue : ''\n  );\n\n  React.useEffect(() => {\n    if (rawError && hasValue) {\n      setCollapseToOpen(accordionValue);\n    }\n  }, [rawError, hasValue, accordionValue]);\n\n  const composedBoxRefs = useComposedRefs(boxRef, dropRef);\n\n  const canMoveUp = index > 0;\n  const canMoveDown = index < totalLength - 1;\n  const handleRemoveCurrentComponent = React.useCallback(() => {\n    onRemoveComponentClick(index);\n  }, [onRemoveComponentClick, index]);\n\n  const accordionActions = disabled ? null : (\n    <>\n      <IconButton\n        variant=\"ghost\"\n        label={formatMessage(\n          {\n            id: getTranslation('components.DynamicZone.delete-label'),\n            defaultMessage: 'Delete {name}',\n          },\n          { name: displayTitle }\n        )}\n        onClick={handleRemoveCurrentComponent}\n      >\n        <Trash />\n      </IconButton>\n      {isDesktop && (\n        <IconButton\n          variant=\"ghost\"\n          onClick={(e) => e.stopPropagation()}\n          data-handler-id={handlerId}\n          ref={dragRef}\n          label={formatMessage({\n            id: getTranslation('components.DragHandle-label'),\n            defaultMessage: 'Drag',\n          })}\n          onKeyDown={handleKeyDown}\n        >\n          <Drag />\n        </IconButton>\n      )}\n      {!isDesktop && (\n        <>\n          {canMoveUp && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onMoveComponent(index - 1, index);\n              }}\n              disabled={!canMoveUp}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-up'),\n                defaultMessage: 'Move up',\n              })}\n            >\n              <ArrowUp />\n            </IconButton>\n          )}\n          {canMoveDown && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onMoveComponent(index + 1, index);\n              }}\n              disabled={!canMoveDown}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-down'),\n                defaultMessage: 'Move down',\n              })}\n            >\n              <ArrowDown />\n            </IconButton>\n          )}\n        </>\n      )}\n      <Menu.Root>\n        <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n          <IconButton\n            variant=\"ghost\"\n            label={formatMessage({\n              id: getTranslation('components.DynamicZone.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            tag=\"span\"\n          >\n            <More aria-hidden focusable={false} />\n          </IconButton>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-above'),\n                defaultMessage: 'Add component above',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>\n                    {formatMessage({ id: category, defaultMessage: category })}\n                  </Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index)}>\n                      {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-below'),\n                defaultMessage: 'Add component below',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>\n                    {formatMessage({ id: category, defaultMessage: category })}\n                  </Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index + 1)}>\n                      {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n        </Menu.Content>\n      </Menu.Root>\n    </>\n  );\n\n  const accordionTitle = displayTitle ? `${displayName} ${displayTitle}` : displayName;\n\n  return (\n    <ComponentContainer tag=\"li\" width=\"100%\">\n      <Flex justifyContent=\"center\">\n        <Rectangle background=\"neutral200\" />\n      </Flex>\n      <StyledBox ref={composedBoxRefs} hasRadius>\n        {isDragging ? (\n          <Preview />\n        ) : (\n          <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\n            <Accordion.Item value={accordionValue}>\n              <Accordion.Header>\n                <Accordion.Trigger\n                  icon={\n                    icon && COMPONENT_ICONS[icon]\n                      ? COMPONENT_ICONS[icon]\n                      : COMPONENT_ICONS.dashboard\n                  }\n                >\n                  {accordionTitle}\n                </Accordion.Trigger>\n                <Accordion.Actions>{accordionActions}</Accordion.Actions>\n              </Accordion.Header>\n              <Accordion.Content>\n                <AccordionContentRadius background=\"neutral0\">\n                  <DynamicComponentFields\n                    componentUid={componentUid}\n                    index={index}\n                    layout={components[componentUid]?.layout}\n                    name={name}\n                  >\n                    {children}\n                  </DynamicComponentFields>\n                </AccordionContentRadius>\n              </Accordion.Content>\n            </Accordion.Item>\n          </Accordion.Root>\n        )}\n      </StyledBox>\n    </ComponentContainer>\n  );\n};\n\n// TODO: Delete once https://github.com/strapi/design-system/pull/858\n// is merged and released.\nconst StyledBox = styled<BoxComponent>(Box)`\n  > div:first-child {\n    box-shadow: ${({ theme }) => theme.shadows.tableShadow};\n  }\n`;\n\nconst AccordionContentRadius = styled<BoxComponent>(Box)`\n  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};\n`;\n\nconst Rectangle = styled<BoxComponent>(Box)`\n  width: ${({ theme }) => theme.spaces[2]};\n  height: ${({ theme }) => theme.spaces[4]};\n`;\n\nconst Preview = styled.span`\n  display: block;\n  background-color: ${({ theme }) => theme.colors.primary100};\n  outline: 1px dashed ${({ theme }) => theme.colors.primary500};\n  outline-offset: -1px;\n  padding: ${({ theme }) => theme.spaces[6]};\n`;\n\nconst ComponentContainer = styled<BoxComponent<'li'>>(Box)`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n`;\n\ninterface DynamicComponentFieldsProps extends Pick<DynamicComponentProps, 'children'> {\n  componentUid: string;\n  index: number;\n  layout?: EditFieldLayout[][];\n  name: string;\n}\n\nconst DynamicComponentFields = React.memo(\n  ({ children, componentUid, index, layout, name }: DynamicComponentFieldsProps) => {\n    const { formatMessage } = useIntl();\n\n    return (\n      <Box padding={{ initial: 4, medium: 6 }}>\n        <Grid.Root gap={4}>\n          {layout?.map((row, rowInd) => {\n            return (\n              <Grid.Item col={12} key={rowInd} xs={12} direction=\"column\" alignItems=\"stretch\">\n                <ResponsiveGridRoot gap={4}>\n                  {row.map(({ size, ...field }) => {\n                    const fieldName = `${name}.${index}.${field.name}`;\n\n                    const fieldWithTranslatedLabel = {\n                      ...field,\n                      label: formatMessage({\n                        id: `content-manager.components.${componentUid}.${field.name}`,\n                        defaultMessage: field.label,\n                      }),\n                    };\n\n                    return (\n                      <ResponsiveGridItem\n                        col={size}\n                        key={fieldName}\n                        s={12}\n                        xs={12}\n                        direction=\"column\"\n                        alignItems=\"stretch\"\n                      >\n                        {children ? (\n                          children({\n                            ...fieldWithTranslatedLabel,\n                            name: fieldName,\n                          })\n                        ) : (\n                          <InputRenderer {...fieldWithTranslatedLabel} name={fieldName} />\n                        )}\n                      </ResponsiveGridItem>\n                    );\n                  })}\n                </ResponsiveGridRoot>\n              </Grid.Item>\n            );\n          })}\n        </Grid.Root>\n      </Box>\n    );\n  }\n);\n\nDynamicComponentFields.displayName = 'DynamicComponentFields';\n\nconst MemoizedDynamicComponent = React.memo(DynamicComponent);\n\nexport { MemoizedDynamicComponent as DynamicComponent };\nexport type { DynamicComponentProps };\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","totalLength","children","formatMessage","useIntl","currentDocumentMeta","useDocumentContext","isDesktop","useIsDesktop","edit","components","useDocumentLayout","model","mainField","settings","mainFieldValue","useForm","state","getIn","values","displayedValue","String","trim","displayTitle","length","icon","displayName","React","useMemo","category","split","find","component","uid","id","defaultMessage","tempKey","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","componentPath","hasValue","isNewItem","rawError","errors","collapseToOpen","setCollapseToOpen","useState","composedBoxRefs","useComposedRefs","canMoveUp","canMoveDown","handleRemoveCurrentComponent","useCallback","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","getTranslation","onClick","Trash","e","stopPropagation","data-handler-id","ref","onKeyDown","Drag","ArrowUp","ArrowDown","Menu","Root","Trigger","size","endIcon","paddingLeft","paddingRight","tag","More","aria-hidden","focusable","Content","SubRoot","SubTrigger","SubContent","Object","entries","map","Fragment","Label","Item","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","value","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","DynamicComponentFields","layout","styled","Box","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500","memo","padding","initial","medium","Grid","gap","row","rowInd","col","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","s","InputRenderer","MemoizedDynamicComponent"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.mjs

@@ -25,16 +25,31 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
     const mainFieldValue = useForm('DynamicComponent', (state)=>getIn(state.values, `${name}.${index}.${mainField}`));
     const displayedValue = mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();
     const displayTitle = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
-    const [category] = componentUid.split('.');
-    const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find((component)=>component.uid === componentUid) ?? {
-        icon: null,
-        displayName: null
-    };
+    const { icon, displayName } = React.useMemo(()=>{
+        const [category] = componentUid.split('.');
+        const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find((component)=>component.uid === componentUid) ?? {
+            icon: null,
+            displayName: null
+        };
+        return {
+            icon,
+            displayName: formatMessage({
+                id: componentUid,
+                defaultMessage: displayName || componentUid
+            })
+        };
+    }, [
+        componentUid,
+        dynamicComponentsByCategory,
+        formatMessage
+    ]);
+    const tempKey = useForm('DynamicComponent', (state)=>getIn(state.values, `${name}.${index}.__temp_key__`));
     const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
         type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,
         index,
         item: {
             index,
+            id: tempKey,
             displayedValue: `${displayName} ${displayTitle}`,
             icon
         },
@@ -167,11 +182,17 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                         children: Object.entries(dynamicComponentsByCategory).map(([category, components])=>/*#__PURE__*/ jsxs(React.Fragment, {
                                                 children: [
                                                     /*#__PURE__*/ jsx(Menu.Label, {
-                                                        children: category
+                                                        children: formatMessage({
+                                                            id: category,
+                                                            defaultMessage: category
+                                                        })
                                                     }),
                                                     components.map(({ displayName, uid })=>/*#__PURE__*/ jsx(Menu.Item, {
                                                             onSelect: ()=>onAddComponent(uid, index),
-                                                            children: displayName
+                                                            children: formatMessage({
+                                                                id: uid,
+                                                                defaultMessage: displayName ?? uid
+                                                            })
                                                         }, uid))
                                                 ]
                                             }, category))
@@ -190,11 +211,17 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                         children: Object.entries(dynamicComponentsByCategory).map(([category, components])=>/*#__PURE__*/ jsxs(React.Fragment, {
                                                 children: [
                                                     /*#__PURE__*/ jsx(Menu.Label, {
-                                                        children: category
+                                                        children: formatMessage({
+                                                            id: category,
+                                                            defaultMessage: category
+                                                        })
                                                     }),
                                                     components.map(({ displayName, uid })=>/*#__PURE__*/ jsx(Menu.Item, {
                                                             onSelect: ()=>onAddComponent(uid, index + 1),
-                                                            children: displayName
+                                                            children: formatMessage({
+                                                                id: uid,
+                                                                defaultMessage: displayName ?? uid
+                                                            })
                                                         }, uid))
                                                 ]
                                             }, category))

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicComponent.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useIsDesktop } from '@strapi/admin/strapi-admin';\nimport {\n  Accordion,\n  Box,\n  Flex,\n  Grid,\n  IconButton,\n  useComposedRefs,\n  Menu,\n  BoxComponent,\n} from '@strapi/design-system';\nimport { Drag, More, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { COMPONENT_ICONS } from '../../../../../components/ComponentIcon';\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { type EditFieldLayout, useDocumentLayout } from '../../../../../hooks/useDocumentLayout';\nimport { type UseDragAndDropOptions, useDragAndDrop } from '../../../../../hooks/useDragAndDrop';\nimport { getIn } from '../../../../../utils/objects';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { InputRenderer, type InputRendererProps } from '../../InputRenderer';\n\nimport type { ComponentPickerProps } from './ComponentPicker';\n\ninterface DynamicComponentProps\n  extends Pick<UseDragAndDropOptions, 'onGrabItem' | 'onDropItem' | 'onCancel'>,\n    Pick<ComponentPickerProps, 'dynamicComponentsByCategory'> {\n  componentUid: string;\n  disabled?: boolean;\n  index: number;\n  name: string;\n  onAddComponent: (componentUid: string, index: number) => void;\n  onRemoveComponentClick: (index: number) => void;\n  onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n  totalLength: number;\n  children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicComponent = ({\n  componentUid,\n  disabled,\n  index,\n  name,\n  onRemoveComponentClick,\n  onMoveComponent,\n  onGrabItem,\n  onDropItem,\n  onCancel,\n  dynamicComponentsByCategory = {},\n  onAddComponent,\n  totalLength,\n  children,\n}: DynamicComponentProps) => {\n  const { formatMessage } = useIntl();\n  const { currentDocumentMeta } = useDocumentContext('DynamicComponent');\n  const isDesktop = useIsDesktop();\n\n  const {\n    edit: { components },\n  } = useDocumentLayout(currentDocumentMeta.model);\n\n  const { mainField = 'id' } = components[componentUid]?.settings ?? {};\n\n  const mainFieldValue = useForm('DynamicComponent', (state) =>\n    getIn(state.values, `${name}.${index}.${mainField}`)\n  );\n\n  const displayedValue = mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();\n  const displayTitle = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n  const [category] = componentUid.split('.');\n  const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n    (component) => component.uid === componentUid\n  ) ?? { icon: null, displayName: null };\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n      index,\n      item: {\n        index,\n        displayedValue: `${displayName} ${displayTitle}`,\n        icon,\n      },\n      onMoveItem: onMoveComponent,\n      onDropItem,\n      onGrabItem,\n      onCancel,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  /**\n   * We don't need the accordion's to communicate with each other,\n   * so a unique value for their state is enough.\n   */\n  const accordionValue = React.useId();\n\n  const componentPath = `${name}.${index}`;\n  const hasValue = useForm(\n    'DynamicComponent',\n    (state) => getIn(state.values, componentPath) != null\n  );\n  const isNewItem = useForm(\n    'DynamicComponent',\n    (state) => getIn(state.values, componentPath)?.id == null\n  );\n  const rawError = useForm('DynamicComponent', (state) => getIn(state.errors, componentPath));\n\n  const [collapseToOpen, setCollapseToOpen] = React.useState<string>(\n    isNewItem ? accordionValue : ''\n  );\n\n  React.useEffect(() => {\n    if (rawError && hasValue) {\n      setCollapseToOpen(accordionValue);\n    }\n  }, [rawError, hasValue, accordionValue]);\n\n  const composedBoxRefs = useComposedRefs(boxRef, dropRef);\n\n  const canMoveUp = index > 0;\n  const canMoveDown = index < totalLength - 1;\n  const handleRemoveCurrentComponent = React.useCallback(() => {\n    onRemoveComponentClick(index);\n  }, [onRemoveComponentClick, index]);\n\n  const accordionActions = disabled ? null : (\n    <>\n      <IconButton\n        variant=\"ghost\"\n        label={formatMessage(\n          {\n            id: getTranslation('components.DynamicZone.delete-label'),\n            defaultMessage: 'Delete {name}',\n          },\n          { name: displayTitle }\n        )}\n        onClick={handleRemoveCurrentComponent}\n      >\n        <Trash />\n      </IconButton>\n      {isDesktop && (\n        <IconButton\n          variant=\"ghost\"\n          onClick={(e) => e.stopPropagation()}\n          data-handler-id={handlerId}\n          ref={dragRef}\n          label={formatMessage({\n            id: getTranslation('components.DragHandle-label'),\n            defaultMessage: 'Drag',\n          })}\n          onKeyDown={handleKeyDown}\n        >\n          <Drag />\n        </IconButton>\n      )}\n      {!isDesktop && (\n        <>\n          {canMoveUp && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onMoveComponent(index - 1, index);\n              }}\n              disabled={!canMoveUp}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-up'),\n                defaultMessage: 'Move up',\n              })}\n            >\n              <ArrowUp />\n            </IconButton>\n          )}\n          {canMoveDown && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onMoveComponent(index + 1, index);\n              }}\n              disabled={!canMoveDown}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-down'),\n                defaultMessage: 'Move down',\n              })}\n            >\n              <ArrowDown />\n            </IconButton>\n          )}\n        </>\n      )}\n      <Menu.Root>\n        <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n          <IconButton\n            variant=\"ghost\"\n            label={formatMessage({\n              id: getTranslation('components.DynamicZone.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            tag=\"span\"\n          >\n            <More aria-hidden focusable={false} />\n          </IconButton>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-above'),\n                defaultMessage: 'Add component above',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-below'),\n                defaultMessage: 'Add component below',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index + 1)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n        </Menu.Content>\n      </Menu.Root>\n    </>\n  );\n\n  const accordionTitle = displayTitle ? `${displayName} ${displayTitle}` : displayName;\n\n  return (\n    <ComponentContainer tag=\"li\" width=\"100%\">\n      <Flex justifyContent=\"center\">\n        <Rectangle background=\"neutral200\" />\n      </Flex>\n      <StyledBox ref={composedBoxRefs} hasRadius>\n        {isDragging ? (\n          <Preview />\n        ) : (\n          <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\n            <Accordion.Item value={accordionValue}>\n              <Accordion.Header>\n                <Accordion.Trigger\n                  icon={\n                    icon && COMPONENT_ICONS[icon]\n                      ? COMPONENT_ICONS[icon]\n                      : COMPONENT_ICONS.dashboard\n                  }\n                >\n                  {accordionTitle}\n                </Accordion.Trigger>\n                <Accordion.Actions>{accordionActions}</Accordion.Actions>\n              </Accordion.Header>\n              <Accordion.Content>\n                <AccordionContentRadius background=\"neutral0\">\n                  <DynamicComponentFields\n                    componentUid={componentUid}\n                    index={index}\n                    layout={components[componentUid]?.layout}\n                    name={name}\n                  >\n                    {children}\n                  </DynamicComponentFields>\n                </AccordionContentRadius>\n              </Accordion.Content>\n            </Accordion.Item>\n          </Accordion.Root>\n        )}\n      </StyledBox>\n    </ComponentContainer>\n  );\n};\n\n// TODO: Delete once https://github.com/strapi/design-system/pull/858\n// is merged and released.\nconst StyledBox = styled<BoxComponent>(Box)`\n  > div:first-child {\n    box-shadow: ${({ theme }) => theme.shadows.tableShadow};\n  }\n`;\n\nconst AccordionContentRadius = styled<BoxComponent>(Box)`\n  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};\n`;\n\nconst Rectangle = styled<BoxComponent>(Box)`\n  width: ${({ theme }) => theme.spaces[2]};\n  height: ${({ theme }) => theme.spaces[4]};\n`;\n\nconst Preview = styled.span`\n  display: block;\n  background-color: ${({ theme }) => theme.colors.primary100};\n  outline: 1px dashed ${({ theme }) => theme.colors.primary500};\n  outline-offset: -1px;\n  padding: ${({ theme }) => theme.spaces[6]};\n`;\n\nconst ComponentContainer = styled<BoxComponent<'li'>>(Box)`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n`;\n\ninterface DynamicComponentFieldsProps extends Pick<DynamicComponentProps, 'children'> {\n  componentUid: string;\n  index: number;\n  layout?: EditFieldLayout[][];\n  name: string;\n}\n\nconst DynamicComponentFields = React.memo(\n  ({ children, componentUid, index, layout, name }: DynamicComponentFieldsProps) => {\n    const { formatMessage } = useIntl();\n\n    return (\n      <Box padding={{ initial: 4, medium: 6 }}>\n        <Grid.Root gap={4}>\n          {layout?.map((row, rowInd) => {\n            return (\n              <Grid.Item col={12} key={rowInd} xs={12} direction=\"column\" alignItems=\"stretch\">\n                <ResponsiveGridRoot gap={4}>\n                  {row.map(({ size, ...field }) => {\n                    const fieldName = `${name}.${index}.${field.name}`;\n\n                    const fieldWithTranslatedLabel = {\n                      ...field,\n                      label: formatMessage({\n                        id: `content-manager.components.${componentUid}.${field.name}`,\n                        defaultMessage: field.label,\n                      }),\n                    };\n\n                    return (\n                      <ResponsiveGridItem\n                        col={size}\n                        key={fieldName}\n                        s={12}\n                        xs={12}\n                        direction=\"column\"\n                        alignItems=\"stretch\"\n                      >\n                        {children ? (\n                          children({\n                            ...fieldWithTranslatedLabel,\n                            name: fieldName,\n                          })\n                        ) : (\n                          <InputRenderer {...fieldWithTranslatedLabel} name={fieldName} />\n                        )}\n                      </ResponsiveGridItem>\n                    );\n                  })}\n                </ResponsiveGridRoot>\n              </Grid.Item>\n            );\n          })}\n        </Grid.Root>\n      </Box>\n    );\n  }\n);\n\nDynamicComponentFields.displayName = 'DynamicComponentFields';\n\nconst MemoizedDynamicComponent = React.memo(DynamicComponent);\n\nexport { MemoizedDynamicComponent as DynamicComponent };\nexport type { DynamicComponentProps };\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","totalLength","children","formatMessage","useIntl","currentDocumentMeta","useDocumentContext","isDesktop","useIsDesktop","edit","components","useDocumentLayout","model","mainField","settings","mainFieldValue","useForm","state","getIn","values","displayedValue","String","trim","displayTitle","length","category","split","icon","displayName","find","component","uid","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","React","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","componentPath","hasValue","isNewItem","id","rawError","errors","collapseToOpen","setCollapseToOpen","useState","composedBoxRefs","useComposedRefs","canMoveUp","canMoveDown","handleRemoveCurrentComponent","useCallback","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","getTranslation","defaultMessage","onClick","Trash","e","stopPropagation","data-handler-id","ref","onKeyDown","Drag","ArrowUp","ArrowDown","Menu","Root","Trigger","size","endIcon","paddingLeft","paddingRight","tag","More","aria-hidden","focusable","Content","SubRoot","SubTrigger","SubContent","Object","entries","map","Fragment","Label","Item","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","value","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","DynamicComponentFields","layout","styled","Box","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500","memo","padding","initial","medium","Grid","gap","row","rowInd","col","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","s","InputRenderer","MemoizedDynamicComponent"],"mappings":"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"}
+{"version":3,"file":"DynamicComponent.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useIsDesktop } from '@strapi/admin/strapi-admin';\nimport {\n  Accordion,\n  Box,\n  Flex,\n  Grid,\n  IconButton,\n  useComposedRefs,\n  Menu,\n  BoxComponent,\n} from '@strapi/design-system';\nimport { Drag, More, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { COMPONENT_ICONS } from '../../../../../components/ComponentIcon';\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { type EditFieldLayout, useDocumentLayout } from '../../../../../hooks/useDocumentLayout';\nimport { type UseDragAndDropOptions, useDragAndDrop } from '../../../../../hooks/useDragAndDrop';\nimport { getIn } from '../../../../../utils/objects';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { InputRenderer, type InputRendererProps } from '../../InputRenderer';\n\nimport type { ComponentPickerProps } from './ComponentPicker';\n\ninterface DynamicComponentProps\n  extends Pick<UseDragAndDropOptions, 'onGrabItem' | 'onDropItem' | 'onCancel'>,\n    Pick<ComponentPickerProps, 'dynamicComponentsByCategory'> {\n  componentUid: string;\n  disabled?: boolean;\n  index: number;\n  name: string;\n  onAddComponent: (componentUid: string, index: number) => void;\n  onRemoveComponentClick: (index: number) => void;\n  onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n  totalLength: number;\n  children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicComponent = ({\n  componentUid,\n  disabled,\n  index,\n  name,\n  onRemoveComponentClick,\n  onMoveComponent,\n  onGrabItem,\n  onDropItem,\n  onCancel,\n  dynamicComponentsByCategory = {},\n  onAddComponent,\n  totalLength,\n  children,\n}: DynamicComponentProps) => {\n  const { formatMessage } = useIntl();\n  const { currentDocumentMeta } = useDocumentContext('DynamicComponent');\n  const isDesktop = useIsDesktop();\n\n  const {\n    edit: { components },\n  } = useDocumentLayout(currentDocumentMeta.model);\n\n  const { mainField = 'id' } = components[componentUid]?.settings ?? {};\n\n  const mainFieldValue = useForm('DynamicComponent', (state) =>\n    getIn(state.values, `${name}.${index}.${mainField}`)\n  );\n\n  const displayedValue = mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();\n  const displayTitle = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n  const { icon, displayName } = React.useMemo(() => {\n    const [category] = componentUid.split('.');\n    const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n      (component) => component.uid === componentUid\n    ) ?? { icon: null, displayName: null };\n\n    return {\n      icon,\n      displayName: formatMessage({\n        id: componentUid,\n        defaultMessage: displayName || componentUid,\n      }),\n    };\n  }, [componentUid, dynamicComponentsByCategory, formatMessage]);\n\n  const tempKey = useForm('DynamicComponent', (state) =>\n    getIn(state.values, `${name}.${index}.__temp_key__`)\n  ) as string | undefined;\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n      index,\n      item: {\n        index,\n        id: tempKey,\n        displayedValue: `${displayName} ${displayTitle}`,\n        icon,\n      },\n      onMoveItem: onMoveComponent,\n      onDropItem,\n      onGrabItem,\n      onCancel,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  /**\n   * We don't need the accordion's to communicate with each other,\n   * so a unique value for their state is enough.\n   */\n  const accordionValue = React.useId();\n\n  const componentPath = `${name}.${index}`;\n  const hasValue = useForm(\n    'DynamicComponent',\n    (state) => getIn(state.values, componentPath) != null\n  );\n  const isNewItem = useForm(\n    'DynamicComponent',\n    (state) => getIn(state.values, componentPath)?.id == null\n  );\n  const rawError = useForm('DynamicComponent', (state) => getIn(state.errors, componentPath));\n\n  const [collapseToOpen, setCollapseToOpen] = React.useState<string>(\n    isNewItem ? accordionValue : ''\n  );\n\n  React.useEffect(() => {\n    if (rawError && hasValue) {\n      setCollapseToOpen(accordionValue);\n    }\n  }, [rawError, hasValue, accordionValue]);\n\n  const composedBoxRefs = useComposedRefs(boxRef, dropRef);\n\n  const canMoveUp = index > 0;\n  const canMoveDown = index < totalLength - 1;\n  const handleRemoveCurrentComponent = React.useCallback(() => {\n    onRemoveComponentClick(index);\n  }, [onRemoveComponentClick, index]);\n\n  const accordionActions = disabled ? null : (\n    <>\n      <IconButton\n        variant=\"ghost\"\n        label={formatMessage(\n          {\n            id: getTranslation('components.DynamicZone.delete-label'),\n            defaultMessage: 'Delete {name}',\n          },\n          { name: displayTitle }\n        )}\n        onClick={handleRemoveCurrentComponent}\n      >\n        <Trash />\n      </IconButton>\n      {isDesktop && (\n        <IconButton\n          variant=\"ghost\"\n          onClick={(e) => e.stopPropagation()}\n          data-handler-id={handlerId}\n          ref={dragRef}\n          label={formatMessage({\n            id: getTranslation('components.DragHandle-label'),\n            defaultMessage: 'Drag',\n          })}\n          onKeyDown={handleKeyDown}\n        >\n          <Drag />\n        </IconButton>\n      )}\n      {!isDesktop && (\n        <>\n          {canMoveUp && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onMoveComponent(index - 1, index);\n              }}\n              disabled={!canMoveUp}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-up'),\n                defaultMessage: 'Move up',\n              })}\n            >\n              <ArrowUp />\n            </IconButton>\n          )}\n          {canMoveDown && (\n            <IconButton\n              variant=\"ghost\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onMoveComponent(index + 1, index);\n              }}\n              disabled={!canMoveDown}\n              label={formatMessage({\n                id: getTranslation('components.DynamicZone.move-down'),\n                defaultMessage: 'Move down',\n              })}\n            >\n              <ArrowDown />\n            </IconButton>\n          )}\n        </>\n      )}\n      <Menu.Root>\n        <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n          <IconButton\n            variant=\"ghost\"\n            label={formatMessage({\n              id: getTranslation('components.DynamicZone.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            tag=\"span\"\n          >\n            <More aria-hidden focusable={false} />\n          </IconButton>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-above'),\n                defaultMessage: 'Add component above',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>\n                    {formatMessage({ id: category, defaultMessage: category })}\n                  </Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index)}>\n                      {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-below'),\n                defaultMessage: 'Add component below',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>\n                    {formatMessage({ id: category, defaultMessage: category })}\n                  </Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index + 1)}>\n                      {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n        </Menu.Content>\n      </Menu.Root>\n    </>\n  );\n\n  const accordionTitle = displayTitle ? `${displayName} ${displayTitle}` : displayName;\n\n  return (\n    <ComponentContainer tag=\"li\" width=\"100%\">\n      <Flex justifyContent=\"center\">\n        <Rectangle background=\"neutral200\" />\n      </Flex>\n      <StyledBox ref={composedBoxRefs} hasRadius>\n        {isDragging ? (\n          <Preview />\n        ) : (\n          <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\n            <Accordion.Item value={accordionValue}>\n              <Accordion.Header>\n                <Accordion.Trigger\n                  icon={\n                    icon && COMPONENT_ICONS[icon]\n                      ? COMPONENT_ICONS[icon]\n                      : COMPONENT_ICONS.dashboard\n                  }\n                >\n                  {accordionTitle}\n                </Accordion.Trigger>\n                <Accordion.Actions>{accordionActions}</Accordion.Actions>\n              </Accordion.Header>\n              <Accordion.Content>\n                <AccordionContentRadius background=\"neutral0\">\n                  <DynamicComponentFields\n                    componentUid={componentUid}\n                    index={index}\n                    layout={components[componentUid]?.layout}\n                    name={name}\n                  >\n                    {children}\n                  </DynamicComponentFields>\n                </AccordionContentRadius>\n              </Accordion.Content>\n            </Accordion.Item>\n          </Accordion.Root>\n        )}\n      </StyledBox>\n    </ComponentContainer>\n  );\n};\n\n// TODO: Delete once https://github.com/strapi/design-system/pull/858\n// is merged and released.\nconst StyledBox = styled<BoxComponent>(Box)`\n  > div:first-child {\n    box-shadow: ${({ theme }) => theme.shadows.tableShadow};\n  }\n`;\n\nconst AccordionContentRadius = styled<BoxComponent>(Box)`\n  border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};\n`;\n\nconst Rectangle = styled<BoxComponent>(Box)`\n  width: ${({ theme }) => theme.spaces[2]};\n  height: ${({ theme }) => theme.spaces[4]};\n`;\n\nconst Preview = styled.span`\n  display: block;\n  background-color: ${({ theme }) => theme.colors.primary100};\n  outline: 1px dashed ${({ theme }) => theme.colors.primary500};\n  outline-offset: -1px;\n  padding: ${({ theme }) => theme.spaces[6]};\n`;\n\nconst ComponentContainer = styled<BoxComponent<'li'>>(Box)`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n`;\n\ninterface DynamicComponentFieldsProps extends Pick<DynamicComponentProps, 'children'> {\n  componentUid: string;\n  index: number;\n  layout?: EditFieldLayout[][];\n  name: string;\n}\n\nconst DynamicComponentFields = React.memo(\n  ({ children, componentUid, index, layout, name }: DynamicComponentFieldsProps) => {\n    const { formatMessage } = useIntl();\n\n    return (\n      <Box padding={{ initial: 4, medium: 6 }}>\n        <Grid.Root gap={4}>\n          {layout?.map((row, rowInd) => {\n            return (\n              <Grid.Item col={12} key={rowInd} xs={12} direction=\"column\" alignItems=\"stretch\">\n                <ResponsiveGridRoot gap={4}>\n                  {row.map(({ size, ...field }) => {\n                    const fieldName = `${name}.${index}.${field.name}`;\n\n                    const fieldWithTranslatedLabel = {\n                      ...field,\n                      label: formatMessage({\n                        id: `content-manager.components.${componentUid}.${field.name}`,\n                        defaultMessage: field.label,\n                      }),\n                    };\n\n                    return (\n                      <ResponsiveGridItem\n                        col={size}\n                        key={fieldName}\n                        s={12}\n                        xs={12}\n                        direction=\"column\"\n                        alignItems=\"stretch\"\n                      >\n                        {children ? (\n                          children({\n                            ...fieldWithTranslatedLabel,\n                            name: fieldName,\n                          })\n                        ) : (\n                          <InputRenderer {...fieldWithTranslatedLabel} name={fieldName} />\n                        )}\n                      </ResponsiveGridItem>\n                    );\n                  })}\n                </ResponsiveGridRoot>\n              </Grid.Item>\n            );\n          })}\n        </Grid.Root>\n      </Box>\n    );\n  }\n);\n\nDynamicComponentFields.displayName = 'DynamicComponentFields';\n\nconst MemoizedDynamicComponent = React.memo(DynamicComponent);\n\nexport { MemoizedDynamicComponent as DynamicComponent };\nexport type { DynamicComponentProps };\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","totalLength","children","formatMessage","useIntl","currentDocumentMeta","useDocumentContext","isDesktop","useIsDesktop","edit","components","useDocumentLayout","model","mainField","settings","mainFieldValue","useForm","state","getIn","values","displayedValue","String","trim","displayTitle","length","icon","displayName","React","useMemo","category","split","find","component","uid","id","defaultMessage","tempKey","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","componentPath","hasValue","isNewItem","rawError","errors","collapseToOpen","setCollapseToOpen","useState","composedBoxRefs","useComposedRefs","canMoveUp","canMoveDown","handleRemoveCurrentComponent","useCallback","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","getTranslation","onClick","Trash","e","stopPropagation","data-handler-id","ref","onKeyDown","Drag","ArrowUp","ArrowDown","Menu","Root","Trigger","size","endIcon","paddingLeft","paddingRight","tag","More","aria-hidden","focusable","Content","SubRoot","SubTrigger","SubContent","Object","entries","map","Fragment","Label","Item","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","value","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","DynamicComponentFields","layout","styled","Box","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500","memo","padding","initial","medium","Grid","gap","row","rowInd","col","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","s","InputRenderer","MemoizedDynamicComponent"],"mappings":"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"}

package/dist/admin/pages/ListConfiguration/ListConfigurationPage.js

@@ -40,8 +40,14 @@ const ListConfiguration = ()=>{
     const { trackUsage } = strapiAdmin.useTracking();
     const { toggleNotification } = strapiAdmin.useNotification();
     const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
-    const { model, collectionType } = useDocument.useDoc();
+    const { model, collectionType, schema } = useDocument.useDoc();
     const { isLoading: isLoadingLayout, list, edit } = useDocumentLayout.useDocLayout();
+    const [displayedHeaderNames, setDisplayedHeaderNames] = strapiAdmin.useScopedPersistentState(`STRAPI_LIST_VIEW_DISPLAYED_HEADERS:${model}`, null);
+    const { metadata } = contentTypes.useGetContentTypeConfigurationQuery(model, {
+        selectFromResult: ({ data })=>({
+                metadata: data?.contentType.metadatas ?? {}
+            })
+    });
     const [updateContentTypeConfiguration] = contentTypes.useUpdateContentTypeConfigurationMutation();
     const handleSubmit = async (data)=>{
         try {
@@ -77,6 +83,7 @@ const ListConfiguration = ()=>{
                 uid: model
             });
             if ('data' in res) {
+                setDisplayedHeaderNames(layoutData.map((field)=>field.name));
                 trackUsage('didEditListSettings');
                 toggleNotification({
                     type: 'success',
@@ -103,8 +110,15 @@ const ListConfiguration = ()=>{
         }
     };
     const initialValues = React__namespace.useMemo(()=>{
+        const headerNames = displayedHeaderNames && displayedHeaderNames.length > 0 ? displayedHeaderNames : list.layout.map((field)=>field.name);
+        const headerMetadatas = headerNames.reduce((acc, name)=>{
+            acc[name] = metadata[name]?.list ?? list.metadatas[name] ?? {
+                label: name
+            };
+            return acc;
+        }, {});
         return {
-            layout: list.layout.map(({ label, sortable, name })=>({
+            layout: useDocumentLayout.convertListLayoutToFieldLayouts(headerNames, schema?.attributes, headerMetadatas).map(({ label, sortable, name })=>({
                     label: typeof label === 'string' ? label : formatMessage(label),
                     sortable,
                     name
@@ -113,8 +127,10 @@ const ListConfiguration = ()=>{
         };
     }, [
         formatMessage,
-        list.layout,
-        list.settings
+        list,
+        displayedHeaderNames,
+        schema,
+        metadata
     ]);
     if (collectionType === collections.SINGLE_TYPES) {
         return /*#__PURE__*/ jsxRuntime.jsx(reactRouterDom.Navigate, {
@@ -167,10 +183,11 @@ const ListConfiguration = ()=>{
     });
 };
 const ProtectedListConfiguration = ()=>{
+    const { slug = '' } = reactRouterDom.useParams();
     const permissions = hooks.useTypedSelector((state)=>state.admin_app.permissions.contentManager?.collectionTypesConfigurations);
     return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Protect, {
         permissions: permissions,
-        children: /*#__PURE__*/ jsxRuntime.jsx(ListConfiguration, {})
+        children: /*#__PURE__*/ jsxRuntime.jsx(ListConfiguration, {}, slug)
     });
 };