@webiny/app-headless-cms 0.0.0-mt-2 → 0.0.0-unstable.06b2ede40f

package/admin/plugins/fieldRenderers/longText/longText.js

@@ -1,36 +1,40 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2;
-
 import React from "react";
 import get from "lodash/get";
-import { Input } from "@webiny/ui/Input";
+import { DelayedOnChange, Textarea } from "@webiny/admin-ui";
 import { i18n } from "@webiny/app/i18n";
-var t = i18n.ns("app-headless-cms/admin/fields/text");
-var plugin = {
+const t = i18n.ns("app-headless-cms/admin/fields/text");
+const plugin = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-long-text-textarea",
   renderer: {
     rendererName: "long-text-text-area",
-    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Text Area"]))),
-    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders a simple text area, suitable for larger amounts of text."]))),
-    canUse: function canUse(_ref) {
-      var field = _ref.field;
+    name: t`Text Area`,
+    description: t`Renders a simple text area, suitable for larger amounts of text.`,
+    canUse({
+      field
+    }) {
       return field.type === "long-text" && !field.multipleValues && !get(field, "predefinedValues.enabled");
     },
-    render: function render(_ref2) {
-      var field = _ref2.field,
-          getBind = _ref2.getBind;
-      var Bind = getBind();
-      return /*#__PURE__*/React.createElement(Bind, null, function (bind) {
-        return /*#__PURE__*/React.createElement(Input, Object.assign({}, bind, {
-          rows: 5,
-          label: field.label,
-          placeholder: field.placeholderText,
-          description: field.helpText
-        }));
-      });
+    render({
+      field,
+      getBind
+    }) {
+      const Bind = getBind();
+      return /*#__PURE__*/React.createElement(Bind, null, bind => /*#__PURE__*/React.createElement(Bind.ValidationContainer, null, /*#__PURE__*/React.createElement(DelayedOnChange, {
+        value: bind.value,
+        onChange: bind.onChange,
+        onBlur: bind.validate
+      }, /*#__PURE__*/React.createElement(Textarea, {
+        rows: 5,
+        label: field.label,
+        placeholder: field.placeholderText,
+        description: field.helpText,
+        "data-testid": `fr.input.longtext.${field.label}`,
+        validation: bind.validation
+      }))));
     }
   }
 };
-export default plugin;
+export default plugin;
+
+//# sourceMappingURL=longText.js.map

package/admin/plugins/fieldRenderers/longText/longText.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","get","DelayedOnChange","Textarea","i18n","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","getBind","Bind","createElement","bind","ValidationContainer","value","onChange","onBlur","validate","rows","label","placeholder","placeholderText","helpText","validation"],"sources":["longText.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types\";\nimport { DelayedOnChange, Textarea } from \"@webiny/admin-ui\";\nimport { i18n } from \"@webiny/app/i18n\";\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-long-text-textarea\",\n    renderer: {\n        rendererName: \"long-text-text-area\",\n        name: t`Text Area`,\n        description: t`Renders a simple text area, suitable for larger amounts of text.`,\n        canUse({ field }) {\n            return (\n                field.type === \"long-text\" &&\n                !field.multipleValues &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render({ field, getBind }) {\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                                <Textarea\n                                    rows={5}\n                                    label={field.label}\n                                    placeholder={field.placeholderText}\n                                    description={field.helpText}\n                                    data-testid={`fr.input.longtext.${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,YAAY;AAE5B,SAASC,eAAe,EAAEC,QAAQ,QAAQ,kBAAkB;AAC5D,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,MAAMC,CAAC,GAAGD,IAAI,CAACE,EAAE,CAAC,oCAAoC,CAAC;AAEvD,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,8CAA8C;EACpDC,QAAQ,EAAE;IACNC,YAAY,EAAE,qBAAqB;IACnCF,IAAI,EAAEJ,CAAC,WAAW;IAClBO,WAAW,EAAEP,CAAC,kEAAkE;IAChFQ,MAAMA,CAAC;MAAEC;IAAM,CAAC,EAAE;MACd,OACIA,KAAK,CAACN,IAAI,KAAK,WAAW,IAC1B,CAACM,KAAK,CAACC,cAAc,IACrB,CAACd,GAAG,CAACa,KAAK,EAAE,0BAA0B,CAAC;IAE/C,CAAC;IACDE,MAAMA,CAAC;MAAEF,KAAK;MAAEG;IAAQ,CAAC,EAAE;MACvB,MAAMC,IAAI,GAAGD,OAAO,CAAC,CAAC;MAEtB,oBACIjB,KAAA,CAAAmB,aAAA,CAACD,IAAI,QACAE,IAAI,iBACDpB,KAAA,CAAAmB,aAAA,CAACD,IAAI,CAACG,mBAAmB,qBACrBrB,KAAA,CAAAmB,aAAA,CAACjB,eAAe;QACZoB,KAAK,EAAEF,IAAI,CAACE,KAAM;QAClBC,QAAQ,EAAEH,IAAI,CAACG,QAAS;QACxBC,MAAM,EAAEJ,IAAI,CAACK;MAAS,gBAEtBzB,KAAA,CAAAmB,aAAA,CAAChB,QAAQ;QACLuB,IAAI,EAAE,CAAE;QACRC,KAAK,EAAEb,KAAK,CAACa,KAAM;QACnBC,WAAW,EAAEd,KAAK,CAACe,eAAgB;QACnCjB,WAAW,EAAEE,KAAK,CAACgB,QAAS;QAC5B,eAAa,qBAAqBhB,KAAK,CAACa,KAAK,EAAG;QAChDI,UAAU,EAAEX,IAAI,CAACW;MAAW,CAC/B,CACY,CACK,CAE5B,CAAC;IAEf;EACJ;AACJ,CAAC;AAED,eAAexB,MAAM","ignoreList":[]}

package/admin/plugins/fieldRenderers/longText/longTexts.d.ts

@@ -1,3 +1,3 @@
-import { CmsEditorFieldRendererPlugin } from "../../../../types";
-declare const plugin: CmsEditorFieldRendererPlugin;
+import type { CmsModelFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsModelFieldRendererPlugin;
 export default plugin;

package/admin/plugins/fieldRenderers/longText/longTexts.js

@@ -1,43 +1,55 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3;
-
 import React from "react";
 import get from "lodash/get";
-import { Input } from "@webiny/ui/Input";
 import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as DeleteIcon } from "@svgr/webpack!../../../icons/close.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
 import DynamicSection from "../DynamicSection";
-var t = i18n.ns("app-headless-cms/admin/fields/text");
-var plugin = {
+import { MultiValueRendererSettings } from "../MultiValueRendererSettings";
+import { DelayedOnChange, IconButton, Textarea } from "@webiny/admin-ui";
+const t = i18n.ns("app-headless-cms/admin/fields/text");
+const plugin = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-long-text-inputs",
   renderer: {
     rendererName: "long-text-inputs",
-    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Text Areas"]))),
-    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders a simple list of text areas."]))),
-    canUse: function canUse(_ref) {
-      var field = _ref.field;
-      return field.type === "long-text" && field.multipleValues && !get(field, "predefinedValues.enabled");
+    name: t`Text Areas`,
+    description: t`Renders a simple list of text areas.`,
+    canUse({
+      field
+    }) {
+      return field.type === "long-text" && !!field.multipleValues && !get(field, "predefinedValues.enabled");
     },
-    render: function render(props) {
-      return /*#__PURE__*/React.createElement(DynamicSection, props, function (_ref2) {
-        var bind = _ref2.bind,
-            index = _ref2.index;
-        return /*#__PURE__*/React.createElement(Input, Object.assign({}, bind.index, {
-          rows: 5,
-          label: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Value {number}"])))({
-            number: index + 1
-          }),
-          trailingIcon: index > 0 && {
-            icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
-            onClick: function onClick() {
-              return bind.field.removeValue(index);
-            }
-          }
-        }));
-      });
+    render(props) {
+      return /*#__PURE__*/React.createElement(DynamicSection, props, ({
+        bind,
+        index
+      }) => /*#__PURE__*/React.createElement("div", {
+        className: "wby-relative"
+      }, /*#__PURE__*/React.createElement(DelayedOnChange, {
+        value: bind.index.value,
+        onChange: bind.index.onChange,
+        onBlur: bind.index.validate
+      }, /*#__PURE__*/React.createElement(Textarea, {
+        validation: bind.index.validation,
+        rows: 5,
+        label: t`Value {number}`({
+          number: index + 1
+        }),
+        placeholder: props.field.placeholderText,
+        "data-testid": `fr.input.longTexts.${props.field.label}.${index + 1}`
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "wby-absolute wby-top-xl wby-right-sm wby-z-10"
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        variant: "ghost",
+        size: "md",
+        icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+        onClick: () => bind.field.removeValue(index)
+      }))));
+    },
+    renderSettings(props) {
+      return /*#__PURE__*/React.createElement(MultiValueRendererSettings, props);
     }
   }
 };
-export default plugin;
+export default plugin;
+
+//# sourceMappingURL=longTexts.js.map

package/admin/plugins/fieldRenderers/longText/longTexts.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","get","i18n","ReactComponent","DeleteIcon","DynamicSection","MultiValueRendererSettings","DelayedOnChange","IconButton","Textarea","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","props","createElement","bind","index","className","value","onChange","onBlur","validate","validation","rows","label","number","placeholder","placeholderText","variant","size","icon","onClick","removeValue","renderSettings"],"sources":["longTexts.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport DynamicSection from \"../DynamicSection\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings\";\nimport { DelayedOnChange, IconButton, Textarea } from \"@webiny/admin-ui\";\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-long-text-inputs\",\n    renderer: {\n        rendererName: \"long-text-inputs\",\n        name: t`Text Areas`,\n        description: t`Renders a simple list of text areas.`,\n        canUse({ field }) {\n            return (\n                field.type === \"long-text\" &&\n                !!field.multipleValues &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render(props) {\n            return (\n                <DynamicSection {...props}>\n                    {({ bind, index }) => (\n                        <div className={\"wby-relative\"}>\n                            <DelayedOnChange\n                                value={bind.index.value}\n                                onChange={bind.index.onChange}\n                                onBlur={bind.index.validate}\n                            >\n                                <Textarea\n                                    validation={bind.index.validation}\n                                    rows={5}\n                                    label={t`Value {number}`({ number: index + 1 })}\n                                    placeholder={props.field.placeholderText}\n                                    data-testid={`fr.input.longTexts.${props.field.label}.${\n                                        index + 1\n                                    }`}\n                                />\n                            </DelayedOnChange>\n                            <div className={\"wby-absolute wby-top-xl wby-right-sm wby-z-10\"}>\n                                <IconButton\n                                    variant={\"ghost\"}\n                                    size={\"md\"}\n                                    icon={<DeleteIcon />}\n                                    onClick={() => bind.field.removeValue(index)}\n                                />\n                            </div>\n                        </div>\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,YAAY;AAE5B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,cAAc,IAAIC,UAAU,QAAQ,kCAAkC;AAC/E,OAAOC,cAAc;AACrB,SAASC,0BAA0B;AACnC,SAASC,eAAe,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,kBAAkB;AAExE,MAAMC,CAAC,GAAGR,IAAI,CAACS,EAAE,CAAC,oCAAoC,CAAC;AAEvD,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,4CAA4C;EAClDC,QAAQ,EAAE;IACNC,YAAY,EAAE,kBAAkB;IAChCF,IAAI,EAAEJ,CAAC,YAAY;IACnBO,WAAW,EAAEP,CAAC,sCAAsC;IACpDQ,MAAMA,CAAC;MAAEC;IAAM,CAAC,EAAE;MACd,OACIA,KAAK,CAACN,IAAI,KAAK,WAAW,IAC1B,CAAC,CAACM,KAAK,CAACC,cAAc,IACtB,CAACnB,GAAG,CAACkB,KAAK,EAAE,0BAA0B,CAAC;IAE/C,CAAC;IACDE,MAAMA,CAACC,KAAK,EAAE;MACV,oBACItB,KAAA,CAAAuB,aAAA,CAAClB,cAAc,EAAKiB,KAAK,EACpB,CAAC;QAAEE,IAAI;QAAEC;MAAM,CAAC,kBACbzB,KAAA,CAAAuB,aAAA;QAAKG,SAAS,EAAE;MAAe,gBAC3B1B,KAAA,CAAAuB,aAAA,CAAChB,eAAe;QACZoB,KAAK,EAAEH,IAAI,CAACC,KAAK,CAACE,KAAM;QACxBC,QAAQ,EAAEJ,IAAI,CAACC,KAAK,CAACG,QAAS;QAC9BC,MAAM,EAAEL,IAAI,CAACC,KAAK,CAACK;MAAS,gBAE5B9B,KAAA,CAAAuB,aAAA,CAACd,QAAQ;QACLsB,UAAU,EAAEP,IAAI,CAACC,KAAK,CAACM,UAAW;QAClCC,IAAI,EAAE,CAAE;QACRC,KAAK,EAAEvB,CAAC,gBAAgB,CAAC;UAAEwB,MAAM,EAAET,KAAK,GAAG;QAAE,CAAC,CAAE;QAChDU,WAAW,EAAEb,KAAK,CAACH,KAAK,CAACiB,eAAgB;QACzC,eAAa,sBAAsBd,KAAK,CAACH,KAAK,CAACc,KAAK,IAChDR,KAAK,GAAG,CAAC;MACV,CACN,CACY,CAAC,eAClBzB,KAAA,CAAAuB,aAAA;QAAKG,SAAS,EAAE;MAAgD,gBAC5D1B,KAAA,CAAAuB,aAAA,CAACf,UAAU;QACP6B,OAAO,EAAE,OAAQ;QACjBC,IAAI,EAAE,IAAK;QACXC,IAAI,eAAEvC,KAAA,CAAAuB,aAAA,CAACnB,UAAU,MAAE,CAAE;QACrBoC,OAAO,EAAEA,CAAA,KAAMhB,IAAI,CAACL,KAAK,CAACsB,WAAW,CAAChB,KAAK;MAAE,CAChD,CACA,CACJ,CAEG,CAAC;IAEzB,CAAC;IACDiB,cAAcA,CAACpB,KAAK,EAAE;MAClB,oBAAOtB,KAAA,CAAAuB,aAAA,CAACjB,0BAA0B,EAAKgB,KAAQ,CAAC;IACpD;EACJ;AACJ,CAAC;AAED,eAAeV,MAAM","ignoreList":[]}

