@webiny/app-headless-cms 0.0.0-unstable.40876133bb → 0.0.0-unstable.496cf268ac

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

@@ -1,15 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _numberInput = _interopRequireDefault(require("./numberInput"));
-
 var _numberInputs = _interopRequireDefault(require("./numberInputs"));
-
 var _default = [_numberInput.default, _numberInputs.default];
 exports.default = _default;

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

@@ -1 +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;;AACA;;eAEe,CAACA,oBAAD,EAAcC,qBAAd,C"}
+{"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;AACA;AAA0C,eAE3B,CAACA,oBAAW,EAAEC,qBAAY,CAAC;AAAA"}

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

@@ -1,26 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _get = _interopRequireDefault(require("lodash/get"));
-
 var _Input = require("@webiny/ui/Input");
-
 var _i18n = require("@webiny/app/i18n");
-
 var _templateObject, _templateObject2;
-
 var t = _i18n.i18n.ns("app-headless-cms/admin/fields/number");
-
 var plugin = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-number",
@@ -34,7 +25,7 @@ var plugin = {
     },
     render: function render(_ref2) {
       var field = _ref2.field,
-          getBind = _ref2.getBind;
+        getBind = _ref2.getBind;
       var Bind = getBind();
       return /*#__PURE__*/_react.default.createElement(Bind, null, function (bindProps) {
         return /*#__PURE__*/_react.default.createElement(_Input.Input, Object.assign({}, bindProps, {

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

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","get","render","getBind","Bind","bindProps","value","onChange","label","placeholderText","helpText"],"sources":["numberInput.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { i18n } from \"@webiny/app/i18n\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/number\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\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                    {bindProps => {\n                        return (\n                            <Input\n                                {...bindProps}\n                                onChange={value => {\n                                    return bindProps.onChange(value);\n                                }}\n                                label={field.label}\n                                placeholder={field.placeholderText}\n                                description={field.helpText}\n                                type=\"number\"\n                                data-testid={`fr.input.number.${field.label}`}\n                            />\n                        );\n                    }}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,sCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,kCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,cADR;IAENF,IAAI,EAAEL,CAAF,+FAFE;IAGNQ,WAAW,EAAER,CAAF,4IAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OACIA,KAAK,CAACN,IAAN,KAAe,QAAf,IACA,CAACM,KAAK,CAACC,cADP,IAEA,CAAC,IAAAC,YAAA,EAAIF,KAAJ,EAAW,0BAAX,CAHL;IAKH,CAVK;IAWNG,MAXM,yBAWqB;MAAA,IAAlBH,KAAkB,SAAlBA,KAAkB;MAAA,IAAXI,OAAW,SAAXA,OAAW;MACvB,IAAMC,IAAI,GAAGD,OAAO,EAApB;MAEA,oBACI,6BAAC,IAAD,QACK,UAAAE,SAAS,EAAI;QACV,oBACI,6BAAC,YAAD,oBACQA,SADR;UAEI,QAAQ,EAAE,kBAAAC,KAAK,EAAI;YACf,OAAOD,SAAS,CAACE,QAAV,CAAmBD,KAAnB,CAAP;UACH,CAJL;UAKI,KAAK,EAAEP,KAAK,CAACS,KALjB;UAMI,WAAW,EAAET,KAAK,CAACU,eANvB;UAOI,WAAW,EAAEV,KAAK,CAACW,QAPvB;UAQI,IAAI,EAAC,QART;UASI,yCAAgCX,KAAK,CAACS,KAAtC;QATJ,GADJ;MAaH,CAfL,CADJ;IAmBH;EAjCK;AAH+B,CAA7C;eAwCehB,M"}
+{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","get","render","getBind","Bind","bindProps","value","onChange","label","placeholderText","helpText"],"sources":["numberInput.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { i18n } from \"@webiny/app/i18n\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/number\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\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                    {bindProps => {\n                        return (\n                            <Input\n                                {...bindProps}\n                                onChange={value => {\n                                    return bindProps.onChange(value);\n                                }}\n                                label={field.label}\n                                placeholder={field.placeholderText}\n                                description={field.helpText}\n                                type=\"number\"\n                                data-testid={`fr.input.number.${field.label}`}\n                            />\n                        );\n                    }}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;AAAA;AACA;AAEA;AACA;AAAwC;AAExC,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,sCAAsC,CAAC;AAEzD,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,kCAAkC;EACxCC,QAAQ,EAAE;IACNC,YAAY,EAAE,cAAc;IAC5BF,IAAI,EAAEL,CAAC,+FAAc;IACrBQ,WAAW,EAAER,CAAC,4IAAuD;IACrES,MAAM,wBAAY;MAAA,IAATC,KAAK,QAALA,KAAK;MACV,OACIA,KAAK,CAACN,IAAI,KAAK,QAAQ,IACvB,CAACM,KAAK,CAACC,cAAc,IACrB,CAAC,IAAAC,YAAG,EAACF,KAAK,EAAE,0BAA0B,CAAC;IAE/C,CAAC;IACDG,MAAM,yBAAqB;MAAA,IAAlBH,KAAK,SAALA,KAAK;QAAEI,OAAO,SAAPA,OAAO;MACnB,IAAMC,IAAI,GAAGD,OAAO,EAAE;MAEtB,oBACI,6BAAC,IAAI,QACA,UAAAE,SAAS,EAAI;QACV,oBACI,6BAAC,YAAK,oBACEA,SAAS;UACb,QAAQ,EAAE,kBAAAC,KAAK,EAAI;YACf,OAAOD,SAAS,CAACE,QAAQ,CAACD,KAAK,CAAC;UACpC,CAAE;UACF,KAAK,EAAEP,KAAK,CAACS,KAAM;UACnB,WAAW,EAAET,KAAK,CAACU,eAAgB;UACnC,WAAW,EAAEV,KAAK,CAACW,QAAS;UAC5B,IAAI,EAAC,QAAQ;UACb,yCAAgCX,KAAK,CAACS,KAAK;QAAG,GAChD;MAEV,CAAC,CACE;IAEf;EACJ;AACJ,CAAC;AAAC,eAEahB,MAAM;AAAA"}

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

@@ -1,30 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _get = _interopRequireDefault(require("lodash/get"));
-
 var _Input = require("@webiny/ui/Input");
-
 var _i18n = require("@webiny/app/i18n");
-
 var _close = require("../../../icons/close.svg");
-
 var _DynamicSection = _interopRequireDefault(require("../DynamicSection"));
-
 var _templateObject, _templateObject2, _templateObject3;
-
 var t = _i18n.i18n.ns("app-headless-cms/admin/fields/text");
-
 var plugin = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-number-inputs",
@@ -39,12 +28,11 @@ var plugin = {
     render: function render(props) {
       return /*#__PURE__*/_react.default.createElement(_DynamicSection.default, props, function (_ref2) {
         var bind = _ref2.bind,
-            index = _ref2.index;
+          index = _ref2.index;
         return /*#__PURE__*/_react.default.createElement(_Input.Input, Object.assign({}, bind.index, {
           onChange: function onChange(value) {
             return bind.index.onChange(value);
           },
-          autoFocus: true,
           onEnter: function onEnter() {
             return bind.field.appendValue("");
           },

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

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","get","render","props","bind","index","value","onChange","appendValue","number","icon","onClick","removeValue"],"sources":["numberInputs.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/close.svg\";\nimport DynamicSection from \"../DynamicSection\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\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                        <Input\n                            {...bind.index}\n                            onChange={value => {\n                                return bind.index.onChange(value);\n                            }}\n                            autoFocus\n                            onEnter={() => bind.field.appendValue(\"\")}\n                            label={t`Value {number}`({ number: index + 1 })}\n                            type=\"number\"\n                            trailingIcon={\n                                index > 0 && {\n                                    icon: <DeleteIcon />,\n                                    onClick: () => bind.field.removeValue(index)\n                                }\n                            }\n                        />\n                    )}\n                </DynamicSection>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,yCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,eADR;IAENF,IAAI,EAAEL,CAAF,gGAFE;IAGNQ,WAAW,EAAER,CAAF,4HAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OACIA,KAAK,CAACN,IAAN,KAAe,QAAf,IACA,CAAC,CAACM,KAAK,CAACC,cADR,IAEA,CAAC,IAAAC,YAAA,EAAIF,KAAJ,EAAW,0BAAX,CAHL;IAKH,CAVK;IAWNG,MAXM,kBAWCC,KAXD,EAWQ;MACV,oBACI,6BAAC,uBAAD,EAAoBA,KAApB,EACK;QAAA,IAAGC,IAAH,SAAGA,IAAH;QAAA,IAASC,KAAT,SAASA,KAAT;QAAA,oBACG,6BAAC,YAAD,oBACQD,IAAI,CAACC,KADb;UAEI,QAAQ,EAAE,kBAAAC,KAAK,EAAI;YACf,OAAOF,IAAI,CAACC,KAAL,CAAWE,QAAX,CAAoBD,KAApB,CAAP;UACH,CAJL;UAKI,SAAS,MALb;UAMI,OAAO,EAAE;YAAA,OAAMF,IAAI,CAACL,KAAL,CAAWS,WAAX,CAAuB,EAAvB,CAAN;UAAA,CANb;UAOI,KAAK,EAAEnB,CAAC,mGAAD,CAAkB;YAAEoB,MAAM,EAAEJ,KAAK,GAAG;UAAlB,CAAlB,CAPX;UAQI,IAAI,EAAC,QART;UASI,YAAY,EACRA,KAAK,GAAG,CAAR,IAAa;YACTK,IAAI,eAAE,6BAAC,qBAAD,OADG;YAETC,OAAO,EAAE;cAAA,OAAMP,IAAI,CAACL,KAAL,CAAWa,WAAX,CAAuBP,KAAvB,CAAN;YAAA;UAFA;QAVrB,GADH;MAAA,CADL,CADJ;IAsBH;EAlCK;AAH+B,CAA7C;eAyCeb,M"}
+{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","get","render","props","bind","index","value","onChange","appendValue","number","icon","onClick","removeValue"],"sources":["numberInputs.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/close.svg\";\nimport DynamicSection from \"../DynamicSection\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\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                        <Input\n                            {...bind.index}\n                            onChange={value => {\n                                return bind.index.onChange(value);\n                            }}\n                            onEnter={() => bind.field.appendValue(\"\")}\n                            label={t`Value {number}`({ number: index + 1 })}\n                            type=\"number\"\n                            trailingIcon={\n                                index > 0 && {\n                                    icon: <DeleteIcon />,\n                                    onClick: () => bind.field.removeValue(index)\n                                }\n                            }\n                        />\n                    )}\n                </DynamicSection>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAA+C;AAE/C,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,oCAAoC,CAAC;AAEvD,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,yCAAyC;EAC/CC,QAAQ,EAAE;IACNC,YAAY,EAAE,eAAe;IAC7BF,IAAI,EAAEL,CAAC,gGAAe;IACtBQ,WAAW,EAAER,CAAC,4HAAyC;IACvDS,MAAM,wBAAY;MAAA,IAATC,KAAK,QAALA,KAAK;MACV,OACIA,KAAK,CAACN,IAAI,KAAK,QAAQ,IACvB,CAAC,CAACM,KAAK,CAACC,cAAc,IACtB,CAAC,IAAAC,YAAG,EAACF,KAAK,EAAE,0BAA0B,CAAC;IAE/C,CAAC;IACDG,MAAM,kBAACC,KAAK,EAAE;MACV,oBACI,6BAAC,uBAAc,EAAKA,KAAK,EACpB;QAAA,IAAGC,IAAI,SAAJA,IAAI;UAAEC,KAAK,SAALA,KAAK;QAAA,oBACX,6BAAC,YAAK,oBACED,IAAI,CAACC,KAAK;UACd,QAAQ,EAAE,kBAAAC,KAAK,EAAI;YACf,OAAOF,IAAI,CAACC,KAAK,CAACE,QAAQ,CAACD,KAAK,CAAC;UACrC,CAAE;UACF,OAAO,EAAE;YAAA,OAAMF,IAAI,CAACL,KAAK,CAACS,WAAW,CAAC,EAAE,CAAC;UAAA,CAAC;UAC1C,KAAK,EAAEnB,CAAC,oGAAiB;YAAEoB,MAAM,EAAEJ,KAAK,GAAG;UAAE,CAAC,CAAE;UAChD,IAAI,EAAC,QAAQ;UACb,YAAY,EACRA,KAAK,GAAG,CAAC,IAAI;YACTK,IAAI,eAAE,6BAAC,qBAAU,OAAG;YACpBC,OAAO,EAAE;cAAA,OAAMP,IAAI,CAACL,KAAK,CAACa,WAAW,CAACP,KAAK,CAAC;YAAA;UAChD;QACH,GACH;MAAA,CACL,CACY;IAEzB;EACJ;AACJ,CAAC;AAAC,eAEab,MAAM;AAAA"}

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

@@ -1,9 +1,15 @@
 /// <reference types="react" />
-/// <reference types="web" />
 /// <reference types="react" />
+/// <reference types="web" />
 export declare const fieldsWrapperStyle: string;
 export declare const dynamicSectionTitleStyle: string;
 export declare const dynamicSectionGridStyle: string;
 export declare const fieldsGridStyle: string;
-export declare const ObjectItem: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
-export declare const ItemHighLight: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+export declare const ObjectItem: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ItemHighLight: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.fieldsWrapperStyle = exports.fieldsGridStyle = exports.dynamicSectionTitleStyle = exports.dynamicSectionGridStyle = exports.ObjectItem = exports.ItemHighLight = void 0;
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _emotion = require("emotion");
-
 var fieldsWrapperStyle = /*#__PURE__*/(0, _emotion.css)("border-left:2px solid var(--mdc-theme-on-background);padding-left:16px;&:focus-within{border-color:var(--mdc-theme-primary);}label:fieldsWrapperStyle;");
 exports.fieldsWrapperStyle = fieldsWrapperStyle;
 var dynamicSectionTitleStyle = /*#__PURE__*/(0, _emotion.css)("margin-top:24px;label:dynamicSectionTitleStyle;");

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

@@ -1 +1 @@
-{"version":3,"names":["fieldsWrapperStyle","css","dynamicSectionTitleStyle","dynamicSectionGridStyle","fieldsGridStyle","ObjectItem","styled","ItemHighLight","opacity","animation","border","boxShadow","backgroundColor","borderRadius","position","top","left","right","bottom","zIndex","pointerEvents"],"sources":["StyledComponents.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\n\nexport const fieldsWrapperStyle = css`\n    border-left: 2px solid var(--mdc-theme-on-background);\n    padding-left: 16px;\n\n    &:focus-within {\n        border-color: var(--mdc-theme-primary);\n    }\n`;\n\nexport const dynamicSectionTitleStyle = css`\n    margin-top: 24px;\n`;\n\nexport const dynamicSectionGridStyle = css`\n    & > .mdc-layout-grid__inner {\n        grid-gap: 8px;\n    }\n`;\n\nexport const fieldsGridStyle = css`\n    &.mdc-layout-grid {\n        padding: 8px;\n    }\n`;\n\nexport const ObjectItem = styled.div`\n    position: relative;\n`;\n\nexport const ItemHighLight = styled(\"div\")({\n    \"&\": {\n        opacity: 0,\n        animation: \"wf-blink-in 1s\",\n        border: \"2px solid var(--mdc-theme-secondary)\",\n        boxShadow: \"0 0 15px var(--mdc-theme-secondary)\",\n        backgroundColor: \"rgba(42, 217, 134, 0.25)\",\n        borderRadius: \"2px\",\n        position: \"absolute\",\n        top: 0,\n        left: -12,\n        right: -8,\n        bottom: 0,\n        zIndex: 1,\n        pointerEvents: \"none\"\n    },\n    \"@keyframes wf-blink-in\": { \"40%\": { opacity: 1 } }\n});\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEO,IAAMA,kBAAkB,oBAAGC,YAAH,2JAAxB;;AASA,IAAMC,wBAAwB,oBAAGD,YAAH,oDAA9B;;AAIA,IAAME,uBAAuB,oBAAGF,YAAH,6EAA7B;;AAMA,IAAMG,eAAe,oBAAGH,YAAH,0DAArB;;AAMA,IAAMI,UAAU,oBAAGC,eAAH;EAAA;EAAA;AAAA,wBAAhB;;AAIA,IAAMC,aAAa,oBAAGD,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACvC,KAAK;IACDE,OAAO,EAAE,CADR;IAEDC,SAAS,EAAE,gBAFV;IAGDC,MAAM,EAAE,sCAHP;IAIDC,SAAS,EAAE,qCAJV;IAKDC,eAAe,EAAE,0BALhB;IAMDC,YAAY,EAAE,KANb;IAODC,QAAQ,EAAE,UAPT;IAQDC,GAAG,EAAE,CARJ;IASDC,IAAI,EAAE,CAAC,EATN;IAUDC,KAAK,EAAE,CAAC,CAVP;IAWDC,MAAM,EAAE,CAXP;IAYDC,MAAM,EAAE,CAZP;IAaDC,aAAa,EAAE;EAbd,CADkC;EAgBvC,0BAA0B;IAAE,OAAO;MAAEZ,OAAO,EAAE;IAAX;EAAT;AAhBa,CAAjB,CAAnB"}
+{"version":3,"names":["fieldsWrapperStyle","css","dynamicSectionTitleStyle","dynamicSectionGridStyle","fieldsGridStyle","ObjectItem","styled","ItemHighLight","opacity","animation","border","boxShadow","backgroundColor","borderRadius","position","top","left","right","bottom","zIndex","pointerEvents"],"sources":["StyledComponents.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { css } from \"emotion\";\n\nexport const fieldsWrapperStyle = css`\n    border-left: 2px solid var(--mdc-theme-on-background);\n    padding-left: 16px;\n\n    &:focus-within {\n        border-color: var(--mdc-theme-primary);\n    }\n`;\n\nexport const dynamicSectionTitleStyle = css`\n    margin-top: 24px;\n`;\n\nexport const dynamicSectionGridStyle = css`\n    & > .mdc-layout-grid__inner {\n        grid-gap: 8px;\n    }\n`;\n\nexport const fieldsGridStyle = css`\n    &.mdc-layout-grid {\n        padding: 8px;\n    }\n`;\n\nexport const ObjectItem = styled.div`\n    position: relative;\n`;\n\nexport const ItemHighLight = styled(\"div\")({\n    \"&\": {\n        opacity: 0,\n        animation: \"wf-blink-in 1s\",\n        border: \"2px solid var(--mdc-theme-secondary)\",\n        boxShadow: \"0 0 15px var(--mdc-theme-secondary)\",\n        backgroundColor: \"rgba(42, 217, 134, 0.25)\",\n        borderRadius: \"2px\",\n        position: \"absolute\",\n        top: 0,\n        left: -12,\n        right: -8,\n        bottom: 0,\n        zIndex: 1,\n        pointerEvents: \"none\"\n    },\n    \"@keyframes wf-blink-in\": { \"40%\": { opacity: 1 } }\n});\n"],"mappings":";;;;;;;AAAA;AACA;AAEO,IAAMA,kBAAkB,oBAAGC,YAAG,2JAOpC;AAAC;AAEK,IAAMC,wBAAwB,oBAAGD,YAAG,oDAE1C;AAAC;AAEK,IAAME,uBAAuB,oBAAGF,YAAG,6EAIzC;AAAC;AAEK,IAAMG,eAAe,oBAAGH,YAAG,0DAIjC;AAAC;AAEK,IAAMI,UAAU,oBAAGC,eAAM;EAAA;EAAA;AAAA,wBAE/B;AAAC;AAEK,IAAMC,aAAa,oBAAGD,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACvC,GAAG,EAAE;IACDE,OAAO,EAAE,CAAC;IACVC,SAAS,EAAE,gBAAgB;IAC3BC,MAAM,EAAE,sCAAsC;IAC9CC,SAAS,EAAE,qCAAqC;IAChDC,eAAe,EAAE,0BAA0B;IAC3CC,YAAY,EAAE,KAAK;IACnBC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC,EAAE;IACTC,KAAK,EAAE,CAAC,CAAC;IACTC,MAAM,EAAE,CAAC;IACTC,MAAM,EAAE,CAAC;IACTC,aAAa,EAAE;EACnB,CAAC;EACD,wBAAwB,EAAE;IAAE,KAAK,EAAE;MAAEZ,OAAO,EAAE;IAAE;EAAE;AACtD,CAAC,CAAC;AAAC"}

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

@@ -1,15 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var _singleObject = _interopRequireDefault(require("./singleObject"));
-
+var _singleObjectInline = _interopRequireDefault(require("./singleObjectInline"));
+var _singleObjectAccordion = _interopRequireDefault(require("./singleObjectAccordion"));
 var _multipleObjects = _interopRequireDefault(require("./multipleObjects"));
-
-var _default = [_singleObject.default, _multipleObjects.default];
+var _multipleObjectsAccordion = _interopRequireDefault(require("./multipleObjectsAccordion"));
+var _default = [_singleObjectInline.default, _singleObjectAccordion.default, _multipleObjects.default, _multipleObjectsAccordion.default];
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"names":["singleObject","multipleObjects"],"sources":["index.ts"],"sourcesContent":["import singleObject from \"./singleObject\";\nimport multipleObjects from \"./multipleObjects\";\n\nexport default [singleObject, multipleObjects];\n"],"mappings":";;;;;;;;;AAAA;;AACA;;eAEe,CAACA,qBAAD,EAAeC,wBAAf,C"}
+{"version":3,"names":["singleObjectInline","singleObjectAccordion","multipleObjects","multipleObjectsAccordion"],"sources":["index.ts"],"sourcesContent":["import singleObjectInline from \"./singleObjectInline\";\nimport singleObjectAccordion from \"./singleObjectAccordion\";\nimport multipleObjects from \"./multipleObjects\";\nimport multipleObjectsAccordion from \"./multipleObjectsAccordion\";\n\nexport default [\n    singleObjectInline,\n    singleObjectAccordion,\n    multipleObjects,\n    multipleObjectsAccordion\n];\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAAkE,eAEnD,CACXA,2BAAkB,EAClBC,8BAAqB,EACrBC,wBAAe,EACfC,iCAAwB,CAC3B;AAAA"}

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

@@ -1,76 +1,58 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _i18n = require("@webiny/app/i18n");
-
 var _Button = require("@webiny/ui/Button");
-
 var _Grid = require("@webiny/ui/Grid");
-
 var _FormElementMessage = require("@webiny/ui/FormElementMessage");
-
 var _Typography = require("@webiny/ui/Typography");
-
 var _DynamicSection = _interopRequireDefault(require("../DynamicSection"));
-
 var _Fields = require("../../../components/ContentEntryForm/Fields");
-
 var _close = require("../../../icons/close.svg");
-
 var _arrow_drop_up = require("./arrow_drop_up.svg");
-
 var _arrow_drop_down = require("./arrow_drop_down.svg");
-
 var _Accordion = _interopRequireDefault(require("../Accordion"));
-
 var _StyledComponents = require("./StyledComponents");
-
 var _utils = require("@webiny/utils");
-
 var _templateObject, _templateObject2;
-
 var t = _i18n.i18n.ns("app-headless-cms/admin/fields/text");
-
 var Actions = function Actions(_ref) {
   var setHighlightIndex = _ref.setHighlightIndex,
-      bind = _ref.bind,
-      index = _ref.index;
+    bind = _ref.bind,
+    index = _ref.index;
+  var _bind$field = bind.field,
+    moveValueDown = _bind$field.moveValueDown,
+    moveValueUp = _bind$field.moveValueUp;
+  var onDown = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    moveValueDown(index);
+    setHighlightIndex(function (map) {
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index + 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
+    });
+  }, [moveValueDown, index]);
+  var onUp = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    moveValueUp(index);
+    setHighlightIndex(function (map) {
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index - 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
+    });
+  }, [moveValueUp, index]);
   return index > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     icon: /*#__PURE__*/_react.default.createElement(_arrow_drop_down.ReactComponent, null),
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      bind.field.moveValueDown(index);
-      setHighlightIndex(function (map) {
-        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index + 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
-      });
-    }
+    onClick: onDown
   }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     icon: /*#__PURE__*/_react.default.createElement(_arrow_drop_up.ReactComponent, null),
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      bind.field.moveValueUp(index);
-      setHighlightIndex(function (map) {
-        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index - 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
-      });
-    }
+    onClick: onUp
   }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     icon: /*#__PURE__*/_react.default.createElement(_close.ReactComponent, null),
     onClick: function onClick() {
@@ -78,15 +60,13 @@ var Actions = function Actions(_ref) {
     }
   })) : null;
 };
-
 var ObjectsRenderer = function ObjectsRenderer(props) {
   var _useState = (0, _react.useState)({}),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      highlightMap = _useState2[0],
-      setHighlightIndex = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    highlightMap = _useState2[0],
+    setHighlightIndex = _useState2[1];
   var field = props.field,
-      contentModel = props.contentModel;
+    contentModel = props.contentModel;
   return /*#__PURE__*/_react.default.createElement(_DynamicSection.default, Object.assign({}, props, {
     emptyValue: {},
     showLabel: false,
@@ -101,8 +81,8 @@ var ObjectsRenderer = function ObjectsRenderer(props) {
     gridClassName: _StyledComponents.dynamicSectionGridStyle
   }), function (_ref2) {
     var Bind = _ref2.Bind,
-        bind = _ref2.bind,
-        index = _ref2.index;
+      bind = _ref2.bind,
+      index = _ref2.index;
     return /*#__PURE__*/_react.default.createElement(_StyledComponents.ObjectItem, null, highlightMap[index] ? /*#__PURE__*/_react.default.createElement(_StyledComponents.ItemHighLight, {
       key: highlightMap[index]
     }) : null, /*#__PURE__*/_react.default.createElement(_Accordion.default, {
@@ -111,7 +91,8 @@ var ObjectsRenderer = function ObjectsRenderer(props) {
         setHighlightIndex: setHighlightIndex,
         index: index,
         bind: bind
-      }) // Open first Accordion by default
+      })
+      // Open first Accordion by default
       ,
       defaultValue: index === 0
     }, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
@@ -127,17 +108,16 @@ var ObjectsRenderer = function ObjectsRenderer(props) {
     })))));
   });
 };
