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

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

@@ -0,0 +1,252 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var pipe = require('lodash/fp/pipe');
+var reactIntl = require('react-intl');
+var useDocument = require('../../../../../hooks/useDocument.js');
+var translations = require('../../../../../utils/translations.js');
+var data = require('../../../utils/data.js');
+var forms = require('../../../utils/forms.js');
+var ComponentContext = require('../ComponentContext.js');
+var AddComponentButton = require('./AddComponentButton.js');
+var ComponentPicker = require('./ComponentPicker.js');
+var DynamicComponent = require('./DynamicComponent.js');
+var DynamicZoneLabel = require('./DynamicZoneLabel.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const [DynamicZoneProvider, useDynamicZone] = strapiAdmin.createContext('DynamicZone', {
+    isInDynamicZone: false
+});
+const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelAction, name, required = false, children })=>{
+    // We cannot use the default props here
+    const { max = Infinity, min = -Infinity } = attribute ?? {};
+    const [addComponentIsOpen, setAddComponentIsOpen] = React__namespace.useState(false);
+    const [liveText, setLiveText] = React__namespace.useState('');
+    const { components, isLoading } = useDocument.useDoc();
+    const disabled = disabledProp || isLoading;
+    const { addFieldRow, removeFieldRow, moveFieldRow } = strapiAdmin.useForm('DynamicZone', ({ addFieldRow, removeFieldRow, moveFieldRow })=>({
+            addFieldRow,
+            removeFieldRow,
+            moveFieldRow
+        }));
+    const { value = [], error } = strapiAdmin.useField(name);
+    const dynamicComponentsByCategory = React__namespace.useMemo(()=>{
+        return attribute.components.reduce((acc, componentUid)=>{
+            const { category, info } = components[componentUid] ?? {
+                info: {}
+            };
+            const component = {
+                uid: componentUid,
+                displayName: info.displayName,
+                icon: info.icon
+            };
+            if (!acc[category]) {
+                acc[category] = [];
+            }
+            acc[category] = [
+                ...acc[category],
+                component
+            ];
+            return acc;
+        }, {});
+    }, [
+        attribute.components,
+        components
+    ]);
+    const { formatMessage } = reactIntl.useIntl();
+    const { toggleNotification } = strapiAdmin.useNotification();
+    const dynamicDisplayedComponentsLength = value.length;
+    const handleAddComponent = (uid, position)=>{
+        setAddComponentIsOpen(false);
+        const schema = components[uid];
+        const form = forms.createDefaultForm(schema, components);
+        const transformations = pipe(data.transformDocument(schema, components), (data)=>({
+                ...data,
+                __component: uid
+            }));
+        const data$1 = transformations(form);
+        addFieldRow(name, data$1, position);
+    };
+    const handleClickOpenPicker = ()=>{
+        if (dynamicDisplayedComponentsLength < max) {
+            setAddComponentIsOpen((prev)=>!prev);
+        } else {
+            toggleNotification({
+                type: 'info',
+                message: formatMessage({
+                    id: translations.getTranslation('components.notification.info.maximum-requirement')
+                })
+            });
+        }
+    };
+    const handleMoveComponent = (newIndex, currentIndex)=>{
+        setLiveText(formatMessage({
+            id: translations.getTranslation('dnd.reorder'),
+            defaultMessage: '{item}, moved. New position in list: {position}.'
+        }, {
+            item: `${name}.${currentIndex}`,
+            position: getItemPos(newIndex)
+        }));
+        moveFieldRow(name, currentIndex, newIndex);
+    };
+    const getItemPos = (index)=>`${index + 1} of ${value.length}`;
+    const handleCancel = (index)=>{
+        setLiveText(formatMessage({
+            id: translations.getTranslation('dnd.cancel-item'),
+            defaultMessage: '{item}, dropped. Re-order cancelled.'
+        }, {
+            item: `${name}.${index}`
+        }));
+    };
+    const handleGrabItem = (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)
+        }));
+    };
+    const handleDropItem = (index)=>{
+        setLiveText(formatMessage({
+            id: translations.getTranslation('dnd.drop-item'),
+            defaultMessage: `{item}, dropped. Final position in list: {position}.`
+        }, {
+            item: `${name}.${index}`,
+            position: getItemPos(index)
+        }));
+    };
+    const handleRemoveComponent = (name, currentIndex)=>()=>{
+            removeFieldRow(name, currentIndex);
+        };
+    const hasError = error !== undefined;
+    const renderButtonLabel = ()=>{
+        if (addComponentIsOpen) {
+            return formatMessage({
+                id: 'app.utils.close-label',
+                defaultMessage: 'Close'
+            });
+        }
+        if (hasError && dynamicDisplayedComponentsLength > max) {
+            return formatMessage({
+                id: translations.getTranslation(`components.DynamicZone.extra-components`),
+                defaultMessage: 'There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}'
+            }, {
+                number: dynamicDisplayedComponentsLength - max
+            });
+        }
+        if (hasError && dynamicDisplayedComponentsLength < min) {
+            return formatMessage({
+                id: translations.getTranslation(`components.DynamicZone.missing-components`),
+                defaultMessage: 'There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}'
+            }, {
+                number: min - dynamicDisplayedComponentsLength
+            });
+        }
+        return formatMessage({
+            id: translations.getTranslation('components.DynamicZone.add-component'),
+            defaultMessage: 'Add a component to {componentName}'
+        }, {
+            componentName: label || name
+        });
+    };
+    const level = ComponentContext.useComponent('DynamicZone', (state)=>state.level);
+    const ariaDescriptionId = React__namespace.useId();
+    return /*#__PURE__*/ jsxRuntime.jsx(DynamicZoneProvider, {
+        isInDynamicZone: true,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 6,
+            children: [
+                dynamicDisplayedComponentsLength > 0 && /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(DynamicZoneLabel.DynamicZoneLabel, {
+                            hint: hint,
+                            label: label,
+                            labelAction: labelAction,
+                            name: name,
+                            numberOfComponents: dynamicDisplayedComponentsLength,
+                            required: required
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                            id: ariaDescriptionId,
+                            children: formatMessage({
+                                id: translations.getTranslation('dnd.instructions'),
+                                defaultMessage: `Press spacebar to grab and re-order`
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
+                            "aria-live": "assertive",
+                            children: liveText
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx("ol", {
+                            "aria-describedby": ariaDescriptionId,
+                            children: value.map((field, index)=>/*#__PURE__*/ jsxRuntime.jsx(ComponentContext.ComponentProvider, {
+                                    level: level + 1,
+                                    uid: field.__component,
+                                    // id is always a number in a dynamic zone.
+                                    id: field.id,
+                                    type: "dynamiczone",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(DynamicComponent.DynamicComponent, {
+                                        disabled: disabled,
+                                        name: name,
+                                        index: index,
+                                        componentUid: field.__component,
+                                        onMoveComponent: handleMoveComponent,
+                                        onRemoveComponentClick: handleRemoveComponent(name, index),
+                                        onCancel: handleCancel,
+                                        onDropItem: handleDropItem,
+                                        onGrabItem: handleGrabItem,
+                                        onAddComponent: handleAddComponent,
+                                        dynamicComponentsByCategory: dynamicComponentsByCategory,
+                                        children: children
+                                    })
+                                }, field.__temp_key__))
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                    justifyContent: "center",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(AddComponentButton.AddComponentButton, {
+                        hasError: hasError,
+                        isDisabled: disabled,
+                        isOpen: addComponentIsOpen,
+                        onClick: handleClickOpenPicker,
+                        children: renderButtonLabel()
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(ComponentPicker.ComponentPicker, {
+                    dynamicComponentsByCategory: dynamicComponentsByCategory,
+                    isOpen: addComponentIsOpen,
+                    onClickAddComponent: handleAddComponent
+                })
+            ]
+        })
+    });
+};
+
+exports.DynamicZone = DynamicZone;
+exports.useDynamicZone = useDynamicZone;
+//# sourceMappingURL=Field.js.map

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

@@ -0,0 +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 { useDoc } from '../../../../../hooks/useDocument';\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  const { components, isLoading } = useDoc();\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={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                  >\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","components","isLoading","useDoc","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","Box","DynamicZoneLabel","numberOfComponents","VisuallyHidden","aria-live","ol","aria-describedby","map","field","ComponentProvider","DynamicComponent","onMoveComponent","onRemoveComponentClick","onCancel","onDropItem","onGrabItem","onAddComponent","__temp_key__","justifyContent","AddComponentButton","isDisabled","isOpen","onClick","ComponentPicker","onClickAddComponent"],"mappings":"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"}

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

@@ -0,0 +1,230 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { createContext, useForm, useField, useNotification } from '@strapi/admin/strapi-admin';
+import { Flex, Box, VisuallyHidden } from '@strapi/design-system';
+import pipe from 'lodash/fp/pipe';
+import { useIntl } from 'react-intl';
+import { useDoc } from '../../../../../hooks/useDocument.mjs';
+import { getTranslation } from '../../../../../utils/translations.mjs';
+import { transformDocument } from '../../../utils/data.mjs';
+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 { DynamicZoneLabel } from './DynamicZoneLabel.mjs';
+
+const [DynamicZoneProvider, useDynamicZone] = createContext('DynamicZone', {
+    isInDynamicZone: false
+});
+const DynamicZone = ({ attribute, disabled: disabledProp, hint, label, labelAction, name, required = false, children })=>{
+    // We cannot use the default props here
+    const { max = Infinity, min = -Infinity } = attribute ?? {};
+    const [addComponentIsOpen, setAddComponentIsOpen] = React.useState(false);
+    const [liveText, setLiveText] = React.useState('');
+    const { components, isLoading } = useDoc();
+    const disabled = disabledProp || isLoading;
+    const { addFieldRow, removeFieldRow, moveFieldRow } = useForm('DynamicZone', ({ addFieldRow, removeFieldRow, moveFieldRow })=>({
+            addFieldRow,
+            removeFieldRow,
+            moveFieldRow
+        }));
+    const { value = [], error } = useField(name);
+    const dynamicComponentsByCategory = React.useMemo(()=>{
+        return attribute.components.reduce((acc, componentUid)=>{
+            const { category, info } = components[componentUid] ?? {
+                info: {}
+            };
+            const component = {
+                uid: componentUid,
+                displayName: info.displayName,
+                icon: info.icon
+            };
+            if (!acc[category]) {
+                acc[category] = [];
+            }
+            acc[category] = [
+                ...acc[category],
+                component
+            ];
+            return acc;
+        }, {});
+    }, [
+        attribute.components,
+        components
+    ]);
+    const { formatMessage } = useIntl();
+    const { toggleNotification } = useNotification();
+    const dynamicDisplayedComponentsLength = value.length;
+    const handleAddComponent = (uid, position)=>{
+        setAddComponentIsOpen(false);
+        const schema = components[uid];
+        const form = createDefaultForm(schema, components);
+        const transformations = pipe(transformDocument(schema, components), (data)=>({
+                ...data,
+                __component: uid
+            }));
+        const data = transformations(form);
+        addFieldRow(name, data, position);
+    };
+    const handleClickOpenPicker = ()=>{
+        if (dynamicDisplayedComponentsLength < max) {
+            setAddComponentIsOpen((prev)=>!prev);
+        } else {
+            toggleNotification({
+                type: 'info',
+                message: formatMessage({
+                    id: getTranslation('components.notification.info.maximum-requirement')
+                })
+            });
+        }
+    };
+    const handleMoveComponent = (newIndex, currentIndex)=>{
+        setLiveText(formatMessage({
+            id: getTranslation('dnd.reorder'),
+            defaultMessage: '{item}, moved. New position in list: {position}.'
+        }, {
+            item: `${name}.${currentIndex}`,
+            position: getItemPos(newIndex)
+        }));
+        moveFieldRow(name, currentIndex, newIndex);
+    };
+    const getItemPos = (index)=>`${index + 1} of ${value.length}`;
+    const handleCancel = (index)=>{
+        setLiveText(formatMessage({
+            id: getTranslation('dnd.cancel-item'),
+            defaultMessage: '{item}, dropped. Re-order cancelled.'
+        }, {
+            item: `${name}.${index}`
+        }));
+    };
+    const handleGrabItem = (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)
+        }));
+    };
+    const handleDropItem = (index)=>{
+        setLiveText(formatMessage({
+            id: getTranslation('dnd.drop-item'),
+            defaultMessage: `{item}, dropped. Final position in list: {position}.`
+        }, {
+            item: `${name}.${index}`,
+            position: getItemPos(index)
+        }));
+    };
+    const handleRemoveComponent = (name, currentIndex)=>()=>{
+            removeFieldRow(name, currentIndex);
+        };
+    const hasError = error !== undefined;
+    const renderButtonLabel = ()=>{
+        if (addComponentIsOpen) {
+            return formatMessage({
+                id: 'app.utils.close-label',
+                defaultMessage: 'Close'
+            });
+        }
+        if (hasError && dynamicDisplayedComponentsLength > max) {
+            return formatMessage({
+                id: getTranslation(`components.DynamicZone.extra-components`),
+                defaultMessage: 'There {number, plural, =0 {are # extra components} one {is # extra component} other {are # extra components}}'
+            }, {
+                number: dynamicDisplayedComponentsLength - max
+            });
+        }
+        if (hasError && dynamicDisplayedComponentsLength < min) {
+            return formatMessage({
+                id: getTranslation(`components.DynamicZone.missing-components`),
+                defaultMessage: 'There {number, plural, =0 {are # missing components} one {is # missing component} other {are # missing components}}'
+            }, {
+                number: min - dynamicDisplayedComponentsLength
+            });
+        }
+        return formatMessage({
+            id: getTranslation('components.DynamicZone.add-component'),
+            defaultMessage: 'Add a component to {componentName}'
+        }, {
+            componentName: label || name
+        });
+    };
+    const level = useComponent('DynamicZone', (state)=>state.level);
+    const ariaDescriptionId = React.useId();
+    return /*#__PURE__*/ jsx(DynamicZoneProvider, {
+        isInDynamicZone: true,
+        children: /*#__PURE__*/ jsxs(Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 6,
+            children: [
+                dynamicDisplayedComponentsLength > 0 && /*#__PURE__*/ jsxs(Box, {
+                    children: [
+                        /*#__PURE__*/ jsx(DynamicZoneLabel, {
+                            hint: hint,
+                            label: label,
+                            labelAction: labelAction,
+                            name: name,
+                            numberOfComponents: dynamicDisplayedComponentsLength,
+                            required: required
+                        }),
+                        /*#__PURE__*/ jsx(VisuallyHidden, {
+                            id: ariaDescriptionId,
+                            children: formatMessage({
+                                id: getTranslation('dnd.instructions'),
+                                defaultMessage: `Press spacebar to grab and re-order`
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(VisuallyHidden, {
+                            "aria-live": "assertive",
+                            children: liveText
+                        }),
+                        /*#__PURE__*/ jsx("ol", {
+                            "aria-describedby": ariaDescriptionId,
+                            children: value.map((field, index)=>/*#__PURE__*/ jsx(ComponentProvider, {
+                                    level: level + 1,
+                                    uid: field.__component,
+                                    // id is always a number in a dynamic zone.
+                                    id: field.id,
+                                    type: "dynamiczone",
+                                    children: /*#__PURE__*/ jsx(DynamicComponent, {
+                                        disabled: disabled,
+                                        name: name,
+                                        index: index,
+                                        componentUid: field.__component,
+                                        onMoveComponent: handleMoveComponent,
+                                        onRemoveComponentClick: handleRemoveComponent(name, index),
+                                        onCancel: handleCancel,
+                                        onDropItem: handleDropItem,
+                                        onGrabItem: handleGrabItem,
+                                        onAddComponent: handleAddComponent,
+                                        dynamicComponentsByCategory: dynamicComponentsByCategory,
+                                        children: children
+                                    })
+                                }, field.__temp_key__))
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Flex, {
+                    justifyContent: "center",
+                    children: /*#__PURE__*/ jsx(AddComponentButton, {
+                        hasError: hasError,
+                        isDisabled: disabled,
+                        isOpen: addComponentIsOpen,
+                        onClick: handleClickOpenPicker,
+                        children: renderButtonLabel()
+                    })
+                }),
+                /*#__PURE__*/ jsx(ComponentPicker, {
+                    dynamicComponentsByCategory: dynamicComponentsByCategory,
+                    isOpen: addComponentIsOpen,
+                    onClickAddComponent: handleAddComponent
+                })
+            ]
+        })
+    });
+};
+
+export { DynamicZone, useDynamicZone };
+//# sourceMappingURL=Field.mjs.map

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

@@ -0,0 +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 { useDoc } from '../../../../../hooks/useDocument';\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  const { components, isLoading } = useDoc();\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={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                  >\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","components","isLoading","useDoc","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","Box","DynamicZoneLabel","numberOfComponents","VisuallyHidden","aria-live","ol","aria-describedby","map","field","ComponentProvider","DynamicComponent","onMoveComponent","onRemoveComponentClick","onCancel","onDropItem","onGrabItem","onAddComponent","__temp_key__","justifyContent","AddComponentButton","isDisabled","isOpen","onClick","ComponentPicker","onClickAddComponent"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/NotAllowed.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+
+const NotAllowedInput = ({ hint, label, required, name })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const placeholder = formatMessage({
+        id: 'components.NotAllowedInput.text',
+        defaultMessage: 'No permissions to see this field'
+    });
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+        id: name,
+        hint: hint,
+        name: name,
+        required: required,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.TextInput, {
+                disabled: true,
+                placeholder: placeholder,
+                startAction: /*#__PURE__*/ jsxRuntime.jsx(Icons.EyeStriked, {
+                    fill: "neutral600"
+                }),
+                type: "text",
+                value: ""
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Hint, {})
+        ]
+    });
+};
+
+exports.NotAllowedInput = NotAllowedInput;
+//# sourceMappingURL=NotAllowed.js.map

package/dist/admin/pages/EditView/components/FormInputs/NotAllowed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotAllowed.js","sources":["../../../../../../admin/src/pages/EditView/components/FormInputs/NotAllowed.tsx"],"sourcesContent":["import { Field, TextInput } from '@strapi/design-system';\nimport { EyeStriked } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport type { InputProps } from '@strapi/admin/strapi-admin';\nimport type { Schema } from '@strapi/types';\n\ninterface NotAllowedInputProps extends Omit<InputProps, 'type'> {\n  type: Schema.Attribute.Kind;\n}\n\nconst NotAllowedInput = ({ hint, label, required, name }: NotAllowedInputProps) => {\n  const { formatMessage } = useIntl();\n\n  const placeholder = formatMessage({\n    id: 'components.NotAllowedInput.text',\n    defaultMessage: 'No permissions to see this field',\n  });\n\n  return (\n    <Field.Root id={name} hint={hint} name={name} required={required}>\n      <Field.Label>{label}</Field.Label>\n      <TextInput\n        disabled\n        placeholder={placeholder}\n        startAction={<EyeStriked fill=\"neutral600\" />}\n        type=\"text\"\n        value=\"\"\n      />\n      <Field.Hint />\n    </Field.Root>\n  );\n};\n\nexport { NotAllowedInput };\n"],"names":["NotAllowedInput","hint","label","required","name","formatMessage","useIntl","placeholder","id","defaultMessage","_jsxs","Field","Root","_jsx","Label","TextInput","disabled","startAction","EyeStriked","fill","type","value","Hint"],"mappings":";;;;;;;AAWMA,MAAAA,eAAAA,GAAkB,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAAwB,GAAA;IAC5E,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,MAAMC,cAAcF,aAAc,CAAA;QAChCG,EAAI,EAAA,iCAAA;QACJC,cAAgB,EAAA;AAClB,KAAA,CAAA;IAEA,qBACEC,eAAA,CAACC,mBAAMC,IAAI,EAAA;QAACJ,EAAIJ,EAAAA,IAAAA;QAAMH,IAAMA,EAAAA,IAAAA;QAAMG,IAAMA,EAAAA,IAAAA;QAAMD,QAAUA,EAAAA,QAAAA;;AACtD,0BAAAU,cAAA,CAACF,mBAAMG,KAAK,EAAA;AAAEZ,gBAAAA,QAAAA,EAAAA;;0BACdW,cAACE,CAAAA,sBAAAA,EAAAA;gBACCC,QAAQ,EAAA,IAAA;gBACRT,WAAaA,EAAAA,WAAAA;AACbU,gBAAAA,WAAAA,gBAAaJ,cAACK,CAAAA,gBAAAA,EAAAA;oBAAWC,IAAK,EAAA;;gBAC9BC,IAAK,EAAA,MAAA;gBACLC,KAAM,EAAA;;AAER,0BAAAR,cAAA,CAACF,mBAAMW,IAAI,EAAA,EAAA;;;AAGjB;;;;"}

package/dist/admin/pages/EditView/components/FormInputs/NotAllowed.mjs

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Field, TextInput } from '@strapi/design-system';
+import { EyeStriked } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+
+const NotAllowedInput = ({ hint, label, required, name })=>{
+    const { formatMessage } = useIntl();
+    const placeholder = formatMessage({
+        id: 'components.NotAllowedInput.text',
+        defaultMessage: 'No permissions to see this field'
+    });
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        id: name,
+        hint: hint,
+        name: name,
+        required: required,
+        children: [
+            /*#__PURE__*/ jsx(Field.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ jsx(TextInput, {
+                disabled: true,
+                placeholder: placeholder,
+                startAction: /*#__PURE__*/ jsx(EyeStriked, {
+                    fill: "neutral600"
+                }),
+                type: "text",
+                value: ""
+            }),
+            /*#__PURE__*/ jsx(Field.Hint, {})
+        ]
+    });
+};
+
+export { NotAllowedInput };
+//# sourceMappingURL=NotAllowed.mjs.map