@strapi/content-type-builder 5.12.1 → 5.12.2

package/dist/admin/components/SelectCategory.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var useDataManager = require('../hooks/useDataManager.js');
+
+const SelectCategory = ({ error = null, intlLabel, name, onChange, value = undefined, isCreating, dynamicZoneTarget })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { allComponentsCategories } = useDataManager.useDataManager();
+    const [categories, setCategories] = React.useState(allComponentsCategories);
+    const errorMessage = error ? formatMessage({
+        id: error,
+        defaultMessage: error
+    }) : '';
+    const label = formatMessage(intlLabel);
+    const handleChange = (value)=>{
+        onChange({
+            target: {
+                name,
+                value,
+                type: 'select-category'
+            }
+        });
+    };
+    const handleCreateOption = (value)=>{
+        setCategories((prev)=>[
+                ...prev,
+                value
+            ]);
+        handleChange(value);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+        error: errorMessage,
+        name: name,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Combobox, {
+                // TODO: re-enable category edits, renaming categories of already existing components currently breaks other functionality
+                // See https://github.com/strapi/strapi/issues/20356
+                disabled: !isCreating && !dynamicZoneTarget,
+                onChange: handleChange,
+                onCreateOption: handleCreateOption,
+                value: value,
+                creatable: true,
+                children: categories.map((category)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.ComboboxOption, {
+                        value: category,
+                        children: category
+                    }, category))
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})
+        ]
+    });
+};
+
+exports.SelectCategory = SelectCategory;
+//# sourceMappingURL=SelectCategory.js.map

package/dist/admin/components/SelectCategory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectCategory.js","sources":["../../../admin/src/components/SelectCategory.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { ComboboxOption, Combobox, Field } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDataManager } from '../hooks/useDataManager';\n\ninterface SelectCategoryProps {\n  error?: string | null;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n    values?: Record<string, any>;\n  };\n  name: string;\n  onChange: (value: { target: { name: string; value: any; type: string } }) => void;\n  value?: string;\n  isCreating?: boolean;\n  dynamicZoneTarget?: string | null;\n}\n\nexport const SelectCategory = ({\n  error = null,\n  intlLabel,\n  name,\n  onChange,\n  value = undefined,\n  isCreating,\n  dynamicZoneTarget,\n}: SelectCategoryProps) => {\n  const { formatMessage } = useIntl();\n  const { allComponentsCategories } = useDataManager();\n  const [categories, setCategories] = useState(allComponentsCategories);\n\n  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';\n  const label = formatMessage(intlLabel);\n\n  const handleChange = (value: any) => {\n    onChange({ target: { name, value, type: 'select-category' } });\n  };\n\n  const handleCreateOption = (value: any) => {\n    setCategories((prev) => [...prev, value]);\n    handleChange(value);\n  };\n\n  return (\n    <Field.Root error={errorMessage} name={name}>\n      <Field.Label>{label}</Field.Label>\n      <Combobox\n        // TODO: re-enable category edits, renaming categories of already existing components currently breaks other functionality\n        // See https://github.com/strapi/strapi/issues/20356\n        disabled={!isCreating && !dynamicZoneTarget}\n        onChange={handleChange}\n        onCreateOption={handleCreateOption}\n        value={value}\n        creatable\n      >\n        {categories.map((category) => (\n          <ComboboxOption key={category} value={category}>\n            {category}\n          </ComboboxOption>\n        ))}\n      </Combobox>\n      <Field.Error />\n    </Field.Root>\n  );\n};\n"],"names":["SelectCategory","error","intlLabel","name","onChange","value","undefined","isCreating","dynamicZoneTarget","formatMessage","useIntl","allComponentsCategories","useDataManager","categories","setCategories","useState","errorMessage","id","defaultMessage","label","handleChange","target","type","handleCreateOption","prev","_jsxs","Field","Root","_jsx","Label","Combobox","disabled","onCreateOption","creatable","map","category","ComboboxOption","Error"],"mappings":";;;;;;;;MAqBaA,cAAiB,GAAA,CAAC,EAC7BC,KAAQ,GAAA,IAAI,EACZC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,KAAQC,GAAAA,SAAS,EACjBC,UAAU,EACVC,iBAAiB,EACG,GAAA;IACpB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAM,EAAEC,uBAAuB,EAAE,GAAGC,6BAAAA,EAAAA;AACpC,IAAA,MAAM,CAACC,UAAAA,EAAYC,aAAc,CAAA,GAAGC,cAASJ,CAAAA,uBAAAA,CAAAA;IAE7C,MAAMK,YAAAA,GAAef,QAAQQ,aAAc,CAAA;QAAEQ,EAAIhB,EAAAA,KAAAA;QAAOiB,cAAgBjB,EAAAA;KAAW,CAAA,GAAA,EAAA;AACnF,IAAA,MAAMkB,QAAQV,aAAcP,CAAAA,SAAAA,CAAAA;AAE5B,IAAA,MAAMkB,eAAe,CAACf,KAAAA,GAAAA;QACpBD,QAAS,CAAA;YAAEiB,MAAQ,EAAA;AAAElB,gBAAAA,IAAAA;AAAME,gBAAAA,KAAAA;gBAAOiB,IAAM,EAAA;AAAkB;AAAE,SAAA,CAAA;AAC9D,KAAA;AAEA,IAAA,MAAMC,qBAAqB,CAAClB,KAAAA,GAAAA;AAC1BS,QAAAA,aAAAA,CAAc,CAACU,IAAS,GAAA;AAAIA,gBAAAA,GAAAA,IAAAA;AAAMnB,gBAAAA;AAAM,aAAA,CAAA;QACxCe,YAAaf,CAAAA,KAAAA,CAAAA;AACf,KAAA;IAEA,qBACEoB,eAAA,CAACC,mBAAMC,IAAI,EAAA;QAAC1B,KAAOe,EAAAA,YAAAA;QAAcb,IAAMA,EAAAA,IAAAA;;AACrC,0BAAAyB,cAAA,CAACF,mBAAMG,KAAK,EAAA;AAAEV,gBAAAA,QAAAA,EAAAA;;0BACdS,cAACE,CAAAA,qBAAAA,EAAAA;;;gBAGCC,QAAU,EAAA,CAACxB,cAAc,CAACC,iBAAAA;gBAC1BJ,QAAUgB,EAAAA,YAAAA;gBACVY,cAAgBT,EAAAA,kBAAAA;gBAChBlB,KAAOA,EAAAA,KAAAA;gBACP4B,SAAS,EAAA,IAAA;AAERpB,gBAAAA,QAAAA,EAAAA,UAAAA,CAAWqB,GAAG,CAAC,CAACC,QAAAA,iBACfP,cAACQ,CAAAA,2BAAAA,EAAAA;wBAA8B/B,KAAO8B,EAAAA,QAAAA;AACnCA,wBAAAA,QAAAA,EAAAA;AADkBA,qBAAAA,EAAAA,QAAAA,CAAAA;;AAKzB,0BAAAP,cAAA,CAACF,mBAAMW,KAAK,EAAA,EAAA;;;AAGlB;;;;"}

package/dist/admin/components/SelectCategory.mjs

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Field, Combobox, ComboboxOption } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { useDataManager } from '../hooks/useDataManager.mjs';
+
+const SelectCategory = ({ error = null, intlLabel, name, onChange, value = undefined, isCreating, dynamicZoneTarget })=>{
+    const { formatMessage } = useIntl();
+    const { allComponentsCategories } = useDataManager();
+    const [categories, setCategories] = useState(allComponentsCategories);
+    const errorMessage = error ? formatMessage({
+        id: error,
+        defaultMessage: error
+    }) : '';
+    const label = formatMessage(intlLabel);
+    const handleChange = (value)=>{
+        onChange({
+            target: {
+                name,
+                value,
+                type: 'select-category'
+            }
+        });
+    };
+    const handleCreateOption = (value)=>{
+        setCategories((prev)=>[
+                ...prev,
+                value
+            ]);
+        handleChange(value);
+    };
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        error: errorMessage,
+        name: name,
+        children: [
+            /*#__PURE__*/ jsx(Field.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ jsx(Combobox, {
+                // TODO: re-enable category edits, renaming categories of already existing components currently breaks other functionality
+                // See https://github.com/strapi/strapi/issues/20356
+                disabled: !isCreating && !dynamicZoneTarget,
+                onChange: handleChange,
+                onCreateOption: handleCreateOption,
+                value: value,
+                creatable: true,
+                children: categories.map((category)=>/*#__PURE__*/ jsx(ComboboxOption, {
+                        value: category,
+                        children: category
+                    }, category))
+            }),
+            /*#__PURE__*/ jsx(Field.Error, {})
+        ]
+    });
+};
+
+export { SelectCategory };
+//# sourceMappingURL=SelectCategory.mjs.map