package/admin/plugins/fieldRenderers/number/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("../../../../types").CmsEditorFieldRendererPlugin[];
+declare const _default: import("@webiny/app-headless-cms-common/types").CmsModelFieldRendererPlugin[];
 export default _default;

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

@@ -1,3 +1,5 @@
 import numberInput from "./numberInput";
 import numberInputs from "./numberInputs";
-export default [numberInput, numberInputs];
+export default [numberInput, numberInputs];
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["numberInput","numberInputs"],"sources":["index.ts"],"sourcesContent":["import numberInput from \"./numberInput\";\nimport numberInputs from \"./numberInputs\";\n\nexport default [numberInput, numberInputs];\n"],"mappings":"AAAA,OAAOA,WAAW;AAClB,OAAOC,YAAY;AAEnB,eAAe,CAACD,WAAW,EAAEC,YAAY,CAAC","ignoreList":[]}

package/admin/plugins/fieldRenderers/number/numberInput.d.ts

@@ -1,3 +1,3 @@
-import { CmsEditorFieldRendererPlugin } from "../../../../types";
-declare const plugin: CmsEditorFieldRendererPlugin;
+import type { CmsModelFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsModelFieldRendererPlugin;
 export default plugin;

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

@@ -1,39 +1,40 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2;
-
 import React from "react";
 import get from "lodash/get";
-import { Input } from "@webiny/ui/Input";
 import { i18n } from "@webiny/app/i18n";
-var t = i18n.ns("app-headless-cms/admin/fields/number");
-var plugin = {
+import { DelayedOnChange, Input } from "@webiny/admin-ui";
+const t = i18n.ns("app-headless-cms/admin/fields/number");
+const plugin = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-number",
   renderer: {
     rendererName: "number-input",
-    name: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Number Input"]))),
-    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders a simple input with its type set to \"number\"."]))),
-    canUse: function canUse(_ref) {
-      var field = _ref.field;
+    name: t`Number Input`,
+    description: t`Renders a simple input with its type set to "number".`,
+    canUse({
+      field
+    }) {
       return field.type === "number" && !field.multipleValues && !get(field, "predefinedValues.enabled");
     },
-    render: function render(_ref2) {
-      var field = _ref2.field,
-          getBind = _ref2.getBind;
-      var Bind = getBind();
-      return /*#__PURE__*/React.createElement(Bind, null, function (bindProps) {
-        return /*#__PURE__*/React.createElement(Input, Object.assign({}, bindProps, {
-          onChange: function onChange(value) {
-            return bindProps.onChange(value);
-          },
-          label: field.label,
-          placeholder: field.placeholderText,
-          description: field.helpText,
-          type: "number"
-        }));
-      });
+    render({
+      field,
+      getBind
+    }) {
+      const Bind = getBind();
+      return /*#__PURE__*/React.createElement(Bind, null, bind => /*#__PURE__*/React.createElement(Bind.ValidationContainer, null, /*#__PURE__*/React.createElement(DelayedOnChange, {
+        value: bind.value,
+        onChange: bind.onChange,
+        onBlur: bind.validate
+      }, /*#__PURE__*/React.createElement(Input, {
+        label: field.label,
+        placeholder: field.placeholderText,
+        description: field.helpText,
+        type: "number",
+        "data-testid": `fr.input.number.${field.label}`,
+        validation: bind.validation
+      }))));
     }
   }
 };
