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

@strapi/content-manager 5.38.1 → 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/Field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Field.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/Field.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n createContext,\n InputProps,\n useField,\n useForm,\n useNotification,\n} from '@strapi/admin/strapi-admin';\nimport { Box, Flex, VisuallyHidden } from '@strapi/design-system';\nimport pipe from 'lodash/fp/pipe';\nimport { useIntl } from 'react-intl';\n\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { type EditFieldLayout } from '../../../../../hooks/useDocumentLayout';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { transformDocument } from '../../../utils/data';\nimport { createDefaultForm } from '../../../utils/forms';\nimport { ComponentProvider, useComponent } from '../ComponentContext';\n\nimport { AddComponentButton } from './AddComponentButton';\nimport { ComponentPicker } from './ComponentPicker';\nimport { DynamicComponent, DynamicComponentProps } from './DynamicComponent';\nimport { DynamicZoneLabel, DynamicZoneLabelProps } from './DynamicZoneLabel';\n\nimport type { InputRendererProps } from '../../InputRenderer';\nimport type { Schema } from '@strapi/types';\n\ninterface DynamicZoneContextValue {\n isInDynamicZone: boolean;\n}\n\nconst [DynamicZoneProvider, useDynamicZone] = createContext<DynamicZoneContextValue>(\n 'DynamicZone',\n {\n isInDynamicZone: false,\n }\n);\n\ninterface DynamicZoneProps\n extends Omit<Extract<EditFieldLayout, { type: 'dynamiczone' }>, 'size' \| 'hint'>,\n Pick<InputProps, 'hint'>,\n Pick<DynamicZoneLabelProps, 'labelAction'> {\n children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicZone = ({\n attribute,\n disabled: disabledProp,\n hint,\n label,\n labelAction,\n name,\n required = false,\n children,\n}: DynamicZoneProps) => {\n // We cannot use the default props here\n const { max = Infinity, min = -Infinity } = attribute ?? {};\n\n const [addComponentIsOpen, setAddComponentIsOpen] = React.useState(false);\n const [liveText, setLiveText] = React.useState('');\n\n const {\n currentDocument: { components, isLoading },\n } = useDocumentContext('DynamicZone');\n\n const disabled = disabledProp \|\| isLoading;\n const { addFieldRow, removeFieldRow, moveFieldRow } = useForm(\n 'DynamicZone',\n ({ addFieldRow, removeFieldRow, moveFieldRow }) => ({\n addFieldRow,\n removeFieldRow,\n moveFieldRow,\n })\n );\n\n type DzWithTempKey =\n Schema.Attribute.GetDynamicZoneValue<Schema.Attribute.DynamicZone>[number] & {\n __temp_key__: number;\n };\n\n const { value = [], error } = useField<Array<DzWithTempKey>>(name);\n\n const dynamicComponentsByCategory = React.useMemo(() => {\n return attribute.components.reduce<\n NonNullable<DynamicComponentProps['dynamicComponentsByCategory']>\n >((acc, componentUid) => {\n const { category, info } = components[componentUid] ?? { info: {} };\n\n const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };\n\n if (!acc[category]) {\n acc[category] = [];\n }\n\n acc[category] = [...acc[category], component];\n\n return acc;\n }, {});\n }, [attribute.components, components]);\n\n const { formatMessage } = useIntl();\n\n const { toggleNotification } = useNotification();\n\n const dynamicDisplayedComponentsLength = value.length;\n\n const handleAddComponent = (uid: string, position?: number) => {\n setAddComponentIsOpen(false);\n\n const schema = components[uid];\n const form = createDefaultForm(schema, components);\n const transformations = pipe(transformDocument(schema, components), (data) => ({\n ...data,\n __component: uid,\n }));\n\n const data = transformations(form);\n\n addFieldRow(name, data, position);\n };\n\n const handleClickOpenPicker = () => {\n if (dynamicDisplayedComponentsLength < max) {\n setAddComponentIsOpen((prev) => !prev);\n } else {\n toggleNotification({\n type: 'info',\n message: formatMessage({\n id: getTranslation('components.notification.info.maximum-requirement'),\n }),\n });\n }\n };\n\n const handleMoveComponent = (newIndex: number, currentIndex: number) => {\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.reorder'),\n defaultMessage: '{item}, moved. New position in list: {position}.',\n },\n {\n item: `${name}.${currentIndex}`,\n position: getItemPos(newIndex),\n }\n )\n );\n\n moveFieldRow(name, currentIndex, newIndex);\n };\n\n const getItemPos = (index: number) => `${index + 1} of ${value.length}`;\n\n const handleCancel = (index: number) => {\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.cancel-item'),\n defaultMessage: '{item}, dropped. Re-order cancelled.',\n },\n {\n item: `${name}.${index}`,\n }\n )\n );\n };\n\n const handleGrabItem = (index: number) => {\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.grab-item'),\n defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,\n },\n {\n item: `${name}.${index}`,\n position: getItemPos(index),\n }\n )\n );\n };\n\n const handleDropItem = (index: number) => {\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.drop-item'),\n defaultMessage: `{item}, dropped. Final position in list: {position}.`,\n },\n {\n item: `${name}.${index}`,\n position: getItemPos(index),\n }\n )\n );\n };\n\n const handleRemoveComponent = (name: string, currentIndex: number) => () => {\n removeFieldRow(name, currentIndex);\n };\n\n const hasError = error !== undefined;\n\n const renderButtonLabel = () => {\n if (addComponentIsOpen) {\n return formatMessage({ id: 'app.utils.close-label', defaultMessage: 'Close' });\n }\n\n if (hasError && dynamicDisplayedComponentsLength > max) {\n return formatMessage(\n {\n id: getTranslation(`components.DynamicZone.extra-components`),\n defaultMessage:\n 'There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}',\n },\n {\n number: dynamicDisplayedComponentsLength - max,\n }\n );\n }\n\n if (hasError && dynamicDisplayedComponentsLength < min) {\n return formatMessage(\n {\n id: getTranslation(`components.DynamicZone.missing-components`),\n defaultMessage:\n 'There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}',\n },\n { number: min - dynamicDisplayedComponentsLength }\n );\n }\n\n return formatMessage(\n {\n id: getTranslation('components.DynamicZone.add-component'),\n defaultMessage: 'Add a component to {componentName}',\n },\n { componentName: label \|\| name }\n );\n };\n\n const level = useComponent('DynamicZone', (state) => state.level);\n\n const ariaDescriptionId = React.useId();\n\n return (\n <DynamicZoneProvider isInDynamicZone>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={{ initial: 4, medium: 6 }}>\n {dynamicDisplayedComponentsLength > 0 && (\n <Box>\n <DynamicZoneLabel\n hint={hint}\n label={label}\n labelAction={labelAction}\n name={name}\n numberOfComponents={dynamicDisplayedComponentsLength}\n required={required}\n />\n <VisuallyHidden id={ariaDescriptionId}>\n {formatMessage({\n id: getTranslation('dnd.instructions'),\n defaultMessage: `Press spacebar to grab and re-order`,\n })}\n </VisuallyHidden>\n <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n <ol aria-describedby={ariaDescriptionId}>\n {value.map((field, index) => (\n <ComponentProvider\n key={field.__temp_key__}\n level={level + 1}\n uid={field.__component}\n // id is always a number in a dynamic zone.\n id={field.id as number}\n type=\"dynamiczone\"\n >\n <DynamicComponent\n disabled={disabled}\n name={name}\n index={index}\n componentUid={field.__component}\n onMoveComponent={handleMoveComponent}\n onRemoveComponentClick={handleRemoveComponent(name, index)}\n onCancel={handleCancel}\n onDropItem={handleDropItem}\n onGrabItem={handleGrabItem}\n onAddComponent={handleAddComponent}\n dynamicComponentsByCategory={dynamicComponentsByCategory}\n totalLength={dynamicDisplayedComponentsLength}\n >\n {children}\n </DynamicComponent>\n </ComponentProvider>\n ))}\n </ol>\n </Box>\n )}\n <Flex justifyContent=\"center\">\n <AddComponentButton\n hasError={hasError}\n isDisabled={disabled}\n isOpen={addComponentIsOpen}\n onClick={handleClickOpenPicker}\n >\n {renderButtonLabel()}\n </AddComponentButton>\n </Flex>\n <ComponentPicker\n dynamicComponentsByCategory={dynamicComponentsByCategory}\n isOpen={addComponentIsOpen}\n onClickAddComponent={handleAddComponent}\n />\n </Flex>\n </DynamicZoneProvider>\n );\n};\n\nexport { DynamicZone, useDynamicZone };\nexport type { DynamicZoneProps };\n"],"names":["DynamicZoneProvider","useDynamicZone","createContext","isInDynamicZone","DynamicZone","attribute","disabled","disabledProp","hint","label","labelAction","name","required","children","max","Infinity","min","addComponentIsOpen","setAddComponentIsOpen","React","useState","liveText","setLiveText","currentDocument","components","isLoading","useDocumentContext","addFieldRow","removeFieldRow","moveFieldRow","useForm","value","error","useField","dynamicComponentsByCategory","useMemo","reduce","acc","componentUid","category","info","component","uid","displayName","icon","formatMessage","useIntl","toggleNotification","useNotification","dynamicDisplayedComponentsLength","length","handleAddComponent","position","schema","form","createDefaultForm","transformations","pipe","transformDocument","data","__component","handleClickOpenPicker","prev","type","message","id","getTranslation","handleMoveComponent","newIndex","currentIndex","defaultMessage","item","getItemPos","index","handleCancel","handleGrabItem","handleDropItem","handleRemoveComponent","hasError","undefined","renderButtonLabel","number","componentName","level","useComponent","state","ariaDescriptionId","useId","_jsx","_jsxs","Flex","direction","alignItems","gap","initial","medium","Box","DynamicZoneLabel","numberOfComponents","VisuallyHidden","aria-live","ol","aria-describedby","map","field","ComponentProvider","DynamicComponent","onMoveComponent","onRemoveComponentClick","onCancel","onDropItem","onGrabItem","onAddComponent","totalLength","__temp_key__","justifyContent","AddComponentButton","isDisabled","isOpen","onClick","ComponentPicker","onClickAddComponent"],"mappings":"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"}
1	+ {"version":3,"file":"Field.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/Field.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n createContext,\n InputProps,\n useField,\n useForm,\n useNotification,\n} from '@strapi/admin/strapi-admin';\nimport { Box, Flex, VisuallyHidden } from '@strapi/design-system';\nimport pipe from 'lodash/fp/pipe';\nimport { useIntl } from 'react-intl';\n\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { type EditFieldLayout } from '../../../../../hooks/useDocumentLayout';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { transformDocument } from '../../../utils/data';\nimport { createDefaultForm } from '../../../utils/forms';\nimport { ComponentProvider, useComponent } from '../ComponentContext';\n\nimport { AddComponentButton } from './AddComponentButton';\nimport { ComponentPicker } from './ComponentPicker';\nimport { DynamicComponent, DynamicComponentProps } from './DynamicComponent';\nimport { DynamicZoneLabel, DynamicZoneLabelProps } from './DynamicZoneLabel';\n\nimport type { InputRendererProps } from '../../InputRenderer';\nimport type { Schema } from '@strapi/types';\n\ninterface DynamicZoneContextValue {\n isInDynamicZone: boolean;\n}\n\nconst [DynamicZoneProvider, useDynamicZone] = createContext<DynamicZoneContextValue>(\n 'DynamicZone',\n {\n isInDynamicZone: false,\n }\n);\n\ninterface DynamicZoneProps\n extends Omit<Extract<EditFieldLayout, { type: 'dynamiczone' }>, 'size' \| 'hint'>,\n Pick<InputProps, 'hint'>,\n Pick<DynamicZoneLabelProps, 'labelAction'> {\n children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicZone = ({\n attribute,\n disabled: disabledProp,\n hint,\n label,\n labelAction,\n name,\n required = false,\n children,\n}: DynamicZoneProps) => {\n // We cannot use the default props here\n const { max = Infinity, min = -Infinity } = attribute ?? {};\n\n const [addComponentIsOpen, setAddComponentIsOpen] = React.useState(false);\n const [liveText, setLiveText] = React.useState('');\n\n const {\n currentDocument: { components, isLoading },\n } = useDocumentContext('DynamicZone');\n\n const disabled = disabledProp \|\| isLoading;\n const addFieldRow = useForm('DynamicZone', (state) => state.addFieldRow);\n const removeFieldRow = useForm('DynamicZone', (state) => state.removeFieldRow);\n const moveFieldRow = useForm('DynamicZone', (state) => state.moveFieldRow);\n\n type DzWithTempKey =\n Schema.Attribute.GetDynamicZoneValue<Schema.Attribute.DynamicZone>[number] & {\n __temp_key__: number;\n };\n\n const { value = [], error } = useField<Array<DzWithTempKey>>(name);\n\n const dynamicComponentsByCategory = React.useMemo(() => {\n return attribute.components.reduce<\n NonNullable<DynamicComponentProps['dynamicComponentsByCategory']>\n >((acc, componentUid) => {\n const { category, info } = components[componentUid] ?? { info: {} };\n\n const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };\n\n if (!acc[category]) {\n acc[category] = [];\n }\n\n acc[category] = [...acc[category], component];\n\n return acc;\n }, {});\n }, [attribute.components, components]);\n\n const { formatMessage } = useIntl();\n\n const { toggleNotification } = useNotification();\n\n const dynamicDisplayedComponentsLength = value.length;\n\n const handleAddComponent = React.useCallback(\n (uid: string, position?: number) => {\n setAddComponentIsOpen(false);\n\n const schema = components[uid];\n const form = createDefaultForm(schema, components);\n const transformations = pipe(transformDocument(schema, components), (data) => ({\n ...data,\n __component: uid,\n }));\n\n const data = transformations(form);\n\n addFieldRow(name, data, position);\n },\n [addFieldRow, components, name]\n );\n\n const handleClickOpenPicker = () => {\n if (dynamicDisplayedComponentsLength < max) {\n setAddComponentIsOpen((prev) => !prev);\n } else {\n toggleNotification({\n type: 'info',\n message: formatMessage({\n id: getTranslation('components.notification.info.maximum-requirement'),\n }),\n });\n }\n };\n\n const handleMoveComponent = React.useCallback(\n (newIndex: number, currentIndex: number) => {\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.reorder'),\n defaultMessage: '{item}, moved. New position in list: {position}.',\n },\n {\n item: `${name}.${currentIndex}`,\n position: `${newIndex + 1} of ${value.length}`,\n }\n )\n );\n\n moveFieldRow(name, currentIndex, newIndex);\n },\n [formatMessage, moveFieldRow, name, value.length]\n );\n\n const handleCancel = React.useCallback(\n (index: number) => {\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.cancel-item'),\n defaultMessage: '{item}, dropped. Re-order cancelled.',\n },\n {\n item: `${name}.${index}`,\n }\n )\n );\n },\n [formatMessage, name]\n );\n\n const handleGrabItem = React.useCallback(\n (index: number) => {\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.grab-item'),\n defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,\n },\n {\n item: `${name}.${index}`,\n position: `${index + 1} of ${value.length}`,\n }\n )\n );\n },\n [formatMessage, name, value.length]\n );\n\n const handleDropItem = React.useCallback(\n (index: number) => {\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.drop-item'),\n defaultMessage: `{item}, dropped. Final position in list: {position}.`,\n },\n {\n item: `${name}.${index}`,\n position: `${index + 1} of ${value.length}`,\n }\n )\n );\n },\n [formatMessage, name, value.length]\n );\n\n const handleRemoveComponent = React.useCallback(\n (currentIndex: number) => {\n removeFieldRow(name, currentIndex);\n },\n [name, removeFieldRow]\n );\n\n const hasError = error !== undefined;\n\n const renderButtonLabel = () => {\n if (addComponentIsOpen) {\n return formatMessage({ id: 'app.utils.close-label', defaultMessage: 'Close' });\n }\n\n if (hasError && dynamicDisplayedComponentsLength > max) {\n return formatMessage(\n {\n id: getTranslation(`components.DynamicZone.extra-components`),\n defaultMessage:\n 'There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}',\n },\n {\n number: dynamicDisplayedComponentsLength - max,\n }\n );\n }\n\n if (hasError && dynamicDisplayedComponentsLength < min) {\n return formatMessage(\n {\n id: getTranslation(`components.DynamicZone.missing-components`),\n defaultMessage:\n 'There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}',\n },\n { number: min - dynamicDisplayedComponentsLength }\n );\n }\n\n return formatMessage(\n {\n id: getTranslation('components.DynamicZone.add-component'),\n defaultMessage: 'Add a component to {componentName}',\n },\n { componentName: label \|\| name }\n );\n };\n\n const level = useComponent('DynamicZone', (state) => state.level);\n\n const ariaDescriptionId = React.useId();\n\n return (\n <DynamicZoneProvider isInDynamicZone>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={{ initial: 4, medium: 6 }}>\n {dynamicDisplayedComponentsLength > 0 && (\n <Box>\n <DynamicZoneLabel\n hint={hint}\n label={label}\n labelAction={labelAction}\n name={name}\n numberOfComponents={dynamicDisplayedComponentsLength}\n required={required}\n />\n <VisuallyHidden id={ariaDescriptionId}>\n {formatMessage({\n id: getTranslation('dnd.instructions'),\n defaultMessage: `Press spacebar to grab and re-order`,\n })}\n </VisuallyHidden>\n <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n <ol aria-describedby={ariaDescriptionId}>\n {value.map((field, index) => (\n <ComponentProvider\n key={field.__temp_key__}\n level={level + 1}\n uid={field.__component}\n // id is always a number in a dynamic zone.\n id={field.id as number}\n type=\"dynamiczone\"\n >\n <DynamicComponent\n disabled={disabled}\n name={name}\n index={index}\n componentUid={field.__component}\n onMoveComponent={handleMoveComponent}\n onRemoveComponentClick={handleRemoveComponent}\n onCancel={handleCancel}\n onDropItem={handleDropItem}\n onGrabItem={handleGrabItem}\n onAddComponent={handleAddComponent}\n dynamicComponentsByCategory={dynamicComponentsByCategory}\n totalLength={dynamicDisplayedComponentsLength}\n >\n {children}\n </DynamicComponent>\n </ComponentProvider>\n ))}\n </ol>\n </Box>\n )}\n <Flex justifyContent=\"center\">\n <AddComponentButton\n hasError={hasError}\n isDisabled={disabled}\n isOpen={addComponentIsOpen}\n onClick={handleClickOpenPicker}\n >\n {renderButtonLabel()}\n </AddComponentButton>\n </Flex>\n <ComponentPicker\n dynamicComponentsByCategory={dynamicComponentsByCategory}\n isOpen={addComponentIsOpen}\n onClickAddComponent={handleAddComponent}\n />\n </Flex>\n </DynamicZoneProvider>\n );\n};\n\nexport { DynamicZone, useDynamicZone };\nexport type { DynamicZoneProps };\n"],"names":["DynamicZoneProvider","useDynamicZone","createContext","isInDynamicZone","DynamicZone","attribute","disabled","disabledProp","hint","label","labelAction","name","required","children","max","Infinity","min","addComponentIsOpen","setAddComponentIsOpen","React","useState","liveText","setLiveText","currentDocument","components","isLoading","useDocumentContext","addFieldRow","useForm","state","removeFieldRow","moveFieldRow","value","error","useField","dynamicComponentsByCategory","useMemo","reduce","acc","componentUid","category","info","component","uid","displayName","icon","formatMessage","useIntl","toggleNotification","useNotification","dynamicDisplayedComponentsLength","length","handleAddComponent","useCallback","position","schema","form","createDefaultForm","transformations","pipe","transformDocument","data","__component","handleClickOpenPicker","prev","type","message","id","getTranslation","handleMoveComponent","newIndex","currentIndex","defaultMessage","item","handleCancel","index","handleGrabItem","handleDropItem","handleRemoveComponent","hasError","undefined","renderButtonLabel","number","componentName","level","useComponent","ariaDescriptionId","useId","_jsx","_jsxs","Flex","direction","alignItems","gap","initial","medium","Box","DynamicZoneLabel","numberOfComponents","VisuallyHidden","aria-live","ol","aria-describedby","map","field","ComponentProvider","DynamicComponent","onMoveComponent","onRemoveComponentClick","onCancel","onDropItem","onGrabItem","onAddComponent","totalLength","__temp_key__","justifyContent","AddComponentButton","isDisabled","isOpen","onClick","ComponentPicker","onClickAddComponent"],"mappings":"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"}

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

@@ -11,7 +11,7 @@ import { createDefaultForm } from '../../../utils/forms.mjs';
 import { useComponent, ComponentProvider } from '../ComponentContext.mjs';
 import { AddComponentButton } from './AddComponentButton.mjs';
 import { ComponentPicker } from './ComponentPicker.mjs';
-import { DynamicComponent } from './DynamicComponent.mjs';
+import { DynamicComponent as MemoizedDynamicComponent } from './DynamicComponent.mjs';
 import { DynamicZoneLabel } from './DynamicZoneLabel.mjs';
 const [DynamicZoneProvider, useDynamicZone] = createContext('DynamicZone', {
@@ -24,11 +24,9 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
     const [liveText, setLiveText] = React.useState('');
     const { currentDocument: { components, isLoading } } = useDocumentContext('DynamicZone');
     const disabled = disabledProp || isLoading;
-    const { addFieldRow, removeFieldRow, moveFieldRow } = useForm('DynamicZone', ({ addFieldRow, removeFieldRow, moveFieldRow })=>({
-            addFieldRow,
-            removeFieldRow,
-            moveFieldRow
-        }));
+    const addFieldRow = useForm('DynamicZone', (state)=>state.addFieldRow);
+    const removeFieldRow = useForm('DynamicZone', (state)=>state.removeFieldRow);
+    const moveFieldRow = useForm('DynamicZone', (state)=>state.moveFieldRow);
     const { value = [], error } = useField(name);
     const dynamicComponentsByCategory = React.useMemo(()=>{
         return attribute.components.reduce((acc, componentUid)=>{
@@ -56,7 +54,7 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
     const { formatMessage } = useIntl();
     const { toggleNotification } = useNotification();
     const dynamicDisplayedComponentsLength = value.length;
-    const handleAddComponent = (uid, position)=>{
+    const handleAddComponent = React.useCallback((uid, position)=>{
         setAddComponentIsOpen(false);
         const schema = components[uid];
         const form = createDefaultForm(schema, components);
@@ -66,7 +64,11 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
             }));
         const data = transformations(form);
         addFieldRow(name, data, position);
-    };
+    }, [
+        addFieldRow,
+        components,
+        name
+    ]);
     const handleClickOpenPicker = ()=>{
         if (dynamicDisplayedComponentsLength < max) {
             setAddComponentIsOpen((prev)=>!prev);
@@ -79,46 +81,64 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
             });
         }
     };
-    const handleMoveComponent = (newIndex, currentIndex)=>{
+    const handleMoveComponent = React.useCallback((newIndex, currentIndex)=>{
         setLiveText(formatMessage({
             id: 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.useCallback((index)=>{
         setLiveText(formatMessage({
             id: getTranslation('dnd.cancel-item'),
             defaultMessage: '{item}, dropped. Re-order cancelled.'
         }, {
             item: `${name}.${index}`
         }));
-    };
-    const handleGrabItem = (index)=>{
+    }, [
+        formatMessage,
+        name
+    ]);
+    const handleGrabItem = React.useCallback((index)=>{
         setLiveText(formatMessage({
             id: 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.useCallback((index)=>{
         setLiveText(formatMessage({
             id: 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.useCallback((currentIndex)=>{
+        removeFieldRow(name, currentIndex);
+    }, [
+        name,
+        removeFieldRow
+    ]);
     const hasError = error !== undefined;
     const renderButtonLabel = ()=>{
         if (addComponentIsOpen) {
@@ -191,13 +211,13 @@ const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelActi
                                     // id is always a number in a dynamic zone.
                                     id: field.id,
                                     type: "dynamiczone",
-                                    children: /*#__PURE__*/ jsx(DynamicComponent, {
+                                    children: /*#__PURE__*/ jsx(MemoizedDynamicComponent, {
                                         disabled: disabled,
                                         name: name,
                                         index: index,
                                         componentUid: field.__component,
                                         onMoveComponent: handleMoveComponent,
-                                        onRemoveComponentClick: handleRemoveComponent(name, index),
+                                        onRemoveComponentClick: handleRemoveComponent,
                                         onCancel: handleCancel,
                                         onDropItem: handleDropItem,
                                         onGrabItem: handleGrabItem,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Field.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/Field.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n createContext,\n InputProps,\n useField,\n useForm,\n useNotification,\n} from '@strapi/admin/strapi-admin';\nimport { Box, Flex, VisuallyHidden } from '@strapi/design-system';\nimport pipe from 'lodash/fp/pipe';\nimport { useIntl } from 'react-intl';\n\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { type EditFieldLayout } from '../../../../../hooks/useDocumentLayout';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { transformDocument } from '../../../utils/data';\nimport { createDefaultForm } from '../../../utils/forms';\nimport { ComponentProvider, useComponent } from '../ComponentContext';\n\nimport { AddComponentButton } from './AddComponentButton';\nimport { ComponentPicker } from './ComponentPicker';\nimport { DynamicComponent, DynamicComponentProps } from './DynamicComponent';\nimport { DynamicZoneLabel, DynamicZoneLabelProps } from './DynamicZoneLabel';\n\nimport type { InputRendererProps } from '../../InputRenderer';\nimport type { Schema } from '@strapi/types';\n\ninterface DynamicZoneContextValue {\n isInDynamicZone: boolean;\n}\n\nconst [DynamicZoneProvider, useDynamicZone] = createContext<DynamicZoneContextValue>(\n 'DynamicZone',\n {\n isInDynamicZone: false,\n }\n);\n\ninterface DynamicZoneProps\n extends Omit<Extract<EditFieldLayout, { type: 'dynamiczone' }>, 'size' \| 'hint'>,\n Pick<InputProps, 'hint'>,\n Pick<DynamicZoneLabelProps, 'labelAction'> {\n children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicZone = ({\n attribute,\n disabled: disabledProp,\n hint,\n label,\n labelAction,\n name,\n required = false,\n children,\n}: DynamicZoneProps) => {\n // We cannot use the default props here\n const { max = Infinity, min = -Infinity } = attribute ?? {};\n\n const [addComponentIsOpen, setAddComponentIsOpen] = React.useState(false);\n const [liveText, setLiveText] = React.useState('');\n\n const {\n currentDocument: { components, isLoading },\n } = useDocumentContext('DynamicZone');\n\n const disabled = disabledProp \|\| isLoading;\n const { addFieldRow, removeFieldRow, moveFieldRow } = useForm(\n 'DynamicZone',\n ({ addFieldRow, removeFieldRow, moveFieldRow }) => ({\n addFieldRow,\n removeFieldRow,\n moveFieldRow,\n })\n );\n\n type DzWithTempKey =\n Schema.Attribute.GetDynamicZoneValue<Schema.Attribute.DynamicZone>[number] & {\n __temp_key__: number;\n };\n\n const { value = [], error } = useField<Array<DzWithTempKey>>(name);\n\n const dynamicComponentsByCategory = React.useMemo(() => {\n return attribute.components.reduce<\n NonNullable<DynamicComponentProps['dynamicComponentsByCategory']>\n >((acc, componentUid) => {\n const { category, info } = components[componentUid] ?? { info: {} };\n\n const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };\n\n if (!acc[category]) {\n acc[category] = [];\n }\n\n acc[category] = [...acc[category], component];\n\n return acc;\n }, {});\n }, [attribute.components, components]);\n\n const { formatMessage } = useIntl();\n\n const { toggleNotification } = useNotification();\n\n const dynamicDisplayedComponentsLength = value.length;\n\n const handleAddComponent = (uid: string, position?: number) => {\n setAddComponentIsOpen(false);\n\n const schema = components[uid];\n const form = createDefaultForm(schema, components);\n const transformations = pipe(transformDocument(schema, components), (data) => ({\n ...data,\n __component: uid,\n }));\n\n const data = transformations(form);\n\n addFieldRow(name, data, position);\n };\n\n const handleClickOpenPicker = () => {\n if (dynamicDisplayedComponentsLength < max) {\n setAddComponentIsOpen((prev) => !prev);\n } else {\n toggleNotification({\n type: 'info',\n message: formatMessage({\n id: getTranslation('components.notification.info.maximum-requirement'),\n }),\n });\n }\n };\n\n const handleMoveComponent = (newIndex: number, currentIndex: number) => {\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.reorder'),\n defaultMessage: '{item}, moved. New position in list: {position}.',\n },\n {\n item: `${name}.${currentIndex}`,\n position: getItemPos(newIndex),\n }\n )\n );\n\n moveFieldRow(name, currentIndex, newIndex);\n };\n\n const getItemPos = (index: number) => `${index + 1} of ${value.length}`;\n\n const handleCancel = (index: number) => {\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.cancel-item'),\n defaultMessage: '{item}, dropped. Re-order cancelled.',\n },\n {\n item: `${name}.${index}`,\n }\n )\n );\n };\n\n const handleGrabItem = (index: number) => {\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.grab-item'),\n defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,\n },\n {\n item: `${name}.${index}`,\n position: getItemPos(index),\n }\n )\n );\n };\n\n const handleDropItem = (index: number) => {\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.drop-item'),\n defaultMessage: `{item}, dropped. Final position in list: {position}.`,\n },\n {\n item: `${name}.${index}`,\n position: getItemPos(index),\n }\n )\n );\n };\n\n const handleRemoveComponent = (name: string, currentIndex: number) => () => {\n removeFieldRow(name, currentIndex);\n };\n\n const hasError = error !== undefined;\n\n const renderButtonLabel = () => {\n if (addComponentIsOpen) {\n return formatMessage({ id: 'app.utils.close-label', defaultMessage: 'Close' });\n }\n\n if (hasError && dynamicDisplayedComponentsLength > max) {\n return formatMessage(\n {\n id: getTranslation(`components.DynamicZone.extra-components`),\n defaultMessage:\n 'There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}',\n },\n {\n number: dynamicDisplayedComponentsLength - max,\n }\n );\n }\n\n if (hasError && dynamicDisplayedComponentsLength < min) {\n return formatMessage(\n {\n id: getTranslation(`components.DynamicZone.missing-components`),\n defaultMessage:\n 'There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}',\n },\n { number: min - dynamicDisplayedComponentsLength }\n );\n }\n\n return formatMessage(\n {\n id: getTranslation('components.DynamicZone.add-component'),\n defaultMessage: 'Add a component to {componentName}',\n },\n { componentName: label \|\| name }\n );\n };\n\n const level = useComponent('DynamicZone', (state) => state.level);\n\n const ariaDescriptionId = React.useId();\n\n return (\n <DynamicZoneProvider isInDynamicZone>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={{ initial: 4, medium: 6 }}>\n {dynamicDisplayedComponentsLength > 0 && (\n <Box>\n <DynamicZoneLabel\n hint={hint}\n label={label}\n labelAction={labelAction}\n name={name}\n numberOfComponents={dynamicDisplayedComponentsLength}\n required={required}\n />\n <VisuallyHidden id={ariaDescriptionId}>\n {formatMessage({\n id: getTranslation('dnd.instructions'),\n defaultMessage: `Press spacebar to grab and re-order`,\n })}\n </VisuallyHidden>\n <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n <ol aria-describedby={ariaDescriptionId}>\n {value.map((field, index) => (\n <ComponentProvider\n key={field.__temp_key__}\n level={level + 1}\n uid={field.__component}\n // id is always a number in a dynamic zone.\n id={field.id as number}\n type=\"dynamiczone\"\n >\n <DynamicComponent\n disabled={disabled}\n name={name}\n index={index}\n componentUid={field.__component}\n onMoveComponent={handleMoveComponent}\n onRemoveComponentClick={handleRemoveComponent(name, index)}\n onCancel={handleCancel}\n onDropItem={handleDropItem}\n onGrabItem={handleGrabItem}\n onAddComponent={handleAddComponent}\n dynamicComponentsByCategory={dynamicComponentsByCategory}\n totalLength={dynamicDisplayedComponentsLength}\n >\n {children}\n </DynamicComponent>\n </ComponentProvider>\n ))}\n </ol>\n </Box>\n )}\n <Flex justifyContent=\"center\">\n <AddComponentButton\n hasError={hasError}\n isDisabled={disabled}\n isOpen={addComponentIsOpen}\n onClick={handleClickOpenPicker}\n >\n {renderButtonLabel()}\n </AddComponentButton>\n </Flex>\n <ComponentPicker\n dynamicComponentsByCategory={dynamicComponentsByCategory}\n isOpen={addComponentIsOpen}\n onClickAddComponent={handleAddComponent}\n />\n </Flex>\n </DynamicZoneProvider>\n );\n};\n\nexport { DynamicZone, useDynamicZone };\nexport type { DynamicZoneProps };\n"],"names":["DynamicZoneProvider","useDynamicZone","createContext","isInDynamicZone","DynamicZone","attribute","disabled","disabledProp","hint","label","labelAction","name","required","children","max","Infinity","min","addComponentIsOpen","setAddComponentIsOpen","React","useState","liveText","setLiveText","currentDocument","components","isLoading","useDocumentContext","addFieldRow","removeFieldRow","moveFieldRow","useForm","value","error","useField","dynamicComponentsByCategory","useMemo","reduce","acc","componentUid","category","info","component","uid","displayName","icon","formatMessage","useIntl","toggleNotification","useNotification","dynamicDisplayedComponentsLength","length","handleAddComponent","position","schema","form","createDefaultForm","transformations","pipe","transformDocument","data","__component","handleClickOpenPicker","prev","type","message","id","getTranslation","handleMoveComponent","newIndex","currentIndex","defaultMessage","item","getItemPos","index","handleCancel","handleGrabItem","handleDropItem","handleRemoveComponent","hasError","undefined","renderButtonLabel","number","componentName","level","useComponent","state","ariaDescriptionId","useId","_jsx","_jsxs","Flex","direction","alignItems","gap","initial","medium","Box","DynamicZoneLabel","numberOfComponents","VisuallyHidden","aria-live","ol","aria-describedby","map","field","ComponentProvider","DynamicComponent","onMoveComponent","onRemoveComponentClick","onCancel","onDropItem","onGrabItem","onAddComponent","totalLength","__temp_key__","justifyContent","AddComponentButton","isDisabled","isOpen","onClick","ComponentPicker","onClickAddComponent"],"mappings":"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"}
1	+ {"version":3,"file":"Field.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/DynamicZone/Field.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n createContext,\n InputProps,\n useField,\n useForm,\n useNotification,\n} from '@strapi/admin/strapi-admin';\nimport { Box, Flex, VisuallyHidden } from '@strapi/design-system';\nimport pipe from 'lodash/fp/pipe';\nimport { useIntl } from 'react-intl';\n\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { type EditFieldLayout } from '../../../../../hooks/useDocumentLayout';\nimport { getTranslation } from '../../../../../utils/translations';\nimport { transformDocument } from '../../../utils/data';\nimport { createDefaultForm } from '../../../utils/forms';\nimport { ComponentProvider, useComponent } from '../ComponentContext';\n\nimport { AddComponentButton } from './AddComponentButton';\nimport { ComponentPicker } from './ComponentPicker';\nimport { DynamicComponent, DynamicComponentProps } from './DynamicComponent';\nimport { DynamicZoneLabel, DynamicZoneLabelProps } from './DynamicZoneLabel';\n\nimport type { InputRendererProps } from '../../InputRenderer';\nimport type { Schema } from '@strapi/types';\n\ninterface DynamicZoneContextValue {\n isInDynamicZone: boolean;\n}\n\nconst [DynamicZoneProvider, useDynamicZone] = createContext<DynamicZoneContextValue>(\n 'DynamicZone',\n {\n isInDynamicZone: false,\n }\n);\n\ninterface DynamicZoneProps\n extends Omit<Extract<EditFieldLayout, { type: 'dynamiczone' }>, 'size' \| 'hint'>,\n Pick<InputProps, 'hint'>,\n Pick<DynamicZoneLabelProps, 'labelAction'> {\n children?: (props: InputRendererProps) => React.ReactNode;\n}\n\nconst DynamicZone = ({\n attribute,\n disabled: disabledProp,\n hint,\n label,\n labelAction,\n name,\n required = false,\n children,\n}: DynamicZoneProps) => {\n // We cannot use the default props here\n const { max = Infinity, min = -Infinity } = attribute ?? {};\n\n const [addComponentIsOpen, setAddComponentIsOpen] = React.useState(false);\n const [liveText, setLiveText] = React.useState('');\n\n const {\n currentDocument: { components, isLoading },\n } = useDocumentContext('DynamicZone');\n\n const disabled = disabledProp \|\| isLoading;\n const addFieldRow = useForm('DynamicZone', (state) => state.addFieldRow);\n const removeFieldRow = useForm('DynamicZone', (state) => state.removeFieldRow);\n const moveFieldRow = useForm('DynamicZone', (state) => state.moveFieldRow);\n\n type DzWithTempKey =\n Schema.Attribute.GetDynamicZoneValue<Schema.Attribute.DynamicZone>[number] & {\n __temp_key__: number;\n };\n\n const { value = [], error } = useField<Array<DzWithTempKey>>(name);\n\n const dynamicComponentsByCategory = React.useMemo(() => {\n return attribute.components.reduce<\n NonNullable<DynamicComponentProps['dynamicComponentsByCategory']>\n >((acc, componentUid) => {\n const { category, info } = components[componentUid] ?? { info: {} };\n\n const component = { uid: componentUid, displayName: info.displayName, icon: info.icon };\n\n if (!acc[category]) {\n acc[category] = [];\n }\n\n acc[category] = [...acc[category], component];\n\n return acc;\n }, {});\n }, [attribute.components, components]);\n\n const { formatMessage } = useIntl();\n\n const { toggleNotification } = useNotification();\n\n const dynamicDisplayedComponentsLength = value.length;\n\n const handleAddComponent = React.useCallback(\n (uid: string, position?: number) => {\n setAddComponentIsOpen(false);\n\n const schema = components[uid];\n const form = createDefaultForm(schema, components);\n const transformations = pipe(transformDocument(schema, components), (data) => ({\n ...data,\n __component: uid,\n }));\n\n const data = transformations(form);\n\n addFieldRow(name, data, position);\n },\n [addFieldRow, components, name]\n );\n\n const handleClickOpenPicker = () => {\n if (dynamicDisplayedComponentsLength < max) {\n setAddComponentIsOpen((prev) => !prev);\n } else {\n toggleNotification({\n type: 'info',\n message: formatMessage({\n id: getTranslation('components.notification.info.maximum-requirement'),\n }),\n });\n }\n };\n\n const handleMoveComponent = React.useCallback(\n (newIndex: number, currentIndex: number) => {\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.reorder'),\n defaultMessage: '{item}, moved. New position in list: {position}.',\n },\n {\n item: `${name}.${currentIndex}`,\n position: `${newIndex + 1} of ${value.length}`,\n }\n )\n );\n\n moveFieldRow(name, currentIndex, newIndex);\n },\n [formatMessage, moveFieldRow, name, value.length]\n );\n\n const handleCancel = React.useCallback(\n (index: number) => {\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.cancel-item'),\n defaultMessage: '{item}, dropped. Re-order cancelled.',\n },\n {\n item: `${name}.${index}`,\n }\n )\n );\n },\n [formatMessage, name]\n );\n\n const handleGrabItem = React.useCallback(\n (index: number) => {\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.grab-item'),\n defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`,\n },\n {\n item: `${name}.${index}`,\n position: `${index + 1} of ${value.length}`,\n }\n )\n );\n },\n [formatMessage, name, value.length]\n );\n\n const handleDropItem = React.useCallback(\n (index: number) => {\n setLiveText(\n formatMessage(\n {\n id: getTranslation('dnd.drop-item'),\n defaultMessage: `{item}, dropped. Final position in list: {position}.`,\n },\n {\n item: `${name}.${index}`,\n position: `${index + 1} of ${value.length}`,\n }\n )\n );\n },\n [formatMessage, name, value.length]\n );\n\n const handleRemoveComponent = React.useCallback(\n (currentIndex: number) => {\n removeFieldRow(name, currentIndex);\n },\n [name, removeFieldRow]\n );\n\n const hasError = error !== undefined;\n\n const renderButtonLabel = () => {\n if (addComponentIsOpen) {\n return formatMessage({ id: 'app.utils.close-label', defaultMessage: 'Close' });\n }\n\n if (hasError && dynamicDisplayedComponentsLength > max) {\n return formatMessage(\n {\n id: getTranslation(`components.DynamicZone.extra-components`),\n defaultMessage:\n 'There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}',\n },\n {\n number: dynamicDisplayedComponentsLength - max,\n }\n );\n }\n\n if (hasError && dynamicDisplayedComponentsLength < min) {\n return formatMessage(\n {\n id: getTranslation(`components.DynamicZone.missing-components`),\n defaultMessage:\n 'There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}',\n },\n { number: min - dynamicDisplayedComponentsLength }\n );\n }\n\n return formatMessage(\n {\n id: getTranslation('components.DynamicZone.add-component'),\n defaultMessage: 'Add a component to {componentName}',\n },\n { componentName: label \|\| name }\n );\n };\n\n const level = useComponent('DynamicZone', (state) => state.level);\n\n const ariaDescriptionId = React.useId();\n\n return (\n <DynamicZoneProvider isInDynamicZone>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={{ initial: 4, medium: 6 }}>\n {dynamicDisplayedComponentsLength > 0 && (\n <Box>\n <DynamicZoneLabel\n hint={hint}\n label={label}\n labelAction={labelAction}\n name={name}\n numberOfComponents={dynamicDisplayedComponentsLength}\n required={required}\n />\n <VisuallyHidden id={ariaDescriptionId}>\n {formatMessage({\n id: getTranslation('dnd.instructions'),\n defaultMessage: `Press spacebar to grab and re-order`,\n })}\n </VisuallyHidden>\n <VisuallyHidden aria-live=\"assertive\">{liveText}</VisuallyHidden>\n <ol aria-describedby={ariaDescriptionId}>\n {value.map((field, index) => (\n <ComponentProvider\n key={field.__temp_key__}\n level={level + 1}\n uid={field.__component}\n // id is always a number in a dynamic zone.\n id={field.id as number}\n type=\"dynamiczone\"\n >\n <DynamicComponent\n disabled={disabled}\n name={name}\n index={index}\n componentUid={field.__component}\n onMoveComponent={handleMoveComponent}\n onRemoveComponentClick={handleRemoveComponent}\n onCancel={handleCancel}\n onDropItem={handleDropItem}\n onGrabItem={handleGrabItem}\n onAddComponent={handleAddComponent}\n dynamicComponentsByCategory={dynamicComponentsByCategory}\n totalLength={dynamicDisplayedComponentsLength}\n >\n {children}\n </DynamicComponent>\n </ComponentProvider>\n ))}\n </ol>\n </Box>\n )}\n <Flex justifyContent=\"center\">\n <AddComponentButton\n hasError={hasError}\n isDisabled={disabled}\n isOpen={addComponentIsOpen}\n onClick={handleClickOpenPicker}\n >\n {renderButtonLabel()}\n </AddComponentButton>\n </Flex>\n <ComponentPicker\n dynamicComponentsByCategory={dynamicComponentsByCategory}\n isOpen={addComponentIsOpen}\n onClickAddComponent={handleAddComponent}\n />\n </Flex>\n </DynamicZoneProvider>\n );\n};\n\nexport { DynamicZone, useDynamicZone };\nexport type { DynamicZoneProps };\n"],"names":["DynamicZoneProvider","useDynamicZone","createContext","isInDynamicZone","DynamicZone","attribute","disabled","disabledProp","hint","label","labelAction","name","required","children","max","Infinity","min","addComponentIsOpen","setAddComponentIsOpen","React","useState","liveText","setLiveText","currentDocument","components","isLoading","useDocumentContext","addFieldRow","useForm","state","removeFieldRow","moveFieldRow","value","error","useField","dynamicComponentsByCategory","useMemo","reduce","acc","componentUid","category","info","component","uid","displayName","icon","formatMessage","useIntl","toggleNotification","useNotification","dynamicDisplayedComponentsLength","length","handleAddComponent","useCallback","position","schema","form","createDefaultForm","transformations","pipe","transformDocument","data","__component","handleClickOpenPicker","prev","type","message","id","getTranslation","handleMoveComponent","newIndex","currentIndex","defaultMessage","item","handleCancel","index","handleGrabItem","handleDropItem","handleRemoveComponent","hasError","undefined","renderButtonLabel","number","componentName","level","useComponent","ariaDescriptionId","useId","_jsx","_jsxs","Flex","direction","alignItems","gap","initial","medium","Box","DynamicZoneLabel","numberOfComponents","VisuallyHidden","aria-live","ol","aria-describedby","map","field","ComponentProvider","DynamicComponent","onMoveComponent","onRemoveComponentClick","onCancel","onDropItem","onGrabItem","onAddComponent","totalLength","__temp_key__","justifyContent","AddComponentButton","isDisabled","isOpen","onClick","ComponentPicker","onClickAddComponent"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/Relations/RelationModal.mjs CHANGED Viewed

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { createContext, useQueryParams, Form, useForm, ConfirmDialog, useStrapiApp, useRBAC, DescriptionComponentRenderer } from '@strapi/admin/strapi-admin';
-import { Modal, TextButton, Flex, IconButton, Typography, Dialog, Loader, EmptyStateLayout, Box } from '@strapi/design-system';
+import { Modal, Flex, IconButton, Typography, TextButton, Dialog, Loader, EmptyStateLayout, Box } from '@strapi/design-system';
 import { ArrowLeft, ArrowsOut, WarningCircle } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { Link, useNavigate, useLocation } from 'react-router-dom';
+import { useNavigate, Link, useLocation } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { COLLECTION_TYPES, SINGLE_TYPES } from '../../../../../constants/collections.mjs';
 import { PERMISSIONS } from '../../../../../constants/plugin.mjs';

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

@@ -383,11 +383,11 @@ const EMPTY_RELATION_RESULTS = [];
         currentDocumentMeta.params
     ]);
     const hasNextPage = data?.pagination ? data.pagination.page < data.pagination.pageCount : false;
-    const options = data?.results ?? [];
     const handleChange = React__namespace.useCallback((relationId)=>{
         if (!relationId) {
             return;
         }
+        const options = data?.results ?? [];
         const relation = options.find((opt)=>opt.id.toString() === relationId);
         if (!relation) {
             // This is very unlikely to happen, but it ensures we don't have any data for.
@@ -409,9 +409,9 @@ const EMPTY_RELATION_RESULTS = [];
        *
        */ onChange(relation);
     }, [
+        data,
         formatMessage,
         onChange,
-        options,
         toggleNotification
     ]);
     const relation = React__namespace.useMemo(()=>({
@@ -636,6 +636,9 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
         isLoading,
         data.length
     ]);
+    const getItemPos = React__namespace.useCallback((index)=>`${index + 1} of ${data.length}`, [
+        data.length
+    ]);
     const handleMoveItem = React__namespace.useCallback((newIndex, oldIndex)=>{
         const item = data[oldIndex];
         setLiveText(formatMessage({
@@ -643,7 +646,7 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
             defaultMessage: '{item}, moved. New position in list: {position}.'
         }, {
             item: item.label ?? item.documentId,
-            position: `${newIndex + 1} of ${data.length}`
+            position: getItemPos(newIndex)
         }));
         /**
        * Splicing mutates the array, so we need to create a new array
@@ -699,10 +702,11 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
         field.onChange(`${name}.connect`, connectedRelations);
     }, [
         data,
+        serverData,
         field,
-        formatMessage,
         name,
-        serverData
+        formatMessage,
+        getItemPos
     ]);
     const handleGrabItem = React__namespace.useCallback((index)=>{
         const item = data[index];
@@ -711,11 +715,12 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
             defaultMessage: `{item}, grabbed. Current position in list: {position}. Press up and down arrow to change position, Spacebar to drop, Escape to cancel.`
         }, {
             item: item.label ?? item.documentId,
-            position: `${index + 1} of ${data.length}`
+            position: getItemPos(index)
         }));
     }, [
         data,
-        formatMessage
+        formatMessage,
+        getItemPos
     ]);
     const handleDropItem = React__namespace.useCallback((index)=>{
         const { href: _href, label, ...item } = data[index];
@@ -724,11 +729,12 @@ const RelationsList = ({ data, serverData, disabled, name, isLoading, relationTy
             defaultMessage: `{item}, dropped. Final position in list: {position}.`
         }, {
             item: label ?? item.documentId,
-            position: `${index + 1} of ${data.length}`
+            position: getItemPos(index)
         }));
     }, [
         data,
-        formatMessage
+        formatMessage,
+        getItemPos
     ]);
     const handleCancel = React__namespace.useCallback((index)=>{
         const item = data[index];
@@ -846,7 +852,7 @@ const RelationRow = styledComponents.styled(designSystem.Flex)`
     padding-bottom: ${({ theme })=>theme.spaces[2]};
   }
 `;
-const ListItem = ({ data, index, style })=>{
+const ListItem = /*#__PURE__*/ React__namespace.memo(({ data, index, style })=>{
     const { ariaDescribedBy, canDrag = false, disabled = false, handleCancel, handleDisconnect, handleDropItem, handleGrabItem, handleMoveItem, name, relations, targetModel, documentParams, mainField } = data;
     const isDesktop = strapiAdmin.useIsDesktop();
     const { formatMessage } = reactIntl.useIntl();
@@ -890,14 +896,19 @@ const ListItem = ({ data, index, style })=>{
     ]);
     const safeDocumentId = documentId ?? apiData?.documentId;
     const safeLocale = locale ?? apiData?.locale ?? null;
-    const documentMeta = {
-        documentId: safeDocumentId,
-        model: targetModel,
-        collectionType: RelationModal.getCollectionType(href),
-        params: {
-            locale: safeLocale
-        }
-    };
+    const documentMeta = React__namespace.useMemo(()=>({
+            documentId: safeDocumentId,
+            model: targetModel,
+            collectionType: RelationModal.getCollectionType(href),
+            params: {
+                locale: safeLocale
+            }
+        }), [
+        safeDocumentId,
+        href,
+        safeLocale,
+        targetModel
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
         style: style,
         tag: "li",
@@ -973,7 +984,7 @@ const ListItem = ({ data, index, style })=>{
             ]
         })
     });
-};
+});
 const FlexWrapper = styledComponents.styled(designSystem.Flex)`
   width: 100%;
   /* Used to prevent endAction to be pushed out of container */