@strapi/content-manager 5.16.1 → 5.17.0-beta.0

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, useField } 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 } 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 { 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: () => void;\n  onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n  children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicComponent = ({\n  componentUid,\n  disabled,\n  index,\n  name,\n  onRemoveComponentClick,\n  onMoveComponent,\n  onGrabItem,\n  onDropItem,\n  onCancel,\n  dynamicComponentsByCategory = {},\n  onAddComponent,\n  children,\n}: DynamicComponentProps) => {\n  const { formatMessage } = useIntl();\n  const formValues = useForm('DynamicComponent', (state) => state.values);\n  const { currentDocument, currentDocumentMeta } = useDocumentContext('DynamicComponent');\n\n  const {\n    edit: { components },\n  } = useDocumentLayout(currentDocumentMeta.model);\n\n  const title = React.useMemo(() => {\n    const { mainField } = components[componentUid]?.settings ?? { mainField: 'id' };\n\n    const mainFieldValue = getIn(formValues, `${name}.${index}.${mainField}`);\n\n    const displayedValue =\n      mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();\n\n    const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n    return mainValue;\n  }, [componentUid, components, formValues, name, index]);\n\n  const { icon, displayName } = React.useMemo(() => {\n    const [category] = componentUid.split('.');\n    const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n      (component) => component.uid === componentUid\n    ) ?? { icon: null, displayName: null };\n\n    return { icon, displayName };\n  }, [componentUid, dynamicComponentsByCategory]);\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n      index,\n      item: {\n        index,\n        displayedValue: `${displayName} ${title}`,\n        icon,\n      },\n      onMoveItem: onMoveComponent,\n      onDropItem,\n      onGrabItem,\n      onCancel,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  /**\n   * We don't need the accordion's to communicate with each other,\n   * so a unique value for their state is enough.\n   */\n  const accordionValue = React.useId();\n\n  const { value = [], rawError } = useField(`${name}.${index}`);\n\n  const [collapseToOpen, setCollapseToOpen] = React.useState<string>('');\n\n  React.useEffect(() => {\n    if (rawError && value) {\n      setCollapseToOpen(accordionValue);\n    }\n  }, [rawError, value, accordionValue]);\n\n  const composedBoxRefs = useComposedRefs(boxRef, dropRef);\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: title }\n        )}\n        onClick={onRemoveComponentClick}\n      >\n        <Trash />\n      </IconButton>\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      <Menu.Root>\n        <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n          <IconButton\n            variant=\"ghost\"\n            label={formatMessage({\n              id: getTranslation('components.DynamicZone.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            tag=\"span\"\n          >\n            <More aria-hidden focusable={false} />\n          </IconButton>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-above'),\n                defaultMessage: 'Add component above',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={componentUid} onSelect={() => onAddComponent(uid, index)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-below'),\n                defaultMessage: 'Add component below',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={componentUid} onSelect={() => onAddComponent(uid, index + 1)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n        </Menu.Content>\n      </Menu.Root>\n    </>\n  );\n\n  const accordionTitle = title ? `${displayName} ${title}` : displayName;\n\n  return (\n    <ComponentContainer tag=\"li\" width=\"100%\">\n      <Flex justifyContent=\"center\">\n        <Rectangle background=\"neutral200\" />\n      </Flex>\n      <StyledBox ref={composedBoxRefs} hasRadius>\n        {isDragging ? (\n          <Preview />\n        ) : (\n          <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\n            <Accordion.Item value={accordionValue}>\n              <Accordion.Header>\n                <Accordion.Trigger\n                  icon={\n                    icon && COMPONENT_ICONS[icon]\n                      ? COMPONENT_ICONS[icon]\n                      : COMPONENT_ICONS.dashboard\n                  }\n                >\n                  {accordionTitle}\n                </Accordion.Trigger>\n                <Accordion.Actions>{accordionActions}</Accordion.Actions>\n              </Accordion.Header>\n              <Accordion.Content>\n                <AccordionContentRadius background=\"neutral0\">\n                  <Box paddingLeft={6} paddingRight={6} paddingTop={6} paddingBottom={6}>\n                    <Grid.Root gap={4}>\n                      {components[componentUid]?.layout?.map((row, rowInd) => (\n                        <Grid.Item\n                          col={12}\n                          key={rowInd}\n                          s={12}\n                          xs={12}\n                          direction=\"column\"\n                          alignItems=\"stretch\"\n                        >\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                                      document: currentDocument,\n                                      name: fieldName,\n                                    })\n                                  ) : (\n                                    <InputRenderer\n                                      {...fieldWithTranslatedLabel}\n                                      document={currentDocument}\n                                      name={fieldName}\n                                    />\n                                  )}\n                                </ResponsiveGridItem>\n                              );\n                            })}\n                          </ResponsiveGridRoot>\n                        </Grid.Item>\n                      ))}\n                    </Grid.Root>\n                  </Box>\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\nexport { DynamicComponent };\nexport type { DynamicComponentProps };\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","children","formatMessage","useIntl","formValues","useForm","state","values","currentDocument","currentDocumentMeta","useDocumentContext","edit","components","useDocumentLayout","model","title","React","useMemo","mainField","settings","mainFieldValue","getIn","displayedValue","String","trim","mainValue","length","icon","displayName","category","split","find","component","uid","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","value","rawError","useField","collapseToOpen","setCollapseToOpen","useState","composedBoxRefs","useComposedRefs","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","id","getTranslation","defaultMessage","onClick","Trash","e","stopPropagation","data-handler-id","ref","onKeyDown","Drag","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","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","Box","paddingTop","paddingBottom","Grid","gap","layout","row","rowInd","col","s","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","document","InputRenderer","styled","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500"],"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, useField, createRulesEngine } 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 } 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 { 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: () => void;\n  onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n  children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicComponent = ({\n  componentUid,\n  disabled,\n  index,\n  name,\n  onRemoveComponentClick,\n  onMoveComponent,\n  onGrabItem,\n  onDropItem,\n  onCancel,\n  dynamicComponentsByCategory = {},\n  onAddComponent,\n  children,\n}: DynamicComponentProps) => {\n  const { formatMessage } = useIntl();\n  const formValues = useForm('DynamicComponent', (state) => state.values);\n  const { currentDocument, currentDocumentMeta } = useDocumentContext('DynamicComponent');\n  const rulesEngine = createRulesEngine();\n\n  const {\n    edit: { components },\n  } = useDocumentLayout(currentDocumentMeta.model);\n\n  const title = React.useMemo(() => {\n    const { mainField } = components[componentUid]?.settings ?? { mainField: 'id' };\n\n    const mainFieldValue = getIn(formValues, `${name}.${index}.${mainField}`);\n\n    const displayedValue =\n      mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();\n\n    const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n    return mainValue;\n  }, [componentUid, components, formValues, name, index]);\n\n  const { icon, displayName } = React.useMemo(() => {\n    const [category] = componentUid.split('.');\n    const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n      (component) => component.uid === componentUid\n    ) ?? { icon: null, displayName: null };\n\n    return { icon, displayName };\n  }, [componentUid, dynamicComponentsByCategory]);\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n      index,\n      item: {\n        index,\n        displayedValue: `${displayName} ${title}`,\n        icon,\n      },\n      onMoveItem: onMoveComponent,\n      onDropItem,\n      onGrabItem,\n      onCancel,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  /**\n   * We don't need the accordion's to communicate with each other,\n   * so a unique value for their state is enough.\n   */\n  const accordionValue = React.useId();\n\n  const { value = [], rawError } = useField(`${name}.${index}`);\n\n  const [collapseToOpen, setCollapseToOpen] = React.useState<string>('');\n\n  React.useEffect(() => {\n    if (rawError && value) {\n      setCollapseToOpen(accordionValue);\n    }\n  }, [rawError, value, accordionValue]);\n\n  const composedBoxRefs = useComposedRefs(boxRef, dropRef);\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: title }\n        )}\n        onClick={onRemoveComponentClick}\n      >\n        <Trash />\n      </IconButton>\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      <Menu.Root>\n        <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n          <IconButton\n            variant=\"ghost\"\n            label={formatMessage({\n              id: getTranslation('components.DynamicZone.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            tag=\"span\"\n          >\n            <More aria-hidden focusable={false} />\n          </IconButton>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-above'),\n                defaultMessage: 'Add component above',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={componentUid} onSelect={() => onAddComponent(uid, index)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-below'),\n                defaultMessage: 'Add component below',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={componentUid} onSelect={() => onAddComponent(uid, index + 1)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n        </Menu.Content>\n      </Menu.Root>\n    </>\n  );\n\n  const accordionTitle = title ? `${displayName} ${title}` : displayName;\n\n  return (\n    <ComponentContainer tag=\"li\" width=\"100%\">\n      <Flex justifyContent=\"center\">\n        <Rectangle background=\"neutral200\" />\n      </Flex>\n      <StyledBox ref={composedBoxRefs} hasRadius>\n        {isDragging ? (\n          <Preview />\n        ) : (\n          <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\n            <Accordion.Item value={accordionValue}>\n              <Accordion.Header>\n                <Accordion.Trigger\n                  icon={\n                    icon && COMPONENT_ICONS[icon]\n                      ? COMPONENT_ICONS[icon]\n                      : COMPONENT_ICONS.dashboard\n                  }\n                >\n                  {accordionTitle}\n                </Accordion.Trigger>\n                <Accordion.Actions>{accordionActions}</Accordion.Actions>\n              </Accordion.Header>\n              <Accordion.Content>\n                <AccordionContentRadius background=\"neutral0\">\n                  <Box paddingLeft={6} paddingRight={6} paddingTop={6} paddingBottom={6}>\n                    <Grid.Root gap={4}>\n                      {components[componentUid]?.layout?.map((row, rowInd) => {\n                        const visibleFields = row.filter(({ ...field }) => {\n                          const condition = field.attribute.conditions?.visible;\n\n                          if (condition) {\n                            return rulesEngine.evaluate(condition, value);\n                          }\n\n                          return true;\n                        });\n\n                        if (visibleFields.length === 0) {\n                          return null; // Skip rendering the entire grid row\n                        }\n                        return (\n                          <Grid.Item\n                            col={12}\n                            key={rowInd}\n                            s={12}\n                            xs={12}\n                            direction=\"column\"\n                            alignItems=\"stretch\"\n                          >\n                            <ResponsiveGridRoot gap={4}>\n                              {visibleFields.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                                        document: currentDocument,\n                                        name: fieldName,\n                                      })\n                                    ) : (\n                                      <InputRenderer\n                                        {...fieldWithTranslatedLabel}\n                                        document={currentDocument}\n                                        name={fieldName}\n                                      />\n                                    )}\n                                  </ResponsiveGridItem>\n                                );\n                              })}\n                            </ResponsiveGridRoot>\n                          </Grid.Item>\n                        );\n                      })}\n                    </Grid.Root>\n                  </Box>\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\nexport { DynamicComponent };\nexport type { DynamicComponentProps };\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","children","formatMessage","useIntl","formValues","useForm","state","values","currentDocument","currentDocumentMeta","useDocumentContext","rulesEngine","createRulesEngine","edit","components","useDocumentLayout","model","title","React","useMemo","mainField","settings","mainFieldValue","getIn","displayedValue","String","trim","mainValue","length","icon","displayName","category","split","find","component","uid","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","value","rawError","useField","collapseToOpen","setCollapseToOpen","useState","composedBoxRefs","useComposedRefs","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","id","getTranslation","defaultMessage","onClick","Trash","e","stopPropagation","data-handler-id","ref","onKeyDown","Drag","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","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","Box","paddingTop","paddingBottom","Grid","gap","layout","row","rowInd","visibleFields","filter","field","condition","attribute","conditions","visible","evaluate","col","s","xs","direction","alignItems","ResponsiveGridRoot","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","document","InputRenderer","styled","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAMA,gBAAmB,GAAA,CAAC,EACxBC,YAAY,EACZC,QAAQ,EACRC,KAAK,EACLC,IAAI,EACJC,sBAAsB,EACtBC,eAAe,EACfC,UAAU,EACVC,UAAU,EACVC,QAAQ,EACRC,2BAAAA,GAA8B,EAAE,EAChCC,cAAc,EACdC,QAAQ,EACc,GAAA;IACtB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAMC,aAAaC,mBAAQ,CAAA,kBAAA,EAAoB,CAACC,KAAAA,GAAUA,MAAMC,MAAM,CAAA;AACtE,IAAA,MAAM,EAAEC,eAAe,EAAEC,mBAAmB,EAAE,GAAGC,qCAAmB,CAAA,kBAAA,CAAA;AACpE,IAAA,MAAMC,WAAcC,GAAAA,6BAAAA,EAAAA;IAEpB,MAAM,EACJC,MAAM,EAAEC,UAAU,EAAE,EACrB,GAAGC,mCAAkBN,CAAAA,mBAAAA,CAAoBO,KAAK,CAAA;IAE/C,MAAMC,KAAAA,GAAQC,gBAAMC,CAAAA,OAAO,CAAC,IAAA;QAC1B,MAAM,EAAEC,SAAS,EAAE,GAAGN,UAAU,CAACxB,YAAAA,CAAa,EAAE+B,QAAY,IAAA;YAAED,SAAW,EAAA;AAAK,SAAA;AAE9E,QAAA,MAAME,cAAiBC,GAAAA,aAAAA,CAAMnB,UAAY,EAAA,CAAC,EAAEX,IAAAA,CAAK,CAAC,EAAED,KAAM,CAAA,CAAC,EAAE4B,SAAAA,CAAU,CAAC,CAAA;QAExE,MAAMI,cAAAA,GACJJ,cAAc,IAAQ,IAAA,CAACE,iBAAiB,EAAKG,GAAAA,MAAAA,CAAOH,gBAAgBI,IAAI,EAAA;QAE1E,MAAMC,SAAAA,GAAYH,cAAeI,CAAAA,MAAM,GAAG,CAAA,GAAI,CAAC,EAAE,EAAEJ,cAAe,CAAA,CAAC,GAAGA,cAAAA;QAEtE,OAAOG,SAAAA;KACN,EAAA;AAACrC,QAAAA,YAAAA;AAAcwB,QAAAA,UAAAA;AAAYV,QAAAA,UAAAA;AAAYX,QAAAA,IAAAA;AAAMD,QAAAA;AAAM,KAAA,CAAA;IAEtD,MAAM,EAAEqC,IAAI,EAAEC,WAAW,EAAE,GAAGZ,gBAAAA,CAAMC,OAAO,CAAC,IAAA;AAC1C,QAAA,MAAM,CAACY,QAAAA,CAAS,GAAGzC,YAAAA,CAAa0C,KAAK,CAAC,GAAA,CAAA;QACtC,MAAM,EAAEH,IAAI,EAAEC,WAAW,EAAE,GAAI/B,CAAAA,2BAA2B,CAACgC,QAAAA,CAAS,IAAI,EAAC,EAAGE,IAAI,CAC9E,CAACC,SAAcA,GAAAA,SAAAA,CAAUC,GAAG,KAAK7C,YAC9B,CAAA,IAAA;YAAEuC,IAAM,EAAA,IAAA;YAAMC,WAAa,EAAA;AAAK,SAAA;QAErC,OAAO;AAAED,YAAAA,IAAAA;AAAMC,YAAAA;AAAY,SAAA;KAC1B,EAAA;AAACxC,QAAAA,YAAAA;AAAcS,QAAAA;AAA4B,KAAA,CAAA;AAE9C,IAAA,MAAM,CAAC,EAAEqC,SAAS,EAAEC,UAAU,EAAEC,aAAa,EAAE,EAAEC,MAAAA,EAAQC,SAASC,OAASC,EAAAA,cAAAA,CAAe,GACxFC,6BAAAA,CAAe,CAACpD,QAAU,EAAA;QACxBqD,IAAM,EAAA,CAAC,EAAEC,qBAAUC,CAAAA,YAAY,CAAC,CAAC,EAAErD,KAAK,CAAC;AACzCD,QAAAA,KAAAA;QACAuD,IAAM,EAAA;AACJvD,YAAAA,KAAAA;AACAgC,YAAAA,cAAAA,EAAgB,CAAC,EAAEM,WAAAA,CAAY,CAAC,EAAEb,MAAM,CAAC;AACzCY,YAAAA;AACF,SAAA;QACAmB,UAAYrD,EAAAA,eAAAA;AACZE,QAAAA,UAAAA;AACAD,QAAAA,UAAAA;AACAE,QAAAA;AACF,KAAA,CAAA;AAEFoB,IAAAA,gBAAAA,CAAM+B,SAAS,CAAC,IAAA;AACdP,QAAAA,cAAAA,CAAeQ,kCAAiB,EAAA,EAAA;YAAEC,oBAAsB,EAAA;AAAM,SAAA,CAAA;KAC7D,EAAA;AAACT,QAAAA,cAAAA;AAAgBlD,QAAAA;AAAM,KAAA,CAAA;AAE1B;;;MAIA,MAAM4D,cAAiBlC,GAAAA,gBAAAA,CAAMmC,KAAK,EAAA;AAElC,IAAA,MAAM,EAAEC,KAAAA,GAAQ,EAAE,EAAEC,QAAQ,EAAE,GAAGC,oBAAS,CAAA,CAAC,EAAE/D,IAAAA,CAAK,CAAC,EAAED,MAAM,CAAC,CAAA;AAE5D,IAAA,MAAM,CAACiE,cAAgBC,EAAAA,iBAAAA,CAAkB,GAAGxC,gBAAAA,CAAMyC,QAAQ,CAAS,EAAA,CAAA;AAEnEzC,IAAAA,gBAAAA,CAAM+B,SAAS,CAAC,IAAA;AACd,QAAA,IAAIM,YAAYD,KAAO,EAAA;YACrBI,iBAAkBN,CAAAA,cAAAA,CAAAA;AACpB;KACC,EAAA;AAACG,QAAAA,QAAAA;AAAUD,QAAAA,KAAAA;AAAOF,QAAAA;AAAe,KAAA,CAAA;IAEpC,MAAMQ,eAAAA,GAAkBC,6BAAgBtB,MAAQC,EAAAA,OAAAA,CAAAA;IAEhD,MAAMsB,gBAAAA,GAAmBvE,WAAW,IAClC,iBAAAwE,eAAA,CAAAC,mBAAA,EAAA;;0BACEC,cAACC,CAAAA,uBAAAA,EAAAA;gBACCC,OAAQ,EAAA,OAAA;AACRC,gBAAAA,KAAAA,EAAOlE,aACL,CAAA;AACEmE,oBAAAA,EAAAA,EAAIC,2BAAe,CAAA,qCAAA,CAAA;oBACnBC,cAAgB,EAAA;iBAElB,EAAA;oBAAE9E,IAAMwB,EAAAA;AAAM,iBAAA,CAAA;gBAEhBuD,OAAS9E,EAAAA,sBAAAA;AAET,gBAAA,QAAA,gBAAAuE,cAACQ,CAAAA,WAAAA,EAAAA,EAAAA;;0BAEHR,cAACC,CAAAA,uBAAAA,EAAAA;gBACCC,OAAQ,EAAA,OAAA;gBACRK,OAAS,EAAA,CAACE,CAAMA,GAAAA,CAAAA,CAAEC,eAAe,EAAA;gBACjCC,iBAAiBxC,EAAAA,SAAAA;gBACjByC,GAAKpC,EAAAA,OAAAA;AACL2B,gBAAAA,KAAAA,EAAOlE,aAAc,CAAA;AACnBmE,oBAAAA,EAAAA,EAAIC,2BAAe,CAAA,6BAAA,CAAA;oBACnBC,cAAgB,EAAA;AAClB,iBAAA,CAAA;gBACAO,SAAWxC,EAAAA,aAAAA;AAEX,gBAAA,QAAA,gBAAA2B,cAACc,CAAAA,UAAAA,EAAAA,EAAAA;;AAEH,0BAAAhB,eAAA,CAACiB,kBAAKC,IAAI,EAAA;;AACR,kCAAAhB,cAAA,CAACe,kBAAKE,OAAO,EAAA;wBAACC,IAAK,EAAA,GAAA;wBAAIC,OAAS,EAAA,IAAA;wBAAMC,WAAa,EAAA,CAAA;wBAAGC,YAAc,EAAA,CAAA;AAClE,wBAAA,QAAA,gBAAArB,cAACC,CAAAA,uBAAAA,EAAAA;4BACCC,OAAQ,EAAA,OAAA;AACRC,4BAAAA,KAAAA,EAAOlE,aAAc,CAAA;AACnBmE,gCAAAA,EAAAA,EAAIC,2BAAe,CAAA,qCAAA,CAAA;gCACnBC,cAAgB,EAAA;AAClB,6BAAA,CAAA;4BACAgB,GAAI,EAAA,MAAA;AAEJ,4BAAA,QAAA,gBAAAtB,cAACuB,CAAAA,UAAAA,EAAAA;gCAAKC,aAAW,EAAA,IAAA;gCAACC,SAAW,EAAA;;;;AAGjC,kCAAA3B,eAAA,CAACiB,kBAAKW,OAAO,EAAA;;AACX,0CAAA5B,eAAA,CAACiB,kBAAKY,OAAO,EAAA;;AACX,kDAAA3B,cAAA,CAACe,kBAAKa,UAAU,EAAA;kDACb3F,aAAc,CAAA;AACbmE,4CAAAA,EAAAA,EAAIC,2BAAe,CAAA,uCAAA,CAAA;4CACnBC,cAAgB,EAAA;AAClB,yCAAA;;AAEF,kDAAAN,cAAA,CAACe,kBAAKc,UAAU,EAAA;AACbC,wCAAAA,QAAAA,EAAAA,MAAAA,CAAOC,OAAO,CAACjG,2BAA6BkG,CAAAA,CAAAA,GAAG,CAAC,CAAC,CAAClE,QAAAA,EAAUjB,UAAW,CAAA,iBACtEiD,eAAC7C,CAAAA,gBAAAA,CAAMgF,QAAQ,EAAA;;AACb,kEAAAjC,cAAA,CAACe,kBAAKmB,KAAK,EAAA;AAAEpE,wDAAAA,QAAAA,EAAAA;;oDACZjB,UAAWmF,CAAAA,GAAG,CAAC,CAAC,EAAEnE,WAAW,EAAEK,GAAG,EAAE,iBACnC8B,cAACe,CAAAA,iBAAAA,CAAKoB,IAAI,EAAA;4DAAoBC,QAAU,EAAA,IAAMrG,eAAemC,GAAK3C,EAAAA,KAAAA,CAAAA;AAC/DsC,4DAAAA,QAAAA,EAAAA;AADaxC,yDAAAA,EAAAA,YAAAA,CAAAA;;AAHCyC,6CAAAA,EAAAA,QAAAA,CAAAA;;;;AAW3B,0CAAAgC,eAAA,CAACiB,kBAAKY,OAAO,EAAA;;AACX,kDAAA3B,cAAA,CAACe,kBAAKa,UAAU,EAAA;kDACb3F,aAAc,CAAA;AACbmE,4CAAAA,EAAAA,EAAIC,2BAAe,CAAA,uCAAA,CAAA;4CACnBC,cAAgB,EAAA;AAClB,yCAAA;;AAEF,kDAAAN,cAAA,CAACe,kBAAKc,UAAU,EAAA;AACbC,wCAAAA,QAAAA,EAAAA,MAAAA,CAAOC,OAAO,CAACjG,2BAA6BkG,CAAAA,CAAAA,GAAG,CAAC,CAAC,CAAClE,QAAAA,EAAUjB,UAAW,CAAA,iBACtEiD,eAAC7C,CAAAA,gBAAAA,CAAMgF,QAAQ,EAAA;;AACb,kEAAAjC,cAAA,CAACe,kBAAKmB,KAAK,EAAA;AAAEpE,wDAAAA,QAAAA,EAAAA;;oDACZjB,UAAWmF,CAAAA,GAAG,CAAC,CAAC,EAAEnE,WAAW,EAAEK,GAAG,EAAE,iBACnC8B,cAACe,CAAAA,iBAAAA,CAAKoB,IAAI,EAAA;4DAAoBC,QAAU,EAAA,IAAMrG,cAAemC,CAAAA,GAAAA,EAAK3C,KAAQ,GAAA,CAAA,CAAA;AACvEsC,4DAAAA,QAAAA,EAAAA;AADaxC,yDAAAA,EAAAA,YAAAA,CAAAA;;AAHCyC,6CAAAA,EAAAA,QAAAA,CAAAA;;;;;;;;;;IAgBnC,MAAMuE,cAAAA,GAAiBrF,QAAQ,CAAC,EAAEa,YAAY,CAAC,EAAEb,KAAM,CAAA,CAAC,GAAGa,WAAAA;AAE3D,IAAA,qBACEiC,eAACwC,CAAAA,kBAAAA,EAAAA;QAAmBhB,GAAI,EAAA,IAAA;QAAKiB,KAAM,EAAA,MAAA;;0BACjCvC,cAACwC,CAAAA,iBAAAA,EAAAA;gBAAKC,cAAe,EAAA,QAAA;AACnB,gBAAA,QAAA,gBAAAzC,cAAC0C,CAAAA,SAAAA,EAAAA;oBAAUC,UAAW,EAAA;;;0BAExB3C,cAAC4C,CAAAA,SAAAA,EAAAA;gBAAUhC,GAAKjB,EAAAA,eAAAA;gBAAiBkD,SAAS,EAAA,IAAA;AACvCzE,gBAAAA,QAAAA,EAAAA,UAAAA,iBACC4B,cAAC8C,CAAAA,OAAAA,EAAAA,EAAAA,CAAAA,iBAED9C,cAAC+C,CAAAA,sBAAAA,CAAU/B,IAAI,EAAA;oBAAC3B,KAAOG,EAAAA,cAAAA;oBAAgBwD,aAAevD,EAAAA,iBAAAA;4CACpDK,eAAA,CAACiD,uBAAUZ,IAAI,EAAA;wBAAC9C,KAAOF,EAAAA,cAAAA;;AACrB,0CAAAW,eAAA,CAACiD,uBAAUE,MAAM,EAAA;;AACf,kDAAAjD,cAAA,CAAC+C,uBAAU9B,OAAO,EAAA;wCAChBrD,IACEA,EAAAA,IAAAA,IAAQsF,6BAAe,CAACtF,IAAK,CAAA,GACzBsF,6BAAe,CAACtF,IAAAA,CAAK,GACrBsF,6BAAAA,CAAgBC,SAAS;AAG9Bd,wCAAAA,QAAAA,EAAAA;;AAEH,kDAAArC,cAAA,CAAC+C,uBAAUK,OAAO,EAAA;AAAEvD,wCAAAA,QAAAA,EAAAA;;;;AAEtB,0CAAAG,cAAA,CAAC+C,uBAAUrB,OAAO,EAAA;AAChB,gCAAA,QAAA,gBAAA1B,cAACqD,CAAAA,sBAAAA,EAAAA;oCAAuBV,UAAW,EAAA,UAAA;AACjC,oCAAA,QAAA,gBAAA3C,cAACsD,CAAAA,gBAAAA,EAAAA;wCAAIlC,WAAa,EAAA,CAAA;wCAAGC,YAAc,EAAA,CAAA;wCAAGkC,UAAY,EAAA,CAAA;wCAAGC,aAAe,EAAA,CAAA;gEAClExD,cAAA,CAACyD,kBAAKzC,IAAI,EAAA;4CAAC0C,GAAK,EAAA,CAAA;AACb7G,4CAAAA,QAAAA,EAAAA,UAAU,CAACxB,YAAa,CAAA,EAAEsI,MAAQ3B,EAAAA,GAAAA,CAAI,CAAC4B,GAAKC,EAAAA,MAAAA,GAAAA;AAC3C,gDAAA,MAAMC,gBAAgBF,GAAIG,CAAAA,MAAM,CAAC,CAAC,EAAE,GAAGC,KAAO,EAAA,GAAA;AAC5C,oDAAA,MAAMC,SAAYD,GAAAA,KAAAA,CAAME,SAAS,CAACC,UAAU,EAAEC,OAAAA;AAE9C,oDAAA,IAAIH,SAAW,EAAA;wDACb,OAAOvH,WAAAA,CAAY2H,QAAQ,CAACJ,SAAW5E,EAAAA,KAAAA,CAAAA;AACzC;oDAEA,OAAO,IAAA;AACT,iDAAA,CAAA;gDAEA,IAAIyE,aAAAA,CAAcnG,MAAM,KAAK,CAAG,EAAA;AAC9B,oDAAA,OAAO;AACT;gDACA,qBACEqC,cAAA,CAACyD,kBAAKtB,IAAI,EAAA;oDACRmC,GAAK,EAAA,EAAA;oDAELC,CAAG,EAAA,EAAA;oDACHC,EAAI,EAAA,EAAA;oDACJC,SAAU,EAAA,QAAA;oDACVC,UAAW,EAAA,SAAA;AAEX,oDAAA,QAAA,gBAAA1E,cAAC2E,CAAAA,6BAAAA,EAAAA;wDAAmBjB,GAAK,EAAA,CAAA;AACtBI,wDAAAA,QAAAA,EAAAA,aAAAA,CAAc9B,GAAG,CAAC,CAAC,EAAEd,IAAI,EAAE,GAAG8C,KAAO,EAAA,GAAA;AACpC,4DAAA,MAAMY,SAAY,GAAA,CAAC,EAAEpJ,IAAAA,CAAK,CAAC,EAAED,KAAM,CAAA,CAAC,EAAEyI,KAAAA,CAAMxI,IAAI,CAAC,CAAC;AAElD,4DAAA,MAAMqJ,wBAA2B,GAAA;AAC/B,gEAAA,GAAGb,KAAK;AACR7D,gEAAAA,KAAAA,EAAOlE,aAAc,CAAA;oEACnBmE,EAAI,EAAA,CAAC,2BAA2B,EAAE/E,YAAAA,CAAa,CAAC,EAAE2I,KAAAA,CAAMxI,IAAI,CAAC,CAAC;AAC9D8E,oEAAAA,cAAAA,EAAgB0D,MAAM7D;AACxB,iEAAA;AACF,6DAAA;AAEA,4DAAA,qBACEH,cAAC8E,CAAAA,6BAAAA,EAAAA;gEACCR,GAAKpD,EAAAA,IAAAA;gEAELqD,CAAG,EAAA,EAAA;gEACHC,EAAI,EAAA,EAAA;gEACJC,SAAU,EAAA,QAAA;gEACVC,UAAW,EAAA,SAAA;AAEV1I,gEAAAA,QAAAA,EAAAA,QAAAA,GACCA,QAAS,CAAA;AACP,oEAAA,GAAG6I,wBAAwB;oEAC3BE,QAAUxI,EAAAA,eAAAA;oEACVf,IAAMoJ,EAAAA;AACR,iEAAA,CAAA,iBAEA5E,cAACgF,CAAAA,2BAAAA,EAAAA;AACE,oEAAA,GAAGH,wBAAwB;oEAC5BE,QAAUxI,EAAAA,eAAAA;oEACVf,IAAMoJ,EAAAA;;AAhBLA,6DAAAA,EAAAA,SAAAA,CAAAA;AAqBX,yDAAA;;AA1CGf,iDAAAA,EAAAA,MAAAA,CAAAA;AA8CX,6CAAA;;;;;;;;;;;AAWtB;AAEA;AACA;AACA,MAAMjB,SAAAA,GAAYqC,uBAAqB3B,CAAAA,gBAAAA,CAAI;;gBAE3B,EAAE,CAAC,EAAE4B,KAAK,EAAE,GAAKA,KAAMC,CAAAA,OAAO,CAACC,WAAW,CAAC;;AAE3D,CAAC;AAED,MAAM/B,sBAAAA,GAAyB4B,uBAAqB3B,CAAAA,gBAAAA,CAAI;qBACnC,EAAE,CAAC,EAAE4B,KAAK,EAAE,GAAKA,KAAMG,CAAAA,MAAM,CAAC,CAAE,CAAA,CAAC,CAAC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAMG,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;AACxF,CAAC;AAED,MAAM3C,SAAAA,GAAYuC,uBAAqB3B,CAAAA,gBAAAA,CAAI;SAClC,EAAE,CAAC,EAAE4B,KAAK,EAAE,GAAKA,KAAMG,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;UAChC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAMG,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;AAC3C,CAAC;AAED,MAAMvC,OAAAA,GAAUmC,uBAAOK,CAAAA,IAAI;;oBAEP,EAAE,CAAC,EAAEJ,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAACC,UAAU,CAAC;sBACvC,EAAE,CAAC,EAAEN,KAAK,EAAE,GAAKA,KAAMK,CAAAA,MAAM,CAACE,UAAU,CAAC;;WAEpD,EAAE,CAAC,EAAEP,KAAK,EAAE,GAAKA,KAAMG,CAAAA,MAAM,CAAC,CAAA,CAAE,CAAC;AAC5C,CAAC;AAED,MAAM/C,kBAAAA,GAAqB2C,uBAA2B3B,CAAAA,gBAAAA,CAAI;;;;AAI1D,CAAC;;;;"}

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

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useForm, useField } from '@strapi/admin/strapi-admin';
+import { useForm, createRulesEngine, useField } from '@strapi/admin/strapi-admin';
 import { Box, useComposedRefs, IconButton, Menu, Flex, Accordion, Grid } from '@strapi/design-system';
 import { Trash, Drag, More } from '@strapi/icons';
 import { getEmptyImage } from 'react-dnd-html5-backend';
