@strapi/content-type-builder 5.12.0 → 5.12.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"DisplayedType.mjs","sources":["../../../admin/src/components/DisplayedType.tsx"],"sourcesContent":["import { Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../utils/getTrad';\n\ntype DisplayedTypeProps = {\n  type: string;\n  customField?: string | null;\n  repeatable?: boolean;\n};\n\nexport const DisplayedType = ({\n  type,\n  customField = null,\n  repeatable = false,\n}: DisplayedTypeProps) => {\n  const { formatMessage } = useIntl();\n\n  let readableType = type;\n\n  if (['integer', 'biginteger', 'float', 'decimal'].includes(type)) {\n    readableType = 'number';\n  } else if (['string'].includes(type)) {\n    readableType = 'text';\n  }\n\n  if (customField) {\n    return (\n      <Typography>\n        {formatMessage({\n          id: getTrad('attribute.customField'),\n          defaultMessage: 'Custom field',\n        })}\n      </Typography>\n    );\n  }\n\n  return (\n    <Typography textColor=\"neutral800\">\n      {formatMessage({\n        id: getTrad(`attribute.${readableType}`),\n        defaultMessage: type,\n      })}\n      &nbsp;\n      {repeatable &&\n        formatMessage({\n          id: getTrad('component.repeatable'),\n          defaultMessage: '(repeatable)',\n        })}\n    </Typography>\n  );\n};\n"],"names":["DisplayedType","type","customField","repeatable","formatMessage","useIntl","readableType","includes","_jsx","Typography","id","getTrad","defaultMessage","_jsxs","textColor"],"mappings":";;;;;AAWO,MAAMA,aAAgB,GAAA,CAAC,EAC5BC,IAAI,EACJC,WAAAA,GAAc,IAAI,EAClBC,UAAa,GAAA,KAAK,EACC,GAAA;IACnB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,IAAIC,YAAeL,GAAAA,IAAAA;IAEnB,IAAI;AAAC,QAAA,SAAA;AAAW,QAAA,YAAA;AAAc,QAAA,OAAA;AAAS,QAAA;KAAU,CAACM,QAAQ,CAACN,IAAO,CAAA,EAAA;QAChEK,YAAe,GAAA,QAAA;AACjB,KAAA,MAAO,IAAI;AAAC,QAAA;KAAS,CAACC,QAAQ,CAACN,IAAO,CAAA,EAAA;QACpCK,YAAe,GAAA,MAAA;AACjB;AAEA,IAAA,IAAIJ,WAAa,EAAA;AACf,QAAA,qBACEM,GAACC,CAAAA,UAAAA,EAAAA;sBACEL,aAAc,CAAA;AACbM,gBAAAA,EAAAA,EAAIC,OAAQ,CAAA,uBAAA,CAAA;gBACZC,cAAgB,EAAA;AAClB,aAAA;;AAGN;AAEA,IAAA,qBACEC,IAACJ,CAAAA,UAAAA,EAAAA;QAAWK,SAAU,EAAA,YAAA;;YACnBV,aAAc,CAAA;AACbM,gBAAAA,EAAAA,EAAIC,OAAQ,CAAA,CAAC,UAAU,EAAEL,aAAa,CAAC,CAAA;gBACvCM,cAAgBX,EAAAA;AAClB,aAAA,CAAA;AAAG,YAAA,GAAA;AAEFE,YAAAA,UAAAA,IACCC,aAAc,CAAA;AACZM,gBAAAA,EAAAA,EAAIC,OAAQ,CAAA,sBAAA,CAAA;gBACZC,cAAgB,EAAA;AAClB,aAAA;;;AAGR;;;;"}

package/dist/admin/components/DraftAndPublishToggle.js