package/dist/admin/components/SelectCategory.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectCategory.mjs","sources":["../../../admin/src/components/SelectCategory.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { ComboboxOption, Combobox, Field } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDataManager } from '../hooks/useDataManager';\n\ninterface SelectCategoryProps {\n  error?: string | null;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n    values?: Record<string, any>;\n  };\n  name: string;\n  onChange: (value: { target: { name: string; value: any; type: string } }) => void;\n  value?: string;\n  isCreating?: boolean;\n  dynamicZoneTarget?: string | null;\n}\n\nexport const SelectCategory = ({\n  error = null,\n  intlLabel,\n  name,\n  onChange,\n  value = undefined,\n  isCreating,\n  dynamicZoneTarget,\n}: SelectCategoryProps) => {\n  const { formatMessage } = useIntl();\n  const { allComponentsCategories } = useDataManager();\n  const [categories, setCategories] = useState(allComponentsCategories);\n\n  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';\n  const label = formatMessage(intlLabel);\n\n  const handleChange = (value: any) => {\n    onChange({ target: { name, value, type: 'select-category' } });\n  };\n\n  const handleCreateOption = (value: any) => {\n    setCategories((prev) => [...prev, value]);\n    handleChange(value);\n  };\n\n  return (\n    <Field.Root error={errorMessage} name={name}>\n      <Field.Label>{label}</Field.Label>\n      <Combobox\n        // TODO: re-enable category edits, renaming categories of already existing components currently breaks other functionality\n        // See https://github.com/strapi/strapi/issues/20356\n        disabled={!isCreating && !dynamicZoneTarget}\n        onChange={handleChange}\n        onCreateOption={handleCreateOption}\n        value={value}\n        creatable\n      >\n        {categories.map((category) => (\n          <ComboboxOption key={category} value={category}>\n            {category}\n          </ComboboxOption>\n        ))}\n      </Combobox>\n      <Field.Error />\n    </Field.Root>\n  );\n};\n"],"names":["SelectCategory","error","intlLabel","name","onChange","value","undefined","isCreating","dynamicZoneTarget","formatMessage","useIntl","allComponentsCategories","useDataManager","categories","setCategories","useState","errorMessage","id","defaultMessage","label","handleChange","target","type","handleCreateOption","prev","_jsxs","Field","Root","_jsx","Label","Combobox","disabled","onCreateOption","creatable","map","category","ComboboxOption","Error"],"mappings":";;;;;;MAqBaA,cAAiB,GAAA,CAAC,EAC7BC,KAAQ,GAAA,IAAI,EACZC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,KAAQC,GAAAA,SAAS,EACjBC,UAAU,EACVC,iBAAiB,EACG,GAAA;IACpB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAEC,uBAAuB,EAAE,GAAGC,cAAAA,EAAAA;AACpC,IAAA,MAAM,CAACC,UAAAA,EAAYC,aAAc,CAAA,GAAGC,QAASJ,CAAAA,uBAAAA,CAAAA;IAE7C,MAAMK,YAAAA,GAAef,QAAQQ,aAAc,CAAA;QAAEQ,EAAIhB,EAAAA,KAAAA;QAAOiB,cAAgBjB,EAAAA;KAAW,CAAA,GAAA,EAAA;AACnF,IAAA,MAAMkB,QAAQV,aAAcP,CAAAA,SAAAA,CAAAA;AAE5B,IAAA,MAAMkB,eAAe,CAACf,KAAAA,GAAAA;QACpBD,QAAS,CAAA;YAAEiB,MAAQ,EAAA;AAAElB,gBAAAA,IAAAA;AAAME,gBAAAA,KAAAA;gBAAOiB,IAAM,EAAA;AAAkB;AAAE,SAAA,CAAA;AAC9D,KAAA;AAEA,IAAA,MAAMC,qBAAqB,CAAClB,KAAAA,GAAAA;AAC1BS,QAAAA,aAAAA,CAAc,CAACU,IAAS,GAAA;AAAIA,gBAAAA,GAAAA,IAAAA;AAAMnB,gBAAAA;AAAM,aAAA,CAAA;QACxCe,YAAaf,CAAAA,KAAAA,CAAAA;AACf,KAAA;IAEA,qBACEoB,IAAA,CAACC,MAAMC,IAAI,EAAA;QAAC1B,KAAOe,EAAAA,YAAAA;QAAcb,IAAMA,EAAAA,IAAAA;;AACrC,0BAAAyB,GAAA,CAACF,MAAMG,KAAK,EAAA;AAAEV,gBAAAA,QAAAA,EAAAA;;0BACdS,GAACE,CAAAA,QAAAA,EAAAA;;;gBAGCC,QAAU,EAAA,CAACxB,cAAc,CAACC,iBAAAA;gBAC1BJ,QAAUgB,EAAAA,YAAAA;gBACVY,cAAgBT,EAAAA,kBAAAA;gBAChBlB,KAAOA,EAAAA,KAAAA;gBACP4B,SAAS,EAAA,IAAA;AAERpB,gBAAAA,QAAAA,EAAAA,UAAAA,CAAWqB,GAAG,CAAC,CAACC,QAAAA,iBACfP,GAACQ,CAAAA,cAAAA,EAAAA;wBAA8B/B,KAAO8B,EAAAA,QAAAA;AACnCA,wBAAAA,QAAAA,EAAAA;AADkBA,qBAAAA,EAAAA,QAAAA,CAAAA;;AAKzB,0BAAAP,GAAA,CAACF,MAAMW,KAAK,EAAA,EAAA;;;AAGlB;;;;"}

package/dist/admin/components/SelectComponent.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var constants = require('../constants.js');
+var useDataManager = require('../hooks/useDataManager.js');
+var getMaxDepth = require('../utils/getMaxDepth.js');
+
+const SelectComponent = ({ error = null, intlLabel, isAddingAComponentToAnotherComponent, isCreating, isCreatingComponentWhileAddingAField, componentToCreate, name, onChange, targetUid, forTarget, value })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const errorMessage = error ? formatMessage({
+        id: error,
+        defaultMessage: error
+    }) : '';
+    const label = formatMessage(intlLabel);
+    const { componentsGroupedByCategory, componentsThatHaveOtherComponentInTheirAttributes, nestedComponents } = useDataManager.useDataManager();
+    const isTargetAComponent = [
+        'component',
+        'components'
+    ].includes(forTarget);
+    let options = Object.entries(componentsGroupedByCategory).reduce((acc, current)=>{
+        const [categoryName, components] = current;
+        const compos = components.map((component)=>{
+            return {
+                uid: component.uid,
+                label: component.schema.displayName,
+                categoryName
+            };
+        });
+        return [
+            ...acc,
+            ...compos
+        ];
+    }, []);
+    if (isAddingAComponentToAnotherComponent) {
+        options = options.filter(({ uid })=>{
+            const maxDepth = getMaxDepth.getChildrenMaxDepth(uid, componentsThatHaveOtherComponentInTheirAttributes);
+            const componentDepth = getMaxDepth.getComponentDepth(targetUid, nestedComponents);
+            const totalDepth = maxDepth + componentDepth;
+            return totalDepth <= constants.MAX_COMPONENT_DEPTH;
+        });
+    }
+    if (isTargetAComponent) {
+        options = options.filter((option)=>{
+            return option.uid !== targetUid;
+        });
+    }
+    if (isCreatingComponentWhileAddingAField) {
+        options = [
+            {
+                uid: value,
+                label: componentToCreate?.displayName,
+                categoryName: componentToCreate?.category
+            }
+        ];
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+        error: errorMessage,
+        name: name,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelect, {
+                disabled: isCreatingComponentWhileAddingAField || !isCreating,
+                onChange: (value)=>{
+                    onChange({
+                        target: {
+                            name,
+                            value,
+                            type: 'select-category'
+                        }
+                    });
+                },
+                value: value || '',
+                children: options.map((option)=>{
+                    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                        value: option.uid,
+                        children: `${option.categoryName} - ${option.label}`
+                    }, option.uid);
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})
+        ]
+    });
+};
+
+exports.SelectComponent = SelectComponent;
+//# sourceMappingURL=SelectComponent.js.map

