@webiny/app-headless-cms 0.0.0-unstable.78f581c1d2 → 0.0.0-unstable.7be00a75a9

package/admin/plugins/fieldRenderers/DynamicSection.js

@@ -1,121 +1,80 @@
-"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 _emotion = require("emotion");
-
-var _i18n = require("@webiny/app/i18n");
-
-var _Grid = require("@webiny/ui/Grid");
-
-var _Button = require("@webiny/ui/Button");
-
-var _FormElementMessage = require("@webiny/ui/FormElementMessage");
-
-var _add18px = require("@webiny/app-admin/assets/icons/add-18px.svg");
-
-var _templateObject;
-
-var t = _i18n.i18n.ns("app-headless-cms/admin/fields/text");
-
-var style = {
-  addButton: /*#__PURE__*/(0, _emotion.css)({
-    width: "100%",
-    borderTop: "1px solid var(--mdc-theme-background)",
-    paddingTop: 8
-  }, "label:addButton;")
+import react from "react";
+import classnames from "classnames";
+import { css } from "@emotion/css";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { ReactComponent } from "@webiny/icons/add.svg";
+import { ParentFieldProvider } from "../../hooks/index.js";
+import { ParentValueIndexProvider } from "../../components/ModelFieldProvider/index.js";
+import { getMultiValueRendererSettings } from "./MultiValueRendererSettings.js";
+import { Button, FormComponentDescription, FormComponentErrorMessage, FormComponentNote, Grid, Separator, cn } from "@webiny/admin-ui";
+const t = i18n.ns("app-headless-cms/admin/fields/text");
+const style = {
+    gridContainer: css`
+        padding: 0 !important;
+    `
 };
-
-var DynamicSection = function DynamicSection(_ref) {
-  var field = _ref.field,
-      getBind = _ref.getBind,
-      Label = _ref.Label,
-      children = _ref.children,
-      _ref$showLabel = _ref.showLabel,
-      showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
-      _ref$emptyValue = _ref.emptyValue,
-      emptyValue = _ref$emptyValue === void 0 ? "" : _ref$emptyValue,
-      renderTitle = _ref.renderTitle,
-      gridClassName = _ref.gridClassName;
-  var Bind = getBind();
-  var FirstFieldBind = getBind(0);
-  return (
-    /*#__PURE__*/
-
-    /* First we mount the top level field, for example: "items" */
-    _react.default.createElement(Bind, null, function (bindField) {
-      /**
-       * "value" -> an array of items
-       * "appendValue" -> a callback to add a new value to the top level "items" array
-       */
-      var value = bindField.value,
-          appendValue = bindField.appendValue;
-      var bindFieldValue = value || [];
-      return /*#__PURE__*/_react.default.createElement(_Grid.Grid, {
-        className: gridClassName
-      }, typeof renderTitle === "function" && renderTitle(bindFieldValue), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-        span: 12
-      }, showLabel && field.label && /*#__PURE__*/_react.default.createElement(Label, null, field.label), /*#__PURE__*/_react.default.createElement(FirstFieldBind, null, function (bindProps) {
-        return (
-          /* We bind it to index "0", so when you start typing, that index in parent array will be populated */
-          children({
-            Bind: FirstFieldBind,
-            field: field,
-            // "index" contains Bind props for this particular item in the array
-            // "field" contains Bind props for the main (parent) field.
-            bind: {
-              index: bindProps,
-              field: bindField
-            },
-            index: 0 // Binds to "items.0" in the <Form>.
-
-          })
-        );
-      })), bindFieldValue.slice(1).map(function (_, index) {
-        /* We simply increase index, and as you type, the appropriate indexes in the parent array will be updated. */
-        var realIndex = index + 1;
-        var BindField = getBind(realIndex);
-        return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-          span: 12,
-          key: realIndex
-        }, /*#__PURE__*/_react.default.createElement(BindField, null, function (bindProps) {
-          return children({
-            Bind: BindField,
-            field: field,
-            bind: {
-              index: bindProps,
-              field: bindField
-            },
-            index: realIndex
-          });
-        }));
-      }), bindField.validation.isValid === false && /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-        span: 12
-      }, /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-        error: true
-      }, bindField.validation.message)), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-        span: 12,
-        className: style.addButton
-      }, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
-        disabled: bindFieldValue[0] === undefined,
-        onClick: function onClick() {
-          return appendValue(emptyValue);
-        }
-      }, /*#__PURE__*/_react.default.createElement(_Button.ButtonIcon, {
-        icon: /*#__PURE__*/_react.default.createElement(_add18px.ReactComponent, null)
-      }), t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Add value"]))))));
-    })
-  );
+const defaultAddItem = ()=>{};
+const DynamicSection = ({ field, getBind, children, disabled = false, showLabel = true, emptyValue = "", onAddItem = defaultAddItem, gridClassName, ...props })=>{
+    const Bind = getBind();
+    const settings = getMultiValueRendererSettings(field);
+    const addValueButtonLabel = props.addValueButtonLabel ?? settings.addValueButtonLabel ?? "Add Value";
+    return /*#__PURE__*/ react.createElement(Bind, null, (bindField)=>{
+        const { value, appendValue } = bindField;
+        const bindFieldValue = value || [];
+        return /*#__PURE__*/ react.createElement(Bind.ValidationContainer, null, /*#__PURE__*/ react.createElement(ParentFieldProvider, {
+            value: value,
+            path: Bind.parentName
+        }, showLabel && /*#__PURE__*/ react.createElement("div", {
+            className: "mb-sm flex flex-col gap-y-sm"
+        }, /*#__PURE__*/ react.createElement(Separator, {
+            labelPosition: "start",
+            variant: "accent"
+        }, /*#__PURE__*/ react.createElement("span", {
+            className: "text-accent-primary text-lg font-semibold"
+        }, `${field.label} ${bindFieldValue.length ? `(${bindFieldValue.length})` : ""}`)), field.description && /*#__PURE__*/ react.createElement(FormComponentDescription, {
+            text: field.description
+        })), /*#__PURE__*/ react.createElement(Grid, {
+            className: classnames(gridClassName, style.gridContainer)
+        }, /*#__PURE__*/ react.createElement(react.Fragment, null, bindFieldValue.map((_, index)=>{
+            const BindField = getBind(index);
+            return /*#__PURE__*/ react.createElement(Grid.Column, {
+                span: 12,
+                key: index
+            }, /*#__PURE__*/ react.createElement(BindField, null, (bindProps)=>/*#__PURE__*/ react.createElement(BindField.ValidationContainer, null, /*#__PURE__*/ react.createElement(ParentValueIndexProvider, {
+                    index: index
+                }, children({
+                    Bind: BindField,
+                    field,
+                    bind: {
+                        index: bindProps,
+                        field: bindField
+                    },
+                    index
+                })), /*#__PURE__*/ react.createElement(FormComponentNote, {
+                    text: field.note
+                }))));
+        })), /*#__PURE__*/ react.createElement(react.Fragment, null, false === bindField.validation.isValid && /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+            invalid: true,
+            text: bindField.validation.message
+        }))), /*#__PURE__*/ react.createElement(Grid.Column, {
+            span: 12
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: cn(bindFieldValue.length > 0 ? "pt-none" : "pt-sm")
+        }, /*#__PURE__*/ react.createElement(Button, {
+            disabled: disabled,
+            variant: "tertiary",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            text: t(addValueButtonLabel),
+            onClick: ()=>{
+                appendValue(emptyValue);
+                onAddItem(bindFieldValue.length);
+            }
+        }))))));
+    });
 };
