@webiny/app-headless-cms 6.3.0 → 6.4.0-beta.0

package/admin/plugins/fieldRenderers/number/numberInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","get","i18n","DelayedOnChange","Input","useFieldEffectiveRules","useModelField","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","list","render","getBind","rules","disabled","canEdit","Bind","createElement","bind","ValidationContainer","value","onChange","onBlur","validate","label","placeholder","note","hint","help","validation"],"sources":["numberInput.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { DelayedOnChange, Input } from \"@webiny/admin-ui\";\nimport { useFieldEffectiveRules, useModelField } from \"@webiny/app-headless-cms-common\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/number\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-number\",\n    renderer: {\n        rendererName: \"number-input\",\n        name: t`Number Input`,\n        description: t`Renders a simple input with its type set to \"number\".`,\n        canUse({ field }) {\n            return (\n                field.type === \"number\" && !field.list && !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render({ getBind }) {\n            const { field } = useModelField();\n            const rules = useFieldEffectiveRules(field);\n            const disabled = !rules.canEdit || rules.disabled;\n            const Bind = getBind();\n\n            return (\n                <Bind>\n                    {bind => (\n                        <Bind.ValidationContainer>\n                            <DelayedOnChange\n                                value={bind.value}\n                                onChange={bind.onChange}\n                                onBlur={bind.validate}\n                            >\n                                <Input\n                                    disabled={disabled}\n                                    label={field.label}\n                                    placeholder={field.placeholder}\n                                    description={field.description}\n                                    note={field.note}\n                                    hint={field.help}\n                                    type=\"number\"\n                                    data-testid={`fr.input.number.${field.label}`}\n                                    validation={bind.validation}\n                                />\n                            </DelayedOnChange>\n                        </Bind.ValidationContainer>\n                    )}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,MAAM,eAAe;AAE/B,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,eAAe,EAAEC,KAAK,QAAQ,kBAAkB;AACzD,SAASC,sBAAsB,EAAEC,aAAa,QAAQ,iCAAiC;AAEvF,MAAMC,CAAC,GAAGL,IAAI,CAACM,EAAE,CAAC,sCAAsC,CAAC;AAEzD,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,kCAAkC;EACxCC,QAAQ,EAAE;IACNC,YAAY,EAAE,cAAc;IAC5BF,IAAI,EAAEJ,CAAC,cAAc;IACrBO,WAAW,EAAEP,CAAC,uDAAuD;IACrEQ,MAAMA,CAAC;MAAEC;IAAM,CAAC,EAAE;MACd,OACIA,KAAK,CAACN,IAAI,KAAK,QAAQ,IAAI,CAACM,KAAK,CAACC,IAAI,IAAI,CAAChB,GAAG,CAACe,KAAK,EAAE,0BAA0B,CAAC;IAEzF,CAAC;IACDE,MAAMA,CAAC;MAAEC;IAAQ,CAAC,EAAE;MAChB,MAAM;QAAEH;MAAM,CAAC,GAAGV,aAAa,CAAC,CAAC;MACjC,MAAMc,KAAK,GAAGf,sBAAsB,CAACW,KAAK,CAAC;MAC3C,MAAMK,QAAQ,GAAG,CAACD,KAAK,CAACE,OAAO,IAAIF,KAAK,CAACC,QAAQ;MACjD,MAAME,IAAI,GAAGJ,OAAO,CAAC,CAAC;MAEtB,oBACInB,KAAA,CAAAwB,aAAA,CAACD,IAAI,QACAE,IAAI,iBACDzB,KAAA,CAAAwB,aAAA,CAACD,IAAI,CAACG,mBAAmB,qBACrB1B,KAAA,CAAAwB,aAAA,CAACrB,eAAe;QACZwB,KAAK,EAAEF,IAAI,CAACE,KAAM;QAClBC,QAAQ,EAAEH,IAAI,CAACG,QAAS;QACxBC,MAAM,EAAEJ,IAAI,CAACK;MAAS,gBAEtB9B,KAAA,CAAAwB,aAAA,CAACpB,KAAK;QACFiB,QAAQ,EAAEA,QAAS;QACnBU,KAAK,EAAEf,KAAK,CAACe,KAAM;QACnBC,WAAW,EAAEhB,KAAK,CAACgB,WAAY;QAC/BlB,WAAW,EAAEE,KAAK,CAACF,WAAY;QAC/BmB,IAAI,EAAEjB,KAAK,CAACiB,IAAK;QACjBC,IAAI,EAAElB,KAAK,CAACmB,IAAK;QACjBzB,IAAI,EAAC,QAAQ;QACb,eAAa,mBAAmBM,KAAK,CAACe,KAAK,EAAG;QAC9CK,UAAU,EAAEX,IAAI,CAACW;MAAW,CAC/B,CACY,CACK,CAE5B,CAAC;IAEf;EACJ;AACJ,CAAC;AAED,eAAe3B,MAAM","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fieldRenderers/number/numberInput.js","sources":["../../../../../src/admin/plugins/fieldRenderers/number/numberInput.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { DelayedOnChange, Input } from \"@webiny/admin-ui\";\nimport { useFieldEffectiveRules, useModelField } from \"@webiny/app-headless-cms-common\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/number\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-number\",\n    renderer: {\n        rendererName: \"number-input\",\n        name: t`Number Input`,\n        description: t`Renders a simple input with its type set to \"number\".`,\n        canUse({ field }) {\n            return (\n                field.type === \"number\" && !field.list && !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render({ getBind }) {\n            const { field } = useModelField();\n            const rules = useFieldEffectiveRules(field);\n            const disabled = !rules.canEdit || rules.disabled;\n            const Bind = getBind();\n\n            return (\n                <Bind>\n                    {bind => (\n                        <Bind.ValidationContainer>\n                            <DelayedOnChange\n                                value={bind.value}\n                                onChange={bind.onChange}\n                                onBlur={bind.validate}\n                            >\n                                <Input\n                                    disabled={disabled}\n                                    label={field.label}\n                                    placeholder={field.placeholder}\n                                    description={field.description}\n                                    note={field.note}\n                                    hint={field.help}\n                                    type=\"number\"\n                                    data-testid={`fr.input.number.${field.label}`}\n                                    validation={bind.validation}\n                                />\n                            </DelayedOnChange>\n                        </Bind.ValidationContainer>\n                    )}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"names":["t","i18n","plugin","field","get","getBind","useModelField","rules","useFieldEffectiveRules","disabled","Bind","bind","DelayedOnChange","Input"],"mappings":";;;;;AAOA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAElB,MAAMC,qBAAsC;IACxC,MAAM;IACN,MAAM;IACN,UAAU;QACN,cAAc;QACd,MAAMF,CAAC,CAAC,YAAY,CAAC;QACrB,aAAaA,CAAC,CAAC,qDAAqD,CAAC;QACrE,QAAO,EAAEG,KAAK,EAAE;YACZ,OACIA,AAAe,aAAfA,MAAM,IAAI,IAAiB,CAACA,MAAM,IAAI,IAAI,CAACC,IAAID,OAAO;QAE9D;QACA,QAAO,EAAEE,OAAO,EAAE;YACd,MAAM,EAAEF,KAAK,EAAE,GAAGG;YAClB,MAAMC,QAAQC,uBAAuBL;YACrC,MAAMM,WAAW,CAACF,MAAM,OAAO,IAAIA,MAAM,QAAQ;YACjD,MAAMG,OAAOL;YAEb,OAAO,WAAP,GACI,oBAACK,MAAAA,MACIC,CAAAA,OAAAA,WAAAA,GACG,oBAACD,KAAK,mBAAmB,sBACrB,oBAACE,iBAAeA;oBACZ,OAAOD,KAAK,KAAK;oBACjB,UAAUA,KAAK,QAAQ;oBACvB,QAAQA,KAAK,QAAQ;iCAErB,oBAACE,OAAKA;oBACF,UAAUJ;oBACV,OAAON,MAAM,KAAK;oBAClB,aAAaA,MAAM,WAAW;oBAC9B,aAAaA,MAAM,WAAW;oBAC9B,MAAMA,MAAM,IAAI;oBAChB,MAAMA,MAAM,IAAI;oBAChB,MAAK;oBACL,eAAa,CAAC,gBAAgB,EAAEA,MAAM,KAAK,EAAE;oBAC7C,YAAYQ,KAAK,UAAU;;QAOvD;IACJ;AACJ;AAEA,oBAAeT"}

package/admin/plugins/fieldRenderers/number/numberInputs.js

@@ -1,61 +1,56 @@
-import React from "react";
+import react from "react";
 import get from "lodash/get.js";
 import { i18n } from "@webiny/app/i18n/index.js";
-import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent } from "@webiny/icons/delete.svg";
 import DynamicSection from "../DynamicSection.js";
 import { MultiValueRendererSettings } from "../MultiValueRendererSettings.js";
 import { DelayedOnChange, Icon, Input } from "@webiny/admin-ui";
 import { CanEditField, useFieldEffectiveRules, useModelField } from "@webiny/app-headless-cms-common";
 const t = i18n.ns("app-headless-cms/admin/fields/text");
