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

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

@@ -0,0 +1,57 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { useField } from '@strapi/admin/strapi-admin';
+import { Box, Flex, Typography } from '@strapi/design-system';
+import { PlusCircle } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { getTranslation } from '../../../../../utils/translations.mjs';
+
+const Initializer = ({ disabled, name, onClick })=>{
+    const { formatMessage } = useIntl();
+    const field = useField(name);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(Box, {
+            tag: "button",
+            background: disabled ? 'neutral150' : 'neutral100',
+            borderColor: field.error ? 'danger600' : 'neutral200',
+            hasRadius: true,
+            disabled: disabled,
+            onClick: onClick,
+            paddingTop: 9,
+            paddingBottom: 9,
+            type: "button",
+            style: {
+                cursor: disabled ? 'not-allowed' : 'pointer'
+            },
+            children: /*#__PURE__*/ jsxs(Flex, {
+                direction: "column",
+                gap: 2,
+                children: [
+                    /*#__PURE__*/ jsx(Flex, {
+                        justifyContent: "center",
+                        color: disabled ? 'neutral500' : 'primary600',
+                        children: /*#__PURE__*/ jsx(PlusCircle, {
+                            width: "3.2rem",
+                            height: "3.2rem"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Flex, {
+                        justifyContent: "center",
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            textColor: disabled ? 'neutral600' : 'primary600',
+                            variant: "pi",
+                            fontWeight: "bold",
+                            children: formatMessage({
+                                id: getTranslation('components.empty-repeatable'),
+                                defaultMessage: 'No entry yet. Click to add one.'
+                            })
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+
+export { Initializer };
+//# sourceMappingURL=Initializer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Initializer.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/Initializer.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { useField } from '@strapi/admin/strapi-admin';\r\nimport { Box, Flex, Typography } from '@strapi/design-system';\r\nimport { PlusCircle } from '@strapi/icons';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { getTranslation } from '../../../../../utils/translations';\r\n\r\ninterface InitializerProps {\r\n  disabled?: boolean;\r\n  name: string;\r\n  onClick?: React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;\r\n}\r\n\r\nconst Initializer = ({ disabled, name, onClick }: InitializerProps) => {\r\n  const { formatMessage } = useIntl();\r\n\r\n  const field = useField(name);\r\n\r\n  return (\r\n    <>\r\n      <Box\r\n        tag=\"button\"\r\n        background={disabled ? 'neutral150' : 'neutral100'}\r\n        borderColor={field.error ? 'danger600' : 'neutral200'}\r\n        hasRadius\r\n        disabled={disabled}\r\n        onClick={onClick}\r\n        paddingTop={9}\r\n        paddingBottom={9}\r\n        type=\"button\"\r\n        style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}\r\n      >\r\n        <Flex direction=\"column\" gap={2}>\r\n          <Flex justifyContent=\"center\" color={disabled ? 'neutral500' : 'primary600'}>\r\n            <PlusCircle width=\"3.2rem\" height=\"3.2rem\" />\r\n          </Flex>\r\n          <Flex justifyContent=\"center\">\r\n            <Typography\r\n              textColor={disabled ? 'neutral600' : 'primary600'}\r\n              variant=\"pi\"\r\n              fontWeight=\"bold\"\r\n            >\r\n              {formatMessage({\r\n                id: getTranslation('components.empty-repeatable'),\r\n                defaultMessage: 'No entry yet. Click to add one.',\r\n              })}\r\n            </Typography>\r\n          </Flex>\r\n        </Flex>\r\n      </Box>\r\n    </>\r\n  );\r\n};\r\n\r\nexport { Initializer };\r\nexport type { InitializerProps };\r\n"],"names":["Initializer","disabled","name","onClick","formatMessage","useIntl","field","useField","_jsx","_Fragment","Box","tag","background","borderColor","error","hasRadius","paddingTop","paddingBottom","type","style","cursor","_jsxs","Flex","direction","gap","justifyContent","color","PlusCircle","width","height","Typography","textColor","variant","fontWeight","id","getTranslation","defaultMessage"],"mappings":";;;;;;;;AAeA,MAAMA,WAAAA,GAAc,CAAC,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,OAAO,EAAoB,GAAA;IAChE,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,MAAMC,QAAQC,QAAAA,CAASL,IAAAA,CAAAA;IAEvB,qBACEM,GAAA,CAAAC,QAAA,EAAA;AACE,QAAA,QAAA,gBAAAD,GAAA,CAACE,GAAAA,EAAAA;YACCC,GAAAA,EAAI,QAAA;AACJC,YAAAA,UAAAA,EAAYX,WAAW,YAAA,GAAe,YAAA;YACtCY,WAAAA,EAAaP,KAAAA,CAAMQ,KAAK,GAAG,WAAA,GAAc,YAAA;YACzCC,SAAS,EAAA,IAAA;YACTd,QAAAA,EAAUA,QAAAA;YACVE,OAAAA,EAASA,OAAAA;YACTa,UAAAA,EAAY,CAAA;YACZC,aAAAA,EAAe,CAAA;YACfC,IAAAA,EAAK,QAAA;YACLC,KAAAA,EAAO;AAAEC,gBAAAA,MAAAA,EAAQnB,WAAW,aAAA,GAAgB;AAAU,aAAA;AAEtD,YAAA,QAAA,gBAAAoB,IAAA,CAACC,IAAAA,EAAAA;gBAAKC,SAAAA,EAAU,QAAA;gBAASC,GAAAA,EAAK,CAAA;;kCAC5BhB,GAAA,CAACc,IAAAA,EAAAA;wBAAKG,cAAAA,EAAe,QAAA;AAASC,wBAAAA,KAAAA,EAAOzB,WAAW,YAAA,GAAe,YAAA;AAC7D,wBAAA,QAAA,gBAAAO,GAAA,CAACmB,UAAAA,EAAAA;4BAAWC,KAAAA,EAAM,QAAA;4BAASC,MAAAA,EAAO;;;kCAEpCrB,GAAA,CAACc,IAAAA,EAAAA;wBAAKG,cAAAA,EAAe,QAAA;AACnB,wBAAA,QAAA,gBAAAjB,GAAA,CAACsB,UAAAA,EAAAA;AACCC,4BAAAA,SAAAA,EAAW9B,WAAW,YAAA,GAAe,YAAA;4BACrC+B,OAAAA,EAAQ,IAAA;4BACRC,UAAAA,EAAW,MAAA;sCAEV7B,aAAAA,CAAc;AACb8B,gCAAAA,EAAAA,EAAIC,cAAAA,CAAe,6BAAA,CAAA;gCACnBC,cAAAA,EAAgB;AAClB,6BAAA;;;;;;;AAOd;;;;"}

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

@@ -0,0 +1,107 @@
+'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 Icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var useDocumentContext = require('../../../../../hooks/useDocumentContext.js');
+var translations = require('../../../../../utils/translations.js');
+var data = require('../../../utils/data.js');
+var forms = require('../../../utils/forms.js');
+var Initializer = require('./Initializer.js');
+var NonRepeatable = require('./NonRepeatable.js');
+var Repeatable = require('./Repeatable.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return 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__*/_interopNamespace(React);
+
+const ComponentInput = ({ label, required, name, attribute, disabled, labelAction, ...props })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const field = strapiAdmin.useField(name);
+    const showResetComponent = !attribute.repeatable && field.value !== undefined && field.value !== null && !disabled;
+    const { currentDocument: { components } } = useDocumentContext.useDocumentContext('ComponentInput');
+    const handleInitialisationClick = ()=>{
+        const schema = components[attribute.component];
+        const form = forms.createDefaultForm(schema, components);
+        const data$1 = data.transformDocument(schema, components)(form);
+        field.onChange(name, data$1);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+        error: field.error,
+        required: required,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                justifyContent: "space-between",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Label, {
+                        action: labelAction,
+                        children: [
+                            label,
+                            attribute.repeatable && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                                children: [
+                                    " (",
+                                    Array.isArray(field.value) ? field.value.length : 0,
+                                    ")"
+                                ]
+                            })
+                        ]
+                    }),
+                    showResetComponent && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
+                        label: formatMessage({
+                            id: translations.getTranslation('components.reset-entry'),
+                            defaultMessage: 'Reset Entry'
+                        }),
+                        variant: "ghost",
+                        onClick: ()=>{
+                            field.onChange(name, null);
+                        },
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Icons.Trash, {})
+                    })
+                ]
+            }),
+            !attribute.repeatable && !field.value && /*#__PURE__*/ jsxRuntime.jsx(Initializer.Initializer, {
+                disabled: disabled,
+                name: name,
+                onClick: handleInitialisationClick
+            }),
+            !attribute.repeatable && field.value ? /*#__PURE__*/ jsxRuntime.jsx(NonRepeatable.NonRepeatableComponent, {
+                attribute: attribute,
+                name: name,
+                disabled: disabled,
+                ...props,
+                children: props.children
+            }) : null,
+            attribute.repeatable && /*#__PURE__*/ jsxRuntime.jsx(Repeatable.RepeatableComponent, {
+                attribute: attribute,
+                name: name,
+                disabled: disabled,
+                ...props,
+                children: props.children
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})
+        ]
+    });
+};
+const MemoizedComponentInput = /*#__PURE__*/ React__namespace.memo(ComponentInput);
+
+exports.ComponentInput = MemoizedComponentInput;
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/Input.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { InputProps, useField } from '@strapi/admin/strapi-admin';\r\nimport { Field, Flex, IconButton } from '@strapi/design-system';\r\nimport { Trash } from '@strapi/icons';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\r\nimport { EditFieldLayout } from '../../../../../hooks/useDocumentLayout';\r\nimport { getTranslation } from '../../../../../utils/translations';\r\nimport { type AnyData, transformDocument } from '../../../utils/data';\r\nimport { createDefaultForm } from '../../../utils/forms';\r\nimport { type InputRendererProps } from '../../InputRenderer';\r\n\r\nimport { Initializer } from './Initializer';\r\nimport { NonRepeatableComponent } from './NonRepeatable';\r\nimport { RepeatableComponent } from './Repeatable';\r\n\r\ninterface ComponentInputProps\r\n  extends Omit<Extract<EditFieldLayout, { type: 'component' }>, 'size' | 'hint'>,\r\n    Pick<InputProps, 'hint'> {\r\n  labelAction?: React.ReactNode;\r\n  children: (props: InputRendererProps) => React.ReactNode;\r\n  /**\r\n   * We need layout to come from the props, and not via a hook, because Content History needs\r\n   * a way to modify the normal component layout to add hidden fields.\r\n   */\r\n  layout: ReadonlyArray<ReadonlyArray<EditFieldLayout>>;\r\n}\r\n\r\nconst ComponentInput = ({\r\n  label,\r\n  required,\r\n  name,\r\n  attribute,\r\n  disabled,\r\n  labelAction,\r\n  ...props\r\n}: ComponentInputProps) => {\r\n  const { formatMessage } = useIntl();\r\n  const field = useField<AnyData | AnyData[] | null>(name);\r\n\r\n  const showResetComponent =\r\n    !attribute.repeatable && field.value !== undefined && field.value !== null && !disabled;\r\n\r\n  const {\r\n    currentDocument: { components },\r\n  } = useDocumentContext('ComponentInput');\r\n\r\n  const handleInitialisationClick = () => {\r\n    const schema = components[attribute.component];\r\n    const form = createDefaultForm(schema, components);\r\n    const data = transformDocument(schema, components)(form);\r\n\r\n    field.onChange(name, data);\r\n  };\r\n\r\n  return (\r\n    <Field.Root error={field.error} required={required}>\r\n      <Flex justifyContent=\"space-between\">\r\n        <Field.Label action={labelAction}>\r\n          {label}\r\n          {attribute.repeatable && (\r\n            <>&nbsp;({Array.isArray(field.value) ? field.value.length : 0})</>\r\n          )}\r\n        </Field.Label>\r\n\r\n        {showResetComponent && (\r\n          <IconButton\r\n            label={formatMessage({\r\n              id: getTranslation('components.reset-entry'),\r\n              defaultMessage: 'Reset Entry',\r\n            })}\r\n            variant=\"ghost\"\r\n            onClick={() => {\r\n              field.onChange(name, null);\r\n            }}\r\n          >\r\n            <Trash />\r\n          </IconButton>\r\n        )}\r\n      </Flex>\r\n      {/**\r\n       * if the field isn't repeatable then we display a button to start the field\r\n       * TODO: should this just live in the `NonRepeatableComponent`?\r\n       */}\r\n      {!attribute.repeatable && !field.value && (\r\n        <Initializer disabled={disabled} name={name} onClick={handleInitialisationClick} />\r\n      )}\r\n      {!attribute.repeatable && field.value ? (\r\n        <NonRepeatableComponent attribute={attribute} name={name} disabled={disabled} {...props}>\r\n          {props.children}\r\n        </NonRepeatableComponent>\r\n      ) : null}\r\n      {attribute.repeatable && (\r\n        <RepeatableComponent attribute={attribute} name={name} disabled={disabled} {...props}>\r\n          {props.children}\r\n        </RepeatableComponent>\r\n      )}\r\n      <Field.Error />\r\n    </Field.Root>\r\n  );\r\n};\r\n\r\nconst MemoizedComponentInput = React.memo(ComponentInput);\r\n\r\nexport { MemoizedComponentInput as ComponentInput };\r\nexport type { ComponentInputProps };\r\n"],"names":["ComponentInput","label","required","name","attribute","disabled","labelAction","props","formatMessage","useIntl","field","useField","showResetComponent","repeatable","value","undefined","currentDocument","components","useDocumentContext","handleInitialisationClick","schema","component","form","createDefaultForm","data","transformDocument","onChange","_jsxs","Field","Root","error","Flex","justifyContent","Label","action","_Fragment","Array","isArray","length","_jsx","IconButton","id","getTranslation","defaultMessage","variant","onClick","Trash","Initializer","NonRepeatableComponent","children","RepeatableComponent","Error","MemoizedComponentInput","React","memo"],"mappings":"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"}

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