+const fieldRenderers_DynamicSection = DynamicSection;
+export default fieldRenderers_DynamicSection;
 
-var _default = DynamicSection;
-exports.default = _default;
+//# sourceMappingURL=DynamicSection.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","style","addButton","css","width","borderTop","paddingTop","DynamicSection","field","getBind","Label","children","showLabel","emptyValue","renderTitle","gridClassName","Bind","FirstFieldBind","bindField","value","appendValue","bindFieldValue","label","bindProps","bind","index","slice","map","_","realIndex","BindField","validation","isValid","message","undefined"],"sources":["DynamicSection.tsx"],"sourcesContent":["import React from \"react\";\nimport { css } from \"emotion\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { ButtonDefault, ButtonIcon } from \"@webiny/ui/Button\";\nimport { BindComponent, BindComponentRenderProp, CmsEditorField } from \"~/types\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { ReactComponent as AddIcon } from \"@webiny/app-admin/assets/icons/add-18px.svg\";\nimport { GetBindCallable } from \"~/admin/components/ContentEntryForm/useBind\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst style = {\n    addButton: css({\n        width: \"100%\",\n        borderTop: \"1px solid var(--mdc-theme-background)\",\n        paddingTop: 8\n    })\n};\n\nexport interface DynamicSectionPropsChildrenParams {\n    Bind: BindComponent;\n    field: CmsEditorField;\n    bind: {\n        index: BindComponentRenderProp;\n        field: BindComponentRenderProp;\n    };\n    index: number;\n}\n\nexport interface DynamicSectionProps {\n    field: CmsEditorField;\n    getBind: GetBindCallable;\n    showLabel?: boolean;\n    Label: React.ComponentType<any>;\n    children: (params: DynamicSectionPropsChildrenParams) => JSX.Element;\n    emptyValue?: any;\n    renderTitle?: (value: any[]) => React.ReactElement;\n    gridClassName?: string;\n}\n\nconst DynamicSection: React.FC<DynamicSectionProps> = ({\n    field,\n    getBind,\n    Label,\n    children,\n    showLabel = true,\n    emptyValue = \"\",\n    renderTitle,\n    gridClassName\n}) => {\n    const Bind = getBind();\n    const FirstFieldBind = getBind(0);\n\n    return (\n        /* First we mount the top level field, for example: \"items\" */\n        <Bind>\n            {bindField => {\n                /**\n                 * \"value\" -> an array of items\n                 * \"appendValue\" -> a callback to add a new value to the top level \"items\" array\n                 */\n                const { value, appendValue } = bindField;\n\n                const bindFieldValue: string[] = value || [];\n                return (\n                    <Grid className={gridClassName}>\n                        {typeof renderTitle === \"function\" && renderTitle(bindFieldValue)}\n                        <Cell span={12}>\n                            {/* We always render the first item, for better UX */}\n                            {showLabel && field.label && <Label>{field.label}</Label>}\n                            <FirstFieldBind>\n                                {bindProps =>\n                                    /* We bind it to index \"0\", so when you start typing, that index in parent array will be populated */\n                                    children({\n                                        Bind: FirstFieldBind,\n                                        field,\n                                        // \"index\" contains Bind props for this particular item in the array\n                                        // \"field\" contains Bind props for the main (parent) field.\n                                        bind: {\n                                            index: bindProps,\n                                            field: bindField\n                                        },\n                                        index: 0 // Binds to \"items.0\" in the <Form>.\n                                    })\n                                }\n                            </FirstFieldBind>\n                        </Cell>\n\n                        {/* Now we skip the first item, because we already rendered it above, and proceed with all other items. */}\n                        {bindFieldValue.slice(1).map((_, index) => {\n                            /* We simply increase index, and as you type, the appropriate indexes in the parent array will be updated. */\n                            const realIndex = index + 1;\n                            const BindField = getBind(realIndex);\n                            return (\n                                <Cell span={12} key={realIndex}>\n                                    <BindField>\n                                        {bindProps =>\n                                            children({\n                                                Bind: BindField,\n                                                field,\n                                                bind: {\n                                                    index: bindProps,\n                                                    field: bindField\n                                                },\n                                                index: realIndex\n                                            })\n                                        }\n                                    </BindField>\n                                </Cell>\n                            );\n                        })}\n\n                        {bindField.validation.isValid === false && (\n                            <Cell span={12}>\n                                <FormElementMessage error>\n                                    {bindField.validation.message}\n                                </FormElementMessage>\n                            </Cell>\n                        )}\n                        <Cell span={12} className={style.addButton}>\n                            <ButtonDefault\n                                disabled={bindFieldValue[0] === undefined}\n                                onClick={() => appendValue(emptyValue)}\n                            >\n                                <ButtonIcon icon={<AddIcon />} />\n                                {t`Add value`}\n                            </ButtonDefault>\n                        </Cell>\n                    </Grid>\n                );\n            }}\n        </Bind>\n    );\n};\n\nexport default DynamicSection;\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;AAGA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,KAAK,GAAG;EACVC,SAAS,eAAE,IAAAC,YAAA,EAAI;IACXC,KAAK,EAAE,MADI;IAEXC,SAAS,EAAE,uCAFA;IAGXC,UAAU,EAAE;EAHD,CAAJ;AADD,CAAd;;AA6BA,IAAMC,cAA6C,GAAG,SAAhDA,cAAgD,OAShD;EAAA,IARFC,KAQE,QARFA,KAQE;EAAA,IAPFC,OAOE,QAPFA,OAOE;EAAA,IANFC,KAME,QANFA,KAME;EAAA,IALFC,QAKE,QALFA,QAKE;EAAA,0BAJFC,SAIE;EAAA,IAJFA,SAIE,+BAJU,IAIV;EAAA,2BAHFC,UAGE;EAAA,IAHFA,UAGE,gCAHW,EAGX;EAAA,IAFFC,WAEE,QAFFA,WAEE;EAAA,IADFC,aACE,QADFA,aACE;EACF,IAAMC,IAAI,GAAGP,OAAO,EAApB;EACA,IAAMQ,cAAc,GAAGR,OAAO,CAAC,CAAD,CAA9B;EAEA;IAAA;;IACI;IACA,6BAAC,IAAD,QACK,UAAAS,SAAS,EAAI;MACV;AAChB;AACA;AACA;MACgB,IAAQC,KAAR,GAA+BD,SAA/B,CAAQC,KAAR;MAAA,IAAeC,WAAf,GAA+BF,SAA/B,CAAeE,WAAf;MAEA,IAAMC,cAAwB,GAAGF,KAAK,IAAI,EAA1C;MACA,oBACI,6BAAC,UAAD;QAAM,SAAS,EAAEJ;MAAjB,GACK,OAAOD,WAAP,KAAuB,UAAvB,IAAqCA,WAAW,CAACO,cAAD,CADrD,eAEI,6BAAC,UAAD;QAAM,IAAI,EAAE;MAAZ,GAEKT,SAAS,IAAIJ,KAAK,CAACc,KAAnB,iBAA4B,6BAAC,KAAD,QAAQd,KAAK,CAACc,KAAd,CAFjC,eAGI,6BAAC,cAAD,QACK,UAAAC,SAAS;QAAA;UACN;UACAZ,QAAQ,CAAC;YACLK,IAAI,EAAEC,cADD;YAELT,KAAK,EAALA,KAFK;YAGL;YACA;YACAgB,IAAI,EAAE;cACFC,KAAK,EAAEF,SADL;cAEFf,KAAK,EAAEU;YAFL,CALD;YASLO,KAAK,EAAE,CATF,CASI;;UATJ,CAAD;QAFF;MAAA,CADd,CAHJ,CAFJ,EAwBKJ,cAAc,CAACK,KAAf,CAAqB,CAArB,EAAwBC,GAAxB,CAA4B,UAACC,CAAD,EAAIH,KAAJ,EAAc;QACvC;QACA,IAAMI,SAAS,GAAGJ,KAAK,GAAG,CAA1B;QACA,IAAMK,SAAS,GAAGrB,OAAO,CAACoB,SAAD,CAAzB;QACA,oBACI,6BAAC,UAAD;UAAM,IAAI,EAAE,EAAZ;UAAgB,GAAG,EAAEA;QAArB,gBACI,6BAAC,SAAD,QACK,UAAAN,SAAS;UAAA,OACNZ,QAAQ,CAAC;YACLK,IAAI,EAAEc,SADD;YAELtB,KAAK,EAALA,KAFK;YAGLgB,IAAI,EAAE;cACFC,KAAK,EAAEF,SADL;cAEFf,KAAK,EAAEU;YAFL,CAHD;YAOLO,KAAK,EAAEI;UAPF,CAAD,CADF;QAAA,CADd,CADJ,CADJ;MAiBH,CArBA,CAxBL,EA+CKX,SAAS,CAACa,UAAV,CAAqBC,OAArB,KAAiC,KAAjC,iBACG,6BAAC,UAAD;QAAM,IAAI,EAAE;MAAZ,gBACI,6BAAC,sCAAD;QAAoB,KAAK;MAAzB,GACKd,SAAS,CAACa,UAAV,CAAqBE,OAD1B,CADJ,CAhDR,eAsDI,6BAAC,UAAD;QAAM,IAAI,EAAE,EAAZ;QAAgB,SAAS,EAAEhC,KAAK,CAACC;MAAjC,gBACI,6BAAC,qBAAD;QACI,QAAQ,EAAEmB,cAAc,CAAC,CAAD,CAAd,KAAsBa,SADpC;QAEI,OAAO,EAAE;UAAA,OAAMd,WAAW,CAACP,UAAD,CAAjB;QAAA;MAFb,gBAII,6BAAC,kBAAD;QAAY,IAAI,eAAE,6BAAC,uBAAD;MAAlB,EAJJ,EAKKf,CALL,6FADJ,CAtDJ,CADJ;IAkEH,CA3EL;EAFJ;AAgFH,CA7FD;;eA+FeS,c"}
+{"version":3,"file":"admin/plugins/fieldRenderers/DynamicSection.js","sources":["../../../../src/admin/plugins/fieldRenderers/DynamicSection.tsx"],"sourcesContent":["import React from \"react\";\nimport classSet from \"classnames\";\nimport { css } from \"@emotion/css\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport type { GetBindCallable } from \"~/admin/components/ContentEntryForm/useBind.js\";\nimport { ParentFieldProvider } from \"~/admin/hooks/index.js\";\nimport { ParentValueIndexProvider } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport type { BindComponent, BindComponentRenderProp, CmsModelField } from \"~/types.js\";\nimport { getMultiValueRendererSettings } from \"~/admin/plugins/fieldRenderers/MultiValueRendererSettings.js\";\nimport {\n    Button,\n    cn,\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentNote,\n    Grid,\n    Separator\n} from \"@webiny/admin-ui\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst style = {\n    gridContainer: css`\n        padding: 0 !important;\n    `\n};\n\nexport interface DynamicSectionPropsChildrenParams {\n    Bind: BindComponent;\n    field: CmsModelField;\n    bind: {\n        index: BindComponentRenderProp;\n        field: BindComponentRenderProp;\n    };\n    index: number;\n}\n\nexport interface DynamicSectionProps {\n    field: CmsModelField;\n    getBind: GetBindCallable;\n    disabled?: boolean;\n    showLabel?: boolean;\n    children: (params: DynamicSectionPropsChildrenParams) => React.JSX.Element;\n    emptyValue?: any;\n    gridClassName?: string;\n    onAddItem?: (index: number) => void;\n    addValueButtonLabel?: string;\n}\n\nconst defaultAddItem = () => {\n    // No op.\n};\n\nconst DynamicSection = ({\n    field,\n    getBind,\n    children,\n    disabled = false,\n    showLabel = true,\n    emptyValue = \"\",\n    onAddItem = defaultAddItem,\n    gridClassName,\n    ...props\n}: DynamicSectionProps) => {\n    const Bind = getBind();\n\n    const settings = getMultiValueRendererSettings(field);\n    const addValueButtonLabel =\n        props.addValueButtonLabel ?? settings.addValueButtonLabel ?? \"Add Value\";\n\n    return (\n        /* First we mount the top level field, for example: \"items\" */\n        <Bind>\n            {bindField => {\n                /**\n                 * \"value\" -> an array of items\n                 * \"appendValue\" -> a callback to add a new value to the top level \"items\" array\n                 */\n                const { value, appendValue } = bindField;\n\n                const bindFieldValue: string[] = value || [];\n\n                return (\n                    <Bind.ValidationContainer>\n                        <ParentFieldProvider value={value} path={Bind.parentName}>\n                            {showLabel && (\n                                <div className={\"mb-sm flex flex-col gap-y-sm\"}>\n                                    <Separator labelPosition={\"start\"} variant={\"accent\"}>\n                                        <span\n                                            className={\"text-accent-primary text-lg font-semibold\"}\n                                        >\n                                            {`${field.label} ${\n                                                bindFieldValue.length\n                                                    ? `(${bindFieldValue.length})`\n                                                    : \"\"\n                                            }`}\n                                        </span>\n                                    </Separator>\n                                    {field.description && (\n                                        <FormComponentDescription text={field.description} />\n                                    )}\n                                </div>\n                            )}\n                            <Grid className={classSet(gridClassName, style.gridContainer)}>\n                                <>\n                                    {bindFieldValue.map((_, index) => {\n                                        const BindField = getBind(index);\n                                        return (\n                                            <Grid.Column span={12} key={index}>\n                                                <BindField>\n                                                    {bindProps => (\n                                                        <BindField.ValidationContainer>\n                                                            <ParentValueIndexProvider index={index}>\n                                                                {children({\n                                                                    Bind: BindField,\n                                                                    field,\n                                                                    bind: {\n                                                                        index: bindProps,\n                                                                        field: bindField\n                                                                    },\n                                                                    index\n                                                                })}\n                                                            </ParentValueIndexProvider>\n                                                            <FormComponentNote text={field.note} />\n                                                        </BindField.ValidationContainer>\n                                                    )}\n                                                </BindField>\n                                            </Grid.Column>\n                                        );\n                                    })}\n                                </>\n                                <>\n                                    {bindField.validation.isValid === false && (\n                                        <Grid.Column span={12}>\n                                            <FormComponentErrorMessage\n                                                invalid\n                                                text={bindField.validation.message}\n                                            />\n                                        </Grid.Column>\n                                    )}\n                                </>\n                                {\n                                    <Grid.Column span={12}>\n                                        <div\n                                            className={cn(\n                                                bindFieldValue.length > 0 ? \"pt-none\" : \"pt-sm\"\n                                            )}\n                                        >\n                                            <Button\n                                                disabled={disabled}\n                                                variant={\"tertiary\"}\n                                                icon={<AddIcon />}\n                                                text={t(addValueButtonLabel)}\n                                                onClick={() => {\n                                                    appendValue(emptyValue);\n                                                    onAddItem(bindFieldValue.length);\n                                                }}\n                                            />\n                                        </div>\n                                    </Grid.Column>\n                                }\n                            </Grid>\n                        </ParentFieldProvider>\n                    </Bind.ValidationContainer>\n                );\n            }}\n        </Bind>\n    );\n};\n\nexport default DynamicSection;\n"],"names":["t","i18n","style","css","defaultAddItem","DynamicSection","field","getBind","children","disabled","showLabel","emptyValue","onAddItem","gridClassName","props","Bind","settings","getMultiValueRendererSettings","addValueButtonLabel","bindField","value","appendValue","bindFieldValue","ParentFieldProvider","Separator","FormComponentDescription","Grid","classSet","_","index","BindField","bindProps","ParentValueIndexProvider","FormComponentNote","FormComponentErrorMessage","cn","Button","AddIcon"],"mappings":";;;;;;;;;AAoBA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAElB,MAAMC,QAAQ;IACV,eAAeC,GAAG,CAAC;;IAEnB,CAAC;AACL;AAwBA,MAAMC,iBAAiB,KAEvB;AAEA,MAAMC,iBAAiB,CAAC,EACpBC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,WAAW,KAAK,EAChBC,YAAY,IAAI,EAChBC,aAAa,EAAE,EACfC,YAAYR,cAAc,EAC1BS,aAAa,EACb,GAAGC,OACe;IAClB,MAAMC,OAAOR;IAEb,MAAMS,WAAWC,8BAA8BX;IAC/C,MAAMY,sBACFJ,MAAM,mBAAmB,IAAIE,SAAS,mBAAmB,IAAI;IAEjE,OACgE,cAC5D,oBAACD,MAAAA,MACII,CAAAA;QAKG,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAE,GAAGF;QAE/B,MAAMG,iBAA2BF,SAAS,EAAE;QAE5C,OAAO,WAAP,GACI,oBAACL,KAAK,mBAAmB,sBACrB,oBAACQ,qBAAmBA;YAAC,OAAOH;YAAO,MAAML,KAAK,UAAU;WACnDL,aAAa,WAAbA,GACG,oBAAC;YAAI,WAAW;yBACZ,oBAACc,WAASA;YAAC,eAAe;YAAS,SAAS;yBACxC,oBAAC;YACG,WAAW;WAEV,GAAGlB,MAAM,KAAK,CAAC,CAAC,EACbgB,eAAe,MAAM,GACf,CAAC,CAAC,EAAEA,eAAe,MAAM,CAAC,CAAC,CAAC,GAC5B,IACR,IAGThB,MAAM,WAAW,IAAI,WAAJ,GACd,oBAACmB,0BAAwBA;YAAC,MAAMnB,MAAM,WAAW;2BAI7D,oBAACoB,MAAIA;YAAC,WAAWC,WAASd,eAAeX,MAAM,aAAa;yBACxD,0CACKoB,eAAe,GAAG,CAAC,CAACM,GAAGC;YACpB,MAAMC,YAAYvB,QAAQsB;YAC1B,OAAO,WAAP,GACI,oBAACH,KAAK,MAAM;gBAAC,MAAM;gBAAI,KAAKG;6BACxB,oBAACC,WAAAA,MACIC,CAAAA,YAAAA,WAAAA,GACG,oBAACD,UAAU,mBAAmB,sBAC1B,oBAACE,0BAAwBA;oBAAC,OAAOH;mBAC5BrB,SAAS;oBACN,MAAMsB;oBACNxB;oBACA,MAAM;wBACF,OAAOyB;wBACP,OAAOZ;oBACX;oBACAU;gBACJ,mBAEJ,oBAACI,mBAAiBA;oBAAC,MAAM3B,MAAM,IAAI;;QAM3D,mBAEJ,0CACKa,AAAiC,UAAjCA,UAAU,UAAU,CAAC,OAAO,IAAc,WAAT,GAC9B,oBAACO,KAAK,MAAM;YAAC,MAAM;yBACf,oBAACQ,2BAAyBA;YACtB;YACA,MAAMf,UAAU,UAAU,CAAC,OAAO;4BAM9C,oBAACO,KAAK,MAAM;YAAC,MAAM;yBACf,oBAAC;YACG,WAAWS,GACPb,eAAe,MAAM,GAAG,IAAI,YAAY;yBAG5C,oBAACc,QAAMA;YACH,UAAU3B;YACV,SAAS;YACT,oBAAM,oBAAC4B,gBAAOA;YACd,MAAMrC,EAAEkB;YACR,SAAS;gBACLG,YAAYV;gBACZC,UAAUU,eAAe,MAAM;YACnC;;IASpC;AAGZ;AAEA,sCAAejB"}