@@ -20,6 +20,7 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
     const { formatMessage } = useIntl();
     const formValues = useForm('DynamicComponent', (state)=>state.values);
     const { currentDocument, currentDocumentMeta } = useDocumentContext('DynamicComponent');
+    const rulesEngine = createRulesEngine();
     const { edit: { components } } = useDocumentLayout(currentDocumentMeta.model);
     const title = React.useMemo(()=>{
         const { mainField } = components[componentUid]?.settings ?? {
@@ -227,7 +228,18 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                         paddingBottom: 6,
                                         children: /*#__PURE__*/ jsx(Grid.Root, {
                                             gap: 4,
-                                            children: components[componentUid]?.layout?.map((row, rowInd)=>/*#__PURE__*/ jsx(Grid.Item, {
+                                            children: components[componentUid]?.layout?.map((row, rowInd)=>{
+                                                const visibleFields = row.filter(({ ...field })=>{
+                                                    const condition = field.attribute.conditions?.visible;
+                                                    if (condition) {
+                                                        return rulesEngine.evaluate(condition, value);
+                                                    }
+                                                    return true;
+                                                });
+                                                if (visibleFields.length === 0) {
+                                                    return null; // Skip rendering the entire grid row
+                                                }
+                                                return /*#__PURE__*/ jsx(Grid.Item, {
                                                     col: 12,
                                                     s: 12,
                                                     xs: 12,
@@ -235,7 +247,7 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                                     alignItems: "stretch",
                                                     children: /*#__PURE__*/ jsx(ResponsiveGridRoot, {
                                                         gap: 4,
-                                                        children: row.map(({ size, ...field })=>{
+                                                        children: visibleFields.map(({ size, ...field })=>{
                                                             const fieldName = `${name}.${index}.${field.name}`;
                                                             const fieldWithTranslatedLabel = {
                                                                 ...field,
@@ -262,7 +274,8 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                                                             }, fieldName);
                                                         })
                                                     })
-                                                }, rowInd))
+                                                }, rowInd);
+                                            })
                                         })
                                     })
                                 })

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, useField } 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 } 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 { 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: () => void;\n  onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n  children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicComponent = ({\n  componentUid,\n  disabled,\n  index,\n  name,\n  onRemoveComponentClick,\n  onMoveComponent,\n  onGrabItem,\n  onDropItem,\n  onCancel,\n  dynamicComponentsByCategory = {},\n  onAddComponent,\n  children,\n}: DynamicComponentProps) => {\n  const { formatMessage } = useIntl();\n  const formValues = useForm('DynamicComponent', (state) => state.values);\n  const { currentDocument, currentDocumentMeta } = useDocumentContext('DynamicComponent');\n\n  const {\n    edit: { components },\n  } = useDocumentLayout(currentDocumentMeta.model);\n\n  const title = React.useMemo(() => {\n    const { mainField } = components[componentUid]?.settings ?? { mainField: 'id' };\n\n    const mainFieldValue = getIn(formValues, `${name}.${index}.${mainField}`);\n\n    const displayedValue =\n      mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();\n\n    const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n    return mainValue;\n  }, [componentUid, components, formValues, name, index]);\n\n  const { icon, displayName } = React.useMemo(() => {\n    const [category] = componentUid.split('.');\n    const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n      (component) => component.uid === componentUid\n    ) ?? { icon: null, displayName: null };\n\n    return { icon, displayName };\n  }, [componentUid, dynamicComponentsByCategory]);\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n      index,\n      item: {\n        index,\n        displayedValue: `${displayName} ${title}`,\n        icon,\n      },\n      onMoveItem: onMoveComponent,\n      onDropItem,\n      onGrabItem,\n      onCancel,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  /**\n   * We don't need the accordion's to communicate with each other,\n   * so a unique value for their state is enough.\n   */\n  const accordionValue = React.useId();\n\n  const { value = [], rawError } = useField(`${name}.${index}`);\n\n  const [collapseToOpen, setCollapseToOpen] = React.useState<string>('');\n\n  React.useEffect(() => {\n    if (rawError && value) {\n      setCollapseToOpen(accordionValue);\n    }\n  }, [rawError, value, accordionValue]);\n\n  const composedBoxRefs = useComposedRefs(boxRef, dropRef);\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: title }\n        )}\n        onClick={onRemoveComponentClick}\n      >\n        <Trash />\n      </IconButton>\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      <Menu.Root>\n        <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n          <IconButton\n            variant=\"ghost\"\n            label={formatMessage({\n              id: getTranslation('components.DynamicZone.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            tag=\"span\"\n          >\n            <More aria-hidden focusable={false} />\n          </IconButton>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-above'),\n                defaultMessage: 'Add component above',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={componentUid} onSelect={() => onAddComponent(uid, index)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-below'),\n                defaultMessage: 'Add component below',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={componentUid} onSelect={() => onAddComponent(uid, index + 1)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n        </Menu.Content>\n      </Menu.Root>\n    </>\n  );\n\n  const accordionTitle = title ? `${displayName} ${title}` : displayName;\n\n  return (\n    <ComponentContainer tag=\"li\" width=\"100%\">\n      <Flex justifyContent=\"center\">\n        <Rectangle background=\"neutral200\" />\n      </Flex>\n      <StyledBox ref={composedBoxRefs} hasRadius>\n        {isDragging ? (\n          <Preview />\n        ) : (\n          <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\n            <Accordion.Item value={accordionValue}>\n              <Accordion.Header>\n                <Accordion.Trigger\n                  icon={\n                    icon && COMPONENT_ICONS[icon]\n                      ? COMPONENT_ICONS[icon]\n                      : COMPONENT_ICONS.dashboard\n                  }\n                >\n                  {accordionTitle}\n                </Accordion.Trigger>\n                <Accordion.Actions>{accordionActions}</Accordion.Actions>\n              </Accordion.Header>\n              <Accordion.Content>\n                <AccordionContentRadius background=\"neutral0\">\n                  <Box paddingLeft={6} paddingRight={6} paddingTop={6} paddingBottom={6}>\n                    <Grid.Root gap={4}>\n                      {components[componentUid]?.layout?.map((row, rowInd) => (\n                        <Grid.Item\n                          col={12}\n                          key={rowInd}\n                          s={12}\n                          xs={12}\n                          direction=\"column\"\n                          alignItems=\"stretch\"\n                        >\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                                      document: currentDocument,\n                                      name: fieldName,\n                                    })\n                                  ) : (\n                                    <InputRenderer\n                                      {...fieldWithTranslatedLabel}\n                                      document={currentDocument}\n                                      name={fieldName}\n                                    />\n                                  )}\n                                </ResponsiveGridItem>\n                              );\n                            })}\n                          </ResponsiveGridRoot>\n                        </Grid.Item>\n                      ))}\n                    </Grid.Root>\n                  </Box>\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\nexport { DynamicComponent };\nexport type { DynamicComponentProps };\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","children","formatMessage","useIntl","formValues","useForm","state","values","currentDocument","currentDocumentMeta","useDocumentContext","edit","components","useDocumentLayout","model","title","React","useMemo","mainField","settings","mainFieldValue","getIn","displayedValue","String","trim","mainValue","length","icon","displayName","category","split","find","component","uid","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","value","rawError","useField","collapseToOpen","setCollapseToOpen","useState","composedBoxRefs","useComposedRefs","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","id","getTranslation","defaultMessage","onClick","Trash","e","stopPropagation","data-handler-id","ref","onKeyDown","Drag","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","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","Box","paddingTop","paddingBottom","Grid","gap","layout","row","rowInd","col","s","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","document","InputRenderer","styled","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500"],"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, useField, createRulesEngine } 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 } 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 { 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: () => void;\n  onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n  children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicComponent = ({\n  componentUid,\n  disabled,\n  index,\n  name,\n  onRemoveComponentClick,\n  onMoveComponent,\n  onGrabItem,\n  onDropItem,\n  onCancel,\n  dynamicComponentsByCategory = {},\n  onAddComponent,\n  children,\n}: DynamicComponentProps) => {\n  const { formatMessage } = useIntl();\n  const formValues = useForm('DynamicComponent', (state) => state.values);\n  const { currentDocument, currentDocumentMeta } = useDocumentContext('DynamicComponent');\n  const rulesEngine = createRulesEngine();\n\n  const {\n    edit: { components },\n  } = useDocumentLayout(currentDocumentMeta.model);\n\n  const title = React.useMemo(() => {\n    const { mainField } = components[componentUid]?.settings ?? { mainField: 'id' };\n\n    const mainFieldValue = getIn(formValues, `${name}.${index}.${mainField}`);\n\n    const displayedValue =\n      mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();\n\n    const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n    return mainValue;\n  }, [componentUid, components, formValues, name, index]);\n\n  const { icon, displayName } = React.useMemo(() => {\n    const [category] = componentUid.split('.');\n    const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n      (component) => component.uid === componentUid\n    ) ?? { icon: null, displayName: null };\n\n    return { icon, displayName };\n  }, [componentUid, dynamicComponentsByCategory]);\n\n  const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n    useDragAndDrop(!disabled, {\n      type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n      index,\n      item: {\n        index,\n        displayedValue: `${displayName} ${title}`,\n        icon,\n      },\n      onMoveItem: onMoveComponent,\n      onDropItem,\n      onGrabItem,\n      onCancel,\n    });\n\n  React.useEffect(() => {\n    dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n  }, [dragPreviewRef, index]);\n\n  /**\n   * We don't need the accordion's to communicate with each other,\n   * so a unique value for their state is enough.\n   */\n  const accordionValue = React.useId();\n\n  const { value = [], rawError } = useField(`${name}.${index}`);\n\n  const [collapseToOpen, setCollapseToOpen] = React.useState<string>('');\n\n  React.useEffect(() => {\n    if (rawError && value) {\n      setCollapseToOpen(accordionValue);\n    }\n  }, [rawError, value, accordionValue]);\n\n  const composedBoxRefs = useComposedRefs(boxRef, dropRef);\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: title }\n        )}\n        onClick={onRemoveComponentClick}\n      >\n        <Trash />\n      </IconButton>\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      <Menu.Root>\n        <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n          <IconButton\n            variant=\"ghost\"\n            label={formatMessage({\n              id: getTranslation('components.DynamicZone.more-actions'),\n              defaultMessage: 'More actions',\n            })}\n            tag=\"span\"\n          >\n            <More aria-hidden focusable={false} />\n          </IconButton>\n        </Menu.Trigger>\n        <Menu.Content>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-above'),\n                defaultMessage: 'Add component above',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={componentUid} onSelect={() => onAddComponent(uid, index)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n          <Menu.SubRoot>\n            <Menu.SubTrigger>\n              {formatMessage({\n                id: getTranslation('components.DynamicZone.add-item-below'),\n                defaultMessage: 'Add component below',\n              })}\n            </Menu.SubTrigger>\n            <Menu.SubContent>\n              {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n                <React.Fragment key={category}>\n                  <Menu.Label>{category}</Menu.Label>\n                  {components.map(({ displayName, uid }) => (\n                    <Menu.Item key={componentUid} onSelect={() => onAddComponent(uid, index + 1)}>\n                      {displayName}\n                    </Menu.Item>\n                  ))}\n                </React.Fragment>\n              ))}\n            </Menu.SubContent>\n          </Menu.SubRoot>\n        </Menu.Content>\n      </Menu.Root>\n    </>\n  );\n\n  const accordionTitle = title ? `${displayName} ${title}` : displayName;\n\n  return (\n    <ComponentContainer tag=\"li\" width=\"100%\">\n      <Flex justifyContent=\"center\">\n        <Rectangle background=\"neutral200\" />\n      </Flex>\n      <StyledBox ref={composedBoxRefs} hasRadius>\n        {isDragging ? (\n          <Preview />\n        ) : (\n          <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\n            <Accordion.Item value={accordionValue}>\n              <Accordion.Header>\n                <Accordion.Trigger\n                  icon={\n                    icon && COMPONENT_ICONS[icon]\n                      ? COMPONENT_ICONS[icon]\n                      : COMPONENT_ICONS.dashboard\n                  }\n                >\n                  {accordionTitle}\n                </Accordion.Trigger>\n                <Accordion.Actions>{accordionActions}</Accordion.Actions>\n              </Accordion.Header>\n              <Accordion.Content>\n                <AccordionContentRadius background=\"neutral0\">\n                  <Box paddingLeft={6} paddingRight={6} paddingTop={6} paddingBottom={6}>\n                    <Grid.Root gap={4}>\n                      {components[componentUid]?.layout?.map((row, rowInd) => {\n                        const visibleFields = row.filter(({ ...field }) => {\n                          const condition = field.attribute.conditions?.visible;\n\n                          if (condition) {\n                            return rulesEngine.evaluate(condition, value);\n                          }\n\n                          return true;\n                        });\n\n                        if (visibleFields.length === 0) {\n                          return null; // Skip rendering the entire grid row\n                        }\n                        return (\n                          <Grid.Item\n                            col={12}\n                            key={rowInd}\n                            s={12}\n                            xs={12}\n                            direction=\"column\"\n                            alignItems=\"stretch\"\n                          >\n                            <ResponsiveGridRoot gap={4}>\n                              {visibleFields.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                                        document: currentDocument,\n                                        name: fieldName,\n                                      })\n                                    ) : (\n                                      <InputRenderer\n                                        {...fieldWithTranslatedLabel}\n                                        document={currentDocument}\n                                        name={fieldName}\n                                      />\n                                    )}\n                                  </ResponsiveGridItem>\n                                );\n                              })}\n                            </ResponsiveGridRoot>\n                          </Grid.Item>\n                        );\n                      })}\n                    </Grid.Root>\n                  </Box>\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\nexport { DynamicComponent };\nexport type { DynamicComponentProps };\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","children","formatMessage","useIntl","formValues","useForm","state","values","currentDocument","currentDocumentMeta","useDocumentContext","rulesEngine","createRulesEngine","edit","components","useDocumentLayout","model","title","React","useMemo","mainField","settings","mainFieldValue","getIn","displayedValue","String","trim","mainValue","length","icon","displayName","category","split","find","component","uid","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","value","rawError","useField","collapseToOpen","setCollapseToOpen","useState","composedBoxRefs","useComposedRefs","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","id","getTranslation","defaultMessage","onClick","Trash","e","stopPropagation","data-handler-id","ref","onKeyDown","Drag","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","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","Box","paddingTop","paddingBottom","Grid","gap","layout","row","rowInd","visibleFields","filter","field","condition","attribute","conditions","visible","evaluate","col","s","xs","direction","alignItems","ResponsiveGridRoot","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","document","InputRenderer","styled","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/Relations/Relations.js