-export default plugin;
+export default plugin;
+
+//# sourceMappingURL=numberInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","get","i18n","DelayedOnChange","Input","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","getBind","Bind","createElement","bind","ValidationContainer","value","onChange","onBlur","validate","label","placeholder","placeholderText","helpText","validation"],"sources":["numberInput.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { DelayedOnChange, Input } from \"@webiny/admin-ui\";\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\" &&\n                !field.multipleValues &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render({ field, getBind }) {\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                                    label={field.label}\n                                    placeholder={field.placeholderText}\n                                    description={field.helpText}\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,YAAY;AAE5B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,eAAe,EAAEC,KAAK,QAAQ,kBAAkB;AAEzD,MAAMC,CAAC,GAAGH,IAAI,CAACI,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,IACvB,CAACM,KAAK,CAACC,cAAc,IACrB,CAACd,GAAG,CAACa,KAAK,EAAE,0BAA0B,CAAC;IAE/C,CAAC;IACDE,MAAMA,CAAC;MAAEF,KAAK;MAAEG;IAAQ,CAAC,EAAE;MACvB,MAAMC,IAAI,GAAGD,OAAO,CAAC,CAAC;MAEtB,oBACIjB,KAAA,CAAAmB,aAAA,CAACD,IAAI,QACAE,IAAI,iBACDpB,KAAA,CAAAmB,aAAA,CAACD,IAAI,CAACG,mBAAmB,qBACrBrB,KAAA,CAAAmB,aAAA,CAAChB,eAAe;QACZmB,KAAK,EAAEF,IAAI,CAACE,KAAM;QAClBC,QAAQ,EAAEH,IAAI,CAACG,QAAS;QACxBC,MAAM,EAAEJ,IAAI,CAACK;MAAS,gBAEtBzB,KAAA,CAAAmB,aAAA,CAACf,KAAK;QACFsB,KAAK,EAAEZ,KAAK,CAACY,KAAM;QACnBC,WAAW,EAAEb,KAAK,CAACc,eAAgB;QACnChB,WAAW,EAAEE,KAAK,CAACe,QAAS;QAC5BrB,IAAI,EAAC,QAAQ;QACb,eAAa,mBAAmBM,KAAK,CAACY,KAAK,EAAG;QAC9CI,UAAU,EAAEV,IAAI,CAACU;MAAW,CAC/B,CACY,CACK,CAE5B,CAAC;IAEf;EACJ;AACJ,CAAC;AAED,eAAevB,MAAM","ignoreList":[]}