package/admin/plugins/fieldRenderers/MultiValueRendererSettings.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { CmsModelField, CmsModelFieldRendererSettingsProps } from "@webiny/app-headless-cms-common/types/index.js";
+interface IMultiValueRendererSettings {
+    addValueButtonLabel: string;
+}
+export declare const getMultiValueRendererSettings: (field: CmsModelField) => IMultiValueRendererSettings;
+export declare const MultiValueRendererSettings: ({ field }: CmsModelFieldRendererSettingsProps) => React.JSX.Element;
+export {};

package/admin/plugins/fieldRenderers/MultiValueRendererSettings.js

@@ -0,0 +1,21 @@
+import react from "react";
+import { Bind } from "@webiny/form";
+import { Grid, Input } from "@webiny/admin-ui";
+const DEFAULT_SETTINGS = {
+    addValueButtonLabel: "Add Value"
+};
+const getMultiValueRendererSettings = (field)=>{
+    if ("function" == typeof field.renderer) return DEFAULT_SETTINGS;
+    return field.renderer.settings?.multiValue ?? DEFAULT_SETTINGS;
+};
+const MultiValueRendererSettings = ({ field })=>/*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "renderer.settings.multiValue.addValueButtonLabel",
+        defaultValue: `Add ${field.label}`
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: '"Add Value" button label'
+    })));
+export { MultiValueRendererSettings, getMultiValueRendererSettings };
+
+//# sourceMappingURL=MultiValueRendererSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin/plugins/fieldRenderers/MultiValueRendererSettings.js","sources":["../../../../src/admin/plugins/fieldRenderers/MultiValueRendererSettings.tsx"],"sourcesContent":["import React from \"react\";\nimport type {\n    CmsModelField,\n    CmsModelFieldRendererSettingsProps\n} from \"@webiny/app-headless-cms-common/types/index.js\";\nimport { Bind } from \"@webiny/form\";\nimport { Grid, Input } from \"@webiny/admin-ui\";\n\ninterface IMultiValueRendererSettings {\n    addValueButtonLabel: string;\n}\n\nconst DEFAULT_SETTINGS: IMultiValueRendererSettings = {\n    addValueButtonLabel: \"Add Value\"\n};\n\nexport const getMultiValueRendererSettings = (\n    field: CmsModelField\n): IMultiValueRendererSettings => {\n    if (typeof field.renderer === \"function\") {\n        return DEFAULT_SETTINGS;\n    }\n\n    return field.renderer.settings?.multiValue ?? DEFAULT_SETTINGS;\n};\n\nexport const MultiValueRendererSettings = ({ field }: CmsModelFieldRendererSettingsProps) => {\n    return (\n        <Grid.Column span={12}>\n            <Bind\n                name={\"renderer.settings.multiValue.addValueButtonLabel\"}\n                defaultValue={`Add ${field.label}`}\n            >\n                <Input label={`\"Add Value\" button label`} />\n            </Bind>\n        </Grid.Column>\n    );\n};\n"],"names":["DEFAULT_SETTINGS","getMultiValueRendererSettings","field","MultiValueRendererSettings","Grid","Bind","Input"],"mappings":";;;AAYA,MAAMA,mBAAgD;IAClD,qBAAqB;AACzB;AAEO,MAAMC,gCAAgC,CACzCC;IAEA,IAAI,AAA0B,cAA1B,OAAOA,MAAM,QAAQ,EACrB,OAAOF;IAGX,OAAOE,MAAM,QAAQ,CAAC,QAAQ,EAAE,cAAcF;AAClD;AAEO,MAAMG,6BAA6B,CAAC,EAAED,KAAK,EAAsC,GAC7E,WAAP,GACI,oBAACE,KAAK,MAAM;QAAC,MAAM;qBACf,oBAACC,MAAIA;QACD,MAAM;QACN,cAAc,CAAC,IAAI,EAAEH,MAAM,KAAK,EAAE;qBAElC,oBAACI,OAAKA;QAAC,OAAO"}

package/admin/plugins/fieldRenderers/boolean/booleanSwitch.d.ts

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

package/admin/plugins/fieldRenderers/boolean/booleanSwitch.js

@@ -1,50 +1,36 @@
-"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 _Switch = require("@webiny/ui/Switch");
-
-var _i18n = require("@webiny/app/i18n");
-
-var _templateObject, _templateObject2;
-
-var t = _i18n.i18n.ns("app-headless-cms/admin/fields/boolean");
-
-var plugin = {
-  type: "cms-editor-field-renderer",
-  name: "cms-editor-field-renderer-boolean",
-  renderer: {
-    rendererName: "boolean-input",
-    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Boolean Input"]))),
-    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders a simple switch button."]))),
-    canUse: function canUse(_ref) {
-      var field = _ref.field;
-      return field.type === "boolean" && !field.multipleValues && !(0, _get.default)(field, "predefinedValues.enabled");
-    },
-    render: function render(_ref2) {
-      var field = _ref2.field,
-          getBind = _ref2.getBind;
-      var Bind = getBind();
-      return /*#__PURE__*/_react.default.createElement(Bind, null, function (bindProps) {
-        return /*#__PURE__*/_react.default.createElement(_Switch.Switch, Object.assign({}, bindProps, {
-          label: field.label,
-          description: field.helpText,
-          "data-testid": "fr.input.boolean.".concat(field.label)
-        }));
-      });
+import react from "react";
+import get from "lodash/get.js";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { Switch } from "@webiny/admin-ui";
+import { useFieldEffectiveRules, useModelField } from "@webiny/app-headless-cms-common";
+const t = i18n.ns("app-headless-cms/admin/fields/boolean");
+const booleanSwitch_plugin = {
+    type: "cms-editor-field-renderer",
+    name: "cms-editor-field-renderer-boolean",
+    renderer: {
+        rendererName: "boolean-input",
+        name: t`Boolean Input`,
+        description: t`Renders a simple switch button.`,
+        canUse ({ field }) {
+            return "boolean" === field.type && !field.list && !get(field, "predefinedValues.enabled");
+        },
+        render ({ getBind }) {
+            const { field } = useModelField();
+            const rules = useFieldEffectiveRules(field);
+            const Bind = getBind();
+            const disabled = !rules.canEdit || rules.disabled;
+            return /*#__PURE__*/ react.createElement(Bind, null, (bindProps)=>/*#__PURE__*/ react.createElement(Switch, {
+                    ...bindProps,
+                    disabled: disabled,
+                    label: field.label,
+                    description: field.description,
+                    note: field.note,
+                    "data-testid": `fr.input.boolean.${field.label}`
+                }));
+        }
     }
-  }
 };
