npm - @strapi/content-manager - Versions diffs - 5.39.0 → 5.40.0 - Mend

@strapi/content-manager 5.39.0 → 5.40.0

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 (68) hide show

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

@@ -1,7 +1,7 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useForm, useIsDesktop, useField } from '@strapi/admin/strapi-admin';
-import { Box, useComposedRefs, IconButton, Menu, Flex, Accordion, Grid } from '@strapi/design-system';
+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 { getEmptyImage } from 'react-dnd-html5-backend';
 import { useIntl } from 'react-intl';
@@ -18,45 +18,24 @@ import { InputRenderer as MemoizedInputRenderer } from '../../InputRenderer.mjs'
 const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveComponentClick, onMoveComponent, onGrabItem, onDropItem, onCancel, dynamicComponentsByCategory = {}, onAddComponent, totalLength, children })=>{
     const { formatMessage } = useIntl();
-    const formValues = useForm('DynamicComponent', (state)=>state.values);
-    const { currentDocument, currentDocumentMeta } = useDocumentContext('DynamicComponent');
+    const { currentDocumentMeta } = useDocumentContext('DynamicComponent');
     const isDesktop = useIsDesktop();
     const { edit: { components } } = useDocumentLayout(currentDocumentMeta.model);
-    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 { mainField = 'id' } = 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 [category] = componentUid.split('.');
+    const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find((component)=>component.uid === componentUid) ?? {
+        icon: null,
+        displayName: null
+    };
     const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] = useDragAndDrop(!disabled, {
         type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,
         index,
         item: {
             index,
-            displayedValue: `${displayName} ${title}`,
+            displayedValue: `${displayName} ${displayTitle}`,
             icon
         },
         onMoveItem: onMoveComponent,
@@ -76,39 +55,29 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
    * 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(value.id ? '' : accordionValue);
+    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 && value) {
+        if (rawError && hasValue) {
             setCollapseToOpen(accordionValue);
         }
     }, [
         rawError,
-        value,
+        hasValue,
         accordionValue
     ]);
     const composedBoxRefs = useComposedRefs(boxRef, dropRef);
-    const handleMoveUp = React.useCallback((e)=>{
-        e.stopPropagation();
-        if (index > 0) {
-            onMoveComponent(index - 1, index);
-        }
-    }, [
-        index,
-        onMoveComponent
-    ]);
-    const handleMoveDown = React.useCallback((e)=>{
-        e.stopPropagation();
-        if (index < totalLength - 1) {
-            onMoveComponent(index + 1, index);
-        }
-    }, [
-        index,
-        totalLength,
-        onMoveComponent
-    ]);
     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, {
@@ -117,9 +86,9 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                     id: getTranslation('components.DynamicZone.delete-label'),
                     defaultMessage: 'Delete {name}'
                 }, {
-                    name: title
+                    name: displayTitle
                 }),
