@strapi/content-manager 5.48.1 → 5.50.0

package/dist/admin/pages/EditView/components/FormInputs/Component/Repeatable.js

@@ -21,7 +21,8 @@ var FormLayout = require('../../FormLayout.js');
 var ComponentContext = require('../ComponentContext.js');
 var Initializer = require('./Initializer.js');
 
-function _interopNamespaceDefault(e) {
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -38,7 +39,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 const RepeatableComponent = ({ attribute, disabled, name, mainField, children, layout })=>{
     const { toggleNotification } = strapiAdmin.useNotification();

package/dist/admin/pages/EditView/components/FormInputs/Component/Repeatable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Repeatable.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/Repeatable.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useField, useNotification, useForm, useIsDesktop } from '@strapi/admin/strapi-admin';\nimport {\n  Box,\n  Flex,\n  TextButton,\n  VisuallyHidden,\n  Accordion,\n  IconButton,\n  useComposedRefs,\n  BoxComponent,\n} from '@strapi/design-system';\nimport { Plus, Drag, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { useLocation } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { useDragAndDrop, type UseDragAndDropOptions } from '../../../../../hooks/useDragAndDrop';\nimport { usePrev } from '../../../../../hooks/usePrev';\nimport { getIn } from '../../../../../utils/objects';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { transformDocument } from '../../../utils/data';\nimport { createDefaultForm } from '../../../utils/forms';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { ComponentProvider, useComponent } from '../ComponentContext';\n\nimport { Initializer } from './Initializer';\n\nimport type { ComponentInputProps } from './Input';\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * RepeatableComponent\n * -----------------------------------------------------------------------------------------------*/\n\ntype RepeatableComponentProps = Omit<ComponentInputProps, 'required' | 'label'>;\n\nconst RepeatableComponent = ({\n  attribute,\n  disabled,\n  name,\n  mainField,\n  children,\n  layout,\n}: RepeatableComponentProps) => {\n  const { toggleNotification } = useNotification();\n  const { formatMessage } = useIntl();\n  const { search: searchString } = useLocation();\n  const search = React.useMemo(() => new URLSearchParams(searchString), [searchString]);\n  const { currentDocument } = useDocumentContext('RepeatableComponent');\n  const components = currentDocument.components;\n\n  const {\n    value: rawValue,\n    error,\n    rawError,\n  } = useField<Schema.Attribute.ComponentValue<`${string}.${string}`, true>>(name);\n  const addFieldRow = useForm('RepeatableComponent', (state) => state.addFieldRow);\n  const moveFieldRow = useForm('RepeatableComponent', (state) => state.moveFieldRow);\n  const removeFieldRow = useForm('RepeatableComponent', (state) => state.removeFieldRow);\n  const { max = Infinity } = attribute;\n  const value = React.useMemo(() => (Array.isArray(rawValue) ? rawValue : []), [rawValue]);\n\n  const [collapseToOpen, setCollapseToOpen] = React.useState<string>('');\n  const [liveText, setLiveText] = React.useState('');\n\n  React.useEffect(() => {\n    const hasNestedErrors = rawError && Array.isArray(rawError) && rawError.length > 0;\n    const hasNestedValue = value && Array.isArray(value) && value.length > 0;\n\n    if (hasNestedErrors && hasNestedValue) {\n      const errorOpenItems = rawError\n        .map((_: unknown, idx: number) => {\n          return value[idx] ? value[idx].__temp_key__ : null;\n        })\n        .filter((value) => !!value);\n\n      if (errorOpenItems && errorOpenItems.length > 0) {\n        setCollapseToOpen((collapseToOpen) => {\n          if (!errorOpenItems.includes(collapseToOpen)) {\n            return errorOpenItems[0];\n          }\n\n          return collapseToOpen;\n        });\n      }\n    }\n  }, [rawError, value]);\n\n  /**\n   * Get the temp key of the component that has the field that is currently focussed\n   * as defined by the `field` query param. We can then force this specific component\n   * to be in its \"open\" state.\n   */\n  const componentTmpKeyWithFocussedField = React.useMemo(() => {\n    if (search.has('field')) {\n      const fieldParam = search.get('field');\n\n      if (!fieldParam) {\n        return undefined;\n      }\n\n      const [, path] = fieldParam.split(`${name}.`);\n\n      if (getIn(value, path, undefined) !== undefined) {\n        const [subpath] = path.split('.');\n\n        return getIn(value, subpath, undefined)?.__temp_key__;\n      }\n    }\n\n    return undefined;\n  }, [search, name, value]);\n\n  const prevValue = usePrev(value);\n\n  React.useEffect(() => {\n    /**\n     * When we add a new item to the array, we want to open the collapse.\n     */\n    if (prevValue && prevValue.length < value.length) {\n      setCollapseToOpen(value[value.length - 1].__temp_key__);\n    }\n  }, [value, prevValue]);\n\n  React.useEffect(() => {\n    if (typeof componentTmpKeyWithFocussedField === 'string') {\n      setCollapseToOpen(componentTmpKeyWithFocussedField);\n    }\n  }, [componentTmpKeyWithFocussedField]);\n\n  const toggleCollapses = React.useCallback(() => {\n    setCollapseToOpen('');\n  }, []);\n\n  const handleClick = () => {\n    if (value.length < max) {\n      const schema = components[attribute.component];\n      const form = createDefaultForm(schema, components);\n      const data = transformDocument(schema, components)(form);\n\n      addFieldRow(name, data);\n      // setCollapseToOpen(nextTempKey);\n    } else if (value.length >= max) {\n      toggleNotification({\n        type: 'info',\n        message: formatMessage({\n          id: getTranslation('components.notification.info.maximum-requirement'),\n        }),\n      });\n    }\n  };\n\n  const handleMoveComponentField = React.useCallback(\n    (newIndex: number, currentIndex: number) => {\n      setLiveText(\n        formatMessage(\n          {\n            id: getTranslation('dnd.reorder'),\n            defaultMessage: '{item}, moved. New position in list: {position}.',\n          },\n          {\n            item: `${name}.${currentIndex}`,\n            position: `${newIndex + 1} of ${value.length}`,\n          }\n        )\n      );\n\n      moveFieldRow(name, currentIndex, newIndex);\n    },\n    [formatMessage, moveFieldRow, name, value.length]\n  );\n\n  const handleValueChange = (key: string) => {\n    setCollapseToOpen(key);\n  };\n\n  const handleCancel = React.useCallback(\n    (index: number) => {\n      setLiveText(\n        formatMessage(\n          {\n            id: getTranslation('dnd.cancel-item'),\n            defaultMessage: '{item}, dropped. Re-order cancelled.',\n          },\n          {\n            item: `${name}.${index}`,\n          }\n        )\n      );\n    },\n    [formatMessage, name]\n  );\n\n  const handleGrabItem = React.useCallback(\n    (index: number) => {\n      setLiveText(\n        formatMessage(\n          {\n            id: getTranslation('dnd.grab-item'),\n            defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,\n          },\n          {\n            item: `${name}.${index}`,\n            position: `${index + 1} of ${value.length}`,\n          }\n        )\n      );\n    },\n    [formatMessage, name, value.length]\n  );\n\n  const handleDropItem = React.useCallback(\n    (index: number) => {\n      setLiveText(\n        formatMessage(\n          {\n            id: getTranslation('dnd.drop-item'),\n            defaultMessage: `{item}, dropped. Final position in list: {position}.`,\n          },\n          {\n            item: `${name}.${index}`,\n            position: `${index + 1} of ${value.length}`,\n          }\n        )\n      );\n    },\n    [formatMessage, name, value.length]\n  );\n\n  const handleDeleteComponent = React.useCallback(\n    (index: number) => {\n      removeFieldRow(name, index);\n      toggleCollapses();\n    },\n    [name, removeFieldRow, toggleCollapses]\n  );\n\n  const ariaDescriptionId = React.useId();\n\n  const level = useComponent('RepeatableComponent', (state) => state.level);\n\n  if (value.length === 0) {\n    return <Initializer disabled={disabled} name={name} onClick={handleClick} />;\n  }\n\n  return (\n    <Box hasRadius>\n      <VisuallyHidden id={ariaDescriptionId}>\n        {formatMessage({\n          id: getTranslation('dnd.instructions'),\n          defaultMessage: `Press spacebar to grab and re-order`,\n        })}\n      </VisuallyHidden>\n      <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n      <AccordionRoot\n        $error={error}\n        value={collapseToOpen}\n        onValueChange={handleValueChange}\n        aria-describedby={ariaDescriptionId}\n      >\n        {value.map((componentValue, index) => {\n          const key = componentValue.__temp_key__;\n          const id = componentValue.id;\n          const nameWithIndex = `${name}.${index}`;\n\n          return (\n            <ComponentProvider\n              key={key}\n              // id is always a number in a component\n              id={id as number}\n              uid={attribute.component}\n              level={level + 1}\n              type=\"repeatable\"\n            >\n              <MemoizedComponent\n                disabled={disabled}\n                name={nameWithIndex}\n                attributeComponent={attribute.component}\n                index={index}\n                mainField={mainField}\n                onMoveItem={handleMoveComponentField}\n                onDeleteComponent={handleDeleteComponent}\n                toggleCollapses={toggleCollapses}\n                onCancel={handleCancel}\n                onDropItem={handleDropItem}\n                onGrabItem={handleGrabItem}\n                __temp_key__={key}\n                totalLength={value.length}\n                layout={layout}\n                renderField={children}\n              />\n            </ComponentProvider>\n          );\n        })}\n        <TextButtonCustom disabled={disabled} onClick={handleClick} startIcon={<Plus />}>\n          {formatMessage({\n            id: getTranslation('containers.EditView.add.new-entry'),\n            defaultMessage: 'Add an entry',\n          })}\n        </TextButtonCustom>\n      </AccordionRoot>\n    </Box>\n  );\n};\n\nconst AccordionRoot = styled(Accordion.Root)<{ $error?: string }>`\n  border: 1px solid\n    ${({ theme, $error }) => ($error ? theme.colors.danger600 : theme.colors.neutral200)};\n`;\n\nconst TextButtonCustom = styled(TextButton)`\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral200};\n  padding-inline: ${(props) => props.theme.spaces[6]};\n  padding-block: ${(props) => props.theme.spaces[3]};\n\n  &:not([disabled]) {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${(props) => props.theme.colors.primary100};\n    }\n  }\n\n  span {\n    font-weight: 600;\n    font-size: 1.4rem;\n    line-height: 2.4rem;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n`;\n\ninterface RepeatableComponentFieldsProps\n  extends Pick<RepeatableComponentProps, 'children' | 'layout'> {\n  attributeComponent: string;\n  nameWithIndex: string;\n}\n\nconst RepeatableComponentFields = React.memo(\n  ({ attributeComponent, children, layout, nameWithIndex }: RepeatableComponentFieldsProps) => {\n    const { formatMessage } = useIntl();\n\n    return (\n      <>\n        {layout.map((row, index) => {\n          return (\n            <ResponsiveGridRoot gap={4} key={index}>\n              {row.map(({ size, ...field }) => {\n                /**\n                 * Layouts are built from schemas so they don't understand the complete\n                 * schema tree, for components we append the parent name to the field name\n                 * because this is the structure for the data & permissions also understand\n                 * the nesting involved.\n                 */\n                const completeFieldName = `${nameWithIndex}.${field.name}`;\n\n                const translatedLabel = formatMessage({\n                  id: `content-manager.components.${attributeComponent}.${field.name}`,\n                  defaultMessage: field.label,\n                });\n\n                return (\n                  <ResponsiveGridItem\n                    col={size}\n                    key={completeFieldName}\n                    s={12}\n                    xs={12}\n                    direction=\"column\"\n                    alignItems=\"stretch\"\n                  >\n                    {children({\n                      ...field,\n                      label: translatedLabel,\n                      name: completeFieldName,\n                    })}\n                  </ResponsiveGridItem>\n                );\n              })}\n            </ResponsiveGridRoot>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nRepeatableComponentFields.displayName = 'RepeatableComponentFields';\n\n/* -------------------------------------------------------------------------------------------------\n * Field\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ComponentProps\n  extends Pick<UseDragAndDropOptions, 'onGrabItem' | 'onDropItem' | 'onCancel' | 'onMoveItem'>,\n    Pick<RepeatableComponentProps, 'mainField' | 'layout'> {\n  attributeComponent: string;\n  disabled?: boolean;\n  index: number;\n  name: string;\n  onDeleteComponent?: (index: number) => void;\n  renderField: RepeatableComponentProps['children'];\n  toggleCollapses: () => void;\n  __temp_key__: string;\n  totalLength: number;\n}\n\nconst Component = ({\n  attributeComponent,\n  disabled,\n  index,\n  name,\n  mainField = {\n    name: 'id',\n    type: 'integer',\n  },\n  layout,\n  onDeleteComponent,\n  renderField,\n  toggleCollapses,\n  __temp_key__,\n  totalLength,\n  onMoveItem,\n  ...dragProps\n}: ComponentProps) => {\n  const { formatMessage } = useIntl();\n  const isDesktop = useIsDesktop();\n\n  const displayValue = useForm('RepeatableComponent', (state) => {\n    return getIn(state.values, [...name.split('.'), mainField.name]);\n  });\n\n  const accordionRef = React.useRef<HTMLButtonElement>(null!);\n\n  /**\n   * The last item in the fieldName array will be the index of this component.\n   * Drag and drop should be isolated to the parent component so nested repeatable\n   * components are not affected by the drag and drop of the parent component in\n   * their own re-ordering context.\n   */\n  const componentKey = name.split('.').slice(0, -1).join('.');\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.COMPONENT}_${componentKey}`,\n      index,\n      item: {\n        index,\n        id: __temp_key__,\n        displayedValue: displayValue,\n      },\n      onStart() {\n        // Close all collapses\n        toggleCollapses();\n      },\n      onMoveItem,\n      ...dragProps,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  const composedAccordionRefs = useComposedRefs<HTMLButtonElement>(accordionRef, dragRef);\n  const composedBoxRefs = useComposedRefs<HTMLDivElement>(\n    boxRef as React.RefObject<HTMLDivElement>,\n    dropRef\n  );\n\n  const canMoveUp = index > 0;\n  const canMoveDown = index < totalLength - 1;\n  const handleDeleteClick = () => {\n    onDeleteComponent?.(index);\n  };\n\n  return (\n    <>\n      {isDragging ? (\n        <Preview />\n      ) : (\n        <Accordion.Item ref={composedBoxRefs} value={__temp_key__}>\n          <Accordion.Header>\n            <Accordion.Trigger>{displayValue}</Accordion.Trigger>\n            <Accordion.Actions>\n              <IconButton\n                disabled={disabled}\n                variant=\"ghost\"\n                onClick={handleDeleteClick}\n                label={formatMessage({\n                  id: getTranslation('containers.Edit.delete'),\n                  defaultMessage: 'Delete',\n                })}\n              >\n                <Trash />\n              </IconButton>\n              {isDesktop && (\n                <IconButton\n                  disabled={disabled}\n                  ref={composedAccordionRefs}\n                  variant=\"ghost\"\n                  onClick={(e) => e.stopPropagation()}\n                  data-handler-id={handlerId}\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                      disabled={disabled || !canMoveUp}\n                      variant=\"ghost\"\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        if (onMoveItem) {\n                          onMoveItem(index - 1, index);\n                        }\n                      }}\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                      disabled={disabled || !canMoveDown}\n                      variant=\"ghost\"\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        if (onMoveItem) {\n                          onMoveItem(index + 1, index);\n                        }\n                      }}\n                      label={formatMessage({\n                        id: getTranslation('components.DynamicZone.move-down'),\n                        defaultMessage: 'Move down',\n                      })}\n                    >\n                      <ArrowDown />\n                    </IconButton>\n                  )}\n                </>\n              )}\n            </Accordion.Actions>\n          </Accordion.Header>\n          <Accordion.Content>\n            <Flex\n              direction=\"column\"\n              alignItems=\"stretch\"\n              background=\"neutral100\"\n              padding={{ initial: 4, medium: 6 }}\n              gap={{ initial: 3, medium: 4 }}\n            >\n              <RepeatableComponentFields\n                attributeComponent={attributeComponent}\n                layout={layout}\n                nameWithIndex={name}\n              >\n                {renderField}\n              </RepeatableComponentFields>\n            </Flex>\n          </Accordion.Content>\n        </Accordion.Item>\n      )}\n    </>\n  );\n};\n\nconst Preview = () => {\n  return <StyledSpan tag=\"span\" padding={6} background=\"primary100\" />;\n};\n\nconst StyledSpan = styled<BoxComponent<'span'>>(Box)`\n  display: block;\n  outline: 1px dashed ${({ theme }) => theme.colors.primary500};\n  outline-offset: -1px;\n`;\n\nconst MemoizedComponent = React.memo(Component);\nconst MemoizedRepeatableComponent = React.memo(RepeatableComponent);\n\nexport { MemoizedRepeatableComponent as RepeatableComponent };\nexport type { RepeatableComponentProps };\n"],"names":["RepeatableComponent","attribute","disabled","name","mainField","children","layout","toggleNotification","useNotification","formatMessage","useIntl","search","searchString","useLocation","React","useMemo","URLSearchParams","currentDocument","useDocumentContext","components","value","rawValue","error","rawError","useField","addFieldRow","useForm","state","moveFieldRow","removeFieldRow","max","Infinity","Array","isArray","collapseToOpen","setCollapseToOpen","useState","liveText","setLiveText","useEffect","hasNestedErrors","length","hasNestedValue","errorOpenItems","map","_","idx","__temp_key__","filter","includes","componentTmpKeyWithFocussedField","has","fieldParam","get","undefined","path","split","getIn","subpath","prevValue","usePrev","toggleCollapses","useCallback","handleClick","schema","component","form","createDefaultForm","data","transformDocument","type","message","id","getTranslation","handleMoveComponentField","newIndex","currentIndex","defaultMessage","item","position","handleValueChange","key","handleCancel","index","handleGrabItem","handleDropItem","handleDeleteComponent","ariaDescriptionId","useId","level","useComponent","_jsx","Initializer","onClick","_jsxs","Box","hasRadius","VisuallyHidden","aria-live","AccordionRoot","$error","onValueChange","aria-describedby","componentValue","nameWithIndex","ComponentProvider","uid","MemoizedComponent","attributeComponent","onMoveItem","onDeleteComponent","onCancel","onDropItem","onGrabItem","totalLength","renderField","TextButtonCustom","startIcon","Plus","styled","Accordion","Root","theme","colors","danger600","neutral200","TextButton","props","spaces","primary100","motion","easings","easeOutQuad","RepeatableComponentFields","memo","_Fragment","row","ResponsiveGridRoot","gap","size","field","completeFieldName","translatedLabel","label","ResponsiveGridItem","col","s","xs","direction","alignItems","displayName","Component","dragProps","isDesktop","useIsDesktop","displayValue","values","accordionRef","useRef","componentKey","slice","join","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","ItemTypes","COMPONENT","displayedValue","onStart","getEmptyImage","captureDraggingState","composedAccordionRefs","useComposedRefs","composedBoxRefs","canMoveUp","canMoveDown","handleDeleteClick","Preview","Item","ref","Header","Trigger","Actions","IconButton","variant","Trash","e","stopPropagation","data-handler-id","onKeyDown","Drag","ArrowUp","ArrowDown","Content","Flex","background","padding","initial","medium","StyledSpan","tag","primary500","MemoizedRepeatableComponent"],"mappings":"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"}
+{"version":3,"file":"Repeatable.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/Repeatable.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useField, useNotification, useForm, useIsDesktop } from '@strapi/admin/strapi-admin';\nimport {\n  Box,\n  Flex,\n  TextButton,\n  VisuallyHidden,\n  Accordion,\n  IconButton,\n  useComposedRefs,\n  BoxComponent,\n} from '@strapi/design-system';\nimport { Plus, Drag, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { useLocation } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { useDragAndDrop, type UseDragAndDropOptions } from '../../../../../hooks/useDragAndDrop';\nimport { usePrev } from '../../../../../hooks/usePrev';\nimport { getIn } from '../../../../../utils/objects';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { transformDocument } from '../../../utils/data';\nimport { createDefaultForm } from '../../../utils/forms';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { ComponentProvider, useComponent } from '../ComponentContext';\n\nimport { Initializer } from './Initializer';\n\nimport type { ComponentInputProps } from './Input';\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * RepeatableComponent\n * -----------------------------------------------------------------------------------------------*/\n\ntype RepeatableComponentProps = Omit<ComponentInputProps, 'required' | 'label'>;\n\nconst RepeatableComponent = ({\n  attribute,\n  disabled,\n  name,\n  mainField,\n  children,\n  layout,\n}: RepeatableComponentProps) => {\n  const { toggleNotification } = useNotification();\n  const { formatMessage } = useIntl();\n  const { search: searchString } = useLocation();\n  const search = React.useMemo(() => new URLSearchParams(searchString), [searchString]);\n  const { currentDocument } = useDocumentContext('RepeatableComponent');\n  const components = currentDocument.components;\n\n  const {\n    value: rawValue,\n    error,\n    rawError,\n  } = useField<Schema.Attribute.ComponentValue<`${string}.${string}`, true>>(name);\n  const addFieldRow = useForm('RepeatableComponent', (state) => state.addFieldRow);\n  const moveFieldRow = useForm('RepeatableComponent', (state) => state.moveFieldRow);\n  const removeFieldRow = useForm('RepeatableComponent', (state) => state.removeFieldRow);\n  const { max = Infinity } = attribute;\n  const value = React.useMemo(() => (Array.isArray(rawValue) ? rawValue : []), [rawValue]);\n\n  const [collapseToOpen, setCollapseToOpen] = React.useState<string>('');\n  const [liveText, setLiveText] = React.useState('');\n\n  React.useEffect(() => {\n    const hasNestedErrors = rawError && Array.isArray(rawError) && rawError.length > 0;\n    const hasNestedValue = value && Array.isArray(value) && value.length > 0;\n\n    if (hasNestedErrors && hasNestedValue) {\n      const errorOpenItems = rawError\n        .map((_: unknown, idx: number) => {\n          return value[idx] ? value[idx].__temp_key__ : null;\n        })\n        .filter((value) => !!value);\n\n      if (errorOpenItems && errorOpenItems.length > 0) {\n        setCollapseToOpen((collapseToOpen) => {\n          if (!errorOpenItems.includes(collapseToOpen)) {\n            return errorOpenItems[0];\n          }\n\n          return collapseToOpen;\n        });\n      }\n    }\n  }, [rawError, value]);\n\n  /**\n   * Get the temp key of the component that has the field that is currently focussed\n   * as defined by the `field` query param. We can then force this specific component\n   * to be in its \"open\" state.\n   */\n  const componentTmpKeyWithFocussedField = React.useMemo(() => {\n    if (search.has('field')) {\n      const fieldParam = search.get('field');\n\n      if (!fieldParam) {\n        return undefined;\n      }\n\n      const [, path] = fieldParam.split(`${name}.`);\n\n      if (getIn(value, path, undefined) !== undefined) {\n        const [subpath] = path.split('.');\n\n        return getIn(value, subpath, undefined)?.__temp_key__;\n      }\n    }\n\n    return undefined;\n  }, [search, name, value]);\n\n  const prevValue = usePrev(value);\n\n  React.useEffect(() => {\n    /**\n     * When we add a new item to the array, we want to open the collapse.\n     */\n    if (prevValue && prevValue.length < value.length) {\n      setCollapseToOpen(value[value.length - 1].__temp_key__);\n    }\n  }, [value, prevValue]);\n\n  React.useEffect(() => {\n    if (typeof componentTmpKeyWithFocussedField === 'string') {\n      setCollapseToOpen(componentTmpKeyWithFocussedField);\n    }\n  }, [componentTmpKeyWithFocussedField]);\n\n  const toggleCollapses = React.useCallback(() => {\n    setCollapseToOpen('');\n  }, []);\n\n  const handleClick = () => {\n    if (value.length < max) {\n      const schema = components[attribute.component];\n      const form = createDefaultForm(schema, components);\n      const data = transformDocument(schema, components)(form);\n\n      addFieldRow(name, data);\n      // setCollapseToOpen(nextTempKey);\n    } else if (value.length >= max) {\n      toggleNotification({\n        type: 'info',\n        message: formatMessage({\n          id: getTranslation('components.notification.info.maximum-requirement'),\n        }),\n      });\n    }\n  };\n\n  const handleMoveComponentField = React.useCallback(\n    (newIndex: number, currentIndex: number) => {\n      setLiveText(\n        formatMessage(\n          {\n            id: getTranslation('dnd.reorder'),\n            defaultMessage: '{item}, moved. New position in list: {position}.',\n          },\n          {\n            item: `${name}.${currentIndex}`,\n            position: `${newIndex + 1} of ${value.length}`,\n          }\n        )\n      );\n\n      moveFieldRow(name, currentIndex, newIndex);\n    },\n    [formatMessage, moveFieldRow, name, value.length]\n  );\n\n  const handleValueChange = (key: string) => {\n    setCollapseToOpen(key);\n  };\n\n  const handleCancel = React.useCallback(\n    (index: number) => {\n      setLiveText(\n        formatMessage(\n          {\n            id: getTranslation('dnd.cancel-item'),\n            defaultMessage: '{item}, dropped. Re-order cancelled.',\n          },\n          {\n            item: `${name}.${index}`,\n          }\n        )\n      );\n    },\n    [formatMessage, name]\n  );\n\n  const handleGrabItem = React.useCallback(\n    (index: number) => {\n      setLiveText(\n        formatMessage(\n          {\n            id: getTranslation('dnd.grab-item'),\n            defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,\n          },\n          {\n            item: `${name}.${index}`,\n            position: `${index + 1} of ${value.length}`,\n          }\n        )\n      );\n    },\n    [formatMessage, name, value.length]\n  );\n\n  const handleDropItem = React.useCallback(\n    (index: number) => {\n      setLiveText(\n        formatMessage(\n          {\n            id: getTranslation('dnd.drop-item'),\n            defaultMessage: `{item}, dropped. Final position in list: {position}.`,\n          },\n          {\n            item: `${name}.${index}`,\n            position: `${index + 1} of ${value.length}`,\n          }\n        )\n      );\n    },\n    [formatMessage, name, value.length]\n  );\n\n  const handleDeleteComponent = React.useCallback(\n    (index: number) => {\n      removeFieldRow(name, index);\n      toggleCollapses();\n    },\n    [name, removeFieldRow, toggleCollapses]\n  );\n\n  const ariaDescriptionId = React.useId();\n\n  const level = useComponent('RepeatableComponent', (state) => state.level);\n\n  if (value.length === 0) {\n    return <Initializer disabled={disabled} name={name} onClick={handleClick} />;\n  }\n\n  return (\n    <Box hasRadius>\n      <VisuallyHidden id={ariaDescriptionId}>\n        {formatMessage({\n          id: getTranslation('dnd.instructions'),\n          defaultMessage: `Press spacebar to grab and re-order`,\n        })}\n      </VisuallyHidden>\n      <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n      <AccordionRoot\n        $error={error}\n        value={collapseToOpen}\n        onValueChange={handleValueChange}\n        aria-describedby={ariaDescriptionId}\n      >\n        {value.map((componentValue, index) => {\n          const key = componentValue.__temp_key__;\n          const id = componentValue.id;\n          const nameWithIndex = `${name}.${index}`;\n\n          return (\n            <ComponentProvider\n              key={key}\n              // id is always a number in a component\n              id={id as number}\n              uid={attribute.component}\n              level={level + 1}\n              type=\"repeatable\"\n            >\n              <MemoizedComponent\n                disabled={disabled}\n                name={nameWithIndex}\n                attributeComponent={attribute.component}\n                index={index}\n                mainField={mainField}\n                onMoveItem={handleMoveComponentField}\n                onDeleteComponent={handleDeleteComponent}\n                toggleCollapses={toggleCollapses}\n                onCancel={handleCancel}\n                onDropItem={handleDropItem}\n                onGrabItem={handleGrabItem}\n                __temp_key__={key}\n                totalLength={value.length}\n                layout={layout}\n                renderField={children}\n              />\n            </ComponentProvider>\n          );\n        })}\n        <TextButtonCustom disabled={disabled} onClick={handleClick} startIcon={<Plus />}>\n          {formatMessage({\n            id: getTranslation('containers.EditView.add.new-entry'),\n            defaultMessage: 'Add an entry',\n          })}\n        </TextButtonCustom>\n      </AccordionRoot>\n    </Box>\n  );\n};\n\nconst AccordionRoot = styled(Accordion.Root)<{ $error?: string }>`\n  border: 1px solid\n    ${({ theme, $error }) => ($error ? theme.colors.danger600 : theme.colors.neutral200)};\n`;\n\nconst TextButtonCustom = styled(TextButton)`\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral200};\n  padding-inline: ${(props) => props.theme.spaces[6]};\n  padding-block: ${(props) => props.theme.spaces[3]};\n\n  &:not([disabled]) {\n    cursor: pointer;\n\n    &:hover {\n      background-color: ${(props) => props.theme.colors.primary100};\n    }\n  }\n\n  span {\n    font-weight: 600;\n    font-size: 1.4rem;\n    line-height: 2.4rem;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    transition: background-color 120ms ${(props) => props.theme.motion.easings.easeOutQuad};\n  }\n`;\n\ninterface RepeatableComponentFieldsProps\n  extends Pick<RepeatableComponentProps, 'children' | 'layout'> {\n  attributeComponent: string;\n  nameWithIndex: string;\n}\n\nconst RepeatableComponentFields = React.memo(\n  ({ attributeComponent, children, layout, nameWithIndex }: RepeatableComponentFieldsProps) => {\n    const { formatMessage } = useIntl();\n\n    return (\n      <>\n        {layout.map((row, index) => {\n          return (\n            <ResponsiveGridRoot gap={4} key={index}>\n              {row.map(({ size, ...field }) => {\n                /**\n                 * Layouts are built from schemas so they don't understand the complete\n                 * schema tree, for components we append the parent name to the field name\n                 * because this is the structure for the data & permissions also understand\n                 * the nesting involved.\n                 */\n                const completeFieldName = `${nameWithIndex}.${field.name}`;\n\n                const translatedLabel = formatMessage({\n                  id: `content-manager.components.${attributeComponent}.${field.name}`,\n                  defaultMessage: field.label,\n                });\n\n                return (\n                  <ResponsiveGridItem\n                    col={size}\n                    key={completeFieldName}\n                    s={12}\n                    xs={12}\n                    direction=\"column\"\n                    alignItems=\"stretch\"\n                  >\n                    {children({\n                      ...field,\n                      label: translatedLabel,\n                      name: completeFieldName,\n                    })}\n                  </ResponsiveGridItem>\n                );\n              })}\n            </ResponsiveGridRoot>\n          );\n        })}\n      </>\n    );\n  }\n);\n\nRepeatableComponentFields.displayName = 'RepeatableComponentFields';\n\n/* -------------------------------------------------------------------------------------------------\n * Field\n * -----------------------------------------------------------------------------------------------*/\n\ninterface ComponentProps\n  extends Pick<UseDragAndDropOptions, 'onGrabItem' | 'onDropItem' | 'onCancel' | 'onMoveItem'>,\n    Pick<RepeatableComponentProps, 'mainField' | 'layout'> {\n  attributeComponent: string;\n  disabled?: boolean;\n  index: number;\n  name: string;\n  onDeleteComponent?: (index: number) => void;\n  renderField: RepeatableComponentProps['children'];\n  toggleCollapses: () => void;\n  __temp_key__: string;\n  totalLength: number;\n}\n\nconst Component = ({\n  attributeComponent,\n  disabled,\n  index,\n  name,\n  mainField = {\n    name: 'id',\n    type: 'integer',\n  },\n  layout,\n  onDeleteComponent,\n  renderField,\n  toggleCollapses,\n  __temp_key__,\n  totalLength,\n  onMoveItem,\n  ...dragProps\n}: ComponentProps) => {\n  const { formatMessage } = useIntl();\n  const isDesktop = useIsDesktop();\n\n  const displayValue = useForm('RepeatableComponent', (state) => {\n    return getIn(state.values, [...name.split('.'), mainField.name]);\n  });\n\n  const accordionRef = React.useRef<HTMLButtonElement>(null!);\n\n  /**\n   * The last item in the fieldName array will be the index of this component.\n   * Drag and drop should be isolated to the parent component so nested repeatable\n   * components are not affected by the drag and drop of the parent component in\n   * their own re-ordering context.\n   */\n  const componentKey = name.split('.').slice(0, -1).join('.');\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.COMPONENT}_${componentKey}`,\n      index,\n      item: {\n        index,\n        id: __temp_key__,\n        displayedValue: displayValue,\n      },\n      onStart() {\n        // Close all collapses\n        toggleCollapses();\n      },\n      onMoveItem,\n      ...dragProps,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  const composedAccordionRefs = useComposedRefs<HTMLButtonElement>(accordionRef, dragRef);\n  const composedBoxRefs = useComposedRefs<HTMLDivElement>(\n    boxRef as React.RefObject<HTMLDivElement>,\n    dropRef\n  );\n\n  const canMoveUp = index > 0;\n  const canMoveDown = index < totalLength - 1;\n  const handleDeleteClick = () => {\n    onDeleteComponent?.(index);\n  };\n\n  return (\n    <>\n      {isDragging ? (\n        <Preview />\n      ) : (\n        <Accordion.Item ref={composedBoxRefs} value={__temp_key__}>\n          <Accordion.Header>\n            <Accordion.Trigger>{displayValue}</Accordion.Trigger>\n            <Accordion.Actions>\n              <IconButton\n                disabled={disabled}\n                variant=\"ghost\"\n                onClick={handleDeleteClick}\n                label={formatMessage({\n                  id: getTranslation('containers.Edit.delete'),\n                  defaultMessage: 'Delete',\n                })}\n              >\n                <Trash />\n              </IconButton>\n              {isDesktop && (\n                <IconButton\n                  disabled={disabled}\n                  ref={composedAccordionRefs}\n                  variant=\"ghost\"\n                  onClick={(e) => e.stopPropagation()}\n                  data-handler-id={handlerId}\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                      disabled={disabled || !canMoveUp}\n                      variant=\"ghost\"\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        if (onMoveItem) {\n                          onMoveItem(index - 1, index);\n                        }\n                      }}\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                      disabled={disabled || !canMoveDown}\n                      variant=\"ghost\"\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        if (onMoveItem) {\n                          onMoveItem(index + 1, index);\n                        }\n                      }}\n                      label={formatMessage({\n                        id: getTranslation('components.DynamicZone.move-down'),\n                        defaultMessage: 'Move down',\n                      })}\n                    >\n                      <ArrowDown />\n                    </IconButton>\n                  )}\n                </>\n              )}\n            </Accordion.Actions>\n          </Accordion.Header>\n          <Accordion.Content>\n            <Flex\n              direction=\"column\"\n              alignItems=\"stretch\"\n              background=\"neutral100\"\n              padding={{ initial: 4, medium: 6 }}\n              gap={{ initial: 3, medium: 4 }}\n            >\n              <RepeatableComponentFields\n                attributeComponent={attributeComponent}\n                layout={layout}\n                nameWithIndex={name}\n              >\n                {renderField}\n              </RepeatableComponentFields>\n            </Flex>\n          </Accordion.Content>\n        </Accordion.Item>\n      )}\n    </>\n  );\n};\n\nconst Preview = () => {\n  return <StyledSpan tag=\"span\" padding={6} background=\"primary100\" />;\n};\n\nconst StyledSpan = styled<BoxComponent<'span'>>(Box)`\n  display: block;\n  outline: 1px dashed ${({ theme }) => theme.colors.primary500};\n  outline-offset: -1px;\n`;\n\nconst MemoizedComponent = React.memo(Component);\nconst MemoizedRepeatableComponent = React.memo(RepeatableComponent);\n\nexport { MemoizedRepeatableComponent as RepeatableComponent };\nexport type { RepeatableComponentProps };\n"],"names":["RepeatableComponent","attribute","disabled","name","mainField","children","layout","toggleNotification","useNotification","formatMessage","useIntl","search","searchString","useLocation","React","useMemo","URLSearchParams","currentDocument","useDocumentContext","components","value","rawValue","error","rawError","useField","addFieldRow","useForm","state","moveFieldRow","removeFieldRow","max","Infinity","Array","isArray","collapseToOpen","setCollapseToOpen","useState","liveText","setLiveText","useEffect","hasNestedErrors","length","hasNestedValue","errorOpenItems","map","_","idx","__temp_key__","filter","includes","componentTmpKeyWithFocussedField","has","fieldParam","get","undefined","path","split","getIn","subpath","prevValue","usePrev","toggleCollapses","useCallback","handleClick","schema","component","form","createDefaultForm","data","transformDocument","type","message","id","getTranslation","handleMoveComponentField","newIndex","currentIndex","defaultMessage","item","position","handleValueChange","key","handleCancel","index","handleGrabItem","handleDropItem","handleDeleteComponent","ariaDescriptionId","useId","level","useComponent","_jsx","Initializer","onClick","_jsxs","Box","hasRadius","VisuallyHidden","aria-live","AccordionRoot","$error","onValueChange","aria-describedby","componentValue","nameWithIndex","ComponentProvider","uid","MemoizedComponent","attributeComponent","onMoveItem","onDeleteComponent","onCancel","onDropItem","onGrabItem","totalLength","renderField","TextButtonCustom","startIcon","Plus","styled","Accordion","Root","theme","colors","danger600","neutral200","TextButton","props","spaces","primary100","motion","easings","easeOutQuad","RepeatableComponentFields","memo","_Fragment","row","ResponsiveGridRoot","gap","size","field","completeFieldName","translatedLabel","label","ResponsiveGridItem","col","s","xs","direction","alignItems","displayName","Component","dragProps","isDesktop","useIsDesktop","displayValue","values","accordionRef","useRef","componentKey","slice","join","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","ItemTypes","COMPONENT","displayedValue","onStart","getEmptyImage","captureDraggingState","composedAccordionRefs","useComposedRefs","composedBoxRefs","canMoveUp","canMoveDown","handleDeleteClick","Preview","Item","ref","Header","Trigger","Actions","IconButton","variant","Trash","e","stopPropagation","data-handler-id","onKeyDown","Drag","ArrowUp","ArrowDown","Content","Flex","background","padding","initial","medium","StyledSpan","tag","primary500","MemoizedRepeatableComponent"],"mappings":"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"}

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

@@ -3,10 +3,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('react');
 var designSystem = require('@strapi/design-system');
+var upperFirst = require('lodash/upperFirst');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
 var ComponentIcon = require('../../../../../components/ComponentIcon.js');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
+
 const ComponentCategory = ({ category, components = [], variant = 'primary', onAddComponent })=>{
     const { formatMessage } = reactIntl.useIntl();
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Accordion.Item, {
@@ -17,7 +22,7 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
                 children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Accordion.Trigger, {
                     children: formatMessage({
                         id: category,
-                        defaultMessage: category
+                        defaultMessage: upperFirst__default.default(category)
                     })
                 })
             }),

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, Tooltip, 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\n                direction=\"column\"\n                gap={1}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                width=\"100%\"\n                paddingLeft={2}\n                paddingRight={2}\n              >\n                <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />\n\n                <Tooltip label={formatMessage({ id: uid, defaultMessage: displayName ?? uid })}>\n                  <Typography variant=\"pi\" fontWeight=\"bold\" ellipsis width=\"100%\">\n                    {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                  </Typography>\n                </Tooltip>\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","width","ComponentIcon","color","Tooltip","label","Typography","fontWeight","ellipsis","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, Tooltip, Typography } from '@strapi/design-system';\nimport upperFirst from 'lodash/upperFirst';\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: upperFirst(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\n                direction=\"column\"\n                gap={1}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                width=\"100%\"\n                paddingLeft={2}\n                paddingRight={2}\n              >\n                <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />\n\n                <Tooltip label={formatMessage({ id: uid, defaultMessage: displayName ?? uid })}>\n                  <Typography variant=\"pi\" fontWeight=\"bold\" ellipsis width=\"100%\">\n                    {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                  </Typography>\n                </Tooltip>\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","upperFirst","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","displayName","icon","ComponentBox","tag","type","background","justifyContent","onClick","hasRadius","height","shrink","borderColor","Flex","direction","gap","alignItems","width","ComponentIcon","color","Tooltip","label","Typography","fontWeight","ellipsis","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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 import { Accordion, Box, Flex, Tooltip, Typography } from '@strapi/design-system';
+import upperFirst from 'lodash/upperFirst';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 import { ComponentIcon } from '../../../../../components/ComponentIcon.mjs';
@@ -15,7 +16,7 @@ const ComponentCategory = ({ category, components = [], variant = 'primary', onA
                 children: /*#__PURE__*/ jsx(Accordion.Trigger, {
                     children: formatMessage({
                         id: category,
-                        defaultMessage: category
+                        defaultMessage: upperFirst(category)
                     })
                 })
             }),

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, Tooltip, 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\n                direction=\"column\"\n                gap={1}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                width=\"100%\"\n                paddingLeft={2}\n                paddingRight={2}\n              >\n                <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />\n\n                <Tooltip label={formatMessage({ id: uid, defaultMessage: displayName ?? uid })}>\n                  <Typography variant=\"pi\" fontWeight=\"bold\" ellipsis width=\"100%\">\n                    {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                  </Typography>\n                </Tooltip>\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","width","ComponentIcon","color","Tooltip","label","Typography","fontWeight","ellipsis","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, Tooltip, Typography } from '@strapi/design-system';\nimport upperFirst from 'lodash/upperFirst';\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: upperFirst(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\n                direction=\"column\"\n                gap={1}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                width=\"100%\"\n                paddingLeft={2}\n                paddingRight={2}\n              >\n                <ComponentIcon color=\"currentColor\" background=\"primary200\" icon={icon} />\n\n                <Tooltip label={formatMessage({ id: uid, defaultMessage: displayName ?? uid })}>\n                  <Typography variant=\"pi\" fontWeight=\"bold\" ellipsis width=\"100%\">\n                    {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\n                  </Typography>\n                </Tooltip>\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","upperFirst","ResponsiveAccordionContent","Grid","paddingTop","paddingBottom","paddingLeft","paddingRight","map","uid","displayName","icon","ComponentBox","tag","type","background","justifyContent","onClick","hasRadius","height","shrink","borderColor","Flex","direction","gap","alignItems","width","ComponentIcon","color","Tooltip","label","Typography","fontWeight","ellipsis","styled","Content","process","env","NODE_ENV","Box","theme","breakpoints","medium","colors","neutral600","props","motion","easings","easeOutQuad","primary200","primary100","primary600"],"mappings":"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"}

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

@@ -5,6 +5,7 @@ var React = require('react');
 var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var Icons = require('@strapi/icons');
+var upperFirst = require('lodash/upperFirst');
 var reactDndHtml5Backend = require('react-dnd-html5-backend');
 var reactIntl = require('react-intl');
 var styledComponents = require('styled-components');
@@ -18,7 +19,10 @@ var translations = require('../../../../../utils/translations.js');
 var FormLayout = require('../../FormLayout.js');
 var InputRenderer = require('../../InputRenderer.js');
 
-function _interopNamespaceDefault(e) {
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -35,7 +39,8 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
 
 const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveComponentClick, onMoveComponent, onGrabItem, onDropItem, onCancel, dynamicComponentsByCategory = {}, onAddComponent, totalLength, children, forceOpen, onForceOpenHandled })=>{
     const { formatMessage } = reactIntl.useIntl();
@@ -235,7 +240,7 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Label, {
                                                         children: formatMessage({
                                                             id: category,
-                                                            defaultMessage: category
+                                                            defaultMessage: upperFirst__default.default(category)
                                                         })
                                                     }),
                                                     components.map(({ displayName, uid })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
@@ -264,7 +269,7 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                                     /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Label, {
                                                         children: formatMessage({
                                                             id: category,
-                                                            defaultMessage: category
+                                                            defaultMessage: upperFirst__default.default(category)
                                                         })
                                                     }),
                                                     components.map(({ displayName, uid })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {

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   * When true, the component's accordion will be forced open and scrolled into view.\n   * Used by the parent DynamicZone to auto-expand newly added components.\n   */\n  forceOpen?: boolean;\n  /**\n   * Called after the forceOpen has been handled (accordion opened + scrolled),\n   * so the parent can clear the forced state.\n   */\n  onForceOpenHandled?: () => void;\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  forceOpen,\n  onForceOpenHandled,\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' } = componentUid ? (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    if (!componentUid) {\n      return {\n        icon: null,\n        displayName: formatMessage({\n          id: getTranslation('components.DynamicZone.unknown-component'),\n          defaultMessage: 'Unknown component',\n        }),\n      };\n    }\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    return {\n      icon,\n      displayName: formatMessage({\n        id: componentUid,\n        defaultMessage: displayName || componentUid,\n      }),\n    };\n  }, [componentUid, dynamicComponentsByCategory, formatMessage]);\n\n  const tempKey = useForm('DynamicComponent', (state) =>\n    getIn(state.values, `${name}.${index}.__temp_key__`)\n  ) as string | undefined;\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n      index,\n      item: {\n        index,\n        id: tempKey,\n        displayedValue: `${displayName} ${displayTitle}`,\n        icon,\n      },\n      onMoveItem: onMoveComponent,\n      onDropItem,\n      onGrabItem,\n      onCancel,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  const accordionValue = React.useId();\n\n  /**\n   * Ref for the component container `<li>`, used to scroll the newly added\n   * component into view when `forceOpen` is set by the parent.\n   */\n  const componentRef = React.useRef<HTMLLIElement>(null);\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  /**\n   * When the parent flags this component as newly added via `forceOpen`,\n   * expand the accordion and scroll it into view so the user can immediately\n   * start editing. Once handled, notify the parent so it can clear the flag.\n   */\n  React.useEffect(() => {\n    if (forceOpen) {\n      setCollapseToOpen(accordionValue);\n      requestAnimationFrame(() => {\n        componentRef.current?.scrollIntoView({\n          behavior: 'smooth',\n          block: 'center',\n        });\n        onForceOpenHandled?.();\n      });\n    }\n  }, [forceOpen, accordionValue, onForceOpenHandled]);\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 ref={componentRef} 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={componentUid ? components[componentUid]?.layout : undefined}\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","forceOpen","onForceOpenHandled","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","id","getTranslation","defaultMessage","category","split","find","component","uid","tempKey","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","componentRef","useRef","componentPath","hasValue","isNewItem","rawError","errors","collapseToOpen","setCollapseToOpen","useState","requestAnimationFrame","current","scrollIntoView","behavior","block","composedBoxRefs","useComposedRefs","canMoveUp","canMoveDown","handleRemoveCurrentComponent","useCallback","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","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","undefined","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 upperFirst from 'lodash/upperFirst';\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   * When true, the component's accordion will be forced open and scrolled into view.\n   * Used by the parent DynamicZone to auto-expand newly added components.\n   */\n  forceOpen?: boolean;\n  /**\n   * Called after the forceOpen has been handled (accordion opened + scrolled),\n   * so the parent can clear the forced state.\n   */\n  onForceOpenHandled?: () => void;\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  forceOpen,\n  onForceOpenHandled,\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' } = componentUid ? (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    if (!componentUid) {\n      return {\n        icon: null,\n        displayName: formatMessage({\n          id: getTranslation('components.DynamicZone.unknown-component'),\n          defaultMessage: 'Unknown component',\n        }),\n      };\n    }\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    return {\n      icon,\n      displayName: formatMessage({\n        id: componentUid,\n        defaultMessage: displayName || componentUid,\n      }),\n    };\n  }, [componentUid, dynamicComponentsByCategory, formatMessage]);\n\n  const tempKey = useForm('DynamicComponent', (state) =>\n    getIn(state.values, `${name}.${index}.__temp_key__`)\n  ) as string | undefined;\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n      index,\n      item: {\n        index,\n        id: tempKey,\n        displayedValue: `${displayName} ${displayTitle}`,\n        icon,\n      },\n      onMoveItem: onMoveComponent,\n      onDropItem,\n      onGrabItem,\n      onCancel,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  const accordionValue = React.useId();\n\n  /**\n   * Ref for the component container `<li>`, used to scroll the newly added\n   * component into view when `forceOpen` is set by the parent.\n   */\n  const componentRef = React.useRef<HTMLLIElement>(null);\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  /**\n   * When the parent flags this component as newly added via `forceOpen`,\n   * expand the accordion and scroll it into view so the user can immediately\n   * start editing. Once handled, notify the parent so it can clear the flag.\n   */\n  React.useEffect(() => {\n    if (forceOpen) {\n      setCollapseToOpen(accordionValue);\n      requestAnimationFrame(() => {\n        componentRef.current?.scrollIntoView({\n          behavior: 'smooth',\n          block: 'center',\n        });\n        onForceOpenHandled?.();\n      });\n    }\n  }, [forceOpen, accordionValue, onForceOpenHandled]);\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: upperFirst(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: upperFirst(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 ref={componentRef} 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={componentUid ? components[componentUid]?.layout : undefined}\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","forceOpen","onForceOpenHandled","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","id","getTranslation","defaultMessage","category","split","find","component","uid","tempKey","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","componentRef","useRef","componentPath","hasValue","isNewItem","rawError","errors","collapseToOpen","setCollapseToOpen","useState","requestAnimationFrame","current","scrollIntoView","behavior","block","composedBoxRefs","useComposedRefs","canMoveUp","canMoveDown","handleRemoveCurrentComponent","useCallback","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","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","upperFirst","Item","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","value","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","DynamicComponentFields","layout","undefined","styled","Box","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500","memo","padding","initial","medium","Grid","gap","row","rowInd","col","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","s","InputRenderer","MemoizedDynamicComponent"],"mappings":"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"}

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

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { useIsDesktop, useForm } from '@strapi/admin/strapi-admin';
 import { Box, Grid, useComposedRefs, IconButton, Menu, Flex, Accordion } from '@strapi/design-system';
 import { Trash, Drag, ArrowUp, ArrowDown, More } from '@strapi/icons';
+import upperFirst from 'lodash/upperFirst';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
@@ -214,7 +215,7 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                                     /*#__PURE__*/ jsx(Menu.Label, {
                                                         children: formatMessage({
                                                             id: category,
-                                                            defaultMessage: category
+                                                            defaultMessage: upperFirst(category)
                                                         })
                                                     }),
                                                     components.map(({ displayName, uid })=>/*#__PURE__*/ jsx(Menu.Item, {
@@ -243,7 +244,7 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                                     /*#__PURE__*/ jsx(Menu.Label, {
                                                         children: formatMessage({
                                                             id: category,
-                                                            defaultMessage: category
+                                                            defaultMessage: upperFirst(category)
                                                         })
                                                     }),
                                                     components.map(({ displayName, uid })=>/*#__PURE__*/ jsx(Menu.Item, {