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

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

@@ -1,54 +1,64 @@
-"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 _i18n = require("@webiny/app/i18n");
-
-var _Fields = require("../../../components/ContentEntryForm/Fields");
-
-var _Accordion = require("@webiny/ui/Accordion");
-
-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-object-accordion",
-  renderer: {
-    rendererName: "object-accordion",
-    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Accordion"]))),
-    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders fields within an accordion."]))),
-    canUse: function canUse(_ref) {
-      var field = _ref.field;
-      return field.type === "object" && !field.multipleValues;
-    },
-    render: function render(_ref2) {
-      var field = _ref2.field,
-          getBind = _ref2.getBind,
-          contentModel = _ref2.contentModel;
-      var Bind = getBind();
-      var settings = field.settings || {};
-      return /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, null, /*#__PURE__*/_react.default.createElement(_Accordion.AccordionItem, {
-        title: field.label,
-        description: field.helpText
-      }, /*#__PURE__*/_react.default.createElement(_Fields.Fields, {
-        Bind: Bind,
-        contentModel: contentModel,
-        fields: settings.fields || [],
-        layout: settings.layout || []
-      })));
+import react from "react";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { Accordion } from "@webiny/admin-ui";
+import { Fields } from "../../../components/ContentEntryForm/Fields.js";
+import { FieldSettings } from "./FieldSettings.js";
+import { ParentFieldProvider } from "../../../hooks/index.js";
+import { ParentValueIndexProvider } from "../../../components/ModelFieldProvider/index.js";
+import { AccordionRenderSettings, getAccordionRenderSettings } from "../AccordionRenderSettings.js";
+import { ReactComponent } from "@webiny/icons/horizontal_rule.svg";
+const t = i18n.ns("app-headless-cms/admin/fields/text");
+const singleObjectAccordion_plugin = {
+    type: "cms-editor-field-renderer",
+    name: "cms-editor-field-renderer-object-accordion",
+    renderer: {
+        rendererName: "object-accordion",
+        name: t`Accordion`,
+        description: t`Renders fields within an accordion.`,
+        canUse ({ field }) {
+            return "object" === field.type && !field.list;
+        },
+        render ({ field, getBind, contentModel }) {
+            const Bind = getBind();
+            const fieldSettings = FieldSettings.createFrom(field);
+            if (!fieldSettings.hasFields()) {
+                fieldSettings.logMissingFields();
+                return null;
+            }
+            const settings = fieldSettings.getSettings();
+            const { open } = getAccordionRenderSettings(field);
+            return /*#__PURE__*/ react.createElement(Bind, null, (bindProps)=>/*#__PURE__*/ react.createElement(Bind.ValidationContainer, null, /*#__PURE__*/ react.createElement(ParentFieldProvider, {
+                    value: bindProps.value,
+                    path: Bind.parentName
+                }, /*#__PURE__*/ react.createElement(ParentValueIndexProvider, {
+                    index: -1
+                }, /*#__PURE__*/ react.createElement(Accordion, {
+                    background: "base",
+                    variant: "container"
+                }, /*#__PURE__*/ react.createElement(Accordion.Item, {
+                    icon: /*#__PURE__*/ react.createElement(Accordion.Item.Icon, {
+                        color: "accent",
+                        label: "Accordion Item",
+                        icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+                    }),
+                    title: field.label,
+                    description: field.description,
+                    defaultOpen: open
+                }, /*#__PURE__*/ react.createElement(Fields, {
+                    Bind: Bind,
+                    contentModel: contentModel,
+                    fields: settings.fields || [],
+                    layout: settings.layout || []
+                })))))));
+        },
+        renderSettings ({ field }) {
+            return /*#__PURE__*/ react.createElement(AccordionRenderSettings, {
+                field: field
+            });
+        }
     }
-  }
 };