@@ -0,0 +1,85 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useField } from '@strapi/admin/strapi-admin';
+import { Field, Flex, IconButton } from '@strapi/design-system';
+import { Trash } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { useDocumentContext } from '../../../../../hooks/useDocumentContext.mjs';
+import { getTranslation } from '../../../../../utils/translations.mjs';
+import { transformDocument } from '../../../utils/data.mjs';
+import { createDefaultForm } from '../../../utils/forms.mjs';
+import { Initializer } from './Initializer.mjs';
+import { NonRepeatableComponent as MemoizedNonRepeatableComponent } from './NonRepeatable.mjs';
+import { RepeatableComponent as MemoizedRepeatableComponent } from './Repeatable.mjs';
+
+const ComponentInput = ({ label, required, name, attribute, disabled, labelAction, ...props })=>{
+    const { formatMessage } = useIntl();
+    const field = useField(name);
+    const showResetComponent = !attribute.repeatable && field.value !== undefined && field.value !== null && !disabled;
+    const { currentDocument: { components } } = useDocumentContext('ComponentInput');
+    const handleInitialisationClick = ()=>{
+        const schema = components[attribute.component];
+        const form = createDefaultForm(schema, components);
+        const data = transformDocument(schema, components)(form);
+        field.onChange(name, data);
+    };
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        error: field.error,
+        required: required,
+        children: [
+            /*#__PURE__*/ jsxs(Flex, {
+                justifyContent: "space-between",
+                children: [
+                    /*#__PURE__*/ jsxs(Field.Label, {
+                        action: labelAction,
+                        children: [
+                            label,
+                            attribute.repeatable && /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    " (",
+                                    Array.isArray(field.value) ? field.value.length : 0,
+                                    ")"
+                                ]
+                            })
+                        ]
+                    }),
+                    showResetComponent && /*#__PURE__*/ jsx(IconButton, {
+                        label: formatMessage({
+                            id: getTranslation('components.reset-entry'),
+                            defaultMessage: 'Reset Entry'
+                        }),
+                        variant: "ghost",
+                        onClick: ()=>{
+                            field.onChange(name, null);
+                        },
+                        children: /*#__PURE__*/ jsx(Trash, {})
+                    })
+                ]
+            }),
+            !attribute.repeatable && !field.value && /*#__PURE__*/ jsx(Initializer, {
+                disabled: disabled,
+                name: name,
+                onClick: handleInitialisationClick
+            }),
+            !attribute.repeatable && field.value ? /*#__PURE__*/ jsx(MemoizedNonRepeatableComponent, {
+                attribute: attribute,
+                name: name,
+                disabled: disabled,
+                ...props,
+                children: props.children
+            }) : null,
+            attribute.repeatable && /*#__PURE__*/ jsx(MemoizedRepeatableComponent, {
+                attribute: attribute,
+                name: name,
+                disabled: disabled,
+                ...props,
+                children: props.children
+            }),
+            /*#__PURE__*/ jsx(Field.Error, {})
+        ]
+    });
+};
+const MemoizedComponentInput = /*#__PURE__*/ React.memo(ComponentInput);
+
+export { MemoizedComponentInput as ComponentInput };
+//# sourceMappingURL=Input.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/Input.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { InputProps, useField } from '@strapi/admin/strapi-admin';\r\nimport { Field, Flex, IconButton } from '@strapi/design-system';\r\nimport { Trash } from '@strapi/icons';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { useDocumentContext } from '../../../../../hooks/useDocumentContext';\r\nimport { EditFieldLayout } from '../../../../../hooks/useDocumentLayout';\r\nimport { getTranslation } from '../../../../../utils/translations';\r\nimport { type AnyData, transformDocument } from '../../../utils/data';\r\nimport { createDefaultForm } from '../../../utils/forms';\r\nimport { type InputRendererProps } from '../../InputRenderer';\r\n\r\nimport { Initializer } from './Initializer';\r\nimport { NonRepeatableComponent } from './NonRepeatable';\r\nimport { RepeatableComponent } from './Repeatable';\r\n\r\ninterface ComponentInputProps\r\n  extends Omit<Extract<EditFieldLayout, { type: 'component' }>, 'size' | 'hint'>,\r\n    Pick<InputProps, 'hint'> {\r\n  labelAction?: React.ReactNode;\r\n  children: (props: InputRendererProps) => React.ReactNode;\r\n  /**\r\n   * We need layout to come from the props, and not via a hook, because Content History needs\r\n   * a way to modify the normal component layout to add hidden fields.\r\n   */\r\n  layout: ReadonlyArray<ReadonlyArray<EditFieldLayout>>;\r\n}\r\n\r\nconst ComponentInput = ({\r\n  label,\r\n  required,\r\n  name,\r\n  attribute,\r\n  disabled,\r\n  labelAction,\r\n  ...props\r\n}: ComponentInputProps) => {\r\n  const { formatMessage } = useIntl();\r\n  const field = useField<AnyData | AnyData[] | null>(name);\r\n\r\n  const showResetComponent =\r\n    !attribute.repeatable && field.value !== undefined && field.value !== null && !disabled;\r\n\r\n  const {\r\n    currentDocument: { components },\r\n  } = useDocumentContext('ComponentInput');\r\n\r\n  const handleInitialisationClick = () => {\r\n    const schema = components[attribute.component];\r\n    const form = createDefaultForm(schema, components);\r\n    const data = transformDocument(schema, components)(form);\r\n\r\n    field.onChange(name, data);\r\n  };\r\n\r\n  return (\r\n    <Field.Root error={field.error} required={required}>\r\n      <Flex justifyContent=\"space-between\">\r\n        <Field.Label action={labelAction}>\r\n          {label}\r\n          {attribute.repeatable && (\r\n            <>&nbsp;({Array.isArray(field.value) ? field.value.length : 0})</>\r\n          )}\r\n        </Field.Label>\r\n\r\n        {showResetComponent && (\r\n          <IconButton\r\n            label={formatMessage({\r\n              id: getTranslation('components.reset-entry'),\r\n              defaultMessage: 'Reset Entry',\r\n            })}\r\n            variant=\"ghost\"\r\n            onClick={() => {\r\n              field.onChange(name, null);\r\n            }}\r\n          >\r\n            <Trash />\r\n          </IconButton>\r\n        )}\r\n      </Flex>\r\n      {/**\r\n       * if the field isn't repeatable then we display a button to start the field\r\n       * TODO: should this just live in the `NonRepeatableComponent`?\r\n       */}\r\n      {!attribute.repeatable && !field.value && (\r\n        <Initializer disabled={disabled} name={name} onClick={handleInitialisationClick} />\r\n      )}\r\n      {!attribute.repeatable && field.value ? (\r\n        <NonRepeatableComponent attribute={attribute} name={name} disabled={disabled} {...props}>\r\n          {props.children}\r\n        </NonRepeatableComponent>\r\n      ) : null}\r\n      {attribute.repeatable && (\r\n        <RepeatableComponent attribute={attribute} name={name} disabled={disabled} {...props}>\r\n          {props.children}\r\n        </RepeatableComponent>\r\n      )}\r\n      <Field.Error />\r\n    </Field.Root>\r\n  );\r\n};\r\n\r\nconst MemoizedComponentInput = React.memo(ComponentInput);\r\n\r\nexport { MemoizedComponentInput as ComponentInput };\r\nexport type { ComponentInputProps };\r\n"],"names":["ComponentInput","label","required","name","attribute","disabled","labelAction","props","formatMessage","useIntl","field","useField","showResetComponent","repeatable","value","undefined","currentDocument","components","useDocumentContext","handleInitialisationClick","schema","component","form","createDefaultForm","data","transformDocument","onChange","_jsxs","Field","Root","error","Flex","justifyContent","Label","action","_Fragment","Array","isArray","length","_jsx","IconButton","id","getTranslation","defaultMessage","variant","onClick","Trash","Initializer","NonRepeatableComponent","children","RepeatableComponent","Error","MemoizedComponentInput","React","memo"],"mappings":"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"}

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

