npm - @akbarsafari00/bonyan-content-manager - Versions diffs - 5.52.1-fa.2 - Mend

@akbarsafari00/bonyan-content-manager 5.52.1-fa.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1600) hide show

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

@@ -0,0 +1 @@

+ {"version":3,"file":"DynamicComponent.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { useForm, useIsDesktop } from '@strapi/admin/strapi-admin';\r\nimport {\r\n Accordion,\r\n Box,\r\n Flex,\r\n Grid,\r\n IconButton,\r\n useComposedRefs,\r\n Menu,\r\n BoxComponent,\r\n} from '@strapi/design-system';\r\nimport { Drag, More, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\r\nimport upperFirst from 'lodash/upperFirst';\r\nimport { getEmptyImage } from 'react-dnd-html5-backend';\r\nimport { useIntl } from 'react-intl';\r\nimport { styled } from 'styled-components';\r\n\r\nimport { COMPONENT_ICONS } from '../../../../../components/ComponentIcon';\r\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\r\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\r\nimport { type EditFieldLayout, useDocumentLayout } from '../../../../../hooks/useDocumentLayout';\r\nimport { type UseDragAndDropOptions, useDragAndDrop } from '../../../../../hooks/useDragAndDrop';\r\nimport { getIn } from '../../../../../utils/objects';\r\nimport { getTranslation } from '../../../../../utils/translations';\r\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\r\nimport { InputRenderer, type InputRendererProps } from '../../InputRenderer';\r\n\r\nimport type { ComponentPickerProps } from './ComponentPicker';\r\n\r\ninterface DynamicComponentProps\r\n extends Pick<UseDragAndDropOptions, 'onGrabItem' | 'onDropItem' | 'onCancel'>,\r\n Pick<ComponentPickerProps, 'dynamicComponentsByCategory'> {\r\n componentUid?: string;\r\n disabled?: boolean;\r\n index: number;\r\n name: string;\r\n onAddComponent: (componentUid: string, index: number) => void;\r\n onRemoveComponentClick: (index: number) => void;\r\n onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\r\n totalLength: number;\r\n children?: (props: InputRendererProps) => React.ReactNode;\r\n /**\r\n * When true, the component's accordion will be forced open and scrolled into view.\r\n * Used by the parent DynamicZone to auto-expand newly added components.\r\n */\r\n forceOpen?: boolean;\r\n /**\r\n * Called after the forceOpen has been handled (accordion opened + scrolled),\r\n * so the parent can clear the forced state.\r\n */\r\n onForceOpenHandled?: () => void;\r\n}\r\n\r\nconst DynamicComponent = ({\r\n componentUid,\r\n disabled,\r\n index,\r\n name,\r\n onRemoveComponentClick,\r\n onMoveComponent,\r\n onGrabItem,\r\n onDropItem,\r\n onCancel,\r\n dynamicComponentsByCategory = {},\r\n onAddComponent,\r\n totalLength,\r\n children,\r\n forceOpen,\r\n onForceOpenHandled,\r\n}: DynamicComponentProps) => {\r\n const { formatMessage } = useIntl();\r\n const { currentDocumentMeta } = useDocumentContext('DynamicComponent');\r\n const isDesktop = useIsDesktop();\r\n\r\n const {\r\n edit: { components },\r\n } = useDocumentLayout(currentDocumentMeta.model);\r\n\r\n const { mainField = 'id' } = componentUid ? (components[componentUid]?.settings ?? {}) : {};\r\n\r\n const mainFieldValue = useForm('DynamicComponent', (state) =>\r\n getIn(state.values, `${name}.${index}.${mainField}`)\r\n );\r\n\r\n const displayedValue = mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();\r\n const displayTitle = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\r\n\r\n const { icon, displayName } = React.useMemo(() => {\r\n if (!componentUid) {\r\n return {\r\n icon: null,\r\n displayName: formatMessage({\r\n id: getTranslation('components.DynamicZone.unknown-component'),\r\n defaultMessage: 'Unknown component',\r\n }),\r\n };\r\n }\r\n\r\n const [category] = componentUid.split('.');\r\n const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\r\n (component) => component.uid === componentUid\r\n ) ?? { icon: null, displayName: null };\r\n\r\n return {\r\n icon,\r\n displayName: formatMessage({\r\n id: componentUid,\r\n defaultMessage: displayName || componentUid,\r\n }),\r\n };\r\n }, [componentUid, dynamicComponentsByCategory, formatMessage]);\r\n\r\n const tempKey = useForm('DynamicComponent', (state) =>\r\n getIn(state.values, `${name}.${index}.__temp_key__`)\r\n ) as string | undefined;\r\n\r\n const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\r\n useDragAndDrop(!disabled, {\r\n type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\r\n index,\r\n item: {\r\n index,\r\n id: tempKey,\r\n displayedValue: `${displayName} ${displayTitle}`,\r\n icon,\r\n },\r\n onMoveItem: onMoveComponent,\r\n onDropItem,\r\n onGrabItem,\r\n onCancel,\r\n });\r\n\r\n React.useEffect(() => {\r\n dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\r\n }, [dragPreviewRef, index]);\r\n\r\n const accordionValue = React.useId();\r\n\r\n /**\r\n * Ref for the component container `<li>`, used to scroll the newly added\r\n * component into view when `forceOpen` is set by the parent.\r\n */\r\n const componentRef = React.useRef<HTMLLIElement>(null);\r\n\r\n const componentPath = `${name}.${index}`;\r\n const hasValue = useForm(\r\n 'DynamicComponent',\r\n (state) => getIn(state.values, componentPath) != null\r\n );\r\n const isNewItem = useForm(\r\n 'DynamicComponent',\r\n (state) => getIn<{ id?: unknown }>(state.values, componentPath)?.id == null\r\n );\r\n const rawError = useForm('DynamicComponent', (state) => getIn(state.errors, componentPath));\r\n\r\n const [collapseToOpen, setCollapseToOpen] = React.useState<string>(\r\n isNewItem ? accordionValue : ''\r\n );\r\n\r\n React.useEffect(() => {\r\n if (rawError && hasValue) {\r\n setCollapseToOpen(accordionValue);\r\n }\r\n }, [rawError, hasValue, accordionValue]);\r\n\r\n /**\r\n * When the parent flags this component as newly added via `forceOpen`,\r\n * expand the accordion and scroll it into view so the user can immediately\r\n * start editing. Once handled, notify the parent so it can clear the flag.\r\n */\r\n React.useEffect(() => {\r\n if (forceOpen) {\r\n setCollapseToOpen(accordionValue);\r\n requestAnimationFrame(() => {\r\n componentRef.current?.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'center',\r\n });\r\n onForceOpenHandled?.();\r\n });\r\n }\r\n }, [forceOpen, accordionValue, onForceOpenHandled]);\r\n\r\n const composedBoxRefs = useComposedRefs(boxRef, dropRef);\r\n\r\n const canMoveUp = index > 0;\r\n const canMoveDown = index < totalLength - 1;\r\n const handleRemoveCurrentComponent = React.useCallback(() => {\r\n onRemoveComponentClick(index);\r\n }, [onRemoveComponentClick, index]);\r\n\r\n const accordionActions = disabled ? null : (\r\n <>\r\n <IconButton\r\n variant=\"ghost\"\r\n label={formatMessage(\r\n {\r\n id: getTranslation('components.DynamicZone.delete-label'),\r\n defaultMessage: 'Delete {name}',\r\n },\r\n { name: displayTitle }\r\n )}\r\n onClick={handleRemoveCurrentComponent}\r\n >\r\n <Trash />\r\n </IconButton>\r\n {isDesktop && (\r\n <IconButton\r\n variant=\"ghost\"\r\n onClick={(e) => e.stopPropagation()}\r\n data-handler-id={handlerId}\r\n ref={dragRef}\r\n label={formatMessage({\r\n id: getTranslation('components.DragHandle-label'),\r\n defaultMessage: 'Drag',\r\n })}\r\n onKeyDown={handleKeyDown}\r\n >\r\n <Drag />\r\n </IconButton>\r\n )}\r\n {!isDesktop && (\r\n <>\r\n {canMoveUp && (\r\n <IconButton\r\n variant=\"ghost\"\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n onMoveComponent(index - 1, index);\r\n }}\r\n disabled={!canMoveUp}\r\n label={formatMessage({\r\n id: getTranslation('components.DynamicZone.move-up'),\r\n defaultMessage: 'Move up',\r\n })}\r\n >\r\n <ArrowUp />\r\n </IconButton>\r\n )}\r\n {canMoveDown && (\r\n <IconButton\r\n variant=\"ghost\"\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n onMoveComponent(index + 1, index);\r\n }}\r\n disabled={!canMoveDown}\r\n label={formatMessage({\r\n id: getTranslation('components.DynamicZone.move-down'),\r\n defaultMessage: 'Move down',\r\n })}\r\n >\r\n <ArrowDown />\r\n </IconButton>\r\n )}\r\n </>\r\n )}\r\n <Menu.Root>\r\n <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\r\n <IconButton\r\n variant=\"ghost\"\r\n label={formatMessage({\r\n id: getTranslation('components.DynamicZone.more-actions'),\r\n defaultMessage: 'More actions',\r\n })}\r\n tag=\"span\"\r\n >\r\n <More aria-hidden focusable={false} />\r\n </IconButton>\r\n </Menu.Trigger>\r\n <Menu.Content>\r\n <Menu.SubRoot>\r\n <Menu.SubTrigger>\r\n {formatMessage({\r\n id: getTranslation('components.DynamicZone.add-item-above'),\r\n defaultMessage: 'Add component above',\r\n })}\r\n </Menu.SubTrigger>\r\n <Menu.SubContent>\r\n {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\r\n <React.Fragment key={category}>\r\n <Menu.Label>\r\n {formatMessage({ id: category, defaultMessage: upperFirst(category) })}\r\n </Menu.Label>\r\n {components.map(({ displayName, uid }) => (\r\n <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index)}>\r\n {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\r\n </Menu.Item>\r\n ))}\r\n </React.Fragment>\r\n ))}\r\n </Menu.SubContent>\r\n </Menu.SubRoot>\r\n <Menu.SubRoot>\r\n <Menu.SubTrigger>\r\n {formatMessage({\r\n id: getTranslation('components.DynamicZone.add-item-below'),\r\n defaultMessage: 'Add component below',\r\n })}\r\n </Menu.SubTrigger>\r\n <Menu.SubContent>\r\n {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\r\n <React.Fragment key={category}>\r\n <Menu.Label>\r\n {formatMessage({ id: category, defaultMessage: upperFirst(category) })}\r\n </Menu.Label>\r\n {components.map(({ displayName, uid }) => (\r\n <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index + 1)}>\r\n {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\r\n </Menu.Item>\r\n ))}\r\n </React.Fragment>\r\n ))}\r\n </Menu.SubContent>\r\n </Menu.SubRoot>\r\n </Menu.Content>\r\n </Menu.Root>\r\n </>\r\n );\r\n\r\n const accordionTitle = displayTitle ? `${displayName} ${displayTitle}` : displayName;\r\n\r\n return (\r\n <ComponentContainer ref={componentRef} tag=\"li\" width=\"100%\">\r\n <Flex justifyContent=\"center\">\r\n <Rectangle background=\"neutral200\" />\r\n </Flex>\r\n <StyledBox ref={composedBoxRefs} hasRadius>\r\n {isDragging ? (\r\n <Preview />\r\n ) : (\r\n <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\r\n <Accordion.Item value={accordionValue}>\r\n <Accordion.Header>\r\n <Accordion.Trigger\r\n icon={\r\n icon && COMPONENT_ICONS[icon]\r\n ? COMPONENT_ICONS[icon]\r\n : COMPONENT_ICONS.dashboard\r\n }\r\n >\r\n {accordionTitle}\r\n </Accordion.Trigger>\r\n <Accordion.Actions>{accordionActions}</Accordion.Actions>\r\n </Accordion.Header>\r\n <Accordion.Content>\r\n <AccordionContentRadius background=\"neutral0\">\r\n <DynamicComponentFields\r\n componentUid={componentUid}\r\n index={index}\r\n layout={componentUid ? components[componentUid]?.layout : undefined}\r\n name={name}\r\n >\r\n {children}\r\n </DynamicComponentFields>\r\n </AccordionContentRadius>\r\n </Accordion.Content>\r\n </Accordion.Item>\r\n </Accordion.Root>\r\n )}\r\n </StyledBox>\r\n </ComponentContainer>\r\n );\r\n};\r\n\r\n// TODO: Delete once https://github.com/strapi/design-system/pull/858\r\n// is merged and released.\r\nconst StyledBox = styled<BoxComponent>(Box)`\r\n > div:first-child {\r\n box-shadow: ${({ theme }) => theme.shadows.tableShadow};\r\n }\r\n`;\r\n\r\nconst AccordionContentRadius = styled<BoxComponent>(Box)`\r\n border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};\r\n`;\r\n\r\nconst Rectangle = styled<BoxComponent>(Box)`\r\n width: ${({ theme }) => theme.spaces[2]};\r\n height: ${({ theme }) => theme.spaces[4]};\r\n`;\r\n\r\nconst Preview = styled.span`\r\n display: block;\r\n background-color: ${({ theme }) => theme.colors.primary100};\r\n outline: 1px dashed ${({ theme }) => theme.colors.primary500};\r\n outline-offset: -1px;\r\n padding: ${({ theme }) => theme.spaces[6]};\r\n`;\r\n\r\nconst ComponentContainer = styled<BoxComponent<'li'>>(Box)`\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n`;\r\n\r\ninterface DynamicComponentFieldsProps extends Pick<DynamicComponentProps, 'children'> {\r\n componentUid?: string;\r\n index: number;\r\n layout?: EditFieldLayout[][];\r\n name: string;\r\n}\r\n\r\nconst DynamicComponentFields = React.memo(\r\n ({ children, componentUid, index, layout, name }: DynamicComponentFieldsProps) => {\r\n const { formatMessage } = useIntl();\r\n\r\n return (\r\n <Box padding={{ initial: 4, medium: 6 }}>\r\n <Grid.Root gap={4}>\r\n {layout?.map((row, rowInd) => {\r\n return (\r\n <Grid.Item col={12} key={rowInd} xs={12} direction=\"column\" alignItems=\"stretch\">\r\n <ResponsiveGridRoot gap={4}>\r\n {row.map(({ size, ...field }) => {\r\n const fieldName = `${name}.${index}.${field.name}`;\r\n\r\n const fieldWithTranslatedLabel = {\r\n ...field,\r\n label: formatMessage({\r\n id: `content-manager.components.${componentUid}.${field.name}`,\r\n defaultMessage: field.label,\r\n }),\r\n };\r\n\r\n return (\r\n <ResponsiveGridItem\r\n col={size}\r\n key={fieldName}\r\n s={12}\r\n xs={12}\r\n direction=\"column\"\r\n alignItems=\"stretch\"\r\n >\r\n {children ? (\r\n children({\r\n ...fieldWithTranslatedLabel,\r\n name: fieldName,\r\n })\r\n ) : (\r\n <InputRenderer {...fieldWithTranslatedLabel} name={fieldName} />\r\n )}\r\n </ResponsiveGridItem>\r\n );\r\n })}\r\n </ResponsiveGridRoot>\r\n </Grid.Item>\r\n );\r\n })}\r\n </Grid.Root>\r\n </Box>\r\n );\r\n }\r\n);\r\n\r\nDynamicComponentFields.displayName = 'DynamicComponentFields';\r\n\r\nconst MemoizedDynamicComponent = React.memo(DynamicComponent);\r\n\r\nexport { MemoizedDynamicComponent as DynamicComponent };\r\nexport type { DynamicComponentProps };\r\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","totalLength","children","forceOpen","onForceOpenHandled","formatMessage","useIntl","currentDocumentMeta","useDocumentContext","isDesktop","useIsDesktop","edit","components","useDocumentLayout","model","mainField","settings","mainFieldValue","useForm","state","getIn","values","displayedValue","String","trim","displayTitle","length","icon","displayName","React","useMemo","id","getTranslation","defaultMessage","category","split","find","component","uid","tempKey","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","componentRef","useRef","componentPath","hasValue","isNewItem","rawError","errors","collapseToOpen","setCollapseToOpen","useState","requestAnimationFrame","current","scrollIntoView","behavior","block","composedBoxRefs","useComposedRefs","canMoveUp","canMoveDown","handleRemoveCurrentComponent","useCallback","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","onClick","Trash","e","stopPropagation","data-handler-id","ref","onKeyDown","Drag","ArrowUp","ArrowDown","Menu","Root","Trigger","size","endIcon","paddingLeft","paddingRight","tag","More","aria-hidden","focusable","Content","SubRoot","SubTrigger","SubContent","Object","entries","map","Fragment","Label","upperFirst","Item","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","value","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","DynamicComponentFields","layout","undefined","styled","Box","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500","memo","padding","initial","medium","Grid","gap","row","rowInd","col","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","s","InputRenderer","MemoizedDynamicComponent"],"mappings":"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"}

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

