@strapi/content-manager 5.38.1 → 5.40.0

package/dist/admin/pages/EditView/components/FormInputs/Component/NonRepeatable.js

@@ -1,23 +1,40 @@
 '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 reactIntl = require('react-intl');
-var useDocumentContext = require('../../../../../hooks/useDocumentContext.js');
+var objects = require('../../../../../utils/objects.js');
 var FormLayout = require('../../FormLayout.js');
 var ComponentContext = require('../ComponentContext.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 NonRepeatableComponent = ({ attribute, name, children, layout })=>{
-    const { formatMessage } = reactIntl.useIntl();
-    const { value } = strapiAdmin.useField(name);
+    const componentId = strapiAdmin.useForm('NonRepeatableComponent', (state)=>objects.getIn(state.values, `${name}.id`));
     const level = ComponentContext.useComponent('NonRepeatableComponent', (state)=>state.level);
     const isNested = level > 0;
-    const { currentDocument } = useDocumentContext.useDocumentContext('NonRepeatableComponent');
-    strapiAdmin.createRulesEngine();
     const isMobile = strapiAdmin.useIsMobile();
     return /*#__PURE__*/ jsxRuntime.jsx(ComponentContext.ComponentProvider, {
-        id: value?.id,
+        id: componentId,
         uid: attribute.component,
         level: level + 1,
         type: "component",
@@ -29,47 +46,57 @@ const NonRepeatableComponent = ({ attribute, name, children, layout })=>{
             },
             hasRadius: isNested,
             borderColor: isNested || isMobile ? 'neutral200' : undefined,
-            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                direction: "column",
-                alignItems: "stretch",
-                gap: 6,
-                children: layout.map((row, index)=>{
-                    return /*#__PURE__*/ jsxRuntime.jsx(FormLayout.ResponsiveGridRoot, {
-                        gap: {
-                            initial: 3,
-                            medium: 4
-                        },
-                        children: row.map(({ size, ...field })=>{
-                            /**
-                   * Layouts are built from schemas so they don't understand the complete
-                   * schema tree, for components we append the parent name to the field name
-                   * because this is the structure for the data & permissions also understand
-                   * the nesting involved.
-                   */ const completeFieldName = `${name}.${field.name}`;
-                            const translatedLabel = formatMessage({
-                                id: `content-manager.components.${attribute.component}.${field.name}`,
-                                defaultMessage: field.label
-                            });
-                            return /*#__PURE__*/ jsxRuntime.jsx(FormLayout.ResponsiveGridItem, {
-                                col: size,
-                                s: 12,
-                                xs: 12,
-                                direction: "column",
-                                alignItems: "stretch",
-                                children: children({
-                                    ...field,
-                                    label: translatedLabel,
-                                    name: completeFieldName,
-                                    document: currentDocument
-                                })
-                            }, completeFieldName);
-                        })
-                    }, index);
-                })
+            children: /*#__PURE__*/ jsxRuntime.jsx(NonRepeatableComponentFields, {
+                attribute: attribute,
+                name: name,
+                layout: layout,
+                children: children
             })
         })
     });
 };
+const NonRepeatableComponentFields = /*#__PURE__*/ React__namespace.memo(({ attribute, children, layout, name })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 6,
+        children: layout.map((row, index)=>{
+            return /*#__PURE__*/ jsxRuntime.jsx(FormLayout.ResponsiveGridRoot, {
+                gap: {
+                    initial: 3,
+                    medium: 4
+                },
+                children: row.map(({ size, ...field })=>{
+                    /**
+                 * Layouts are built from schemas so they don't understand the complete
+                 * schema tree, for components we append the parent name to the field name
+                 * because this is the structure for the data & permissions also understand
+                 * the nesting involved.
+                 */ const completeFieldName = `${name}.${field.name}`;
+                    const translatedLabel = formatMessage({
+                        id: `content-manager.components.${attribute.component}.${field.name}`,
+                        defaultMessage: field.label
+                    });
+                    return /*#__PURE__*/ jsxRuntime.jsx(FormLayout.ResponsiveGridItem, {
+                        col: size,
+                        s: 12,
+                        xs: 12,
+                        direction: "column",
+                        alignItems: "stretch",
+                        children: children({
+                            ...field,
+                            label: translatedLabel,
+                            name: completeFieldName
+                        })
+                    }, completeFieldName);
+                })
+            }, index);
+        })
+    });
+});
+NonRepeatableComponentFields.displayName = 'NonRepeatableComponentFields';
+const MemoizedNonRepeatableComponent = /*#__PURE__*/ React__namespace.memo(NonRepeatableComponent);
 