-
 var plugin = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-objects",
   renderer: {
     rendererName: "objects",
-    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Objects"]))),
+    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Inline Form"]))),
     description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders a set of fields."]))),
     canUse: function canUse(_ref3) {
       var field = _ref3.field;
-      return field.type === "object" && !!field.multipleValues;
+      return field.type === "object" && Boolean(field.multipleValues);
     },
     render: function render(props) {
       return /*#__PURE__*/_react.default.createElement(ObjectsRenderer, props);

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

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","Actions","setHighlightIndex","bind","index","e","stopPropagation","field","moveValueDown","map","generateAlphaNumericLowerCaseId","moveValueUp","removeValue","ObjectsRenderer","props","useState","highlightMap","contentModel","value","dynamicSectionTitleStyle","label","length","helpText","dynamicSectionGridStyle","Bind","fieldsWrapperStyle","settings","fields","layout","fieldsGridStyle","plugin","type","name","renderer","rendererName","description","canUse","multipleValues","render"],"sources":["multipleObjects.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction, useState } from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport {\n    BindComponentRenderProp,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldRendererProps\n} from \"~/types\";\nimport DynamicSection from \"../DynamicSection\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/close.svg\";\nimport { ReactComponent as ArrowUp } from \"./arrow_drop_up.svg\";\nimport { ReactComponent as ArrowDown } from \"./arrow_drop_down.svg\";\nimport Accordion from \"~/admin/plugins/fieldRenderers/Accordion\";\nimport {\n    fieldsWrapperStyle,\n    dynamicSectionTitleStyle,\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"./StyledComponents\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\ninterface ActionsProps {\n    setHighlightIndex: Dispatch<SetStateAction<{ [key: number]: string }>>;\n    index: number;\n    bind: {\n        index: BindComponentRenderProp;\n        field: BindComponentRenderProp;\n    };\n}\n\nconst Actions: React.FC<ActionsProps> = ({ setHighlightIndex, bind, index }) => {\n    return index > 0 ? (\n        <>\n            <IconButton\n                icon={<ArrowDown />}\n                onClick={e => {\n                    e.stopPropagation();\n                    bind.field.moveValueDown(index);\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index + 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n                }}\n            />\n            <IconButton\n                icon={<ArrowUp />}\n                onClick={e => {\n                    e.stopPropagation();\n                    bind.field.moveValueUp(index);\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index - 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n                }}\n            />\n\n            <IconButton icon={<DeleteIcon />} onClick={() => bind.field.removeValue(index)} />\n        </>\n    ) : null;\n};\n\nconst ObjectsRenderer: React.FC<CmsEditorFieldRendererProps> = props => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const { field, contentModel } = props;\n\n    return (\n        <DynamicSection\n            {...props}\n            emptyValue={{}}\n            showLabel={false}\n            renderTitle={value => (\n                <Cell span={12} className={dynamicSectionTitleStyle}>\n                    <Typography use={\"headline5\"}>\n                        {`${field.label} ${value.length ? `(${value.length})` : \"\"}`}\n                    </Typography>\n                    {field.helpText && <FormElementMessage>{field.helpText}</FormElementMessage>}\n                </Cell>\n            )}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => (\n                <ObjectItem>\n                    {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                    <Accordion\n                        title={`${props.field.label} #${index + 1}`}\n                        action={\n                            <Actions\n                                setHighlightIndex={setHighlightIndex}\n                                index={index}\n                                bind={bind}\n                            />\n                        }\n                        // Open first Accordion by default\n                        defaultValue={index === 0}\n                    >\n                        <Cell span={12} className={fieldsWrapperStyle}>\n                            <Fields\n                                Bind={Bind}\n                                {...bind.index}\n                                contentModel={contentModel}\n                                fields={(field.settings || {}).fields || []}\n                                layout={(field.settings || {}).layout || []}\n                                gridClassName={fieldsGridStyle}\n                            />\n                        </Cell>\n                    </Accordion>\n                </ObjectItem>\n            )}\n        </DynamicSection>\n    );\n};\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-objects\",\n    renderer: {\n        rendererName: \"objects\",\n        name: t`Objects`,\n        description: t`Renders a set of fields.`,\n        canUse({ field }) {\n            return field.type === \"object\" && !!field.multipleValues;\n        },\n        render(props) {\n            return <ObjectsRenderer {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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"}
+{"version":3,"names":["t","i18n","ns","Actions","setHighlightIndex","bind","index","field","moveValueDown","moveValueUp","onDown","useCallback","e","stopPropagation","map","generateAlphaNumericLowerCaseId","onUp","removeValue","ObjectsRenderer","props","useState","highlightMap","contentModel","value","dynamicSectionTitleStyle","label","length","helpText","dynamicSectionGridStyle","Bind","fieldsWrapperStyle","settings","fields","layout","fieldsGridStyle","plugin","type","name","renderer","rendererName","description","canUse","Boolean","multipleValues","render"],"sources":["multipleObjects.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction, useState, useCallback } from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport {\n    BindComponentRenderProp,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldRendererProps\n} from \"~/types\";\nimport DynamicSection from \"../DynamicSection\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/close.svg\";\nimport { ReactComponent as ArrowUp } from \"./arrow_drop_up.svg\";\nimport { ReactComponent as ArrowDown } from \"./arrow_drop_down.svg\";\nimport Accordion from \"~/admin/plugins/fieldRenderers/Accordion\";\nimport {\n    fieldsWrapperStyle,\n    dynamicSectionTitleStyle,\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"./StyledComponents\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\ninterface ActionsProps {\n    setHighlightIndex: Dispatch<SetStateAction<{ [key: number]: string }>>;\n    index: number;\n    bind: {\n        index: BindComponentRenderProp;\n        field: BindComponentRenderProp;\n    };\n}\n\nconst Actions: React.FC<ActionsProps> = ({ setHighlightIndex, bind, index }) => {\n    const { moveValueDown, moveValueUp } = bind.field;\n\n    const onDown = useCallback(\n        e => {\n            e.stopPropagation();\n            moveValueDown(index);\n            setHighlightIndex(map => ({\n                ...map,\n                [index + 1]: generateAlphaNumericLowerCaseId(12)\n            }));\n        },\n        [moveValueDown, index]\n    );\n\n    const onUp = useCallback(\n        e => {\n            e.stopPropagation();\n            moveValueUp(index);\n            setHighlightIndex(map => ({\n                ...map,\n                [index - 1]: generateAlphaNumericLowerCaseId(12)\n            }));\n        },\n        [moveValueUp, index]\n    );\n\n    return index > 0 ? (\n        <>\n            <IconButton icon={<ArrowDown />} onClick={onDown} />\n            <IconButton icon={<ArrowUp />} onClick={onUp} />\n            <IconButton icon={<DeleteIcon />} onClick={() => bind.field.removeValue(index)} />\n        </>\n    ) : null;\n};\n\nconst ObjectsRenderer: React.FC<CmsEditorFieldRendererProps> = props => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const { field, contentModel } = props;\n\n    return (\n        <DynamicSection\n            {...props}\n            emptyValue={{}}\n            showLabel={false}\n            renderTitle={value => (\n                <Cell span={12} className={dynamicSectionTitleStyle}>\n                    <Typography use={\"headline5\"}>\n                        {`${field.label} ${value.length ? `(${value.length})` : \"\"}`}\n                    </Typography>\n                    {field.helpText && <FormElementMessage>{field.helpText}</FormElementMessage>}\n                </Cell>\n            )}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => (\n                <ObjectItem>\n                    {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                    <Accordion\n                        title={`${props.field.label} #${index + 1}`}\n                        action={\n                            <Actions\n                                setHighlightIndex={setHighlightIndex}\n                                index={index}\n                                bind={bind}\n                            />\n                        }\n                        // Open first Accordion by default\n                        defaultValue={index === 0}\n                    >\n                        <Cell span={12} className={fieldsWrapperStyle}>\n                            <Fields\n                                Bind={Bind}\n                                {...bind.index}\n                                contentModel={contentModel}\n                                fields={(field.settings || {}).fields || []}\n                                layout={(field.settings || {}).layout || []}\n                                gridClassName={fieldsGridStyle}\n                            />\n                        </Cell>\n                    </Accordion>\n                </ObjectItem>\n            )}\n        </DynamicSection>\n    );\n};\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-objects\",\n    renderer: {\n        rendererName: \"objects\",\n        name: t`Inline Form`,\n        description: t`Renders a set of fields.`,\n        canUse({ field }) {\n            return field.type === \"object\" && Boolean(field.multipleValues);\n        },\n        render(props) {\n            return <ObjectsRenderer {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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"}

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

@@ -1,59 +1,37 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _i18n = require("@webiny/app/i18n");
-
 var _Button = require("@webiny/ui/Button");
-
 var _Grid = require("@webiny/ui/Grid");
-
 var _Accordion = require("@webiny/ui/Accordion");
-
 var _DynamicSection = _interopRequireDefault(require("../DynamicSection"));
-
 var _Fields = require("../../../components/ContentEntryForm/Fields");
-
 var _close = require("../../../icons/close.svg");
-
 var _arrow_drop_up = require("./arrow_drop_up.svg");
-
 var _arrow_drop_down = require("./arrow_drop_down.svg");
-
 var _Accordion2 = _interopRequireDefault(require("../Accordion"));
-
 var _StyledComponents = require("./StyledComponents");
-
 var _utils = require("@webiny/utils");
-
 var _templateObject, _templateObject2;
-
 var t = _i18n.i18n.ns("app-headless-cms/admin/fields/text");
-
 var Actions = function Actions(_ref) {
   var setHighlightIndex = _ref.setHighlightIndex,
-      bind = _ref.bind,
-      index = _ref.index;
+    bind = _ref.bind,
+    index = _ref.index;
   var _bind$field = bind.field,
-      moveValueDown = _bind$field.moveValueDown,
-      moveValueUp = _bind$field.moveValueUp;
+    moveValueDown = _bind$field.moveValueDown,
+    moveValueUp = _bind$field.moveValueUp;
   var onDown = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
     moveValueDown(index);
@@ -81,15 +59,13 @@ var Actions = function Actions(_ref) {
     }
   })) : null;
 };
-
 var ObjectsRenderer = function ObjectsRenderer(props) {
   var _useState = (0, _react.useState)({}),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      highlightMap = _useState2[0],
-      setHighlightIndex = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    highlightMap = _useState2[0],
+    setHighlightIndex = _useState2[1];
   var field = props.field,
-      contentModel = props.contentModel;
+    contentModel = props.contentModel;
   return /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
     title: field.label,
     description: field.helpText
@@ -99,8 +75,8 @@ var ObjectsRenderer = function ObjectsRenderer(props) {
     gridClassName: _StyledComponents.dynamicSectionGridStyle
   }), function (_ref2) {
     var Bind = _ref2.Bind,
-        bind = _ref2.bind,
-        index = _ref2.index;
+      bind = _ref2.bind,
+      index = _ref2.index;
     return /*#__PURE__*/_react.default.createElement(_StyledComponents.ObjectItem, null, highlightMap[index] ? /*#__PURE__*/_react.default.createElement(_StyledComponents.ItemHighLight, {
       key: highlightMap[index]
     }) : null, /*#__PURE__*/_react.default.createElement(_Accordion2.default, {
@@ -109,7 +85,8 @@ var ObjectsRenderer = function ObjectsRenderer(props) {
         setHighlightIndex: setHighlightIndex,
         index: index,
         bind: bind
-      }) // Open first Accordion by default
+      })
+      // Open first Accordion by default
       ,
       defaultValue: index === 0
     }, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
@@ -125,7 +102,6 @@ var ObjectsRenderer = function ObjectsRenderer(props) {
     })))));
   })));
 };
-
 var plugin = {
   type: "cms-editor-field-renderer",
   name: "cms-editor-field-renderer-objects-accordion",