@@ -0,0 +1,86 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var getTrad = require('../utils/getTrad.js');
+
+const DraftAndPublishToggle = ({ description, disabled = false, intlLabel, isCreating, name, onChange, value = false })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const [showWarning, setShowWarning] = React.useState(false);
+    const label = intlLabel.id ? formatMessage({
+        id: intlLabel.id,
+        defaultMessage: intlLabel.defaultMessage
+    }, {
+        ...intlLabel.values
+    }) : name;
+    const hint = description ? formatMessage({
+        id: description.id,
+        defaultMessage: description.defaultMessage
+    }, {
+        ...description.values
+    }) : '';
+    const handleConfirm = ()=>{
+        onChange({
+            target: {
+                name,
+                value: false
+            }
+        });
+        setShowWarning(false);
+    };
+    const handleChange = (checked)=>{
+        if (!checked && !isCreating) {
+            setShowWarning(true);
+            return;
+        }
+        onChange({
+            target: {
+                name,
+                value: !!checked
+            }
+        });
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
+                hint: hint,
+                name: name,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Checkbox, {
+                        checked: value,
+                        disabled: disabled,
+                        onCheckedChange: handleChange,
+                        children: label
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Hint, {})
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Root, {
+                open: showWarning,
+                onOpenChange: (isOpen)=>setShowWarning(isOpen),
+                children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, {
+                    endAction: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                        onClick: handleConfirm,
+                        variant: "danger",
+                        width: "100%",
+                        justifyContent: "center",
+                        children: formatMessage({
+                            id: getTrad.getTrad('popUpWarning.draft-publish.button.confirm'),
+                            defaultMessage: 'Yes, disable'
+                        })
+                    }),
+                    children: formatMessage({
+                        id: getTrad.getTrad('popUpWarning.draft-publish.message'),
+                        defaultMessage: 'If you disable the draft & publish, your drafts will be deleted.'
+                    })
+                })
+            })
+        ]
+    });
+};
+
+exports.DraftAndPublishToggle = DraftAndPublishToggle;
+//# sourceMappingURL=DraftAndPublishToggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DraftAndPublishToggle.js","sources":["../../../admin/src/components/DraftAndPublishToggle.tsx"],"sourcesContent":["/**\n *\n * DraftAndPublishToggle\n *\n */\n\nimport { useState } from 'react';\n\nimport { ConfirmDialog } from '@strapi/admin/strapi-admin';\nimport { Button, Checkbox, CheckboxProps, Dialog, Field } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../utils';\n\nimport type { IntlLabel } from '../types';\n\ninterface Description {\n  id: string;\n  defaultMessage: string;\n  values?: Record<string, any>;\n}\n\ninterface DraftAndPublishToggleProps {\n  description?: Description;\n  disabled?: boolean;\n  intlLabel: IntlLabel;\n  isCreating: boolean;\n  name: string;\n  onChange: (value: { target: { name: string; value: boolean } }) => void;\n  value?: boolean;\n}\n\nexport const DraftAndPublishToggle = ({\n  description,\n  disabled = false,\n  intlLabel,\n  isCreating,\n  name,\n  onChange,\n  value = false,\n}: DraftAndPublishToggleProps) => {\n  const { formatMessage } = useIntl();\n  const [showWarning, setShowWarning] = useState(false);\n  const label = intlLabel.id\n    ? formatMessage(\n        { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },\n        { ...intlLabel.values }\n      )\n    : name;\n\n  const hint = description\n    ? formatMessage(\n        { id: description.id, defaultMessage: description.defaultMessage },\n        { ...description.values }\n      )\n    : '';\n\n  const handleConfirm = () => {\n    onChange({ target: { name, value: false } });\n\n    setShowWarning(false);\n  };\n\n  const handleChange: CheckboxProps['onCheckedChange'] = (checked) => {\n    if (!checked && !isCreating) {\n      setShowWarning(true);\n\n      return;\n    }\n\n    onChange({ target: { name, value: !!checked } });\n  };\n\n  return (\n    <>\n      <Field.Root hint={hint} name={name}>\n        <Checkbox checked={value} disabled={disabled} onCheckedChange={handleChange}>\n          {label}\n        </Checkbox>\n        <Field.Hint />\n      </Field.Root>\n\n      <Dialog.Root open={showWarning} onOpenChange={(isOpen) => setShowWarning(isOpen)}>\n        <ConfirmDialog\n          endAction={\n            <Button onClick={handleConfirm} variant=\"danger\" width=\"100%\" justifyContent=\"center\">\n              {formatMessage({\n                id: getTrad('popUpWarning.draft-publish.button.confirm'),\n                defaultMessage: 'Yes, disable',\n              })}\n            </Button>\n          }\n        >\n          {formatMessage({\n            id: getTrad('popUpWarning.draft-publish.message'),\n            defaultMessage: 'If you disable the draft & publish, your drafts will be deleted.',\n          })}\n        </ConfirmDialog>\n      </Dialog.Root>\n    </>\n  );\n};\n"],"names":["DraftAndPublishToggle","description","disabled","intlLabel","isCreating","name","onChange","value","formatMessage","useIntl","showWarning","setShowWarning","useState","label","id","defaultMessage","values","hint","handleConfirm","target","handleChange","checked","_jsxs","_Fragment","Field","Root","_jsx","Checkbox","onCheckedChange","Hint","Dialog","open","onOpenChange","isOpen","ConfirmDialog","endAction","Button","onClick","variant","width","justifyContent","getTrad"],"mappings":";;;;;;;;;MAgCaA,qBAAwB,GAAA,CAAC,EACpCC,WAAW,EACXC,WAAW,KAAK,EAChBC,SAAS,EACTC,UAAU,EACVC,IAAI,EACJC,QAAQ,EACRC,KAAAA,GAAQ,KAAK,EACc,GAAA;IAC3B,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,WAAAA,EAAaC,cAAe,CAAA,GAAGC,cAAS,CAAA,KAAA,CAAA;AAC/C,IAAA,MAAMC,KAAQV,GAAAA,SAAAA,CAAUW,EAAE,GACtBN,aACE,CAAA;AAAEM,QAAAA,EAAAA,EAAIX,UAAUW,EAAE;AAAEC,QAAAA,cAAAA,EAAgBZ,UAAUY;KAC9C,EAAA;AAAE,QAAA,GAAGZ,UAAUa;KAEjBX,CAAAA,GAAAA,IAAAA;IAEJ,MAAMY,IAAAA,GAAOhB,cACTO,aACE,CAAA;AAAEM,QAAAA,EAAAA,EAAIb,YAAYa,EAAE;AAAEC,QAAAA,cAAAA,EAAgBd,YAAYc;KAClD,EAAA;AAAE,QAAA,GAAGd,YAAYe;KAEnB,CAAA,GAAA,EAAA;AAEJ,IAAA,MAAME,aAAgB,GAAA,IAAA;QACpBZ,QAAS,CAAA;YAAEa,MAAQ,EAAA;AAAEd,gBAAAA,IAAAA;gBAAME,KAAO,EAAA;AAAM;AAAE,SAAA,CAAA;QAE1CI,cAAe,CAAA,KAAA,CAAA;AACjB,KAAA;AAEA,IAAA,MAAMS,eAAiD,CAACC,OAAAA,GAAAA;QACtD,IAAI,CAACA,OAAW,IAAA,CAACjB,UAAY,EAAA;YAC3BO,cAAe,CAAA,IAAA,CAAA;AAEf,YAAA;AACF;QAEAL,QAAS,CAAA;YAAEa,MAAQ,EAAA;AAAEd,gBAAAA,IAAAA;AAAME,gBAAAA,KAAAA,EAAO,CAAC,CAACc;AAAQ;AAAE,SAAA,CAAA;AAChD,KAAA;IAEA,qBACEC,eAAA,CAAAC,mBAAA,EAAA;;AACE,0BAAAD,eAAA,CAACE,mBAAMC,IAAI,EAAA;gBAACR,IAAMA,EAAAA,IAAAA;gBAAMZ,IAAMA,EAAAA,IAAAA;;kCAC5BqB,cAACC,CAAAA,qBAAAA,EAAAA;wBAASN,OAASd,EAAAA,KAAAA;wBAAOL,QAAUA,EAAAA,QAAAA;wBAAU0B,eAAiBR,EAAAA,YAAAA;AAC5DP,wBAAAA,QAAAA,EAAAA;;AAEH,kCAAAa,cAAA,CAACF,mBAAMK,IAAI,EAAA,EAAA;;;AAGb,0BAAAH,cAAA,CAACI,oBAAOL,IAAI,EAAA;gBAACM,IAAMrB,EAAAA,WAAAA;gBAAasB,YAAc,EAAA,CAACC,SAAWtB,cAAesB,CAAAA,MAAAA,CAAAA;AACvE,gBAAA,QAAA,gBAAAP,cAACQ,CAAAA,yBAAAA,EAAAA;AACCC,oBAAAA,SAAAA,gBACET,cAACU,CAAAA,mBAAAA,EAAAA;wBAAOC,OAASnB,EAAAA,aAAAA;wBAAeoB,OAAQ,EAAA,QAAA;wBAASC,KAAM,EAAA,MAAA;wBAAOC,cAAe,EAAA,QAAA;kCAC1EhC,aAAc,CAAA;AACbM,4BAAAA,EAAAA,EAAI2B,eAAQ,CAAA,2CAAA,CAAA;4BACZ1B,cAAgB,EAAA;AAClB,yBAAA;;8BAIHP,aAAc,CAAA;AACbM,wBAAAA,EAAAA,EAAI2B,eAAQ,CAAA,oCAAA,CAAA;wBACZ1B,cAAgB,EAAA;AAClB,qBAAA;;;;;AAKV;;;;"}