-var _default = plugin;
-exports.default = _default;
+const booleanSwitch = booleanSwitch_plugin;
+export default booleanSwitch;
+
+//# sourceMappingURL=booleanSwitch.js.map

package/admin/plugins/fieldRenderers/boolean/booleanSwitch.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","get","render","getBind","Bind","bindProps","label","helpText"],"sources":["booleanSwitch.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { Switch } from \"@webiny/ui/Switch\";\nimport { i18n } from \"@webiny/app/i18n\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/boolean\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-boolean\",\n    renderer: {\n        rendererName: \"boolean-input\",\n        name: t`Boolean Input`,\n        description: t`Renders a simple switch button.`,\n        canUse({ field }) {\n            return (\n                field.type === \"boolean\" &&\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                        <Switch\n                            {...bindProps}\n                            label={field.label}\n                            description={field.helpText}\n                            data-testid={`fr.input.boolean.${field.label}`}\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,uCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,mCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,eADR;IAENF,IAAI,EAAEL,CAAF,gGAFE;IAGNQ,WAAW,EAAER,CAAF,oHAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OACIA,KAAK,CAACN,IAAN,KAAe,SAAf,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;QAAA,oBACN,6BAAC,cAAD,oBACQA,SADR;UAEI,KAAK,EAAEN,KAAK,CAACO,KAFjB;UAGI,WAAW,EAAEP,KAAK,CAACQ,QAHvB;UAII,0CAAiCR,KAAK,CAACO,KAAvC;QAJJ,GADM;MAAA,CADd,CADJ;IAYH;EA1BK;AAH+B,CAA7C;eAiCed,M"}
+{"version":3,"file":"admin/plugins/fieldRenderers/boolean/booleanSwitch.js","sources":["../../../../../src/admin/plugins/fieldRenderers/boolean/booleanSwitch.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { Switch } from \"@webiny/admin-ui\";\nimport { useFieldEffectiveRules, useModelField } from \"@webiny/app-headless-cms-common\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/boolean\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-boolean\",\n    renderer: {\n        rendererName: \"boolean-input\",\n        name: t`Boolean Input`,\n        description: t`Renders a simple switch button.`,\n        canUse({ field }) {\n            return (\n                field.type === \"boolean\" && !field.list && !get(field, \"predefinedValues.enabled\")\n            );\n        },\n        render({ getBind }) {\n            const { field } = useModelField();\n            const rules = useFieldEffectiveRules(field);\n            const Bind = getBind();\n\n            const disabled = !rules.canEdit || rules.disabled;\n\n            return (\n                <Bind>\n                    {bindProps => (\n                        <Switch\n                            {...bindProps}\n                            disabled={disabled}\n                            label={field.label}\n                            description={field.description}\n                            note={field.note}\n                            data-testid={`fr.input.boolean.${field.label}`}\n                        />\n                    )}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"names":["t","i18n","plugin","field","get","getBind","useModelField","rules","useFieldEffectiveRules","Bind","disabled","bindProps","Switch"],"mappings":";;;;;AAOA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAElB,MAAMC,uBAAsC;IACxC,MAAM;IACN,MAAM;IACN,UAAU;QACN,cAAc;QACd,MAAMF,CAAC,CAAC,aAAa,CAAC;QACtB,aAAaA,CAAC,CAAC,+BAA+B,CAAC;QAC/C,QAAO,EAAEG,KAAK,EAAE;YACZ,OACIA,AAAe,cAAfA,MAAM,IAAI,IAAkB,CAACA,MAAM,IAAI,IAAI,CAACC,IAAID,OAAO;QAE/D;QACA,QAAO,EAAEE,OAAO,EAAE;YACd,MAAM,EAAEF,KAAK,EAAE,GAAGG;YAClB,MAAMC,QAAQC,uBAAuBL;YACrC,MAAMM,OAAOJ;YAEb,MAAMK,WAAW,CAACH,MAAM,OAAO,IAAIA,MAAM,QAAQ;YAEjD,OAAO,WAAP,GACI,oBAACE,MAAAA,MACIE,CAAAA,YAAAA,WAAAA,GACG,oBAACC,QAAMA;oBACF,GAAGD,SAAS;oBACb,UAAUD;oBACV,OAAOP,MAAM,KAAK;oBAClB,aAAaA,MAAM,WAAW;oBAC9B,MAAMA,MAAM,IAAI;oBAChB,eAAa,CAAC,iBAAiB,EAAEA,MAAM,KAAK,EAAE;;QAKlE;IACJ;AACJ;AAEA,sBAAeD"}

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

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

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

@@ -1,13 +1,7 @@
-"use strict";
+import booleanSwitch from "./booleanSwitch.js";
+const fieldRenderers_boolean = [
+    booleanSwitch
+];
+export default fieldRenderers_boolean;
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _booleanSwitch = _interopRequireDefault(require("./booleanSwitch"));
-
-var _default = [_booleanSwitch.default];
-exports.default = _default;
+//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["booleanSwitch"],"sources":["index.ts"],"sourcesContent":["import booleanSwitch from \"./booleanSwitch\";\n\nexport default [booleanSwitch];\n"],"mappings":";;;;;;;;;AAAA;;eAEe,CAACA,sBAAD,C"}
+{"version":3,"file":"admin/plugins/fieldRenderers/boolean/index.js","sources":["../../../../../src/admin/plugins/fieldRenderers/boolean/index.ts"],"sourcesContent":["import booleanSwitch from \"./booleanSwitch.js\";\n\nexport default [booleanSwitch];\n"],"names":["booleanSwitch"],"mappings":";AAEA,+BAAe;IAACA;CAAc"}

package/admin/plugins/fieldRenderers/checkboxes.d.ts

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

package/admin/plugins/fieldRenderers/checkboxes.js

@@ -1,70 +1,54 @@
-"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 _i18n = require("@webiny/app/i18n");
-
-var _Checkbox = require("@webiny/ui/Checkbox");
-
-var _templateObject, _templateObject2;
-
-var t = _i18n.i18n.ns("app-headless-cms/admin/fields/text");
-
-var plugin = {
-  type: "cms-editor-field-renderer",
-  name: "cms-editor-field-renderer-checkboxes-buttons",
-  renderer: {
-    rendererName: "checkboxes",
-    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Checkboxes"]))),
-    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders checkboxes, allowing selection of multiple values."]))),
-    canUse: function canUse(_ref) {
-      var field = _ref.field;
-      return !!field.multipleValues && !!(0, _get.default)(field, "predefinedValues.enabled");
-    },
-    render: function render(_ref2) {
-      var field = _ref2.field,
-          getBind = _ref2.getBind;
-      var Bind = getBind();
-
-      var _ref3 = field.predefinedValues || {
-        values: []
-      },
-          _ref3$values = _ref3.values,
-          options = _ref3$values === void 0 ? [] : _ref3$values;
-
-      return /*#__PURE__*/_react.default.createElement(Bind, null, function (bind) {
-        return /*#__PURE__*/_react.default.createElement(_Checkbox.CheckboxGroup, Object.assign({}, bind, {
-          label: field.label,
-          description: field.helpText
-        }), function (_ref4) {
-          var onChange = _ref4.onChange,
-              getValue = _ref4.getValue;
-          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, options.map(function (option, index) {
-            var value = field.type === "number" ? Number(option.value) : option.value;
-            return /*#__PURE__*/_react.default.createElement("div", {
-              key: String(option.value) + index
-            }, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
-              label: option.label,
-              value: getValue(value),
-              onChange: onChange(value),
-              "data-testid": "fr.input.".concat(field.label)
-            }));
-          }));
-        });
-      });
+import react from "react";
+import get from "lodash/get.js";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { CheckboxGroup } from "@webiny/admin-ui";
+import { useFieldEffectiveRules, useModelField } from "@webiny/app-headless-cms-common";
+const t = i18n.ns("app-headless-cms/admin/fields/text");
+const adaptToField = (field, value)=>"number" === field.type ? Number(value) : value;
+const checkboxes_plugin = {
+    type: "cms-editor-field-renderer",
+    name: "cms-editor-field-renderer-checkboxes-buttons",
+    renderer: {
+        rendererName: "checkboxes",
+        name: t`Checkboxes`,
+        description: t`Renders checkboxes, allowing selection of multiple values.`,
+        canUse ({ field }) {
+            return !!field.list && !!get(field, "predefinedValues.enabled");
+        },
+        render ({ getBind }) {
+            const { field } = useModelField();
+            const rules = useFieldEffectiveRules(field);
+            const Bind = getBind();
+            const { values: predefinedOptions = [] } = field.predefinedValues || {
+                values: []
+            };
+            const options = predefinedOptions.map((opt)=>({
+                    ...opt,
+                    value: adaptToField(field, opt.value)
+                }));
+            const defaults = options.filter((option)=>option.selected);
+            const defaultValue = defaults.length > 0 ? defaults.map((opt)=>opt.value) : void 0;
+            const disabled = !rules.canEdit || rules.disabled;
+            return /*#__PURE__*/ react.createElement(Bind, {
+                defaultValue: defaultValue
+            }, (bind)=>/*#__PURE__*/ react.createElement(Bind.ValidationContainer, null, /*#__PURE__*/ react.createElement(CheckboxGroup, {
+                    ...bind,
+                    disabled: disabled,
+                    label: field.label,
+                    description: field.description,
+                    note: field.note,
+                    hint: field.help,
+                    value: bind.value,
+                    items: options.map((opt)=>({
+                            label: opt.label,
+                            value: opt.value,
+                            selected: opt.selected
+                        }))
+                })));
+        }
     }
-  }
 };
-var _default = plugin;
-exports.default = _default;
+const checkboxes = checkboxes_plugin;
+export default checkboxes;
+
+//# sourceMappingURL=checkboxes.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","get","render","getBind","Bind","predefinedValues","values","options","bind","label","helpText","onChange","getValue","map","option","index","value","Number","String"],"sources":["checkboxes.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Checkbox, CheckboxGroup } from \"@webiny/ui/Checkbox\";\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-checkboxes-buttons\",\n    renderer: {\n        rendererName: \"checkboxes\",\n        name: t`Checkboxes`,\n        description: t`Renders checkboxes, allowing selection of multiple values.`,\n        canUse({ field }) {\n            return !!field.multipleValues && !!get(field, \"predefinedValues.enabled\");\n        },\n        render({ field, getBind }) {\n            const Bind = getBind();\n\n            const { values: options = [] } = field.predefinedValues || {\n                values: []\n            };\n\n            return (\n                <Bind>\n                    {bind => {\n                        return (\n                            <CheckboxGroup\n                                {...bind}\n                                label={field.label}\n                                description={field.helpText}\n                            >\n                                {({ onChange, getValue }) => (\n                                    <React.Fragment>\n                                        {options.map((option, index) => {\n                                            const value =\n                                                field.type === \"number\"\n                                                    ? Number(option.value)\n                                                    : option.value;\n                                            return (\n                                                <div key={String(option.value) + index}>\n                                                    <Checkbox\n                                                        label={option.label}\n                                                        value={getValue(value)}\n                                                        onChange={onChange(value)}\n                                                        data-testid={`fr.input.${field.label}`}\n                                                    />\n                                                </div>\n                                            );\n                                        })}\n                                    </React.Fragment>\n                                )}\n                            </CheckboxGroup>\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,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,8CAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,YADR;IAENF,IAAI,EAAEL,CAAF,6FAFE;IAGNQ,WAAW,EAAER,CAAF,+IAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OAAO,CAAC,CAACA,KAAK,CAACC,cAAR,IAA0B,CAAC,CAAC,IAAAC,YAAA,EAAIF,KAAJ,EAAW,0BAAX,CAAnC;IACH,CANK;IAONG,MAPM,yBAOqB;MAAA,IAAlBH,KAAkB,SAAlBA,KAAkB;MAAA,IAAXI,OAAW,SAAXA,OAAW;MACvB,IAAMC,IAAI,GAAGD,OAAO,EAApB;;MAEA,YAAiCJ,KAAK,CAACM,gBAAN,IAA0B;QACvDC,MAAM,EAAE;MAD+C,CAA3D;MAAA,yBAAQA,MAAR;MAAA,IAAgBC,OAAhB,6BAA0B,EAA1B;;MAIA,oBACI,6BAAC,IAAD,QACK,UAAAC,IAAI,EAAI;QACL,oBACI,6BAAC,uBAAD,oBACQA,IADR;UAEI,KAAK,EAAET,KAAK,CAACU,KAFjB;UAGI,WAAW,EAAEV,KAAK,CAACW;QAHvB,IAKK;UAAA,IAAGC,QAAH,SAAGA,QAAH;UAAA,IAAaC,QAAb,SAAaA,QAAb;UAAA,oBACG,6BAAC,cAAD,CAAO,QAAP,QACKL,OAAO,CAACM,GAAR,CAAY,UAACC,MAAD,EAASC,KAAT,EAAmB;YAC5B,IAAMC,KAAK,GACPjB,KAAK,CAACN,IAAN,KAAe,QAAf,GACMwB,MAAM,CAACH,MAAM,CAACE,KAAR,CADZ,GAEMF,MAAM,CAACE,KAHjB;YAIA,oBACI;cAAK,GAAG,EAAEE,MAAM,CAACJ,MAAM,CAACE,KAAR,CAAN,GAAuBD;YAAjC,gBACI,6BAAC,kBAAD;cACI,KAAK,EAAED,MAAM,CAACL,KADlB;cAEI,KAAK,EAAEG,QAAQ,CAACI,KAAD,CAFnB;cAGI,QAAQ,EAAEL,QAAQ,CAACK,KAAD,CAHtB;cAII,kCAAyBjB,KAAK,CAACU,KAA/B;YAJJ,EADJ,CADJ;UAUH,CAfA,CADL,CADH;QAAA,CALL,CADJ;MA4BH,CA9BL,CADJ;IAkCH;EAhDK;AAH+B,CAA7C;eAuDejB,M"}
+{"version":3,"file":"admin/plugins/fieldRenderers/checkboxes.js","sources":["../../../../src/admin/plugins/fieldRenderers/checkboxes.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get.js\";\nimport type { CmsModelField, CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { CheckboxGroup } from \"@webiny/admin-ui\";\nimport { useFieldEffectiveRules, useModelField } from \"@webiny/app-headless-cms-common\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst adaptToField = (field: CmsModelField, value: string) => {\n    return field.type === \"number\" ? Number(value) : value;\n};\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-checkboxes-buttons\",\n    renderer: {\n        rendererName: \"checkboxes\",\n        name: t`Checkboxes`,\n        description: t`Renders checkboxes, allowing selection of multiple values.`,\n        canUse({ field }) {\n            return !!field.list && !!get(field, \"predefinedValues.enabled\");\n        },\n        render({ getBind }) {\n            const { field } = useModelField();\n            const rules = useFieldEffectiveRules(field);\n            const Bind = getBind();\n\n            const { values: predefinedOptions = [] } = field.predefinedValues || {\n                values: []\n            };\n\n            // For `number` field, we want to convert the value to actual Number.\n            const options = predefinedOptions.map(opt => ({\n                ...opt,\n                value: adaptToField(field, opt.value)\n            }));\n\n            const defaults = options.filter(option => option.selected);\n            const defaultValue = defaults.length > 0 ? defaults.map(opt => opt.value) : undefined;\n\n            const disabled = !rules.canEdit || rules.disabled;\n\n            return (\n                <Bind defaultValue={defaultValue}>\n                    {bind => (\n                        <Bind.ValidationContainer>\n                            <CheckboxGroup\n                                {...bind}\n                                disabled={disabled}\n                                label={field.label}\n                                description={field.description}\n                                note={field.note}\n                                hint={field.help}\n                                value={bind.value}\n                                items={options.map(opt => ({\n                                    label: opt.label,\n                                    value: opt.value,\n                                    selected: opt.selected\n                                }))}\n                            />\n                        </Bind.ValidationContainer>\n                    )}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"names":["t","i18n","adaptToField","field","value","Number","plugin","get","getBind","useModelField","rules","useFieldEffectiveRules","Bind","predefinedOptions","options","opt","defaults","option","defaultValue","undefined","disabled","bind","CheckboxGroup"],"mappings":";;;;;AAOA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAElB,MAAMC,eAAe,CAACC,OAAsBC,QACjCD,AAAe,aAAfA,MAAM,IAAI,GAAgBE,OAAOD,SAASA;AAGrD,MAAME,oBAAsC;IACxC,MAAM;IACN,MAAM;IACN,UAAU;QACN,cAAc;QACd,MAAMN,CAAC,CAAC,UAAU,CAAC;QACnB,aAAaA,CAAC,CAAC,0DAA0D,CAAC;QAC1E,QAAO,EAAEG,KAAK,EAAE;YACZ,OAAO,CAAC,CAACA,MAAM,IAAI,IAAI,CAAC,CAACI,IAAIJ,OAAO;QACxC;QACA,QAAO,EAAEK,OAAO,EAAE;YACd,MAAM,EAAEL,KAAK,EAAE,GAAGM;YAClB,MAAMC,QAAQC,uBAAuBR;YACrC,MAAMS,OAAOJ;YAEb,MAAM,EAAE,QAAQK,oBAAoB,EAAE,EAAE,GAAGV,MAAM,gBAAgB,IAAI;gBACjE,QAAQ,EAAE;YACd;YAGA,MAAMW,UAAUD,kBAAkB,GAAG,CAACE,CAAAA,MAAQ;oBAC1C,GAAGA,GAAG;oBACN,OAAOb,aAAaC,OAAOY,IAAI,KAAK;gBACxC;YAEA,MAAMC,WAAWF,QAAQ,MAAM,CAACG,CAAAA,SAAUA,OAAO,QAAQ;YACzD,MAAMC,eAAeF,SAAS,MAAM,GAAG,IAAIA,SAAS,GAAG,CAACD,CAAAA,MAAOA,IAAI,KAAK,IAAII;YAE5E,MAAMC,WAAW,CAACV,MAAM,OAAO,IAAIA,MAAM,QAAQ;YAEjD,OAAO,WAAP,GACI,oBAACE,MAAAA;gBAAK,cAAcM;eACfG,CAAAA,OAAAA,WAAAA,GACG,oBAACT,KAAK,mBAAmB,sBACrB,oBAACU,eAAaA;oBACT,GAAGD,IAAI;oBACR,UAAUD;oBACV,OAAOjB,MAAM,KAAK;oBAClB,aAAaA,MAAM,WAAW;oBAC9B,MAAMA,MAAM,IAAI;oBAChB,MAAMA,MAAM,IAAI;oBAChB,OAAOkB,KAAK,KAAK;oBACjB,OAAOP,QAAQ,GAAG,CAACC,CAAAA,MAAQ;4BACvB,OAAOA,IAAI,KAAK;4BAChB,OAAOA,IAAI,KAAK;4BAChB,UAAUA,IAAI,QAAQ;wBAC1B;;QAMxB;IACJ;AACJ;AAEA,mBAAeT"}