@strapi/content-manager 0.0.0-experimental.bffd3c1819cd08304e7d270e88b4973e9fcbc183 → 0.0.0-experimental.c23f51fc41b3ef5de081f427d07e87af93cdcb2c

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

@@ -0,0 +1,322 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var reactDndHtml5Backend = require('react-dnd-html5-backend');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var ComponentIcon = require('../../../../../components/ComponentIcon.js');
+var dragAndDrop = require('../../../../../constants/dragAndDrop.js');
+var useDocumentLayout = require('../../../../../hooks/useDocumentLayout.js');
+var useDragAndDrop = require('../../../../../hooks/useDragAndDrop.js');
+var objects = require('../../../../../utils/objects.js');
+var translations = require('../../../../../utils/translations.js');
+var FormLayout = require('../../FormLayout.js');
+var InputRenderer = require('../../InputRenderer.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveComponentClick, onMoveComponent, onGrabItem, onDropItem, onCancel, dynamicComponentsByCategory = {}, onAddComponent, children })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const formValues = strapiAdmin.useForm('DynamicComponent', (state)=>state.values);
+    const { edit: { components } } = useDocumentLayout.useDocLayout();
+    const title = React__namespace.useMemo(()=>{
+        const { mainField } = components[componentUid]?.settings ?? {
+            mainField: 'id'
+        };
+        const mainFieldValue = objects.getIn(formValues, `${name}.${index}.${mainField}`);
+        const displayedValue = mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();
+        const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
+        return mainValue;
+    }, [
+        componentUid,
+        components,
+        formValues,
+        name,
+        index
+    ]);
+    const { icon, displayName } = React__namespace.useMemo(()=>{
+        const [category] = componentUid.split('.');
+        const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find((component)=>component.uid === componentUid) ?? {
+            icon: null,
+            displayName: null
+        };
+        return {
+            icon,
+            displayName
+        };
+    }, [
+        componentUid,
+        dynamicComponentsByCategory
+    ]);
+    const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop.useDragAndDrop(!disabled, {
+        type: `${dragAndDrop.ItemTypes.DYNAMIC_ZONE}_${name}`,
+        index,
+        item: {
+            index,
+            displayedValue: `${displayName} ${title}`,
+            icon
+        },
+        onMoveItem: onMoveComponent,
+        onDropItem,
+        onGrabItem,
+        onCancel
+    });
+    React__namespace.useEffect(()=>{
+        dragPreviewRef(reactDndHtml5Backend.getEmptyImage(), {
+            captureDraggingState: false
+        });
+    }, [
+        dragPreviewRef,
+        index
+    ]);
+    /**
+   * We don't need the accordion's to communicate with each other,
+   * so a unique value for their state is enough.
+   */ const accordionValue = React__namespace.useId();
+    const { value = [], rawError } = strapiAdmin.useField(`${name}.${index}`);
+    const [collapseToOpen, setCollapseToOpen] = React__namespace.useState('');
+    React__namespace.useEffect(()=>{
+        if (rawError && value) {
+            setCollapseToOpen(accordionValue);
+        }
+    }, [
+        rawError,
+        value,
+        accordionValue
+    ]);
+    const composedBoxRefs = designSystem.useComposedRefs(boxRef, dropRef);
+    const accordionActions = disabled ? null : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                variant: "ghost",
+                label: formatMessage({
+                    id: translations.getTranslation('components.DynamicZone.delete-label'),
+                    defaultMessage: 'Delete {name}'
+                }, {
+                    name: title
+                }),
+                onClick: onRemoveComponentClick,
+                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Trash, {})
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                variant: "ghost",
+                onClick: (e)=>e.stopPropagation(),
+                "data-handler-id": handlerId,
+                ref: dragRef,
+                label: formatMessage({
+                    id: translations.getTranslation('components.DragHandle-label'),
+                    defaultMessage: 'Drag'
+                }),
+                onKeyDown: handleKeyDown,
+                children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Drag, {})
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Trigger, {
+                        size: "S",
+                        endIcon: null,
+                        paddingLeft: 0,
+                        paddingRight: 0,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                            variant: "ghost",
+                            label: formatMessage({
+                                id: translations.getTranslation('components.DynamicZone.more-actions'),
+                                defaultMessage: 'More actions'
+                            }),
+                            tag: "span",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(Icons.More, {
+                                "aria-hidden": true,
+                                focusable: false
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Content, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.SubRoot, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.SubTrigger, {
+                                        children: formatMessage({
+                                            id: translations.getTranslation('components.DynamicZone.add-item-above'),
+                                            defaultMessage: 'Add component above'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.SubContent, {
+                                        children: Object.entries(dynamicComponentsByCategory).map(([category, components])=>/*#__PURE__*/ jsxRuntime.jsxs(React__namespace.Fragment, {
+                                                children: [
+                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Label, {
+                                                        children: category
+                                                    }),
+                                                    components.map(({ displayName, uid })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.MenuItem, {
+                                                            onSelect: ()=>onAddComponent(uid, index),
+                                                            children: displayName
+                                                        }, componentUid))
+                                                ]
+                                            }, category))
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.SubRoot, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.SubTrigger, {
+                                        children: formatMessage({
+                                            id: translations.getTranslation('components.DynamicZone.add-item-below'),
+                                            defaultMessage: 'Add component below'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.SubContent, {
+                                        children: Object.entries(dynamicComponentsByCategory).map(([category, components])=>/*#__PURE__*/ jsxRuntime.jsxs(React__namespace.Fragment, {
+                                                children: [
+                                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Label, {
+                                                        children: category
+                                                    }),
+                                                    components.map(({ displayName, uid })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.MenuItem, {
+                                                            onSelect: ()=>onAddComponent(uid, index + 1),
+                                                            children: displayName
+                                                        }, componentUid))
+                                                ]
+                                            }, category))
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+    const accordionTitle = title ? `${displayName} ${title}` : displayName;
+    return /*#__PURE__*/ jsxRuntime.jsxs(ComponentContainer, {
+        tag: "li",
+        width: "100%",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                justifyContent: "center",
+                children: /*#__PURE__*/ jsxRuntime.jsx(Rectangle, {
+                    background: "neutral200"
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(StyledBox, {
+                ref: composedBoxRefs,
+                hasRadius: true,
+                children: isDragging ? /*#__PURE__*/ jsxRuntime.jsx(Preview, {}) : /*#__PURE__*/ jsxRuntime.jsx(designSystem.Accordion.Root, {
+                    value: collapseToOpen,
+                    onValueChange: setCollapseToOpen,
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Accordion.Item, {
+                        value: accordionValue,
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Accordion.Header, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Accordion.Trigger, {
+                                        icon: icon && ComponentIcon.COMPONENT_ICONS[icon] ? ComponentIcon.COMPONENT_ICONS[icon] : ComponentIcon.COMPONENT_ICONS.dashboard,
+                                        children: accordionTitle
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Accordion.Actions, {
+                                        children: accordionActions
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Accordion.Content, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(AccordionContentRadius, {
+                                    background: "neutral0",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                        paddingLeft: 6,
+                                        paddingRight: 6,
+                                        paddingTop: 6,
+                                        paddingBottom: 6,
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
+                                            gap: 4,
+                                            children: components[componentUid]?.layout?.map((row, rowInd)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                                                    col: 12,
+                                                    s: 12,
+                                                    xs: 12,
+                                                    direction: "column",
+                                                    alignItems: "stretch",
+                                                    children: /*#__PURE__*/ jsxRuntime.jsx(FormLayout.ResponsiveGridRoot, {
+                                                        gap: 4,
+                                                        children: row.map(({ size, ...field })=>{
+                                                            const fieldName = `${name}.${index}.${field.name}`;
+                                                            const fieldWithTranslatedLabel = {
+                                                                ...field,
+                                                                label: formatMessage({
+                                                                    id: `content-manager.components.${componentUid}.${field.name}`,
+                                                                    defaultMessage: field.label
+                                                                })
+                                                            };
+                                                            return /*#__PURE__*/ jsxRuntime.jsx(FormLayout.ResponsiveGridItem, {
+                                                                col: size,
+                                                                s: 12,
+                                                                xs: 12,
+                                                                direction: "column",
+                                                                alignItems: "stretch",
+                                                                children: children ? children({
+                                                                    ...fieldWithTranslatedLabel,
+                                                                    name: fieldName
+                                                                }) : /*#__PURE__*/ jsxRuntime.jsx(InputRenderer.InputRenderer, {
+                                                                    ...fieldWithTranslatedLabel,
+                                                                    name: fieldName
+                                                                })
+                                                            }, fieldName);
+                                                        })
+                                                    })
+                                                }, rowInd))
+                                        })
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+};
+// TODO: Delete once https://github.com/strapi/design-system/pull/858
+// is merged and released.
+const StyledBox = styledComponents.styled(designSystem.Box)`
+  > div:first-child {
+    box-shadow: ${({ theme })=>theme.shadows.tableShadow};
+  }
+`;
+const AccordionContentRadius = styledComponents.styled(designSystem.Box)`
+  border-radius: 0 0 ${({ theme })=>theme.spaces[1]} ${({ theme })=>theme.spaces[1]};
+`;
+const Rectangle = styledComponents.styled(designSystem.Box)`
+  width: ${({ theme })=>theme.spaces[2]};
+  height: ${({ theme })=>theme.spaces[4]};
+`;
+const Preview = styledComponents.styled.span`
+  display: block;
+  background-color: ${({ theme })=>theme.colors.primary100};
+  outline: 1px dashed ${({ theme })=>theme.colors.primary500};
+  outline-offset: -1px;
+  padding: ${({ theme })=>theme.spaces[6]};
+`;
+const ComponentContainer = styledComponents.styled(designSystem.Box)`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+`;
+
+exports.DynamicComponent = DynamicComponent;
+//# sourceMappingURL=DynamicComponent.js.map

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

@@ -0,0 +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  MenuItem,\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 { useDocLayout } 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 {\n    edit: { components },\n  } = useDocLayout();\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                    <MenuItem key={componentUid} onSelect={() => onAddComponent(uid, index)}>\n                      {displayName}\n                    </MenuItem>\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                    <MenuItem key={componentUid} onSelect={() => onAddComponent(uid, index + 1)}>\n                      {displayName}\n                    </MenuItem>\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({ ...fieldWithTranslatedLabel, name: fieldName })\n                                  ) : (\n                                    <InputRenderer {...fieldWithTranslatedLabel} name={fieldName} />\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","edit","components","useDocLayout","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","MenuItem","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","onValueChange","Item","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","Box","paddingTop","paddingBottom","Grid","gap","layout","row","rowInd","col","s","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","InputRenderer","styled","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500"],"mappings":"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"}