-var _default = plugin;
-exports.default = _default;
+const singleObjectAccordion = singleObjectAccordion_plugin;
+export default singleObjectAccordion;
+
+//# sourceMappingURL=singleObjectAccordion.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","getBind","contentModel","Bind","settings","label","helpText","fields","layout"],"sources":["singleObjectAccordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { Accordion, AccordionItem } from \"@webiny/ui/Accordion\";\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-object-accordion\",\n    renderer: {\n        rendererName: \"object-accordion\",\n        name: t`Accordion`,\n        description: t`Renders fields within an accordion.`,\n        canUse({ field }) {\n            return field.type === \"object\" && !field.multipleValues;\n        },\n        render({ field, getBind, contentModel }) {\n            const Bind = getBind();\n\n            const settings = field.settings || {};\n\n            return (\n                <Accordion>\n                    <AccordionItem title={field.label} description={field.helpText}>\n                        <Fields\n                            Bind={Bind}\n                            contentModel={contentModel}\n                            fields={settings.fields || []}\n                            layout={settings.layout || []}\n                        />\n                    </AccordionItem>\n                </Accordion>\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,4CAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,kBADR;IAENF,IAAI,EAAEL,CAAF,4FAFE;IAGNQ,WAAW,EAAER,CAAF,wHAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OAAOA,KAAK,CAACN,IAAN,KAAe,QAAf,IAA2B,CAACM,KAAK,CAACC,cAAzC;IACH,CANK;IAONC,MAPM,yBAOmC;MAAA,IAAhCF,KAAgC,SAAhCA,KAAgC;MAAA,IAAzBG,OAAyB,SAAzBA,OAAyB;MAAA,IAAhBC,YAAgB,SAAhBA,YAAgB;MACrC,IAAMC,IAAI,GAAGF,OAAO,EAApB;MAEA,IAAMG,QAAQ,GAAGN,KAAK,CAACM,QAAN,IAAkB,EAAnC;MAEA,oBACI,6BAAC,oBAAD,qBACI,6BAAC,wBAAD;QAAe,KAAK,EAAEN,KAAK,CAACO,KAA5B;QAAmC,WAAW,EAAEP,KAAK,CAACQ;MAAtD,gBACI,6BAAC,cAAD;QACI,IAAI,EAAEH,IADV;QAEI,YAAY,EAAED,YAFlB;QAGI,MAAM,EAAEE,QAAQ,CAACG,MAAT,IAAmB,EAH/B;QAII,MAAM,EAAEH,QAAQ,CAACI,MAAT,IAAmB;MAJ/B,EADJ,CADJ,CADJ;IAYH;EAxBK;AAH+B,CAA7C;eA+BejB,M"}
+{"version":3,"file":"admin/plugins/fieldRenderers/object/singleObjectAccordion.js","sources":["../../../../../src/admin/plugins/fieldRenderers/object/singleObjectAccordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types.js\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields.js\";\nimport { FieldSettings } from \"./FieldSettings.js\";\nimport { ParentFieldProvider } from \"~/admin/hooks/index.js\";\nimport { ParentValueIndexProvider } from \"~/admin/components/ModelFieldProvider/index.js\";\nimport {\n    AccordionRenderSettings,\n    getAccordionRenderSettings\n} from \"~/admin/plugins/fieldRenderers/AccordionRenderSettings.js\";\nimport { ReactComponent as HorizontalRuleIcon } from \"@webiny/icons/horizontal_rule.svg\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\nconst plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-object-accordion\",\n    renderer: {\n        rendererName: \"object-accordion\",\n        name: t`Accordion`,\n        description: t`Renders fields within an accordion.`,\n        canUse({ field }) {\n            return field.type === \"object\" && !field.list;\n        },\n        render({ field, getBind, contentModel }) {\n            const Bind = getBind();\n\n            const fieldSettings = FieldSettings.createFrom(field);\n\n            if (!fieldSettings.hasFields()) {\n                fieldSettings.logMissingFields();\n                return null;\n            }\n\n            const settings = fieldSettings.getSettings();\n            const { open } = getAccordionRenderSettings(field);\n\n            return (\n                <Bind>\n                    {bindProps => (\n                        <Bind.ValidationContainer>\n                            <ParentFieldProvider value={bindProps.value} path={Bind.parentName}>\n                                <ParentValueIndexProvider index={-1}>\n                                    <Accordion background={\"base\"} variant={\"container\"}>\n                                        <Accordion.Item\n                                            icon={\n                                                <Accordion.Item.Icon\n                                                    color={\"accent\"}\n                                                    label=\"Accordion Item\"\n                                                    icon={<HorizontalRuleIcon />}\n                                                />\n                                            }\n                                            title={field.label}\n                                            description={field.description}\n                                            defaultOpen={open}\n                                        >\n                                            <Fields\n                                                Bind={Bind}\n                                                contentModel={contentModel}\n                                                fields={settings.fields || []}\n                                                layout={settings.layout || []}\n                                            />\n                                        </Accordion.Item>\n                                    </Accordion>\n                                </ParentValueIndexProvider>\n                            </ParentFieldProvider>\n                        </Bind.ValidationContainer>\n                    )}\n                </Bind>\n            );\n        },\n        renderSettings({ field }) {\n            return <AccordionRenderSettings field={field} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"names":["t","i18n","plugin","field","getBind","contentModel","Bind","fieldSettings","FieldSettings","settings","open","getAccordionRenderSettings","bindProps","ParentFieldProvider","ParentValueIndexProvider","Accordion","HorizontalRuleIcon","Fields","AccordionRenderSettings"],"mappings":";;;;;;;;;AAcA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAElB,MAAMC,+BAAsC;IACxC,MAAM;IACN,MAAM;IACN,UAAU;QACN,cAAc;QACd,MAAMF,CAAC,CAAC,SAAS,CAAC;QAClB,aAAaA,CAAC,CAAC,mCAAmC,CAAC;QACnD,QAAO,EAAEG,KAAK,EAAE;YACZ,OAAOA,AAAe,aAAfA,MAAM,IAAI,IAAiB,CAACA,MAAM,IAAI;QACjD;QACA,QAAO,EAAEA,KAAK,EAAEC,OAAO,EAAEC,YAAY,EAAE;YACnC,MAAMC,OAAOF;YAEb,MAAMG,gBAAgBC,cAAc,UAAU,CAACL;YAE/C,IAAI,CAACI,cAAc,SAAS,IAAI;gBAC5BA,cAAc,gBAAgB;gBAC9B,OAAO;YACX;YAEA,MAAME,WAAWF,cAAc,WAAW;YAC1C,MAAM,EAAEG,IAAI,EAAE,GAAGC,2BAA2BR;YAE5C,OAAO,WAAP,GACI,oBAACG,MAAAA,MACIM,CAAAA,YAAAA,WAAAA,GACG,oBAACN,KAAK,mBAAmB,sBACrB,oBAACO,qBAAmBA;oBAAC,OAAOD,UAAU,KAAK;oBAAE,MAAMN,KAAK,UAAU;iCAC9D,oBAACQ,0BAAwBA;oBAAC,OAAO;iCAC7B,oBAACC,WAASA;oBAAC,YAAY;oBAAQ,SAAS;iCACpC,oBAACA,UAAU,IAAI;oBACX,oBACI,oBAACA,UAAU,IAAI,CAAC,IAAI;wBAChB,OAAO;wBACP,OAAM;wBACN,oBAAM,oBAACC,gBAAkBA;;oBAGjC,OAAOb,MAAM,KAAK;oBAClB,aAAaA,MAAM,WAAW;oBAC9B,aAAaO;iCAEb,oBAACO,QAAMA;oBACH,MAAMX;oBACN,cAAcD;oBACd,QAAQI,SAAS,MAAM,IAAI,EAAE;oBAC7B,QAAQA,SAAS,MAAM,IAAI,EAAE;;QAUrE;QACA,gBAAe,EAAEN,KAAK,EAAE;YACpB,OAAO,WAAP,GAAO,oBAACe,yBAAuBA;gBAAC,OAAOf;;QAC3C;IACJ;AACJ;AAEA,8BAAeD"}

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

@@ -0,0 +1,2 @@
+import type { CmsModelFieldRendererPlugin } from "../../../types.js";
+export declare const passthroughFieldRenderer: CmsModelFieldRendererPlugin;

package/admin/plugins/fieldRenderers/passthrough.js

@@ -0,0 +1,26 @@
+import react from "react";
+import { Fields } from "@webiny/app-headless-cms-common";
+const passthroughFieldRenderer = {
+    type: "cms-editor-field-renderer",
+    name: "cms-editor-field-renderer-passthrough",
+    renderer: {
+        rendererName: "passthrough",
+        name: "Passthrough Renderer",
+        description: "Render child fields without any extra wrappers.",
+        canUse () {
+            return false;
+        },
+        render ({ field, contentModel, getBind }) {
+            const Bind = getBind();
+            return /*#__PURE__*/ react.createElement(Fields, {
+                Bind: Bind,
+                contentModel: contentModel,
+                fields: field.settings?.fields ?? [],
+                layout: field.settings?.layout ?? []
+            });
+        }
+    }
+};
+export { passthroughFieldRenderer };
+
+//# sourceMappingURL=passthrough.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"admin/plugins/fieldRenderers/passthrough.js","sources":["../../../../src/admin/plugins/fieldRenderers/passthrough.tsx"],"sourcesContent":["import React from \"react\";\nimport { Fields } from \"@webiny/app-headless-cms-common\";\nimport type { CmsModelFieldRendererPlugin } from \"~/types.js\";\n\nexport const passthroughFieldRenderer: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-passthrough\",\n    renderer: {\n        rendererName: \"passthrough\",\n        name: \"Passthrough Renderer\",\n        description: `Render child fields without any extra wrappers.`,\n        canUse() {\n            return false;\n        },\n        render({ field, contentModel, getBind }) {\n            const Bind = getBind();\n            return (\n                <Fields\n                    Bind={Bind}\n                    contentModel={contentModel}\n                    fields={field.settings?.fields ?? []}\n                    layout={field.settings?.layout ?? []}\n                />\n            );\n        }\n    }\n};\n"],"names":["passthroughFieldRenderer","field","contentModel","getBind","Bind","Fields"],"mappings":";;AAIO,MAAMA,2BAAwD;IACjE,MAAM;IACN,MAAM;IACN,UAAU;QACN,cAAc;QACd,MAAM;QACN,aAAa;QACb;YACI,OAAO;QACX;QACA,QAAO,EAAEC,KAAK,EAAEC,YAAY,EAAEC,OAAO,EAAE;YACnC,MAAMC,OAAOD;YACb,OAAO,WAAP,GACI,oBAACE,QAAMA;gBACH,MAAMD;gBACN,cAAcF;gBACd,QAAQD,MAAM,QAAQ,EAAE,UAAU,EAAE;gBACpC,QAAQA,MAAM,QAAQ,EAAE,UAAU,EAAE;;QAGhD;IACJ;AACJ"}

package/admin/plugins/fieldRenderers/radioButtons.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/radioButtons.js

@@ -1,68 +1,51 @@
-"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 _Radio = require("@webiny/ui/Radio");
-
-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-radio-buttons",
-  renderer: {
-    rendererName: "radio-buttons",
-    name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Radio Buttons"]))),
-    description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders radio buttons, allowing selection of a single value."]))),
-    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 || {
-        options: []
-      },
-          _ref3$values = _ref3.values,
-          options = _ref3$values === void 0 ? [] : _ref3$values;
-
-      return /*#__PURE__*/_react.default.createElement(Bind, null, /*#__PURE__*/_react.default.createElement(_Radio.RadioGroup, {
-        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(_Radio.Radio, {
-            label: option.label,
-            value: getValue(value),
-            onChange: onChange(value),
-            "data-testid": "fr.input.".concat(field.label, ".").concat(option.label)
-          }));
-        }));
-      }));
+import react from "react";
+import get from "lodash/get.js";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { RadioGroup } from "@webiny/admin-ui";
+import { useFieldEffectiveRules, useModelField } from "@webiny/app-headless-cms-common";
+const t = i18n.ns("app-headless-cms/admin/fields/text");
+const radioButtons_plugin = {
+    type: "cms-editor-field-renderer",
+    name: "cms-editor-field-renderer-radio-buttons",
+    renderer: {
+        rendererName: "radio-buttons",
+        name: t`Radio Buttons`,
+        description: t`Renders radio buttons, allowing selection of a single value.`,
+        canUse ({ field }) {
+            return !field.list && !!get(field, "predefinedValues.enabled");
+        },
+        render ({ getBind }) {
+            const { field } = useModelField();
+            const rules = useFieldEffectiveRules(field);
+            const disabled = !rules.canEdit || rules.disabled;
+            const Bind = getBind();
+            const { values: options = [] } = field.predefinedValues || {
+                options: []
+            };
+            const defaultOption = options.find((opt)=>true === opt.selected);
+            return /*#__PURE__*/ react.createElement(Bind, {
+                defaultValue: defaultOption ? defaultOption.value : void 0
+            }, ({ onChange, value, ...bind })=>/*#__PURE__*/ react.createElement(Bind.ValidationContainer, null, /*#__PURE__*/ react.createElement(RadioGroup, {
+                    ...bind,
+                    disabled: disabled,
+                    label: field.label,
+                    description: field.description,
+                    note: field.note,
+                    hint: field.help,
+                    items: options.map((option)=>({
+                            label: option.label,
+                            value: String(option.value),
+                            selected: option.selected
+                        })),
+                    value: void 0 !== value ? String(value) : void 0,
+                    onChange: (value)=>{
+                        "number" === field.type ? onChange(Number(value)) : onChange(String(value));
+                    }
+                })));
+        }
     }
-  }
 };