package/dist/admin/components/DraftAndPublishToggle.mjs

@@ -0,0 +1,84 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { ConfirmDialog } from '@strapi/admin/strapi-admin';
+import { Field, Checkbox, Dialog, Button } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../utils/getTrad.mjs';
+
+const DraftAndPublishToggle = ({ description, disabled = false, intlLabel, isCreating, name, onChange, value = false })=>{
+    const { formatMessage } = useIntl();
+    const [showWarning, setShowWarning] = useState(false);
+    const label = intlLabel.id ? formatMessage({
+        id: intlLabel.id,
+        defaultMessage: intlLabel.defaultMessage
+    }, {
+        ...intlLabel.values
+    }) : name;
+    const hint = description ? formatMessage({
+        id: description.id,
+        defaultMessage: description.defaultMessage
+    }, {
+        ...description.values
+    }) : '';
+    const handleConfirm = ()=>{
+        onChange({
+            target: {
+                name,
+                value: false
+            }
+        });
+        setShowWarning(false);
+    };
+    const handleChange = (checked)=>{
+        if (!checked && !isCreating) {
+            setShowWarning(true);
+            return;
+        }
+        onChange({
+            target: {
+                name,
+                value: !!checked
+            }
+        });
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(Field.Root, {
+                hint: hint,
+                name: name,
+                children: [
+                    /*#__PURE__*/ jsx(Checkbox, {
+                        checked: value,
+                        disabled: disabled,
+                        onCheckedChange: handleChange,
+                        children: label
+                    }),
+                    /*#__PURE__*/ jsx(Field.Hint, {})
+                ]
+            }),
+            /*#__PURE__*/ jsx(Dialog.Root, {
+                open: showWarning,
+                onOpenChange: (isOpen)=>setShowWarning(isOpen),
+                children: /*#__PURE__*/ jsx(ConfirmDialog, {
+                    endAction: /*#__PURE__*/ jsx(Button, {
+                        onClick: handleConfirm,
+                        variant: "danger",
+                        width: "100%",
+                        justifyContent: "center",
+                        children: formatMessage({
+                            id: getTrad('popUpWarning.draft-publish.button.confirm'),
+                            defaultMessage: 'Yes, disable'
+                        })
+                    }),
+                    children: formatMessage({
+                        id: getTrad('popUpWarning.draft-publish.message'),
+                        defaultMessage: 'If you disable the draft & publish, your drafts will be deleted.'
+                    })
+                })
+            })
+        ]
+    });
+};
+
+export { DraftAndPublishToggle };
+//# sourceMappingURL=DraftAndPublishToggle.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DraftAndPublishToggle.mjs","sources":["../../../admin/src/components/DraftAndPublishToggle.tsx"],"sourcesContent":["/**\n *\n * DraftAndPublishToggle\n *\n */\n\nimport { useState } from 'react';\n\nimport { ConfirmDialog } from '@strapi/admin/strapi-admin';\nimport { Button, Checkbox, CheckboxProps, Dialog, Field } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../utils';\n\nimport type { IntlLabel } from '../types';\n\ninterface Description {\n  id: string;\n  defaultMessage: string;\n  values?: Record<string, any>;\n}\n\ninterface DraftAndPublishToggleProps {\n  description?: Description;\n  disabled?: boolean;\n  intlLabel: IntlLabel;\n  isCreating: boolean;\n  name: string;\n  onChange: (value: { target: { name: string; value: boolean } }) => void;\n  value?: boolean;\n}\n\nexport const DraftAndPublishToggle = ({\n  description,\n  disabled = false,\n  intlLabel,\n  isCreating,\n  name,\n  onChange,\n  value = false,\n}: DraftAndPublishToggleProps) => {\n  const { formatMessage } = useIntl();\n  const [showWarning, setShowWarning] = useState(false);\n  const label = intlLabel.id\n    ? formatMessage(\n        { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },\n        { ...intlLabel.values }\n      )\n    : name;\n\n  const hint = description\n    ? formatMessage(\n        { id: description.id, defaultMessage: description.defaultMessage },\n        { ...description.values }\n      )\n    : '';\n\n  const handleConfirm = () => {\n    onChange({ target: { name, value: false } });\n\n    setShowWarning(false);\n  };\n\n  const handleChange: CheckboxProps['onCheckedChange'] = (checked) => {\n    if (!checked && !isCreating) {\n      setShowWarning(true);\n\n      return;\n    }\n\n    onChange({ target: { name, value: !!checked } });\n  };\n\n  return (\n    <>\n      <Field.Root hint={hint} name={name}>\n        <Checkbox checked={value} disabled={disabled} onCheckedChange={handleChange}>\n          {label}\n        </Checkbox>\n        <Field.Hint />\n      </Field.Root>\n\n      <Dialog.Root open={showWarning} onOpenChange={(isOpen) => setShowWarning(isOpen)}>\n        <ConfirmDialog\n          endAction={\n            <Button onClick={handleConfirm} variant=\"danger\" width=\"100%\" justifyContent=\"center\">\n              {formatMessage({\n                id: getTrad('popUpWarning.draft-publish.button.confirm'),\n                defaultMessage: 'Yes, disable',\n              })}\n            </Button>\n          }\n        >\n          {formatMessage({\n            id: getTrad('popUpWarning.draft-publish.message'),\n            defaultMessage: 'If you disable the draft & publish, your drafts will be deleted.',\n          })}\n        </ConfirmDialog>\n      </Dialog.Root>\n    </>\n  );\n};\n"],"names":["DraftAndPublishToggle","description","disabled","intlLabel","isCreating","name","onChange","value","formatMessage","useIntl","showWarning","setShowWarning","useState","label","id","defaultMessage","values","hint","handleConfirm","target","handleChange","checked","_jsxs","_Fragment","Field","Root","_jsx","Checkbox","onCheckedChange","Hint","Dialog","open","onOpenChange","isOpen","ConfirmDialog","endAction","Button","onClick","variant","width","justifyContent","getTrad"],"mappings":";;;;;;;MAgCaA,qBAAwB,GAAA,CAAC,EACpCC,WAAW,EACXC,WAAW,KAAK,EAChBC,SAAS,EACTC,UAAU,EACVC,IAAI,EACJC,QAAQ,EACRC,KAAAA,GAAQ,KAAK,EACc,GAAA;IAC3B,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,WAAAA,EAAaC,cAAe,CAAA,GAAGC,QAAS,CAAA,KAAA,CAAA;AAC/C,IAAA,MAAMC,KAAQV,GAAAA,SAAAA,CAAUW,EAAE,GACtBN,aACE,CAAA;AAAEM,QAAAA,EAAAA,EAAIX,UAAUW,EAAE;AAAEC,QAAAA,cAAAA,EAAgBZ,UAAUY;KAC9C,EAAA;AAAE,QAAA,GAAGZ,UAAUa;KAEjBX,CAAAA,GAAAA,IAAAA;IAEJ,MAAMY,IAAAA,GAAOhB,cACTO,aACE,CAAA;AAAEM,QAAAA,EAAAA,EAAIb,YAAYa,EAAE;AAAEC,QAAAA,cAAAA,EAAgBd,YAAYc;KAClD,EAAA;AAAE,QAAA,GAAGd,YAAYe;KAEnB,CAAA,GAAA,EAAA;AAEJ,IAAA,MAAME,aAAgB,GAAA,IAAA;QACpBZ,QAAS,CAAA;YAAEa,MAAQ,EAAA;AAAEd,gBAAAA,IAAAA;gBAAME,KAAO,EAAA;AAAM;AAAE,SAAA,CAAA;QAE1CI,cAAe,CAAA,KAAA,CAAA;AACjB,KAAA;AAEA,IAAA,MAAMS,eAAiD,CAACC,OAAAA,GAAAA;QACtD,IAAI,CAACA,OAAW,IAAA,CAACjB,UAAY,EAAA;YAC3BO,cAAe,CAAA,IAAA,CAAA;AAEf,YAAA;AACF;QAEAL,QAAS,CAAA;YAAEa,MAAQ,EAAA;AAAEd,gBAAAA,IAAAA;AAAME,gBAAAA,KAAAA,EAAO,CAAC,CAACc;AAAQ;AAAE,SAAA,CAAA;AAChD,KAAA;IAEA,qBACEC,IAAA,CAAAC,QAAA,EAAA;;AACE,0BAAAD,IAAA,CAACE,MAAMC,IAAI,EAAA;gBAACR,IAAMA,EAAAA,IAAAA;gBAAMZ,IAAMA,EAAAA,IAAAA;;kCAC5BqB,GAACC,CAAAA,QAAAA,EAAAA;wBAASN,OAASd,EAAAA,KAAAA;wBAAOL,QAAUA,EAAAA,QAAAA;wBAAU0B,eAAiBR,EAAAA,YAAAA;AAC5DP,wBAAAA,QAAAA,EAAAA;;AAEH,kCAAAa,GAAA,CAACF,MAAMK,IAAI,EAAA,EAAA;;;AAGb,0BAAAH,GAAA,CAACI,OAAOL,IAAI,EAAA;gBAACM,IAAMrB,EAAAA,WAAAA;gBAAasB,YAAc,EAAA,CAACC,SAAWtB,cAAesB,CAAAA,MAAAA,CAAAA;AACvE,gBAAA,QAAA,gBAAAP,GAACQ,CAAAA,aAAAA,EAAAA;AACCC,oBAAAA,SAAAA,gBACET,GAACU,CAAAA,MAAAA,EAAAA;wBAAOC,OAASnB,EAAAA,aAAAA;wBAAeoB,OAAQ,EAAA,QAAA;wBAASC,KAAM,EAAA,MAAA;wBAAOC,cAAe,EAAA,QAAA;kCAC1EhC,aAAc,CAAA;AACbM,4BAAAA,EAAAA,EAAI2B,OAAQ,CAAA,2CAAA,CAAA;4BACZ1B,cAAgB,EAAA;AAClB,yBAAA;;8BAIHP,aAAc,CAAA;AACbM,wBAAAA,EAAAA,EAAI2B,OAAQ,CAAA,oCAAA,CAAA;wBACZ1B,cAAgB,EAAA;AAClB,qBAAA;;;;;AAKV;;;;"}