@@ -0,0 +1,396 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useIsDesktop, useForm } from '@strapi/admin/strapi-admin';
+import { Box, Grid, useComposedRefs, IconButton, Menu, Flex, Accordion } from '@strapi/design-system';
+import { Trash, Drag, ArrowUp, ArrowDown, More } from '@strapi/icons';
+import upperFirst from 'lodash/upperFirst';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { COMPONENT_ICONS } from '../../../../../components/ComponentIcon.mjs';
+import { ItemTypes } from '../../../../../constants/dragAndDrop.mjs';
+import { useDocumentContext } from '../../../../../hooks/useDocumentContext.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, totalLength, children, forceOpen, onForceOpenHandled })=>{
+    const { formatMessage } = useIntl();
+    const { currentDocumentMeta } = useDocumentContext('DynamicComponent');
+    const isDesktop = useIsDesktop();
+    const { edit: { components } } = useDocumentLayout(currentDocumentMeta.model);
+    const { mainField = 'id' } = componentUid ? components[componentUid]?.settings ?? {} : {};
+    const mainFieldValue = useForm('DynamicComponent', (state)=>getIn(state.values, `${name}.${index}.${mainField}`));
+    const displayedValue = mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();
+    const displayTitle = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;
+    const { icon, displayName } = React.useMemo(()=>{
+        if (!componentUid) {
+            return {
+                icon: null,
+                displayName: formatMessage({
+                    id: getTranslation('components.DynamicZone.unknown-component'),
+                    defaultMessage: 'Unknown component'
+                })
+            };
+        }
+        const [category] = componentUid.split('.');
+        const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find((component)=>component.uid === componentUid) ?? {
+            icon: null,
+            displayName: null
+        };
+        return {
+            icon,
+            displayName: formatMessage({
+                id: componentUid,
+                defaultMessage: displayName || componentUid
+            })
+        };
+    }, [
+        componentUid,
+        dynamicComponentsByCategory,
+        formatMessage
+    ]);
+    const tempKey = useForm('DynamicComponent', (state)=>getIn(state.values, `${name}.${index}.__temp_key__`));
+    const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
+        type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,
+        index,
+        item: {
+            index,
+            id: tempKey,
+            displayedValue: `${displayName} ${displayTitle}`,
+            icon
+        },
+        onMoveItem: onMoveComponent,
+        onDropItem,
+        onGrabItem,
+        onCancel
+    });
+    React.useEffect(()=>{
+        dragPreviewRef(getEmptyImage(), {
+            captureDraggingState: false
+        });
+    }, [
+        dragPreviewRef,
+        index
+    ]);
+    const accordionValue = React.useId();
+    /**
+   * Ref for the component container `<li>`, used to scroll the newly added
+   * component into view when `forceOpen` is set by the parent.
+   */ const componentRef = React.useRef(null);
+    const componentPath = `${name}.${index}`;
+    const hasValue = useForm('DynamicComponent', (state)=>getIn(state.values, componentPath) != null);
+    const isNewItem = useForm('DynamicComponent', (state)=>getIn(state.values, componentPath)?.id == null);
+    const rawError = useForm('DynamicComponent', (state)=>getIn(state.errors, componentPath));
+    const [collapseToOpen, setCollapseToOpen] = React.useState(isNewItem ? accordionValue : '');
+    React.useEffect(()=>{
+        if (rawError && hasValue) {
+            setCollapseToOpen(accordionValue);
+        }
+    }, [
+        rawError,
+        hasValue,
+        accordionValue
+    ]);
+    /**
+   * When the parent flags this component as newly added via `forceOpen`,
+   * expand the accordion and scroll it into view so the user can immediately
+   * start editing. Once handled, notify the parent so it can clear the flag.
+   */ React.useEffect(()=>{
+        if (forceOpen) {
+            setCollapseToOpen(accordionValue);
+            requestAnimationFrame(()=>{
+                componentRef.current?.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center'
+                });
+                onForceOpenHandled?.();
+            });
+        }
+    }, [
+        forceOpen,
+        accordionValue,
+        onForceOpenHandled
+    ]);
+    const composedBoxRefs = useComposedRefs(boxRef, dropRef);
+    const canMoveUp = index > 0;
+    const canMoveDown = index < totalLength - 1;
+    const handleRemoveCurrentComponent = React.useCallback(()=>{
+        onRemoveComponentClick(index);
+    }, [
+        onRemoveComponentClick,
+        index
+    ]);
+    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: displayTitle
+                }),
+                onClick: handleRemoveCurrentComponent,
+                children: /*#__PURE__*/ jsx(Trash, {})
+            }),
+            isDesktop && /*#__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, {})
+            }),
+            !isDesktop && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    canMoveUp && /*#__PURE__*/ jsx(IconButton, {
+                        variant: "ghost",
+                        onClick: (e)=>{
+                            e.stopPropagation();
+                            onMoveComponent(index - 1, index);
+                        },
+                        disabled: !canMoveUp,
+                        label: formatMessage({
+                            id: getTranslation('components.DynamicZone.move-up'),
+                            defaultMessage: 'Move up'
+                        }),
+                        children: /*#__PURE__*/ jsx(ArrowUp, {})
+                    }),
+                    canMoveDown && /*#__PURE__*/ jsx(IconButton, {
+                        variant: "ghost",
+                        onClick: (e)=>{
+                            e.stopPropagation();
+                            onMoveComponent(index + 1, index);
+                        },
+                        disabled: !canMoveDown,
+                        label: formatMessage({
+                            id: getTranslation('components.DynamicZone.move-down'),
+                            defaultMessage: 'Move down'
+                        }),
+                        children: /*#__PURE__*/ jsx(ArrowDown, {})
+                    })
+                ]
+            }),
+            /*#__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: formatMessage({
+                                                            id: category,
+                                                            defaultMessage: upperFirst(category)
+                                                        })
+                                                    }),
+                                                    components.map(({ displayName, uid })=>/*#__PURE__*/ jsx(Menu.Item, {
+                                                            onSelect: ()=>onAddComponent(uid, index),
+                                                            children: formatMessage({
+                                                                id: uid,
+                                                                defaultMessage: displayName ?? uid
+                                                            })
+                                                        }, uid))
+                                                ]
+                                            }, 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: formatMessage({
+                                                            id: category,
+                                                            defaultMessage: upperFirst(category)
+                                                        })
+                                                    }),
+                                                    components.map(({ displayName, uid })=>/*#__PURE__*/ jsx(Menu.Item, {
+                                                            onSelect: ()=>onAddComponent(uid, index + 1),
+                                                            children: formatMessage({
+                                                                id: uid,
+                                                                defaultMessage: displayName ?? uid
+                                                            })
+                                                        }, uid))
+                                                ]
+                                            }, category))
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+    const accordionTitle = displayTitle ? `${displayName} ${displayTitle}` : displayName;
+    return /*#__PURE__*/ jsxs(ComponentContainer, {
+        ref: componentRef,
+        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(DynamicComponentFields, {
+                                        componentUid: componentUid,
+                                        index: index,
+                                        layout: componentUid ? components[componentUid]?.layout : undefined,
+                                        name: name,
+                                        children: children
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+};
+// 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;
+`;
+const DynamicComponentFields = /*#__PURE__*/ React.memo(({ children, componentUid, index, layout, name })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsx(Box, {
+        padding: {
+            initial: 4,
+            medium: 6
+        },
+        children: /*#__PURE__*/ jsx(Grid.Root, {
+            gap: 4,
+            children: layout?.map((row, rowInd)=>{
+                return /*#__PURE__*/ jsx(Grid.Item, {
+                    col: 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,
+                                    name: fieldName
+                                }) : /*#__PURE__*/ jsx(MemoizedInputRenderer, {
+                                    ...fieldWithTranslatedLabel,
+                                    name: fieldName
+                                })
+                            }, fieldName);
+                        })
+                    })
+                }, rowInd);
+            })
+        })
+    });
+});
+DynamicComponentFields.displayName = 'DynamicComponentFields';
+const MemoizedDynamicComponent = /*#__PURE__*/ React.memo(DynamicComponent);
+export { MemoizedDynamicComponent as DynamicComponent };
+//# sourceMappingURL=DynamicComponent.mjs.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"DynamicComponent.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { useForm, useIsDesktop } from '@strapi/admin/strapi-admin';\r\nimport {\r\n Accordion,\r\n Box,\r\n Flex,\r\n Grid,\r\n IconButton,\r\n useComposedRefs,\r\n Menu,\r\n BoxComponent,\r\n} from '@strapi/design-system';\r\nimport { Drag, More, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\r\nimport upperFirst from 'lodash/upperFirst';\r\nimport { getEmptyImage } from 'react-dnd-html5-backend';\r\nimport { useIntl } from 'react-intl';\r\nimport { styled } from 'styled-components';\r\n\r\nimport { COMPONENT_ICONS } from '../../../../../components/ComponentIcon';\r\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\r\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\r\nimport { type EditFieldLayout, useDocumentLayout } from '../../../../../hooks/useDocumentLayout';\r\nimport { type UseDragAndDropOptions, useDragAndDrop } from '../../../../../hooks/useDragAndDrop';\r\nimport { getIn } from '../../../../../utils/objects';\r\nimport { getTranslation } from '../../../../../utils/translations';\r\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\r\nimport { InputRenderer, type InputRendererProps } from '../../InputRenderer';\r\n\r\nimport type { ComponentPickerProps } from './ComponentPicker';\r\n\r\ninterface DynamicComponentProps\r\n extends Pick<UseDragAndDropOptions, 'onGrabItem' | 'onDropItem' | 'onCancel'>,\r\n Pick<ComponentPickerProps, 'dynamicComponentsByCategory'> {\r\n componentUid?: string;\r\n disabled?: boolean;\r\n index: number;\r\n name: string;\r\n onAddComponent: (componentUid: string, index: number) => void;\r\n onRemoveComponentClick: (index: number) => void;\r\n onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\r\n totalLength: number;\r\n children?: (props: InputRendererProps) => React.ReactNode;\r\n /**\r\n * When true, the component's accordion will be forced open and scrolled into view.\r\n * Used by the parent DynamicZone to auto-expand newly added components.\r\n */\r\n forceOpen?: boolean;\r\n /**\r\n * Called after the forceOpen has been handled (accordion opened + scrolled),\r\n * so the parent can clear the forced state.\r\n */\r\n onForceOpenHandled?: () => void;\r\n}\r\n\r\nconst DynamicComponent = ({\r\n componentUid,\r\n disabled,\r\n index,\r\n name,\r\n onRemoveComponentClick,\r\n onMoveComponent,\r\n onGrabItem,\r\n onDropItem,\r\n onCancel,\r\n dynamicComponentsByCategory = {},\r\n onAddComponent,\r\n totalLength,\r\n children,\r\n forceOpen,\r\n onForceOpenHandled,\r\n}: DynamicComponentProps) => {\r\n const { formatMessage } = useIntl();\r\n const { currentDocumentMeta } = useDocumentContext('DynamicComponent');\r\n const isDesktop = useIsDesktop();\r\n\r\n const {\r\n edit: { components },\r\n } = useDocumentLayout(currentDocumentMeta.model);\r\n\r\n const { mainField = 'id' } = componentUid ? (components[componentUid]?.settings ?? {}) : {};\r\n\r\n const mainFieldValue = useForm('DynamicComponent', (state) =>\r\n getIn(state.values, `${name}.${index}.${mainField}`)\r\n );\r\n\r\n const displayedValue = mainField === 'id' || !mainFieldValue ? '' : String(mainFieldValue).trim();\r\n const displayTitle = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\r\n\r\n const { icon, displayName } = React.useMemo(() => {\r\n if (!componentUid) {\r\n return {\r\n icon: null,\r\n displayName: formatMessage({\r\n id: getTranslation('components.DynamicZone.unknown-component'),\r\n defaultMessage: 'Unknown component',\r\n }),\r\n };\r\n }\r\n\r\n const [category] = componentUid.split('.');\r\n const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\r\n (component) => component.uid === componentUid\r\n ) ?? { icon: null, displayName: null };\r\n\r\n return {\r\n icon,\r\n displayName: formatMessage({\r\n id: componentUid,\r\n defaultMessage: displayName || componentUid,\r\n }),\r\n };\r\n }, [componentUid, dynamicComponentsByCategory, formatMessage]);\r\n\r\n const tempKey = useForm('DynamicComponent', (state) =>\r\n getIn(state.values, `${name}.${index}.__temp_key__`)\r\n ) as string | undefined;\r\n\r\n const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\r\n useDragAndDrop(!disabled, {\r\n type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\r\n index,\r\n item: {\r\n index,\r\n id: tempKey,\r\n displayedValue: `${displayName} ${displayTitle}`,\r\n icon,\r\n },\r\n onMoveItem: onMoveComponent,\r\n onDropItem,\r\n onGrabItem,\r\n onCancel,\r\n });\r\n\r\n React.useEffect(() => {\r\n dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\r\n }, [dragPreviewRef, index]);\r\n\r\n const accordionValue = React.useId();\r\n\r\n /**\r\n * Ref for the component container `<li>`, used to scroll the newly added\r\n * component into view when `forceOpen` is set by the parent.\r\n */\r\n const componentRef = React.useRef<HTMLLIElement>(null);\r\n\r\n const componentPath = `${name}.${index}`;\r\n const hasValue = useForm(\r\n 'DynamicComponent',\r\n (state) => getIn(state.values, componentPath) != null\r\n );\r\n const isNewItem = useForm(\r\n 'DynamicComponent',\r\n (state) => getIn<{ id?: unknown }>(state.values, componentPath)?.id == null\r\n );\r\n const rawError = useForm('DynamicComponent', (state) => getIn(state.errors, componentPath));\r\n\r\n const [collapseToOpen, setCollapseToOpen] = React.useState<string>(\r\n isNewItem ? accordionValue : ''\r\n );\r\n\r\n React.useEffect(() => {\r\n if (rawError && hasValue) {\r\n setCollapseToOpen(accordionValue);\r\n }\r\n }, [rawError, hasValue, accordionValue]);\r\n\r\n /**\r\n * When the parent flags this component as newly added via `forceOpen`,\r\n * expand the accordion and scroll it into view so the user can immediately\r\n * start editing. Once handled, notify the parent so it can clear the flag.\r\n */\r\n React.useEffect(() => {\r\n if (forceOpen) {\r\n setCollapseToOpen(accordionValue);\r\n requestAnimationFrame(() => {\r\n componentRef.current?.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'center',\r\n });\r\n onForceOpenHandled?.();\r\n });\r\n }\r\n }, [forceOpen, accordionValue, onForceOpenHandled]);\r\n\r\n const composedBoxRefs = useComposedRefs(boxRef, dropRef);\r\n\r\n const canMoveUp = index > 0;\r\n const canMoveDown = index < totalLength - 1;\r\n const handleRemoveCurrentComponent = React.useCallback(() => {\r\n onRemoveComponentClick(index);\r\n }, [onRemoveComponentClick, index]);\r\n\r\n const accordionActions = disabled ? null : (\r\n <>\r\n <IconButton\r\n variant=\"ghost\"\r\n label={formatMessage(\r\n {\r\n id: getTranslation('components.DynamicZone.delete-label'),\r\n defaultMessage: 'Delete {name}',\r\n },\r\n { name: displayTitle }\r\n )}\r\n onClick={handleRemoveCurrentComponent}\r\n >\r\n <Trash />\r\n </IconButton>\r\n {isDesktop && (\r\n <IconButton\r\n variant=\"ghost\"\r\n onClick={(e) => e.stopPropagation()}\r\n data-handler-id={handlerId}\r\n ref={dragRef}\r\n label={formatMessage({\r\n id: getTranslation('components.DragHandle-label'),\r\n defaultMessage: 'Drag',\r\n })}\r\n onKeyDown={handleKeyDown}\r\n >\r\n <Drag />\r\n </IconButton>\r\n )}\r\n {!isDesktop && (\r\n <>\r\n {canMoveUp && (\r\n <IconButton\r\n variant=\"ghost\"\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n onMoveComponent(index - 1, index);\r\n }}\r\n disabled={!canMoveUp}\r\n label={formatMessage({\r\n id: getTranslation('components.DynamicZone.move-up'),\r\n defaultMessage: 'Move up',\r\n })}\r\n >\r\n <ArrowUp />\r\n </IconButton>\r\n )}\r\n {canMoveDown && (\r\n <IconButton\r\n variant=\"ghost\"\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n onMoveComponent(index + 1, index);\r\n }}\r\n disabled={!canMoveDown}\r\n label={formatMessage({\r\n id: getTranslation('components.DynamicZone.move-down'),\r\n defaultMessage: 'Move down',\r\n })}\r\n >\r\n <ArrowDown />\r\n </IconButton>\r\n )}\r\n </>\r\n )}\r\n <Menu.Root>\r\n <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\r\n <IconButton\r\n variant=\"ghost\"\r\n label={formatMessage({\r\n id: getTranslation('components.DynamicZone.more-actions'),\r\n defaultMessage: 'More actions',\r\n })}\r\n tag=\"span\"\r\n >\r\n <More aria-hidden focusable={false} />\r\n </IconButton>\r\n </Menu.Trigger>\r\n <Menu.Content>\r\n <Menu.SubRoot>\r\n <Menu.SubTrigger>\r\n {formatMessage({\r\n id: getTranslation('components.DynamicZone.add-item-above'),\r\n defaultMessage: 'Add component above',\r\n })}\r\n </Menu.SubTrigger>\r\n <Menu.SubContent>\r\n {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\r\n <React.Fragment key={category}>\r\n <Menu.Label>\r\n {formatMessage({ id: category, defaultMessage: upperFirst(category) })}\r\n </Menu.Label>\r\n {components.map(({ displayName, uid }) => (\r\n <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index)}>\r\n {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\r\n </Menu.Item>\r\n ))}\r\n </React.Fragment>\r\n ))}\r\n </Menu.SubContent>\r\n </Menu.SubRoot>\r\n <Menu.SubRoot>\r\n <Menu.SubTrigger>\r\n {formatMessage({\r\n id: getTranslation('components.DynamicZone.add-item-below'),\r\n defaultMessage: 'Add component below',\r\n })}\r\n </Menu.SubTrigger>\r\n <Menu.SubContent>\r\n {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\r\n <React.Fragment key={category}>\r\n <Menu.Label>\r\n {formatMessage({ id: category, defaultMessage: upperFirst(category) })}\r\n </Menu.Label>\r\n {components.map(({ displayName, uid }) => (\r\n <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index + 1)}>\r\n {formatMessage({ id: uid, defaultMessage: displayName ?? uid })}\r\n </Menu.Item>\r\n ))}\r\n </React.Fragment>\r\n ))}\r\n </Menu.SubContent>\r\n </Menu.SubRoot>\r\n </Menu.Content>\r\n </Menu.Root>\r\n </>\r\n );\r\n\r\n const accordionTitle = displayTitle ? `${displayName} ${displayTitle}` : displayName;\r\n\r\n return (\r\n <ComponentContainer ref={componentRef} tag=\"li\" width=\"100%\">\r\n <Flex justifyContent=\"center\">\r\n <Rectangle background=\"neutral200\" />\r\n </Flex>\r\n <StyledBox ref={composedBoxRefs} hasRadius>\r\n {isDragging ? (\r\n <Preview />\r\n ) : (\r\n <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\r\n <Accordion.Item value={accordionValue}>\r\n <Accordion.Header>\r\n <Accordion.Trigger\r\n icon={\r\n icon && COMPONENT_ICONS[icon]\r\n ? COMPONENT_ICONS[icon]\r\n : COMPONENT_ICONS.dashboard\r\n }\r\n >\r\n {accordionTitle}\r\n </Accordion.Trigger>\r\n <Accordion.Actions>{accordionActions}</Accordion.Actions>\r\n </Accordion.Header>\r\n <Accordion.Content>\r\n <AccordionContentRadius background=\"neutral0\">\r\n <DynamicComponentFields\r\n componentUid={componentUid}\r\n index={index}\r\n layout={componentUid ? components[componentUid]?.layout : undefined}\r\n name={name}\r\n >\r\n {children}\r\n </DynamicComponentFields>\r\n </AccordionContentRadius>\r\n </Accordion.Content>\r\n </Accordion.Item>\r\n </Accordion.Root>\r\n )}\r\n </StyledBox>\r\n </ComponentContainer>\r\n );\r\n};\r\n\r\n// TODO: Delete once https://github.com/strapi/design-system/pull/858\r\n// is merged and released.\r\nconst StyledBox = styled<BoxComponent>(Box)`\r\n > div:first-child {\r\n box-shadow: ${({ theme }) => theme.shadows.tableShadow};\r\n }\r\n`;\r\n\r\nconst AccordionContentRadius = styled<BoxComponent>(Box)`\r\n border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};\r\n`;\r\n\r\nconst Rectangle = styled<BoxComponent>(Box)`\r\n width: ${({ theme }) => theme.spaces[2]};\r\n height: ${({ theme }) => theme.spaces[4]};\r\n`;\r\n\r\nconst Preview = styled.span`\r\n display: block;\r\n background-color: ${({ theme }) => theme.colors.primary100};\r\n outline: 1px dashed ${({ theme }) => theme.colors.primary500};\r\n outline-offset: -1px;\r\n padding: ${({ theme }) => theme.spaces[6]};\r\n`;\r\n\r\nconst ComponentContainer = styled<BoxComponent<'li'>>(Box)`\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n`;\r\n\r\ninterface DynamicComponentFieldsProps extends Pick<DynamicComponentProps, 'children'> {\r\n componentUid?: string;\r\n index: number;\r\n layout?: EditFieldLayout[][];\r\n name: string;\r\n}\r\n\r\nconst DynamicComponentFields = React.memo(\r\n ({ children, componentUid, index, layout, name }: DynamicComponentFieldsProps) => {\r\n const { formatMessage } = useIntl();\r\n\r\n return (\r\n <Box padding={{ initial: 4, medium: 6 }}>\r\n <Grid.Root gap={4}>\r\n {layout?.map((row, rowInd) => {\r\n return (\r\n <Grid.Item col={12} key={rowInd} xs={12} direction=\"column\" alignItems=\"stretch\">\r\n <ResponsiveGridRoot gap={4}>\r\n {row.map(({ size, ...field }) => {\r\n const fieldName = `${name}.${index}.${field.name}`;\r\n\r\n const fieldWithTranslatedLabel = {\r\n ...field,\r\n label: formatMessage({\r\n id: `content-manager.components.${componentUid}.${field.name}`,\r\n defaultMessage: field.label,\r\n }),\r\n };\r\n\r\n return (\r\n <ResponsiveGridItem\r\n col={size}\r\n key={fieldName}\r\n s={12}\r\n xs={12}\r\n direction=\"column\"\r\n alignItems=\"stretch\"\r\n >\r\n {children ? (\r\n children({\r\n ...fieldWithTranslatedLabel,\r\n name: fieldName,\r\n })\r\n ) : (\r\n <InputRenderer {...fieldWithTranslatedLabel} name={fieldName} />\r\n )}\r\n </ResponsiveGridItem>\r\n );\r\n })}\r\n </ResponsiveGridRoot>\r\n </Grid.Item>\r\n );\r\n })}\r\n </Grid.Root>\r\n </Box>\r\n );\r\n }\r\n);\r\n\r\nDynamicComponentFields.displayName = 'DynamicComponentFields';\r\n\r\nconst MemoizedDynamicComponent = React.memo(DynamicComponent);\r\n\r\nexport { MemoizedDynamicComponent as DynamicComponent };\r\nexport type { DynamicComponentProps };\r\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","totalLength","children","forceOpen","onForceOpenHandled","formatMessage","useIntl","currentDocumentMeta","useDocumentContext","isDesktop","useIsDesktop","edit","components","useDocumentLayout","model","mainField","settings","mainFieldValue","useForm","state","getIn","values","displayedValue","String","trim","displayTitle","length","icon","displayName","React","useMemo","id","getTranslation","defaultMessage","category","split","find","component","uid","tempKey","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","componentRef","useRef","componentPath","hasValue","isNewItem","rawError","errors","collapseToOpen","setCollapseToOpen","useState","requestAnimationFrame","current","scrollIntoView","behavior","block","composedBoxRefs","useComposedRefs","canMoveUp","canMoveDown","handleRemoveCurrentComponent","useCallback","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","onClick","Trash","e","stopPropagation","data-handler-id","ref","onKeyDown","Drag","ArrowUp","ArrowDown","Menu","Root","Trigger","size","endIcon","paddingLeft","paddingRight","tag","More","aria-hidden","focusable","Content","SubRoot","SubTrigger","SubContent","Object","entries","map","Fragment","Label","upperFirst","Item","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","value","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","DynamicComponentFields","layout","undefined","styled","Box","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500","memo","padding","initial","medium","Grid","gap","row","rowInd","col","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","s","InputRenderer","MemoizedDynamicComponent"],"mappings":"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"}

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

@@ -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 ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DynamicZoneLabel.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicZoneLabel.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { Box, Flex, Typography } from '@strapi/design-system';\r\n\r\ninterface DynamicZoneLabelProps {\r\n label?: React.ReactNode;\r\n labelAction?: React.ReactNode;\r\n name: string;\r\n numberOfComponents?: number;\r\n required?: boolean;\r\n hint?: React.ReactNode;\r\n}\r\n\r\nconst DynamicZoneLabel = ({\r\n hint,\r\n label,\r\n labelAction,\r\n name,\r\n numberOfComponents = 0,\r\n required,\r\n}: DynamicZoneLabelProps) => {\r\n return (\r\n <Flex justifyContent=\"center\">\r\n <Box\r\n paddingTop={3}\r\n paddingBottom={3}\r\n paddingRight={4}\r\n paddingLeft={4}\r\n borderRadius=\"26px\"\r\n background=\"neutral0\"\r\n shadow=\"filterShadow\"\r\n color=\"neutral500\"\r\n >\r\n <Flex direction=\"column\" justifyContent=\"center\">\r\n <Flex maxWidth=\"35.6rem\">\r\n <Typography variant=\"pi\" textColor=\"neutral600\" fontWeight=\"bold\" ellipsis>\r\n {label || name} \r\n </Typography>\r\n <Typography variant=\"pi\" textColor=\"neutral600\" fontWeight=\"bold\">\r\n ({numberOfComponents})\r\n </Typography>\r\n {required && <Typography textColor=\"danger600\">*</Typography>}\r\n {labelAction && <Box paddingLeft={1}>{labelAction}</Box>}\r\n </Flex>\r\n {hint && (\r\n <Box paddingTop={1} maxWidth=\"35.6rem\">\r\n <Typography variant=\"pi\" textColor=\"neutral600\" ellipsis>\r\n {hint}\r\n </Typography>\r\n </Box>\r\n )}\r\n </Flex>\r\n </Box>\r\n </Flex>\r\n );\r\n};\r\n\r\nexport { DynamicZoneLabel };\r\nexport type { DynamicZoneLabelProps };\r\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,gBAAAA,GAAmB,CAAC,EACxBC,IAAI,EACJC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,kBAAAA,GAAqB,CAAC,EACtBC,QAAQ,EACc,GAAA;AACtB,IAAA,qBACEC,cAAA,CAACC,iBAAAA,EAAAA;QAAKC,cAAAA,EAAe,QAAA;AACnB,QAAA,QAAA,gBAAAF,cAAA,CAACG,gBAAAA,EAAAA;YACCC,UAAAA,EAAY,CAAA;YACZC,aAAAA,EAAe,CAAA;YACfC,YAAAA,EAAc,CAAA;YACdC,WAAAA,EAAa,CAAA;YACbC,YAAAA,EAAa,MAAA;YACbC,UAAAA,EAAW,UAAA;YACXC,MAAAA,EAAO,cAAA;YACPC,KAAAA,EAAM,YAAA;AAEN,YAAA,QAAA,gBAAAC,eAAA,CAACX,iBAAAA,EAAAA;gBAAKY,SAAAA,EAAU,QAAA;gBAASX,cAAAA,EAAe,QAAA;;kCACtCU,eAAA,CAACX,iBAAAA,EAAAA;wBAAKa,QAAAA,EAAS,SAAA;;0CACbF,eAAA,CAACG,uBAAAA,EAAAA;gCAAWC,OAAAA,EAAQ,IAAA;gCAAKC,SAAAA,EAAU,YAAA;gCAAaC,UAAAA,EAAW,MAAA;gCAAOC,QAAQ,EAAA,IAAA;;oCACvExB,KAAAA,IAASE,IAAAA;AAAK,oCAAA;;;0CAEjBe,eAAA,CAACG,uBAAAA,EAAAA;gCAAWC,OAAAA,EAAQ,IAAA;gCAAKC,SAAAA,EAAU,YAAA;gCAAaC,UAAAA,EAAW,MAAA;;AAAO,oCAAA,GAAA;AAC9DpB,oCAAAA,kBAAAA;AAAmB,oCAAA;;;AAEtBC,4BAAAA,QAAAA,kBAAYC,cAAA,CAACe,uBAAAA,EAAAA;gCAAWE,SAAAA,EAAU,WAAA;AAAY,gCAAA,QAAA,EAAA;;AAC9CrB,4BAAAA,WAAAA,kBAAeI,cAAA,CAACG,gBAAAA,EAAAA;gCAAII,WAAAA,EAAa,CAAA;AAAIX,gCAAAA,QAAAA,EAAAA;;;;AAEvCF,oBAAAA,IAAAA,kBACCM,cAAA,CAACG,gBAAAA,EAAAA;wBAAIC,UAAAA,EAAY,CAAA;wBAAGU,QAAAA,EAAS,SAAA;AAC3B,wBAAA,QAAA,gBAAAd,cAAA,CAACe,uBAAAA,EAAAA;4BAAWC,OAAAA,EAAQ,IAAA;4BAAKC,SAAAA,EAAU,YAAA;4BAAaE,QAAQ,EAAA,IAAA;AACrDzB,4BAAAA,QAAAA,EAAAA;;;;;;;AAQjB;;;;"}