-exports.NonRepeatableComponent = NonRepeatableComponent;
+exports.NonRepeatableComponent = MemoizedNonRepeatableComponent;
 //# sourceMappingURL=NonRepeatable.js.map

package/dist/admin/pages/EditView/components/FormInputs/Component/NonRepeatable.js.map

@@ -1 +1 @@
-{"version":3,"file":"NonRepeatable.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/NonRepeatable.tsx"],"sourcesContent":["import { useField, createRulesEngine, useIsMobile } from '@strapi/admin/strapi-admin';\nimport { Box, Flex } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { ComponentProvider, useComponent } from '../ComponentContext';\n\nimport type { ComponentInputProps } from './Input';\n\ntype NonRepeatableComponentProps = Omit<ComponentInputProps, 'required' | 'label'>;\n\nconst NonRepeatableComponent = ({\n  attribute,\n  name,\n  children,\n  layout,\n}: NonRepeatableComponentProps) => {\n  const { formatMessage } = useIntl();\n  const { value } = useField(name);\n  const level = useComponent('NonRepeatableComponent', (state) => state.level);\n  const isNested = level > 0;\n  const { currentDocument } = useDocumentContext('NonRepeatableComponent');\n  const rulesEngine = createRulesEngine();\n  const isMobile = useIsMobile();\n\n  return (\n    <ComponentProvider id={value?.id} uid={attribute.component} level={level + 1} type=\"component\">\n      <Box\n        background={'neutral100'}\n        padding={{ initial: 4, medium: 6 }}\n        hasRadius={isNested}\n        borderColor={isNested || isMobile ? 'neutral200' : undefined}\n      >\n        <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n          {layout.map((row, index) => {\n            return (\n              <ResponsiveGridRoot gap={{ initial: 3, medium: 4 }} key={index}>\n                {row.map(({ size, ...field }) => {\n                  /**\n                   * Layouts are built from schemas so they don't understand the complete\n                   * schema tree, for components we append the parent name to the field name\n                   * because this is the structure for the data & permissions also understand\n                   * the nesting involved.\n                   */\n                  const completeFieldName = `${name}.${field.name}`;\n\n                  const translatedLabel = formatMessage({\n                    id: `content-manager.components.${attribute.component}.${field.name}`,\n                    defaultMessage: field.label,\n                  });\n\n                  return (\n                    <ResponsiveGridItem\n                      col={size}\n                      key={completeFieldName}\n                      s={12}\n                      xs={12}\n                      direction=\"column\"\n                      alignItems=\"stretch\"\n                    >\n                      {children({\n                        ...field,\n                        label: translatedLabel,\n                        name: completeFieldName,\n                        document: currentDocument,\n                      })}\n                    </ResponsiveGridItem>\n                  );\n                })}\n              </ResponsiveGridRoot>\n            );\n          })}\n        </Flex>\n      </Box>\n    </ComponentProvider>\n  );\n};\n\nexport { NonRepeatableComponent };\nexport type { NonRepeatableComponentProps };\n"],"names":["NonRepeatableComponent","attribute","name","children","layout","formatMessage","useIntl","value","useField","level","useComponent","state","isNested","currentDocument","useDocumentContext","createRulesEngine","isMobile","useIsMobile","_jsx","ComponentProvider","id","uid","component","type","Box","background","padding","initial","medium","hasRadius","borderColor","undefined","Flex","direction","alignItems","gap","map","row","index","ResponsiveGridRoot","size","field","completeFieldName","translatedLabel","defaultMessage","label","ResponsiveGridItem","col","s","xs","document"],"mappings":";;;;;;;;;;AAYA,MAAMA,sBAAAA,GAAyB,CAAC,EAC9BC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,MAAM,EACsB,GAAA;IAC5B,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,KAAK,EAAE,GAAGC,oBAAAA,CAASN,IAAAA,CAAAA;AAC3B,IAAA,MAAMO,QAAQC,6BAAAA,CAAa,wBAAA,EAA0B,CAACC,KAAAA,GAAUA,MAAMF,KAAK,CAAA;AAC3E,IAAA,MAAMG,WAAWH,KAAAA,GAAQ,CAAA;AACzB,IAAA,MAAM,EAAEI,eAAe,EAAE,GAAGC,qCAAAA,CAAmB,wBAAA,CAAA;AAC/C,IAAoBC,6BAAAA;AACpB,IAAA,MAAMC,QAAAA,GAAWC,uBAAAA,EAAAA;AAEjB,IAAA,qBACEC,cAAA,CAACC,kCAAAA,EAAAA;AAAkBC,QAAAA,EAAAA,EAAIb,KAAAA,EAAOa,EAAAA;AAAIC,QAAAA,GAAAA,EAAKpB,UAAUqB,SAAS;AAAEb,QAAAA,KAAAA,EAAOA,KAAAA,GAAQ,CAAA;QAAGc,IAAAA,EAAK,WAAA;AACjF,QAAA,QAAA,gBAAAL,cAAA,CAACM,gBAAAA,EAAAA;YACCC,UAAAA,EAAY,YAAA;YACZC,OAAAA,EAAS;gBAAEC,OAAAA,EAAS,CAAA;gBAAGC,MAAAA,EAAQ;AAAE,aAAA;YACjCC,SAAAA,EAAWjB,QAAAA;YACXkB,WAAAA,EAAalB,QAAAA,IAAYI,WAAW,YAAA,GAAee,SAAAA;AAEnD,YAAA,QAAA,gBAAAb,cAAA,CAACc,iBAAAA,EAAAA;gBAAKC,SAAAA,EAAU,QAAA;gBAASC,UAAAA,EAAW,SAAA;gBAAUC,GAAAA,EAAK,CAAA;0BAChD/B,MAAAA,CAAOgC,GAAG,CAAC,CAACC,GAAAA,EAAKC,KAAAA,GAAAA;AAChB,oBAAA,qBACEpB,cAAA,CAACqB,6BAAAA,EAAAA;wBAAmBJ,GAAAA,EAAK;4BAAER,OAAAA,EAAS,CAAA;4BAAGC,MAAAA,EAAQ;AAAE,yBAAA;AAC9CS,wBAAAA,QAAAA,EAAAA,GAAAA,CAAID,GAAG,CAAC,CAAC,EAAEI,IAAI,EAAE,GAAGC,KAAAA,EAAO,GAAA;AAC1B;;;;;sBAMA,MAAMC,oBAAoB,CAAA,EAAGxC,IAAAA,CAAK,CAAC,EAAEuC,KAAAA,CAAMvC,IAAI,CAAA,CAAE;AAEjD,4BAAA,MAAMyC,kBAAkBtC,aAAAA,CAAc;gCACpCe,EAAAA,EAAI,CAAC,2BAA2B,EAAEnB,SAAAA,CAAUqB,SAAS,CAAC,CAAC,EAAEmB,KAAAA,CAAMvC,IAAI,CAAA,CAAE;AACrE0C,gCAAAA,cAAAA,EAAgBH,MAAMI;AACxB,6BAAA,CAAA;AAEA,4BAAA,qBACE3B,cAAA,CAAC4B,6BAAAA,EAAAA;gCACCC,GAAAA,EAAKP,IAAAA;gCAELQ,CAAAA,EAAG,EAAA;gCACHC,EAAAA,EAAI,EAAA;gCACJhB,SAAAA,EAAU,QAAA;gCACVC,UAAAA,EAAW,SAAA;0CAEV/B,QAAAA,CAAS;AACR,oCAAA,GAAGsC,KAAK;oCACRI,KAAAA,EAAOF,eAAAA;oCACPzC,IAAAA,EAAMwC,iBAAAA;oCACNQ,QAAAA,EAAUrC;AACZ,iCAAA;AAXK6B,6BAAAA,EAAAA,iBAAAA,CAAAA;AAcX,wBAAA,CAAA;AAhCuDJ,qBAAAA,EAAAA,KAAAA,CAAAA;AAmC7D,gBAAA,CAAA;;;;AAKV;;;;"}
+{"version":3,"file":"NonRepeatable.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/NonRepeatable.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useIsMobile } from '@strapi/admin/strapi-admin';\nimport { Box, Flex } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getIn } from '../../../../../utils/objects';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { ComponentProvider, useComponent } from '../ComponentContext';\n\nimport type { ComponentInputProps } from './Input';\n\ntype NonRepeatableComponentProps = Omit<ComponentInputProps, 'required' | 'label'>;\n\nconst NonRepeatableComponent = ({\n  attribute,\n  name,\n  children,\n  layout,\n}: NonRepeatableComponentProps) => {\n  const componentId = useForm(\n    'NonRepeatableComponent',\n    (state) => getIn(state.values, `${name}.id`) as number | undefined\n  );\n  const level = useComponent('NonRepeatableComponent', (state) => state.level);\n  const isNested = level > 0;\n  const isMobile = useIsMobile();\n\n  return (\n    <ComponentProvider\n      id={componentId}\n      uid={attribute.component}\n      level={level + 1}\n      type=\"component\"\n    >\n      <Box\n        background={'neutral100'}\n        padding={{ initial: 4, medium: 6 }}\n        hasRadius={isNested}\n        borderColor={isNested || isMobile ? 'neutral200' : undefined}\n      >\n        <NonRepeatableComponentFields attribute={attribute} name={name} layout={layout}>\n          {children}\n        </NonRepeatableComponentFields>\n      </Box>\n    </ComponentProvider>\n  );\n};\n\ninterface NonRepeatableComponentFieldsProps\n  extends Pick<NonRepeatableComponentProps, 'attribute' | 'children' | 'layout' | 'name'> {}\n\nconst NonRepeatableComponentFields = React.memo(\n  ({ attribute, children, layout, name }: NonRepeatableComponentFieldsProps) => {\n    const { formatMessage } = useIntl();\n\n    return (\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n        {layout.map((row, index) => {\n          return (\n            <ResponsiveGridRoot gap={{ initial: 3, medium: 4 }} key={index}>\n              {row.map(({ size, ...field }) => {\n                /**\n                 * Layouts are built from schemas so they don't understand the complete\n                 * schema tree, for components we append the parent name to the field name\n                 * because this is the structure for the data & permissions also understand\n                 * the nesting involved.\n                 */\n                const completeFieldName = `${name}.${field.name}`;\n\n                const translatedLabel = formatMessage({\n                  id: `content-manager.components.${attribute.component}.${field.name}`,\n                  defaultMessage: field.label,\n                });\n\n                return (\n                  <ResponsiveGridItem\n                    col={size}\n                    key={completeFieldName}\n                    s={12}\n                    xs={12}\n                    direction=\"column\"\n                    alignItems=\"stretch\"\n                  >\n                    {children({\n                      ...field,\n                      label: translatedLabel,\n                      name: completeFieldName,\n                    })}\n                  </ResponsiveGridItem>\n                );\n              })}\n            </ResponsiveGridRoot>\n          );\n        })}\n      </Flex>\n    );\n  }\n);\n\nNonRepeatableComponentFields.displayName = 'NonRepeatableComponentFields';\n\nconst MemoizedNonRepeatableComponent = React.memo(NonRepeatableComponent);\n\nexport { MemoizedNonRepeatableComponent as NonRepeatableComponent };\nexport type { NonRepeatableComponentProps };\n"],"names":["NonRepeatableComponent","attribute","name","children","layout","componentId","useForm","state","getIn","values","level","useComponent","isNested","isMobile","useIsMobile","_jsx","ComponentProvider","id","uid","component","type","Box","background","padding","initial","medium","hasRadius","borderColor","undefined","NonRepeatableComponentFields","React","memo","formatMessage","useIntl","Flex","direction","alignItems","gap","map","row","index","ResponsiveGridRoot","size","field","completeFieldName","translatedLabel","defaultMessage","label","ResponsiveGridItem","col","s","xs","displayName","MemoizedNonRepeatableComponent"],"mappings":"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"}