@@ -13,8 +13,6 @@ var reactWindow = require('react-window');
 var styledComponents = require('styled-components');
 var collections = require('../../../../../constants/collections.js');
 var dragAndDrop = require('../../../../../constants/dragAndDrop.js');
-var plugin = require('../../../../../constants/plugin.js');
-var DocumentRBAC = require('../../../../../features/DocumentRBAC.js');
 var useDebounce = require('../../../../../hooks/useDebounce.js');
 var useDocument = require('../../../../../hooks/useDocument.js');
 var useDocumentContext = require('../../../../../hooks/useDocumentContext.js');
@@ -330,6 +328,7 @@ const ONE_WAY_RELATIONS = [
  * @description Contains all the logic for the combobox that can search
  * for relations and then add them to the field's connect array.
  */ const RelationsInput = ({ hint, id, model, label, labelAction, name, mainField, placeholder, required, unique: _unique, 'aria-label': _ariaLabel, onChange, isRelatedToCurrentDocument, ...props })=>{
+    const [textValue, setTextValue] = React__namespace.useState('');
     const [searchParams, setSearchParams] = React__namespace.useState({
         _q: '',
         page: 1
@@ -337,6 +336,7 @@ const ONE_WAY_RELATIONS = [
     const { toggleNotification } = strapiAdmin.useNotification();
     const { currentDocumentMeta } = useDocumentContext.useDocumentContext('RelationsInput');
     const { formatMessage } = reactIntl.useIntl();
+    const fieldRef = strapiAdmin.useFocusInputField(name);
     const field = strapiAdmin.useField(name);
     const searchParamsDebounced = useDebounce.useDebounce(searchParams, 300);
     const [searchForTrigger, { data, isLoading }] = relations.useLazySearchRelationsQuery();
@@ -377,6 +377,13 @@ const ONE_WAY_RELATIONS = [
         isRelatedToCurrentDocument,
         currentDocumentMeta.params
     ]);
+    const handleSearch = async (search)=>{
+        setSearchParams((s)=>({
+                ...s,
+                _q: search,
+                page: 1
+            }));
+    };
     const hasNextPage = data?.pagination ? data.pagination.page < data.pagination.pageCount : false;
     const options = data?.results ?? [];
     const handleChange = (relationId)=>{
@@ -404,6 +411,21 @@ const ONE_WAY_RELATIONS = [
      *
      */ onChange(relation);
     };
+    const handleLoadMore = ()=>{
+        if (!data || !data.pagination) {
+            return;
+        } else if (data.pagination.page < data.pagination.pageCount) {
+            setSearchParams((s)=>({
+                    ...s,
+                    page: s.page + 1
+                }));
+        }
+    };
+    React__namespace.useLayoutEffect(()=>{
+        setTextValue('');
+    }, [
+        field.value
+    ]);
     const relation = {
         collectionType: collections.COLLECTION_TYPES,
         // @ts-expect-error – targetModel does exist on the attribute. But it's not typed.
@@ -411,26 +433,9 @@ const ONE_WAY_RELATIONS = [
         documentId: '',
         params: currentDocumentMeta.params
     };
-    const { permissions = [], isLoading: isLoadingPermissions, error } = strapiAdmin.useRBAC(plugin.PERMISSIONS.map((action)=>({
-            action,
-            subject: relation.model
-        })));
-    if (error) {
-        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-            alignItems: "center",
-            height: "100%",
-            justifyContent: "center",
-            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.EmptyStateLayout, {
-                icon: /*#__PURE__*/ jsxRuntime.jsx(Icons.WarningCircle, {
-                    width: "16rem"
-                }),
-                content: formatMessage({
-                    id: 'anErrorOccurred',
-                    defaultMessage: 'Whoops! Something went wrong. Please, try again.'
-                })
-            })
-        });
-    }
+    const { componentUID } = ComponentContext.useComponent('RelationsField', ({ uid })=>({
+            componentUID: uid
+        }));
     return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
         error: field.error,
         hint: hint,
@@ -441,143 +446,90 @@ const ONE_WAY_RELATIONS = [
                 action: labelAction,
                 children: label
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(DocumentRBAC.DocumentRBAC, {
-                permissions: permissions,
-                model: relation.model,
-                children: /*#__PURE__*/ jsxRuntime.jsx(RelationModalWithContext, {
-                    relation: relation,
-                    name: name,
-                    placeholder: placeholder,
-                    hasNextPage: hasNextPage,
-                    isLoadingPermissions: isLoadingPermissions,
-                    isLoadingSearchRelations: isLoading,
-                    handleChange: handleChange,
-                    setSearchParams: setSearchParams,
-                    data: data,
-                    mainField: mainField,
-                    fieldValue: field.value,
-                    ...props
-                })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {}),
-            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Hint, {})
-        ]
-    });
-};
-const RelationModalWithContext = ({ relation, name, placeholder, hasNextPage, isLoadingSearchRelations, isLoadingPermissions, handleChange, mainField, setSearchParams, fieldValue, data, ...props })=>{
-    const [textValue, setTextValue] = React__namespace.useState('');
-    const { formatMessage } = reactIntl.useIntl();
-    const canCreate = DocumentRBAC.useDocumentRBAC('RelationModalWrapper', (state)=>state.canCreate);
-    const fieldRef = strapiAdmin.useFocusInputField(name);
-    const { componentUID } = ComponentContext.useComponent('RelationsField', ({ uid })=>({
-            componentUID: uid
-        }));
-    const handleLoadMore = ()=>{
-        if (!data || !data.pagination) {
-            return;
-        } else if (data.pagination.page < data.pagination.pageCount) {
-            setSearchParams((s)=>({
-                    ...s,
-                    page: s.page + 1
-                }));
-        }
-    };
-    const options = data?.results ?? [];
-    React__namespace.useLayoutEffect(()=>{
-        setTextValue('');
-    }, [
-        fieldValue
-    ]);
-    const handleSearch = async (search)=>{
-        setSearchParams((s)=>({
-                ...s,
-                _q: search,
-                page: 1
-            }));
-    };
-    return /*#__PURE__*/ jsxRuntime.jsx(RelationModal.RelationModalRenderer, {
-        children: ({ dispatch })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Combobox, {
-                ref: fieldRef,
-                creatable: "visible",
-                creatableDisabled: !canCreate,
-                createMessage: ()=>formatMessage({
-                        id: translations.getTranslation('relation.create'),
-                        defaultMessage: 'Create a relation'
-                    }),
-                onCreateOption: ()=>{
-                    if (canCreate) {
-                        dispatch({
-                            type: 'GO_TO_RELATION',
-                            payload: {
-                                document: relation,
-                                shouldBypassConfirmation: false,
-                                fieldToConnect: name,
-                                fieldToConnectUID: componentUID
-                            }
-                        });
-                    }
-                },
-                creatableStartIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Plus, {
-                    fill: "neutral500"
-                }),
-                name: name,
-                autocomplete: "list",
-                placeholder: placeholder || formatMessage({
-                    id: translations.getTranslation('relation.add'),
-                    defaultMessage: 'Add relation'
-                }),
-                hasMoreItems: hasNextPage,
-                loading: isLoadingSearchRelations || isLoadingPermissions,
-                onOpenChange: ()=>{
-                    handleSearch(textValue ?? '');
-                },
-                noOptionsMessage: ()=>formatMessage({
-                        id: translations.getTranslation('relation.notAvailable'),
-                        defaultMessage: 'No relations available'
-                    }),
-                loadingMessage: formatMessage({
-                    id: translations.getTranslation('relation.isLoading'),
-                    defaultMessage: 'Relations are loading'
-                }),
-                onLoadMore: handleLoadMore,
-                textValue: textValue,
-                onChange: handleChange,
-                onTextValueChange: (text)=>{
-                    setTextValue(text);
-                },
-                onInputChange: (event)=>{
-                    handleSearch(event.currentTarget.value);
-                },
-                ...props,
-                children: options?.map((opt)=>{
-                    const textValue = relations$1.getRelationLabel(opt, mainField);
-                    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.ComboboxOption, {
-                        value: opt.id.toString(),
+            /*#__PURE__*/ jsxRuntime.jsx(RelationModal.RelationModalRenderer, {
+                children: ({ dispatch })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Combobox, {
+                        ref: fieldRef,
+                        creatable: "visible",
+                        createMessage: ()=>formatMessage({
+                                id: translations.getTranslation('relation.create'),
+                                defaultMessage: 'Create a relation'
+                            }),
+                        onCreateOption: ()=>{
+                            dispatch({
+                                type: 'GO_TO_RELATION',
+                                payload: {
+                                    document: relation,
+                                    shouldBypassConfirmation: false,
+                                    fieldToConnect: name,
+                                    fieldToConnectUID: componentUID
+                                }
+                            });
+                        },
+                        creatableStartIcon: /*#__PURE__*/ jsxRuntime.jsx(Icons.Plus, {
+                            fill: "neutral500"
+                        }),
+                        name: name,
+                        autocomplete: "list",
+                        placeholder: placeholder || formatMessage({
+                            id: translations.getTranslation('relation.add'),
+                            defaultMessage: 'Add relation'
+                        }),
+                        hasMoreItems: hasNextPage,
+                        loading: isLoading,
+                        onOpenChange: ()=>{
+                            handleSearch(textValue ?? '');
+                        },
+                        noOptionsMessage: ()=>formatMessage({
+                                id: translations.getTranslation('relation.notAvailable'),
+                                defaultMessage: 'No relations available'
+                            }),
+                        loadingMessage: formatMessage({
+                            id: translations.getTranslation('relation.isLoading'),
+                            defaultMessage: 'Relations are loading'
+                        }),
+                        onLoadMore: handleLoadMore,
                         textValue: textValue,
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            gap: 2,
-                            justifyContent: "space-between",
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        onChange: handleChange,
+                        onTextValueChange: (text)=>{
+                            setTextValue(text);
+                        },
+                        onInputChange: (event)=>{
+                            handleSearch(event.currentTarget.value);
+                        },
+                        ...props,
+                        children: options.map((opt)=>{
+                            const textValue = relations$1.getRelationLabel(opt, mainField);
+                            return /*#__PURE__*/ jsxRuntime.jsx(designSystem.ComboboxOption, {
+                                value: opt.id.toString(),
+                                textValue: textValue,
+                                children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                                     gap: 2,
+                                    justifyContent: "space-between",
                                     children: [
-                                        /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {
-                                            fill: "neutral500"
+                                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                                            gap: 2,
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(Icons.Link, {
+                                                    fill: "neutral500"
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                                    ellipsis: true,
+                                                    children: textValue
+                                                })
+                                            ]
                                         }),
-                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                                            ellipsis: true,
-                                            children: textValue
-                                        })
+                                        opt.status ? /*#__PURE__*/ jsxRuntime.jsx(DocumentStatus.DocumentStatus, {
+                                            status: opt.status
+                                        }) : null
                                     ]
-                                }),
-                                opt.status ? /*#__PURE__*/ jsxRuntime.jsx(DocumentStatus.DocumentStatus, {
-                                    status: opt.status
-                                }) : null
-                            ]
+                                })
+                            }, opt.id);
                         })
-                    }, opt.id);
-                })
-            })
+                    })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {}),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Hint, {})
+        ]
     });
 };
 /* -------------------------------------------------------------------------------------------------