@webiny/app-headless-cms 6.0.0-beta.0 → 6.0.0-rc.0

package/admin/plugins/fieldRenderers/AccordionRenderSettings.js

@@ -1,34 +1,27 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getAccordionRenderSettings = exports.AccordionRenderSettings = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _form = require("@webiny/form");
-var _Grid = require("@webiny/ui/Grid");
-var _Switch = require("@webiny/ui/Switch");
-var DEFAULT_ACCORDION_RENDER_SETTINGS = {
+import React from "react";
+import { Bind } from "@webiny/form";
+import { Grid, Switch } from "@webiny/admin-ui";
+const DEFAULT_ACCORDION_RENDER_SETTINGS = {
   open: false
 };
-var getAccordionRenderSettings = exports.getAccordionRenderSettings = function getAccordionRenderSettings(field) {
+export const getAccordionRenderSettings = field => {
   if (typeof field.renderer === "function") {
     return DEFAULT_ACCORDION_RENDER_SETTINGS;
   }
   return field.renderer.settings ?? {};
 };
-var AccordionRenderSettings = exports.AccordionRenderSettings = function AccordionRenderSettings(_ref) {
-  var field = _ref.field;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+export const AccordionRenderSettings = ({
+  field
+}) => {
+  return /*#__PURE__*/React.createElement(Grid.Column, {
     span: 12
-  }, /*#__PURE__*/_react.default.createElement(_form.Bind, {
+  }, /*#__PURE__*/React.createElement(Bind, {
     name: "renderer.settings.open",
     defaultValue: false
-  }, /*#__PURE__*/_react.default.createElement(_Switch.Switch, {
+  }, /*#__PURE__*/React.createElement(Switch, {
     label: "Expand Accordion",
-    description: "Enable if \"".concat(field.label, "\" is to be expanded by default.")
-  }))));
+    description: `Enable if "${field.label}" is to be expanded by default.`
+  })));
 };
 
 //# sourceMappingURL=AccordionRenderSettings.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_form","_Grid","_Switch","DEFAULT_ACCORDION_RENDER_SETTINGS","open","getAccordionRenderSettings","exports","field","renderer","settings","AccordionRenderSettings","_ref","default","createElement","Fragment","Cell","span","Bind","name","defaultValue","Switch","label","description","concat"],"sources":["AccordionRenderSettings.tsx"],"sourcesContent":["import React from \"react\";\nimport { Bind } from \"@webiny/form\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { Switch } from \"@webiny/ui/Switch\";\nimport {\n    CmsModelField,\n    CmsModelFieldRendererSettingsProps\n} from \"@webiny/app-headless-cms-common/types\";\n\nexport interface IAccordionRenderSettings {\n    open: boolean;\n}\n\nconst DEFAULT_ACCORDION_RENDER_SETTINGS: IAccordionRenderSettings = {\n    open: false\n};\n\nexport const getAccordionRenderSettings = (field: CmsModelField) => {\n    if (typeof field.renderer === \"function\") {\n        return DEFAULT_ACCORDION_RENDER_SETTINGS;\n    }\n\n    return (field.renderer.settings ?? {}) as IAccordionRenderSettings;\n};\n\nexport const AccordionRenderSettings = ({ field }: CmsModelFieldRendererSettingsProps) => {\n    return (\n        <>\n            <Cell span={12}>\n                <Bind name={\"renderer.settings.open\"} defaultValue={false}>\n                    <Switch\n                        label={\"Expand Accordion\"}\n                        description={`Enable if \"${field.label}\" is to be expanded by default.`}\n                    />\n                </Bind>\n            </Cell>\n        </>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAUA,IAAMI,iCAA2D,GAAG;EAChEC,IAAI,EAAE;AACV,CAAC;AAEM,IAAMC,0BAA0B,GAAAC,OAAA,CAAAD,0BAAA,GAAG,SAA7BA,0BAA0BA,CAAIE,KAAoB,EAAK;EAChE,IAAI,OAAOA,KAAK,CAACC,QAAQ,KAAK,UAAU,EAAE;IACtC,OAAOL,iCAAiC;EAC5C;EAEA,OAAQI,KAAK,CAACC,QAAQ,CAACC,QAAQ,IAAI,CAAC,CAAC;AACzC,CAAC;AAEM,IAAMC,uBAAuB,GAAAJ,OAAA,CAAAI,uBAAA,GAAG,SAA1BA,uBAAuBA,CAAAC,IAAA,EAAsD;EAAA,IAAhDJ,KAAK,GAAAI,IAAA,CAALJ,KAAK;EAC3C,oBACIV,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAAAhB,MAAA,CAAAe,OAAA,CAAAE,QAAA,qBACIjB,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACZ,KAAA,CAAAc,IAAI;IAACC,IAAI,EAAE;EAAG,gBACXnB,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACb,KAAA,CAAAiB,IAAI;IAACC,IAAI,EAAE,wBAAyB;IAACC,YAAY,EAAE;EAAM,gBACtDtB,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACX,OAAA,CAAAkB,MAAM;IACHC,KAAK,EAAE,kBAAmB;IAC1BC,WAAW,iBAAAC,MAAA,CAAgBhB,KAAK,CAACc,KAAK;EAAkC,CAC3E,CACC,CACJ,CACR,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Bind","Grid","Switch","DEFAULT_ACCORDION_RENDER_SETTINGS","open","getAccordionRenderSettings","field","renderer","settings","AccordionRenderSettings","createElement","Column","span","name","defaultValue","label","description"],"sources":["AccordionRenderSettings.tsx"],"sourcesContent":["import React from \"react\";\nimport { Bind } from \"@webiny/form\";\nimport { Grid, Switch } from \"@webiny/admin-ui\";\nimport type {\n    CmsModelField,\n    CmsModelFieldRendererSettingsProps\n} from \"@webiny/app-headless-cms-common/types/index.js\";\n\nexport interface IAccordionRenderSettings {\n    open: boolean;\n}\n\nconst DEFAULT_ACCORDION_RENDER_SETTINGS: IAccordionRenderSettings = {\n    open: false\n};\n\nexport const getAccordionRenderSettings = (field: CmsModelField) => {\n    if (typeof field.renderer === \"function\") {\n        return DEFAULT_ACCORDION_RENDER_SETTINGS;\n    }\n\n    return (field.renderer.settings ?? {}) as IAccordionRenderSettings;\n};\n\nexport const AccordionRenderSettings = ({ field }: CmsModelFieldRendererSettingsProps) => {\n    return (\n        <Grid.Column span={12}>\n            <Bind name={\"renderer.settings.open\"} defaultValue={false}>\n                <Switch\n                    label={\"Expand Accordion\"}\n                    description={`Enable if \"${field.label}\" is to be expanded by default.`}\n                />\n            </Bind>\n        </Grid.Column>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,IAAI,EAAEC,MAAM,QAAQ,kBAAkB;AAU/C,MAAMC,iCAA2D,GAAG;EAChEC,IAAI,EAAE;AACV,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAIC,KAAoB,IAAK;EAChE,IAAI,OAAOA,KAAK,CAACC,QAAQ,KAAK,UAAU,EAAE;IACtC,OAAOJ,iCAAiC;EAC5C;EAEA,OAAQG,KAAK,CAACC,QAAQ,CAACC,QAAQ,IAAI,CAAC,CAAC;AACzC,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGA,CAAC;EAAEH;AAA0C,CAAC,KAAK;EACtF,oBACIP,KAAA,CAAAW,aAAA,CAACT,IAAI,CAACU,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBb,KAAA,CAAAW,aAAA,CAACV,IAAI;IAACa,IAAI,EAAE,wBAAyB;IAACC,YAAY,EAAE;EAAM,gBACtDf,KAAA,CAAAW,aAAA,CAACR,MAAM;IACHa,KAAK,EAAE,kBAAmB;IAC1BC,WAAW,EAAE,cAAcV,KAAK,CAACS,KAAK;EAAkC,CAC3E,CACC,CACG,CAAC;AAEtB,CAAC","ignoreList":[]}

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { BindComponent, BindComponentRenderProp, CmsModelField } from "../../../types";
-import { GetBindCallable } from "../../components/ContentEntryForm/useBind";
+import type { GetBindCallable } from "../../../admin/components/ContentEntryForm/useBind.js";
+import type { BindComponent, BindComponentRenderProp, CmsModelField } from "../../../types.js";
 export interface DynamicSectionPropsChildrenParams {
     Bind: BindComponent;
     field: CmsModelField;
@@ -14,11 +14,11 @@ export interface DynamicSectionProps {
     field: CmsModelField;
     getBind: GetBindCallable;
     showLabel?: boolean;
-    Label: React.ComponentType<any>;
     children: (params: DynamicSectionPropsChildrenParams) => JSX.Element;
     emptyValue?: any;
-    renderTitle?: (value: any[]) => React.ReactElement;
     gridClassName?: string;
+    onAddItem?: (index: number) => void;
+    addValueButtonLabel?: string;
 }
-declare const DynamicSection: ({ field, getBind, Label, children, showLabel, emptyValue, renderTitle, gridClassName }: DynamicSectionProps) => React.JSX.Element;
+declare const DynamicSection: ({ field, getBind, children, showLabel, emptyValue, onAddItem, gridClassName, ...props }: DynamicSectionProps) => React.JSX.Element;
 export default DynamicSection;

package/admin/plugins/fieldRenderers/DynamicSection.js

@@ -1,114 +1,102 @@
-"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 _classnames = _interopRequireDefault(require("classnames"));
-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 _hooks = require("../../hooks");
-var _ModelFieldProvider = require("../../components/ModelFieldProvider");
-var _templateObject, _templateObject2;
-var t = _i18n.i18n.ns("app-headless-cms/admin/fields/text");
-var style = {
-  gridContainer: (0, _emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        padding: 0 !important;\n    "]))),
-  addButton: (0, _emotion.css)({
-    width: "100%",
-    borderTop: "1px solid var(--mdc-theme-background)",
-    paddingTop: 8
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import React from "react";
+import classSet from "classnames";
+import { css } from "@emotion/css";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { ReactComponent as AddIcon } 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, cn, FormComponentDescription, FormComponentErrorMessage, FormComponentNote, Grid, Separator } from "@webiny/admin-ui";
+const t = i18n.ns("app-headless-cms/admin/fields/text");
+const style = {
+  gridContainer: /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+    name: "ivydhp",
+    styles: "padding:0!important"
+  } : {
+    name: "56q6jo-gridContainer",
+    styles: "padding:0!important;label:gridContainer;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkR5bmFtaWNTZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1QnNCIiwiZmlsZSI6IkR5bmFtaWNTZWN0aW9uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBjbGFzc1NldCBmcm9tIFwiY2xhc3NuYW1lc1wiO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSBcIkBlbW90aW9uL2Nzc1wiO1xuaW1wb3J0IHsgaTE4biB9IGZyb20gXCJAd2ViaW55L2FwcC9pMThuL2luZGV4LmpzXCI7XG5pbXBvcnQgeyBSZWFjdENvbXBvbmVudCBhcyBBZGRJY29uIH0gZnJvbSBcIkB3ZWJpbnkvaWNvbnMvYWRkLnN2Z1wiO1xuaW1wb3J0IHR5cGUgeyBHZXRCaW5kQ2FsbGFibGUgfSBmcm9tIFwifi9hZG1pbi9jb21wb25lbnRzL0NvbnRlbnRFbnRyeUZvcm0vdXNlQmluZC5qc1wiO1xuaW1wb3J0IHsgUGFyZW50RmllbGRQcm92aWRlciB9IGZyb20gXCJ+L2FkbWluL2hvb2tzL2luZGV4LmpzXCI7XG5pbXBvcnQgeyBQYXJlbnRWYWx1ZUluZGV4UHJvdmlkZXIgfSBmcm9tIFwifi9hZG1pbi9jb21wb25lbnRzL01vZGVsRmllbGRQcm92aWRlci9pbmRleC5qc1wiO1xuaW1wb3J0IHR5cGUgeyBCaW5kQ29tcG9uZW50LCBCaW5kQ29tcG9uZW50UmVuZGVyUHJvcCwgQ21zTW9kZWxGaWVsZCB9IGZyb20gXCJ+L3R5cGVzLmpzXCI7XG5pbXBvcnQgeyBnZXRNdWx0aVZhbHVlUmVuZGVyZXJTZXR0aW5ncyB9IGZyb20gXCJ+L2FkbWluL3BsdWdpbnMvZmllbGRSZW5kZXJlcnMvTXVsdGlWYWx1ZVJlbmRlcmVyU2V0dGluZ3MuanNcIjtcbmltcG9ydCB7XG4gICAgQnV0dG9uLFxuICAgIGNuLFxuICAgIEZvcm1Db21wb25lbnREZXNjcmlwdGlvbixcbiAgICBGb3JtQ29tcG9uZW50RXJyb3JNZXNzYWdlLFxuICAgIEZvcm1Db21wb25lbnROb3RlLFxuICAgIEdyaWQsXG4gICAgU2VwYXJhdG9yXG59IGZyb20gXCJAd2ViaW55L2FkbWluLXVpXCI7XG5cbmNvbnN0IHQgPSBpMThuLm5zKFwiYXBwLWhlYWRsZXNzLWNtcy9hZG1pbi9maWVsZHMvdGV4dFwiKTtcblxuY29uc3Qgc3R5bGUgPSB7XG4gICAgZ3JpZENvbnRhaW5lcjogY3NzYFxuICAgICAgICBwYWRkaW5nOiAwICFpbXBvcnRhbnQ7XG4gICAgYFxufTtcblxuZXhwb3J0IGludGVyZmFjZSBEeW5hbWljU2VjdGlvblByb3BzQ2hpbGRyZW5QYXJhbXMge1xuICAgIEJpbmQ6IEJpbmRDb21wb25lbnQ7XG4gICAgZmllbGQ6IENtc01vZGVsRmllbGQ7XG4gICAgYmluZDoge1xuICAgICAgICBpbmRleDogQmluZENvbXBvbmVudFJlbmRlclByb3A7XG4gICAgICAgIGZpZWxkOiBCaW5kQ29tcG9uZW50UmVuZGVyUHJvcDtcbiAgICB9O1xuICAgIGluZGV4OiBudW1iZXI7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgRHluYW1pY1NlY3Rpb25Qcm9wcyB7XG4gICAgZmllbGQ6IENtc01vZGVsRmllbGQ7XG4gICAgZ2V0QmluZDogR2V0QmluZENhbGxhYmxlO1xuICAgIHNob3dMYWJlbD86IGJvb2xlYW47XG4gICAgY2hpbGRyZW46IChwYXJhbXM6IER5bmFtaWNTZWN0aW9uUHJvcHNDaGlsZHJlblBhcmFtcykgPT4gSlNYLkVsZW1lbnQ7XG4gICAgZW1wdHlWYWx1ZT86IGFueTtcbiAgICBncmlkQ2xhc3NOYW1lPzogc3RyaW5nO1xuICAgIG9uQWRkSXRlbT86IChpbmRleDogbnVtYmVyKSA9PiB2b2lkO1xuICAgIGFkZFZhbHVlQnV0dG9uTGFiZWw/OiBzdHJpbmc7XG59XG5cbmNvbnN0IGRlZmF1bHRBZGRJdGVtID0gKCkgPT4ge1xuICAgIC8vIE5vIG9wLlxufTtcblxuY29uc3QgRHluYW1pY1NlY3Rpb24gPSAoe1xuICAgIGZpZWxkLFxuICAgIGdldEJpbmQsXG4gICAgY2hpbGRyZW4sXG4gICAgc2hvd0xhYmVsID0gdHJ1ZSxcbiAgICBlbXB0eVZhbHVlID0gXCJcIixcbiAgICBvbkFkZEl0ZW0gPSBkZWZhdWx0QWRkSXRlbSxcbiAgICBncmlkQ2xhc3NOYW1lLFxuICAgIC4uLnByb3BzXG59OiBEeW5hbWljU2VjdGlvblByb3BzKSA9PiB7XG4gICAgY29uc3QgQmluZCA9IGdldEJpbmQoKTtcblxuICAgIGNvbnN0IHNldHRpbmdzID0gZ2V0TXVsdGlWYWx1ZVJlbmRlcmVyU2V0dGluZ3MoZmllbGQpO1xuICAgIGNvbnN0IGFkZFZhbHVlQnV0dG9uTGFiZWwgPVxuICAgICAgICBwcm9wcy5hZGRWYWx1ZUJ1dHRvbkxhYmVsID8/IHNldHRpbmdzLmFkZFZhbHVlQnV0dG9uTGFiZWwgPz8gXCJBZGQgVmFsdWVcIjtcblxuICAgIHJldHVybiAoXG4gICAgICAgIC8qIEZpcnN0IHdlIG1vdW50IHRoZSB0b3AgbGV2ZWwgZmllbGQsIGZvciBleGFtcGxlOiBcIml0ZW1zXCIgKi9cbiAgICAgICAgPEJpbmQ+XG4gICAgICAgICAgICB7YmluZEZpZWxkID0+IHtcbiAgICAgICAgICAgICAgICAvKipcbiAgICAgICAgICAgICAgICAgKiBcInZhbHVlXCIgLT4gYW4gYXJyYXkgb2YgaXRlbXNcbiAgICAgICAgICAgICAgICAgKiBcImFwcGVuZFZhbHVlXCIgLT4gYSBjYWxsYmFjayB0byBhZGQgYSBuZXcgdmFsdWUgdG8gdGhlIHRvcCBsZXZlbCBcIml0ZW1zXCIgYXJyYXlcbiAgICAgICAgICAgICAgICAgKi9cbiAgICAgICAgICAgICAgICBjb25zdCB7IHZhbHVlLCBhcHBlbmRWYWx1ZSB9ID0gYmluZEZpZWxkO1xuXG4gICAgICAgICAgICAgICAgY29uc3QgYmluZEZpZWxkVmFsdWU6IHN0cmluZ1tdID0gdmFsdWUgfHwgW107XG5cbiAgICAgICAgICAgICAgICByZXR1cm4gKFxuICAgICAgICAgICAgICAgICAgICA8QmluZC5WYWxpZGF0aW9uQ29udGFpbmVyPlxuICAgICAgICAgICAgICAgICAgICAgICAgPFBhcmVudEZpZWxkUHJvdmlkZXIgdmFsdWU9e3ZhbHVlfSBwYXRoPXtCaW5kLnBhcmVudE5hbWV9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHtzaG93TGFiZWwgJiYgKFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17XCJtYi1zbSBmbGV4IGZsZXgtY29sIGdhcC15LXNtXCJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPFNlcGFyYXRvciBsYWJlbFBvc2l0aW9uPXtcInN0YXJ0XCJ9IHZhcmlhbnQ9e1wiYWNjZW50XCJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxzcGFuXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17XCJ0ZXh0LWFjY2VudC1wcmltYXJ5IHRleHQtbGcgZm9udC1zZW1pYm9sZFwifVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAge2Ake2ZpZWxkLmxhYmVsfSAke1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgYmluZEZpZWxkVmFsdWUubGVuZ3RoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPyBgKCR7YmluZEZpZWxkVmFsdWUubGVuZ3RofSlgXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgOiBcIlwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH1gfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvU2VwYXJhdG9yPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAge2ZpZWxkLmRlc2NyaXB0aW9uICYmIChcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8Rm9ybUNvbXBvbmVudERlc2NyaXB0aW9uIHRleHQ9e2ZpZWxkLmRlc2NyaXB0aW9ufSAvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8R3JpZCBjbGFzc05hbWU9e2NsYXNzU2V0KGdyaWRDbGFzc05hbWUsIHN0eWxlLmdyaWRDb250YWluZXIpfT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHtiaW5kRmllbGRWYWx1ZS5tYXAoKF8sIGluZGV4KSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY29uc3QgQmluZEZpZWxkID0gZ2V0QmluZChpbmRleCk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPEdyaWQuQ29sdW1uIHNwYW49ezEyfSBrZXk9e2luZGV4fT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxCaW5kRmllbGQ+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAge2JpbmRQcm9wcyA9PiAoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxCaW5kRmllbGQuVmFsaWRhdGlvbkNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxQYXJlbnRWYWx1ZUluZGV4UHJvdmlkZXIgaW5kZXg9e2luZGV4fT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB7Y2hpbGRyZW4oe1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBCaW5kOiBCaW5kRmllbGQsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGZpZWxkLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBiaW5kOiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpbmRleDogYmluZFByb3BzLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZmllbGQ6IGJpbmRGaWVsZFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpbmRleFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9QYXJlbnRWYWx1ZUluZGV4UHJvdmlkZXI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8Rm9ybUNvbXBvbmVudE5vdGUgdGV4dD17ZmllbGQubm90ZX0gLz5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9CaW5kRmllbGQuVmFsaWRhdGlvbkNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9CaW5kRmllbGQ+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvR3JpZC5Db2x1bW4+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgKTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8Lz5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPD5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHtiaW5kRmllbGQudmFsaWRhdGlvbi5pc1ZhbGlkID09PSBmYWxzZSAmJiAoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPEdyaWQuQ29sdW1uIHNwYW49ezEyfT5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPEZvcm1Db21wb25lbnRFcnJvck1lc3NhZ2VcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGludmFsaWRcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHRleHQ9e2JpbmRGaWVsZC52YWxpZGF0aW9uLm1lc3NhZ2V9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9HcmlkLkNvbHVtbj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8R3JpZC5Db2x1bW4gc3Bhbj17MTJ9PlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGJpbmRGaWVsZFZhbHVlLmxlbmd0aCA+IDAgPyBcInB0LW5vbmVcIiA6IFwicHQtc21cIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPEJ1dHRvblxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB2YXJpYW50PXtcInRlcnRpYXJ5XCJ9XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGljb249ezxBZGRJY29uIC8+fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB0ZXh0PXt0KGFkZFZhbHVlQnV0dG9uTGFiZWwpfVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBhcHBlbmRWYWx1ZShlbXB0eVZhbHVlKTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9uQWRkSXRlbShiaW5kRmllbGRWYWx1ZS5sZW5ndGgpO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9HcmlkLkNvbHVtbj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L0dyaWQ+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L1BhcmVudEZpZWxkUHJvdmlkZXI+XG4gICAgICAgICAgICAgICAgICAgIDwvQmluZC5WYWxpZGF0aW9uQ29udGFpbmVyPlxuICAgICAgICAgICAgICAgICk7XG4gICAgICAgICAgICB9fVxuICAgICAgICA8L0JpbmQ+XG4gICAgKTtcbn07XG5cbmV4cG9ydCBkZWZhdWx0IER5bmFtaWNTZWN0aW9uO1xuIl19 */",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   })
 };
-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(_hooks.ParentFieldProvider, {
-        value: value,
-        path: Bind.parentName
-      }, /*#__PURE__*/_react.default.createElement(_Grid.Grid, {
-        className: (0, _classnames.default)(gridClassName, style.gridContainer)
-      }, 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 /*#__PURE__*/_react.default.createElement(_ModelFieldProvider.ParentValueIndexProvider, {
-          index: 0
-        }, 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 /*#__PURE__*/_react.default.createElement(_ModelFieldProvider.ParentValueIndexProvider, {
-            index: realIndex
-          }, 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, {
+const defaultAddItem = () => {
+  // No op.
+};
+const DynamicSection = ({
+  field,
+  getBind,
+  children,
+  showLabel = true,
+  emptyValue = "",
+  onAddItem = defaultAddItem,
+  gridClassName,
+  ...props
+}) => {
+  const Bind = getBind();
+  const settings = getMultiValueRendererSettings(field);
+  const addValueButtonLabel = props.addValueButtonLabel ?? settings.addValueButtonLabel ?? "Add Value";
+  return /*#__PURE__*/ /* First we mount the top level field, for example: "items" */React.createElement(Bind, null, bindField => {
+    /**
+     * "value" -> an array of items
+     * "appendValue" -> a callback to add a new value to the top level "items" array
+     */
+    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: classSet(gridClassName, style.gridContainer)
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, bindFieldValue.map((_, index) => {
+      const BindField = getBind(index);
+      return /*#__PURE__*/React.createElement(Grid.Column, {
         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(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Add value"])))))));
-    })
-  );
+        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, bindField.validation.isValid === false && /*#__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, {
+      variant: "tertiary",
+      icon: /*#__PURE__*/React.createElement(AddIcon, null),
+      text: t(addValueButtonLabel),
+      onClick: () => {
+        appendValue(emptyValue);
+        onAddItem(bindFieldValue.length);
+      }
+    }))))));
+  });
 };
-var _default = exports.default = DynamicSection;
+export default DynamicSection;
 
 //# sourceMappingURL=DynamicSection.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_classnames","_emotion","_i18n","_Grid","_Button","_FormElementMessage","_add18px","_hooks","_ModelFieldProvider","_templateObject","_templateObject2","t","i18n","ns","style","gridContainer","css","_taggedTemplateLiteral2","default","addButton","width","borderTop","paddingTop","DynamicSection","_ref","field","getBind","Label","children","_ref$showLabel","showLabel","_ref$emptyValue","emptyValue","renderTitle","gridClassName","Bind","FirstFieldBind","createElement","bindField","value","appendValue","bindFieldValue","ParentFieldProvider","path","parentName","Grid","className","classSet","Cell","span","label","bindProps","ParentValueIndexProvider","index","bind","slice","map","_","realIndex","BindField","key","validation","isValid","FormElementMessage","error","message","ButtonDefault","disabled","undefined","onClick","ButtonIcon","icon","ReactComponent","_default","exports"],"sources":["DynamicSection.tsx"],"sourcesContent":["import React from \"react\";\nimport classSet from \"classnames\";\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, CmsModelField } 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\";\nimport { ParentFieldProvider } from \"~/admin/hooks\";\nimport { ParentValueIndexProvider } from \"~/admin/components/ModelFieldProvider\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst style = {\n    gridContainer: css`\n        padding: 0 !important;\n    `,\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: 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    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 = ({\n    field,\n    getBind,\n    Label,\n    children,\n    showLabel = true,\n    emptyValue = \"\",\n    renderTitle,\n    gridClassName\n}: DynamicSectionProps) => {\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                    <ParentFieldProvider value={value} path={Bind.parentName}>\n                        <Grid className={classSet(gridClassName, style.gridContainer)}>\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\n                                <FirstFieldBind>\n                                    {bindProps => (\n                                        <ParentValueIndexProvider index={0}>\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                                        </ParentValueIndexProvider>\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                                                <ParentValueIndexProvider index={realIndex}>\n                                                    {children({\n                                                        Bind: BindField,\n                                                        field,\n                                                        bind: {\n                                                            index: bindProps,\n                                                            field: bindField\n                                                        },\n                                                        index: realIndex\n                                                    })}\n                                                </ParentValueIndexProvider>\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                    </ParentFieldProvider>\n                );\n            }}\n        </Bind>\n    );\n};\n\nexport default DynamicSection;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","classSet","css","i18n","ReactComponent","AddIcon","ParentFieldProvider","ParentValueIndexProvider","getMultiValueRendererSettings","Button","cn","FormComponentDescription","FormComponentErrorMessage","FormComponentNote","Grid","Separator","t","ns","style","gridContainer","process","env","NODE_ENV","name","styles","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","defaultAddItem","DynamicSection","field","getBind","children","showLabel","emptyValue","onAddItem","gridClassName","props","Bind","settings","addValueButtonLabel","createElement","bindField","value","appendValue","bindFieldValue","ValidationContainer","path","parentName","className","labelPosition","variant","label","length","description","text","Fragment","map","_","index","BindField","Column","span","key","bindProps","bind","note","validation","isValid","invalid","message","icon","onClick"],"sources":["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    showLabel?: boolean;\n    children: (params: DynamicSectionPropsChildrenParams) => 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    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                                <Grid.Column span={12}>\n                                    <div\n                                        className={cn(\n                                            bindFieldValue.length > 0 ? \"pt-none\" : \"pt-sm\"\n                                        )}\n                                    >\n                                        <Button\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                            </Grid>\n                        </ParentFieldProvider>\n                    </Bind.ValidationContainer>\n                );\n            }}\n        </Bind>\n    );\n};\n\nexport default DynamicSection;\n"],"mappings":"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","ignoreList":[]}

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,26 @@
+import React from "react";
+import { Bind } from "@webiny/form";
+import { Grid, Input } from "@webiny/admin-ui";
+const DEFAULT_SETTINGS = {
+  addValueButtonLabel: "Add Value"
+};
+export const getMultiValueRendererSettings = field => {
+  if (typeof field.renderer === "function") {
+    return DEFAULT_SETTINGS;
+  }
+  return field.renderer.settings?.multiValue ?? DEFAULT_SETTINGS;
+};
+export const MultiValueRendererSettings = ({
+  field
+}) => {
+  return /*#__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`
+  })));
+};
+
+//# sourceMappingURL=MultiValueRendererSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Bind","Grid","Input","DEFAULT_SETTINGS","addValueButtonLabel","getMultiValueRendererSettings","field","renderer","settings","multiValue","MultiValueRendererSettings","createElement","Column","span","name","defaultValue","label"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAKzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;AAM9C,MAAMC,gBAA6C,GAAG;EAClDC,mBAAmB,EAAE;AACzB,CAAC;AAED,OAAO,MAAMC,6BAA6B,GACtCC,KAAoB,IACU;EAC9B,IAAI,OAAOA,KAAK,CAACC,QAAQ,KAAK,UAAU,EAAE;IACtC,OAAOJ,gBAAgB;EAC3B;EAEA,OAAOG,KAAK,CAACC,QAAQ,CAACC,QAAQ,EAAEC,UAAU,IAAIN,gBAAgB;AAClE,CAAC;AAED,OAAO,MAAMO,0BAA0B,GAAGA,CAAC;EAAEJ;AAA0C,CAAC,KAAK;EACzF,oBACIP,KAAA,CAAAY,aAAA,CAACV,IAAI,CAACW,MAAM;IAACC,IAAI,EAAE;EAAG,gBAClBd,KAAA,CAAAY,aAAA,CAACX,IAAI;IACDc,IAAI,EAAE,kDAAmD;IACzDC,YAAY,EAAE,OAAOT,KAAK,CAACU,KAAK;EAAG,gBAEnCjB,KAAA,CAAAY,aAAA,CAACT,KAAK;IAACc,KAAK,EAAE;EAA2B,CAAE,CACzC,CACG,CAAC;AAEtB,CAAC","ignoreList":[]}

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

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

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

@@ -1,42 +1,34 @@
-"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 = {
+import React from "react";
+import get from "lodash/get.js";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { Switch } from "@webiny/admin-ui";
+const t = i18n.ns("app-headless-cms/admin/fields/boolean");
+const 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");
+    name: t`Boolean Input`,
+    description: t`Renders a simple switch button.`,
+    canUse({
+      field
+    }) {
+      return field.type === "boolean" && !field.list && !get(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)
-        }));
-      });
+    render({
+      field,
+      getBind
+    }) {
+      const Bind = getBind();
+      return /*#__PURE__*/React.createElement(Bind, null, bindProps => /*#__PURE__*/React.createElement(Switch, Object.assign({}, bindProps, {
+        label: field.label,
+        description: field.description,
+        note: field.note,
+        "data-testid": `fr.input.boolean.${field.label}`
+      })));
     }
   }
 };
