@strapi/content-type-builder 0.0.0-experimental.008123965da692a55d02a1df63facc54077c6bde

package/dist/admin/components/AttributeOptions/AttributeOption.mjs

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Flex, Box, Typography } from '@strapi/design-system';
+import { Sparkle } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../utils/getTrad.mjs';
+import { AttributeIcon } from '../AttributeIcon.mjs';
+import { useFormModalNavigation } from '../FormModalNavigation/useFormModalNavigation.mjs';
+import { OptionBoxWrapper } from './OptionBoxWrapper.mjs';
+
+const newAttributes = [];
+const NewBadge = ()=>/*#__PURE__*/ jsx(Flex, {
+        grow: 1,
+        justifyContent: "flex-end",
+        children: /*#__PURE__*/ jsxs(Flex, {
+            gap: 1,
+            hasRadius: true,
+            background: "alternative100",
+            padding: `0.2rem 0.4rem`,
+            children: [
+                /*#__PURE__*/ jsx(Sparkle, {
+                    width: `1rem`,
+                    height: `1rem`,
+                    fill: "alternative600"
+                }),
+                /*#__PURE__*/ jsx(Typography, {
+                    textColor: "alternative600",
+                    variant: "sigma",
+                    children: "New"
+                })
+            ]
+        })
+    });
+const AttributeOption = ({ type = 'text' })=>{
+    const { formatMessage } = useIntl();
+    const { onClickSelectField } = useFormModalNavigation();
+    const handleClick = ()=>{
+        const step = type === 'component' ? '1' : null;
+        onClickSelectField({
+            attributeType: type,
+            step
+        });
+    };
+    return /*#__PURE__*/ jsx(OptionBoxWrapper, {
+        padding: 4,
+        tag: "button",
+        hasRadius: true,
+        type: "button",
+        onClick: handleClick,
+        children: /*#__PURE__*/ jsxs(Flex, {
+            children: [
+                /*#__PURE__*/ jsx(AttributeIcon, {
+                    type: type
+                }),
+                /*#__PURE__*/ jsxs(Box, {
+                    paddingLeft: 4,
+                    width: "100%",
+                    children: [
+                        /*#__PURE__*/ jsxs(Flex, {
+                            justifyContent: "space-between",
+                            children: [
+                                /*#__PURE__*/ jsx(Typography, {
+                                    fontWeight: "bold",
+                                    textColor: "neutral800",
+                                    children: formatMessage({
+                                        id: getTrad(`attribute.${type}`),
+                                        defaultMessage: type
+                                    })
+                                }),
+                                newAttributes.includes(type) && /*#__PURE__*/ jsx(NewBadge, {})
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Flex, {
+                            children: /*#__PURE__*/ jsx(Typography, {
+                                variant: "pi",
+                                textColor: "neutral600",
+                                children: formatMessage({
+                                    id: getTrad(`attribute.${type}.description`),
+                                    defaultMessage: 'A type for modeling data'
+                                })
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+export { AttributeOption };
+//# sourceMappingURL=AttributeOption.mjs.map

package/dist/admin/components/AttributeOptions/AttributeOption.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttributeOption.mjs","sources":["../../../../admin/src/components/AttributeOptions/AttributeOption.tsx"],"sourcesContent":["/**\n *\n * AttributeOption\n *\n */\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { Sparkle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../utils/getTrad';\nimport { AttributeIcon, IconByType } from '../AttributeIcon';\nimport { useFormModalNavigation } from '../FormModalNavigation/useFormModalNavigation';\n\nimport { OptionBoxWrapper } from './OptionBoxWrapper';\n\nconst newAttributes: string[] = [];\n\nconst NewBadge = () => (\n  <Flex grow={1} justifyContent=\"flex-end\">\n    <Flex gap={1} hasRadius background=\"alternative100\" padding={`0.2rem 0.4rem`}>\n      <Sparkle width={`1rem`} height={`1rem`} fill=\"alternative600\" />\n      <Typography textColor=\"alternative600\" variant=\"sigma\">\n        New\n      </Typography>\n    </Flex>\n  </Flex>\n);\n\ntype AttributeOptionProps = {\n  type: IconByType;\n};\n\nexport const AttributeOption = ({ type = 'text' }: AttributeOptionProps) => {\n  const { formatMessage } = useIntl();\n\n  const { onClickSelectField } = useFormModalNavigation();\n\n  const handleClick = () => {\n    const step = type === 'component' ? '1' : null;\n\n    onClickSelectField({\n      attributeType: type,\n      step,\n    });\n  };\n\n  return (\n    <OptionBoxWrapper padding={4} tag=\"button\" hasRadius type=\"button\" onClick={handleClick}>\n      <Flex>\n        <AttributeIcon type={type} />\n        <Box paddingLeft={4} width=\"100%\">\n          <Flex justifyContent=\"space-between\">\n            <Typography fontWeight=\"bold\" textColor=\"neutral800\">\n              {formatMessage({ id: getTrad(`attribute.${type}`), defaultMessage: type })}\n            </Typography>\n            {newAttributes.includes(type) && <NewBadge />}\n          </Flex>\n          <Flex>\n            <Typography variant=\"pi\" textColor=\"neutral600\">\n              {formatMessage({\n                id: getTrad(`attribute.${type}.description`),\n                defaultMessage: 'A type for modeling data',\n              })}\n            </Typography>\n          </Flex>\n        </Box>\n      </Flex>\n    </OptionBoxWrapper>\n  );\n};\n"],"names":["newAttributes","NewBadge","_jsx","Flex","grow","justifyContent","_jsxs","gap","hasRadius","background","padding","Sparkle","width","height","fill","Typography","textColor","variant","AttributeOption","type","formatMessage","useIntl","onClickSelectField","useFormModalNavigation","handleClick","step","attributeType","OptionBoxWrapper","tag","onClick","AttributeIcon","Box","paddingLeft","fontWeight","id","getTrad","defaultMessage","includes"],"mappings":";;;;;;;;;AAgBA,MAAMA,gBAA0B,EAAE;AAElC,MAAMC,QAAAA,GAAW,kBACfC,GAACC,CAAAA,IAAAA,EAAAA;QAAKC,IAAM,EAAA,CAAA;QAAGC,cAAe,EAAA,UAAA;AAC5B,QAAA,QAAA,gBAAAC,IAACH,CAAAA,IAAAA,EAAAA;YAAKI,GAAK,EAAA,CAAA;YAAGC,SAAS,EAAA,IAAA;YAACC,UAAW,EAAA,gBAAA;YAAiBC,OAAS,EAAA,CAAC,aAAa,CAAC;;8BAC1ER,GAACS,CAAAA,OAAAA,EAAAA;oBAAQC,KAAO,EAAA,CAAC,IAAI,CAAC;oBAAEC,MAAQ,EAAA,CAAC,IAAI,CAAC;oBAAEC,IAAK,EAAA;;8BAC7CZ,GAACa,CAAAA,UAAAA,EAAAA;oBAAWC,SAAU,EAAA,gBAAA;oBAAiBC,OAAQ,EAAA,OAAA;AAAQ,oBAAA,QAAA,EAAA;;;;;MAWhDC,eAAkB,GAAA,CAAC,EAAEC,IAAAA,GAAO,MAAM,EAAwB,GAAA;IACrE,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAE1B,MAAM,EAAEC,kBAAkB,EAAE,GAAGC,sBAAAA,EAAAA;AAE/B,IAAA,MAAMC,WAAc,GAAA,IAAA;QAClB,MAAMC,IAAAA,GAAON,IAAS,KAAA,WAAA,GAAc,GAAM,GAAA,IAAA;QAE1CG,kBAAmB,CAAA;YACjBI,aAAeP,EAAAA,IAAAA;AACfM,YAAAA;AACF,SAAA,CAAA;AACF,KAAA;AAEA,IAAA,qBACEvB,GAACyB,CAAAA,gBAAAA,EAAAA;QAAiBjB,OAAS,EAAA,CAAA;QAAGkB,GAAI,EAAA,QAAA;QAASpB,SAAS,EAAA,IAAA;QAACW,IAAK,EAAA,QAAA;QAASU,OAASL,EAAAA,WAAAA;AAC1E,QAAA,QAAA,gBAAAlB,IAACH,CAAAA,IAAAA,EAAAA;;8BACCD,GAAC4B,CAAAA,aAAAA,EAAAA;oBAAcX,IAAMA,EAAAA;;8BACrBb,IAACyB,CAAAA,GAAAA,EAAAA;oBAAIC,WAAa,EAAA,CAAA;oBAAGpB,KAAM,EAAA,MAAA;;sCACzBN,IAACH,CAAAA,IAAAA,EAAAA;4BAAKE,cAAe,EAAA,eAAA;;8CACnBH,GAACa,CAAAA,UAAAA,EAAAA;oCAAWkB,UAAW,EAAA,MAAA;oCAAOjB,SAAU,EAAA,YAAA;8CACrCI,aAAc,CAAA;AAAEc,wCAAAA,EAAAA,EAAIC,OAAQ,CAAA,CAAC,UAAU,EAAEhB,KAAK,CAAC,CAAA;wCAAGiB,cAAgBjB,EAAAA;AAAK,qCAAA;;gCAEzEnB,aAAcqC,CAAAA,QAAQ,CAAClB,IAAAA,CAAAA,kBAASjB,GAACD,CAAAA,QAAAA,EAAAA,EAAAA;;;sCAEpCC,GAACC,CAAAA,IAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAD,GAACa,CAAAA,UAAAA,EAAAA;gCAAWE,OAAQ,EAAA,IAAA;gCAAKD,SAAU,EAAA,YAAA;0CAChCI,aAAc,CAAA;AACbc,oCAAAA,EAAAA,EAAIC,QAAQ,CAAC,UAAU,EAAEhB,IAAAA,CAAK,YAAY,CAAC,CAAA;oCAC3CiB,cAAgB,EAAA;AAClB,iCAAA;;;;;;;;AAOd;;;;"}

package/dist/admin/components/AttributeOptions/AttributeOptions.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var getTrad = require('../../utils/getTrad.js');
+var AttributeList = require('./AttributeList.js');
+var CustomFieldsList = require('./CustomFieldsList.js');
+
+const AttributeOptions = ({ attributes, forTarget, kind })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const defaultTabId = getTrad.getTrad('modalForm.tabs.default');
+    const customTabId = getTrad.getTrad('modalForm.tabs.custom');
+    const titleIdSuffix = forTarget.includes('component') ? 'component' : kind;
+    const titleId = getTrad.getTrad(`modalForm.sub-header.chooseAttribute.${titleIdSuffix}`);
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Body, {
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tabs.Root, {
+            variant: "simple",
+            defaultValue: "default",
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+                    justifyContent: "space-between",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            variant: "beta",
+                            tag: "h2",
+                            children: formatMessage({
+                                id: titleId,
+                                defaultMessage: 'Select a field'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tabs.List, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tabs.Trigger, {
+                                    value: "default",
+                                    children: formatMessage({
+                                        id: defaultTabId,
+                                        defaultMessage: 'Default'
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tabs.Trigger, {
+                                    value: "custom",
+                                    children: formatMessage({
+                                        id: customTabId,
+                                        defaultMessage: 'Custom'
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Divider, {
+                    marginBottom: 6
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tabs.Content, {
+                    value: "default",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(AttributeList.AttributeList, {
+                        attributes: attributes
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tabs.Content, {
+                    value: "custom",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(CustomFieldsList.CustomFieldsList, {})
+                })
+            ]
+        })
+    });
+};
+
+exports.AttributeOptions = AttributeOptions;
+//# sourceMappingURL=AttributeOptions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttributeOptions.js","sources":["../../../../admin/src/components/AttributeOptions/AttributeOptions.tsx"],"sourcesContent":["/**\n *\n * AttributeOptions\n *\n */\n\nimport { Divider, Flex, Modal, Tabs, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../utils';\nimport { IconByType } from '../AttributeIcon';\n\nimport { AttributeList } from './AttributeList';\nimport { CustomFieldsList } from './CustomFieldsList';\n\ntype AttributeOptionsProps = {\n  attributes: IconByType[][];\n  forTarget: string;\n  kind: string;\n};\n\nexport const AttributeOptions = ({ attributes, forTarget, kind }: AttributeOptionsProps) => {\n  const { formatMessage } = useIntl();\n\n  const defaultTabId = getTrad('modalForm.tabs.default');\n  const customTabId = getTrad('modalForm.tabs.custom');\n\n  const titleIdSuffix = forTarget.includes('component') ? 'component' : kind;\n  const titleId = getTrad(`modalForm.sub-header.chooseAttribute.${titleIdSuffix}`);\n\n  return (\n    <Modal.Body>\n      <Tabs.Root variant=\"simple\" defaultValue=\"default\">\n        <Flex justifyContent=\"space-between\">\n          <Typography variant=\"beta\" tag=\"h2\">\n            {formatMessage({ id: titleId, defaultMessage: 'Select a field' })}\n          </Typography>\n          <Tabs.List>\n            <Tabs.Trigger value=\"default\">\n              {formatMessage({ id: defaultTabId, defaultMessage: 'Default' })}\n            </Tabs.Trigger>\n            <Tabs.Trigger value=\"custom\">\n              {formatMessage({ id: customTabId, defaultMessage: 'Custom' })}\n            </Tabs.Trigger>\n          </Tabs.List>\n        </Flex>\n        <Divider marginBottom={6} />\n        <Tabs.Content value=\"default\">\n          <AttributeList attributes={attributes} />\n        </Tabs.Content>\n        <Tabs.Content value=\"custom\">\n          <CustomFieldsList />\n        </Tabs.Content>\n      </Tabs.Root>\n    </Modal.Body>\n  );\n};\n"],"names":["AttributeOptions","attributes","forTarget","kind","formatMessage","useIntl","defaultTabId","getTrad","customTabId","titleIdSuffix","includes","titleId","_jsx","Modal","Body","_jsxs","Tabs","Root","variant","defaultValue","Flex","justifyContent","Typography","tag","id","defaultMessage","List","Trigger","value","Divider","marginBottom","Content","AttributeList","CustomFieldsList"],"mappings":";;;;;;;;;AAqBO,MAAMA,mBAAmB,CAAC,EAAEC,UAAU,EAAEC,SAAS,EAAEC,IAAI,EAAyB,GAAA;IACrF,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,MAAMC,eAAeC,eAAQ,CAAA,wBAAA,CAAA;AAC7B,IAAA,MAAMC,cAAcD,eAAQ,CAAA,uBAAA,CAAA;AAE5B,IAAA,MAAME,aAAgBP,GAAAA,SAAAA,CAAUQ,QAAQ,CAAC,eAAe,WAAcP,GAAAA,IAAAA;AACtE,IAAA,MAAMQ,UAAUJ,eAAQ,CAAA,CAAC,qCAAqC,EAAEE,cAAc,CAAC,CAAA;IAE/E,qBACEG,cAAA,CAACC,mBAAMC,IAAI,EAAA;gCACTC,eAAA,CAACC,kBAAKC,IAAI,EAAA;YAACC,OAAQ,EAAA,QAAA;YAASC,YAAa,EAAA,SAAA;;8BACvCJ,eAACK,CAAAA,iBAAAA,EAAAA;oBAAKC,cAAe,EAAA,eAAA;;sCACnBT,cAACU,CAAAA,uBAAAA,EAAAA;4BAAWJ,OAAQ,EAAA,MAAA;4BAAOK,GAAI,EAAA,IAAA;sCAC5BnB,aAAc,CAAA;gCAAEoB,EAAIb,EAAAA,OAAAA;gCAASc,cAAgB,EAAA;AAAiB,6BAAA;;AAEjE,sCAAAV,eAAA,CAACC,kBAAKU,IAAI,EAAA;;AACR,8CAAAd,cAAA,CAACI,kBAAKW,OAAO,EAAA;oCAACC,KAAM,EAAA,SAAA;8CACjBxB,aAAc,CAAA;wCAAEoB,EAAIlB,EAAAA,YAAAA;wCAAcmB,cAAgB,EAAA;AAAU,qCAAA;;AAE/D,8CAAAb,cAAA,CAACI,kBAAKW,OAAO,EAAA;oCAACC,KAAM,EAAA,QAAA;8CACjBxB,aAAc,CAAA;wCAAEoB,EAAIhB,EAAAA,WAAAA;wCAAaiB,cAAgB,EAAA;AAAS,qCAAA;;;;;;8BAIjEb,cAACiB,CAAAA,oBAAAA,EAAAA;oBAAQC,YAAc,EAAA;;AACvB,8BAAAlB,cAAA,CAACI,kBAAKe,OAAO,EAAA;oBAACH,KAAM,EAAA,SAAA;AAClB,oBAAA,QAAA,gBAAAhB,cAACoB,CAAAA,2BAAAA,EAAAA;wBAAc/B,UAAYA,EAAAA;;;AAE7B,8BAAAW,cAAA,CAACI,kBAAKe,OAAO,EAAA;oBAACH,KAAM,EAAA,QAAA;AAClB,oBAAA,QAAA,gBAAAhB,cAACqB,CAAAA,iCAAAA,EAAAA,EAAAA;;;;;AAKX;;;;"}

package/dist/admin/components/AttributeOptions/AttributeOptions.mjs

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Modal, Tabs, Flex, Typography, Divider } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../utils/getTrad.mjs';
+import { AttributeList } from './AttributeList.mjs';
+import { CustomFieldsList } from './CustomFieldsList.mjs';
+
+const AttributeOptions = ({ attributes, forTarget, kind })=>{
+    const { formatMessage } = useIntl();
+    const defaultTabId = getTrad('modalForm.tabs.default');
+    const customTabId = getTrad('modalForm.tabs.custom');
+    const titleIdSuffix = forTarget.includes('component') ? 'component' : kind;
+    const titleId = getTrad(`modalForm.sub-header.chooseAttribute.${titleIdSuffix}`);
+    return /*#__PURE__*/ jsx(Modal.Body, {
+        children: /*#__PURE__*/ jsxs(Tabs.Root, {
+            variant: "simple",
+            defaultValue: "default",
+            children: [
+                /*#__PURE__*/ jsxs(Flex, {
+                    justifyContent: "space-between",
+                    children: [
+                        /*#__PURE__*/ jsx(Typography, {
+                            variant: "beta",
+                            tag: "h2",
+                            children: formatMessage({
+                                id: titleId,
+                                defaultMessage: 'Select a field'
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs(Tabs.List, {
+                            children: [
+                                /*#__PURE__*/ jsx(Tabs.Trigger, {
+                                    value: "default",
+                                    children: formatMessage({
+                                        id: defaultTabId,
+                                        defaultMessage: 'Default'
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Tabs.Trigger, {
+                                    value: "custom",
+                                    children: formatMessage({
+                                        id: customTabId,
+                                        defaultMessage: 'Custom'
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Divider, {
+                    marginBottom: 6
+                }),
+                /*#__PURE__*/ jsx(Tabs.Content, {
+                    value: "default",
+                    children: /*#__PURE__*/ jsx(AttributeList, {
+                        attributes: attributes
+                    })
+                }),
+                /*#__PURE__*/ jsx(Tabs.Content, {
+                    value: "custom",
+                    children: /*#__PURE__*/ jsx(CustomFieldsList, {})
+                })
+            ]
+        })
+    });
+};
+
+export { AttributeOptions };
+//# sourceMappingURL=AttributeOptions.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttributeOptions.mjs","sources":["../../../../admin/src/components/AttributeOptions/AttributeOptions.tsx"],"sourcesContent":["/**\n *\n * AttributeOptions\n *\n */\n\nimport { Divider, Flex, Modal, Tabs, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../utils';\nimport { IconByType } from '../AttributeIcon';\n\nimport { AttributeList } from './AttributeList';\nimport { CustomFieldsList } from './CustomFieldsList';\n\ntype AttributeOptionsProps = {\n  attributes: IconByType[][];\n  forTarget: string;\n  kind: string;\n};\n\nexport const AttributeOptions = ({ attributes, forTarget, kind }: AttributeOptionsProps) => {\n  const { formatMessage } = useIntl();\n\n  const defaultTabId = getTrad('modalForm.tabs.default');\n  const customTabId = getTrad('modalForm.tabs.custom');\n\n  const titleIdSuffix = forTarget.includes('component') ? 'component' : kind;\n  const titleId = getTrad(`modalForm.sub-header.chooseAttribute.${titleIdSuffix}`);\n\n  return (\n    <Modal.Body>\n      <Tabs.Root variant=\"simple\" defaultValue=\"default\">\n        <Flex justifyContent=\"space-between\">\n          <Typography variant=\"beta\" tag=\"h2\">\n            {formatMessage({ id: titleId, defaultMessage: 'Select a field' })}\n          </Typography>\n          <Tabs.List>\n            <Tabs.Trigger value=\"default\">\n              {formatMessage({ id: defaultTabId, defaultMessage: 'Default' })}\n            </Tabs.Trigger>\n            <Tabs.Trigger value=\"custom\">\n              {formatMessage({ id: customTabId, defaultMessage: 'Custom' })}\n            </Tabs.Trigger>\n          </Tabs.List>\n        </Flex>\n        <Divider marginBottom={6} />\n        <Tabs.Content value=\"default\">\n          <AttributeList attributes={attributes} />\n        </Tabs.Content>\n        <Tabs.Content value=\"custom\">\n          <CustomFieldsList />\n        </Tabs.Content>\n      </Tabs.Root>\n    </Modal.Body>\n  );\n};\n"],"names":["AttributeOptions","attributes","forTarget","kind","formatMessage","useIntl","defaultTabId","getTrad","customTabId","titleIdSuffix","includes","titleId","_jsx","Modal","Body","_jsxs","Tabs","Root","variant","defaultValue","Flex","justifyContent","Typography","tag","id","defaultMessage","List","Trigger","value","Divider","marginBottom","Content","AttributeList","CustomFieldsList"],"mappings":";;;;;;;AAqBO,MAAMA,mBAAmB,CAAC,EAAEC,UAAU,EAAEC,SAAS,EAAEC,IAAI,EAAyB,GAAA;IACrF,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,MAAMC,eAAeC,OAAQ,CAAA,wBAAA,CAAA;AAC7B,IAAA,MAAMC,cAAcD,OAAQ,CAAA,uBAAA,CAAA;AAE5B,IAAA,MAAME,aAAgBP,GAAAA,SAAAA,CAAUQ,QAAQ,CAAC,eAAe,WAAcP,GAAAA,IAAAA;AACtE,IAAA,MAAMQ,UAAUJ,OAAQ,CAAA,CAAC,qCAAqC,EAAEE,cAAc,CAAC,CAAA;IAE/E,qBACEG,GAAA,CAACC,MAAMC,IAAI,EAAA;gCACTC,IAAA,CAACC,KAAKC,IAAI,EAAA;YAACC,OAAQ,EAAA,QAAA;YAASC,YAAa,EAAA,SAAA;;8BACvCJ,IAACK,CAAAA,IAAAA,EAAAA;oBAAKC,cAAe,EAAA,eAAA;;sCACnBT,GAACU,CAAAA,UAAAA,EAAAA;4BAAWJ,OAAQ,EAAA,MAAA;4BAAOK,GAAI,EAAA,IAAA;sCAC5BnB,aAAc,CAAA;gCAAEoB,EAAIb,EAAAA,OAAAA;gCAASc,cAAgB,EAAA;AAAiB,6BAAA;;AAEjE,sCAAAV,IAAA,CAACC,KAAKU,IAAI,EAAA;;AACR,8CAAAd,GAAA,CAACI,KAAKW,OAAO,EAAA;oCAACC,KAAM,EAAA,SAAA;8CACjBxB,aAAc,CAAA;wCAAEoB,EAAIlB,EAAAA,YAAAA;wCAAcmB,cAAgB,EAAA;AAAU,qCAAA;;AAE/D,8CAAAb,GAAA,CAACI,KAAKW,OAAO,EAAA;oCAACC,KAAM,EAAA,QAAA;8CACjBxB,aAAc,CAAA;wCAAEoB,EAAIhB,EAAAA,WAAAA;wCAAaiB,cAAgB,EAAA;AAAS,qCAAA;;;;;;8BAIjEb,GAACiB,CAAAA,OAAAA,EAAAA;oBAAQC,YAAc,EAAA;;AACvB,8BAAAlB,GAAA,CAACI,KAAKe,OAAO,EAAA;oBAACH,KAAM,EAAA,SAAA;AAClB,oBAAA,QAAA,gBAAAhB,GAACoB,CAAAA,aAAAA,EAAAA;wBAAc/B,UAAYA,EAAAA;;;AAE7B,8BAAAW,GAAA,CAACI,KAAKe,OAAO,EAAA;oBAACH,KAAM,EAAA,QAAA;AAClB,oBAAA,QAAA,gBAAAhB,GAACqB,CAAAA,gBAAAA,EAAAA,EAAAA;;;;;AAKX;;;;"}

package/dist/admin/components/AttributeOptions/CustomFieldOption.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var AttributeIcon = require('../AttributeIcon.js');
+var useFormModalNavigation = require('../FormModalNavigation/useFormModalNavigation.js');
+var OptionBoxWrapper = require('./OptionBoxWrapper.js');
+
+const CustomFieldOption = ({ customFieldUid, customField })=>{
+    const { type, intlLabel, intlDescription } = customField;
+    const { formatMessage } = reactIntl.useIntl();
+    const { onClickSelectCustomField } = useFormModalNavigation.useFormModalNavigation();
+    const handleClick = ()=>{
+        onClickSelectCustomField({
+            attributeType: type,
+            customFieldUid
+        });
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(OptionBoxWrapper.OptionBoxWrapper, {
+        padding: 4,
+        tag: "button",
+        hasRadius: true,
+        type: "button",
+        onClick: handleClick,
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(AttributeIcon.AttributeIcon, {
+                    type: type,
+                    customField: customFieldUid
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
+                    paddingLeft: 4,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                fontWeight: "bold",
+                                textColor: "neutral800",
+                                children: formatMessage(intlLabel)
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                variant: "pi",
+                                textColor: "neutral600",
+                                children: formatMessage(intlDescription)
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+exports.CustomFieldOption = CustomFieldOption;
+//# sourceMappingURL=CustomFieldOption.js.map

package/dist/admin/components/AttributeOptions/CustomFieldOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomFieldOption.js","sources":["../../../../admin/src/components/AttributeOptions/CustomFieldOption.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { StrapiAppContextValue } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { AttributeIcon, IconByType } from '../AttributeIcon';\nimport { useFormModalNavigation } from '../FormModalNavigation/useFormModalNavigation';\n\nimport { OptionBoxWrapper } from './OptionBoxWrapper';\n\nexport type CustomFieldOption = {\n  name: string;\n  type: IconByType;\n  icon: React.ComponentType;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n  };\n  intlDescription: {\n    id: string;\n    defaultMessage: string;\n  };\n};\n\ntype CustomFieldOptionProps = {\n  customFieldUid: string;\n  customField: NonNullable<ReturnType<StrapiAppContextValue['customFields']['get']>>;\n};\n\nexport const CustomFieldOption = ({ customFieldUid, customField }: CustomFieldOptionProps) => {\n  const { type, intlLabel, intlDescription } = customField;\n  const { formatMessage } = useIntl();\n\n  const { onClickSelectCustomField } = useFormModalNavigation();\n\n  const handleClick = () => {\n    onClickSelectCustomField({\n      attributeType: type,\n      customFieldUid,\n    });\n  };\n\n  return (\n    <OptionBoxWrapper padding={4} tag=\"button\" hasRadius type=\"button\" onClick={handleClick}>\n      <Flex>\n        <AttributeIcon type={type} customField={customFieldUid} />\n        <Box paddingLeft={4}>\n          <Flex>\n            <Typography fontWeight=\"bold\" textColor=\"neutral800\">\n              {formatMessage(intlLabel)}\n            </Typography>\n          </Flex>\n          <Flex>\n            <Typography variant=\"pi\" textColor=\"neutral600\">\n              {formatMessage(intlDescription)}\n            </Typography>\n          </Flex>\n        </Box>\n      </Flex>\n    </OptionBoxWrapper>\n  );\n};\n"],"names":["CustomFieldOption","customFieldUid","customField","type","intlLabel","intlDescription","formatMessage","useIntl","onClickSelectCustomField","useFormModalNavigation","handleClick","attributeType","_jsx","OptionBoxWrapper","padding","tag","hasRadius","onClick","_jsxs","Flex","AttributeIcon","Box","paddingLeft","Typography","fontWeight","textColor","variant"],"mappings":";;;;;;;;;;MA8BaA,iBAAoB,GAAA,CAAC,EAAEC,cAAc,EAAEC,WAAW,EAA0B,GAAA;AACvF,IAAA,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAEC,eAAe,EAAE,GAAGH,WAAAA;IAC7C,MAAM,EAAEI,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAE1B,MAAM,EAAEC,wBAAwB,EAAE,GAAGC,6CAAAA,EAAAA;AAErC,IAAA,MAAMC,WAAc,GAAA,IAAA;QAClBF,wBAAyB,CAAA;YACvBG,aAAeR,EAAAA,IAAAA;AACfF,YAAAA;AACF,SAAA,CAAA;AACF,KAAA;AAEA,IAAA,qBACEW,cAACC,CAAAA,iCAAAA,EAAAA;QAAiBC,OAAS,EAAA,CAAA;QAAGC,GAAI,EAAA,QAAA;QAASC,SAAS,EAAA,IAAA;QAACb,IAAK,EAAA,QAAA;QAASc,OAASP,EAAAA,WAAAA;AAC1E,QAAA,QAAA,gBAAAQ,eAACC,CAAAA,iBAAAA,EAAAA;;8BACCP,cAACQ,CAAAA,2BAAAA,EAAAA;oBAAcjB,IAAMA,EAAAA,IAAAA;oBAAMD,WAAaD,EAAAA;;8BACxCiB,eAACG,CAAAA,gBAAAA,EAAAA;oBAAIC,WAAa,EAAA,CAAA;;sCAChBV,cAACO,CAAAA,iBAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAP,cAACW,CAAAA,uBAAAA,EAAAA;gCAAWC,UAAW,EAAA,MAAA;gCAAOC,SAAU,EAAA,YAAA;0CACrCnB,aAAcF,CAAAA,SAAAA;;;sCAGnBQ,cAACO,CAAAA,iBAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAP,cAACW,CAAAA,uBAAAA,EAAAA;gCAAWG,OAAQ,EAAA,IAAA;gCAAKD,SAAU,EAAA,YAAA;0CAChCnB,aAAcD,CAAAA,eAAAA;;;;;;;;AAO7B;;;;"}

package/dist/admin/components/AttributeOptions/CustomFieldOption.mjs

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { Flex, Box, Typography } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { AttributeIcon } from '../AttributeIcon.mjs';
+import { useFormModalNavigation } from '../FormModalNavigation/useFormModalNavigation.mjs';
+import { OptionBoxWrapper } from './OptionBoxWrapper.mjs';
+
+const CustomFieldOption = ({ customFieldUid, customField })=>{
+    const { type, intlLabel, intlDescription } = customField;
+    const { formatMessage } = useIntl();
+    const { onClickSelectCustomField } = useFormModalNavigation();
+    const handleClick = ()=>{
+        onClickSelectCustomField({
+            attributeType: type,
+            customFieldUid
+        });
+    };
+    return /*#__PURE__*/ jsx(OptionBoxWrapper, {
+        padding: 4,
+        tag: "button",
+        hasRadius: true,
+        type: "button",
+        onClick: handleClick,
+        children: /*#__PURE__*/ jsxs(Flex, {
+            children: [
+                /*#__PURE__*/ jsx(AttributeIcon, {
+                    type: type,
+                    customField: customFieldUid
+                }),
+                /*#__PURE__*/ jsxs(Box, {
+                    paddingLeft: 4,
+                    children: [
+                        /*#__PURE__*/ jsx(Flex, {
+                            children: /*#__PURE__*/ jsx(Typography, {
+                                fontWeight: "bold",
+                                textColor: "neutral800",
+                                children: formatMessage(intlLabel)
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Flex, {
+                            children: /*#__PURE__*/ jsx(Typography, {
+                                variant: "pi",
+                                textColor: "neutral600",
+                                children: formatMessage(intlDescription)
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+export { CustomFieldOption };
+//# sourceMappingURL=CustomFieldOption.mjs.map

package/dist/admin/components/AttributeOptions/CustomFieldOption.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomFieldOption.mjs","sources":["../../../../admin/src/components/AttributeOptions/CustomFieldOption.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { StrapiAppContextValue } from '@strapi/admin/strapi-admin';\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { AttributeIcon, IconByType } from '../AttributeIcon';\nimport { useFormModalNavigation } from '../FormModalNavigation/useFormModalNavigation';\n\nimport { OptionBoxWrapper } from './OptionBoxWrapper';\n\nexport type CustomFieldOption = {\n  name: string;\n  type: IconByType;\n  icon: React.ComponentType;\n  intlLabel: {\n    id: string;\n    defaultMessage: string;\n  };\n  intlDescription: {\n    id: string;\n    defaultMessage: string;\n  };\n};\n\ntype CustomFieldOptionProps = {\n  customFieldUid: string;\n  customField: NonNullable<ReturnType<StrapiAppContextValue['customFields']['get']>>;\n};\n\nexport const CustomFieldOption = ({ customFieldUid, customField }: CustomFieldOptionProps) => {\n  const { type, intlLabel, intlDescription } = customField;\n  const { formatMessage } = useIntl();\n\n  const { onClickSelectCustomField } = useFormModalNavigation();\n\n  const handleClick = () => {\n    onClickSelectCustomField({\n      attributeType: type,\n      customFieldUid,\n    });\n  };\n\n  return (\n    <OptionBoxWrapper padding={4} tag=\"button\" hasRadius type=\"button\" onClick={handleClick}>\n      <Flex>\n        <AttributeIcon type={type} customField={customFieldUid} />\n        <Box paddingLeft={4}>\n          <Flex>\n            <Typography fontWeight=\"bold\" textColor=\"neutral800\">\n              {formatMessage(intlLabel)}\n            </Typography>\n          </Flex>\n          <Flex>\n            <Typography variant=\"pi\" textColor=\"neutral600\">\n              {formatMessage(intlDescription)}\n            </Typography>\n          </Flex>\n        </Box>\n      </Flex>\n    </OptionBoxWrapper>\n  );\n};\n"],"names":["CustomFieldOption","customFieldUid","customField","type","intlLabel","intlDescription","formatMessage","useIntl","onClickSelectCustomField","useFormModalNavigation","handleClick","attributeType","_jsx","OptionBoxWrapper","padding","tag","hasRadius","onClick","_jsxs","Flex","AttributeIcon","Box","paddingLeft","Typography","fontWeight","textColor","variant"],"mappings":";;;;;;;;MA8BaA,iBAAoB,GAAA,CAAC,EAAEC,cAAc,EAAEC,WAAW,EAA0B,GAAA;AACvF,IAAA,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAEC,eAAe,EAAE,GAAGH,WAAAA;IAC7C,MAAM,EAAEI,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAE1B,MAAM,EAAEC,wBAAwB,EAAE,GAAGC,sBAAAA,EAAAA;AAErC,IAAA,MAAMC,WAAc,GAAA,IAAA;QAClBF,wBAAyB,CAAA;YACvBG,aAAeR,EAAAA,IAAAA;AACfF,YAAAA;AACF,SAAA,CAAA;AACF,KAAA;AAEA,IAAA,qBACEW,GAACC,CAAAA,gBAAAA,EAAAA;QAAiBC,OAAS,EAAA,CAAA;QAAGC,GAAI,EAAA,QAAA;QAASC,SAAS,EAAA,IAAA;QAACb,IAAK,EAAA,QAAA;QAASc,OAASP,EAAAA,WAAAA;AAC1E,QAAA,QAAA,gBAAAQ,IAACC,CAAAA,IAAAA,EAAAA;;8BACCP,GAACQ,CAAAA,aAAAA,EAAAA;oBAAcjB,IAAMA,EAAAA,IAAAA;oBAAMD,WAAaD,EAAAA;;8BACxCiB,IAACG,CAAAA,GAAAA,EAAAA;oBAAIC,WAAa,EAAA,CAAA;;sCAChBV,GAACO,CAAAA,IAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAP,GAACW,CAAAA,UAAAA,EAAAA;gCAAWC,UAAW,EAAA,MAAA;gCAAOC,SAAU,EAAA,YAAA;0CACrCnB,aAAcF,CAAAA,SAAAA;;;sCAGnBQ,GAACO,CAAAA,IAAAA,EAAAA;AACC,4BAAA,QAAA,gBAAAP,GAACW,CAAAA,UAAAA,EAAAA;gCAAWG,OAAQ,EAAA,IAAA;gCAAKD,SAAU,EAAA,YAAA;0CAChCnB,aAAcD,CAAAA,eAAAA;;;;;;;;AAO7B;;;;"}

package/dist/admin/components/AttributeOptions/CustomFieldsList.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var getTrad = require('../../utils/getTrad.js');
+var CustomFieldOption = require('./CustomFieldOption.js');
+var EmptyAttributes = require('./EmptyAttributes.js');
+
+const CustomFieldsList = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const getAllCustomFields = strapiAdmin.useStrapiApp('CustomFieldsList', (state)=>state.customFields.getAll);
+    // TODO change this once useCustomFields is typed (helper-plugin types are solved)
+    const registeredCustomFields = Object.entries(getAllCustomFields());
+    if (!registeredCustomFields.length) {
+        return /*#__PURE__*/ jsxRuntime.jsx(EmptyAttributes.EmptyAttributes, {});
+    }
+    // Sort the array alphabetically by customField name
+    const sortedCustomFields = registeredCustomFields.sort((a, b)=>a[1].name > b[1].name ? 1 : -1);
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.KeyboardNavigable, {
+        tagName: "button",
+        children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 3,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
+                    gap: 3,
+                    children: sortedCustomFields.map(([uid, customField])=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
+                            col: 6,
+                            direction: "column",
+                            alignItems: "stretch",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(CustomFieldOption.CustomFieldOption, {
+                                customFieldUid: uid,
+                                customField: customField
+                            }, uid)
+                        }, uid))
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Link, {
+                    href: "https://docs.strapi.io/developer-docs/latest/development/custom-fields.html",
+                    isExternal: true,
+                    children: formatMessage({
+                        id: getTrad.getTrad('modalForm.tabs.custom.howToLink'),
+                        defaultMessage: 'How to add custom fields'
+                    })
+                })
+            ]
+        })
+    });
+};
+
+exports.CustomFieldsList = CustomFieldsList;
+//# sourceMappingURL=CustomFieldsList.js.map

package/dist/admin/components/AttributeOptions/CustomFieldsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomFieldsList.js","sources":["../../../../admin/src/components/AttributeOptions/CustomFieldsList.tsx"],"sourcesContent":["import { useStrapiApp } from '@strapi/admin/strapi-admin';\nimport { Flex, Grid, KeyboardNavigable, Link } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../utils';\n\nimport { CustomFieldOption } from './CustomFieldOption';\nimport { EmptyAttributes } from './EmptyAttributes';\n\nexport const CustomFieldsList = () => {\n  const { formatMessage } = useIntl();\n  const getAllCustomFields = useStrapiApp('CustomFieldsList', (state) => state.customFields.getAll);\n  // TODO change this once useCustomFields is typed (helper-plugin types are solved)\n  const registeredCustomFields = Object.entries(getAllCustomFields());\n\n  if (!registeredCustomFields.length) {\n    return <EmptyAttributes />;\n  }\n\n  // Sort the array alphabetically by customField name\n  const sortedCustomFields = registeredCustomFields.sort((a, b) =>\n    a[1].name > b[1].name ? 1 : -1\n  );\n\n  return (\n    <KeyboardNavigable tagName=\"button\">\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={3}>\n        <Grid.Root gap={3}>\n          {sortedCustomFields.map(([uid, customField]) => (\n            <Grid.Item key={uid} col={6} direction=\"column\" alignItems=\"stretch\">\n              <CustomFieldOption key={uid} customFieldUid={uid} customField={customField} />\n            </Grid.Item>\n          ))}\n        </Grid.Root>\n        <Link\n          href=\"https://docs.strapi.io/developer-docs/latest/development/custom-fields.html\"\n          isExternal\n        >\n          {formatMessage({\n            id: getTrad('modalForm.tabs.custom.howToLink'),\n            defaultMessage: 'How to add custom fields',\n          })}\n        </Link>\n      </Flex>\n    </KeyboardNavigable>\n  );\n};\n"],"names":["CustomFieldsList","formatMessage","useIntl","getAllCustomFields","useStrapiApp","state","customFields","getAll","registeredCustomFields","Object","entries","length","_jsx","EmptyAttributes","sortedCustomFields","sort","a","b","name","KeyboardNavigable","tagName","_jsxs","Flex","direction","alignItems","gap","Grid","Root","map","uid","customField","Item","col","CustomFieldOption","customFieldUid","Link","href","isExternal","id","getTrad","defaultMessage"],"mappings":";;;;;;;;;;MASaA,gBAAmB,GAAA,IAAA;IAC9B,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAMC,kBAAAA,GAAqBC,yBAAa,kBAAoB,EAAA,CAACC,QAAUA,KAAMC,CAAAA,YAAY,CAACC,MAAM,CAAA;;IAEhG,MAAMC,sBAAAA,GAAyBC,MAAOC,CAAAA,OAAO,CAACP,kBAAAA,EAAAA,CAAAA;IAE9C,IAAI,CAACK,sBAAuBG,CAAAA,MAAM,EAAE;AAClC,QAAA,qBAAOC,cAACC,CAAAA,+BAAAA,EAAAA,EAAAA,CAAAA;AACV;;IAGA,MAAMC,kBAAAA,GAAqBN,uBAAuBO,IAAI,CAAC,CAACC,CAAGC,EAAAA,CAAAA,GACzDD,CAAC,CAAC,CAAA,CAAE,CAACE,IAAI,GAAGD,CAAC,CAAC,CAAA,CAAE,CAACC,IAAI,GAAG,IAAI,CAAC,CAAA,CAAA;AAG/B,IAAA,qBACEN,cAACO,CAAAA,8BAAAA,EAAAA;QAAkBC,OAAQ,EAAA,QAAA;AACzB,QAAA,QAAA,gBAAAC,eAACC,CAAAA,iBAAAA,EAAAA;YAAKC,SAAU,EAAA,QAAA;YAASC,UAAW,EAAA,SAAA;YAAUC,GAAK,EAAA,CAAA;;AACjD,8BAAAb,cAAA,CAACc,kBAAKC,IAAI,EAAA;oBAACF,GAAK,EAAA,CAAA;8BACbX,kBAAmBc,CAAAA,GAAG,CAAC,CAAC,CAACC,KAAKC,WAAY,CAAA,iBACzClB,cAACc,CAAAA,iBAAAA,CAAKK,IAAI,EAAA;4BAAWC,GAAK,EAAA,CAAA;4BAAGT,SAAU,EAAA,QAAA;4BAASC,UAAW,EAAA,SAAA;AACzD,4BAAA,QAAA,gBAAAZ,cAACqB,CAAAA,mCAAAA,EAAAA;gCAA4BC,cAAgBL,EAAAA,GAAAA;gCAAKC,WAAaA,EAAAA;AAAvCD,6BAAAA,EAAAA,GAAAA;AADVA,yBAAAA,EAAAA,GAAAA,CAAAA;;8BAKpBjB,cAACuB,CAAAA,iBAAAA,EAAAA;oBACCC,IAAK,EAAA,6EAAA;oBACLC,UAAU,EAAA,IAAA;8BAETpC,aAAc,CAAA;AACbqC,wBAAAA,EAAAA,EAAIC,eAAQ,CAAA,iCAAA,CAAA;wBACZC,cAAgB,EAAA;AAClB,qBAAA;;;;;AAKV;;;;"}

package/dist/admin/components/AttributeOptions/CustomFieldsList.mjs

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useStrapiApp } from '@strapi/admin/strapi-admin';
+import { KeyboardNavigable, Flex, Grid, Link } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../utils/getTrad.mjs';
+import { CustomFieldOption } from './CustomFieldOption.mjs';
+import { EmptyAttributes } from './EmptyAttributes.mjs';
+
+const CustomFieldsList = ()=>{
+    const { formatMessage } = useIntl();
+    const getAllCustomFields = useStrapiApp('CustomFieldsList', (state)=>state.customFields.getAll);
+    // TODO change this once useCustomFields is typed (helper-plugin types are solved)
+    const registeredCustomFields = Object.entries(getAllCustomFields());
+    if (!registeredCustomFields.length) {
+        return /*#__PURE__*/ jsx(EmptyAttributes, {});
+    }
+    // Sort the array alphabetically by customField name
+    const sortedCustomFields = registeredCustomFields.sort((a, b)=>a[1].name > b[1].name ? 1 : -1);
+    return /*#__PURE__*/ jsx(KeyboardNavigable, {
+        tagName: "button",
+        children: /*#__PURE__*/ jsxs(Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 3,
+            children: [
+                /*#__PURE__*/ jsx(Grid.Root, {
+                    gap: 3,
+                    children: sortedCustomFields.map(([uid, customField])=>/*#__PURE__*/ jsx(Grid.Item, {
+                            col: 6,
+                            direction: "column",
+                            alignItems: "stretch",
+                            children: /*#__PURE__*/ jsx(CustomFieldOption, {
+                                customFieldUid: uid,
+                                customField: customField
+                            }, uid)
+                        }, uid))
+                }),
+                /*#__PURE__*/ jsx(Link, {
+                    href: "https://docs.strapi.io/developer-docs/latest/development/custom-fields.html",
+                    isExternal: true,
+                    children: formatMessage({
+                        id: getTrad('modalForm.tabs.custom.howToLink'),
+                        defaultMessage: 'How to add custom fields'
+                    })
+                })
+            ]
+        })
+    });
+};
+
+export { CustomFieldsList };
+//# sourceMappingURL=CustomFieldsList.mjs.map

package/dist/admin/components/AttributeOptions/CustomFieldsList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomFieldsList.mjs","sources":["../../../../admin/src/components/AttributeOptions/CustomFieldsList.tsx"],"sourcesContent":["import { useStrapiApp } from '@strapi/admin/strapi-admin';\nimport { Flex, Grid, KeyboardNavigable, Link } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../utils';\n\nimport { CustomFieldOption } from './CustomFieldOption';\nimport { EmptyAttributes } from './EmptyAttributes';\n\nexport const CustomFieldsList = () => {\n  const { formatMessage } = useIntl();\n  const getAllCustomFields = useStrapiApp('CustomFieldsList', (state) => state.customFields.getAll);\n  // TODO change this once useCustomFields is typed (helper-plugin types are solved)\n  const registeredCustomFields = Object.entries(getAllCustomFields());\n\n  if (!registeredCustomFields.length) {\n    return <EmptyAttributes />;\n  }\n\n  // Sort the array alphabetically by customField name\n  const sortedCustomFields = registeredCustomFields.sort((a, b) =>\n    a[1].name > b[1].name ? 1 : -1\n  );\n\n  return (\n    <KeyboardNavigable tagName=\"button\">\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={3}>\n        <Grid.Root gap={3}>\n          {sortedCustomFields.map(([uid, customField]) => (\n            <Grid.Item key={uid} col={6} direction=\"column\" alignItems=\"stretch\">\n              <CustomFieldOption key={uid} customFieldUid={uid} customField={customField} />\n            </Grid.Item>\n          ))}\n        </Grid.Root>\n        <Link\n          href=\"https://docs.strapi.io/developer-docs/latest/development/custom-fields.html\"\n          isExternal\n        >\n          {formatMessage({\n            id: getTrad('modalForm.tabs.custom.howToLink'),\n            defaultMessage: 'How to add custom fields',\n          })}\n        </Link>\n      </Flex>\n    </KeyboardNavigable>\n  );\n};\n"],"names":["CustomFieldsList","formatMessage","useIntl","getAllCustomFields","useStrapiApp","state","customFields","getAll","registeredCustomFields","Object","entries","length","_jsx","EmptyAttributes","sortedCustomFields","sort","a","b","name","KeyboardNavigable","tagName","_jsxs","Flex","direction","alignItems","gap","Grid","Root","map","uid","customField","Item","col","CustomFieldOption","customFieldUid","Link","href","isExternal","id","getTrad","defaultMessage"],"mappings":";;;;;;;;MASaA,gBAAmB,GAAA,IAAA;IAC9B,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAMC,kBAAAA,GAAqBC,aAAa,kBAAoB,EAAA,CAACC,QAAUA,KAAMC,CAAAA,YAAY,CAACC,MAAM,CAAA;;IAEhG,MAAMC,sBAAAA,GAAyBC,MAAOC,CAAAA,OAAO,CAACP,kBAAAA,EAAAA,CAAAA;IAE9C,IAAI,CAACK,sBAAuBG,CAAAA,MAAM,EAAE;AAClC,QAAA,qBAAOC,GAACC,CAAAA,eAAAA,EAAAA,EAAAA,CAAAA;AACV;;IAGA,MAAMC,kBAAAA,GAAqBN,uBAAuBO,IAAI,CAAC,CAACC,CAAGC,EAAAA,CAAAA,GACzDD,CAAC,CAAC,CAAA,CAAE,CAACE,IAAI,GAAGD,CAAC,CAAC,CAAA,CAAE,CAACC,IAAI,GAAG,IAAI,CAAC,CAAA,CAAA;AAG/B,IAAA,qBACEN,GAACO,CAAAA,iBAAAA,EAAAA;QAAkBC,OAAQ,EAAA,QAAA;AACzB,QAAA,QAAA,gBAAAC,IAACC,CAAAA,IAAAA,EAAAA;YAAKC,SAAU,EAAA,QAAA;YAASC,UAAW,EAAA,SAAA;YAAUC,GAAK,EAAA,CAAA;;AACjD,8BAAAb,GAAA,CAACc,KAAKC,IAAI,EAAA;oBAACF,GAAK,EAAA,CAAA;8BACbX,kBAAmBc,CAAAA,GAAG,CAAC,CAAC,CAACC,KAAKC,WAAY,CAAA,iBACzClB,GAACc,CAAAA,IAAAA,CAAKK,IAAI,EAAA;4BAAWC,GAAK,EAAA,CAAA;4BAAGT,SAAU,EAAA,QAAA;4BAASC,UAAW,EAAA,SAAA;AACzD,4BAAA,QAAA,gBAAAZ,GAACqB,CAAAA,iBAAAA,EAAAA;gCAA4BC,cAAgBL,EAAAA,GAAAA;gCAAKC,WAAaA,EAAAA;AAAvCD,6BAAAA,EAAAA,GAAAA;AADVA,yBAAAA,EAAAA,GAAAA,CAAAA;;8BAKpBjB,GAACuB,CAAAA,IAAAA,EAAAA;oBACCC,IAAK,EAAA,6EAAA;oBACLC,UAAU,EAAA,IAAA;8BAETpC,aAAc,CAAA;AACbqC,wBAAAA,EAAAA,EAAIC,OAAQ,CAAA,iCAAA,CAAA;wBACZC,cAAgB,EAAA;AAClB,qBAAA;;;;;AAKV;;;;"}