package/dist/admin/components/SelectComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectComponent.js","sources":["../../../admin/src/components/SelectComponent.tsx"],"sourcesContent":["import { SingleSelectOption, SingleSelect, Field } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { MAX_COMPONENT_DEPTH } from '../constants';\nimport { useDataManager } from '../hooks/useDataManager';\nimport { getChildrenMaxDepth, getComponentDepth } from '../utils/getMaxDepth';\n\nimport type { Internal } from '@strapi/types';\ninterface Option {\n  uid: string;\n  label: string;\n  categoryName: string;\n}\n\ninterface SelectComponentProps {\n  componentToCreate?: Record<string, any> | null;\n  error?: string | null;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n    values?: Record<string, any>;\n  };\n  isAddingAComponentToAnotherComponent: boolean;\n  isCreating: boolean;\n  isCreatingComponentWhileAddingAField: boolean;\n  name: string;\n  onChange: (value: any) => void;\n  targetUid: Internal.UID.Schema;\n  value: string;\n  forTarget: string;\n}\n\nexport const SelectComponent = ({\n  error = null,\n  intlLabel,\n  isAddingAComponentToAnotherComponent,\n  isCreating,\n  isCreatingComponentWhileAddingAField,\n  componentToCreate,\n  name,\n  onChange,\n  targetUid,\n  forTarget,\n  value,\n}: SelectComponentProps) => {\n  const { formatMessage } = useIntl();\n  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';\n  const label = formatMessage(intlLabel);\n\n  const {\n    componentsGroupedByCategory,\n    componentsThatHaveOtherComponentInTheirAttributes,\n    nestedComponents,\n  } = useDataManager();\n\n  const isTargetAComponent = ['component', 'components'].includes(forTarget);\n\n  let options: Option[] = Object.entries(componentsGroupedByCategory).reduce(\n    (acc: Option[], current) => {\n      const [categoryName, components] = current;\n      const compos = components.map((component) => {\n        return {\n          uid: component.uid,\n          label: component.schema.displayName,\n          categoryName,\n        };\n      });\n\n      return [...acc, ...compos];\n    },\n    []\n  );\n\n  if (isAddingAComponentToAnotherComponent) {\n    options = options.filter(({ uid }: any) => {\n      const maxDepth = getChildrenMaxDepth(uid, componentsThatHaveOtherComponentInTheirAttributes);\n      const componentDepth = getComponentDepth(targetUid, nestedComponents);\n      const totalDepth = maxDepth + componentDepth;\n      return totalDepth <= MAX_COMPONENT_DEPTH;\n    });\n  }\n\n  if (isTargetAComponent) {\n    options = options.filter((option) => {\n      return option.uid !== targetUid;\n    });\n  }\n\n  if (isCreatingComponentWhileAddingAField) {\n    options = [\n      {\n        uid: value,\n        label: componentToCreate?.displayName,\n        categoryName: componentToCreate?.category,\n      },\n    ];\n  }\n\n  return (\n    <Field.Root error={errorMessage} name={name}>\n      <Field.Label>{label}</Field.Label>\n      <SingleSelect\n        disabled={isCreatingComponentWhileAddingAField || !isCreating}\n        onChange={(value: any) => {\n          onChange({ target: { name, value, type: 'select-category' } });\n        }}\n        value={value || ''}\n      >\n        {options.map((option) => {\n          return (\n            <SingleSelectOption key={option.uid} value={option.uid}>\n              {`${option.categoryName} - ${option.label}`}\n            </SingleSelectOption>\n          );\n        })}\n      </SingleSelect>\n      <Field.Error />\n    </Field.Root>\n  );\n};\n"],"names":["SelectComponent","error","intlLabel","isAddingAComponentToAnotherComponent","isCreating","isCreatingComponentWhileAddingAField","componentToCreate","name","onChange","targetUid","forTarget","value","formatMessage","useIntl","errorMessage","id","defaultMessage","label","componentsGroupedByCategory","componentsThatHaveOtherComponentInTheirAttributes","nestedComponents","useDataManager","isTargetAComponent","includes","options","Object","entries","reduce","acc","current","categoryName","components","compos","map","component","uid","schema","displayName","filter","maxDepth","getChildrenMaxDepth","componentDepth","getComponentDepth","totalDepth","MAX_COMPONENT_DEPTH","option","category","_jsxs","Field","Root","_jsx","Label","SingleSelect","disabled","target","type","SingleSelectOption","Error"],"mappings":"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"}

package/dist/admin/components/SelectComponent.mjs

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Field, SingleSelect, SingleSelectOption } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { MAX_COMPONENT_DEPTH } from '../constants.mjs';
+import { useDataManager } from '../hooks/useDataManager.mjs';
+import { getChildrenMaxDepth, getComponentDepth } from '../utils/getMaxDepth.mjs';
+
+const SelectComponent = ({ error = null, intlLabel, isAddingAComponentToAnotherComponent, isCreating, isCreatingComponentWhileAddingAField, componentToCreate, name, onChange, targetUid, forTarget, value })=>{
+    const { formatMessage } = useIntl();
+    const errorMessage = error ? formatMessage({
+        id: error,
+        defaultMessage: error
+    }) : '';
+    const label = formatMessage(intlLabel);
+    const { componentsGroupedByCategory, componentsThatHaveOtherComponentInTheirAttributes, nestedComponents } = useDataManager();
+    const isTargetAComponent = [
+        'component',
+        'components'
+    ].includes(forTarget);
+    let options = Object.entries(componentsGroupedByCategory).reduce((acc, current)=>{
+        const [categoryName, components] = current;
+        const compos = components.map((component)=>{
+            return {
+                uid: component.uid,
+                label: component.schema.displayName,
+                categoryName
+            };
+        });
+        return [
+            ...acc,
+            ...compos
+        ];
+    }, []);
+    if (isAddingAComponentToAnotherComponent) {
+        options = options.filter(({ uid })=>{
+            const maxDepth = getChildrenMaxDepth(uid, componentsThatHaveOtherComponentInTheirAttributes);
+            const componentDepth = getComponentDepth(targetUid, nestedComponents);
+            const totalDepth = maxDepth + componentDepth;
+            return totalDepth <= MAX_COMPONENT_DEPTH;
+        });
+    }
+    if (isTargetAComponent) {
+        options = options.filter((option)=>{
+            return option.uid !== targetUid;
+        });
+    }
+    if (isCreatingComponentWhileAddingAField) {
+        options = [
+            {
+                uid: value,
+                label: componentToCreate?.displayName,
+                categoryName: componentToCreate?.category
+            }
+        ];
+    }
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        error: errorMessage,
+        name: name,
+        children: [
+            /*#__PURE__*/ jsx(Field.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ jsx(SingleSelect, {
+                disabled: isCreatingComponentWhileAddingAField || !isCreating,
+                onChange: (value)=>{
+                    onChange({
+                        target: {
+                            name,
+                            value,
+                            type: 'select-category'
+                        }
+                    });
+                },
+                value: value || '',
+                children: options.map((option)=>{
+                    return /*#__PURE__*/ jsx(SingleSelectOption, {
+                        value: option.uid,
+                        children: `${option.categoryName} - ${option.label}`
+                    }, option.uid);
+                })
+            }),
+            /*#__PURE__*/ jsx(Field.Error, {})
+        ]
+    });
+};
+
+export { SelectComponent };
+//# sourceMappingURL=SelectComponent.mjs.map