-var _default = exports.default = plugin;
+export default plugin;
 
 //# sourceMappingURL=booleanSwitch.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_get","_Switch","_i18n","_templateObject","_templateObject2","t","i18n","ns","plugin","type","name","renderer","rendererName","_taggedTemplateLiteral2","default","description","canUse","_ref","field","multipleValues","get","render","_ref2","getBind","Bind","createElement","bindProps","Switch","Object","assign","label","helpText","concat","_default","exports"],"sources":["booleanSwitch.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { CmsModelFieldRendererPlugin } 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: 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\" &&\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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAAwC,IAAAI,eAAA,EAAAC,gBAAA;AAExC,IAAMC,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,uCAAuC,CAAC;AAE1D,IAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,mCAAmC;EACzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,eAAe;IAC7BF,IAAI,EAAEL,CAAC,CAAAF,eAAA,KAAAA,eAAA,OAAAU,uBAAA,CAAAC,OAAA,sBAAe;IACtBC,WAAW,EAAEV,CAAC,CAAAD,gBAAA,KAAAA,gBAAA,OAAAS,uBAAA,CAAAC,OAAA,wCAAiC;IAC/CE,MAAM,WAAAA,OAAAC,IAAA,EAAY;MAAA,IAATC,KAAK,GAAAD,IAAA,CAALC,KAAK;MACV,OACIA,KAAK,CAACT,IAAI,KAAK,SAAS,IACxB,CAACS,KAAK,CAACC,cAAc,IACrB,CAAC,IAAAC,YAAG,EAACF,KAAK,EAAE,0BAA0B,CAAC;IAE/C,CAAC;IACDG,MAAM,WAAAA,OAAAC,KAAA,EAAqB;MAAA,IAAlBJ,KAAK,GAAAI,KAAA,CAALJ,KAAK;QAAEK,OAAO,GAAAD,KAAA,CAAPC,OAAO;MACnB,IAAMC,IAAI,GAAGD,OAAO,CAAC,CAAC;MAEtB,oBACI1B,MAAA,CAAAiB,OAAA,CAAAW,aAAA,CAACD,IAAI,QACA,UAAAE,SAAS;QAAA,oBACN7B,MAAA,CAAAiB,OAAA,CAAAW,aAAA,CAACxB,OAAA,CAAA0B,MAAM,EAAAC,MAAA,CAAAC,MAAA,KACCH,SAAS;UACbI,KAAK,EAAEZ,KAAK,CAACY,KAAM;UACnBf,WAAW,EAAEG,KAAK,CAACa,QAAS;UAC5B,mCAAAC,MAAA,CAAiCd,KAAK,CAACY,KAAK;QAAG,EAClD,CAAC;MAAA,CAEJ,CAAC;IAEf;EACJ;AACJ,CAAC;AAAC,IAAAG,QAAA,GAAAC,OAAA,CAAApB,OAAA,GAEaN,MAAM","ignoreList":[]}
