@strapi/content-manager 5.50.0 → 5.50.1

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 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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"}
+{"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<{ id?: unknown }>(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.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicComponent.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useIsDesktop } from '@strapi/admin/strapi-admin';\nimport {\n  Accordion,\n  Box,\n  Flex,\n  Grid,\n  IconButton,\n  useComposedRefs,\n  Menu,\n  BoxComponent,\n} from '@strapi/design-system';\nimport { Drag, More, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\nimport 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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"}
+{"version":3,"file":"DynamicComponent.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useIsDesktop } from '@strapi/admin/strapi-admin';\nimport {\n  Accordion,\n  Box,\n  Flex,\n  Grid,\n  IconButton,\n  useComposedRefs,\n  Menu,\n  BoxComponent,\n} from '@strapi/design-system';\nimport { Drag, More, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\nimport 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<{ id?: unknown }>(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/Relations/Relations.js

@@ -162,6 +162,7 @@ const EMPTY_RELATION_RESULTS = [];
         setCurrentPage((prev)=>prev + 1);
     };
     const field = strapiAdmin.useField(props.name);
+    const onChangeRelationField = field.onChange;
     const serverData = data?.results ?? EMPTY_RELATION_RESULTS;
     const isFetchingMoreRelations = isLoading || isFetching;
     const realServerRelationsCount = data?.pagination ? data.pagination.total : 0;
@@ -240,11 +241,11 @@ const EMPTY_RELATION_RESULTS = [];
             // Remove any existing relation so they can be replaced with the new one
             field.value?.connect?.forEach(handleDisconnect);
             relations$2.forEach(handleDisconnect);
-            field.onChange(`${props.name}.connect`, [
+            onChangeRelationField(`${props.name}.connect`, [
                 item
             ]);
         } else {
-            field.onChange(`${props.name}.connect`, [
+            onChangeRelationField(`${props.name}.connect`, [
                 ...field.value?.connect ?? [],
                 item
             ]);
@@ -252,6 +253,7 @@ const EMPTY_RELATION_RESULTS = [];
     }, [
         field,
         handleDisconnect,
+        onChangeRelationField,
         props.attribute.relation,
         props.mainField,
         props.name,
@@ -623,6 +625,7 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
     const [overflow, setOverflow] = React__namespace.useState();
     const [liveText, setLiveText] = React__namespace.useState('');
     const field = strapiAdmin.useField(name);
+    const onChangeRelationField = field.onChange;
     React__namespace.useEffect(()=>{
         if (data.length <= RELATIONS_TO_DISPLAY) {
             return setOverflow(undefined);
@@ -715,14 +718,14 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
             }
             return acc;
         }, []).toReversed();
-        field.onChange(`${name}.connect`, connectedRelations);
+        onChangeRelationField(`${name}.connect`, connectedRelations);
     }, [
         data,
         serverData,
-        field,
         name,
         formatMessage,
-        getItemPos
+        getItemPos,
+        onChangeRelationField
     ]);
     const handleGrabItem = React__namespace.useCallback((index)=>{
         const item = data[index];