package/dist/admin/components/SelectComponent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectComponent.mjs","sources":["../../../admin/src/components/SelectComponent.tsx"],"sourcesContent":["import { SingleSelectOption, SingleSelect, Field } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { MAX_COMPONENT_DEPTH } from '../constants';\nimport { useDataManager } from '../hooks/useDataManager';\nimport { getChildrenMaxDepth, getComponentDepth } from '../utils/getMaxDepth';\n\nimport type { Internal } from '@strapi/types';\ninterface Option {\n  uid: string;\n  label: string;\n  categoryName: string;\n}\n\ninterface SelectComponentProps {\n  componentToCreate?: Record<string, any> | null;\n  error?: string | null;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n    values?: Record<string, any>;\n  };\n  isAddingAComponentToAnotherComponent: boolean;\n  isCreating: boolean;\n  isCreatingComponentWhileAddingAField: boolean;\n  name: string;\n  onChange: (value: any) => void;\n  targetUid: Internal.UID.Schema;\n  value: string;\n  forTarget: string;\n}\n\nexport const SelectComponent = ({\n  error = null,\n  intlLabel,\n  isAddingAComponentToAnotherComponent,\n  isCreating,\n  isCreatingComponentWhileAddingAField,\n  componentToCreate,\n  name,\n  onChange,\n  targetUid,\n  forTarget,\n  value,\n}: SelectComponentProps) => {\n  const { formatMessage } = useIntl();\n  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';\n  const label = formatMessage(intlLabel);\n\n  const {\n    componentsGroupedByCategory,\n    componentsThatHaveOtherComponentInTheirAttributes,\n    nestedComponents,\n  } = useDataManager();\n\n  const isTargetAComponent = ['component', 'components'].includes(forTarget);\n\n  let options: Option[] = Object.entries(componentsGroupedByCategory).reduce(\n    (acc: Option[], current) => {\n      const [categoryName, components] = current;\n      const compos = components.map((component) => {\n        return {\n          uid: component.uid,\n          label: component.schema.displayName,\n          categoryName,\n        };\n      });\n\n      return [...acc, ...compos];\n    },\n    []\n  );\n\n  if (isAddingAComponentToAnotherComponent) {\n    options = options.filter(({ uid }: any) => {\n      const maxDepth = getChildrenMaxDepth(uid, componentsThatHaveOtherComponentInTheirAttributes);\n      const componentDepth = getComponentDepth(targetUid, nestedComponents);\n      const totalDepth = maxDepth + componentDepth;\n      return totalDepth <= MAX_COMPONENT_DEPTH;\n    });\n  }\n\n  if (isTargetAComponent) {\n    options = options.filter((option) => {\n      return option.uid !== targetUid;\n    });\n  }\n\n  if (isCreatingComponentWhileAddingAField) {\n    options = [\n      {\n        uid: value,\n        label: componentToCreate?.displayName,\n        categoryName: componentToCreate?.category,\n      },\n    ];\n  }\n\n  return (\n    <Field.Root error={errorMessage} name={name}>\n      <Field.Label>{label}</Field.Label>\n      <SingleSelect\n        disabled={isCreatingComponentWhileAddingAField || !isCreating}\n        onChange={(value: any) => {\n          onChange({ target: { name, value, type: 'select-category' } });\n        }}\n        value={value || ''}\n      >\n        {options.map((option) => {\n          return (\n            <SingleSelectOption key={option.uid} value={option.uid}>\n              {`${option.categoryName} - ${option.label}`}\n            </SingleSelectOption>\n          );\n        })}\n      </SingleSelect>\n      <Field.Error />\n    </Field.Root>\n  );\n};\n"],"names":["SelectComponent","error","intlLabel","isAddingAComponentToAnotherComponent","isCreating","isCreatingComponentWhileAddingAField","componentToCreate","name","onChange","targetUid","forTarget","value","formatMessage","useIntl","errorMessage","id","defaultMessage","label","componentsGroupedByCategory","componentsThatHaveOtherComponentInTheirAttributes","nestedComponents","useDataManager","isTargetAComponent","includes","options","Object","entries","reduce","acc","current","categoryName","components","compos","map","component","uid","schema","displayName","filter","maxDepth","getChildrenMaxDepth","componentDepth","getComponentDepth","totalDepth","MAX_COMPONENT_DEPTH","option","category","_jsxs","Field","Root","_jsx","Label","SingleSelect","disabled","target","type","SingleSelectOption","Error"],"mappings":"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"}

package/dist/admin/components/SelectComponents.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var useDataManager = require('../hooks/useDataManager.js');
+var getTrad = require('../utils/getTrad.js');
+var findAttribute = require('../utils/findAttribute.js');
+
+const SelectComponents = ({ dynamicZoneTarget, intlLabel, name, onChange, value })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { componentsGroupedByCategory, modifiedData } = useDataManager.useDataManager();
+    const dzSchema = findAttribute.findAttribute(modifiedData.contentType.schema.attributes, dynamicZoneTarget);
+    const alreadyUsedComponents = dzSchema?.components || [];
+    const filteredComponentsGroupedByCategory = Object.keys(componentsGroupedByCategory).reduce((acc, current)=>{
+        const filteredComponents = componentsGroupedByCategory[current].filter(({ uid })=>{
+            return !alreadyUsedComponents.includes(uid);
+        });
+        if (filteredComponents.length > 0) {
+            acc[current] = filteredComponents;
+        }
+        return acc;
+    }, {});
+    const options = Object.entries(filteredComponentsGroupedByCategory).reduce((acc, current)=>{
+        const [categoryName, components] = current;
+        const section = {
+            label: categoryName,
+            children: components.map(({ uid, schema: { displayName } })=>{
+                return {
+                    label: displayName,
+                    value: uid
+                };
+            })
+        };
+        acc.push(section);
+        return acc;
+    }, []);
+    const displayedValue = formatMessage({
+        id: getTrad.getTrad('components.SelectComponents.displayed-value'),
+        defaultMessage: '{number, plural, =0 {# components} one {# component} other {# components}} selected'
+    }, {
+        number: value?.length ?? 0
+    });
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+        name: name,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                children: formatMessage(intlLabel)
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.MultiSelectNested, {
+                id: "select1",
+                customizeContent: ()=>displayedValue,
+                onChange: (values)=>{
+                    onChange({
+                        target: {
+                            name,
+                            value: values,
+                            type: 'select-components'
+                        }
+                    });
+                },
+                options: options,
+                value: value || []
+            })
+        ]
+    });
+};
+
+exports.SelectComponents = SelectComponents;
+//# sourceMappingURL=SelectComponents.js.map