package/admin/plugins/fieldRenderers/number/numberInputs.d.ts

@@ -1,3 +1,3 @@
-import { CmsEditorFieldRendererPlugin } from "../../../../types";
-declare const plugin: CmsEditorFieldRendererPlugin;
+import type { CmsModelFieldRendererPlugin } from "../../../../types";
+declare const plugin: CmsModelFieldRendererPlugin;
 export default plugin;

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

@@ -1,50 +1,53 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3;
-
 import React from "react";
 import get from "lodash/get";
-import { Input } from "@webiny/ui/Input";
 import { i18n } from "@webiny/app/i18n";
-import { ReactComponent as DeleteIcon } from "@svgr/webpack!../../../icons/close.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
 import DynamicSection from "../DynamicSection";
-var t = i18n.ns("app-headless-cms/admin/fields/text");
-var plugin = {
+import { MultiValueRendererSettings } from "../MultiValueRendererSettings";
+import { DelayedOnChange, Icon, Input } from "@webiny/admin-ui";
+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(_templateObject || (_templateObject = _taggedTemplateLiteral(["Number Inputs"]))),
-    description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Renders a simple list of number inputs."]))),
-    canUse: function canUse(_ref) {
-      var field = _ref.field;
-      return field.type === "number" && field.multipleValues && !get(field, "predefinedValues.enabled");
+    name: t`Number Inputs`,
+    description: t`Renders a simple list of number inputs.`,
+    canUse({
+      field
+    }) {
+      return field.type === "number" && !!field.multipleValues && !get(field, "predefinedValues.enabled");
     },
-    render: function render(props) {
-      return /*#__PURE__*/React.createElement(DynamicSection, props, function (_ref2) {
-        var bind = _ref2.bind,
-            index = _ref2.index;
-        return /*#__PURE__*/React.createElement(Input, Object.assign({}, bind.index, {
-          onChange: function onChange(value) {
-            return bind.index.onChange(value);
-          },
-          autoFocus: true,
-          onEnter: function onEnter() {
-            return bind.field.appendValue("");
-          },
-          label: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Value {number}"])))({
-            number: index + 1
-          }),
-          type: "number",
-          trailingIcon: index > 0 && {
-            icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
-            onClick: function onClick() {
-              return bind.field.removeValue(index);
-            }
-          }
-        }));
-      });
+    render(props) {
+      return /*#__PURE__*/React.createElement(DynamicSection, props, ({
+        bind,
+        index
+      }) => /*#__PURE__*/React.createElement(DelayedOnChange, {
+        value: bind.index.value,
+        onChange: bind.index.onChange,
+        onBlur: bind.index.validate
+      }, /*#__PURE__*/React.createElement(Input, {
+        validation: bind.index.validation,
+        onEnter: () => bind.field.appendValue(""),
+        label: t`Value {number}`({
+          number: index + 1
+        }),
+        placeholder: props.field.placeholderText,
+        "data-testid": `fr.input.numbers.${props.field.label}.${index + 1}`,
+        type: "number",
+        endIcon: /*#__PURE__*/React.createElement(Icon, {
+          icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+          label: "Delete",
+          onClick: () => bind.field.removeValue(index),
+          className: "wby-cursor-pointer"
+        })
+      })));
+    },
+    renderSettings(props) {
+      return /*#__PURE__*/React.createElement(MultiValueRendererSettings, props);
     }
   }
 };