+{"version":3,"names":["React","get","i18n","Switch","t","ns","plugin","type","name","renderer","rendererName","description","canUse","field","list","render","getBind","Bind","createElement","bindProps","Object","assign","label","note"],"sources":["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\";\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({ field, getBind }) {\n            const Bind = getBind();\n\n            return (\n                <Bind>\n                    {bindProps => (\n                        <Switch\n                            {...bindProps}\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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,GAAG,MAAM,eAAe;AAE/B,SAASC,IAAI,QAAQ,2BAA2B;AAChD,SAASC,MAAM,QAAQ,kBAAkB;AAEzC,MAAMC,CAAC,GAAGF,IAAI,CAACG,EAAE,CAAC,uCAAuC,CAAC;AAE1D,MAAMC,MAAmC,GAAG;EACxCC,IAAI,EAAE,2BAA2B;EACjCC,IAAI,EAAE,mCAAmC;EACzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,eAAe;IAC7BF,IAAI,EAAEJ,CAAC,eAAe;IACtBO,WAAW,EAAEP,CAAC,iCAAiC;IAC/CQ,MAAMA,CAAC;MAAEC;IAAM,CAAC,EAAE;MACd,OACIA,KAAK,CAACN,IAAI,KAAK,SAAS,IAAI,CAACM,KAAK,CAACC,IAAI,IAAI,CAACb,GAAG,CAACY,KAAK,EAAE,0BAA0B,CAAC;IAE1F,CAAC;IACDE,MAAMA,CAAC;MAAEF,KAAK;MAAEG;IAAQ,CAAC,EAAE;MACvB,MAAMC,IAAI,GAAGD,OAAO,CAAC,CAAC;MAEtB,oBACIhB,KAAA,CAAAkB,aAAA,CAACD,IAAI,QACAE,SAAS,iBACNnB,KAAA,CAAAkB,aAAA,CAACf,MAAM,EAAAiB,MAAA,CAAAC,MAAA,KACCF,SAAS;QACbG,KAAK,EAAET,KAAK,CAACS,KAAM;QACnBX,WAAW,EAAEE,KAAK,CAACF,WAAY;QAC/BY,IAAI,EAAEV,KAAK,CAACU,IAAK;QACjB,eAAa,oBAAoBV,KAAK,CAACS,KAAK;MAAG,EAClD,CAEH,CAAC;IAEf;EACJ;AACJ,CAAC;AAED,eAAehB,MAAM","ignoreList":[]}

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

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

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

@@ -1,11 +1,4 @@
-"use strict";
-
-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 = exports.default = [_booleanSwitch.default];
+import booleanSwitch from "./booleanSwitch.js";
+export default [booleanSwitch];
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_booleanSwitch","_interopRequireDefault","require","_default","exports","default","booleanSwitch"],"sources":["index.ts"],"sourcesContent":["import booleanSwitch from \"./booleanSwitch\";\n\nexport default [booleanSwitch];\n"],"mappings":";;;;;;;AAAA,IAAAA,cAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA4C,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAE7B,CAACC,sBAAa,CAAC","ignoreList":[]}
+{"version":3,"names":["booleanSwitch"],"sources":["index.ts"],"sourcesContent":["import booleanSwitch from \"./booleanSwitch.js\";\n\nexport default [booleanSwitch];\n"],"mappings":"AAAA,OAAOA,aAAa;AAEpB,eAAe,CAACA,aAAa,CAAC","ignoreList":[]}

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

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