package/dist/admin/components/SelectComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectComponents.js","sources":["../../../admin/src/components/SelectComponents.tsx"],"sourcesContent":["import { Field, MultiSelectNested } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDataManager } from '../hooks/useDataManager';\nimport { getTrad } from '../utils';\nimport { findAttribute } from '../utils/findAttribute';\n\nimport type { Component } from '../types';\n\ntype SelectComponentsProps = {\n  dynamicZoneTarget: string;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n    values?: object;\n  };\n  name: string;\n  onChange: (value: {\n    target: {\n      name: string;\n      value: string[];\n      type?: string;\n    };\n  }) => void;\n  value: string[];\n};\n\nexport const SelectComponents = ({\n  dynamicZoneTarget,\n  intlLabel,\n  name,\n  onChange,\n  value,\n}: SelectComponentsProps) => {\n  const { formatMessage } = useIntl();\n  const { componentsGroupedByCategory, modifiedData } = useDataManager();\n  const dzSchema = findAttribute(modifiedData.contentType.schema.attributes, dynamicZoneTarget);\n  const alreadyUsedComponents = dzSchema?.components || [];\n  const filteredComponentsGroupedByCategory = Object.keys(componentsGroupedByCategory).reduce(\n    (acc, current) => {\n      const filteredComponents = componentsGroupedByCategory[current].filter(({ uid }) => {\n        return !alreadyUsedComponents.includes(uid);\n      });\n\n      if (filteredComponents.length > 0) {\n        acc[current] = filteredComponents;\n      }\n\n      return acc;\n    },\n    {} as Record<string, Component[]>\n  );\n  const options = Object.entries(filteredComponentsGroupedByCategory).reduce(\n    (acc, current) => {\n      const [categoryName, components] = current;\n      const section = {\n        label: categoryName,\n        children: components.map(({ uid, schema: { displayName } }) => {\n          return { label: displayName, value: uid };\n        }),\n      };\n\n      acc.push(section);\n\n      return acc;\n    },\n    [] as Array<{ label: string; children: Array<{ label: string; value: string }> }>\n  );\n\n  const displayedValue = formatMessage(\n    {\n      id: getTrad('components.SelectComponents.displayed-value'),\n      defaultMessage:\n        '{number, plural, =0 {# components} one {# component} other {# components}} selected',\n    },\n    { number: value?.length ?? 0 }\n  );\n\n  return (\n    <Field.Root name={name}>\n      <Field.Label>{formatMessage(intlLabel)}</Field.Label>\n      <MultiSelectNested\n        id=\"select1\"\n        customizeContent={() => displayedValue}\n        onChange={(values) => {\n          onChange({ target: { name, value: values, type: 'select-components' } });\n        }}\n        options={options}\n        value={value || []}\n      />\n    </Field.Root>\n  );\n};\n"],"names":["SelectComponents","dynamicZoneTarget","intlLabel","name","onChange","value","formatMessage","useIntl","componentsGroupedByCategory","modifiedData","useDataManager","dzSchema","findAttribute","contentType","schema","attributes","alreadyUsedComponents","components","filteredComponentsGroupedByCategory","Object","keys","reduce","acc","current","filteredComponents","filter","uid","includes","length","options","entries","categoryName","section","label","children","map","displayName","push","displayedValue","id","getTrad","defaultMessage","number","_jsxs","Field","Root","_jsx","Label","MultiSelectNested","customizeContent","values","target","type"],"mappings":";;;;;;;;;AA2BaA,MAAAA,gBAAAA,GAAmB,CAAC,EAC/BC,iBAAiB,EACjBC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,KAAK,EACiB,GAAA;IACtB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,2BAA2B,EAAEC,YAAY,EAAE,GAAGC,6BAAAA,EAAAA;IACtD,MAAMC,QAAAA,GAAWC,4BAAcH,YAAaI,CAAAA,WAAW,CAACC,MAAM,CAACC,UAAU,EAAEd,iBAAAA,CAAAA;IAC3E,MAAMe,qBAAAA,GAAwBL,QAAUM,EAAAA,UAAAA,IAAc,EAAE;IACxD,MAAMC,mCAAAA,GAAsCC,OAAOC,IAAI,CAACZ,6BAA6Ba,MAAM,CACzF,CAACC,GAAKC,EAAAA,OAAAA,GAAAA;QACJ,MAAMC,kBAAAA,GAAqBhB,2BAA2B,CAACe,OAAQ,CAAA,CAACE,MAAM,CAAC,CAAC,EAAEC,GAAG,EAAE,GAAA;YAC7E,OAAO,CAACV,qBAAsBW,CAAAA,QAAQ,CAACD,GAAAA,CAAAA;AACzC,SAAA,CAAA;QAEA,IAAIF,kBAAAA,CAAmBI,MAAM,GAAG,CAAG,EAAA;YACjCN,GAAG,CAACC,QAAQ,GAAGC,kBAAAA;AACjB;QAEA,OAAOF,GAAAA;AACT,KAAA,EACA,EAAC,CAAA;IAEH,MAAMO,OAAAA,GAAUV,OAAOW,OAAO,CAACZ,qCAAqCG,MAAM,CACxE,CAACC,GAAKC,EAAAA,OAAAA,GAAAA;QACJ,MAAM,CAACQ,YAAcd,EAAAA,UAAAA,CAAW,GAAGM,OAAAA;AACnC,QAAA,MAAMS,OAAU,GAAA;YACdC,KAAOF,EAAAA,YAAAA;YACPG,QAAUjB,EAAAA,UAAAA,CAAWkB,GAAG,CAAC,CAAC,EAAET,GAAG,EAAEZ,MAAQ,EAAA,EAAEsB,WAAW,EAAE,EAAE,GAAA;gBACxD,OAAO;oBAAEH,KAAOG,EAAAA,WAAAA;oBAAa/B,KAAOqB,EAAAA;AAAI,iBAAA;AAC1C,aAAA;AACF,SAAA;AAEAJ,QAAAA,GAAAA,CAAIe,IAAI,CAACL,OAAAA,CAAAA;QAET,OAAOV,GAAAA;AACT,KAAA,EACA,EAAE,CAAA;AAGJ,IAAA,MAAMgB,iBAAiBhC,aACrB,CAAA;AACEiC,QAAAA,EAAAA,EAAIC,eAAQ,CAAA,6CAAA,CAAA;QACZC,cACE,EAAA;KAEJ,EAAA;AAAEC,QAAAA,MAAAA,EAAQrC,OAAOuB,MAAU,IAAA;AAAE,KAAA,CAAA;IAG/B,qBACEe,eAAA,CAACC,mBAAMC,IAAI,EAAA;QAAC1C,IAAMA,EAAAA,IAAAA;;AAChB,0BAAA2C,cAAA,CAACF,mBAAMG,KAAK,EAAA;0BAAEzC,aAAcJ,CAAAA,SAAAA;;0BAC5B4C,cAACE,CAAAA,8BAAAA,EAAAA;gBACCT,EAAG,EAAA,SAAA;AACHU,gBAAAA,gBAAAA,EAAkB,IAAMX,cAAAA;AACxBlC,gBAAAA,QAAAA,EAAU,CAAC8C,MAAAA,GAAAA;oBACT9C,QAAS,CAAA;wBAAE+C,MAAQ,EAAA;AAAEhD,4BAAAA,IAAAA;4BAAME,KAAO6C,EAAAA,MAAAA;4BAAQE,IAAM,EAAA;AAAoB;AAAE,qBAAA,CAAA;AACxE,iBAAA;gBACAvB,OAASA,EAAAA,OAAAA;AACTxB,gBAAAA,KAAAA,EAAOA,SAAS;;;;AAIxB;;;;"}