-                onClick: onRemoveComponentClick,
+                onClick: handleRemoveCurrentComponent,
                 children: /*#__PURE__*/ jsx(Trash, {})
             }),
             isDesktop && /*#__PURE__*/ jsx(IconButton, {
@@ -138,7 +107,10 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                 children: [
                     canMoveUp && /*#__PURE__*/ jsx(IconButton, {
                         variant: "ghost",
-                        onClick: handleMoveUp,
+                        onClick: (e)=>{
+                            e.stopPropagation();
+                            onMoveComponent(index - 1, index);
+                        },
                         disabled: !canMoveUp,
                         label: formatMessage({
                             id: getTranslation('components.DynamicZone.move-up'),
@@ -148,7 +120,10 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                     }),
                     canMoveDown && /*#__PURE__*/ jsx(IconButton, {
                         variant: "ghost",
-                        onClick: handleMoveDown,
+                        onClick: (e)=>{
+                            e.stopPropagation();
+                            onMoveComponent(index + 1, index);
+                        },
                         disabled: !canMoveDown,
                         label: formatMessage({
                             id: getTranslation('components.DynamicZone.move-down'),
@@ -232,7 +207,7 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
             })
         ]
     });
-    const accordionTitle = title ? `${displayName} ${title}` : displayName;
+    const accordionTitle = displayTitle ? `${displayName} ${displayTitle}` : displayName;
     return /*#__PURE__*/ jsxs(ComponentContainer, {
         tag: "li",
         width: "100%",
@@ -266,51 +241,12 @@ const DynamicComponent = ({ componentUid, disabled, index, name, onRemoveCompone
                             /*#__PURE__*/ jsx(Accordion.Content, {
                                 children: /*#__PURE__*/ jsx(AccordionContentRadius, {
                                     background: "neutral0",
-                                    children: /*#__PURE__*/ jsx(Box, {
-                                        padding: {
-                                            initial: 4,
-                                            medium: 6
-                                        },
-                                        children: /*#__PURE__*/ jsx(Grid.Root, {
-                                            gap: 4,
-                                            children: components[componentUid]?.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,
-                                                                    document: currentDocument,
-                                                                    name: fieldName
-                                                                }) : /*#__PURE__*/ jsx(MemoizedInputRenderer, {
-                                                                    ...fieldWithTranslatedLabel,
-                                                                    document: currentDocument,
-                                                                    name: fieldName
-                                                                })
-                                                            }, fieldName);
-                                                        })
-                                                    })
-                                                }, rowInd);
-                                            })
-                                        })
+                                    children: /*#__PURE__*/ jsx(DynamicComponentFields, {
+                                        componentUid: componentUid,
+                                        index: index,
+                                        layout: components[componentUid]?.layout,
+                                        name: name,
+                                        children: children
                                     })
                                 })
                             })