-export default plugin;
+export default plugin;
+
+//# sourceMappingURL=numberInputs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","get","i18n","ReactComponent","DeleteIcon","DynamicSection","MultiValueRendererSettings","DelayedOnChange","Icon","Input","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","props","createElement","bind","index","value","onChange","onBlur","validate","validation","onEnter","appendValue","label","number","placeholder","placeholderText","endIcon","icon","onClick","removeValue","className","renderSettings"],"sources":["numberInputs.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport DynamicSection from \"../DynamicSection\";\nimport { MultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings\";\nimport { DelayedOnChange, Icon, Input } from \"@webiny/admin-ui\";\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\" &&\n                !!field.multipleValues &&\n                !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render(props) {\n            return (\n                <DynamicSection {...props}>\n                    {({ bind, index }) => (\n                        <DelayedOnChange\n                            value={bind.index.value}\n                            onChange={bind.index.onChange}\n                            onBlur={bind.index.validate}\n                        >\n                            <Input\n                                validation={bind.index.validation}\n                                onEnter={() => bind.field.appendValue(\"\")}\n                                label={t`Value {number}`({ number: index + 1 })}\n                                placeholder={props.field.placeholderText}\n                                data-testid={`fr.input.numbers.${props.field.label}.${index + 1}`}\n                                type=\"number\"\n                                endIcon={\n                                    <Icon\n                                        icon={<DeleteIcon />}\n                                        label={\"Delete\"}\n                                        onClick={() => bind.field.removeValue(index)}\n                                        className={\"wby-cursor-pointer\"}\n                                    />\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,YAAY;AAE5B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,OAAOC,cAAc;AACrB,SAASC,0BAA0B;AACnC,SAASC,eAAe,EAAEC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;AAE/D,MAAMC,CAAC,GAAGR,IAAI,CAACS,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,IACvB,CAAC,CAACM,KAAK,CAACC,cAAc,IACtB,CAACnB,GAAG,CAACkB,KAAK,EAAE,0BAA0B,CAAC;IAE/C,CAAC;IACDE,MAAMA,CAACC,KAAK,EAAE;MACV,oBACItB,KAAA,CAAAuB,aAAA,CAAClB,cAAc,EAAKiB,KAAK,EACpB,CAAC;QAAEE,IAAI;QAAEC;MAAM,CAAC,kBACbzB,KAAA,CAAAuB,aAAA,CAAChB,eAAe;QACZmB,KAAK,EAAEF,IAAI,CAACC,KAAK,CAACC,KAAM;QACxBC,QAAQ,EAAEH,IAAI,CAACC,KAAK,CAACE,QAAS;QAC9BC,MAAM,EAAEJ,IAAI,CAACC,KAAK,CAACI;MAAS,gBAE5B7B,KAAA,CAAAuB,aAAA,CAACd,KAAK;QACFqB,UAAU,EAAEN,IAAI,CAACC,KAAK,CAACK,UAAW;QAClCC,OAAO,EAAEA,CAAA,KAAMP,IAAI,CAACL,KAAK,CAACa,WAAW,CAAC,EAAE,CAAE;QAC1CC,KAAK,EAAEvB,CAAC,gBAAgB,CAAC;UAAEwB,MAAM,EAAET,KAAK,GAAG;QAAE,CAAC,CAAE;QAChDU,WAAW,EAAEb,KAAK,CAACH,KAAK,CAACiB,eAAgB;QACzC,eAAa,oBAAoBd,KAAK,CAACH,KAAK,CAACc,KAAK,IAAIR,KAAK,GAAG,CAAC,EAAG;QAClEZ,IAAI,EAAC,QAAQ;QACbwB,OAAO,eACHrC,KAAA,CAAAuB,aAAA,CAACf,IAAI;UACD8B,IAAI,eAAEtC,KAAA,CAAAuB,aAAA,CAACnB,UAAU,MAAE,CAAE;UACrB6B,KAAK,EAAE,QAAS;UAChBM,OAAO,EAAEA,CAAA,KAAMf,IAAI,CAACL,KAAK,CAACqB,WAAW,CAACf,KAAK,CAAE;UAC7CgB,SAAS,EAAE;QAAqB,CACnC;MACJ,CACJ,CACY,CAET,CAAC;IAEzB,CAAC;IACDC,cAAcA,CAACpB,KAAK,EAAE;MAClB,oBAAOtB,KAAA,CAAAuB,aAAA,CAACjB,0BAA0B,EAAKgB,KAAQ,CAAC;IACpD;EACJ;AACJ,CAAC;AAED,eAAeV,MAAM","ignoreList":[]}