package/dist/admin/components/SelectComponents.mjs

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Field, MultiSelectNested } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { useDataManager } from '../hooks/useDataManager.mjs';
+import { getTrad } from '../utils/getTrad.mjs';
+import { findAttribute } from '../utils/findAttribute.mjs';
+
+const SelectComponents = ({ dynamicZoneTarget, intlLabel, name, onChange, value })=>{
+    const { formatMessage } = useIntl();
+    const { componentsGroupedByCategory, modifiedData } = useDataManager();
+    const dzSchema = findAttribute(modifiedData.contentType.schema.attributes, dynamicZoneTarget);
+    const alreadyUsedComponents = dzSchema?.components || [];
+    const filteredComponentsGroupedByCategory = Object.keys(componentsGroupedByCategory).reduce((acc, current)=>{
+        const filteredComponents = componentsGroupedByCategory[current].filter(({ uid })=>{
+            return !alreadyUsedComponents.includes(uid);
+        });
+        if (filteredComponents.length > 0) {
+            acc[current] = filteredComponents;
+        }
+        return acc;
+    }, {});
+    const options = Object.entries(filteredComponentsGroupedByCategory).reduce((acc, current)=>{
+        const [categoryName, components] = current;
+        const section = {
+            label: categoryName,
+            children: components.map(({ uid, schema: { displayName } })=>{
+                return {
+                    label: displayName,
+                    value: uid
+                };
+            })
+        };
+        acc.push(section);
+        return acc;
+    }, []);
+    const displayedValue = formatMessage({
+        id: getTrad('components.SelectComponents.displayed-value'),
+        defaultMessage: '{number, plural, =0 {# components} one {# component} other {# components}} selected'
+    }, {
+        number: value?.length ?? 0
+    });
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        name: name,
+        children: [
+            /*#__PURE__*/ jsx(Field.Label, {
+                children: formatMessage(intlLabel)
+            }),
+            /*#__PURE__*/ jsx(MultiSelectNested, {
+                id: "select1",
+                customizeContent: ()=>displayedValue,
+                onChange: (values)=>{
+                    onChange({
+                        target: {
+                            name,
+                            value: values,
+                            type: 'select-components'
+                        }
+                    });
+                },
+                options: options,
+                value: value || []
+            })
+        ]
+    });
+};
+
+export { SelectComponents };
+//# sourceMappingURL=SelectComponents.mjs.map