package/dist/admin/pages/EditView/components/FormInputs/Component/NonRepeatable.mjs

@@ -1,21 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
-import { useField, createRulesEngine, useIsMobile } from '@strapi/admin/strapi-admin';
-import { Box, Flex } from '@strapi/design-system';
+import * as React from 'react';
+import { useForm, useIsMobile } from '@strapi/admin/strapi-admin';
+import { Flex, Box } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
-import { useDocumentContext } from '../../../../../hooks/useDocumentContext.mjs';
+import { getIn } from '../../../../../utils/objects.mjs';
 import { ResponsiveGridRoot, ResponsiveGridItem } from '../../FormLayout.mjs';
 import { useComponent, ComponentProvider } from '../ComponentContext.mjs';
 
 const NonRepeatableComponent = ({ attribute, name, children, layout })=>{
-    const { formatMessage } = useIntl();
-    const { value } = useField(name);
+    const componentId = useForm('NonRepeatableComponent', (state)=>getIn(state.values, `${name}.id`));
     const level = useComponent('NonRepeatableComponent', (state)=>state.level);
     const isNested = level > 0;
-    const { currentDocument } = useDocumentContext('NonRepeatableComponent');
-    createRulesEngine();
     const isMobile = useIsMobile();
     return /*#__PURE__*/ jsx(ComponentProvider, {
-        id: value?.id,
+        id: componentId,
         uid: attribute.component,
         level: level + 1,
         type: "component",
@@ -27,47 +25,57 @@ const NonRepeatableComponent = ({ attribute, name, children, layout })=>{
             },
             hasRadius: isNested,
             borderColor: isNested || isMobile ? 'neutral200' : undefined,
-            children: /*#__PURE__*/ jsx(Flex, {
-                direction: "column",
-                alignItems: "stretch",
-                gap: 6,
-                children: layout.map((row, index)=>{
-                    return /*#__PURE__*/ jsx(ResponsiveGridRoot, {
-                        gap: {
-                            initial: 3,
-                            medium: 4
-                        },
-                        children: row.map(({ size, ...field })=>{
-                            /**
-                   * Layouts are built from schemas so they don't understand the complete
-                   * schema tree, for components we append the parent name to the field name
-                   * because this is the structure for the data & permissions also understand
-                   * the nesting involved.
-                   */ const completeFieldName = `${name}.${field.name}`;
-                            const translatedLabel = formatMessage({
-                                id: `content-manager.components.${attribute.component}.${field.name}`,
-                                defaultMessage: field.label
-                            });
-                            return /*#__PURE__*/ jsx(ResponsiveGridItem, {
-                                col: size,
-                                s: 12,
-                                xs: 12,
-                                direction: "column",
-                                alignItems: "stretch",
-                                children: children({
-                                    ...field,
-                                    label: translatedLabel,
-                                    name: completeFieldName,
-                                    document: currentDocument
-                                })
-                            }, completeFieldName);
-                        })
-                    }, index);
-                })
+            children: /*#__PURE__*/ jsx(NonRepeatableComponentFields, {
+                attribute: attribute,
+                name: name,
+                layout: layout,
+                children: children
             })
         })
     });
 };