package/admin/plugins/fieldRenderers/object/FieldSettings.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import type { CmsModelField } from "@webiny/app-headless-cms-common/types";
+/**
+ * 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 declare class FieldSettings {
+    private readonly field;
+    private logged;
+    private constructor();
+    getSettings(): {
+        fields: {
+            id: string;
+            type: string;
+            fieldId: string;
+            storageId?: string | undefined;
+            label: string;
+            helpText?: string | undefined;
+            placeholderText?: string | undefined;
+            validation?: (import("@webiny/validation/types").Validator | import("@webiny/app-headless-cms-common/types").CmsModelFieldValidator)[] | undefined;
+            listValidation?: import("@webiny/app-headless-cms-common/types").CmsModelFieldValidator[] | undefined;
+            multipleValues?: boolean | undefined;
+            predefinedValues?: import("@webiny/app-headless-cms-common/types").CmsEditorFieldPredefinedValues | undefined;
+            settings?: import("@webiny/app-headless-cms-common/types").CmsModelFieldSettings<unknown> | undefined;
+            renderer: {
+                name: string;
+                settings?: Record<string, any> | undefined;
+            } | ((props: import("@webiny/app-headless-cms-common/types").CmsModelFieldRendererProps) => import("react").ReactNode);
+            tags?: string[] | undefined;
+        }[];
+        layout: string[][];
+        defaultValue?: string | number | boolean | null | undefined;
+        defaultSetValue?: string | undefined;
+        type?: string | undefined;
+        models?: Pick<import("@webiny/app-headless-cms-common/types").CmsModel, "modelId">[] | undefined;
+        templates?: import("@webiny/app-headless-cms-common/types").CmsDynamicZoneTemplate[] | undefined;
+        imagesOnly?: boolean | undefined;
+    };
+    hasFields(): boolean;
+    logMissingFields(): void;
+    static createFrom(field: CmsModelField): FieldSettings;
+}

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

@@ -0,0 +1,45 @@
+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;
+    }
+    if (!this.field.settings.fields) {
+      return false;
+    }
+    return this.field.settings.fields.length > 0;
+  }
+  logMissingFields() {
+    if (this.logged) {
+      return;
+    }
+    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);
+    }
+    cache.set(field, new FieldSettings(field));
+    return cache.get(field);
+  }
+}
+
+//# sourceMappingURL=FieldSettings.js.map

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

@@ -0,0 +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\";\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":[]}

package/admin/plugins/fieldRenderers/object/MultiValueContainer.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { BindComponentRenderProp, CmsModelFieldRendererProps } from "@webiny/app-headless-cms-common/types";
+type GetBind = CmsModelFieldRendererProps["getBind"];
+export interface MultiValueContainerProps {
+    bind: BindComponentRenderProp;
+    getBind: GetBind;
+    showTitle?: boolean;
+}
+export declare const MultiValueContainer: (props: MultiValueContainerProps) => React.JSX.Element | null;
+export {};

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

@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+import { generateAlphaNumericLowerCaseId } from "@webiny/utils";
+import { Cell } from "@webiny/ui/Grid";
+import { useConfirmationDialog } from "@webiny/app-admin";
+import { MultiValueItemContainer } from "./MultiValueItemContainer";
+import { Fields } from "../../../components/ContentEntryForm/Fields";
+import DynamicSection from "../DynamicSection";
+import { dynamicSectionGridStyle, fieldsGridStyle, fieldsWrapperStyle, ItemHighLight, ObjectItem } from "./StyledComponents";
+import { FieldSettings } from "./FieldSettings";
+import { useModelField } from "../../../components/ModelFieldProvider";
+import { useModel } from "../../../components/ModelProvider";
+export const MultiValueContainer = props => {
+  const [highlightMap, setHighlightIndex] = useState({});
+  const [itemState, setItemState] = useState({});
+  const {
+    model
+  } = useModel();
+  const {
+    field
+  } = useModelField();
+  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, {
+    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 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, {
+      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,
+      className: fieldsWrapperStyle
+    }, /*#__PURE__*/React.createElement(Fields, {
+      Bind: Bind,
+      contentModel: model,
+      fields: settings.fields,
+      layout: settings.layout,
+      gridClassName: fieldsGridStyle
+    }))));
+  });
+};
+
+//# sourceMappingURL=MultiValueContainer.js.map