@strapi/content-manager 5.42.1 → 5.43.0

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.mjs

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { createContext, useIsMobile } from '@strapi/admin/strapi-admin';
 import { Divider, VisuallyHidden, IconButton } from '@strapi/design-system';
 import { Expand } from '@strapi/icons';
+import { flushSync } from 'react-dom';
 import { useIntl } from 'react-intl';
 import { createEditor, Transforms, Editor } from 'slate';
 import { withHistory } from 'slate-history';
@@ -127,6 +128,23 @@ const BlocksEditor = /*#__PURE__*/ React.forwardRef(({ disabled = false, name, o
     ]);
     const { key, incrementSlateUpdatesCount } = useResetKey(value);
     const debounceTimeout = React.useRef(null);
+    const flushPendingFormSync = React.useCallback(()=>{
+        if (!debounceTimeout.current) {
+            return;
+        }
+        clearTimeout(debounceTimeout.current);
+        debounceTimeout.current = null;
+        incrementSlateUpdatesCount();
+        // Ensure Strapi Form state updates before the next event (e.g. Save click) reads values.
+        flushSync(()=>{
+            onChange(name, normalizeBlocksState(editor, editor.children));
+        });
+    }, [
+        editor,
+        incrementSlateUpdatesCount,
+        name,
+        onChange
+    ]);
     const handleSlateChange = React.useCallback((state)=>{
         const isAstChange = editor.operations.some((op)=>op.type !== 'set_selection');
         if (isAstChange) {
@@ -212,6 +230,7 @@ const BlocksEditor = /*#__PURE__*/ React.forwardRef(({ disabled = false, name, o
                     name: name,
                     setLiveText: setLiveText,
                     isExpandedMode: isExpandedMode,
+                    flushPendingFormSync: flushPendingFormSync,
                     children: /*#__PURE__*/ jsxs(EditorLayout, {
                         error: error,
                         disabled: disabled,

package/dist/admin/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BlocksEditor.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { createContext, type FieldValue, useIsMobile } from '@strapi/admin/strapi-admin';\nimport { IconButton, Divider, VisuallyHidden } from '@strapi/design-system';\nimport { Expand } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { Editor, type Descendant, createEditor, Transforms, Element } from 'slate';\nimport { withHistory } from 'slate-history';\nimport { type RenderElementProps, Slate, withReact, ReactEditor, useSlate } from 'slate-react';\nimport { styled, type CSSProperties } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { codeBlocks } from './Blocks/Code';\nimport { headingBlocks } from './Blocks/Heading';\nimport { imageBlocks } from './Blocks/Image';\nimport { linkBlocks } from './Blocks/Link';\nimport { listBlocks } from './Blocks/List';\nimport { paragraphBlocks } from './Blocks/Paragraph';\nimport { quoteBlocks } from './Blocks/Quote';\nimport { BlocksContent, type BlocksContentProps } from './BlocksContent';\nimport { BlocksToolbar } from './BlocksToolbar';\nimport { EditorLayout } from './EditorLayout';\nimport { type ModifiersStore, modifiers } from './Modifiers';\nimport { withStrapiSchema } from './plugins/withStrapiSchema';\nimport { isNonNullable } from './utils/types';\n\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * BlocksEditorProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseBlock {\n  renderElement: (props: RenderElementProps) => React.JSX.Element;\n  /** Function to check if a given node is of this type of block */\n  matchNode: (node: Schema.Attribute.BlocksNode) => boolean;\n  handleConvert?: (editor: Editor) => void | (() => React.JSX.Element);\n  handleEnterKey?: (editor: Editor) => void;\n  handleBackspaceKey?: (editor: Editor, event: React.KeyboardEvent<HTMLElement>) => void;\n  handleTab?: (editor: Editor) => void;\n  handleShiftTab?: (editor: Editor) => void;\n  snippets?: string[];\n  /** Adjust the vertical positioning of the drag-to-reorder grip icon */\n  dragHandleTopMargin?: CSSProperties['marginTop'];\n  /** A Slate plugin: function that will wrap the editor creation */\n  plugin?: (editor: Editor) => Editor;\n  /**\n   * Function that checks if an element should be draggable\n   * @default () => true */\n  isDraggable?: (element: Element) => boolean;\n}\n\ninterface NonSelectorBlock extends BaseBlock {\n  isInBlocksSelector: false;\n}\n\ninterface SelectorBlock extends BaseBlock {\n  isInBlocksSelector: true;\n  icon: React.ComponentType;\n  label: MessageDescriptor;\n}\n\ntype NonSelectorBlockKey = 'list-item' | 'link';\n\nconst selectorBlockKeys = [\n  'paragraph',\n  'heading-one',\n  'heading-two',\n  'heading-three',\n  'heading-four',\n  'heading-five',\n  'heading-six',\n  'list-ordered',\n  'list-unordered',\n  'image',\n  'quote',\n  'code',\n] as const;\n\ntype SelectorBlockKey = (typeof selectorBlockKeys)[number];\n\nconst isSelectorBlockKey = (key: unknown): key is SelectorBlockKey => {\n  return typeof key === 'string' && selectorBlockKeys.includes(key as SelectorBlockKey);\n};\n\ntype BlocksStore = {\n  [K in SelectorBlockKey]: SelectorBlock;\n} & {\n  [K in NonSelectorBlockKey]: NonSelectorBlock;\n};\n\ninterface BlocksEditorContextValue {\n  blocks: BlocksStore;\n  modifiers: ModifiersStore;\n  disabled: boolean;\n  name: string;\n  setLiveText: (text: string) => void;\n  isExpandedMode: boolean;\n}\n\nconst [BlocksEditorProvider, usePartialBlocksEditorContext] =\n  createContext<BlocksEditorContextValue>('BlocksEditor');\n\nfunction useBlocksEditorContext(\n  consumerName: string\n): BlocksEditorContextValue & { editor: Editor } {\n  const context = usePartialBlocksEditorContext(consumerName, (state) => state);\n  const editor = useSlate();\n\n  return {\n    ...context,\n    editor,\n  };\n}\n\n/* -------------------------------------------------------------------------------------------------\n * BlocksEditor\n * -----------------------------------------------------------------------------------------------*/\n\nconst EditorDivider = styled(Divider)`\n  background: ${({ theme }) => theme.colors.neutral200};\n`;\n\n/**\n * Forces an update of the Slate editor when the value prop changes from outside of Slate.\n * The root cause is that Slate is not a controlled component: https://github.com/ianstormtaylor/slate/issues/4612\n * Why not use JSON.stringify(value) as the key?\n * Because it would force a rerender of the entire editor every time the user types a character.\n * Why not use the entity id as the key, since it's unique for each locale?\n * Because it would not solve the problem when using the \"fill in from other locale\" feature\n */\nfunction useResetKey(value?: Schema.Attribute.BlocksValue): {\n  key: number;\n  incrementSlateUpdatesCount: () => void;\n} {\n  // Keep track how many times Slate detected a change from a user interaction in the editor\n  const slateUpdatesCount = React.useRef(0);\n  // Keep track of how many times the value prop was updated, whether from within editor or from outside\n  const valueUpdatesCount = React.useRef(0);\n  // Use a key to force a rerender of the Slate editor when needed\n  const [key, setKey] = React.useState(0);\n\n  React.useEffect(() => {\n    valueUpdatesCount.current += 1;\n\n    // If the 2 refs are not equal, it means the value was updated from outside\n    if (valueUpdatesCount.current !== slateUpdatesCount.current) {\n      // So we change the key to force a rerender of the Slate editor,\n      // which will pick up the new value through its initialValue prop\n      setKey((previousKey) => previousKey + 1);\n\n      // Then bring the 2 refs back in sync\n      slateUpdatesCount.current = valueUpdatesCount.current;\n    }\n  }, [value]);\n\n  const incrementSlateUpdatesCount = React.useCallback(() => {\n    slateUpdatesCount.current += 1;\n  }, []);\n\n  return { key, incrementSlateUpdatesCount };\n}\n\nconst pipe =\n  (...fns: ((baseEditor: Editor) => Editor)[]) =>\n  (value: Editor) =>\n    fns.reduce<Editor>((prev, fn) => fn(prev), value);\n\n/**\n * Normalize the blocks state to null if the editor state is considered empty,\n * otherwise return the state\n */\nconst normalizeBlocksState = (\n  editor: Editor,\n  value: Schema.Attribute.BlocksValue | Descendant[]\n): Schema.Attribute.BlocksValue | Descendant[] | null => {\n  const isEmpty =\n    value.length === 1 && Editor.isEmpty(editor, value[0] as Schema.Attribute.BlocksNode);\n\n  return isEmpty ? null : value;\n};\n\ninterface BlocksEditorProps\n  extends Pick<FieldValue<Schema.Attribute.BlocksValue>, 'onChange' | 'value' | 'error'>,\n    BlocksContentProps {\n  disabled?: boolean;\n  name: string;\n}\n\nconst BlocksEditor = React.forwardRef<{ focus: () => void }, BlocksEditorProps>(\n  ({ disabled = false, name, onChange, value, error, ...contentProps }, forwardedRef) => {\n    const { formatMessage } = useIntl();\n    const isMobile = useIsMobile();\n\n    const blocks = React.useMemo(\n      () => ({\n        ...paragraphBlocks,\n        ...headingBlocks,\n        ...listBlocks,\n        ...linkBlocks,\n        ...imageBlocks,\n        ...quoteBlocks,\n        ...codeBlocks,\n      }),\n      []\n    ) satisfies BlocksStore;\n\n    const blockRegisteredPlugins = Object.values(blocks)\n      .map((block) => block.plugin)\n      .filter(isNonNullable);\n\n    const [editor] = React.useState(() =>\n      pipe(withHistory, withStrapiSchema, withReact, ...blockRegisteredPlugins)(createEditor())\n    );\n    const [liveText, setLiveText] = React.useState('');\n    const ariaDescriptionId = React.useId();\n    const [isExpandedMode, handleToggleExpand] = React.useReducer((prev) => !prev, false);\n\n    /**\n     * Editable is not able to hold the ref, https://github.com/ianstormtaylor/slate/issues/4082\n     * so with \"useImperativeHandle\" we can use ReactEditor methods to expose to the parent above\n     * also not passing forwarded ref here, gives console warning.\n     */\n    React.useImperativeHandle(\n      forwardedRef,\n      () => ({\n        focus() {\n          ReactEditor.focus(editor);\n        },\n      }),\n      [editor]\n    );\n\n    const { key, incrementSlateUpdatesCount } = useResetKey(value);\n\n    const debounceTimeout = React.useRef<NodeJS.Timeout | null>(null);\n\n    const handleSlateChange = React.useCallback(\n      (state: Descendant[]) => {\n        const isAstChange = editor.operations.some((op) => op.type !== 'set_selection');\n\n        if (isAstChange) {\n          /**\n           * Slate handles the state of the editor internally. We just need to keep Strapi's form\n           * state in sync with it in order to make sure that things like the \"modified\" state\n           * isn't broken. Updating the whole state on every change is very expensive however,\n           * so we debounce calls to onChange to mitigate input lag.\n           */\n          if (debounceTimeout.current) {\n            clearTimeout(debounceTimeout.current);\n          }\n\n          // Set a new debounce timeout\n          debounceTimeout.current = setTimeout(() => {\n            incrementSlateUpdatesCount();\n\n            // Normalize the state (empty editor becomes null)\n            onChange(name, normalizeBlocksState(editor, state) as Schema.Attribute.BlocksValue);\n            debounceTimeout.current = null;\n          }, 300);\n        }\n      },\n      [editor, incrementSlateUpdatesCount, name, onChange]\n    );\n\n    // Clean up the timeout on unmount\n    React.useEffect(() => {\n      return () => {\n        if (debounceTimeout.current) {\n          clearTimeout(debounceTimeout.current);\n        }\n      };\n    }, []);\n\n    // Ensure the editor is in sync after discard\n    React.useEffect(() => {\n      // Never deselect while the editor is actively focused (typing / editing),\n      if (ReactEditor.isFocused(editor)) {\n        return;\n      }\n\n      // Normalize empty states for comparison to avoid losing focus on the editor when content is deleted\n      const normalizedValue = value?.length ? value : null;\n      const normalizedEditorState = normalizeBlocksState(editor, editor.children);\n\n      // Compare the field value with the editor state to check for a stale selection\n      if (\n        normalizedValue &&\n        normalizedEditorState &&\n        JSON.stringify(normalizedEditorState) !== JSON.stringify(normalizedValue)\n      ) {\n        // When there is a diff, unset selection to avoid an invalid state\n        Transforms.deselect(editor);\n      }\n    }, [editor, value]);\n\n    return (\n      <>\n        <VisuallyHidden id={ariaDescriptionId}>\n          {formatMessage({\n            id: getTranslation('components.Blocks.dnd.instruction'),\n            defaultMessage: `To reorder blocks, press Command or Control along with Shift and the Up or Down arrow keys`,\n          })}\n        </VisuallyHidden>\n        <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n        <Slate\n          editor={editor}\n          initialValue={\n            value?.length ? value : [{ type: 'paragraph', children: [{ type: 'text', text: '' }] }]\n          }\n          onChange={handleSlateChange}\n          key={key}\n        >\n          <BlocksEditorProvider\n            blocks={blocks}\n            modifiers={modifiers}\n            disabled={disabled}\n            name={name}\n            setLiveText={setLiveText}\n            isExpandedMode={isExpandedMode}\n          >\n            <EditorLayout\n              error={error}\n              disabled={disabled}\n              onToggleExpand={handleToggleExpand}\n              ariaDescriptionId={ariaDescriptionId}\n            >\n              <BlocksToolbar />\n              <EditorDivider width=\"100%\" />\n              <BlocksContent {...contentProps} />\n              {!isExpandedMode && !isMobile && (\n                <IconButton\n                  position=\"absolute\"\n                  bottom=\"1.2rem\"\n                  right=\"1.2rem\"\n                  shadow=\"filterShadow\"\n                  label={formatMessage({\n                    id: getTranslation('components.Blocks.expand'),\n                    defaultMessage: 'Expand',\n                  })}\n                  onClick={handleToggleExpand}\n                >\n                  <Expand />\n                </IconButton>\n              )}\n            </EditorLayout>\n          </BlocksEditorProvider>\n        </Slate>\n      </>\n    );\n  }\n);\n\nexport {\n  type BlocksStore,\n  type SelectorBlockKey,\n  BlocksEditor,\n  BlocksEditorProvider,\n  useBlocksEditorContext,\n  isSelectorBlockKey,\n  normalizeBlocksState,\n};\n"],"names":["selectorBlockKeys","isSelectorBlockKey","key","includes","BlocksEditorProvider","usePartialBlocksEditorContext","createContext","useBlocksEditorContext","consumerName","context","state","editor","useSlate","EditorDivider","styled","Divider","theme","colors","neutral200","useResetKey","value","slateUpdatesCount","React","useRef","valueUpdatesCount","setKey","useState","useEffect","current","previousKey","incrementSlateUpdatesCount","useCallback","pipe","fns","reduce","prev","fn","normalizeBlocksState","isEmpty","length","Editor","BlocksEditor","forwardRef","disabled","name","onChange","error","contentProps","forwardedRef","formatMessage","useIntl","isMobile","useIsMobile","blocks","useMemo","paragraphBlocks","headingBlocks","listBlocks","linkBlocks","imageBlocks","quoteBlocks","codeBlocks","blockRegisteredPlugins","Object","values","map","block","plugin","filter","isNonNullable","withHistory","withStrapiSchema","withReact","createEditor","liveText","setLiveText","ariaDescriptionId","useId","isExpandedMode","handleToggleExpand","useReducer","useImperativeHandle","focus","ReactEditor","debounceTimeout","handleSlateChange","isAstChange","operations","some","op","type","clearTimeout","setTimeout","isFocused","normalizedValue","normalizedEditorState","children","JSON","stringify","Transforms","deselect","_jsxs","_Fragment","_jsx","VisuallyHidden","id","getTranslation","defaultMessage","aria-live","Slate","initialValue","text","modifiers","EditorLayout","onToggleExpand","BlocksToolbar","width","BlocksContent","IconButton","position","bottom","right","shadow","label","onClick","Expand"],"mappings":"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"}
+{"version":3,"file":"BlocksEditor.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksEditor.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { createContext, type FieldValue, useIsMobile } from '@strapi/admin/strapi-admin';\nimport { IconButton, Divider, VisuallyHidden } from '@strapi/design-system';\nimport { Expand } from '@strapi/icons';\nimport { flushSync } from 'react-dom';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { Editor, type Descendant, createEditor, Transforms, Element } from 'slate';\nimport { withHistory } from 'slate-history';\nimport { type RenderElementProps, Slate, withReact, ReactEditor, useSlate } from 'slate-react';\nimport { styled, type CSSProperties } from 'styled-components';\n\nimport { getTranslation } from '../../../../../utils/translations';\n\nimport { codeBlocks } from './Blocks/Code';\nimport { headingBlocks } from './Blocks/Heading';\nimport { imageBlocks } from './Blocks/Image';\nimport { linkBlocks } from './Blocks/Link';\nimport { listBlocks } from './Blocks/List';\nimport { paragraphBlocks } from './Blocks/Paragraph';\nimport { quoteBlocks } from './Blocks/Quote';\nimport { BlocksContent, type BlocksContentProps } from './BlocksContent';\nimport { BlocksToolbar } from './BlocksToolbar';\nimport { EditorLayout } from './EditorLayout';\nimport { type ModifiersStore, modifiers } from './Modifiers';\nimport { withStrapiSchema } from './plugins/withStrapiSchema';\nimport { isNonNullable } from './utils/types';\n\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * BlocksEditorProvider\n * -----------------------------------------------------------------------------------------------*/\n\ninterface BaseBlock {\n  renderElement: (props: RenderElementProps) => React.JSX.Element;\n  /** Function to check if a given node is of this type of block */\n  matchNode: (node: Schema.Attribute.BlocksNode) => boolean;\n  handleConvert?: (editor: Editor) => void | (() => React.JSX.Element);\n  handleEnterKey?: (editor: Editor) => void;\n  handleBackspaceKey?: (editor: Editor, event: React.KeyboardEvent<HTMLElement>) => void;\n  handleTab?: (editor: Editor) => void;\n  handleShiftTab?: (editor: Editor) => void;\n  snippets?: string[];\n  /** Adjust the vertical positioning of the drag-to-reorder grip icon */\n  dragHandleTopMargin?: CSSProperties['marginTop'];\n  /** A Slate plugin: function that will wrap the editor creation */\n  plugin?: (editor: Editor) => Editor;\n  /**\n   * Function that checks if an element should be draggable\n   * @default () => true */\n  isDraggable?: (element: Element) => boolean;\n}\n\ninterface NonSelectorBlock extends BaseBlock {\n  isInBlocksSelector: false;\n}\n\ninterface SelectorBlock extends BaseBlock {\n  isInBlocksSelector: true;\n  icon: React.ComponentType;\n  label: MessageDescriptor;\n}\n\ntype NonSelectorBlockKey = 'list-item' | 'link';\n\nconst selectorBlockKeys = [\n  'paragraph',\n  'heading-one',\n  'heading-two',\n  'heading-three',\n  'heading-four',\n  'heading-five',\n  'heading-six',\n  'list-ordered',\n  'list-unordered',\n  'image',\n  'quote',\n  'code',\n] as const;\n\ntype SelectorBlockKey = (typeof selectorBlockKeys)[number];\n\nconst isSelectorBlockKey = (key: unknown): key is SelectorBlockKey => {\n  return typeof key === 'string' && selectorBlockKeys.includes(key as SelectorBlockKey);\n};\n\ntype BlocksStore = {\n  [K in SelectorBlockKey]: SelectorBlock;\n} & {\n  [K in NonSelectorBlockKey]: NonSelectorBlock;\n};\n\ninterface BlocksEditorContextValue {\n  blocks: BlocksStore;\n  modifiers: ModifiersStore;\n  disabled: boolean;\n  name: string;\n  setLiveText: (text: string) => void;\n  isExpandedMode: boolean;\n  /** Push debounced Slate → form sync immediately (e.g. on Editable blur before Save). */\n  flushPendingFormSync: () => void;\n}\n\nconst [BlocksEditorProvider, usePartialBlocksEditorContext] =\n  createContext<BlocksEditorContextValue>('BlocksEditor');\n\nfunction useBlocksEditorContext(\n  consumerName: string\n): BlocksEditorContextValue & { editor: Editor } {\n  const context = usePartialBlocksEditorContext(consumerName, (state) => state);\n  const editor = useSlate();\n\n  return {\n    ...context,\n    editor,\n  };\n}\n\n/* -------------------------------------------------------------------------------------------------\n * BlocksEditor\n * -----------------------------------------------------------------------------------------------*/\n\nconst EditorDivider = styled(Divider)`\n  background: ${({ theme }) => theme.colors.neutral200};\n`;\n\n/**\n * Forces an update of the Slate editor when the value prop changes from outside of Slate.\n * The root cause is that Slate is not a controlled component: https://github.com/ianstormtaylor/slate/issues/4612\n * Why not use JSON.stringify(value) as the key?\n * Because it would force a rerender of the entire editor every time the user types a character.\n * Why not use the entity id as the key, since it's unique for each locale?\n * Because it would not solve the problem when using the \"fill in from other locale\" feature\n */\nfunction useResetKey(value?: Schema.Attribute.BlocksValue): {\n  key: number;\n  incrementSlateUpdatesCount: () => void;\n} {\n  // Keep track how many times Slate detected a change from a user interaction in the editor\n  const slateUpdatesCount = React.useRef(0);\n  // Keep track of how many times the value prop was updated, whether from within editor or from outside\n  const valueUpdatesCount = React.useRef(0);\n  // Use a key to force a rerender of the Slate editor when needed\n  const [key, setKey] = React.useState(0);\n\n  React.useEffect(() => {\n    valueUpdatesCount.current += 1;\n\n    // If the 2 refs are not equal, it means the value was updated from outside\n    if (valueUpdatesCount.current !== slateUpdatesCount.current) {\n      // So we change the key to force a rerender of the Slate editor,\n      // which will pick up the new value through its initialValue prop\n      setKey((previousKey) => previousKey + 1);\n\n      // Then bring the 2 refs back in sync\n      slateUpdatesCount.current = valueUpdatesCount.current;\n    }\n  }, [value]);\n\n  const incrementSlateUpdatesCount = React.useCallback(() => {\n    slateUpdatesCount.current += 1;\n  }, []);\n\n  return { key, incrementSlateUpdatesCount };\n}\n\nconst pipe =\n  (...fns: ((baseEditor: Editor) => Editor)[]) =>\n  (value: Editor) =>\n    fns.reduce<Editor>((prev, fn) => fn(prev), value);\n\n/**\n * Normalize the blocks state to null if the editor state is considered empty,\n * otherwise return the state\n */\nconst normalizeBlocksState = (\n  editor: Editor,\n  value: Schema.Attribute.BlocksValue | Descendant[]\n): Schema.Attribute.BlocksValue | Descendant[] | null => {\n  const isEmpty =\n    value.length === 1 && Editor.isEmpty(editor, value[0] as Schema.Attribute.BlocksNode);\n\n  return isEmpty ? null : value;\n};\n\ninterface BlocksEditorProps\n  extends Pick<FieldValue<Schema.Attribute.BlocksValue>, 'onChange' | 'value' | 'error'>,\n    BlocksContentProps {\n  disabled?: boolean;\n  name: string;\n}\n\nconst BlocksEditor = React.forwardRef<{ focus: () => void }, BlocksEditorProps>(\n  ({ disabled = false, name, onChange, value, error, ...contentProps }, forwardedRef) => {\n    const { formatMessage } = useIntl();\n    const isMobile = useIsMobile();\n\n    const blocks = React.useMemo(\n      () => ({\n        ...paragraphBlocks,\n        ...headingBlocks,\n        ...listBlocks,\n        ...linkBlocks,\n        ...imageBlocks,\n        ...quoteBlocks,\n        ...codeBlocks,\n      }),\n      []\n    ) satisfies BlocksStore;\n\n    const blockRegisteredPlugins = Object.values(blocks)\n      .map((block) => block.plugin)\n      .filter(isNonNullable);\n\n    const [editor] = React.useState(() =>\n      pipe(withHistory, withStrapiSchema, withReact, ...blockRegisteredPlugins)(createEditor())\n    );\n    const [liveText, setLiveText] = React.useState('');\n    const ariaDescriptionId = React.useId();\n    const [isExpandedMode, handleToggleExpand] = React.useReducer((prev) => !prev, false);\n\n    /**\n     * Editable is not able to hold the ref, https://github.com/ianstormtaylor/slate/issues/4082\n     * so with \"useImperativeHandle\" we can use ReactEditor methods to expose to the parent above\n     * also not passing forwarded ref here, gives console warning.\n     */\n    React.useImperativeHandle(\n      forwardedRef,\n      () => ({\n        focus() {\n          ReactEditor.focus(editor);\n        },\n      }),\n      [editor]\n    );\n\n    const { key, incrementSlateUpdatesCount } = useResetKey(value);\n\n    const debounceTimeout = React.useRef<NodeJS.Timeout | null>(null);\n\n    const flushPendingFormSync = React.useCallback(() => {\n      if (!debounceTimeout.current) {\n        return;\n      }\n      clearTimeout(debounceTimeout.current);\n      debounceTimeout.current = null;\n      incrementSlateUpdatesCount();\n      // Ensure Strapi Form state updates before the next event (e.g. Save click) reads values.\n      flushSync(() => {\n        onChange(\n          name,\n          normalizeBlocksState(editor, editor.children) as Schema.Attribute.BlocksValue\n        );\n      });\n    }, [editor, incrementSlateUpdatesCount, name, onChange]);\n\n    const handleSlateChange = React.useCallback(\n      (state: Descendant[]) => {\n        const isAstChange = editor.operations.some((op) => op.type !== 'set_selection');\n\n        if (isAstChange) {\n          /**\n           * Slate handles the state of the editor internally. We just need to keep Strapi's form\n           * state in sync with it in order to make sure that things like the \"modified\" state\n           * isn't broken. Updating the whole state on every change is very expensive however,\n           * so we debounce calls to onChange to mitigate input lag.\n           */\n          if (debounceTimeout.current) {\n            clearTimeout(debounceTimeout.current);\n          }\n\n          // Set a new debounce timeout\n          debounceTimeout.current = setTimeout(() => {\n            incrementSlateUpdatesCount();\n\n            // Normalize the state (empty editor becomes null)\n            onChange(name, normalizeBlocksState(editor, state) as Schema.Attribute.BlocksValue);\n            debounceTimeout.current = null;\n          }, 300);\n        }\n      },\n      [editor, incrementSlateUpdatesCount, name, onChange]\n    );\n\n    // Clean up the timeout on unmount\n    React.useEffect(() => {\n      return () => {\n        if (debounceTimeout.current) {\n          clearTimeout(debounceTimeout.current);\n        }\n      };\n    }, []);\n\n    // Ensure the editor is in sync after discard\n    React.useEffect(() => {\n      // Never deselect while the editor is actively focused (typing / editing),\n      if (ReactEditor.isFocused(editor)) {\n        return;\n      }\n\n      // Normalize empty states for comparison to avoid losing focus on the editor when content is deleted\n      const normalizedValue = value?.length ? value : null;\n      const normalizedEditorState = normalizeBlocksState(editor, editor.children);\n\n      // Compare the field value with the editor state to check for a stale selection\n      if (\n        normalizedValue &&\n        normalizedEditorState &&\n        JSON.stringify(normalizedEditorState) !== JSON.stringify(normalizedValue)\n      ) {\n        // When there is a diff, unset selection to avoid an invalid state\n        Transforms.deselect(editor);\n      }\n    }, [editor, value]);\n\n    return (\n      <>\n        <VisuallyHidden id={ariaDescriptionId}>\n          {formatMessage({\n            id: getTranslation('components.Blocks.dnd.instruction'),\n            defaultMessage: `To reorder blocks, press Command or Control along with Shift and the Up or Down arrow keys`,\n          })}\n        </VisuallyHidden>\n        <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n        <Slate\n          editor={editor}\n          initialValue={\n            value?.length ? value : [{ type: 'paragraph', children: [{ type: 'text', text: '' }] }]\n          }\n          onChange={handleSlateChange}\n          key={key}\n        >\n          <BlocksEditorProvider\n            blocks={blocks}\n            modifiers={modifiers}\n            disabled={disabled}\n            name={name}\n            setLiveText={setLiveText}\n            isExpandedMode={isExpandedMode}\n            flushPendingFormSync={flushPendingFormSync}\n          >\n            <EditorLayout\n              error={error}\n              disabled={disabled}\n              onToggleExpand={handleToggleExpand}\n              ariaDescriptionId={ariaDescriptionId}\n            >\n              <BlocksToolbar />\n              <EditorDivider width=\"100%\" />\n              <BlocksContent {...contentProps} />\n              {!isExpandedMode && !isMobile && (\n                <IconButton\n                  position=\"absolute\"\n                  bottom=\"1.2rem\"\n                  right=\"1.2rem\"\n                  shadow=\"filterShadow\"\n                  label={formatMessage({\n                    id: getTranslation('components.Blocks.expand'),\n                    defaultMessage: 'Expand',\n                  })}\n                  onClick={handleToggleExpand}\n                >\n                  <Expand />\n                </IconButton>\n              )}\n            </EditorLayout>\n          </BlocksEditorProvider>\n        </Slate>\n      </>\n    );\n  }\n);\n\nexport {\n  type BlocksStore,\n  type SelectorBlockKey,\n  BlocksEditor,\n  BlocksEditorProvider,\n  useBlocksEditorContext,\n  isSelectorBlockKey,\n  normalizeBlocksState,\n};\n"],"names":["selectorBlockKeys","isSelectorBlockKey","key","includes","BlocksEditorProvider","usePartialBlocksEditorContext","createContext","useBlocksEditorContext","consumerName","context","state","editor","useSlate","EditorDivider","styled","Divider","theme","colors","neutral200","useResetKey","value","slateUpdatesCount","React","useRef","valueUpdatesCount","setKey","useState","useEffect","current","previousKey","incrementSlateUpdatesCount","useCallback","pipe","fns","reduce","prev","fn","normalizeBlocksState","isEmpty","length","Editor","BlocksEditor","forwardRef","disabled","name","onChange","error","contentProps","forwardedRef","formatMessage","useIntl","isMobile","useIsMobile","blocks","useMemo","paragraphBlocks","headingBlocks","listBlocks","linkBlocks","imageBlocks","quoteBlocks","codeBlocks","blockRegisteredPlugins","Object","values","map","block","plugin","filter","isNonNullable","withHistory","withStrapiSchema","withReact","createEditor","liveText","setLiveText","ariaDescriptionId","useId","isExpandedMode","handleToggleExpand","useReducer","useImperativeHandle","focus","ReactEditor","debounceTimeout","flushPendingFormSync","clearTimeout","flushSync","children","handleSlateChange","isAstChange","operations","some","op","type","setTimeout","isFocused","normalizedValue","normalizedEditorState","JSON","stringify","Transforms","deselect","_jsxs","_Fragment","_jsx","VisuallyHidden","id","getTranslation","defaultMessage","aria-live","Slate","initialValue","text","modifiers","EditorLayout","onToggleExpand","BlocksToolbar","width","BlocksContent","IconButton","position","bottom","right","shadow","label","onClick","Expand"],"mappings":"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"}

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

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

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":";;;;;;;AAqBA,MAAMA,iBAAAA,GAAoB,CAAC,EACzBC,QAAQ,EACRC,UAAAA,GAAa,EAAE,EACfC,OAAAA,GAAU,SAAS,EACnBC,cAAc,EACS,GAAA;IACvB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAE1B,qBACEC,IAAA,CAACC,UAAUC,IAAI,EAAA;QAACC,KAAAA,EAAOT,QAAAA;;AACrB,0BAAAU,GAAA,CAACH,UAAUI,MAAM,EAAA;gBAACT,OAAAA,EAASA,OAAAA;wCACzBQ,GAAA,CAACH,UAAUK,OAAO,EAAA;8BACfR,aAAAA,CAAc;wBAAES,EAAAA,EAAIb,QAAAA;wBAAUc,cAAAA,EAAgBd;AAAS,qBAAA;;;0BAG5DU,GAAA,CAACK,0BAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAL,GAAA,CAACM,IAAAA,EAAAA;oBAAKC,UAAAA,EAAY,CAAA;oBAAGC,aAAAA,EAAe,CAAA;oBAAGC,WAAAA,EAAa,CAAA;oBAAGC,YAAAA,EAAc,CAAA;8BAClEnB,UAAAA,CAAWoB,GAAG,CAAC,CAAC,EAAEC,GAAG,EAAEC,WAAW,EAAEC,IAAI,EAAE,iBACzCd,GAAA,CAACe,YAAAA,EAAAA;4BAECC,GAAAA,EAAI,QAAA;4BACJC,IAAAA,EAAK,QAAA;4BACLC,UAAAA,EAAW,YAAA;4BACXC,cAAAA,EAAe,QAAA;AACfC,4BAAAA,OAAAA,EAAS3B,cAAAA,CAAemB,GAAAA,CAAAA;4BACxBS,SAAS,EAAA,IAAA;4BACTC,MAAAA,EAAO,QAAA;4BACPC,MAAAA,EAAQ,CAAA;4BACRC,WAAAA,EAAY,YAAA;AAEZ,4BAAA,QAAA,gBAAA5B,IAAA,CAAC6B,IAAAA,EAAAA;gCAAKC,SAAAA,EAAU,QAAA;gCAASC,GAAAA,EAAK,CAAA;gCAAGC,UAAAA,EAAW,QAAA;gCAAST,cAAAA,EAAe,QAAA;;kDAClEnB,GAAA,CAAC6B,aAAAA,EAAAA;wCAAcC,KAAAA,EAAM,cAAA;wCAAeZ,UAAAA,EAAW,YAAA;wCAAaJ,IAAAA,EAAMA;;kDAElEd,GAAA,CAAC+B,UAAAA,EAAAA;wCAAWvC,OAAAA,EAAQ,IAAA;wCAAKwC,UAAAA,EAAW,MAAA;kDACjCtC,aAAAA,CAAc;4CAAES,EAAAA,EAAIS,GAAAA;AAAKR,4CAAAA,cAAAA,EAAgBS,WAAAA,IAAeD;AAAI,yCAAA;;;;AAf5DA,yBAAAA,EAAAA,GAAAA,CAAAA;;;;;AAwBnB;AAEA,MAAMP,0BAAAA,GAA6B4B,MAAAA,CAAOpC,SAAAA,CAAUqC,OAAO,CAAC;;AAE5D,CAAC;AAED;;;;;IAMA,MAAM5B,IAAAA,GACJ6B,OAAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,MAAA,GACrBJ,MAAAA,CAAOK,GAAAA,CAAI;;;;;QAKT,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;;;;MAI5C,CAAC,GACDR,MAAAA,CAAOK,GAAAA,CAAI;;;;;QAKT,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,WAAW,CAACC,MAAM,CAAC;;;MAG5C,CAAC;AAEP,MAAM1B,YAAAA,GAAekB,MAAAA,CAAgCR,IAAAA,CAAK;SACjD,EAAE,CAAC,EAAEc,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAACC,UAAU,CAAC;;;;4BAItB,EAAE,CAACC,KAAAA,GAAUA,KAAAA,CAAML,KAAK,CAACM,MAAM,CAACC,OAAO,CAACC,WAAW,CAAC;;;;;sBAK1D,EAAE,CAAC,EAAER,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAACM,UAAU,CAAC;gBAC/C,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAACO,UAAU,CAAC;WAC9C,EAAE,CAAC,EAAEV,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAACQ,UAAU,CAAC;;AAEpD,CAAC;;;;"}

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

@@ -46,11 +46,24 @@ 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 [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
         type: `${dragAndDrop.ItemTypes.DYNAMIC_ZONE}_${name}`,
         index,
@@ -188,11 +201,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 +230,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 [{ 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>\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","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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAMA,gBAAAA,GAAmB,CAAC,EACxBC,YAAY,EACZC,QAAQ,EACRC,KAAK,EACLC,IAAI,EACJC,sBAAsB,EACtBC,eAAe,EACfC,UAAU,EACVC,UAAU,EACVC,QAAQ,EACRC,2BAAAA,GAA8B,EAAE,EAChCC,cAAc,EACdC,WAAW,EACXC,QAAQ,EACc,GAAA;IACtB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,mBAAmB,EAAE,GAAGC,qCAAAA,CAAmB,kBAAA,CAAA;AACnD,IAAA,MAAMC,SAAAA,GAAYC,wBAAAA,EAAAA;IAElB,MAAM,EACJC,MAAM,EAAEC,UAAU,EAAE,EACrB,GAAGC,mCAAAA,CAAkBN,mBAAAA,CAAoBO,KAAK,CAAA;IAE/C,MAAM,EAAEC,SAAAA,GAAY,IAAI,EAAE,GAAGH,UAAU,CAACpB,YAAAA,CAAa,EAAEwB,QAAAA,IAAY,EAAC;AAEpE,IAAA,MAAMC,iBAAiBC,mBAAAA,CAAQ,kBAAA,EAAoB,CAACC,KAAAA,GAClDC,cAAMD,KAAAA,CAAME,MAAM,EAAE,CAAA,EAAG1B,KAAK,CAAC,EAAED,KAAAA,CAAM,CAAC,EAAEqB,SAAAA,CAAAA,CAAW,CAAA,CAAA;IAGrD,MAAMO,cAAAA,GAAiBP,cAAc,IAAA,IAAQ,CAACE,iBAAiB,EAAA,GAAKM,MAAAA,CAAON,gBAAgBO,IAAI,EAAA;IAC/F,MAAMC,YAAAA,GAAeH,eAAeI,MAAM,GAAG,IAAI,CAAC,EAAE,EAAEJ,cAAAA,CAAAA,CAAgB,GAAGA,cAAAA;IAEzE,MAAM,EAAEK,IAAI,EAAEC,WAAW,EAAE,GAAGC,gBAAAA,CAAMC,OAAO,CAAC,IAAA;AAC1C,QAAA,MAAM,CAACC,QAAAA,CAAS,GAAGvC,YAAAA,CAAawC,KAAK,CAAC,GAAA,CAAA;QACtC,MAAM,EAAEL,IAAI,EAAEC,WAAW,EAAE,GAAI3B,CAAAA,2BAA2B,CAAC8B,QAAAA,CAAS,IAAI,EAAC,EAAGE,IAAI,CAC9E,CAACC,SAAAA,GAAcA,SAAAA,CAAUC,GAAG,KAAK3C,YAAAA,CAAAA,IAC9B;YAAEmC,IAAAA,EAAM,IAAA;YAAMC,WAAAA,EAAa;AAAK,SAAA;QAErC,OAAO;AACLD,YAAAA,IAAAA;AACAC,YAAAA,WAAAA,EAAavB,aAAAA,CAAc;gBACzB+B,EAAAA,EAAI5C,YAAAA;AACJ6C,gBAAAA,cAAAA,EAAgBT,WAAAA,IAAepC;AACjC,aAAA;AACF,SAAA;IACF,CAAA,EAAG;AAACA,QAAAA,YAAAA;AAAcS,QAAAA,2BAAAA;AAA6BI,QAAAA;AAAc,KAAA,CAAA;AAE7D,IAAA,MAAM,CAAC,EAAEiC,SAAS,EAAEC,UAAU,EAAEC,aAAa,EAAE,EAAEC,MAAAA,EAAQC,SAASC,OAAAA,EAASC,cAAAA,CAAe,GACxFC,6BAAAA,CAAe,CAACpD,QAAAA,EAAU;AACxBqD,QAAAA,IAAAA,EAAM,GAAGC,qBAAAA,CAAUC,YAAY,CAAC,CAAC,EAAErD,IAAAA,CAAAA,CAAM;AACzCD,QAAAA,KAAAA;QACAuD,IAAAA,EAAM;AACJvD,YAAAA,KAAAA;AACA4B,YAAAA,cAAAA,EAAgB,CAAA,EAAGM,WAAAA,CAAY,CAAC,EAAEH,YAAAA,CAAAA,CAAc;AAChDE,YAAAA;AACF,SAAA;QACAuB,UAAAA,EAAYrD,eAAAA;AACZE,QAAAA,UAAAA;AACAD,QAAAA,UAAAA;AACAE,QAAAA;AACF,KAAA,CAAA;AAEF6B,IAAAA,gBAAAA,CAAMsB,SAAS,CAAC,IAAA;AACdP,QAAAA,cAAAA,CAAeQ,kCAAAA,EAAAA,EAAiB;YAAEC,oBAAAA,EAAsB;AAAM,SAAA,CAAA;IAChE,CAAA,EAAG;AAACT,QAAAA,cAAAA;AAAgBlD,QAAAA;AAAM,KAAA,CAAA;AAE1B;;;MAIA,MAAM4D,cAAAA,GAAiBzB,gBAAAA,CAAM0B,KAAK,EAAA;AAElC,IAAA,MAAMC,aAAAA,GAAgB,CAAA,EAAG7D,IAAAA,CAAK,CAAC,EAAED,KAAAA,CAAAA,CAAO;IACxC,MAAM+D,QAAAA,GAAWvC,oBACf,kBAAA,EACA,CAACC,QAAUC,aAAAA,CAAMD,KAAAA,CAAME,MAAM,EAAEmC,aAAAA,CAAAA,IAAkB,IAAA,CAAA;IAEnD,MAAME,SAAAA,GAAYxC,mBAAAA,CAChB,kBAAA,EACA,CAACC,KAAAA,GAAUC,cAAMD,KAAAA,CAAME,MAAM,EAAEmC,aAAAA,CAAAA,EAAgBpB,EAAAA,IAAM,IAAA,CAAA;IAEvD,MAAMuB,QAAAA,GAAWzC,oBAAQ,kBAAA,EAAoB,CAACC,QAAUC,aAAAA,CAAMD,KAAAA,CAAMyC,MAAM,EAAEJ,aAAAA,CAAAA,CAAAA;IAE5E,MAAM,CAACK,gBAAgBC,iBAAAA,CAAkB,GAAGjC,iBAAMkC,QAAQ,CACxDL,YAAYJ,cAAAA,GAAiB,EAAA,CAAA;AAG/BzB,IAAAA,gBAAAA,CAAMsB,SAAS,CAAC,IAAA;AACd,QAAA,IAAIQ,YAAYF,QAAAA,EAAU;YACxBK,iBAAAA,CAAkBR,cAAAA,CAAAA;AACpB,QAAA;IACF,CAAA,EAAG;AAACK,QAAAA,QAAAA;AAAUF,QAAAA,QAAAA;AAAUH,QAAAA;AAAe,KAAA,CAAA;IAEvC,MAAMU,eAAAA,GAAkBC,6BAAgBxB,MAAAA,EAAQC,OAAAA,CAAAA;AAEhD,IAAA,MAAMwB,YAAYxE,KAAAA,GAAQ,CAAA;IAC1B,MAAMyE,WAAAA,GAAczE,QAAQS,WAAAA,GAAc,CAAA;IAC1C,MAAMiE,4BAAAA,GAA+BvC,gBAAAA,CAAMwC,WAAW,CAAC,IAAA;QACrDzE,sBAAAA,CAAuBF,KAAAA,CAAAA;IACzB,CAAA,EAAG;AAACE,QAAAA,sBAAAA;AAAwBF,QAAAA;AAAM,KAAA,CAAA;IAElC,MAAM4E,gBAAAA,GAAmB7E,WAAW,IAAA,iBAClC8E,eAAA,CAAAC,mBAAA,EAAA;;0BACEC,cAAA,CAACC,uBAAAA,EAAAA;gBACCC,OAAAA,EAAQ,OAAA;AACRC,gBAAAA,KAAAA,EAAOvE,aAAAA,CACL;AACE+B,oBAAAA,EAAAA,EAAIyC,2BAAAA,CAAe,qCAAA,CAAA;oBACnBxC,cAAAA,EAAgB;iBAClB,EACA;oBAAE1C,IAAAA,EAAM8B;AAAa,iBAAA,CAAA;gBAEvBqD,OAAAA,EAASV,4BAAAA;AAET,gBAAA,QAAA,gBAAAK,cAAA,CAACM,WAAAA,EAAAA,EAAAA;;AAEFtE,YAAAA,SAAAA,kBACCgE,cAAA,CAACC,uBAAAA,EAAAA;gBACCC,OAAAA,EAAQ,OAAA;gBACRG,OAAAA,EAAS,CAACE,CAAAA,GAAMA,CAAAA,CAAEC,eAAe,EAAA;gBACjCC,iBAAAA,EAAiB5C,SAAAA;gBACjB6C,GAAAA,EAAKxC,OAAAA;AACLiC,gBAAAA,KAAAA,EAAOvE,aAAAA,CAAc;AACnB+B,oBAAAA,EAAAA,EAAIyC,2BAAAA,CAAe,6BAAA,CAAA;oBACnBxC,cAAAA,EAAgB;AAClB,iBAAA,CAAA;gBACA+C,SAAAA,EAAW5C,aAAAA;AAEX,gBAAA,QAAA,gBAAAiC,cAAA,CAACY,UAAAA,EAAAA,EAAAA;;AAGJ,YAAA,CAAC5E,SAAAA,kBACA8D,eAAA,CAAAC,mBAAA,EAAA;;AACGN,oBAAAA,SAAAA,kBACCO,cAAA,CAACC,uBAAAA,EAAAA;wBACCC,OAAAA,EAAQ,OAAA;AACRG,wBAAAA,OAAAA,EAAS,CAACE,CAAAA,GAAAA;AACRA,4BAAAA,CAAAA,CAAEC,eAAe,EAAA;AACjBpF,4BAAAA,eAAAA,CAAgBH,QAAQ,CAAA,EAAGA,KAAAA,CAAAA;AAC7B,wBAAA,CAAA;AACAD,wBAAAA,QAAAA,EAAU,CAACyE,SAAAA;AACXU,wBAAAA,KAAAA,EAAOvE,aAAAA,CAAc;AACnB+B,4BAAAA,EAAAA,EAAIyC,2BAAAA,CAAe,gCAAA,CAAA;4BACnBxC,cAAAA,EAAgB;AAClB,yBAAA,CAAA;AAEA,wBAAA,QAAA,gBAAAoC,cAAA,CAACa,aAAAA,EAAAA,EAAAA;;AAGJnB,oBAAAA,WAAAA,kBACCM,cAAA,CAACC,uBAAAA,EAAAA;wBACCC,OAAAA,EAAQ,OAAA;AACRG,wBAAAA,OAAAA,EAAS,CAACE,CAAAA,GAAAA;AACRA,4BAAAA,CAAAA,CAAEC,eAAe,EAAA;AACjBpF,4BAAAA,eAAAA,CAAgBH,QAAQ,CAAA,EAAGA,KAAAA,CAAAA;AAC7B,wBAAA,CAAA;AACAD,wBAAAA,QAAAA,EAAU,CAAC0E,WAAAA;AACXS,wBAAAA,KAAAA,EAAOvE,aAAAA,CAAc;AACnB+B,4BAAAA,EAAAA,EAAIyC,2BAAAA,CAAe,kCAAA,CAAA;4BACnBxC,cAAAA,EAAgB;AAClB,yBAAA,CAAA;AAEA,wBAAA,QAAA,gBAAAoC,cAAA,CAACc,eAAAA,EAAAA,EAAAA;;;;AAKT,0BAAAhB,eAAA,CAACiB,kBAAKC,IAAI,EAAA;;AACR,kCAAAhB,cAAA,CAACe,kBAAKE,OAAO,EAAA;wBAACC,IAAAA,EAAK,GAAA;wBAAIC,OAAAA,EAAS,IAAA;wBAAMC,WAAAA,EAAa,CAAA;wBAAGC,YAAAA,EAAc,CAAA;AAClE,wBAAA,QAAA,gBAAArB,cAAA,CAACC,uBAAAA,EAAAA;4BACCC,OAAAA,EAAQ,OAAA;AACRC,4BAAAA,KAAAA,EAAOvE,aAAAA,CAAc;AACnB+B,gCAAAA,EAAAA,EAAIyC,2BAAAA,CAAe,qCAAA,CAAA;gCACnBxC,cAAAA,EAAgB;AAClB,6BAAA,CAAA;4BACA0D,GAAAA,EAAI,MAAA;AAEJ,4BAAA,QAAA,gBAAAtB,cAAA,CAACuB,UAAAA,EAAAA;gCAAKC,aAAW,EAAA,IAAA;gCAACC,SAAAA,EAAW;;;;AAGjC,kCAAA3B,eAAA,CAACiB,kBAAKW,OAAO,EAAA;;AACX,0CAAA5B,eAAA,CAACiB,kBAAKY,OAAO,EAAA;;AACX,kDAAA3B,cAAA,CAACe,kBAAKa,UAAU,EAAA;kDACbhG,aAAAA,CAAc;AACb+B,4CAAAA,EAAAA,EAAIyC,2BAAAA,CAAe,uCAAA,CAAA;4CACnBxC,cAAAA,EAAgB;AAClB,yCAAA;;AAEF,kDAAAoC,cAAA,CAACe,kBAAKc,UAAU,EAAA;AACbC,wCAAAA,QAAAA,EAAAA,MAAAA,CAAOC,OAAO,CAACvG,2BAAAA,CAAAA,CAA6BwG,GAAG,CAAC,CAAC,CAAC1E,QAAAA,EAAUnB,UAAAA,CAAW,iBACtE2D,eAAA,CAAC1C,gBAAAA,CAAM6E,QAAQ,EAAA;;AACb,kEAAAjC,cAAA,CAACe,kBAAKmB,KAAK,EAAA;kEACRtG,aAAAA,CAAc;4DAAE+B,EAAAA,EAAIL,QAAAA;4DAAUM,cAAAA,EAAgBN;AAAS,yDAAA;;oDAEzDnB,UAAAA,CAAW6F,GAAG,CAAC,CAAC,EAAE7E,WAAW,EAAEO,GAAG,EAAE,iBACnCsC,cAAA,CAACe,iBAAAA,CAAKoB,IAAI,EAAA;4DAAWC,QAAAA,EAAU,IAAM3G,eAAeiC,GAAAA,EAAKzC,KAAAA,CAAAA;sEACtDW,aAAAA,CAAc;gEAAE+B,EAAAA,EAAID,GAAAA;AAAKE,gEAAAA,cAAAA,EAAgBT,WAAAA,IAAeO;AAAI,6DAAA;AAD/CA,yDAAAA,EAAAA,GAAAA,CAAAA;;AALCJ,6CAAAA,EAAAA,QAAAA,CAAAA;;;;AAa3B,0CAAAwC,eAAA,CAACiB,kBAAKY,OAAO,EAAA;;AACX,kDAAA3B,cAAA,CAACe,kBAAKa,UAAU,EAAA;kDACbhG,aAAAA,CAAc;AACb+B,4CAAAA,EAAAA,EAAIyC,2BAAAA,CAAe,uCAAA,CAAA;4CACnBxC,cAAAA,EAAgB;AAClB,yCAAA;;AAEF,kDAAAoC,cAAA,CAACe,kBAAKc,UAAU,EAAA;AACbC,wCAAAA,QAAAA,EAAAA,MAAAA,CAAOC,OAAO,CAACvG,2BAAAA,CAAAA,CAA6BwG,GAAG,CAAC,CAAC,CAAC1E,QAAAA,EAAUnB,UAAAA,CAAW,iBACtE2D,eAAA,CAAC1C,gBAAAA,CAAM6E,QAAQ,EAAA;;AACb,kEAAAjC,cAAA,CAACe,kBAAKmB,KAAK,EAAA;kEACRtG,aAAAA,CAAc;4DAAE+B,EAAAA,EAAIL,QAAAA;4DAAUM,cAAAA,EAAgBN;AAAS,yDAAA;;oDAEzDnB,UAAAA,CAAW6F,GAAG,CAAC,CAAC,EAAE7E,WAAW,EAAEO,GAAG,EAAE,iBACnCsC,cAAA,CAACe,iBAAAA,CAAKoB,IAAI,EAAA;4DAAWC,QAAAA,EAAU,IAAM3G,cAAAA,CAAeiC,GAAAA,EAAKzC,KAAAA,GAAQ,CAAA,CAAA;sEAC9DW,aAAAA,CAAc;gEAAE+B,EAAAA,EAAID,GAAAA;AAAKE,gEAAAA,cAAAA,EAAgBT,WAAAA,IAAeO;AAAI,6DAAA;AAD/CA,yDAAAA,EAAAA,GAAAA,CAAAA;;AALCJ,6CAAAA,EAAAA,QAAAA,CAAAA;;;;;;;;;;AAkBnC,IAAA,MAAM+E,iBAAiBrF,YAAAA,GAAe,CAAA,EAAGG,YAAY,CAAC,EAAEH,cAAc,GAAGG,WAAAA;AAEzE,IAAA,qBACE2C,eAAA,CAACwC,kBAAAA,EAAAA;QAAmBhB,GAAAA,EAAI,IAAA;QAAKiB,KAAAA,EAAM,MAAA;;0BACjCvC,cAAA,CAACwC,iBAAAA,EAAAA;gBAAKC,cAAAA,EAAe,QAAA;AACnB,gBAAA,QAAA,gBAAAzC,cAAA,CAAC0C,SAAAA,EAAAA;oBAAUC,UAAAA,EAAW;;;0BAExB3C,cAAA,CAAC4C,SAAAA,EAAAA;gBAAUlC,GAAAA,EAAKnB,eAAAA;gBAAiBsD,SAAS,EAAA,IAAA;AACvC/E,gBAAAA,QAAAA,EAAAA,UAAAA,iBACCkC,cAAA,CAAC8C,OAAAA,EAAAA,EAAAA,CAAAA,iBAED9C,cAAA,CAAC+C,sBAAAA,CAAU/B,IAAI,EAAA;oBAACgC,KAAAA,EAAO5D,cAAAA;oBAAgB6D,aAAAA,EAAe5D,iBAAAA;4CACpDS,eAAA,CAACiD,uBAAUZ,IAAI,EAAA;wBAACa,KAAAA,EAAOnE,cAAAA;;AACrB,0CAAAiB,eAAA,CAACiD,uBAAUG,MAAM,EAAA;;AACf,kDAAAlD,cAAA,CAAC+C,uBAAU9B,OAAO,EAAA;wCAChB/D,IAAAA,EACEA,IAAAA,IAAQiG,6BAAe,CAACjG,IAAAA,CAAK,GACzBiG,6BAAe,CAACjG,IAAAA,CAAK,GACrBiG,6BAAAA,CAAgBC,SAAS;AAG9Bf,wCAAAA,QAAAA,EAAAA;;AAEH,kDAAArC,cAAA,CAAC+C,uBAAUM,OAAO,EAAA;AAAExD,wCAAAA,QAAAA,EAAAA;;;;AAEtB,0CAAAG,cAAA,CAAC+C,uBAAUrB,OAAO,EAAA;AAChB,gCAAA,QAAA,gBAAA1B,cAAA,CAACsD,sBAAAA,EAAAA;oCAAuBX,UAAAA,EAAW,UAAA;AACjC,oCAAA,QAAA,gBAAA3C,cAAA,CAACuD,sBAAAA,EAAAA;wCACCxI,YAAAA,EAAcA,YAAAA;wCACdE,KAAAA,EAAOA,KAAAA;wCACPuI,MAAAA,EAAQrH,UAAU,CAACpB,YAAAA,CAAa,EAAEyI,MAAAA;wCAClCtI,IAAAA,EAAMA,IAAAA;AAELS,wCAAAA,QAAAA,EAAAA;;;;;;;;;;AAUrB,CAAA;AAEA;AACA;AACA,MAAMiH,SAAAA,GAAYa,uBAAAA,CAAqBC,gBAAAA,CAAI;;gBAE3B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMC,OAAO,CAACC,WAAW,CAAC;;AAE3D,CAAC;AAED,MAAMP,sBAAAA,GAAyBG,uBAAAA,CAAqBC,gBAAAA,CAAI;qBACnC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAAC,CAAA,CAAE,CAAC,CAAC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAAC,CAAA,CAAE,CAAC;AACxF,CAAC;AAED,MAAMpB,SAAAA,GAAYe,uBAAAA,CAAqBC,gBAAAA,CAAI;SAClC,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAAC,CAAA,CAAE,CAAC;UAChC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAAC,CAAA,CAAE,CAAC;AAC3C,CAAC;AAED,MAAMhB,OAAAA,GAAUW,uBAAAA,CAAOM,IAAI;;oBAEP,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAAA,CAAMK,MAAM,CAACC,UAAU,CAAC;sBACvC,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAAA,CAAMK,MAAM,CAACE,UAAU,CAAC;;WAEpD,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAAA,CAAMG,MAAM,CAAC,CAAA,CAAE,CAAC;AAC5C,CAAC;AAED,MAAMxB,kBAAAA,GAAqBmB,uBAAAA,CAA2BC,gBAAAA,CAAI;;;;AAI1D,CAAC;AASD,MAAMH,sBAAAA,iBAAyBnG,gBAAAA,CAAM+G,IAAI,CACvC,CAAC,EAAExI,QAAQ,EAAEZ,YAAY,EAAEE,KAAK,EAAEuI,MAAM,EAAEtI,IAAI,EAA+B,GAAA;IAC3E,MAAM,EAAEU,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,qBACEmE,cAAA,CAAC0D,gBAAAA,EAAAA;QAAIU,OAAAA,EAAS;YAAEC,OAAAA,EAAS,CAAA;YAAGC,MAAAA,EAAQ;AAAE,SAAA;gCACpCtE,cAAA,CAACuE,kBAAKvD,IAAI,EAAA;YAACwD,GAAAA,EAAK,CAAA;sBACbhB,MAAAA,EAAQxB,GAAAA,CAAI,CAACyC,GAAAA,EAAKC,MAAAA,GAAAA;gBACjB,qBACE1E,cAAA,CAACuE,kBAAKpC,IAAI,EAAA;oBAACwC,GAAAA,EAAK,EAAA;oBAAiBC,EAAAA,EAAI,EAAA;oBAAIC,SAAAA,EAAU,QAAA;oBAASC,UAAAA,EAAW,SAAA;AACrE,oBAAA,QAAA,gBAAA9E,cAAA,CAAC+E,6BAAAA,EAAAA;wBAAmBP,GAAAA,EAAK,CAAA;AACtBC,wBAAAA,QAAAA,EAAAA,GAAAA,CAAIzC,GAAG,CAAC,CAAC,EAAEd,IAAI,EAAE,GAAG8D,KAAAA,EAAO,GAAA;4BAC1B,MAAMC,SAAAA,GAAY,CAAA,EAAG/J,IAAAA,CAAK,CAAC,EAAED,MAAM,CAAC,EAAE+J,KAAAA,CAAM9J,IAAI,CAAA,CAAE;AAElD,4BAAA,MAAMgK,wBAAAA,GAA2B;AAC/B,gCAAA,GAAGF,KAAK;AACR7E,gCAAAA,KAAAA,EAAOvE,aAAAA,CAAc;oCACnB+B,EAAAA,EAAI,CAAC,2BAA2B,EAAE5C,YAAAA,CAAa,CAAC,EAAEiK,KAAAA,CAAM9J,IAAI,CAAA,CAAE;AAC9D0C,oCAAAA,cAAAA,EAAgBoH,MAAM7E;AACxB,iCAAA;AACF,6BAAA;AAEA,4BAAA,qBACEH,cAAA,CAACmF,6BAAAA,EAAAA;gCACCR,GAAAA,EAAKzD,IAAAA;gCAELkE,CAAAA,EAAG,EAAA;gCACHR,EAAAA,EAAI,EAAA;gCACJC,SAAAA,EAAU,QAAA;gCACVC,UAAAA,EAAW,SAAA;AAEVnJ,gCAAAA,QAAAA,EAAAA,QAAAA,GACCA,QAAAA,CAAS;AACP,oCAAA,GAAGuJ,wBAAwB;oCAC3BhK,IAAAA,EAAM+J;AACR,iCAAA,CAAA,iBAEAjF,cAAA,CAACqF,2BAAAA,EAAAA;AAAe,oCAAA,GAAGH,wBAAwB;oCAAEhK,IAAAA,EAAM+J;;AAZhDA,6BAAAA,EAAAA,SAAAA,CAAAA;AAgBX,wBAAA,CAAA;;AAhCqBP,iBAAAA,EAAAA,MAAAA,CAAAA;AAoC7B,YAAA,CAAA;;;AAIR,CAAA,CAAA;AAGFnB,sBAAAA,CAAuBpG,WAAW,GAAG,wBAAA;AAErC,MAAMmI,wBAAAA,iBAA2BlI,gBAAAA,CAAM+G,IAAI,CAACrJ,gBAAAA;;;;"}

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

@@ -25,11 +25,24 @@ 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 [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
         type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,
         index,
@@ -167,11 +180,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 +209,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))