@strapi/content-manager 0.0.0-experimental.e0df4d50334a17a1beb3d203bff414fbbff62f7b → 0.0.0-experimental.e100737b0ed96d0d80a5c6f4925c7374e63a342a

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

@@ -0,0 +1,316 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useForm, useField } from '@strapi/admin/strapi-admin';
+import { Box, useComposedRefs, IconButton, Menu, MenuItem, Flex, Accordion, Grid } from '@strapi/design-system';
+import { Trash, Drag, More } from '@strapi/icons';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { COMPONENT_ICONS } from '../../../../../components/ComponentIcon.mjs';
+import { ItemTypes } from '../../../../../constants/dragAndDrop.mjs';
+import { useDocumentContext } from '../../../../../features/DocumentContext.mjs';
+import { useDocumentLayout } from '../../../../../hooks/useDocumentLayout.mjs';
+import { useDragAndDrop } from '../../../../../hooks/useDragAndDrop.mjs';
+import { getIn } from '../../../../../utils/objects.mjs';
+import { getTranslation } from '../../../../../utils/translations.mjs';
+import { ResponsiveGridRoot, ResponsiveGridItem } from '../../FormLayout.mjs';
+import { InputRenderer as MemoizedInputRenderer } from '../../InputRenderer.mjs';
+
+const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveComponentClick, onMoveComponent, onGrabItem, onDropItem, onCancel, dynamicComponentsByCategory = {}, onAddComponent, children })=>{
+    const { formatMessage } = useIntl();
+    const formValues = useForm('DynamicComponent', (state)=>state.values);
+    const documentMeta = useDocumentContext('DynamicComponent', (state)=>state.meta);
+    const rootDocumentMeta = useDocumentContext('DynamicComponent', (state)=>state.rootDocumentMeta);
+    const { edit: { components: rootComponents } } = useDocumentLayout(rootDocumentMeta.model);
+    const { edit: { components: relatedComponents } } = useDocumentLayout(documentMeta.model);
+    // Merge the root level components and related components
+    const components = React.useMemo(()=>({
+            ...rootComponents,
+            ...relatedComponents
+        }), [
+        rootComponents,
+        relatedComponents
+    ]);
+    const document = useDocumentContext('DynamicComponent', (state)=>state.document);
+    const title = React.useMemo(()=>{
+        const { mainField } = components[componentUid]?.settings ?? {
+            mainField: 'id'
+        };
+        const mainFieldValue = 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.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(!disabled, {
+        type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,
+        index,
+        item: {
+            index,
+            displayedValue: `${displayName} ${title}`,
+            icon
+        },
+        onMoveItem: onMoveComponent,
+        onDropItem,
+        onGrabItem,
+        onCancel
+    });
+    React.useEffect(()=>{
+        dragPreviewRef(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.useId();
+    const { value = [], rawError } = useField(`${name}.${index}`);
+    const [collapseToOpen, setCollapseToOpen] = React.useState('');
+    React.useEffect(()=>{
+        if (rawError && value) {
+            setCollapseToOpen(accordionValue);
+        }
+    }, [
+        rawError,
+        value,
+        accordionValue
+    ]);
+    const composedBoxRefs = useComposedRefs(boxRef, dropRef);
+    const accordionActions = disabled ? null : /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(IconButton, {
+                variant: "ghost",
+                label: formatMessage({
+                    id: getTranslation('components.DynamicZone.delete-label'),
+                    defaultMessage: 'Delete {name}'
+                }, {
+                    name: title
+                }),
+                onClick: onRemoveComponentClick,
+                children: /*#__PURE__*/ jsx(Trash, {})
+            }),
+            /*#__PURE__*/ jsx(IconButton, {
+                variant: "ghost",
+                onClick: (e)=>e.stopPropagation(),
+                "data-handler-id": handlerId,
+                ref: dragRef,
+                label: formatMessage({
+                    id: getTranslation('components.DragHandle-label'),
+                    defaultMessage: 'Drag'
+                }),
+                onKeyDown: handleKeyDown,
+                children: /*#__PURE__*/ jsx(Drag, {})
+            }),
+            /*#__PURE__*/ jsxs(Menu.Root, {
+                children: [
+                    /*#__PURE__*/ jsx(Menu.Trigger, {
+                        size: "S",
+                        endIcon: null,
+                        paddingLeft: 0,
+                        paddingRight: 0,
+                        children: /*#__PURE__*/ jsx(IconButton, {
+                            variant: "ghost",
+                            label: formatMessage({
+                                id: getTranslation('components.DynamicZone.more-actions'),
+                                defaultMessage: 'More actions'
+                            }),
+                            tag: "span",
+                            children: /*#__PURE__*/ jsx(More, {
+                                "aria-hidden": true,
+                                focusable: false
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(Menu.Content, {
+                        children: [
+                            /*#__PURE__*/ jsxs(Menu.SubRoot, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Menu.SubTrigger, {
+                                        children: formatMessage({
+                                            id: getTranslation('components.DynamicZone.add-item-above'),
+                                            defaultMessage: 'Add component above'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Menu.SubContent, {
+                                        children: Object.entries(dynamicComponentsByCategory).map(([category, components])=>/*#__PURE__*/ jsxs(React.Fragment, {
+                                                children: [
+                                                    /*#__PURE__*/ jsx(Menu.Label, {
+                                                        children: category
+                                                    }),
+                                                    components.map(({ displayName, uid })=>/*#__PURE__*/ jsx(MenuItem, {
+                                                            onSelect: ()=>onAddComponent(uid, index),
+                                                            children: displayName
+                                                        }, componentUid))
+                                                ]
+                                            }, category))
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(Menu.SubRoot, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Menu.SubTrigger, {
+                                        children: formatMessage({
+                                            id: getTranslation('components.DynamicZone.add-item-below'),
+                                            defaultMessage: 'Add component below'
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Menu.SubContent, {
+                                        children: Object.entries(dynamicComponentsByCategory).map(([category, components])=>/*#__PURE__*/ jsxs(React.Fragment, {
+                                                children: [
+                                                    /*#__PURE__*/ jsx(Menu.Label, {
+                                                        children: category
+                                                    }),
+                                                    components.map(({ displayName, uid })=>/*#__PURE__*/ jsx(MenuItem, {
+                                                            onSelect: ()=>onAddComponent(uid, index + 1),
+                                                            children: displayName
+                                                        }, componentUid))
+                                                ]
+                                            }, category))
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+    const accordionTitle = title ? `${displayName} ${title}` : displayName;
+    return /*#__PURE__*/ jsxs(ComponentContainer, {
+        tag: "li",
+        width: "100%",
+        children: [
+            /*#__PURE__*/ jsx(Flex, {
+                justifyContent: "center",
+                children: /*#__PURE__*/ jsx(Rectangle, {
+                    background: "neutral200"
+                })
+            }),
+            /*#__PURE__*/ jsx(StyledBox, {
+                ref: composedBoxRefs,
+                hasRadius: true,
+                children: isDragging ? /*#__PURE__*/ jsx(Preview, {}) : /*#__PURE__*/ jsx(Accordion.Root, {
+                    value: collapseToOpen,
+                    onValueChange: setCollapseToOpen,
+                    children: /*#__PURE__*/ jsxs(Accordion.Item, {
+                        value: accordionValue,
+                        children: [
+                            /*#__PURE__*/ jsxs(Accordion.Header, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Accordion.Trigger, {
+                                        icon: icon && COMPONENT_ICONS[icon] ? COMPONENT_ICONS[icon] : COMPONENT_ICONS.dashboard,
+                                        children: accordionTitle
+                                    }),
+                                    /*#__PURE__*/ jsx(Accordion.Actions, {
+                                        children: accordionActions
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Accordion.Content, {
+                                children: /*#__PURE__*/ jsx(AccordionContentRadius, {
+                                    background: "neutral0",
+                                    children: /*#__PURE__*/ jsx(Box, {
+                                        paddingLeft: 6,
+                                        paddingRight: 6,
+                                        paddingTop: 6,
+                                        paddingBottom: 6,
+                                        children: /*#__PURE__*/ jsx(Grid.Root, {
+                                            gap: 4,
+                                            children: components[componentUid]?.layout?.map((row, rowInd)=>/*#__PURE__*/ jsx(Grid.Item, {
+                                                    col: 12,
+                                                    s: 12,
+                                                    xs: 12,
+                                                    direction: "column",
+                                                    alignItems: "stretch",
+                                                    children: /*#__PURE__*/ jsx(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__*/ jsx(ResponsiveGridItem, {
+                                                                col: size,
+                                                                s: 12,
+                                                                xs: 12,
+                                                                direction: "column",
+                                                                alignItems: "stretch",
+                                                                children: children ? children({
+                                                                    ...fieldWithTranslatedLabel,
+                                                                    document,
+                                                                    name: fieldName
+                                                                }) : /*#__PURE__*/ jsx(MemoizedInputRenderer, {
+                                                                    ...fieldWithTranslatedLabel,
+                                                                    document: document,
+                                                                    name: fieldName
+                                                                })
+                                                            }, fieldName);
+                                                        })
+                                                    })
+                                                }, rowInd))
+                                        })
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+};
+// TODO: Delete once https://github.com/strapi/design-system/pull/858
+// is merged and released.
+const StyledBox = styled(Box)`
+  > div:first-child {
+    box-shadow: ${({ theme })=>theme.shadows.tableShadow};
+  }
+`;
+const AccordionContentRadius = styled(Box)`
+  border-radius: 0 0 ${({ theme })=>theme.spaces[1]} ${({ theme })=>theme.spaces[1]};
+`;
+const Rectangle = styled(Box)`
+  width: ${({ theme })=>theme.spaces[2]};
+  height: ${({ theme })=>theme.spaces[4]};
+`;
+const Preview = 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 = styled(Box)`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+`;
+
+export { DynamicComponent };
+//# sourceMappingURL=DynamicComponent.mjs.map

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

@@ -0,0 +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  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 { useDocumentContext } from '../../../../../features/DocumentContext';\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 documentMeta = useDocumentContext('DynamicComponent', (state) => state.meta);\n  const rootDocumentMeta = useDocumentContext(\n    'DynamicComponent',\n    (state) => state.rootDocumentMeta\n  );\n\n  const {\n    edit: { components: rootComponents },\n  } = useDocumentLayout(rootDocumentMeta.model);\n  const {\n    edit: { components: relatedComponents },\n  } = useDocumentLayout(documentMeta.model);\n\n  // Merge the root level components and related components\n  const components = React.useMemo(\n    () => ({ ...rootComponents, ...relatedComponents }),\n    [rootComponents, relatedComponents]\n  );\n\n  const document = useDocumentContext('DynamicComponent', (state) => state.document);\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({\n                                      ...fieldWithTranslatedLabel,\n                                      document,\n                                      name: fieldName,\n                                    })\n                                  ) : (\n                                    <InputRenderer\n                                      {...fieldWithTranslatedLabel}\n                                      document={document}\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","documentMeta","useDocumentContext","meta","rootDocumentMeta","edit","components","rootComponents","useDocumentLayout","model","relatedComponents","React","useMemo","document","title","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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"}

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

@@ -0,0 +1,73 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+
+const DynamicZoneLabel = ({ hint, label, labelAction, name, numberOfComponents = 0, required })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+        justifyContent: "center",
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+            paddingTop: 3,
+            paddingBottom: 3,
+            paddingRight: 4,
+            paddingLeft: 4,
+            borderRadius: "26px",
+            background: "neutral0",
+            shadow: "filterShadow",
+            color: "neutral500",
+            children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                direction: "column",
+                justifyContent: "center",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                        maxWidth: "35.6rem",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Typography, {
+                                variant: "pi",
+                                textColor: "neutral600",
+                                fontWeight: "bold",
+                                ellipsis: true,
+                                children: [
+                                    label || name,
+                                    " "
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Typography, {
+                                variant: "pi",
+                                textColor: "neutral600",
+                                fontWeight: "bold",
+                                children: [
+                                    "(",
+                                    numberOfComponents,
+                                    ")"
+                                ]
+                            }),
+                            required && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                textColor: "danger600",
+                                children: "*"
+                            }),
+                            labelAction && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                                paddingLeft: 1,
+                                children: labelAction
+                            })
+                        ]
+                    }),
+                    hint && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                        paddingTop: 1,
+                        maxWidth: "35.6rem",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            variant: "pi",
+                            textColor: "neutral600",
+                            ellipsis: true,
+                            children: hint
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+
+exports.DynamicZoneLabel = DynamicZoneLabel;
+//# sourceMappingURL=DynamicZoneLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicZoneLabel.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicZoneLabel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\n\ninterface DynamicZoneLabelProps {\n  label?: React.ReactNode;\n  labelAction?: React.ReactNode;\n  name: string;\n  numberOfComponents?: number;\n  required?: boolean;\n  hint?: React.ReactNode;\n}\n\nconst DynamicZoneLabel = ({\n  hint,\n  label,\n  labelAction,\n  name,\n  numberOfComponents = 0,\n  required,\n}: DynamicZoneLabelProps) => {\n  return (\n    <Flex justifyContent=\"center\">\n      <Box\n        paddingTop={3}\n        paddingBottom={3}\n        paddingRight={4}\n        paddingLeft={4}\n        borderRadius=\"26px\"\n        background=\"neutral0\"\n        shadow=\"filterShadow\"\n        color=\"neutral500\"\n      >\n        <Flex direction=\"column\" justifyContent=\"center\">\n          <Flex maxWidth=\"35.6rem\">\n            <Typography variant=\"pi\" textColor=\"neutral600\" fontWeight=\"bold\" ellipsis>\n              {label || name}&nbsp;\n            </Typography>\n            <Typography variant=\"pi\" textColor=\"neutral600\" fontWeight=\"bold\">\n              ({numberOfComponents})\n            </Typography>\n            {required && <Typography textColor=\"danger600\">*</Typography>}\n            {labelAction && <Box paddingLeft={1}>{labelAction}</Box>}\n          </Flex>\n          {hint && (\n            <Box paddingTop={1} maxWidth=\"35.6rem\">\n              <Typography variant=\"pi\" textColor=\"neutral600\" ellipsis>\n                {hint}\n              </Typography>\n            </Box>\n          )}\n        </Flex>\n      </Box>\n    </Flex>\n  );\n};\n\nexport { DynamicZoneLabel };\nexport type { DynamicZoneLabelProps };\n"],"names":["DynamicZoneLabel","hint","label","labelAction","name","numberOfComponents","required","_jsx","Flex","justifyContent","Box","paddingTop","paddingBottom","paddingRight","paddingLeft","borderRadius","background","shadow","color","_jsxs","direction","maxWidth","Typography","variant","textColor","fontWeight","ellipsis"],"mappings":";;;;;;AAaA,MAAMA,gBAAmB,GAAA,CAAC,EACxBC,IAAI,EACJC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,kBAAAA,GAAqB,CAAC,EACtBC,QAAQ,EACc,GAAA;AACtB,IAAA,qBACEC,cAACC,CAAAA,iBAAAA,EAAAA;QAAKC,cAAe,EAAA,QAAA;AACnB,QAAA,QAAA,gBAAAF,cAACG,CAAAA,gBAAAA,EAAAA;YACCC,UAAY,EAAA,CAAA;YACZC,aAAe,EAAA,CAAA;YACfC,YAAc,EAAA,CAAA;YACdC,WAAa,EAAA,CAAA;YACbC,YAAa,EAAA,MAAA;YACbC,UAAW,EAAA,UAAA;YACXC,MAAO,EAAA,cAAA;YACPC,KAAM,EAAA,YAAA;AAEN,YAAA,QAAA,gBAAAC,eAACX,CAAAA,iBAAAA,EAAAA;gBAAKY,SAAU,EAAA,QAAA;gBAASX,cAAe,EAAA,QAAA;;kCACtCU,eAACX,CAAAA,iBAAAA,EAAAA;wBAAKa,QAAS,EAAA,SAAA;;0CACbF,eAACG,CAAAA,uBAAAA,EAAAA;gCAAWC,OAAQ,EAAA,IAAA;gCAAKC,SAAU,EAAA,YAAA;gCAAaC,UAAW,EAAA,MAAA;gCAAOC,QAAQ,EAAA,IAAA;;oCACvExB,KAASE,IAAAA,IAAAA;AAAK,oCAAA;;;0CAEjBe,eAACG,CAAAA,uBAAAA,EAAAA;gCAAWC,OAAQ,EAAA,IAAA;gCAAKC,SAAU,EAAA,YAAA;gCAAaC,UAAW,EAAA,MAAA;;AAAO,oCAAA,GAAA;AAC9DpB,oCAAAA,kBAAAA;AAAmB,oCAAA;;;AAEtBC,4BAAAA,QAAAA,kBAAYC,cAACe,CAAAA,uBAAAA,EAAAA;gCAAWE,SAAU,EAAA,WAAA;AAAY,gCAAA,QAAA,EAAA;;AAC9CrB,4BAAAA,WAAAA,kBAAeI,cAACG,CAAAA,gBAAAA,EAAAA;gCAAII,WAAa,EAAA,CAAA;AAAIX,gCAAAA,QAAAA,EAAAA;;;;AAEvCF,oBAAAA,IAAAA,kBACCM,cAACG,CAAAA,gBAAAA,EAAAA;wBAAIC,UAAY,EAAA,CAAA;wBAAGU,QAAS,EAAA,SAAA;AAC3B,wBAAA,QAAA,gBAAAd,cAACe,CAAAA,uBAAAA,EAAAA;4BAAWC,OAAQ,EAAA,IAAA;4BAAKC,SAAU,EAAA,YAAA;4BAAaE,QAAQ,EAAA,IAAA;AACrDzB,4BAAAA,QAAAA,EAAAA;;;;;;;AAQjB;;;;"}

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

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { Flex, Box, Typography } from '@strapi/design-system';
+
+const DynamicZoneLabel = ({ hint, label, labelAction, name, numberOfComponents = 0, required })=>{
+    return /*#__PURE__*/ jsx(Flex, {
+        justifyContent: "center",
+        children: /*#__PURE__*/ jsx(Box, {
+            paddingTop: 3,
+            paddingBottom: 3,
+            paddingRight: 4,
+            paddingLeft: 4,
+            borderRadius: "26px",
+            background: "neutral0",
+            shadow: "filterShadow",
+            color: "neutral500",
+            children: /*#__PURE__*/ jsxs(Flex, {
+                direction: "column",
+                justifyContent: "center",
+                children: [
+                    /*#__PURE__*/ jsxs(Flex, {
+                        maxWidth: "35.6rem",
+                        children: [
+                            /*#__PURE__*/ jsxs(Typography, {
+                                variant: "pi",
+                                textColor: "neutral600",
+                                fontWeight: "bold",
+                                ellipsis: true,
+                                children: [
+                                    label || name,
+                                    " "
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(Typography, {
+                                variant: "pi",
+                                textColor: "neutral600",
+                                fontWeight: "bold",
+                                children: [
+                                    "(",
+                                    numberOfComponents,
+                                    ")"
+                                ]
+                            }),
+                            required && /*#__PURE__*/ jsx(Typography, {
+                                textColor: "danger600",
+                                children: "*"
+                            }),
+                            labelAction && /*#__PURE__*/ jsx(Box, {
+                                paddingLeft: 1,
+                                children: labelAction
+                            })
+                        ]
+                    }),
+                    hint && /*#__PURE__*/ jsx(Box, {
+                        paddingTop: 1,
+                        maxWidth: "35.6rem",
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            variant: "pi",
+                            textColor: "neutral600",
+                            ellipsis: true,
+                            children: hint
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+
+export { DynamicZoneLabel };
+//# sourceMappingURL=DynamicZoneLabel.mjs.map

package/dist/admin/pages/EditView/components/FormInputs/DynamicZone/DynamicZoneLabel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicZoneLabel.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicZoneLabel.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\n\ninterface DynamicZoneLabelProps {\n  label?: React.ReactNode;\n  labelAction?: React.ReactNode;\n  name: string;\n  numberOfComponents?: number;\n  required?: boolean;\n  hint?: React.ReactNode;\n}\n\nconst DynamicZoneLabel = ({\n  hint,\n  label,\n  labelAction,\n  name,\n  numberOfComponents = 0,\n  required,\n}: DynamicZoneLabelProps) => {\n  return (\n    <Flex justifyContent=\"center\">\n      <Box\n        paddingTop={3}\n        paddingBottom={3}\n        paddingRight={4}\n        paddingLeft={4}\n        borderRadius=\"26px\"\n        background=\"neutral0\"\n        shadow=\"filterShadow\"\n        color=\"neutral500\"\n      >\n        <Flex direction=\"column\" justifyContent=\"center\">\n          <Flex maxWidth=\"35.6rem\">\n            <Typography variant=\"pi\" textColor=\"neutral600\" fontWeight=\"bold\" ellipsis>\n              {label || name}&nbsp;\n            </Typography>\n            <Typography variant=\"pi\" textColor=\"neutral600\" fontWeight=\"bold\">\n              ({numberOfComponents})\n            </Typography>\n            {required && <Typography textColor=\"danger600\">*</Typography>}\n            {labelAction && <Box paddingLeft={1}>{labelAction}</Box>}\n          </Flex>\n          {hint && (\n            <Box paddingTop={1} maxWidth=\"35.6rem\">\n              <Typography variant=\"pi\" textColor=\"neutral600\" ellipsis>\n                {hint}\n              </Typography>\n            </Box>\n          )}\n        </Flex>\n      </Box>\n    </Flex>\n  );\n};\n\nexport { DynamicZoneLabel };\nexport type { DynamicZoneLabelProps };\n"],"names":["DynamicZoneLabel","hint","label","labelAction","name","numberOfComponents","required","_jsx","Flex","justifyContent","Box","paddingTop","paddingBottom","paddingRight","paddingLeft","borderRadius","background","shadow","color","_jsxs","direction","maxWidth","Typography","variant","textColor","fontWeight","ellipsis"],"mappings":";;;;AAaA,MAAMA,gBAAmB,GAAA,CAAC,EACxBC,IAAI,EACJC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,kBAAAA,GAAqB,CAAC,EACtBC,QAAQ,EACc,GAAA;AACtB,IAAA,qBACEC,GAACC,CAAAA,IAAAA,EAAAA;QAAKC,cAAe,EAAA,QAAA;AACnB,QAAA,QAAA,gBAAAF,GAACG,CAAAA,GAAAA,EAAAA;YACCC,UAAY,EAAA,CAAA;YACZC,aAAe,EAAA,CAAA;YACfC,YAAc,EAAA,CAAA;YACdC,WAAa,EAAA,CAAA;YACbC,YAAa,EAAA,MAAA;YACbC,UAAW,EAAA,UAAA;YACXC,MAAO,EAAA,cAAA;YACPC,KAAM,EAAA,YAAA;AAEN,YAAA,QAAA,gBAAAC,IAACX,CAAAA,IAAAA,EAAAA;gBAAKY,SAAU,EAAA,QAAA;gBAASX,cAAe,EAAA,QAAA;;kCACtCU,IAACX,CAAAA,IAAAA,EAAAA;wBAAKa,QAAS,EAAA,SAAA;;0CACbF,IAACG,CAAAA,UAAAA,EAAAA;gCAAWC,OAAQ,EAAA,IAAA;gCAAKC,SAAU,EAAA,YAAA;gCAAaC,UAAW,EAAA,MAAA;gCAAOC,QAAQ,EAAA,IAAA;;oCACvExB,KAASE,IAAAA,IAAAA;AAAK,oCAAA;;;0CAEjBe,IAACG,CAAAA,UAAAA,EAAAA;gCAAWC,OAAQ,EAAA,IAAA;gCAAKC,SAAU,EAAA,YAAA;gCAAaC,UAAW,EAAA,MAAA;;AAAO,oCAAA,GAAA;AAC9DpB,oCAAAA,kBAAAA;AAAmB,oCAAA;;;AAEtBC,4BAAAA,QAAAA,kBAAYC,GAACe,CAAAA,UAAAA,EAAAA;gCAAWE,SAAU,EAAA,WAAA;AAAY,gCAAA,QAAA,EAAA;;AAC9CrB,4BAAAA,WAAAA,kBAAeI,GAACG,CAAAA,GAAAA,EAAAA;gCAAII,WAAa,EAAA,CAAA;AAAIX,gCAAAA,QAAAA,EAAAA;;;;AAEvCF,oBAAAA,IAAAA,kBACCM,GAACG,CAAAA,GAAAA,EAAAA;wBAAIC,UAAY,EAAA,CAAA;wBAAGU,QAAS,EAAA,SAAA;AAC3B,wBAAA,QAAA,gBAAAd,GAACe,CAAAA,UAAAA,EAAAA;4BAAWC,OAAQ,EAAA,IAAA;4BAAKC,SAAU,EAAA,YAAA;4BAAaE,QAAQ,EAAA,IAAA;AACrDzB,4BAAAA,QAAAA,EAAAA;;;;;;;AAQjB;;;;"}