+const NonRepeatableComponentFields = /*#__PURE__*/ React.memo(({ attribute, children, layout, name })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsx(Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 6,
+        children: layout.map((row, index)=>{
+            return /*#__PURE__*/ jsx(ResponsiveGridRoot, {
+                gap: {
+                    initial: 3,
+                    medium: 4
+                },
+                children: row.map(({ size, ...field })=>{
+                    /**
+                 * Layouts are built from schemas so they don't understand the complete
+                 * schema tree, for components we append the parent name to the field name
+                 * because this is the structure for the data & permissions also understand
+                 * the nesting involved.
+                 */ const completeFieldName = `${name}.${field.name}`;
+                    const translatedLabel = formatMessage({
+                        id: `content-manager.components.${attribute.component}.${field.name}`,
+                        defaultMessage: field.label
+                    });
+                    return /*#__PURE__*/ jsx(ResponsiveGridItem, {
+                        col: size,
+                        s: 12,
+                        xs: 12,
+                        direction: "column",
+                        alignItems: "stretch",
+                        children: children({
+                            ...field,
+                            label: translatedLabel,
+                            name: completeFieldName
+                        })
+                    }, completeFieldName);
+                })
+            }, index);
+        })
+    });
+});
+NonRepeatableComponentFields.displayName = 'NonRepeatableComponentFields';
+const MemoizedNonRepeatableComponent = /*#__PURE__*/ React.memo(NonRepeatableComponent);
 