-var _default = plugin;
-exports.default = _default;
+const radioButtons = radioButtons_plugin;
+export default radioButtons;
+
+//# sourceMappingURL=radioButtons.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","get","render","getBind","Bind","predefinedValues","options","values","label","helpText","onChange","getValue","map","option","index","value","Number","String"],"sources":["radioButtons.tsx"],"sourcesContent":["import React from \"react\";\nimport get from \"lodash/get\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Radio, RadioGroup } from \"@webiny/ui/Radio\";\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-radio-buttons\",\n    renderer: {\n        rendererName: \"radio-buttons\",\n        name: t`Radio Buttons`,\n        description: t`Renders radio buttons, allowing selection of a single value.`,\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                options: []\n            };\n\n            return (\n                <Bind>\n                    <RadioGroup label={field.label} description={field.helpText}>\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                                            <Radio\n                                                label={option.label}\n                                                value={getValue(value)}\n                                                onChange={onChange(value)}\n                                                data-testid={`fr.input.${field.label}.${option.label}`}\n                                            />\n                                        </div>\n                                    );\n                                })}\n                            </React.Fragment>\n                        )}\n                    </RadioGroup>\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,yCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,eADR;IAENF,IAAI,EAAEL,CAAF,gGAFE;IAGNQ,WAAW,EAAER,CAAF,iJAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OAAO,CAACA,KAAK,CAACC,cAAP,IAAyB,CAAC,CAAC,IAAAC,YAAA,EAAIF,KAAJ,EAAW,0BAAX,CAAlC;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,OAAO,EAAE;MAD8C,CAA3D;MAAA,yBAAQC,MAAR;MAAA,IAAgBD,OAAhB,6BAA0B,EAA1B;;MAIA,oBACI,6BAAC,IAAD,qBACI,6BAAC,iBAAD;QAAY,KAAK,EAAEP,KAAK,CAACS,KAAzB;QAAgC,WAAW,EAAET,KAAK,CAACU;MAAnD,GACK;QAAA,IAAGC,QAAH,SAAGA,QAAH;QAAA,IAAaC,QAAb,SAAaA,QAAb;QAAA,oBACG,6BAAC,cAAD,CAAO,QAAP,QACKL,OAAO,CAACM,GAAR,CAAY,UAACC,MAAD,EAASC,KAAT,EAAmB;UAC5B,IAAMC,KAAK,GACPhB,KAAK,CAACN,IAAN,KAAe,QAAf,GACMuB,MAAM,CAACH,MAAM,CAACE,KAAR,CADZ,GAEMF,MAAM,CAACE,KAHjB;UAIA,oBACI;YAAK,GAAG,EAAEE,MAAM,CAACJ,MAAM,CAACE,KAAR,CAAN,GAAuBD;UAAjC,gBACI,6BAAC,YAAD;YACI,KAAK,EAAED,MAAM,CAACL,KADlB;YAEI,KAAK,EAAEG,QAAQ,CAACI,KAAD,CAFnB;YAGI,QAAQ,EAAEL,QAAQ,CAACK,KAAD,CAHtB;YAII,kCAAyBhB,KAAK,CAACS,KAA/B,cAAwCK,MAAM,CAACL,KAA/C;UAJJ,EADJ,CADJ;QAUH,CAfA,CADL,CADH;MAAA,CADL,CADJ,CADJ;IA0BH;EAxCK;AAH+B,CAA7C;eA+CehB,M"}
+{"version":3,"file":"admin/plugins/fieldRenderers/radioButtons.js","sources":["../../../../src/admin/plugins/fieldRenderers/radioButtons.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 { RadioGroup } 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 plugin: CmsModelFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-radio-buttons\",\n    renderer: {\n        rendererName: \"radio-buttons\",\n        name: t`Radio Buttons`,\n        description: t`Renders radio buttons, allowing selection of a single value.`,\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 disabled = !rules.canEdit || rules.disabled;\n            const Bind = getBind();\n\n            const { values: options = [] } = field.predefinedValues || {\n                options: []\n            };\n\n            const defaultOption = options.find(opt => opt.selected === true);\n\n            return (\n                <Bind defaultValue={defaultOption ? defaultOption.value : undefined}>\n                    {({ onChange, value, ...bind }) => (\n                        <Bind.ValidationContainer>\n                            <RadioGroup\n                                {...bind}\n                                disabled={disabled}\n                                label={field.label}\n                                description={field.description}\n                                note={field.note}\n                                hint={field.help}\n                                items={options.map(option => ({\n                                    label: option.label,\n                                    value: String(option.value),\n                                    selected: option.selected\n                                }))}\n                                value={typeof value !== \"undefined\" ? String(value) : undefined}\n                                onChange={value => {\n                                    if (field.type === \"number\") {\n                                        onChange(Number(value));\n                                    } else {\n                                        onChange(String(value));\n                                    }\n                                }}\n                            />\n                        </Bind.ValidationContainer>\n                    )}\n                </Bind>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"names":["t","i18n","plugin","field","get","getBind","useModelField","rules","useFieldEffectiveRules","disabled","Bind","options","defaultOption","opt","undefined","onChange","value","bind","RadioGroup","option","String","Number"],"mappings":";;;;;AAOA,MAAMA,IAAIC,KAAK,EAAE,CAAC;AAElB,MAAMC,sBAAsC;IACxC,MAAM;IACN,MAAM;IACN,UAAU;QACN,cAAc;QACd,MAAMF,CAAC,CAAC,aAAa,CAAC;QACtB,aAAaA,CAAC,CAAC,4DAA4D,CAAC;QAC5E,QAAO,EAAEG,KAAK,EAAE;YACZ,OAAO,CAACA,MAAM,IAAI,IAAI,CAAC,CAACC,IAAID,OAAO;QACvC;QACA,QAAO,EAAEE,OAAO,EAAE;YACd,MAAM,EAAEF,KAAK,EAAE,GAAGG;YAClB,MAAMC,QAAQC,uBAAuBL;YACrC,MAAMM,WAAW,CAACF,MAAM,OAAO,IAAIA,MAAM,QAAQ;YACjD,MAAMG,OAAOL;YAEb,MAAM,EAAE,QAAQM,UAAU,EAAE,EAAE,GAAGR,MAAM,gBAAgB,IAAI;gBACvD,SAAS,EAAE;YACf;YAEA,MAAMS,gBAAgBD,QAAQ,IAAI,CAACE,CAAAA,MAAOA,AAAiB,SAAjBA,IAAI,QAAQ;YAEtD,OAAO,WAAP,GACI,oBAACH,MAAAA;gBAAK,cAAcE,gBAAgBA,cAAc,KAAK,GAAGE;eACrD,CAAC,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGC,MAAM,iBAC1B,oBAACP,KAAK,mBAAmB,sBACrB,oBAACQ,YAAUA;oBACN,GAAGD,IAAI;oBACR,UAAUR;oBACV,OAAON,MAAM,KAAK;oBAClB,aAAaA,MAAM,WAAW;oBAC9B,MAAMA,MAAM,IAAI;oBAChB,MAAMA,MAAM,IAAI;oBAChB,OAAOQ,QAAQ,GAAG,CAACQ,CAAAA,SAAW;4BAC1B,OAAOA,OAAO,KAAK;4BACnB,OAAOC,OAAOD,OAAO,KAAK;4BAC1B,UAAUA,OAAO,QAAQ;wBAC7B;oBACA,OAAO,AAAiB,WAAVH,QAAwBI,OAAOJ,SAASF;oBACtD,UAAUE,CAAAA;wBACa,aAAfb,MAAM,IAAI,GACVY,SAASM,OAAOL,UAEhBD,SAASK,OAAOJ;oBAExB;;QAMxB;IACJ;AACJ;AAEA,qBAAed"}

package/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { BindComponentRenderProp, CmsModelFieldRendererProps } from "../../../../../../types.js";
+import type { CmsReferenceValue } from "../../../../../../admin/plugins/fieldRenderers/ref/components/types.js";
+interface AdvancedMultipleReferenceFieldProps extends CmsModelFieldRendererProps {
+    bind: BindComponentRenderProp<CmsReferenceValue[] | undefined | null>;
+}
+export declare const AdvancedMultipleReferenceField: (props: AdvancedMultipleReferenceFieldProps) => React.JSX.Element;
+export {};

package/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.js

@@ -0,0 +1,194 @@
+import react, { useCallback, useEffect, useMemo, useState } from "react";
+import { Options } from "./Options.js";
+import { useReferences } from "../hooks/useReferences.js";
+import { Entry } from "./Entry.js";
+import { ReferencesDialog } from "./ReferencesDialog.js";
+import { useModelField, useModelFieldGraphqlContext, useQuery } from "../../../../../hooks/index.js";
+import { useSnackbar } from "@webiny/app-admin";
+import { parseIdentifier } from "@webiny/utils";
+import { Entries } from "./Entries.js";
+import { NewReferencedEntryDialog } from "../../components/NewReferencedEntryDialog.js";
+import { FormComponentErrorMessage, FormComponentLabel } from "@webiny/admin-ui";
+import { CanEditField, useFieldEffectiveRules } from "@webiny/app-headless-cms-common";
+import * as __rspack_external__viewsGraphql_js_d6457cb3 from "../../../../../viewsGraphql.js";
+const AdvancedMultipleReferenceField = (props)=>{
+    const { bind } = props;
+    const { showSnackbar } = useSnackbar();
+    const { field } = useModelField();
+    const rules = useFieldEffectiveRules(field);
+    const requestContext = useModelFieldGraphqlContext();
+    const disabled = !rules.canEdit || rules.disabled;
+    const values = useMemo(()=>bind.value || [], [
+        bind.value
+    ]);
+    const [linkEntryDialogModel, setLinkEntryDialogModel] = useState(null);
+    const [newEntryDialogModel, setNewEntryDialogModel] = useState(null);
+    const [loadedModels, setLoadedModels] = useState([]);
+    const { data, loading: loadingModels } = useQuery(__rspack_external__viewsGraphql_js_d6457cb3.LIST_CONTENT_MODELS, {
+        context: requestContext
+    });
+    useEffect(()=>{
+        if (loadingModels || !data?.listContentModels?.data) return;
+        if (data.listContentModels.error) {
+            setLoadedModels([]);
+            showSnackbar(data.listContentModels.error.message);
+            return;
+        }
+        setLoadedModels((0, __rspack_external__viewsGraphql_js_d6457cb3.withoutBeingDeletedModels)(data.listContentModels.data));
+    }, [
+        data
+    ]);
+    const onNewRecord = useCallback((modelId)=>{
+        const model = loadedModels.find((model)=>model.modelId === modelId);
+        if (!model) return void console.log(`Cannot find model by modelId "${modelId}".`);
+        setNewEntryDialogModel(model);
+    }, [
+        loadedModels,
+        linkEntryDialogModel
+    ]);
+    const onNewEntryDialogClose = useCallback(()=>{
+        setNewEntryDialogModel(null);
+    }, [
+        linkEntryDialogModel
+    ]);
+    const onExistingRecord = useCallback((modelId)=>{
+        const model = loadedModels.find((model)=>model.modelId === modelId);
+        if (!model) return void console.log(`Cannot find model by modelId "${modelId}".`);
+        setLinkEntryDialogModel(model);
+    }, [
+        loadedModels,
+        linkEntryDialogModel
+    ]);
+    const onLinkEntryDialogClose = useCallback(()=>{
+        setLinkEntryDialogModel(null);
+    }, []);
+    const { entries, loadMore } = useReferences({
+        values,
+        perPage: 10,
+        requestContext
+    });
+    const onRemove = useCallback((id)=>{
+        if (!values || !Array.isArray(values)) return;
+        const { id: entryId } = parseIdentifier(id);
+        const newValues = values.filter((value)=>{
+            const { id: valueEntryId } = parseIdentifier(value.id);
+            return valueEntryId !== entryId;
+        });
+        bind.onChange(newValues.length > 0 ? newValues : null);
+    }, [
+        entries,
+        values
+    ]);
+    const models = useMemo(()=>{
+        if (!loadedModels || !field.settings?.models || !Array.isArray(field.settings.models)) return [];
+        return field.settings.models.reduce((collection, ref)=>{
+            const model = loadedModels.find((model)=>model.modelId === ref.modelId);
+            if (!model) return collection;
+            collection.push(model);
+            return collection;
+        }, []);
+    }, [
+        loadedModels,
+        entries
+    ]);
+    const storeValues = useCallback((values)=>{
+        bind.onChange(values?.length ? values : null);
+    }, [
+        values
+    ]);
+    const onNewEntryCreate = useCallback((data)=>{
+        if (!data) return void console.log("Could not store new entry to the reference field. Missing whole entry.");
+        if (!data.id) return void console.log('Could not store new entry to the reference field. Missing "id" value.');
+        if (!data.modelId) return void console.log('Could not store new entry to the reference field. Missing "modelId" value.');
+        storeValues(values.concat([
+            {
+                id: data.id,
+                modelId: data.modelId
+            }
+        ]));
+    }, [
+        storeValues
+    ]);
+    const onMoveUp = useCallback((index, toTop)=>{
+        if (!values?.length) return;
+        if (toTop) {
+            const arr = values.splice(index, 1);
+            bind.onChange(arr.concat(values));
+            return;
+        }
+        bind.moveValueUp(index);
+    }, [
+        values
+    ]);
+    const onMoveDown = useCallback((index, toBottom)=>{
+        if (!values?.length) return;
+        if (true === toBottom) {
+            const arr = values.splice(index, 1);
+            bind.onChange(values.concat(arr));
+            return;
+        }
+        bind.moveValueDown(index);
+    }, [
+        values
+    ]);
+    const { validation } = bind;
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(()=>false === validationIsValid, [
+        validationIsValid
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "@container"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-between"
+    }, /*#__PURE__*/ react.createElement(FormComponentLabel, {
+        text: field.label,
+        invalid: invalid,
+        disabled: disabled
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "webiny_ref-field-container"
+    }, /*#__PURE__*/ react.createElement(Entries, {
+        entries: entries,
+        loadMore: loadMore
+    }, (entry, index)=>{
+        const isFirst = 0 === index;
+        const isLast = index >= values.length - 1;
+        const model = loadedModels.find((model)=>model.modelId === entry.model.modelId);
+        if (!model) return null;
+        return /*#__PURE__*/ react.createElement(Entry, {
+            disabled: disabled,
+            model: model,
+            placement: "multiRef",
+            key: `reference-entry-${entry.id}`,
+            index: index,
+            entry: entry,
+            onRemove: onRemove,
+            onMoveUp: isFirst ? void 0 : onMoveUp,
+            onMoveDown: isLast ? void 0 : onMoveDown
+        });
+    })), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: validationMessage,
+        invalid: invalid,
+        disabled: disabled
+    }), values.length > 0 && /*#__PURE__*/ react.createElement("div", {
+        className: "mb-md"
+    }), /*#__PURE__*/ react.createElement(CanEditField, null, /*#__PURE__*/ react.createElement(Options, {
+        models: models,
+        onNewRecord: onNewRecord,
+        onLinkExistingRecord: onExistingRecord
+    })), newEntryDialogModel && /*#__PURE__*/ react.createElement(NewReferencedEntryDialog, {
+        model: newEntryDialogModel,
+        onClose: onNewEntryDialogClose,
+        onChange: onNewEntryCreate
+    }), linkEntryDialogModel && /*#__PURE__*/ react.createElement(ReferencesDialog, {
+        ...props,
+        field: field,
+        multiple: true,
+        values: values,
+        contentModel: linkEntryDialogModel,
+        storeValues: storeValues,
+        onDialogClose: onLinkEntryDialogClose
+    }));
+};
+export { AdvancedMultipleReferenceField };
+
+//# sourceMappingURL=AdvancedMultipleReferenceField.js.map