-const plugin = {
-  type: "cms-editor-field-renderer",
-  name: "cms-editor-field-renderer-number-inputs",
-  renderer: {
-    rendererName: "number-inputs",
-    name: t`Number Inputs`,
-    description: t`Renders a simple list of number inputs.`,
-    canUse({
-      field
-    }) {
-      return field.type === "number" && !!field.list && !get(field, "predefinedValues.enabled");
-    },
-    render(props) {
-      const {
-        field
-      } = useModelField();
-      const rules = useFieldEffectiveRules(field);
-      return /*#__PURE__*/React.createElement(DynamicSection, Object.assign({}, props, {
-        disabled: !rules.canEdit
-      }), ({
-        bind,
-        index
-      }) => /*#__PURE__*/React.createElement(DelayedOnChange, {
-        value: bind.index.value,
-        onChange: bind.index.onChange,
-        onBlur: bind.index.validate
-      }, /*#__PURE__*/React.createElement(Input, {
-        disabled: !rules.canEdit,
-        validation: bind.index.validation,
-        onEnter: () => bind.field.appendValue(""),
-        label: t`Value {number}`({
-          number: index + 1
-        }),
-        placeholder: props.field.placeholder,
-        "data-testid": `fr.input.numbers.${props.field.label}.${index + 1}`,
-        type: "number",
-        endIcon: /*#__PURE__*/React.createElement(CanEditField, null, /*#__PURE__*/React.createElement(Icon, {
-          icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
-          label: "Delete",
-          onClick: () => bind.field.removeValue(index),
-          className: "cursor-pointer"
-        }))
-      })));
-    },
-    renderSettings(props) {
-      return /*#__PURE__*/React.createElement(MultiValueRendererSettings, props);
+const numberInputs_plugin = {
+    type: "cms-editor-field-renderer",
+    name: "cms-editor-field-renderer-number-inputs",
+    renderer: {
+        rendererName: "number-inputs",
+        name: t`Number Inputs`,
+        description: t`Renders a simple list of number inputs.`,
+        canUse ({ field }) {
+            return "number" === field.type && !!field.list && !get(field, "predefinedValues.enabled");
+        },
+        render (props) {
+            const { field } = useModelField();
+            const rules = useFieldEffectiveRules(field);
+            return /*#__PURE__*/ react.createElement(DynamicSection, {
+                ...props,
+                disabled: !rules.canEdit
+            }, ({ bind, index })=>/*#__PURE__*/ react.createElement(DelayedOnChange, {
+                    value: bind.index.value,
+                    onChange: bind.index.onChange,
+                    onBlur: bind.index.validate
+                }, /*#__PURE__*/ react.createElement(Input, {
+                    disabled: !rules.canEdit,
+                    validation: bind.index.validation,
+                    onEnter: ()=>bind.field.appendValue(""),
+                    label: t`Value {number}`({
+                        number: index + 1
+                    }),
+                    placeholder: props.field.placeholder,
+                    "data-testid": `fr.input.numbers.${props.field.label}.${index + 1}`,
+                    type: "number",
+                    endIcon: /*#__PURE__*/ react.createElement(CanEditField, null, /*#__PURE__*/ react.createElement(Icon, {
+                        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                        label: "Delete",
+                        onClick: ()=>bind.field.removeValue(index),
+                        className: "cursor-pointer"
+                    }))
+                })));
+        },
+        renderSettings (props) {
+            return /*#__PURE__*/ react.createElement(MultiValueRendererSettings, props);
+        }
     }
-  }
 };
-export default plugin;
+const numberInputs = numberInputs_plugin;
+export default numberInputs;
 
 //# sourceMappingURL=numberInputs.js.map

package/admin/plugins/fieldRenderers/number/numberInputs.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","get","i18n","ReactComponent","DeleteIcon","DynamicSection","MultiValueRendererSettings","DelayedOnChange","Icon","Input","CanEditField","useFieldEffectiveRules","useModelField","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","list","render","props","rules","createElement","Object","assign","disabled","canEdit","bind","index","value","onChange","onBlur","validate","validation","onEnter","appendValue","label","number","placeholder","endIcon","icon","onClick","removeValue","className","renderSettings"],"sources":["numberInputs.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport DynamicSection from \"../DynamicSection.js\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings.js\";\nimport { DelayedOnChange, Icon, Input } from \"@webiny/admin-ui\";\nimport {\n    CanEditField,\n    useFieldEffectiveRules,\n    useModelField\n} from \"@webiny/app-headless-cms-common\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-number-inputs\",\n    renderer: {\n        rendererName: \"number-inputs\",\n        name: t`Number Inputs`,\n        description: t`Renders a simple list of number inputs.`,\n        canUse({ field }) {\n            return (\n                field.type === \"number\" && !!field.list && !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render(props) {\n            const { field } = useModelField();\n            const rules = useFieldEffectiveRules(field);\n\n            return (\n                <DynamicSection {...props} disabled={!rules.canEdit}>\n                    {({ bind, index }) => (\n                        <DelayedOnChange\n                            value={bind.index.value}\n                            onChange={bind.index.onChange}\n                            onBlur={bind.index.validate}\n                        >\n                            <Input\n                                disabled={!rules.canEdit}\n                                validation={bind.index.validation}\n                                onEnter={() => bind.field.appendValue(\"\")}\n                                label={t`Value {number}`({ number: index + 1 })}\n                                placeholder={props.field.placeholder}\n                                data-testid={`fr.input.numbers.${props.field.label}.${index + 1}`}\n                                type=\"number\"\n                                endIcon={\n                                    <CanEditField>\n                                        <Icon\n                                            icon={<DeleteIcon />}\n                                            label={\"Delete\"}\n                                            onClick={() => bind.field.removeValue(index)}\n                                            className={\"cursor-pointer\"}\n                                        />\n                                    </CanEditField>\n                                }\n                            />\n                        </DelayedOnChange>\n                    )}\n                </DynamicSection>\n            );\n        },\n        renderSettings(props) {\n            return <MultiValueRendererSettings {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,MAAM,eAAe;AAE/B,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,OAAOC,cAAc;AACrB,SAASC,0BAA0B;AACnC,SAASC,eAAe,EAAEC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;AAC/D,SACIC,YAAY,EACZC,sBAAsB,EACtBC,aAAa,QACV,iCAAiC;AAExC,MAAMC,CAAC,GAAGX,IAAI,CAACY,EAAE,CAAC,oCAAoC,CAAC;AAEvD,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,yCAAyC;EAC/CC,QAAQ,EAAE;IACNC,YAAY,EAAE,eAAe;IAC7BF,IAAI,EAAEJ,CAAC,eAAe;IACtBO,WAAW,EAAEP,CAAC,yCAAyC;IACvDQ,MAAMA,CAAC;MAAEC;IAAM,CAAC,EAAE;MACd,OACIA,KAAK,CAACN,IAAI,KAAK,QAAQ,IAAI,CAAC,CAACM,KAAK,CAACC,IAAI,IAAI,CAACtB,GAAG,CAACqB,KAAK,EAAE,0BAA0B,CAAC;IAE1F,CAAC;IACDE,MAAMA,CAACC,KAAK,EAAE;MACV,MAAM;QAAEH;MAAM,CAAC,GAAGV,aAAa,CAAC,CAAC;MACjC,MAAMc,KAAK,GAAGf,sBAAsB,CAACW,KAAK,CAAC;MAE3C,oBACItB,KAAA,CAAA2B,aAAA,CAACtB,cAAc,EAAAuB,MAAA,CAAAC,MAAA,KAAKJ,KAAK;QAAEK,QAAQ,EAAE,CAACJ,KAAK,CAACK;MAAQ,IAC/C,CAAC;QAAEC,IAAI;QAAEC;MAAM,CAAC,kBACbjC,KAAA,CAAA2B,aAAA,CAACpB,eAAe;QACZ2B,KAAK,EAAEF,IAAI,CAACC,KAAK,CAACC,KAAM;QACxBC,QAAQ,EAAEH,IAAI,CAACC,KAAK,CAACE,QAAS;QAC9BC,MAAM,EAAEJ,IAAI,CAACC,KAAK,CAACI;MAAS,gBAE5BrC,KAAA,CAAA2B,aAAA,CAAClB,KAAK;QACFqB,QAAQ,EAAE,CAACJ,KAAK,CAACK,OAAQ;QACzBO,UAAU,EAAEN,IAAI,CAACC,KAAK,CAACK,UAAW;QAClCC,OAAO,EAAEA,CAAA,KAAMP,IAAI,CAACV,KAAK,CAACkB,WAAW,CAAC,EAAE,CAAE;QAC1CC,KAAK,EAAE5B,CAAC,gBAAgB,CAAC;UAAE6B,MAAM,EAAET,KAAK,GAAG;QAAE,CAAC,CAAE;QAChDU,WAAW,EAAElB,KAAK,CAACH,KAAK,CAACqB,WAAY;QACrC,eAAa,oBAAoBlB,KAAK,CAACH,KAAK,CAACmB,KAAK,IAAIR,KAAK,GAAG,CAAC,EAAG;QAClEjB,IAAI,EAAC,QAAQ;QACb4B,OAAO,eACH5C,KAAA,CAAA2B,aAAA,CAACjB,YAAY,qBACTV,KAAA,CAAA2B,aAAA,CAACnB,IAAI;UACDqC,IAAI,eAAE7C,KAAA,CAAA2B,aAAA,CAACvB,UAAU,MAAE,CAAE;UACrBqC,KAAK,EAAE,QAAS;UAChBK,OAAO,EAAEA,CAAA,KAAMd,IAAI,CAACV,KAAK,CAACyB,WAAW,CAACd,KAAK,CAAE;UAC7Ce,SAAS,EAAE;QAAiB,CAC/B,CACS;MACjB,CACJ,CACY,CAET,CAAC;IAEzB,CAAC;IACDC,cAAcA,CAACxB,KAAK,EAAE;MAClB,oBAAOzB,KAAA,CAAA2B,aAAA,CAACrB,0BAA0B,EAAKmB,KAAQ,CAAC;IACpD;EACJ;AACJ,CAAC;AAED,eAAeV,MAAM","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fieldRenderers/number/numberInputs.js","sources":["../../../../../src/admin/plugins/fieldRenderers/number/numberInputs.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport DynamicSection from \"../DynamicSection.js\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings.js\";\nimport { DelayedOnChange, Icon, Input } from \"@webiny/admin-ui\";\nimport {\n    CanEditField,\n    useFieldEffectiveRules,\n    useModelField\n} from \"@webiny/app-headless-cms-common\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-number-inputs\",\n    renderer: {\n        rendererName: \"number-inputs\",\n        name: t`Number Inputs`,\n        description: t`Renders a simple list of number inputs.`,\n        canUse({ field }) {\n            return (\n                field.type === \"number\" && !!field.list && !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render(props) {\n            const { field } = useModelField();\n            const rules = useFieldEffectiveRules(field);\n\n            return (\n                <DynamicSection {...props} disabled={!rules.canEdit}>\n                    {({ bind, index }) => (\n                        <DelayedOnChange\n                            value={bind.index.value}\n                            onChange={bind.index.onChange}\n                            onBlur={bind.index.validate}\n                        >\n                            <Input\n                                disabled={!rules.canEdit}\n                                validation={bind.index.validation}\n                                onEnter={() => bind.field.appendValue(\"\")}\n                                label={t`Value {number}`({ number: index + 1 })}\n                                placeholder={props.field.placeholder}\n                                data-testid={`fr.input.numbers.${props.field.label}.${index + 1}`}\n                                type=\"number\"\n                                endIcon={\n                                    <CanEditField>\n                                        <Icon\n                                            icon={<DeleteIcon />}\n                                            label={\"Delete\"}\n                                            onClick={() => bind.field.removeValue(index)}\n                                            className={\"cursor-pointer\"}\n                                        />\n                                    </CanEditField>\n                                }\n                            />\n                        </DelayedOnChange>\n                    )}\n                </DynamicSection>\n            );\n        },\n        renderSettings(props) {\n            return <MultiValueRendererSettings {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"names":["t","i18n","plugin","field","get","props","useModelField","rules","useFieldEffectiveRules","DynamicSection","bind","index","DelayedOnChange","Input","CanEditField","Icon","DeleteIcon","MultiValueRendererSettings"],"mappings":";;;;;;;;AAcA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAElB,MAAMC,sBAAsC;IACxC,MAAM;IACN,MAAM;IACN,UAAU;QACN,cAAc;QACd,MAAMF,CAAC,CAAC,aAAa,CAAC;QACtB,aAAaA,CAAC,CAAC,uCAAuC,CAAC;QACvD,QAAO,EAAEG,KAAK,EAAE;YACZ,OACIA,AAAe,aAAfA,MAAM,IAAI,IAAiB,CAAC,CAACA,MAAM,IAAI,IAAI,CAACC,IAAID,OAAO;QAE/D;QACA,QAAOE,KAAK;YACR,MAAM,EAAEF,KAAK,EAAE,GAAGG;YAClB,MAAMC,QAAQC,uBAAuBL;YAErC,OAAO,WAAP,GACI,oBAACM,gBAAcA;gBAAE,GAAGJ,KAAK;gBAAE,UAAU,CAACE,MAAM,OAAO;eAC9C,CAAC,EAAEG,IAAI,EAAEC,KAAK,EAAE,iBACb,oBAACC,iBAAeA;oBACZ,OAAOF,KAAK,KAAK,CAAC,KAAK;oBACvB,UAAUA,KAAK,KAAK,CAAC,QAAQ;oBAC7B,QAAQA,KAAK,KAAK,CAAC,QAAQ;iCAE3B,oBAACG,OAAKA;oBACF,UAAU,CAACN,MAAM,OAAO;oBACxB,YAAYG,KAAK,KAAK,CAAC,UAAU;oBACjC,SAAS,IAAMA,KAAK,KAAK,CAAC,WAAW,CAAC;oBACtC,OAAOV,CAAC,CAAC,cAAc,CAAC,CAAC;wBAAE,QAAQW,QAAQ;oBAAE;oBAC7C,aAAaN,MAAM,KAAK,CAAC,WAAW;oBACpC,eAAa,CAAC,iBAAiB,EAAEA,MAAM,KAAK,CAAC,KAAK,CAAC,CAAC,EAAEM,QAAQ,GAAG;oBACjE,MAAK;oBACL,uBACI,oBAACG,cAAYA,MAAAA,WAAAA,GACT,oBAACC,MAAIA;wBACD,oBAAM,oBAACC,gBAAUA;wBACjB,OAAO;wBACP,SAAS,IAAMN,KAAK,KAAK,CAAC,WAAW,CAACC;wBACtC,WAAW;;;QAS/C;QACA,gBAAeN,KAAK;YAChB,OAAO,WAAP,GAAO,oBAACY,4BAA+BZ;QAC3C;IACJ;AACJ;AAEA,qBAAeH"}

package/admin/plugins/fieldRenderers/object/FieldSettings.js

@@ -1,45 +1,32 @@
 const cache = new Map();
-
-/**
- * This class helps us handle the `field.settings` and encapsulate defaults, checks of undefined, etc.
- * We also want to prevent log spamming in the browser console, so we cache and reuse each instance
- * for every unique field object. That way, each instance can track its own state.
- */
-export class FieldSettings {
-  logged = false;
-  constructor(field) {
-    this.field = field;
-  }
-  getSettings() {
-    return {
-      ...this.field.settings,
-      fields: this.field.settings?.fields || [],
-      layout: this.field.settings?.layout || []
-    };
-  }
-  hasFields() {
-    if (!this.field.settings) {
-      return false;
+class FieldSettings {
+    constructor(field){
+        this.logged = false;
+        this.field = field;
+    }
+    getSettings() {
+        return {
+            ...this.field.settings,
+            fields: this.field.settings?.fields || [],
+            layout: this.field.settings?.layout || []
+        };
     }
-    if (!this.field.settings.fields) {
-      return false;
+    hasFields() {
+        if (!this.field.settings) return false;
+        if (!this.field.settings.fields) return false;
+        return this.field.settings.fields.length > 0;
     }
-    return this.field.settings.fields.length > 0;
-  }
-  logMissingFields() {
-    if (this.logged) {
-      return;
+    logMissingFields() {
+        if (this.logged) return;
+        console.info(`Skipping "${this.field.fieldId}" field. There are no fields defined for this object.`);
+        this.logged = true;
     }
-    console.info(`Skipping "${this.field.fieldId}" field. There are no fields defined for this object.`);
-    this.logged = true;
-  }
-  static createFrom(field) {
-    if (cache.has(field)) {
-      return cache.get(field);
+    static createFrom(field) {
+        if (cache.has(field)) return cache.get(field);
+        cache.set(field, new FieldSettings(field));
+        return cache.get(field);
     }
-    cache.set(field, new FieldSettings(field));
-    return cache.get(field);
-  }
 }
+export { FieldSettings };
 
 //# sourceMappingURL=FieldSettings.js.map

package/admin/plugins/fieldRenderers/object/FieldSettings.js.map

@@ -1 +1 @@
-{"version":3,"names":["cache","Map","FieldSettings","logged","constructor","field","getSettings","settings","fields","layout","hasFields","length","logMissingFields","console","info","fieldId","createFrom","has","get","set"],"sources":["FieldSettings.ts"],"sourcesContent":["import type { CmsModelField } from \"@webiny/app-headless-cms-common/types/index.js\";\n\nconst cache = new Map<CmsModelField, FieldSettings>();\n\n/**\n * This class helps us handle the `field.settings` and encapsulate defaults, checks of undefined, etc.\n * We also want to prevent log spamming in the browser console, so we cache and reuse each instance\n * for every unique field object. That way, each instance can track its own state.\n */\nexport class FieldSettings {\n    private readonly field: CmsModelField;\n    private logged = false;\n\n    private constructor(field: CmsModelField) {\n        this.field = field;\n    }\n\n    getSettings() {\n        return {\n            ...this.field.settings,\n            fields: this.field.settings?.fields || [],\n            layout: this.field.settings?.layout || []\n        };\n    }\n\n    hasFields() {\n        if (!this.field.settings) {\n            return false;\n        }\n\n        if (!this.field.settings.fields) {\n            return false;\n        }\n\n        return this.field.settings.fields.length > 0;\n    }\n\n    logMissingFields() {\n        if (this.logged) {\n            return;\n        }\n\n        console.info(\n            `Skipping \"${this.field.fieldId}\" field. There are no fields defined for this object.`\n        );\n\n        this.logged = true;\n    }\n\n    public static createFrom(field: CmsModelField): FieldSettings {\n        if (cache.has(field)) {\n            return cache.get(field) as FieldSettings;\n        }\n\n        cache.set(field, new FieldSettings(field));\n\n        return cache.get(field) as FieldSettings;\n    }\n}\n"],"mappings":"AAEA,MAAMA,KAAK,GAAG,IAAIC,GAAG,CAA+B,CAAC;;AAErD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,CAAC;EAEfC,MAAM,GAAG,KAAK;EAEdC,WAAWA,CAACC,KAAoB,EAAE;IACtC,IAAI,CAACA,KAAK,GAAGA,KAAK;EACtB;EAEAC,WAAWA,CAAA,EAAG;IACV,OAAO;MACH,GAAG,IAAI,CAACD,KAAK,CAACE,QAAQ;MACtBC,MAAM,EAAE,IAAI,CAACH,KAAK,CAACE,QAAQ,EAAEC,MAAM,IAAI,EAAE;MACzCC,MAAM,EAAE,IAAI,CAACJ,KAAK,CAACE,QAAQ,EAAEE,MAAM,IAAI;IAC3C,CAAC;EACL;EAEAC,SAASA,CAAA,EAAG;IACR,IAAI,CAAC,IAAI,CAACL,KAAK,CAACE,QAAQ,EAAE;MACtB,OAAO,KAAK;IAChB;IAEA,IAAI,CAAC,IAAI,CAACF,KAAK,CAACE,QAAQ,CAACC,MAAM,EAAE;MAC7B,OAAO,KAAK;IAChB;IAEA,OAAO,IAAI,CAACH,KAAK,CAACE,QAAQ,CAACC,MAAM,CAACG,MAAM,GAAG,CAAC;EAChD;EAEAC,gBAAgBA,CAAA,EAAG;IACf,IAAI,IAAI,CAACT,MAAM,EAAE;MACb;IACJ;IAEAU,OAAO,CAACC,IAAI,CACR,aAAa,IAAI,CAACT,KAAK,CAACU,OAAO,uDACnC,CAAC;IAED,IAAI,CAACZ,MAAM,GAAG,IAAI;EACtB;EAEA,OAAca,UAAUA,CAACX,KAAoB,EAAiB;IAC1D,IAAIL,KAAK,CAACiB,GAAG,CAACZ,KAAK,CAAC,EAAE;MAClB,OAAOL,KAAK,CAACkB,GAAG,CAACb,KAAK,CAAC;IAC3B;IAEAL,KAAK,CAACmB,GAAG,CAACd,KAAK,EAAE,IAAIH,aAAa,CAACG,KAAK,CAAC,CAAC;IAE1C,OAAOL,KAAK,CAACkB,GAAG,CAACb,KAAK,CAAC;EAC3B;AACJ","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fieldRenderers/object/FieldSettings.js","sources":["../../../../../src/admin/plugins/fieldRenderers/object/FieldSettings.ts"],"sourcesContent":["import type { CmsModelField } from \"@webiny/app-headless-cms-common/types/index.js\";\n\nconst cache = new Map<CmsModelField, FieldSettings>();\n\n/**\n * This class helps us handle the `field.settings` and encapsulate defaults, checks of undefined, etc.\n * We also want to prevent log spamming in the browser console, so we cache and reuse each instance\n * for every unique field object. That way, each instance can track its own state.\n */\nexport class FieldSettings {\n    private readonly field: CmsModelField;\n    private logged = false;\n\n    private constructor(field: CmsModelField) {\n        this.field = field;\n    }\n\n    getSettings() {\n        return {\n            ...this.field.settings,\n            fields: this.field.settings?.fields || [],\n            layout: this.field.settings?.layout || []\n        };\n    }\n\n    hasFields() {\n        if (!this.field.settings) {\n            return false;\n        }\n\n        if (!this.field.settings.fields) {\n            return false;\n        }\n\n        return this.field.settings.fields.length > 0;\n    }\n\n    logMissingFields() {\n        if (this.logged) {\n            return;\n        }\n\n        console.info(\n            `Skipping \"${this.field.fieldId}\" field. There are no fields defined for this object.`\n        );\n\n        this.logged = true;\n    }\n\n    public static createFrom(field: CmsModelField): FieldSettings {\n        if (cache.has(field)) {\n            return cache.get(field) as FieldSettings;\n        }\n\n        cache.set(field, new FieldSettings(field));\n\n        return cache.get(field) as FieldSettings;\n    }\n}\n"],"names":["cache","Map","FieldSettings","field","console"],"mappings":"AAEA,MAAMA,QAAQ,IAAIC;AAOX,MAAMC;IAIT,YAAoBC,KAAoB,CAAE;aAFlC,MAAM,GAAG;QAGb,IAAI,CAAC,KAAK,GAAGA;IACjB;IAEA,cAAc;QACV,OAAO;YACH,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ;YACtB,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,UAAU,EAAE;YACzC,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,UAAU,EAAE;QAC7C;IACJ;IAEA,YAAY;QACR,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EACpB,OAAO;QAGX,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,EAC3B,OAAO;QAGX,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,GAAG;IAC/C;IAEA,mBAAmB;QACf,IAAI,IAAI,CAAC,MAAM,EACX;QAGJC,QAAQ,IAAI,CACR,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,qDAAqD,CAAC;QAG1F,IAAI,CAAC,MAAM,GAAG;IAClB;IAEA,OAAc,WAAWD,KAAoB,EAAiB;QAC1D,IAAIH,MAAM,GAAG,CAACG,QACV,OAAOH,MAAM,GAAG,CAACG;QAGrBH,MAAM,GAAG,CAACG,OAAO,IAAID,cAAcC;QAEnC,OAAOH,MAAM,GAAG,CAACG;IACrB;AACJ"}

package/admin/plugins/fieldRenderers/object/MultiValueContainer.js

@@ -1,119 +1,107 @@
-import React, { useState } from "react";
+import react, { useState } from "react";
 import { generateAlphaNumericLowerCaseId } from "@webiny/utils";
-import { Cell } from "@webiny/ui/Grid/index.js";
+import { Grid } from "@webiny/admin-ui";
 import { useConfirmationDialog } from "@webiny/app-admin";
 import { MultiValueItemContainer } from "./MultiValueItemContainer.js";
 import { Fields } from "../../../components/ContentEntryForm/Fields.js";
 import DynamicSection from "../DynamicSection.js";
-import { dynamicSectionGridStyle, fieldsGridStyle, ItemHighLight, ObjectItem } from "./StyledComponents.js";
+import { ItemHighLight, ObjectItem, dynamicSectionGridStyle, fieldsGridStyle } from "./StyledComponents.js";
 import { FieldSettings } from "./FieldSettings.js";
 import { useFieldEffectiveRules } from "@webiny/app-headless-cms-common";
 import { useModelField } from "../../../components/ModelFieldProvider/index.js";
 import { useModel } from "../../../components/ModelProvider/index.js";
-export const MultiValueContainer = props => {
-  const [highlightMap, setHighlightIndex] = useState({});
-  const [itemState, setItemState] = useState({});
-  const {
-    model
-  } = useModel();
-  const {
-    field
-  } = useModelField();
-  const rules = useFieldEffectiveRules(field);
-  const disabled = !rules.canEdit || rules.disabled;
-  const {
-    showConfirmation
-  } = useConfirmationDialog({
-    message: `Are you sure you want to delete this item? This action is not reversible.`,
-    acceptLabel: `Yes, I'm sure!`,
-    cancelLabel: `No, leave it.`
-  });
-  const fieldSettings = FieldSettings.createFrom(field);
-  if (!fieldSettings.hasFields()) {
-    fieldSettings.logMissingFields();
-    return null;
-  }
-  const toggleItemState = index => {
-    setItemState(state => ({
-      ...state,
-      [index]: !state[index]
-    }));
-  };
-  const onAddItem = index => {
-    setItemState(state => ({
-      ...state,
-      [index]: true
-    }));
-  };
-  const settings = fieldSettings.getSettings();
-  return /*#__PURE__*/React.createElement(DynamicSection, Object.assign({}, props, {
-    disabled: disabled,
-    showLabel: props.showTitle,
-    field: field,
-    emptyValue: {},
-    onAddItem: onAddItem,
-    gridClassName: dynamicSectionGridStyle
-  }), ({
-    Bind,
-    bind,
-    index
-  }) => {
-    const onMoveDown = () => {
-      bind.field.moveValueDown(index);
-      setHighlightIndex(map => ({
-        ...map,
-        [index + 1]: generateAlphaNumericLowerCaseId(12)
-      }));
-      setItemState(state => {
-        return {
-          ...state,
-          [index + 1]: state[index] ?? false,
-          [index]: state[index + 1] ?? false
-        };
-      });
-    };
-    const onMoveUp = () => {
-      bind.field.moveValueUp(index);
-      setHighlightIndex(map => ({
-        ...map,
-        [index - 1]: generateAlphaNumericLowerCaseId(12)
-      }));
-      setItemState(state => {
-        return {
-          ...state,
-          [index - 1]: state[index] ?? false,
-          [index]: state[index - 1] ?? false
-        };
-      });
+const MultiValueContainer = (props)=>{
+    const [highlightMap, setHighlightIndex] = useState({});
+    const [itemState, setItemState] = useState({});
+    const { model } = useModel();
+    const { field } = useModelField();
+    const rules = useFieldEffectiveRules(field);
+    const disabled = !rules.canEdit || rules.disabled;
+    const { showConfirmation } = useConfirmationDialog({
+        message: "Are you sure you want to delete this item? This action is not reversible.",
+        acceptLabel: "Yes, I'm sure!",
+        cancelLabel: "No, leave it."
+    });
+    const fieldSettings = FieldSettings.createFrom(field);
+    if (!fieldSettings.hasFields()) {
+        fieldSettings.logMissingFields();
+        return null;
+    }
+    const toggleItemState = (index)=>{
+        setItemState((state)=>({
+                ...state,
+                [index]: !state[index]
+            }));
     };
-    const onDelete = () => {
-      showConfirmation(() => {
-        bind.field.removeValue(index);
-      });
+    const onAddItem = (index)=>{
+        setItemState((state)=>({
+                ...state,
+                [index]: true
+            }));
     };
-    return /*#__PURE__*/React.createElement(ObjectItem, null, highlightMap[index] ? /*#__PURE__*/React.createElement(ItemHighLight, {
-      key: highlightMap[index]
-    }) : null, /*#__PURE__*/React.createElement(MultiValueItemContainer, {
-      disabled: disabled,
-      value: bind.index.value,
-      title: `${field.label} #${index + 1}`,
-      isFirst: index === 0,
-      isLast: index === bind.field.value.length - 1,
-      onMoveUp: onMoveUp,
-      onMoveDown: onMoveDown,
-      onDelete: onDelete,
-      isExpanded: itemState[index] ?? false,
-      toggleExpanded: () => toggleItemState(index)
-    }, /*#__PURE__*/React.createElement(Cell, {
-      span: 12
-    }, /*#__PURE__*/React.createElement(Fields, {
-      Bind: Bind,
-      contentModel: model,
-      fields: settings.fields,
-      layout: settings.layout,
-      gridClassName: fieldsGridStyle
-    }))));
-  });
+    const settings = fieldSettings.getSettings();
+    return /*#__PURE__*/ react.createElement(DynamicSection, {
+        ...props,
+        disabled: disabled,
+        showLabel: props.showTitle,
+        field: field,
+        emptyValue: {},
+        onAddItem: onAddItem,
+        gridClassName: dynamicSectionGridStyle
+    }, ({ Bind, bind, index })=>{
+        const onMoveDown = ()=>{
+            bind.field.moveValueDown(index);
+            setHighlightIndex((map)=>({
+                    ...map,
+                    [index + 1]: generateAlphaNumericLowerCaseId(12)
+                }));
+            setItemState((state)=>({
+                    ...state,
+                    [index + 1]: state[index] ?? false,
+                    [index]: state[index + 1] ?? false
+                }));
+        };
+        const onMoveUp = ()=>{
+            bind.field.moveValueUp(index);
+            setHighlightIndex((map)=>({
+                    ...map,
+                    [index - 1]: generateAlphaNumericLowerCaseId(12)
+                }));
+            setItemState((state)=>({
+                    ...state,
+                    [index - 1]: state[index] ?? false,
+                    [index]: state[index - 1] ?? false
+                }));
+        };
+        const onDelete = ()=>{
+            showConfirmation(()=>{
+                bind.field.removeValue(index);
+            });
+        };
+        return /*#__PURE__*/ react.createElement(ObjectItem, null, highlightMap[index] ? /*#__PURE__*/ react.createElement(ItemHighLight, {
+            key: highlightMap[index]
+        }) : null, /*#__PURE__*/ react.createElement(MultiValueItemContainer, {
+            disabled: disabled,
+            value: bind.index.value,
+            title: `${field.label} #${index + 1}`,
+            isFirst: 0 === index,
+            isLast: index === bind.field.value.length - 1,
+            onMoveUp: onMoveUp,
+            onMoveDown: onMoveDown,
+            onDelete: onDelete,
+            isExpanded: itemState[index] ?? false,
+            toggleExpanded: ()=>toggleItemState(index)
+        }, /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(Fields, {
+            Bind: Bind,
+            contentModel: model,
+            fields: settings.fields,
+            layout: settings.layout,
+            gridClassName: fieldsGridStyle
+        }))));
+    });
 };
+export { MultiValueContainer };
 
 //# sourceMappingURL=MultiValueContainer.js.map

package/admin/plugins/fieldRenderers/object/MultiValueContainer.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","generateAlphaNumericLowerCaseId","Cell","useConfirmationDialog","MultiValueItemContainer","Fields","DynamicSection","dynamicSectionGridStyle","fieldsGridStyle","ItemHighLight","ObjectItem","FieldSettings","useFieldEffectiveRules","useModelField","useModel","MultiValueContainer","props","highlightMap","setHighlightIndex","itemState","setItemState","model","field","rules","disabled","canEdit","showConfirmation","message","acceptLabel","cancelLabel","fieldSettings","createFrom","hasFields","logMissingFields","toggleItemState","index","state","onAddItem","settings","getSettings","createElement","Object","assign","showLabel","showTitle","emptyValue","gridClassName","Bind","bind","onMoveDown","moveValueDown","map","onMoveUp","moveValueUp","onDelete","removeValue","key","value","title","label","isFirst","isLast","length","isExpanded","toggleExpanded","span","contentModel","fields","layout"],"sources":["MultiValueContainer.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport { Cell } from \"@webiny/ui/Grid/index.js\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\nimport type {\n    BindComponentRenderProp,\n    CmsModelFieldRendererProps\n} from \"@webiny/app-headless-cms-common/types/index.js\";\nimport { MultiValueItemContainer } from \"~/admin/plugins/fieldRenderers/object/MultiValueItemContainer.js\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields.js\";\nimport DynamicSection from \"~/admin/plugins/fieldRenderers/DynamicSection.js\";\nimport {\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"~/admin/plugins/fieldRenderers/object/StyledComponents.js\";\nimport { FieldSettings } from \"~/admin/plugins/fieldRenderers/object/FieldSettings.js\";\nimport { useFieldEffectiveRules } from \"@webiny/app-headless-cms-common\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { useModel } from \"~/admin/components/ModelProvider/index.js\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\nexport interface MultiValueContainerProps {\n    bind: BindComponentRenderProp;\n    getBind: GetBind;\n    showTitle?: boolean;\n}\n\nexport const MultiValueContainer = (props: MultiValueContainerProps) => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const [itemState, setItemState] = useState<{ [key: number]: boolean }>({});\n\n    const { model } = useModel();\n    const { field } = useModelField();\n    const rules = useFieldEffectiveRules(field);\n    const disabled = !rules.canEdit || rules.disabled;\n\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to delete this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const fieldSettings = FieldSettings.createFrom(field);\n\n    if (!fieldSettings.hasFields()) {\n        fieldSettings.logMissingFields();\n        return null;\n    }\n\n    const toggleItemState = (index: number) => {\n        setItemState(state => ({ ...state, [index]: !state[index] }));\n    };\n\n    const onAddItem = (index: number) => {\n        setItemState(state => ({ ...state, [index]: true }));\n    };\n\n    const settings = fieldSettings.getSettings();\n\n    return (\n        <DynamicSection\n            {...props}\n            disabled={disabled}\n            showLabel={props.showTitle}\n            field={field}\n            emptyValue={{}}\n            onAddItem={onAddItem}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => {\n                const onMoveDown = () => {\n                    bind.field.moveValueDown(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index + 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index + 1]: state[index] ?? false,\n                            [index]: state[index + 1] ?? false\n                        };\n                    });\n                };\n\n                const onMoveUp = () => {\n                    bind.field.moveValueUp(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index - 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index - 1]: state[index] ?? false,\n                            [index]: state[index - 1] ?? false\n                        };\n                    });\n                };\n\n                const onDelete = () => {\n                    showConfirmation(() => {\n                        bind.field.removeValue(index);\n                    });\n                };\n\n                return (\n                    <ObjectItem>\n                        {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                        <MultiValueItemContainer\n                            disabled={disabled}\n                            value={bind.index.value}\n                            title={`${field.label} #${index + 1}`}\n                            isFirst={index === 0}\n                            isLast={index === bind.field.value.length - 1}\n                            onMoveUp={onMoveUp}\n                            onMoveDown={onMoveDown}\n                            onDelete={onDelete}\n                            isExpanded={itemState[index] ?? false}\n                            toggleExpanded={() => toggleItemState(index)}\n                        >\n                            <Cell span={12}>\n                                <Fields\n                                    Bind={Bind}\n                                    contentModel={model}\n                                    fields={settings.fields}\n                                    layout={settings.layout}\n                                    gridClassName={fieldsGridStyle}\n                                />\n                            </Cell>\n                        </MultiValueItemContainer>\n                    </ObjectItem>\n                );\n            }}\n        </DynamicSection>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"admin/plugins/fieldRenderers/object/MultiValueContainer.js","sources":["../../../../../src/admin/plugins/fieldRenderers/object/MultiValueContainer.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\nimport { Grid } from \"@webiny/admin-ui\";\nimport { useConfirmationDialog } from \"@webiny/app-admin\";\nimport type {\n    BindComponentRenderProp,\n    CmsModelFieldRendererProps\n} from \"@webiny/app-headless-cms-common/types/index.js\";\nimport { MultiValueItemContainer } from \"~/admin/plugins/fieldRenderers/object/MultiValueItemContainer.js\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields.js\";\nimport DynamicSection from \"~/admin/plugins/fieldRenderers/DynamicSection.js\";\nimport {\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"~/admin/plugins/fieldRenderers/object/StyledComponents.js\";\nimport { FieldSettings } from \"~/admin/plugins/fieldRenderers/object/FieldSettings.js\";\nimport { useFieldEffectiveRules } from \"@webiny/app-headless-cms-common\";\nimport { useModelField } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport { useModel } from \"~/admin/components/ModelProvider/index.js\";\n\ntype GetBind = CmsModelFieldRendererProps[\"getBind\"];\n\nexport interface MultiValueContainerProps {\n    bind: BindComponentRenderProp;\n    getBind: GetBind;\n    showTitle?: boolean;\n}\n\nexport const MultiValueContainer = (props: MultiValueContainerProps) => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const [itemState, setItemState] = useState<{ [key: number]: boolean }>({});\n\n    const { model } = useModel();\n    const { field } = useModelField();\n    const rules = useFieldEffectiveRules(field);\n    const disabled = !rules.canEdit || rules.disabled;\n\n    const { showConfirmation } = useConfirmationDialog({\n        message: `Are you sure you want to delete this item? This action is not reversible.`,\n        acceptLabel: `Yes, I'm sure!`,\n        cancelLabel: `No, leave it.`\n    });\n\n    const fieldSettings = FieldSettings.createFrom(field);\n\n    if (!fieldSettings.hasFields()) {\n        fieldSettings.logMissingFields();\n        return null;\n    }\n\n    const toggleItemState = (index: number) => {\n        setItemState(state => ({ ...state, [index]: !state[index] }));\n    };\n\n    const onAddItem = (index: number) => {\n        setItemState(state => ({ ...state, [index]: true }));\n    };\n\n    const settings = fieldSettings.getSettings();\n\n    return (\n        <DynamicSection\n            {...props}\n            disabled={disabled}\n            showLabel={props.showTitle}\n            field={field}\n            emptyValue={{}}\n            onAddItem={onAddItem}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => {\n                const onMoveDown = () => {\n                    bind.field.moveValueDown(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index + 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index + 1]: state[index] ?? false,\n                            [index]: state[index + 1] ?? false\n                        };\n                    });\n                };\n\n                const onMoveUp = () => {\n                    bind.field.moveValueUp(index);\n\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index - 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n\n                    setItemState(state => {\n                        return {\n                            ...state,\n                            [index - 1]: state[index] ?? false,\n                            [index]: state[index - 1] ?? false\n                        };\n                    });\n                };\n\n                const onDelete = () => {\n                    showConfirmation(() => {\n                        bind.field.removeValue(index);\n                    });\n                };\n\n                return (\n                    <ObjectItem>\n                        {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                        <MultiValueItemContainer\n                            disabled={disabled}\n                            value={bind.index.value}\n                            title={`${field.label} #${index + 1}`}\n                            isFirst={index === 0}\n                            isLast={index === bind.field.value.length - 1}\n                            onMoveUp={onMoveUp}\n                            onMoveDown={onMoveDown}\n                            onDelete={onDelete}\n                            isExpanded={itemState[index] ?? false}\n                            toggleExpanded={() => toggleItemState(index)}\n                        >\n                            <Grid.Column span={12}>\n                                <Fields\n                                    Bind={Bind}\n                                    contentModel={model}\n                                    fields={settings.fields}\n                                    layout={settings.layout}\n                                    gridClassName={fieldsGridStyle}\n                                />\n                            </Grid.Column>\n                        </MultiValueItemContainer>\n                    </ObjectItem>\n                );\n            }}\n        </DynamicSection>\n    );\n};\n"],"names":["MultiValueContainer","props","highlightMap","setHighlightIndex","useState","itemState","setItemState","model","useModel","field","useModelField","rules","useFieldEffectiveRules","disabled","showConfirmation","useConfirmationDialog","fieldSettings","FieldSettings","toggleItemState","index","state","onAddItem","settings","DynamicSection","dynamicSectionGridStyle","Bind","bind","onMoveDown","map","generateAlphaNumericLowerCaseId","onMoveUp","onDelete","ObjectItem","ItemHighLight","MultiValueItemContainer","Grid","Fields","fieldsGridStyle"],"mappings":"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"}

package/admin/plugins/fieldRenderers/object/MultiValueItemContainer.js

@@ -1,54 +1,45 @@
-import React from "react";
+import react from "react";
 import { makeDecoratable } from "@webiny/react-composition";
 import { Accordion, IconButton } from "@webiny/admin-ui";
-import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
-import { ReactComponent as ArrowUp } from "@webiny/icons/arrow_upward.svg";
-import { ReactComponent as ArrowDown } from "@webiny/icons/arrow_downward.svg";
-export const MultiValueItemContainer = makeDecoratable("MultiValueItemContainer", ({
-  children,
-  ...props
-}) => {
-  const {
-    onMoveUp,
-    onMoveDown,
-    onDelete,
-    isLast,
-    isFirst,
-    disabled = false
-  } = props;
-  const actions = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(ArrowDown, null),
-    onClick: e => {
-      e.stopPropagation();
-      onMoveDown();
-    },
-    variant: "ghost",
-    disabled: isLast
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(ArrowUp, null),
-    onClick: e => {
-      e.stopPropagation();
-      onMoveUp();
-    },
-    variant: "ghost",
-    disabled: isFirst
-  }), /*#__PURE__*/React.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
-    onClick: e => {
-      e.stopPropagation();
-      onDelete();
-    },
-    variant: "ghost"
-  }));
-  return /*#__PURE__*/React.createElement(Accordion, {
-    background: "base",
-    variant: "container",
-    openClosedIndicatorPosition: "left"
-  }, /*#__PURE__*/React.createElement(Accordion.Item, {
-    title: props.title,
-    actions: disabled ? null : actions,
-    defaultOpen: props.isExpanded
-  }, children));
+import { ReactComponent } from "@webiny/icons/delete_outline.svg";
+import { ReactComponent as arrow_upward_svg_ReactComponent } from "@webiny/icons/arrow_upward.svg";
+import { ReactComponent as arrow_downward_svg_ReactComponent } from "@webiny/icons/arrow_downward.svg";
+const MultiValueItemContainer = makeDecoratable("MultiValueItemContainer", ({ children, ...props })=>{
+    const { onMoveUp, onMoveDown, onDelete, isLast, isFirst, disabled = false } = props;
+    const actions = /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(arrow_downward_svg_ReactComponent, null),
+        onClick: (e)=>{
+            e.stopPropagation();
+            onMoveDown();
+        },
+        variant: "ghost",
+        disabled: isLast
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(arrow_upward_svg_ReactComponent, null),
+        onClick: (e)=>{
+            e.stopPropagation();
+            onMoveUp();
+        },
+        variant: "ghost",
+        disabled: isFirst
+    }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: (e)=>{
+            e.stopPropagation();
+            onDelete();
+        },
+        variant: "ghost"
+    }));
+    return /*#__PURE__*/ react.createElement(Accordion, {
+        background: "base",
+        variant: "container",
+        openClosedIndicatorPosition: "left"
+    }, /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: props.title,
+        actions: disabled ? null : actions,
+        defaultOpen: props.isExpanded
+    }, children));
 });
+export { MultiValueItemContainer };
 
 //# sourceMappingURL=MultiValueItemContainer.js.map