package/dist/admin/components/SelectComponents.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectComponents.mjs","sources":["../../../admin/src/components/SelectComponents.tsx"],"sourcesContent":["import { Field, MultiSelectNested } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { useDataManager } from '../hooks/useDataManager';\nimport { getTrad } from '../utils';\nimport { findAttribute } from '../utils/findAttribute';\n\nimport type { Component } from '../types';\n\ntype SelectComponentsProps = {\n  dynamicZoneTarget: string;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n    values?: object;\n  };\n  name: string;\n  onChange: (value: {\n    target: {\n      name: string;\n      value: string[];\n      type?: string;\n    };\n  }) => void;\n  value: string[];\n};\n\nexport const SelectComponents = ({\n  dynamicZoneTarget,\n  intlLabel,\n  name,\n  onChange,\n  value,\n}: SelectComponentsProps) => {\n  const { formatMessage } = useIntl();\n  const { componentsGroupedByCategory, modifiedData } = useDataManager();\n  const dzSchema = findAttribute(modifiedData.contentType.schema.attributes, dynamicZoneTarget);\n  const alreadyUsedComponents = dzSchema?.components || [];\n  const filteredComponentsGroupedByCategory = Object.keys(componentsGroupedByCategory).reduce(\n    (acc, current) => {\n      const filteredComponents = componentsGroupedByCategory[current].filter(({ uid }) => {\n        return !alreadyUsedComponents.includes(uid);\n      });\n\n      if (filteredComponents.length > 0) {\n        acc[current] = filteredComponents;\n      }\n\n      return acc;\n    },\n    {} as Record<string, Component[]>\n  );\n  const options = Object.entries(filteredComponentsGroupedByCategory).reduce(\n    (acc, current) => {\n      const [categoryName, components] = current;\n      const section = {\n        label: categoryName,\n        children: components.map(({ uid, schema: { displayName } }) => {\n          return { label: displayName, value: uid };\n        }),\n      };\n\n      acc.push(section);\n\n      return acc;\n    },\n    [] as Array<{ label: string; children: Array<{ label: string; value: string }> }>\n  );\n\n  const displayedValue = formatMessage(\n    {\n      id: getTrad('components.SelectComponents.displayed-value'),\n      defaultMessage:\n        '{number, plural, =0 {# components} one {# component} other {# components}} selected',\n    },\n    { number: value?.length ?? 0 }\n  );\n\n  return (\n    <Field.Root name={name}>\n      <Field.Label>{formatMessage(intlLabel)}</Field.Label>\n      <MultiSelectNested\n        id=\"select1\"\n        customizeContent={() => displayedValue}\n        onChange={(values) => {\n          onChange({ target: { name, value: values, type: 'select-components' } });\n        }}\n        options={options}\n        value={value || []}\n      />\n    </Field.Root>\n  );\n};\n"],"names":["SelectComponents","dynamicZoneTarget","intlLabel","name","onChange","value","formatMessage","useIntl","componentsGroupedByCategory","modifiedData","useDataManager","dzSchema","findAttribute","contentType","schema","attributes","alreadyUsedComponents","components","filteredComponentsGroupedByCategory","Object","keys","reduce","acc","current","filteredComponents","filter","uid","includes","length","options","entries","categoryName","section","label","children","map","displayName","push","displayedValue","id","getTrad","defaultMessage","number","_jsxs","Field","Root","_jsx","Label","MultiSelectNested","customizeContent","values","target","type"],"mappings":";;;;;;;AA2BaA,MAAAA,gBAAAA,GAAmB,CAAC,EAC/BC,iBAAiB,EACjBC,SAAS,EACTC,IAAI,EACJC,QAAQ,EACRC,KAAK,EACiB,GAAA;IACtB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,EAAEC,2BAA2B,EAAEC,YAAY,EAAE,GAAGC,cAAAA,EAAAA;IACtD,MAAMC,QAAAA,GAAWC,cAAcH,YAAaI,CAAAA,WAAW,CAACC,MAAM,CAACC,UAAU,EAAEd,iBAAAA,CAAAA;IAC3E,MAAMe,qBAAAA,GAAwBL,QAAUM,EAAAA,UAAAA,IAAc,EAAE;IACxD,MAAMC,mCAAAA,GAAsCC,OAAOC,IAAI,CAACZ,6BAA6Ba,MAAM,CACzF,CAACC,GAAKC,EAAAA,OAAAA,GAAAA;QACJ,MAAMC,kBAAAA,GAAqBhB,2BAA2B,CAACe,OAAQ,CAAA,CAACE,MAAM,CAAC,CAAC,EAAEC,GAAG,EAAE,GAAA;YAC7E,OAAO,CAACV,qBAAsBW,CAAAA,QAAQ,CAACD,GAAAA,CAAAA;AACzC,SAAA,CAAA;QAEA,IAAIF,kBAAAA,CAAmBI,MAAM,GAAG,CAAG,EAAA;YACjCN,GAAG,CAACC,QAAQ,GAAGC,kBAAAA;AACjB;QAEA,OAAOF,GAAAA;AACT,KAAA,EACA,EAAC,CAAA;IAEH,MAAMO,OAAAA,GAAUV,OAAOW,OAAO,CAACZ,qCAAqCG,MAAM,CACxE,CAACC,GAAKC,EAAAA,OAAAA,GAAAA;QACJ,MAAM,CAACQ,YAAcd,EAAAA,UAAAA,CAAW,GAAGM,OAAAA;AACnC,QAAA,MAAMS,OAAU,GAAA;YACdC,KAAOF,EAAAA,YAAAA;YACPG,QAAUjB,EAAAA,UAAAA,CAAWkB,GAAG,CAAC,CAAC,EAAET,GAAG,EAAEZ,MAAQ,EAAA,EAAEsB,WAAW,EAAE,EAAE,GAAA;gBACxD,OAAO;oBAAEH,KAAOG,EAAAA,WAAAA;oBAAa/B,KAAOqB,EAAAA;AAAI,iBAAA;AAC1C,aAAA;AACF,SAAA;AAEAJ,QAAAA,GAAAA,CAAIe,IAAI,CAACL,OAAAA,CAAAA;QAET,OAAOV,GAAAA;AACT,KAAA,EACA,EAAE,CAAA;AAGJ,IAAA,MAAMgB,iBAAiBhC,aACrB,CAAA;AACEiC,QAAAA,EAAAA,EAAIC,OAAQ,CAAA,6CAAA,CAAA;QACZC,cACE,EAAA;KAEJ,EAAA;AAAEC,QAAAA,MAAAA,EAAQrC,OAAOuB,MAAU,IAAA;AAAE,KAAA,CAAA;IAG/B,qBACEe,IAAA,CAACC,MAAMC,IAAI,EAAA;QAAC1C,IAAMA,EAAAA,IAAAA;;AAChB,0BAAA2C,GAAA,CAACF,MAAMG,KAAK,EAAA;0BAAEzC,aAAcJ,CAAAA,SAAAA;;0BAC5B4C,GAACE,CAAAA,iBAAAA,EAAAA;gBACCT,EAAG,EAAA,SAAA;AACHU,gBAAAA,gBAAAA,EAAkB,IAAMX,cAAAA;AACxBlC,gBAAAA,QAAAA,EAAU,CAAC8C,MAAAA,GAAAA;oBACT9C,QAAS,CAAA;wBAAE+C,MAAQ,EAAA;AAAEhD,4BAAAA,IAAAA;4BAAME,KAAO6C,EAAAA,MAAAA;4BAAQE,IAAM,EAAA;AAAoB;AAAE,qBAAA,CAAA;AACxE,iBAAA;gBACAvB,OAASA,EAAAA,OAAAA;AACTxB,gBAAAA,KAAAA,EAAOA,SAAS;;;;AAIxB;;;;"}