-export { NonRepeatableComponent };
+export { MemoizedNonRepeatableComponent as NonRepeatableComponent };
 //# sourceMappingURL=NonRepeatable.mjs.map

package/dist/admin/pages/EditView/components/FormInputs/Component/NonRepeatable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NonRepeatable.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/NonRepeatable.tsx"],"sourcesContent":["import { useField, createRulesEngine, useIsMobile } from '@strapi/admin/strapi-admin';\nimport { Box, Flex } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { ComponentProvider, useComponent } from '../ComponentContext';\n\nimport type { ComponentInputProps } from './Input';\n\ntype NonRepeatableComponentProps = Omit<ComponentInputProps, 'required' | 'label'>;\n\nconst NonRepeatableComponent = ({\n  attribute,\n  name,\n  children,\n  layout,\n}: NonRepeatableComponentProps) => {\n  const { formatMessage } = useIntl();\n  const { value } = useField(name);\n  const level = useComponent('NonRepeatableComponent', (state) => state.level);\n  const isNested = level > 0;\n  const { currentDocument } = useDocumentContext('NonRepeatableComponent');\n  const rulesEngine = createRulesEngine();\n  const isMobile = useIsMobile();\n\n  return (\n    <ComponentProvider id={value?.id} uid={attribute.component} level={level + 1} type=\"component\">\n      <Box\n        background={'neutral100'}\n        padding={{ initial: 4, medium: 6 }}\n        hasRadius={isNested}\n        borderColor={isNested || isMobile ? 'neutral200' : undefined}\n      >\n        <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n          {layout.map((row, index) => {\n            return (\n              <ResponsiveGridRoot gap={{ initial: 3, medium: 4 }} key={index}>\n                {row.map(({ size, ...field }) => {\n                  /**\n                   * Layouts are built from schemas so they don't understand the complete\n                   * schema tree, for components we append the parent name to the field name\n                   * because this is the structure for the data & permissions also understand\n                   * the nesting involved.\n                   */\n                  const completeFieldName = `${name}.${field.name}`;\n\n                  const translatedLabel = formatMessage({\n                    id: `content-manager.components.${attribute.component}.${field.name}`,\n                    defaultMessage: field.label,\n                  });\n\n                  return (\n                    <ResponsiveGridItem\n                      col={size}\n                      key={completeFieldName}\n                      s={12}\n                      xs={12}\n                      direction=\"column\"\n                      alignItems=\"stretch\"\n                    >\n                      {children({\n                        ...field,\n                        label: translatedLabel,\n                        name: completeFieldName,\n                        document: currentDocument,\n                      })}\n                    </ResponsiveGridItem>\n                  );\n                })}\n              </ResponsiveGridRoot>\n            );\n          })}\n        </Flex>\n      </Box>\n    </ComponentProvider>\n  );\n};\n\nexport { NonRepeatableComponent };\nexport type { NonRepeatableComponentProps };\n"],"names":["NonRepeatableComponent","attribute","name","children","layout","formatMessage","useIntl","value","useField","level","useComponent","state","isNested","currentDocument","useDocumentContext","createRulesEngine","isMobile","useIsMobile","_jsx","ComponentProvider","id","uid","component","type","Box","background","padding","initial","medium","hasRadius","borderColor","undefined","Flex","direction","alignItems","gap","map","row","index","ResponsiveGridRoot","size","field","completeFieldName","translatedLabel","defaultMessage","label","ResponsiveGridItem","col","s","xs","document"],"mappings":";;;;;;;;AAYA,MAAMA,sBAAAA,GAAyB,CAAC,EAC9BC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,MAAM,EACsB,GAAA;IAC5B,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,KAAK,EAAE,GAAGC,QAAAA,CAASN,IAAAA,CAAAA;AAC3B,IAAA,MAAMO,QAAQC,YAAAA,CAAa,wBAAA,EAA0B,CAACC,KAAAA,GAAUA,MAAMF,KAAK,CAAA;AAC3E,IAAA,MAAMG,WAAWH,KAAAA,GAAQ,CAAA;AACzB,IAAA,MAAM,EAAEI,eAAe,EAAE,GAAGC,kBAAAA,CAAmB,wBAAA,CAAA;AAC/C,IAAoBC,iBAAAA;AACpB,IAAA,MAAMC,QAAAA,GAAWC,WAAAA,EAAAA;AAEjB,IAAA,qBACEC,GAAA,CAACC,iBAAAA,EAAAA;AAAkBC,QAAAA,EAAAA,EAAIb,KAAAA,EAAOa,EAAAA;AAAIC,QAAAA,GAAAA,EAAKpB,UAAUqB,SAAS;AAAEb,QAAAA,KAAAA,EAAOA,KAAAA,GAAQ,CAAA;QAAGc,IAAAA,EAAK,WAAA;AACjF,QAAA,QAAA,gBAAAL,GAAA,CAACM,GAAAA,EAAAA;YACCC,UAAAA,EAAY,YAAA;YACZC,OAAAA,EAAS;gBAAEC,OAAAA,EAAS,CAAA;gBAAGC,MAAAA,EAAQ;AAAE,aAAA;YACjCC,SAAAA,EAAWjB,QAAAA;YACXkB,WAAAA,EAAalB,QAAAA,IAAYI,WAAW,YAAA,GAAee,SAAAA;AAEnD,YAAA,QAAA,gBAAAb,GAAA,CAACc,IAAAA,EAAAA;gBAAKC,SAAAA,EAAU,QAAA;gBAASC,UAAAA,EAAW,SAAA;gBAAUC,GAAAA,EAAK,CAAA;0BAChD/B,MAAAA,CAAOgC,GAAG,CAAC,CAACC,GAAAA,EAAKC,KAAAA,GAAAA;AAChB,oBAAA,qBACEpB,GAAA,CAACqB,kBAAAA,EAAAA;wBAAmBJ,GAAAA,EAAK;4BAAER,OAAAA,EAAS,CAAA;4BAAGC,MAAAA,EAAQ;AAAE,yBAAA;AAC9CS,wBAAAA,QAAAA,EAAAA,GAAAA,CAAID,GAAG,CAAC,CAAC,EAAEI,IAAI,EAAE,GAAGC,KAAAA,EAAO,GAAA;AAC1B;;;;;sBAMA,MAAMC,oBAAoB,CAAA,EAAGxC,IAAAA,CAAK,CAAC,EAAEuC,KAAAA,CAAMvC,IAAI,CAAA,CAAE;AAEjD,4BAAA,MAAMyC,kBAAkBtC,aAAAA,CAAc;gCACpCe,EAAAA,EAAI,CAAC,2BAA2B,EAAEnB,SAAAA,CAAUqB,SAAS,CAAC,CAAC,EAAEmB,KAAAA,CAAMvC,IAAI,CAAA,CAAE;AACrE0C,gCAAAA,cAAAA,EAAgBH,MAAMI;AACxB,6BAAA,CAAA;AAEA,4BAAA,qBACE3B,GAAA,CAAC4B,kBAAAA,EAAAA;gCACCC,GAAAA,EAAKP,IAAAA;gCAELQ,CAAAA,EAAG,EAAA;gCACHC,EAAAA,EAAI,EAAA;gCACJhB,SAAAA,EAAU,QAAA;gCACVC,UAAAA,EAAW,SAAA;0CAEV/B,QAAAA,CAAS;AACR,oCAAA,GAAGsC,KAAK;oCACRI,KAAAA,EAAOF,eAAAA;oCACPzC,IAAAA,EAAMwC,iBAAAA;oCACNQ,QAAAA,EAAUrC;AACZ,iCAAA;AAXK6B,6BAAAA,EAAAA,iBAAAA,CAAAA;AAcX,wBAAA,CAAA;AAhCuDJ,qBAAAA,EAAAA,KAAAA,CAAAA;AAmC7D,gBAAA,CAAA;;;;AAKV;;;;"}
+{"version":3,"file":"NonRepeatable.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/NonRepeatable.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useForm, useIsMobile } from '@strapi/admin/strapi-admin';\nimport { Box, Flex } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getIn } from '../../../../../utils/objects';\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\nimport { ComponentProvider, useComponent } from '../ComponentContext';\n\nimport type { ComponentInputProps } from './Input';\n\ntype NonRepeatableComponentProps = Omit<ComponentInputProps, 'required' | 'label'>;\n\nconst NonRepeatableComponent = ({\n  attribute,\n  name,\n  children,\n  layout,\n}: NonRepeatableComponentProps) => {\n  const componentId = useForm(\n    'NonRepeatableComponent',\n    (state) => getIn(state.values, `${name}.id`) as number | undefined\n  );\n  const level = useComponent('NonRepeatableComponent', (state) => state.level);\n  const isNested = level > 0;\n  const isMobile = useIsMobile();\n\n  return (\n    <ComponentProvider\n      id={componentId}\n      uid={attribute.component}\n      level={level + 1}\n      type=\"component\"\n    >\n      <Box\n        background={'neutral100'}\n        padding={{ initial: 4, medium: 6 }}\n        hasRadius={isNested}\n        borderColor={isNested || isMobile ? 'neutral200' : undefined}\n      >\n        <NonRepeatableComponentFields attribute={attribute} name={name} layout={layout}>\n          {children}\n        </NonRepeatableComponentFields>\n      </Box>\n    </ComponentProvider>\n  );\n};\n\ninterface NonRepeatableComponentFieldsProps\n  extends Pick<NonRepeatableComponentProps, 'attribute' | 'children' | 'layout' | 'name'> {}\n\nconst NonRepeatableComponentFields = React.memo(\n  ({ attribute, children, layout, name }: NonRepeatableComponentFieldsProps) => {\n    const { formatMessage } = useIntl();\n\n    return (\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\n        {layout.map((row, index) => {\n          return (\n            <ResponsiveGridRoot gap={{ initial: 3, medium: 4 }} key={index}>\n              {row.map(({ size, ...field }) => {\n                /**\n                 * Layouts are built from schemas so they don't understand the complete\n                 * schema tree, for components we append the parent name to the field name\n                 * because this is the structure for the data & permissions also understand\n                 * the nesting involved.\n                 */\n                const completeFieldName = `${name}.${field.name}`;\n\n                const translatedLabel = formatMessage({\n                  id: `content-manager.components.${attribute.component}.${field.name}`,\n                  defaultMessage: field.label,\n                });\n\n                return (\n                  <ResponsiveGridItem\n                    col={size}\n                    key={completeFieldName}\n                    s={12}\n                    xs={12}\n                    direction=\"column\"\n                    alignItems=\"stretch\"\n                  >\n                    {children({\n                      ...field,\n                      label: translatedLabel,\n                      name: completeFieldName,\n                    })}\n                  </ResponsiveGridItem>\n                );\n              })}\n            </ResponsiveGridRoot>\n          );\n        })}\n      </Flex>\n    );\n  }\n);\n\nNonRepeatableComponentFields.displayName = 'NonRepeatableComponentFields';\n\nconst MemoizedNonRepeatableComponent = React.memo(NonRepeatableComponent);\n\nexport { MemoizedNonRepeatableComponent as NonRepeatableComponent };\nexport type { NonRepeatableComponentProps };\n"],"names":["NonRepeatableComponent","attribute","name","children","layout","componentId","useForm","state","getIn","values","level","useComponent","isNested","isMobile","useIsMobile","_jsx","ComponentProvider","id","uid","component","type","Box","background","padding","initial","medium","hasRadius","borderColor","undefined","NonRepeatableComponentFields","React","memo","formatMessage","useIntl","Flex","direction","alignItems","gap","map","row","index","ResponsiveGridRoot","size","field","completeFieldName","translatedLabel","defaultMessage","label","ResponsiveGridItem","col","s","xs","displayName","MemoizedNonRepeatableComponent"],"mappings":"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"}