@@ -347,6 +283,55 @@ const ComponentContainer = styled(Box)`
   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 { DynamicComponent };
+export { MemoizedDynamicComponent as DynamicComponent };
 //# sourceMappingURL=DynamicComponent.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DynamicComponent.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useField, useIsDesktop } from '@strapi/admin/strapi-admin';\nimport {\n Accordion,\n Box,\n Flex,\n Grid,\n IconButton,\n useComposedRefs,\n Menu,\n BoxComponent,\n} from '@strapi/design-system';\nimport { Drag, More, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { COMPONENT_ICONS } from '../../../../../components/ComponentIcon';\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { useDocumentLayout } from '../../../../../hooks/useDocumentLayout';\nimport { type UseDragAndDropOptions, useDragAndDrop } from '../../../../../hooks/useDragAndDrop';\nimport { getIn } from '../../../../../utils/objects';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { InputRenderer, type InputRendererProps } from '../../InputRenderer';\n\nimport type { ComponentPickerProps } from './ComponentPicker';\n\ninterface DynamicComponentProps\n extends Pick<UseDragAndDropOptions, 'onGrabItem' \| 'onDropItem' \| 'onCancel'>,\n Pick<ComponentPickerProps, 'dynamicComponentsByCategory'> {\n componentUid: string;\n disabled?: boolean;\n index: number;\n name: string;\n onAddComponent: (componentUid: string, index: number) => void;\n onRemoveComponentClick: () => void;\n onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n totalLength: number;\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 totalLength,\n children,\n}: DynamicComponentProps) => {\n const { formatMessage } = useIntl();\n const formValues = useForm('DynamicComponent', (state) => state.values);\n const { currentDocument, currentDocumentMeta } = useDocumentContext('DynamicComponent');\n const isDesktop = useIsDesktop();\n\n const {\n edit: { components },\n } = useDocumentLayout(currentDocumentMeta.model);\n\n const title = React.useMemo(() => {\n const { mainField } = components[componentUid]?.settings ?? { mainField: 'id' };\n\n const mainFieldValue = getIn(formValues, `${name}.${index}.${mainField}`);\n\n const displayedValue =\n mainField === 'id' \|\| !mainFieldValue ? '' : String(mainFieldValue).trim();\n\n const mainValue = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n return mainValue;\n }, [componentUid, components, formValues, name, index]);\n\n const { icon, displayName } = React.useMemo(() => {\n const [category] = componentUid.split('.');\n const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n (component) => component.uid === componentUid\n ) ?? { icon: null, displayName: null };\n\n return { icon, displayName };\n }, [componentUid, dynamicComponentsByCategory]);\n\n const [{ handlerId, isDragging, handleKeyDown }, boxRef, dropRef, dragRef, dragPreviewRef] =\n useDragAndDrop(!disabled, {\n type: `${ItemTypes.DYNAMIC_ZONE}_${name}`,\n index,\n item: {\n index,\n displayedValue: `${displayName} ${title}`,\n icon,\n },\n onMoveItem: onMoveComponent,\n onDropItem,\n onGrabItem,\n onCancel,\n });\n\n React.useEffect(() => {\n dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n }, [dragPreviewRef, index]);\n\n /*\n We don't need the accordion's to communicate with each other,\n * so a unique value for their state is enough.\n */\n const accordionValue = React.useId();\n\n const { value = [], rawError } = useField(`${name}.${index}`);\n\n const [collapseToOpen, setCollapseToOpen] = React.useState<string>(\n value.id ? '' : accordionValue\n );\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 handleMoveUp = React.useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n if (index > 0) {\n onMoveComponent(index - 1, index);\n }\n },\n [index, onMoveComponent]\n );\n\n const handleMoveDown = React.useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n if (index < totalLength - 1) {\n onMoveComponent(index + 1, index);\n }\n },\n [index, totalLength, onMoveComponent]\n );\n\n const canMoveUp = index > 0;\n const canMoveDown = index < totalLength - 1;\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 {isDesktop && (\n <IconButton\n variant=\"ghost\"\n onClick={(e) => e.stopPropagation()}\n data-handler-id={handlerId}\n ref={dragRef}\n label={formatMessage({\n id: getTranslation('components.DragHandle-label'),\n defaultMessage: 'Drag',\n })}\n onKeyDown={handleKeyDown}\n >\n <Drag />\n </IconButton>\n )}\n {!isDesktop && (\n <>\n {canMoveUp && (\n <IconButton\n variant=\"ghost\"\n onClick={handleMoveUp}\n disabled={!canMoveUp}\n label={formatMessage({\n id: getTranslation('components.DynamicZone.move-up'),\n defaultMessage: 'Move up',\n })}\n >\n <ArrowUp />\n </IconButton>\n )}\n {canMoveDown && (\n <IconButton\n variant=\"ghost\"\n onClick={handleMoveDown}\n disabled={!canMoveDown}\n label={formatMessage({\n id: getTranslation('components.DynamicZone.move-down'),\n defaultMessage: 'Move down',\n })}\n >\n <ArrowDown />\n </IconButton>\n )}\n </>\n )}\n <Menu.Root>\n <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n <IconButton\n variant=\"ghost\"\n label={formatMessage({\n id: getTranslation('components.DynamicZone.more-actions'),\n defaultMessage: 'More actions',\n })}\n tag=\"span\"\n >\n <More aria-hidden focusable={false} />\n </IconButton>\n </Menu.Trigger>\n <Menu.Content>\n <Menu.SubRoot>\n <Menu.SubTrigger>\n {formatMessage({\n id: getTranslation('components.DynamicZone.add-item-above'),\n defaultMessage: 'Add component above',\n })}\n </Menu.SubTrigger>\n <Menu.SubContent>\n {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n <React.Fragment key={category}>\n <Menu.Label>{category}</Menu.Label>\n {components.map(({ displayName, uid }) => (\n <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index)}>\n {displayName}\n </Menu.Item>\n ))}\n </React.Fragment>\n ))}\n </Menu.SubContent>\n </Menu.SubRoot>\n <Menu.SubRoot>\n <Menu.SubTrigger>\n {formatMessage({\n id: getTranslation('components.DynamicZone.add-item-below'),\n defaultMessage: 'Add component below',\n })}\n </Menu.SubTrigger>\n <Menu.SubContent>\n {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n <React.Fragment key={category}>\n <Menu.Label>{category}</Menu.Label>\n {components.map(({ displayName, uid }) => (\n <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index + 1)}>\n {displayName}\n </Menu.Item>\n ))}\n </React.Fragment>\n ))}\n </Menu.SubContent>\n </Menu.SubRoot>\n </Menu.Content>\n </Menu.Root>\n </>\n );\n\n const accordionTitle = title ? `${displayName} ${title}` : displayName;\n\n return (\n <ComponentContainer tag=\"li\" width=\"100%\">\n <Flex justifyContent=\"center\">\n <Rectangle background=\"neutral200\" />\n </Flex>\n <StyledBox ref={composedBoxRefs} hasRadius>\n {isDragging ? (\n <Preview />\n ) : (\n <Accordion.Root value={collapseToOpen} onValueChange={setCollapseToOpen}>\n <Accordion.Item value={accordionValue}>\n <Accordion.Header>\n <Accordion.Trigger\n icon={\n icon && COMPONENT_ICONS[icon]\n ? COMPONENT_ICONS[icon]\n : COMPONENT_ICONS.dashboard\n }\n >\n {accordionTitle}\n </Accordion.Trigger>\n <Accordion.Actions>{accordionActions}</Accordion.Actions>\n </Accordion.Header>\n <Accordion.Content>\n <AccordionContentRadius background=\"neutral0\">\n <Box padding={{ initial: 4, medium: 6 }}>\n <Grid.Root gap={4}>\n {components[componentUid]?.layout?.map((row, rowInd) => {\n return (\n <Grid.Item\n col={12}\n key={rowInd}\n xs={12}\n direction=\"column\"\n alignItems=\"stretch\"\n >\n <ResponsiveGridRoot gap={4}>\n {row.map(({ size, ...field }) => {\n const fieldName = `${name}.${index}.${field.name}`;\n\n const fieldWithTranslatedLabel = {\n ...field,\n label: formatMessage({\n id: `content-manager.components.${componentUid}.${field.name}`,\n defaultMessage: field.label,\n }),\n };\n\n return (\n <ResponsiveGridItem\n col={size}\n key={fieldName}\n s={12}\n xs={12}\n direction=\"column\"\n alignItems=\"stretch\"\n >\n {children ? (\n children({\n ...fieldWithTranslatedLabel,\n document: currentDocument,\n name: fieldName,\n })\n ) : (\n <InputRenderer\n {...fieldWithTranslatedLabel}\n document={currentDocument}\n name={fieldName}\n />\n )}\n </ResponsiveGridItem>\n );\n })}\n </ResponsiveGridRoot>\n </Grid.Item>\n );\n })}\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","totalLength","children","formatMessage","useIntl","formValues","useForm","state","values","currentDocument","currentDocumentMeta","useDocumentContext","isDesktop","useIsDesktop","edit","components","useDocumentLayout","model","title","React","useMemo","mainField","settings","mainFieldValue","getIn","displayedValue","String","trim","mainValue","length","icon","displayName","category","split","find","component","uid","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","value","rawError","useField","collapseToOpen","setCollapseToOpen","useState","id","composedBoxRefs","useComposedRefs","handleMoveUp","useCallback","e","stopPropagation","handleMoveDown","canMoveUp","canMoveDown","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","getTranslation","defaultMessage","onClick","Trash","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","Item","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","Box","padding","initial","medium","Grid","gap","layout","row","rowInd","col","xs","direction","alignItems","ResponsiveGridRoot","field","fieldName","fieldWithTranslatedLabel","ResponsiveGridItem","s","document","InputRenderer","styled","theme","shadows","tableShadow","spaces","span","colors","primary100","primary500"],"mappings":"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"}
1	+ {"version":3,"file":"DynamicComponent.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/DynamicComponent.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useIsDesktop } from '@strapi/admin/strapi-admin';\nimport {\n Accordion,\n Box,\n Flex,\n Grid,\n IconButton,\n useComposedRefs,\n Menu,\n BoxComponent,\n} from '@strapi/design-system';\nimport { Drag, More, Trash, ArrowUp, ArrowDown } from '@strapi/icons';\nimport { getEmptyImage } from 'react-dnd-html5-backend';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { COMPONENT_ICONS } from '../../../../../components/ComponentIcon';\nimport { ItemTypes } from '../../../../../constants/dragAndDrop';\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { type EditFieldLayout, useDocumentLayout } from '../../../../../hooks/useDocumentLayout';\nimport { type UseDragAndDropOptions, useDragAndDrop } from '../../../../../hooks/useDragAndDrop';\nimport { getIn } from '../../../../../utils/objects';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { InputRenderer, type InputRendererProps } from '../../InputRenderer';\n\nimport type { ComponentPickerProps } from './ComponentPicker';\n\ninterface DynamicComponentProps\n extends Pick<UseDragAndDropOptions, 'onGrabItem' \| 'onDropItem' \| 'onCancel'>,\n Pick<ComponentPickerProps, 'dynamicComponentsByCategory'> {\n componentUid: string;\n disabled?: boolean;\n index: number;\n name: string;\n onAddComponent: (componentUid: string, index: number) => void;\n onRemoveComponentClick: (index: number) => void;\n onMoveComponent: (dragIndex: number, hoverIndex: number) => void;\n totalLength: number;\n children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicComponent = ({\n componentUid,\n disabled,\n index,\n name,\n onRemoveComponentClick,\n onMoveComponent,\n onGrabItem,\n onDropItem,\n onCancel,\n dynamicComponentsByCategory = {},\n onAddComponent,\n totalLength,\n children,\n}: DynamicComponentProps) => {\n const { formatMessage } = useIntl();\n const { currentDocumentMeta } = useDocumentContext('DynamicComponent');\n const isDesktop = useIsDesktop();\n\n const {\n edit: { components },\n } = useDocumentLayout(currentDocumentMeta.model);\n\n const { mainField = 'id' } = components[componentUid]?.settings ?? {};\n\n const mainFieldValue = useForm('DynamicComponent', (state) =>\n getIn(state.values, `${name}.${index}.${mainField}`)\n );\n\n const displayedValue = mainField === 'id' \|\| !mainFieldValue ? '' : String(mainFieldValue).trim();\n const displayTitle = displayedValue.length > 0 ? `- ${displayedValue}` : displayedValue;\n\n const [category] = componentUid.split('.');\n const { icon, displayName } = (dynamicComponentsByCategory[category] ?? []).find(\n (component) => component.uid === componentUid\n ) ?? { icon: null, displayName: null };\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} ${displayTitle}`,\n icon,\n },\n onMoveItem: onMoveComponent,\n onDropItem,\n onGrabItem,\n onCancel,\n });\n\n React.useEffect(() => {\n dragPreviewRef(getEmptyImage(), { captureDraggingState: false });\n }, [dragPreviewRef, index]);\n\n /*\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 componentPath = `${name}.${index}`;\n const hasValue = useForm(\n 'DynamicComponent',\n (state) => getIn(state.values, componentPath) != null\n );\n const isNewItem = useForm(\n 'DynamicComponent',\n (state) => getIn(state.values, componentPath)?.id == null\n );\n const rawError = useForm('DynamicComponent', (state) => getIn(state.errors, componentPath));\n\n const [collapseToOpen, setCollapseToOpen] = React.useState<string>(\n isNewItem ? accordionValue : ''\n );\n\n React.useEffect(() => {\n if (rawError && hasValue) {\n setCollapseToOpen(accordionValue);\n }\n }, [rawError, hasValue, accordionValue]);\n\n const composedBoxRefs = useComposedRefs(boxRef, dropRef);\n\n const canMoveUp = index > 0;\n const canMoveDown = index < totalLength - 1;\n const handleRemoveCurrentComponent = React.useCallback(() => {\n onRemoveComponentClick(index);\n }, [onRemoveComponentClick, index]);\n\n const accordionActions = disabled ? null : (\n <>\n <IconButton\n variant=\"ghost\"\n label={formatMessage(\n {\n id: getTranslation('components.DynamicZone.delete-label'),\n defaultMessage: 'Delete {name}',\n },\n { name: displayTitle }\n )}\n onClick={handleRemoveCurrentComponent}\n >\n <Trash />\n </IconButton>\n {isDesktop && (\n <IconButton\n variant=\"ghost\"\n onClick={(e) => e.stopPropagation()}\n data-handler-id={handlerId}\n ref={dragRef}\n label={formatMessage({\n id: getTranslation('components.DragHandle-label'),\n defaultMessage: 'Drag',\n })}\n onKeyDown={handleKeyDown}\n >\n <Drag />\n </IconButton>\n )}\n {!isDesktop && (\n <>\n {canMoveUp && (\n <IconButton\n variant=\"ghost\"\n onClick={(e) => {\n e.stopPropagation();\n onMoveComponent(index - 1, index);\n }}\n disabled={!canMoveUp}\n label={formatMessage({\n id: getTranslation('components.DynamicZone.move-up'),\n defaultMessage: 'Move up',\n })}\n >\n <ArrowUp />\n </IconButton>\n )}\n {canMoveDown && (\n <IconButton\n variant=\"ghost\"\n onClick={(e) => {\n e.stopPropagation();\n onMoveComponent(index + 1, index);\n }}\n disabled={!canMoveDown}\n label={formatMessage({\n id: getTranslation('components.DynamicZone.move-down'),\n defaultMessage: 'Move down',\n })}\n >\n <ArrowDown />\n </IconButton>\n )}\n </>\n )}\n <Menu.Root>\n <Menu.Trigger size=\"S\" endIcon={null} paddingLeft={0} paddingRight={0}>\n <IconButton\n variant=\"ghost\"\n label={formatMessage({\n id: getTranslation('components.DynamicZone.more-actions'),\n defaultMessage: 'More actions',\n })}\n tag=\"span\"\n >\n <More aria-hidden focusable={false} />\n </IconButton>\n </Menu.Trigger>\n <Menu.Content>\n <Menu.SubRoot>\n <Menu.SubTrigger>\n {formatMessage({\n id: getTranslation('components.DynamicZone.add-item-above'),\n defaultMessage: 'Add component above',\n })}\n </Menu.SubTrigger>\n <Menu.SubContent>\n {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n <React.Fragment key={category}>\n <Menu.Label>{category}</Menu.Label>\n {components.map(({ displayName, uid }) => (\n <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index)}>\n {displayName}\n </Menu.Item>\n ))}\n </React.Fragment>\n ))}\n </Menu.SubContent>\n </Menu.SubRoot>\n <Menu.SubRoot>\n <Menu.SubTrigger>\n {formatMessage({\n id: getTranslation('components.DynamicZone.add-item-below'),\n defaultMessage: 'Add component below',\n })}\n </Menu.SubTrigger>\n <Menu.SubContent>\n {Object.entries(dynamicComponentsByCategory).map(([category, components]) => (\n <React.Fragment key={category}>\n <Menu.Label>{category}</Menu.Label>\n {components.map(({ displayName, uid }) => (\n <Menu.Item key={uid} onSelect={() => onAddComponent(uid, index + 1)}>\n {displayName}\n </Menu.Item>\n ))}\n </React.Fragment>\n ))}\n </Menu.SubContent>\n </Menu.SubRoot>\n </Menu.Content>\n </Menu.Root>\n </>\n );\n\n const accordionTitle = displayTitle ? `${displayName} ${displayTitle}` : 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 <DynamicComponentFields\n componentUid={componentUid}\n index={index}\n layout={components[componentUid]?.layout}\n name={name}\n >\n {children}\n </DynamicComponentFields>\n </AccordionContentRadius>\n </Accordion.Content>\n </Accordion.Item>\n </Accordion.Root>\n )}\n </StyledBox>\n </ComponentContainer>\n );\n};\n\n// TODO: Delete once https://github.com/strapi/design-system/pull/858\n// is merged and released.\nconst StyledBox = styled<BoxComponent>(Box)`\n > div:first-child {\n box-shadow: ${({ theme }) => theme.shadows.tableShadow};\n }\n`;\n\nconst AccordionContentRadius = styled<BoxComponent>(Box)`\n border-radius: 0 0 ${({ theme }) => theme.spaces[1]} ${({ theme }) => theme.spaces[1]};\n`;\n\nconst Rectangle = styled<BoxComponent>(Box)`\n width: ${({ theme }) => theme.spaces[2]};\n height: ${({ theme }) => theme.spaces[4]};\n`;\n\nconst Preview = styled.span`\n display: block;\n background-color: ${({ theme }) => theme.colors.primary100};\n outline: 1px dashed ${({ theme }) => theme.colors.primary500};\n outline-offset: -1px;\n padding: ${({ theme }) => theme.spaces[6]};\n`;\n\nconst ComponentContainer = styled<BoxComponent<'li'>>(Box)`\n list-style: none;\n padding: 0;\n margin: 0;\n`;\n\ninterface DynamicComponentFieldsProps extends Pick<DynamicComponentProps, 'children'> {\n componentUid: string;\n index: number;\n layout?: EditFieldLayout[][];\n name: string;\n}\n\nconst DynamicComponentFields = React.memo(\n ({ children, componentUid, index, layout, name }: DynamicComponentFieldsProps) => {\n const { formatMessage } = useIntl();\n\n return (\n <Box padding={{ initial: 4, medium: 6 }}>\n <Grid.Root gap={4}>\n {layout?.map((row, rowInd) => {\n return (\n <Grid.Item col={12} key={rowInd} xs={12} direction=\"column\" alignItems=\"stretch\">\n <ResponsiveGridRoot gap={4}>\n {row.map(({ size, ...field }) => {\n const fieldName = `${name}.${index}.${field.name}`;\n\n const fieldWithTranslatedLabel = {\n ...field,\n label: formatMessage({\n id: `content-manager.components.${componentUid}.${field.name}`,\n defaultMessage: field.label,\n }),\n };\n\n return (\n <ResponsiveGridItem\n col={size}\n key={fieldName}\n s={12}\n xs={12}\n direction=\"column\"\n alignItems=\"stretch\"\n >\n {children ? (\n children({\n ...fieldWithTranslatedLabel,\n name: fieldName,\n })\n ) : (\n <InputRenderer {...fieldWithTranslatedLabel} name={fieldName} />\n )}\n </ResponsiveGridItem>\n );\n })}\n </ResponsiveGridRoot>\n </Grid.Item>\n );\n })}\n </Grid.Root>\n </Box>\n );\n }\n);\n\nDynamicComponentFields.displayName = 'DynamicComponentFields';\n\nconst MemoizedDynamicComponent = React.memo(DynamicComponent);\n\nexport { MemoizedDynamicComponent as DynamicComponent };\nexport type { DynamicComponentProps };\n"],"names":["DynamicComponent","componentUid","disabled","index","name","onRemoveComponentClick","onMoveComponent","onGrabItem","onDropItem","onCancel","dynamicComponentsByCategory","onAddComponent","totalLength","children","formatMessage","useIntl","currentDocumentMeta","useDocumentContext","isDesktop","useIsDesktop","edit","components","useDocumentLayout","model","mainField","settings","mainFieldValue","useForm","state","getIn","values","displayedValue","String","trim","displayTitle","length","category","split","icon","displayName","find","component","uid","handlerId","isDragging","handleKeyDown","boxRef","dropRef","dragRef","dragPreviewRef","useDragAndDrop","type","ItemTypes","DYNAMIC_ZONE","item","onMoveItem","React","useEffect","getEmptyImage","captureDraggingState","accordionValue","useId","componentPath","hasValue","isNewItem","id","rawError","errors","collapseToOpen","setCollapseToOpen","useState","composedBoxRefs","useComposedRefs","canMoveUp","canMoveDown","handleRemoveCurrentComponent","useCallback","accordionActions","_jsxs","_Fragment","_jsx","IconButton","variant","label","getTranslation","defaultMessage","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","Item","onSelect","accordionTitle","ComponentContainer","width","Flex","justifyContent","Rectangle","background","StyledBox","hasRadius","Preview","Accordion","value","onValueChange","Header","COMPONENT_ICONS","dashboard","Actions","AccordionContentRadius","DynamicComponentFields","layout","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/Field.js CHANGED Viewed

@@ -45,11 +45,9 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
     const [liveText, setLiveText] = React__namespace.useState('');
     const { currentDocument: { components, isLoading } } = useDocumentContext.useDocumentContext('DynamicZone');
     const disabled = disabledProp || isLoading;
-    const { addFieldRow, removeFieldRow, moveFieldRow } = strapiAdmin.useForm('DynamicZone', ({ addFieldRow, removeFieldRow, moveFieldRow })=>({
-            addFieldRow,
-            removeFieldRow,
-            moveFieldRow
-        }));
+    const addFieldRow = strapiAdmin.useForm('DynamicZone', (state)=>state.addFieldRow);
+    const removeFieldRow = strapiAdmin.useForm('DynamicZone', (state)=>state.removeFieldRow);
+    const moveFieldRow = strapiAdmin.useForm('DynamicZone', (state)=>state.moveFieldRow);
     const { value = [], error } = strapiAdmin.useField(name);
     const dynamicComponentsByCategory = React__namespace.useMemo(()=>{
         return attribute.components.reduce((acc, componentUid)=>{
@@ -77,7 +75,7 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
     const { formatMessage } = reactIntl.useIntl();
     const { toggleNotification } = strapiAdmin.useNotification();
     const dynamicDisplayedComponentsLength = value.length;
-    const handleAddComponent = (uid, position)=>{
+    const handleAddComponent = React__namespace.useCallback((uid, position)=>{
         setAddComponentIsOpen(false);
         const schema = components[uid];
         const form = forms.createDefaultForm(schema, components);
@@ -87,7 +85,11 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
             }));
         const data$1 = transformations(form);
         addFieldRow(name, data$1, position);
-    };
+    }, [
+        addFieldRow,
+        components,
+        name
+    ]);
     const handleClickOpenPicker = ()=>{
         if (dynamicDisplayedComponentsLength < max) {
             setAddComponentIsOpen((prev)=>!prev);
@@ -100,46 +102,64 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
             });
         }
     };
-    const handleMoveComponent = (newIndex, currentIndex)=>{
+    const handleMoveComponent = React__namespace.useCallback((newIndex, currentIndex)=>{
         setLiveText(formatMessage({
             id: translations.getTranslation('dnd.reorder'),
             defaultMessage: '{item}, moved. New position in list: {position}.'
         }, {
             item: `${name}.${currentIndex}`,
-            position: getItemPos(newIndex)
+            position: `${newIndex + 1} of ${value.length}`
         }));
         moveFieldRow(name, currentIndex, newIndex);
-    };
-    const getItemPos = (index)=>`${index + 1} of ${value.length}`;
-    const handleCancel = (index)=>{
+    }, [
+        formatMessage,
+        moveFieldRow,
+        name,
+        value.length
+    ]);
+    const handleCancel = React__namespace.useCallback((index)=>{
         setLiveText(formatMessage({
             id: translations.getTranslation('dnd.cancel-item'),
             defaultMessage: '{item}, dropped. Re-order cancelled.'
         }, {
             item: `${name}.${index}`
         }));
-    };
-    const handleGrabItem = (index)=>{
+    }, [
+        formatMessage,
+        name
+    ]);
+    const handleGrabItem = React__namespace.useCallback((index)=>{
         setLiveText(formatMessage({
             id: translations.getTranslation('dnd.grab-item'),
             defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
         }, {
             item: `${name}.${index}`,
-            position: getItemPos(index)
+            position: `${index + 1} of ${value.length}`
         }));
-    };
-    const handleDropItem = (index)=>{
+    }, [
+        formatMessage,
+        name,
+        value.length
+    ]);
+    const handleDropItem = React__namespace.useCallback((index)=>{
         setLiveText(formatMessage({
             id: translations.getTranslation('dnd.drop-item'),
             defaultMessage: `{item}, dropped. Final position in list: {position}.`
         }, {
             item: `${name}.${index}`,
-            position: getItemPos(index)
+            position: `${index + 1} of ${value.length}`
         }));
-    };
-    const handleRemoveComponent = (name, currentIndex)=>()=>{
-            removeFieldRow(name, currentIndex);
-        };
+    }, [
+        formatMessage,
+        name,
+        value.length
+    ]);
+    const handleRemoveComponent = React__namespace.useCallback((currentIndex)=>{
+        removeFieldRow(name, currentIndex);
+    }, [
+        name,
+        removeFieldRow
+    ]);
     const hasError = error !== undefined;
     const renderButtonLabel = ()=>{
         if (addComponentIsOpen) {
@@ -218,7 +238,7 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
                                         index: index,
                                         componentUid: field.__component,
                                         onMoveComponent: handleMoveComponent,
-                                        onRemoveComponentClick: handleRemoveComponent(name, index),
+                                        onRemoveComponentClick: handleRemoveComponent,
                                         onCancel: handleCancel,
                                         onDropItem: handleDropItem,
                                         onGrabItem: handleGrabItem,