package/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.js","sources":["../../../../../../../src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { ListCmsModelsQueryResponse } from \"~/admin/viewsGraphql.js\";\nimport * as GQL from \"~/admin/viewsGraphql.js\";\nimport { withoutBeingDeletedModels } from \"~/admin/viewsGraphql.js\";\nimport type {\n    BindComponentRenderProp,\n    CmsContentEntry,\n    CmsModel,\n    CmsModelFieldRendererProps\n} from \"~/types.js\";\nimport { Options } from \"./Options.js\";\nimport { useReferences } from \"../hooks/useReferences.js\";\nimport { Entry } from \"./Entry.js\";\nimport { ReferencesDialog } from \"./ReferencesDialog.js\";\nimport { useModelField, useModelFieldGraphqlContext, useQuery } from \"~/admin/hooks/index.js\";\nimport { useSnackbar } from \"@webiny/app-admin\";\nimport type { CmsReferenceValue } from \"~/admin/plugins/fieldRenderers/ref/components/types.js\";\nimport { parseIdentifier } from \"@webiny/utils\";\nimport { Entries } from \"./Entries.js\";\nimport { NewReferencedEntryDialog } from \"~/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog.js\";\nimport { FormComponentErrorMessage, FormComponentLabel } from \"@webiny/admin-ui\";\nimport { CanEditField, useFieldEffectiveRules } from \"@webiny/app-headless-cms-common\";\n\ninterface AdvancedMultipleReferenceFieldProps extends CmsModelFieldRendererProps {\n    bind: BindComponentRenderProp<CmsReferenceValue[] | undefined | null>;\n}\n\nexport const AdvancedMultipleReferenceField = (props: AdvancedMultipleReferenceFieldProps) => {\n    const { bind } = props;\n    const { showSnackbar } = useSnackbar();\n    const { field } = useModelField();\n    const rules = useFieldEffectiveRules(field);\n    const requestContext = useModelFieldGraphqlContext();\n    const disabled = !rules.canEdit || rules.disabled;\n\n    const values = useMemo(() => {\n        return bind.value || [];\n    }, [bind.value]);\n\n    const [linkEntryDialogModel, setLinkEntryDialogModel] = useState<CmsModel | null>(null);\n    const [newEntryDialogModel, setNewEntryDialogModel] = useState<CmsModel | null>(null);\n\n    const [loadedModels, setLoadedModels] = useState<CmsModel[]>([]);\n\n    const { data, loading: loadingModels } = useQuery<ListCmsModelsQueryResponse>(\n        GQL.LIST_CONTENT_MODELS,\n        {\n            context: requestContext\n        }\n    );\n\n    useEffect(() => {\n        if (loadingModels || !data?.listContentModels?.data) {\n            return;\n        } else if (data.listContentModels.error) {\n            setLoadedModels([]);\n            showSnackbar(data.listContentModels.error.message);\n            return;\n        }\n        setLoadedModels(withoutBeingDeletedModels(data.listContentModels.data));\n    }, [data]);\n\n    const onNewRecord = useCallback(\n        (modelId: string) => {\n            const model = loadedModels.find(model => model.modelId === modelId);\n            if (!model) {\n                console.log(`Cannot find model by modelId \"${modelId}\".`);\n                return;\n            }\n            setNewEntryDialogModel(model);\n        },\n        [loadedModels, linkEntryDialogModel]\n    );\n\n    const onNewEntryDialogClose = useCallback(() => {\n        setNewEntryDialogModel(null);\n    }, [linkEntryDialogModel]);\n\n    const onExistingRecord = useCallback(\n        (modelId: string) => {\n            const model = loadedModels.find(model => model.modelId === modelId);\n            if (!model) {\n                console.log(`Cannot find model by modelId \"${modelId}\".`);\n                return;\n            }\n            setLinkEntryDialogModel(model);\n        },\n        [loadedModels, linkEntryDialogModel]\n    );\n\n    const onLinkEntryDialogClose = useCallback(() => {\n        setLinkEntryDialogModel(null);\n    }, []);\n\n    const { entries, loadMore } = useReferences({\n        values,\n        perPage: 10,\n        requestContext\n    });\n\n    const onRemove = useCallback(\n        (id: string) => {\n            if (!values || !Array.isArray(values)) {\n                return;\n            }\n            const { id: entryId } = parseIdentifier(id);\n            const newValues = values.filter(value => {\n                const { id: valueEntryId } = parseIdentifier(value.id);\n                return valueEntryId !== entryId;\n            });\n            bind.onChange(newValues.length > 0 ? newValues : null);\n        },\n        [entries, values]\n    );\n\n    const models = useMemo(() => {\n        if (!loadedModels || !field.settings?.models || !Array.isArray(field.settings.models)) {\n            return [];\n        }\n\n        return field.settings.models.reduce<CmsModel[]>((collection, ref) => {\n            const model = loadedModels.find(model => model.modelId === ref.modelId);\n            if (!model) {\n                return collection;\n            }\n            collection.push(model);\n\n            return collection;\n        }, []);\n    }, [loadedModels, entries]);\n\n    const storeValues = useCallback(\n        (values: CmsReferenceValue[]) => {\n            bind.onChange(values?.length ? values : null);\n            return;\n        },\n        [values]\n    );\n\n    const onNewEntryCreate = useCallback(\n        (data: Partial<CmsContentEntry> | null) => {\n            if (!data) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing whole entry.`\n                );\n                return;\n            } else if (!data.id) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing \"id\" value.`\n                );\n                return;\n            } else if (!data.modelId) {\n                console.log(\n                    `Could not store new entry to the reference field. Missing \"modelId\" value.`\n                );\n                return;\n            }\n            storeValues(\n                values.concat([\n                    {\n                        id: data.id,\n                        modelId: data.modelId\n                    }\n                ])\n            );\n        },\n        [storeValues]\n    );\n\n    const onMoveUp = useCallback(\n        (index: number, toTop?: boolean) => {\n            if (!values?.length) {\n                return;\n            } else if (toTop) {\n                const arr = values.splice(index, 1);\n                bind.onChange(arr.concat(values));\n                return;\n            }\n            bind.moveValueUp(index);\n        },\n        [values]\n    );\n    const onMoveDown = useCallback(\n        (index: number, toBottom?: boolean) => {\n            if (!values?.length) {\n                return;\n            } else if (toBottom === true) {\n                const arr = values.splice(index, 1);\n                bind.onChange(values.concat(arr));\n                return;\n            }\n            bind.moveValueDown(index);\n        },\n        [values]\n    );\n\n    const { validation } = bind;\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className={\"@container\"}>\n            <div className={\"flex items-center justify-between\"}>\n                <FormComponentLabel text={field.label} invalid={invalid} disabled={disabled} />\n            </div>\n            <div className={\"webiny_ref-field-container\"}>\n                <Entries entries={entries} loadMore={loadMore}>\n                    {(entry, index) => {\n                        const isFirst = index === 0;\n                        const isLast = index >= values.length - 1;\n                        const model = loadedModels.find(\n                            model => model.modelId === entry.model.modelId\n                        );\n                        if (!model) {\n                            return null;\n                        }\n                        return (\n                            <Entry\n                                disabled={disabled}\n                                model={model}\n                                placement=\"multiRef\"\n                                key={`reference-entry-${entry.id}`}\n                                index={index}\n                                entry={entry}\n                                onRemove={onRemove}\n                                onMoveUp={!isFirst ? onMoveUp : undefined}\n                                onMoveDown={!isLast ? onMoveDown : undefined}\n                            />\n                        );\n                    }}\n                </Entries>\n            </div>\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            {values.length > 0 && <div className=\"mb-md\" />}\n\n            <CanEditField>\n                <Options\n                    models={models}\n                    onNewRecord={onNewRecord}\n                    onLinkExistingRecord={onExistingRecord}\n                />\n            </CanEditField>\n\n            {newEntryDialogModel && (\n                <NewReferencedEntryDialog\n                    model={newEntryDialogModel}\n                    onClose={onNewEntryDialogClose}\n                    onChange={onNewEntryCreate}\n                />\n            )}\n\n            {linkEntryDialogModel && (\n                <ReferencesDialog\n                    {...props}\n                    field={field}\n                    multiple={true}\n                    values={values}\n                    contentModel={linkEntryDialogModel}\n                    storeValues={storeValues}\n                    onDialogClose={onLinkEntryDialogClose}\n                />\n            )}\n        </div>\n    );\n};\n"],"names":["AdvancedMultipleReferenceField","props","bind","showSnackbar","useSnackbar","field","useModelField","rules","useFieldEffectiveRules","requestContext","useModelFieldGraphqlContext","disabled","values","useMemo","linkEntryDialogModel","setLinkEntryDialogModel","useState","newEntryDialogModel","setNewEntryDialogModel","loadedModels","setLoadedModels","data","loadingModels","useQuery","GQL","useEffect","withoutBeingDeletedModels","onNewRecord","useCallback","modelId","model","console","onNewEntryDialogClose","onExistingRecord","onLinkEntryDialogClose","entries","loadMore","useReferences","onRemove","id","Array","entryId","parseIdentifier","newValues","value","valueEntryId","models","collection","ref","storeValues","onNewEntryCreate","onMoveUp","index","toTop","arr","onMoveDown","toBottom","validation","validationIsValid","validationMessage","invalid","FormComponentLabel","Entries","entry","isFirst","isLast","Entry","undefined","FormComponentErrorMessage","CanEditField","Options","NewReferencedEntryDialog","ReferencesDialog"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceSettings.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface MultiRefFieldSettings {
+    newItemPosition: "first" | "last";
+}
+export declare const AdvancedMultipleReferenceSettings: () => React.JSX.Element;

package/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceSettings.js

@@ -0,0 +1,25 @@
+import { Bind } from "@webiny/form";
+import react from "react";
+import { Grid, Select } from "@webiny/admin-ui";
+const AdvancedMultipleReferenceSettings = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Grid.Column, {
+        span: 12
+    }, /*#__PURE__*/ react.createElement(Bind, {
+        name: "renderer.settings.newItemPosition",
+        defaultValue: "last"
+    }, /*#__PURE__*/ react.createElement(Select, {
+        label: "New item position",
+        description: "Where should the new items be added?",
+        options: [
+            {
+                value: "first",
+                label: "Top of the list"
+            },
+            {
+                value: "last",
+                label: "Bottom of the list"
+            }
+        ]
+    }))));
+export { AdvancedMultipleReferenceSettings };
+
+//# sourceMappingURL=AdvancedMultipleReferenceSettings.js.map