package/dist/admin/components/SelectDateType.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+
+const SelectDateType = ({ intlLabel, error = undefined, modifiedData, name, onChange, options, value = '' })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const label = formatMessage(intlLabel);
+    const errorMessage = error ? formatMessage({
+        id: error,
+        defaultMessage: error
+    }) : '';
+    const handleChange = (nextValue)=>{
+        onChange({
+            target: {
+                name,
+                value: nextValue,
+                type: 'select'
+            }
+        });
+        if (!value) {
+            return;
+        }
+        if (modifiedData.default !== undefined && modifiedData.default !== null) {
+            onChange({
+                target: {
+                    name: 'default',
+                    value: null
+                }
+            });
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+        error: errorMessage,
+        name: name,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelect, {
+                onChange: handleChange,
+                value: value || '',
+                children: options.map(({ metadatas: { intlLabel, disabled, hidden }, key, value })=>{
+                    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
+                        value: value,
+                        disabled: disabled,
+                        hidden: hidden,
+                        children: formatMessage({
+                            id: intlLabel.id,
+                            defaultMessage: intlLabel.defaultMessage
+                        }, intlLabel.values)
+                    }, key);
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})
+        ]
+    });
+};
+
+exports.SelectDateType = SelectDateType;
+//# sourceMappingURL=SelectDateType.js.map

package/dist/admin/components/SelectDateType.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectDateType.js","sources":["../../../admin/src/components/SelectDateType.tsx"],"sourcesContent":["import { Field, SingleSelect, SingleSelectOption } from '@strapi/design-system';\nimport { PrimitiveType, useIntl } from 'react-intl';\n\ntype SelectDateTypeProps = {\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n    values?: object;\n  };\n  error?: string;\n  modifiedData: {\n    default: number;\n    max: number;\n    min: number;\n  };\n  name: string;\n  onChange: (value: {\n    target: {\n      name: string;\n      value: string | number | null;\n      type?: string;\n    };\n  }) => void;\n  options: Array<{\n    metadatas: {\n      intlLabel: {\n        id: string;\n        defaultMessage: string;\n        values: Record<string, PrimitiveType> | undefined;\n      };\n      disabled?: boolean;\n      hidden?: boolean;\n    };\n    key: string | number;\n    value: string | number;\n  }>;\n  value?: string;\n};\n\nexport const SelectDateType = ({\n  intlLabel,\n  error = undefined,\n  modifiedData,\n  name,\n  onChange,\n  options,\n  value = '',\n}: SelectDateTypeProps) => {\n  const { formatMessage } = useIntl();\n  const label = formatMessage(intlLabel);\n  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';\n\n  const handleChange = (nextValue: string | number) => {\n    onChange({ target: { name, value: nextValue, type: 'select' } });\n\n    if (!value) {\n      return;\n    }\n\n    if (modifiedData.default !== undefined && modifiedData.default !== null) {\n      onChange({ target: { name: 'default', value: null } });\n    }\n  };\n\n  return (\n    <Field.Root error={errorMessage} name={name}>\n      <Field.Label>{label}</Field.Label>\n      <SingleSelect onChange={handleChange} value={value || ''}>\n        {options.map(({ metadatas: { intlLabel, disabled, hidden }, key, value }) => {\n          return (\n            <SingleSelectOption key={key} value={value} disabled={disabled} hidden={hidden}>\n              {formatMessage(\n                { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },\n                intlLabel.values\n              )}\n            </SingleSelectOption>\n          );\n        })}\n      </SingleSelect>\n      <Field.Error />\n    </Field.Root>\n  );\n};\n"],"names":["SelectDateType","intlLabel","error","undefined","modifiedData","name","onChange","options","value","formatMessage","useIntl","label","errorMessage","id","defaultMessage","handleChange","nextValue","target","type","default","_jsxs","Field","Root","_jsx","Label","SingleSelect","map","metadatas","disabled","hidden","key","SingleSelectOption","values","Error"],"mappings":";;;;;;MAuCaA,cAAiB,GAAA,CAAC,EAC7BC,SAAS,EACTC,QAAQC,SAAS,EACjBC,YAAY,EACZC,IAAI,EACJC,QAAQ,EACRC,OAAO,EACPC,KAAAA,GAAQ,EAAE,EACU,GAAA;IACpB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAMC,QAAQF,aAAcR,CAAAA,SAAAA,CAAAA;IAC5B,MAAMW,YAAAA,GAAeV,QAAQO,aAAc,CAAA;QAAEI,EAAIX,EAAAA,KAAAA;QAAOY,cAAgBZ,EAAAA;KAAW,CAAA,GAAA,EAAA;AAEnF,IAAA,MAAMa,eAAe,CAACC,SAAAA,GAAAA;QACpBV,QAAS,CAAA;YAAEW,MAAQ,EAAA;AAAEZ,gBAAAA,IAAAA;gBAAMG,KAAOQ,EAAAA,SAAAA;gBAAWE,IAAM,EAAA;AAAS;AAAE,SAAA,CAAA;AAE9D,QAAA,IAAI,CAACV,KAAO,EAAA;AACV,YAAA;AACF;AAEA,QAAA,IAAIJ,aAAae,OAAO,KAAKhB,aAAaC,YAAae,CAAAA,OAAO,KAAK,IAAM,EAAA;YACvEb,QAAS,CAAA;gBAAEW,MAAQ,EAAA;oBAAEZ,IAAM,EAAA,SAAA;oBAAWG,KAAO,EAAA;AAAK;AAAE,aAAA,CAAA;AACtD;AACF,KAAA;IAEA,qBACEY,eAAA,CAACC,mBAAMC,IAAI,EAAA;QAACpB,KAAOU,EAAAA,YAAAA;QAAcP,IAAMA,EAAAA,IAAAA;;AACrC,0BAAAkB,cAAA,CAACF,mBAAMG,KAAK,EAAA;AAAEb,gBAAAA,QAAAA,EAAAA;;0BACdY,cAACE,CAAAA,yBAAAA,EAAAA;gBAAanB,QAAUS,EAAAA,YAAAA;AAAcP,gBAAAA,KAAAA,EAAOA,KAAS,IAAA,EAAA;AACnDD,gBAAAA,QAAAA,EAAAA,OAAAA,CAAQmB,GAAG,CAAC,CAAC,EAAEC,SAAAA,EAAW,EAAE1B,SAAS,EAAE2B,QAAQ,EAAEC,MAAM,EAAE,EAAEC,GAAG,EAAEtB,KAAK,EAAE,GAAA;AACtE,oBAAA,qBACEe,cAACQ,CAAAA,+BAAAA,EAAAA;wBAA6BvB,KAAOA,EAAAA,KAAAA;wBAAOoB,QAAUA,EAAAA,QAAAA;wBAAUC,MAAQA,EAAAA,MAAAA;kCACrEpB,aACC,CAAA;AAAEI,4BAAAA,EAAAA,EAAIZ,UAAUY,EAAE;AAAEC,4BAAAA,cAAAA,EAAgBb,UAAUa;AAAe,yBAAA,EAC7Db,UAAU+B,MAAM;AAHKF,qBAAAA,EAAAA,GAAAA,CAAAA;AAO7B,iBAAA;;AAEF,0BAAAP,cAAA,CAACF,mBAAMY,KAAK,EAAA,EAAA;;;AAGlB;;;;"}