@@ -0,0 +1,103 @@
+'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 objects = require('../../../../../utils/objects.js');
+var FormLayout = require('../../FormLayout.js');
+var ComponentContext = require('../ComponentContext.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return 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__*/_interopNamespace(React);
+
+const NonRepeatableComponent = ({ attribute, name, children, layout })=>{
+    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 isMobile = strapiAdmin.useIsMobile();
+    return /*#__PURE__*/ jsxRuntime.jsx(ComponentContext.ComponentProvider, {
+        id: componentId,
+        uid: attribute.component,
+        level: level + 1,
+        type: "component",
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+            background: 'neutral100',
+            padding: {
+                initial: 4,
+                medium: 6
+            },
+            hasRadius: isNested,
+            borderColor: isNested || isMobile ? 'neutral200' : undefined,
+            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 = MemoizedNonRepeatableComponent;
+//# sourceMappingURL=NonRepeatable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NonRepeatable.js","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/NonRepeatable.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { useForm, useIsMobile } from '@strapi/admin/strapi-admin';\r\nimport { Box, Flex } from '@strapi/design-system';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { getIn } from '../../../../../utils/objects';\r\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\r\nimport { ComponentProvider, useComponent } from '../ComponentContext';\r\n\r\nimport type { ComponentInputProps } from './Input';\r\n\r\ntype NonRepeatableComponentProps = Omit<ComponentInputProps, 'required' | 'label'>;\r\n\r\nconst NonRepeatableComponent = ({\r\n  attribute,\r\n  name,\r\n  children,\r\n  layout,\r\n}: NonRepeatableComponentProps) => {\r\n  const componentId = useForm(\r\n    'NonRepeatableComponent',\r\n    (state) => getIn(state.values, `${name}.id`) as number | undefined\r\n  );\r\n  const level = useComponent('NonRepeatableComponent', (state) => state.level);\r\n  const isNested = level > 0;\r\n  const isMobile = useIsMobile();\r\n\r\n  return (\r\n    <ComponentProvider\r\n      id={componentId}\r\n      uid={attribute.component}\r\n      level={level + 1}\r\n      type=\"component\"\r\n    >\r\n      <Box\r\n        background={'neutral100'}\r\n        padding={{ initial: 4, medium: 6 }}\r\n        hasRadius={isNested}\r\n        borderColor={isNested || isMobile ? 'neutral200' : undefined}\r\n      >\r\n        <NonRepeatableComponentFields attribute={attribute} name={name} layout={layout}>\r\n          {children}\r\n        </NonRepeatableComponentFields>\r\n      </Box>\r\n    </ComponentProvider>\r\n  );\r\n};\r\n\r\ninterface NonRepeatableComponentFieldsProps\r\n  extends Pick<NonRepeatableComponentProps, 'attribute' | 'children' | 'layout' | 'name'> {}\r\n\r\nconst NonRepeatableComponentFields = React.memo(\r\n  ({ attribute, children, layout, name }: NonRepeatableComponentFieldsProps) => {\r\n    const { formatMessage } = useIntl();\r\n\r\n    return (\r\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\r\n        {layout.map((row, index) => {\r\n          return (\r\n            <ResponsiveGridRoot gap={{ initial: 3, medium: 4 }} key={index}>\r\n              {row.map(({ size, ...field }) => {\r\n                /**\r\n                 * Layouts are built from schemas so they don't understand the complete\r\n                 * schema tree, for components we append the parent name to the field name\r\n                 * because this is the structure for the data & permissions also understand\r\n                 * the nesting involved.\r\n                 */\r\n                const completeFieldName = `${name}.${field.name}`;\r\n\r\n                const translatedLabel = formatMessage({\r\n                  id: `content-manager.components.${attribute.component}.${field.name}`,\r\n                  defaultMessage: field.label,\r\n                });\r\n\r\n                return (\r\n                  <ResponsiveGridItem\r\n                    col={size}\r\n                    key={completeFieldName}\r\n                    s={12}\r\n                    xs={12}\r\n                    direction=\"column\"\r\n                    alignItems=\"stretch\"\r\n                  >\r\n                    {children({\r\n                      ...field,\r\n                      label: translatedLabel,\r\n                      name: completeFieldName,\r\n                    })}\r\n                  </ResponsiveGridItem>\r\n                );\r\n              })}\r\n            </ResponsiveGridRoot>\r\n          );\r\n        })}\r\n      </Flex>\r\n    );\r\n  }\r\n);\r\n\r\nNonRepeatableComponentFields.displayName = 'NonRepeatableComponentFields';\r\n\r\nconst MemoizedNonRepeatableComponent = React.memo(NonRepeatableComponent);\r\n\r\nexport { MemoizedNonRepeatableComponent as NonRepeatableComponent };\r\nexport type { NonRepeatableComponentProps };\r\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

@@ -0,0 +1,81 @@
+import { jsx } from 'react/jsx-runtime';
+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 { getIn } from '../../../../../utils/objects.mjs';
+import { ResponsiveGridRoot, ResponsiveGridItem } from '../../FormLayout.mjs';
+import { useComponent, ComponentProvider } from '../ComponentContext.mjs';
+
+const NonRepeatableComponent = ({ attribute, name, children, layout })=>{
+    const componentId = useForm('NonRepeatableComponent', (state)=>getIn(state.values, `${name}.id`));
+    const level = useComponent('NonRepeatableComponent', (state)=>state.level);
+    const isNested = level > 0;
+    const isMobile = useIsMobile();
+    return /*#__PURE__*/ jsx(ComponentProvider, {
+        id: componentId,
+        uid: attribute.component,
+        level: level + 1,
+        type: "component",
+        children: /*#__PURE__*/ jsx(Box, {
+            background: 'neutral100',
+            padding: {
+                initial: 4,
+                medium: 6
+            },
+            hasRadius: isNested,
+            borderColor: isNested || isMobile ? 'neutral200' : undefined,
+            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 { MemoizedNonRepeatableComponent as NonRepeatableComponent };
+//# sourceMappingURL=NonRepeatable.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NonRepeatable.mjs","sources":["../../../../../../../admin/src/pages/EditView/components/FormInputs/Component/NonRepeatable.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { useForm, useIsMobile } from '@strapi/admin/strapi-admin';\r\nimport { Box, Flex } from '@strapi/design-system';\r\nimport { useIntl } from 'react-intl';\r\n\r\nimport { getIn } from '../../../../../utils/objects';\r\nimport { ResponsiveGridItem, ResponsiveGridRoot } from '../../FormLayout';\r\nimport { ComponentProvider, useComponent } from '../ComponentContext';\r\n\r\nimport type { ComponentInputProps } from './Input';\r\n\r\ntype NonRepeatableComponentProps = Omit<ComponentInputProps, 'required' | 'label'>;\r\n\r\nconst NonRepeatableComponent = ({\r\n  attribute,\r\n  name,\r\n  children,\r\n  layout,\r\n}: NonRepeatableComponentProps) => {\r\n  const componentId = useForm(\r\n    'NonRepeatableComponent',\r\n    (state) => getIn(state.values, `${name}.id`) as number | undefined\r\n  );\r\n  const level = useComponent('NonRepeatableComponent', (state) => state.level);\r\n  const isNested = level > 0;\r\n  const isMobile = useIsMobile();\r\n\r\n  return (\r\n    <ComponentProvider\r\n      id={componentId}\r\n      uid={attribute.component}\r\n      level={level + 1}\r\n      type=\"component\"\r\n    >\r\n      <Box\r\n        background={'neutral100'}\r\n        padding={{ initial: 4, medium: 6 }}\r\n        hasRadius={isNested}\r\n        borderColor={isNested || isMobile ? 'neutral200' : undefined}\r\n      >\r\n        <NonRepeatableComponentFields attribute={attribute} name={name} layout={layout}>\r\n          {children}\r\n        </NonRepeatableComponentFields>\r\n      </Box>\r\n    </ComponentProvider>\r\n  );\r\n};\r\n\r\ninterface NonRepeatableComponentFieldsProps\r\n  extends Pick<NonRepeatableComponentProps, 'attribute' | 'children' | 'layout' | 'name'> {}\r\n\r\nconst NonRepeatableComponentFields = React.memo(\r\n  ({ attribute, children, layout, name }: NonRepeatableComponentFieldsProps) => {\r\n    const { formatMessage } = useIntl();\r\n\r\n    return (\r\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={6}>\r\n        {layout.map((row, index) => {\r\n          return (\r\n            <ResponsiveGridRoot gap={{ initial: 3, medium: 4 }} key={index}>\r\n              {row.map(({ size, ...field }) => {\r\n                /**\r\n                 * Layouts are built from schemas so they don't understand the complete\r\n                 * schema tree, for components we append the parent name to the field name\r\n                 * because this is the structure for the data & permissions also understand\r\n                 * the nesting involved.\r\n                 */\r\n                const completeFieldName = `${name}.${field.name}`;\r\n\r\n                const translatedLabel = formatMessage({\r\n                  id: `content-manager.components.${attribute.component}.${field.name}`,\r\n                  defaultMessage: field.label,\r\n                });\r\n\r\n                return (\r\n                  <ResponsiveGridItem\r\n                    col={size}\r\n                    key={completeFieldName}\r\n                    s={12}\r\n                    xs={12}\r\n                    direction=\"column\"\r\n                    alignItems=\"stretch\"\r\n                  >\r\n                    {children({\r\n                      ...field,\r\n                      label: translatedLabel,\r\n                      name: completeFieldName,\r\n                    })}\r\n                  </ResponsiveGridItem>\r\n                );\r\n              })}\r\n            </ResponsiveGridRoot>\r\n          );\r\n        })}\r\n      </Flex>\r\n    );\r\n  }\r\n);\r\n\r\nNonRepeatableComponentFields.displayName = 'NonRepeatableComponentFields';\r\n\r\nconst MemoizedNonRepeatableComponent = React.memo(NonRepeatableComponent);\r\n\r\nexport { MemoizedNonRepeatableComponent as NonRepeatableComponent };\r\nexport type { NonRepeatableComponentProps };\r\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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"}