package/dist/admin/components/DynamicZoneList.js

@@ -0,0 +1,139 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var Icons = require('@strapi/icons');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var useDataManager = require('../hooks/useDataManager.js');
+var getTrad = require('../utils/getTrad.js');
+var ComponentCard = require('./ComponentCard/ComponentCard.js');
+var ComponentList = require('./ComponentList.js');
+var Tr = require('./Tr.js');
+
+const StyledAddIcon = styledComponents.styled(Icons.Plus)`
+  width: 3.2rem;
+  height: 3.2rem;
+  padding: 0.9rem;
+  border-radius: 6.4rem;
+  background: ${({ theme })=>theme.colors.primary100};
+  path {
+    fill: ${({ theme })=>theme.colors.primary600};
+  }
+`;
+const FixedBox = styledComponents.styled(designSystem.Box)`
+  height: 9rem;
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+`;
+const ScrollableStack = styledComponents.styled(designSystem.Flex)`
+  width: 100%;
+  overflow-x: auto;
+`;
+const ComponentContentBox = styledComponents.styled(designSystem.Box)`
+  padding-top: 9rem;
+`;
+const ComponentStack = styledComponents.styled(designSystem.Flex)`
+  flex-shrink: 0;
+  width: 14rem;
+  height: 8rem;
+  justify-content: center;
+  align-items: center;
+`;
+const DynamicZoneList = ({ customRowComponent, components = [], addComponent, name, targetUid })=>{
+    const { isInDevelopmentMode } = useDataManager.useDataManager();
+    const [activeTab, setActiveTab] = React.useState(0);
+    const { formatMessage } = reactIntl.useIntl();
+    const toggle = (tab)=>{
+        if (activeTab !== tab) {
+            setActiveTab(tab);
+        }
+    };
+    const handleClickAdd = ()=>{
+        addComponent(name);
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(Tr.Tr, {
+        className: "dynamiczone-row",
+        $isFromDynamicZone: true,
+        children: /*#__PURE__*/ jsxRuntime.jsxs("td", {
+            colSpan: 12,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(FixedBox, {
+                    paddingLeft: 8,
+                    children: /*#__PURE__*/ jsxRuntime.jsxs(ScrollableStack, {
+                        gap: 2,
+                        children: [
+                            isInDevelopmentMode && /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                type: "button",
+                                onClick: handleClickAdd,
+                                children: /*#__PURE__*/ jsxRuntime.jsxs(ComponentStack, {
+                                    direction: "column",
+                                    alignItems: "stretch",
+                                    gap: 1,
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(StyledAddIcon, {}),
+                                        /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                                            variant: "pi",
+                                            fontWeight: "bold",
+                                            textColor: "primary600",
+                                            children: formatMessage({
+                                                id: getTrad.getTrad('button.component.add'),
+                                                defaultMessage: 'Add a component'
+                                            })
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                                role: "tablist",
+                                gap: 2,
+                                children: components.map((component, index)=>{
+                                    return /*#__PURE__*/ jsxRuntime.jsx(ComponentCard.ComponentCard, {
+                                        dzName: name || '',
+                                        index: index,
+                                        component: component,
+                                        isActive: activeTab === index,
+                                        isInDevelopmentMode: isInDevelopmentMode,
+                                        onClick: ()=>toggle(index)
+                                    }, component);
+                                })
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(ComponentContentBox, {
+                    children: components.map((component, index)=>{
+                        const props = {
+                            customRowComponent,
+                            component
+                        };
+                        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
+                            id: `dz-${name}-panel-${index}`,
+                            role: "tabpanel",
+                            "aria-labelledby": `dz-${name}-tab-${index}`,
+                            style: {
+                                display: activeTab === index ? 'block' : 'none'
+                            },
+                            children: /*#__PURE__*/ jsxRuntime.jsx("table", {
+                                children: /*#__PURE__*/ jsxRuntime.jsx("tbody", {
+                                    children: /*#__PURE__*/ React.createElement(ComponentList.ComponentList, {
+                                        ...props,
+                                        isFromDynamicZone: true,
+                                        component: targetUid,
+                                        key: component
+                                    })
+                                })
+                            })
+                        }, component);
+                    })
+                })
+            ]
+        })
+    });
+};
+
+exports.DynamicZoneList = DynamicZoneList;
+//# sourceMappingURL=DynamicZoneList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicZoneList.js","sources":["../../../admin/src/components/DynamicZoneList.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { Plus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useDataManager } from '../hooks/useDataManager';\nimport { getTrad } from '../utils/getTrad';\n\nimport { ComponentCard } from './ComponentCard';\nimport { ComponentList } from './ComponentList';\nimport { Tr } from './Tr';\n\nimport type { Internal } from '@strapi/types';\n\ninterface DynamicZoneListProps {\n  addComponent: (name?: string) => void;\n  components: Array<string>;\n  customRowComponent?: () => void;\n  name?: string;\n  targetUid: Internal.UID.Component;\n}\n\nconst StyledAddIcon = styled(Plus)`\n  width: 3.2rem;\n  height: 3.2rem;\n  padding: 0.9rem;\n  border-radius: 6.4rem;\n  background: ${({ theme }) => theme.colors.primary100};\n  path {\n    fill: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nconst FixedBox = styled(Box)`\n  height: 9rem;\n  position: absolute;\n  width: 100%;\n  top: 0;\n  left: 0;\n`;\n\nconst ScrollableStack = styled(Flex)`\n  width: 100%;\n  overflow-x: auto;\n`;\n\nconst ComponentContentBox = styled(Box)`\n  padding-top: 9rem;\n`;\n\nconst ComponentStack = styled(Flex)`\n  flex-shrink: 0;\n  width: 14rem;\n  height: 8rem;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const DynamicZoneList = ({\n  customRowComponent,\n  components = [],\n  addComponent,\n  name,\n  targetUid,\n}: DynamicZoneListProps) => {\n  const { isInDevelopmentMode } = useDataManager();\n  const [activeTab, setActiveTab] = useState(0);\n  const { formatMessage } = useIntl();\n\n  const toggle = (tab: number) => {\n    if (activeTab !== tab) {\n      setActiveTab(tab);\n    }\n  };\n\n  const handleClickAdd = () => {\n    addComponent(name);\n  };\n\n  return (\n    <Tr className=\"dynamiczone-row\" $isFromDynamicZone>\n      <td colSpan={12}>\n        <FixedBox paddingLeft={8}>\n          <ScrollableStack gap={2}>\n            {isInDevelopmentMode && (\n              <button type=\"button\" onClick={handleClickAdd}>\n                <ComponentStack direction=\"column\" alignItems=\"stretch\" gap={1}>\n                  <StyledAddIcon />\n                  <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"primary600\">\n                    {formatMessage({\n                      id: getTrad('button.component.add'),\n                      defaultMessage: 'Add a component',\n                    })}\n                  </Typography>\n                </ComponentStack>\n              </button>\n            )}\n            <Flex role=\"tablist\" gap={2}>\n              {components.map((component, index) => {\n                return (\n                  <ComponentCard\n                    key={component}\n                    dzName={name || ''}\n                    index={index}\n                    component={component}\n                    isActive={activeTab === index}\n                    isInDevelopmentMode={isInDevelopmentMode}\n                    onClick={() => toggle(index)}\n                  />\n                );\n              })}\n            </Flex>\n          </ScrollableStack>\n        </FixedBox>\n        <ComponentContentBox>\n          {components.map((component, index) => {\n            const props = {\n              customRowComponent,\n              component,\n            };\n\n            return (\n              <Box\n                id={`dz-${name}-panel-${index}`}\n                role=\"tabpanel\"\n                aria-labelledby={`dz-${name}-tab-${index}`}\n                key={component}\n                style={{ display: activeTab === index ? 'block' : 'none' }}\n              >\n                <table>\n                  <tbody>\n                    <ComponentList\n                      {...props}\n                      isFromDynamicZone\n                      component={targetUid}\n                      key={component}\n                    />\n                  </tbody>\n                </table>\n              </Box>\n            );\n          })}\n        </ComponentContentBox>\n      </td>\n    </Tr>\n  );\n};\n"],"names":["StyledAddIcon","styled","Plus","theme","colors","primary100","primary600","FixedBox","Box","ScrollableStack","Flex","ComponentContentBox","ComponentStack","DynamicZoneList","customRowComponent","components","addComponent","name","targetUid","isInDevelopmentMode","useDataManager","activeTab","setActiveTab","useState","formatMessage","useIntl","toggle","tab","handleClickAdd","_jsx","Tr","className","$isFromDynamicZone","_jsxs","td","colSpan","paddingLeft","gap","button","type","onClick","direction","alignItems","Typography","variant","fontWeight","textColor","id","getTrad","defaultMessage","role","map","component","index","ComponentCard","dzName","isActive","props","aria-labelledby","style","display","table","tbody","_createElement","ComponentList","isFromDynamicZone","key"],"mappings":"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"}

package/dist/admin/components/DynamicZoneList.mjs

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, createElement } from 'react';
+import { Box, Flex, Typography } from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { useDataManager } from '../hooks/useDataManager.mjs';
+import { getTrad } from '../utils/getTrad.mjs';
+import { ComponentCard } from './ComponentCard/ComponentCard.mjs';
+import { ComponentList } from './ComponentList.mjs';
+import { Tr } from './Tr.mjs';
+
+const StyledAddIcon = styled(Plus)`
+  width: 3.2rem;
+  height: 3.2rem;
+  padding: 0.9rem;
+  border-radius: 6.4rem;
+  background: ${({ theme })=>theme.colors.primary100};
+  path {
+    fill: ${({ theme })=>theme.colors.primary600};
+  }
+`;
+const FixedBox = styled(Box)`
+  height: 9rem;
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+`;
+const ScrollableStack = styled(Flex)`
+  width: 100%;
+  overflow-x: auto;
+`;
+const ComponentContentBox = styled(Box)`
+  padding-top: 9rem;
+`;
+const ComponentStack = styled(Flex)`
+  flex-shrink: 0;
+  width: 14rem;
+  height: 8rem;
+  justify-content: center;
+  align-items: center;
+`;
+const DynamicZoneList = ({ customRowComponent, components = [], addComponent, name, targetUid })=>{
+    const { isInDevelopmentMode } = useDataManager();
+    const [activeTab, setActiveTab] = useState(0);
+    const { formatMessage } = useIntl();
+    const toggle = (tab)=>{
+        if (activeTab !== tab) {
+            setActiveTab(tab);
+        }
+    };
+    const handleClickAdd = ()=>{
+        addComponent(name);
+    };
+    return /*#__PURE__*/ jsx(Tr, {
+        className: "dynamiczone-row",
+        $isFromDynamicZone: true,
+        children: /*#__PURE__*/ jsxs("td", {
+            colSpan: 12,
+            children: [
+                /*#__PURE__*/ jsx(FixedBox, {
+                    paddingLeft: 8,
+                    children: /*#__PURE__*/ jsxs(ScrollableStack, {
+                        gap: 2,
+                        children: [
+                            isInDevelopmentMode && /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                onClick: handleClickAdd,
+                                children: /*#__PURE__*/ jsxs(ComponentStack, {
+                                    direction: "column",
+                                    alignItems: "stretch",
+                                    gap: 1,
+                                    children: [
+                                        /*#__PURE__*/ jsx(StyledAddIcon, {}),
+                                        /*#__PURE__*/ jsx(Typography, {
+                                            variant: "pi",
+                                            fontWeight: "bold",
+                                            textColor: "primary600",
+                                            children: formatMessage({
+                                                id: getTrad('button.component.add'),
+                                                defaultMessage: 'Add a component'
+                                            })
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Flex, {
+                                role: "tablist",
+                                gap: 2,
+                                children: components.map((component, index)=>{
+                                    return /*#__PURE__*/ jsx(ComponentCard, {
+                                        dzName: name || '',
+                                        index: index,
+                                        component: component,
+                                        isActive: activeTab === index,
+                                        isInDevelopmentMode: isInDevelopmentMode,
+                                        onClick: ()=>toggle(index)
+                                    }, component);
+                                })
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsx(ComponentContentBox, {
+                    children: components.map((component, index)=>{
+                        const props = {
+                            customRowComponent,
+                            component
+                        };
+                        return /*#__PURE__*/ jsx(Box, {
+                            id: `dz-${name}-panel-${index}`,
+                            role: "tabpanel",
+                            "aria-labelledby": `dz-${name}-tab-${index}`,
+                            style: {
+                                display: activeTab === index ? 'block' : 'none'
+                            },
+                            children: /*#__PURE__*/ jsx("table", {
+                                children: /*#__PURE__*/ jsx("tbody", {
+                                    children: /*#__PURE__*/ createElement(ComponentList, {
+                                        ...props,
+                                        isFromDynamicZone: true,
+                                        component: targetUid,
+                                        key: component
+                                    })
+                                })
+                            })
+                        }, component);
+                    })
+                })
+            ]
+        })
+    });
+};
+
+export { DynamicZoneList };
+//# sourceMappingURL=DynamicZoneList.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicZoneList.mjs","sources":["../../../admin/src/components/DynamicZoneList.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { Plus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { useDataManager } from '../hooks/useDataManager';\nimport { getTrad } from '../utils/getTrad';\n\nimport { ComponentCard } from './ComponentCard';\nimport { ComponentList } from './ComponentList';\nimport { Tr } from './Tr';\n\nimport type { Internal } from '@strapi/types';\n\ninterface DynamicZoneListProps {\n  addComponent: (name?: string) => void;\n  components: Array<string>;\n  customRowComponent?: () => void;\n  name?: string;\n  targetUid: Internal.UID.Component;\n}\n\nconst StyledAddIcon = styled(Plus)`\n  width: 3.2rem;\n  height: 3.2rem;\n  padding: 0.9rem;\n  border-radius: 6.4rem;\n  background: ${({ theme }) => theme.colors.primary100};\n  path {\n    fill: ${({ theme }) => theme.colors.primary600};\n  }\n`;\n\nconst FixedBox = styled(Box)`\n  height: 9rem;\n  position: absolute;\n  width: 100%;\n  top: 0;\n  left: 0;\n`;\n\nconst ScrollableStack = styled(Flex)`\n  width: 100%;\n  overflow-x: auto;\n`;\n\nconst ComponentContentBox = styled(Box)`\n  padding-top: 9rem;\n`;\n\nconst ComponentStack = styled(Flex)`\n  flex-shrink: 0;\n  width: 14rem;\n  height: 8rem;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const DynamicZoneList = ({\n  customRowComponent,\n  components = [],\n  addComponent,\n  name,\n  targetUid,\n}: DynamicZoneListProps) => {\n  const { isInDevelopmentMode } = useDataManager();\n  const [activeTab, setActiveTab] = useState(0);\n  const { formatMessage } = useIntl();\n\n  const toggle = (tab: number) => {\n    if (activeTab !== tab) {\n      setActiveTab(tab);\n    }\n  };\n\n  const handleClickAdd = () => {\n    addComponent(name);\n  };\n\n  return (\n    <Tr className=\"dynamiczone-row\" $isFromDynamicZone>\n      <td colSpan={12}>\n        <FixedBox paddingLeft={8}>\n          <ScrollableStack gap={2}>\n            {isInDevelopmentMode && (\n              <button type=\"button\" onClick={handleClickAdd}>\n                <ComponentStack direction=\"column\" alignItems=\"stretch\" gap={1}>\n                  <StyledAddIcon />\n                  <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"primary600\">\n                    {formatMessage({\n                      id: getTrad('button.component.add'),\n                      defaultMessage: 'Add a component',\n                    })}\n                  </Typography>\n                </ComponentStack>\n              </button>\n            )}\n            <Flex role=\"tablist\" gap={2}>\n              {components.map((component, index) => {\n                return (\n                  <ComponentCard\n                    key={component}\n                    dzName={name || ''}\n                    index={index}\n                    component={component}\n                    isActive={activeTab === index}\n                    isInDevelopmentMode={isInDevelopmentMode}\n                    onClick={() => toggle(index)}\n                  />\n                );\n              })}\n            </Flex>\n          </ScrollableStack>\n        </FixedBox>\n        <ComponentContentBox>\n          {components.map((component, index) => {\n            const props = {\n              customRowComponent,\n              component,\n            };\n\n            return (\n              <Box\n                id={`dz-${name}-panel-${index}`}\n                role=\"tabpanel\"\n                aria-labelledby={`dz-${name}-tab-${index}`}\n                key={component}\n                style={{ display: activeTab === index ? 'block' : 'none' }}\n              >\n                <table>\n                  <tbody>\n                    <ComponentList\n                      {...props}\n                      isFromDynamicZone\n                      component={targetUid}\n                      key={component}\n                    />\n                  </tbody>\n                </table>\n              </Box>\n            );\n          })}\n        </ComponentContentBox>\n      </td>\n    </Tr>\n  );\n};\n"],"names":["StyledAddIcon","styled","Plus","theme","colors","primary100","primary600","FixedBox","Box","ScrollableStack","Flex","ComponentContentBox","ComponentStack","DynamicZoneList","customRowComponent","components","addComponent","name","targetUid","isInDevelopmentMode","useDataManager","activeTab","setActiveTab","useState","formatMessage","useIntl","toggle","tab","handleClickAdd","_jsx","Tr","className","$isFromDynamicZone","_jsxs","td","colSpan","paddingLeft","gap","button","type","onClick","direction","alignItems","Typography","variant","fontWeight","textColor","id","getTrad","defaultMessage","role","map","component","index","ComponentCard","dzName","isActive","props","aria-labelledby","style","display","table","tbody","_createElement","ComponentList","isFromDynamicZone","key"],"mappings":"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"}