@webiny/app-admin 6.4.5 → 6.6.0-alpha.0

package/base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.js

@@ -1,12 +1,19 @@
 import react from "react";
 import { observer } from "mobx-react-lite";
-import { Accordion, Tooltip } from "@webiny/admin-ui";
-import { ReactComponent } from "@webiny/icons/delete.svg";
+import { Accordion, Button, Tooltip, useToast } from "@webiny/admin-ui";
+import { useFeature } from "@webiny/app";
+import { ReactComponent } from "@webiny/icons/content_copy.svg";
+import { ReactComponent as content_paste_svg_ReactComponent } from "@webiny/icons/content_paste.svg";
+import { ReactComponent as delete_svg_ReactComponent } from "@webiny/icons/delete.svg";
 import { ReactComponent as horizontal_rule_svg_ReactComponent } from "@webiny/icons/horizontal_rule.svg";
+import { TEMPLATE_DISCRIMINATOR } from "../../../../features/formModel/ObjectField.js";
+import { ClipboardFeature } from "../../../../features/clipboard/feature.js";
 import { useConfirmationDialog } from "../../../../hooks/useConfirmationDialog.js";
 import { NestedLayout } from "./ObjectFieldComponents.js";
 import { AddTemplateButton } from "./TemplatePicker.js";
 const SingleValueDynamicZone = observer(({ field, showContainer = true })=>{
+    const toast = useToast();
+    const { clipboard } = useFeature(ClipboardFeature);
     const activeTemplate = null !== field.activeTemplateId ? field.availableTemplates.find((t)=>t.id === field.activeTemplateId) : void 0;
     const { showConfirmation } = useConfirmationDialog({
         title: "Remove template",
@@ -19,24 +26,56 @@ const SingleValueDynamicZone = observer(({ field, showContainer = true })=>{
             field.onChange(null);
         });
     };
+    const clipboardItem = clipboard.item;
+    const canPaste = null !== clipboardItem && "wby.dz" === clipboardItem.type && "string" == typeof clipboardItem.data[TEMPLATE_DISCRIMINATOR] && field.availableTemplates.some((t)=>t.id === clipboardItem.data[TEMPLATE_DISCRIMINATOR]);
     const content = /*#__PURE__*/ react.createElement(react.Fragment, null, activeTemplate ? /*#__PURE__*/ react.createElement(Accordion, {
         background: "base",
         variant: "container"
     }, /*#__PURE__*/ react.createElement(Accordion.Item, {
         title: activeTemplate.label,
-        actions: field.disabled ? null : /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+        actions: field.disabled ? null : /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
             icon: /*#__PURE__*/ react.createElement(Tooltip, {
                 trigger: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                content: "Copy to clipboard"
+            }),
+            onClick: ()=>{
+                clipboard.copy({
+                    type: "wby.dz",
+                    data: field.getClonedData()
+                });
+                toast.showSuccessToast({
+                    title: "Copied to clipboard."
+                });
+            }
+        }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+            icon: /*#__PURE__*/ react.createElement(Tooltip, {
+                trigger: /*#__PURE__*/ react.createElement(delete_svg_ReactComponent, null),
                 content: "Delete"
             }),
             onClick: onClear
-        })
+        }))
     }, /*#__PURE__*/ react.createElement(NestedLayout, {
         layout: field.layout
-    }))) : null, !activeTemplate && !field.disabled && /*#__PURE__*/ react.createElement(AddTemplateButton, {
+    }))) : null, !activeTemplate && !field.disabled && /*#__PURE__*/ react.createElement("div", {
+        className: "flex gap-sm items-center"
+    }, /*#__PURE__*/ react.createElement(AddTemplateButton, {
         templates: field.availableTemplates,
         onSelect: (template)=>field.setTemplate(template.id)
-    }));
+    }), canPaste && /*#__PURE__*/ react.createElement(Button, {
+        size: "sm",
+        variant: "tertiary",
+        text: "Paste",
+        icon: /*#__PURE__*/ react.createElement(content_paste_svg_ReactComponent, null),
+        onClick: ()=>{
+            const pasted = clipboard.paste();
+            if (pasted) {
+                field.onChange(pasted.data);
+                toast.showSuccessToast({
+                    title: "Pasted from clipboard."
+                });
+            }
+        }
+    })));
     if (!showContainer) return /*#__PURE__*/ react.createElement("div", {
         className: "flex flex-col gap-lg"
     }, content);

package/base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as HorizontalRuleIcon } from \"@webiny/icons/horizontal_rule.svg\";\nimport type { IObjectFieldVM } from \"~/features/formModel/index.js\";\nimport { useConfirmationDialog } from \"~/hooks/useConfirmationDialog.js\";\nimport { NestedLayout } from \"./ObjectFieldComponents.js\";\nimport { AddTemplateButton } from \"./TemplatePicker.js\";\n\ninterface SingleValueDynamicZoneProps {\n    field: IObjectFieldVM;\n    showContainer?: boolean;\n}\n\nexport const SingleValueDynamicZone = observer(\n    ({ field, showContainer = true }: SingleValueDynamicZoneProps) => {\n        const activeTemplate =\n            field.activeTemplateId !== null\n                ? field.availableTemplates.find(t => t.id === field.activeTemplateId)\n                : undefined;\n\n        const { showConfirmation } = useConfirmationDialog({\n            title: \"Remove template\",\n            message: \"Are you sure you want to remove this item? This action is not reversible.\",\n            acceptLabel: \"Yes, I'm sure!\",\n            cancelLabel: \"No, leave it.\"\n        });\n\n        const onClear = () => {\n            showConfirmation(() => {\n                field.onChange(null);\n            });\n        };\n\n        const content = (\n            <>\n                {activeTemplate ? (\n                    <Accordion background={\"base\"} variant={\"container\"}>\n                        <Accordion.Item\n                            title={activeTemplate.label}\n                            actions={\n                                field.disabled ? null : (\n                                    <Accordion.Item.Action\n                                        icon={\n                                            <Tooltip trigger={<DeleteIcon />} content={\"Delete\"} />\n                                        }\n                                        onClick={onClear}\n                                    />\n                                )\n                            }\n                        >\n                            <NestedLayout layout={field.layout} />\n                        </Accordion.Item>\n                    </Accordion>\n                ) : null}\n                {!activeTemplate && !field.disabled && (\n                    <AddTemplateButton\n                        templates={field.availableTemplates}\n                        onSelect={template => field.setTemplate(template.id)}\n                    />\n                )}\n            </>\n        );\n\n        if (!showContainer) {\n            return <div className={\"flex flex-col gap-lg\"}>{content}</div>;\n        }\n\n        return (\n            <Accordion background={\"base\"} variant={\"container\"}>\n                <Accordion.Item\n                    icon={\n                        <Accordion.Item.Icon\n                            color={\"accent\"}\n                            label={\"Dynamic Zone\"}\n                            icon={<HorizontalRuleIcon />}\n                        />\n                    }\n                    title={field.label}\n                    defaultOpen={true}\n                >\n                    {content}\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n"],"names":["SingleValueDynamicZone","observer","field","showContainer","activeTemplate","t","undefined","showConfirmation","useConfirmationDialog","onClear","content","Accordion","Tooltip","DeleteIcon","NestedLayout","AddTemplateButton","template","HorizontalRuleIcon"],"mappings":";;;;;;;;AAeO,MAAMA,yBAAyBC,SAClC,CAAC,EAAEC,KAAK,EAAEC,gBAAgB,IAAI,EAA+B;IACzD,MAAMC,iBACFF,AAA2B,SAA3BA,MAAM,gBAAgB,GAChBA,MAAM,kBAAkB,CAAC,IAAI,CAACG,CAAAA,IAAKA,EAAE,EAAE,KAAKH,MAAM,gBAAgB,IAClEI;IAEV,MAAM,EAAEC,gBAAgB,EAAE,GAAGC,sBAAsB;QAC/C,OAAO;QACP,SAAS;QACT,aAAa;QACb,aAAa;IACjB;IAEA,MAAMC,UAAU;QACZF,iBAAiB;YACbL,MAAM,QAAQ,CAAC;QACnB;IACJ;IAEA,MAAMQ,UAAU,WAAVA,GACF,0CACKN,iBAAiB,WAAjBA,GACG,oBAACO,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,OAAOP,eAAe,KAAK;QAC3B,SACIF,MAAM,QAAQ,GAAG,OAAO,WAAP,GACb,oBAACS,UAAU,IAAI,CAAC,MAAM;YAClB,oBACI,oBAACC,SAAOA;gBAAC,uBAAS,oBAACC,gBAAUA;gBAAK,SAAS;;YAE/C,SAASJ;;qBAKrB,oBAACK,cAAYA;QAAC,QAAQZ,MAAM,MAAM;WAG1C,MACH,CAACE,kBAAkB,CAACF,MAAM,QAAQ,IAAI,WAAJ,GAC/B,oBAACa,mBAAiBA;QACd,WAAWb,MAAM,kBAAkB;QACnC,UAAUc,CAAAA,WAAYd,MAAM,WAAW,CAACc,SAAS,EAAE;;IAMnE,IAAI,CAACb,eACD,OAAO,WAAP,GAAO,oBAAC;QAAI,WAAW;OAAyBO;IAGpD,OAAO,WAAP,GACI,oBAACC,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,oBACI,oBAACA,UAAU,IAAI,CAAC,IAAI;YAChB,OAAO;YACP,OAAO;YACP,oBAAM,oBAACM,oCAAkBA;;QAGjC,OAAOf,MAAM,KAAK;QAClB,aAAa;OAEZQ;AAIjB"}
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Button, Tooltip, useToast } from \"@webiny/admin-ui\";\nimport { useFeature } from \"@webiny/app\";\nimport { ReactComponent as CopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { ReactComponent as PasteIcon } from \"@webiny/icons/content_paste.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as HorizontalRuleIcon } from \"@webiny/icons/horizontal_rule.svg\";\nimport type { IObjectFieldVM } from \"~/features/formModel/index.js\";\nimport { TEMPLATE_DISCRIMINATOR } from \"~/features/formModel/ObjectField.js\";\nimport { ClipboardFeature } from \"~/features/clipboard/feature.js\";\nimport { useConfirmationDialog } from \"~/hooks/useConfirmationDialog.js\";\nimport { NestedLayout } from \"./ObjectFieldComponents.js\";\nimport { AddTemplateButton } from \"./TemplatePicker.js\";\n\ninterface SingleValueDynamicZoneProps {\n    field: IObjectFieldVM;\n    showContainer?: boolean;\n}\n\nexport const SingleValueDynamicZone = observer(\n    ({ field, showContainer = true }: SingleValueDynamicZoneProps) => {\n        const toast = useToast();\n        const { clipboard } = useFeature(ClipboardFeature);\n        const activeTemplate =\n            field.activeTemplateId !== null\n                ? field.availableTemplates.find(t => t.id === field.activeTemplateId)\n                : undefined;\n\n        const { showConfirmation } = useConfirmationDialog({\n            title: \"Remove template\",\n            message: \"Are you sure you want to remove this item? This action is not reversible.\",\n            acceptLabel: \"Yes, I'm sure!\",\n            cancelLabel: \"No, leave it.\"\n        });\n\n        const onClear = () => {\n            showConfirmation(() => {\n                field.onChange(null);\n            });\n        };\n\n        const clipboardItem = clipboard.item;\n        const canPaste =\n            clipboardItem !== null &&\n            clipboardItem.type === \"wby.dz\" &&\n            typeof clipboardItem.data[TEMPLATE_DISCRIMINATOR] === \"string\" &&\n            field.availableTemplates.some(t => t.id === clipboardItem.data[TEMPLATE_DISCRIMINATOR]);\n\n        const content = (\n            <>\n                {activeTemplate ? (\n                    <Accordion background={\"base\"} variant={\"container\"}>\n                        <Accordion.Item\n                            title={activeTemplate.label}\n                            actions={\n                                field.disabled ? null : (\n                                    <>\n                                        <Accordion.Item.Action\n                                            icon={\n                                                <Tooltip\n                                                    trigger={<CopyIcon />}\n                                                    content={\"Copy to clipboard\"}\n                                                />\n                                            }\n                                            onClick={() => {\n                                                clipboard.copy({\n                                                    type: \"wby.dz\",\n                                                    data: field.getClonedData()\n                                                });\n                                                toast.showSuccessToast({\n                                                    title: \"Copied to clipboard.\"\n                                                });\n                                            }}\n                                        />\n                                        <Accordion.Item.Action\n                                            icon={\n                                                <Tooltip\n                                                    trigger={<DeleteIcon />}\n                                                    content={\"Delete\"}\n                                                />\n                                            }\n                                            onClick={onClear}\n                                        />\n                                    </>\n                                )\n                            }\n                        >\n                            <NestedLayout layout={field.layout} />\n                        </Accordion.Item>\n                    </Accordion>\n                ) : null}\n                {!activeTemplate && !field.disabled && (\n                    <div className={\"flex gap-sm items-center\"}>\n                        <AddTemplateButton\n                            templates={field.availableTemplates}\n                            onSelect={template => field.setTemplate(template.id)}\n                        />\n                        {canPaste && (\n                            <Button\n                                size={\"sm\"}\n                                variant={\"tertiary\"}\n                                text={\"Paste\"}\n                                icon={<PasteIcon />}\n                                onClick={() => {\n                                    const pasted = clipboard.paste();\n                                    if (pasted) {\n                                        field.onChange(pasted.data);\n                                        toast.showSuccessToast({\n                                            title: \"Pasted from clipboard.\"\n                                        });\n                                    }\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </>\n        );\n\n        if (!showContainer) {\n            return <div className={\"flex flex-col gap-lg\"}>{content}</div>;\n        }\n\n        return (\n            <Accordion background={\"base\"} variant={\"container\"}>\n                <Accordion.Item\n                    icon={\n                        <Accordion.Item.Icon\n                            color={\"accent\"}\n                            label={\"Dynamic Zone\"}\n                            icon={<HorizontalRuleIcon />}\n                        />\n                    }\n                    title={field.label}\n                    defaultOpen={true}\n                >\n                    {content}\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n"],"names":["SingleValueDynamicZone","observer","field","showContainer","toast","useToast","clipboard","useFeature","ClipboardFeature","activeTemplate","t","undefined","showConfirmation","useConfirmationDialog","onClear","clipboardItem","canPaste","TEMPLATE_DISCRIMINATOR","content","Accordion","Tooltip","CopyIcon","DeleteIcon","NestedLayout","AddTemplateButton","template","Button","PasteIcon","pasted","HorizontalRuleIcon"],"mappings":";;;;;;;;;;;;;AAoBO,MAAMA,yBAAyBC,SAClC,CAAC,EAAEC,KAAK,EAAEC,gBAAgB,IAAI,EAA+B;IACzD,MAAMC,QAAQC;IACd,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAMC,iBACFP,AAA2B,SAA3BA,MAAM,gBAAgB,GAChBA,MAAM,kBAAkB,CAAC,IAAI,CAACQ,CAAAA,IAAKA,EAAE,EAAE,KAAKR,MAAM,gBAAgB,IAClES;IAEV,MAAM,EAAEC,gBAAgB,EAAE,GAAGC,sBAAsB;QAC/C,OAAO;QACP,SAAS;QACT,aAAa;QACb,aAAa;IACjB;IAEA,MAAMC,UAAU;QACZF,iBAAiB;YACbV,MAAM,QAAQ,CAAC;QACnB;IACJ;IAEA,MAAMa,gBAAgBT,UAAU,IAAI;IACpC,MAAMU,WACFD,AAAkB,SAAlBA,iBACAA,AAAuB,aAAvBA,cAAc,IAAI,IAClB,AAAsD,YAAtD,OAAOA,cAAc,IAAI,CAACE,uBAAuB,IACjDf,MAAM,kBAAkB,CAAC,IAAI,CAACQ,CAAAA,IAAKA,EAAE,EAAE,KAAKK,cAAc,IAAI,CAACE,uBAAuB;IAE1F,MAAMC,UAAU,WAAVA,GACF,0CACKT,iBAAiB,WAAjBA,GACG,oBAACU,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,OAAOV,eAAe,KAAK;QAC3B,SACIP,MAAM,QAAQ,GAAG,OAAO,WAAP,GACb,wDACI,oBAACiB,UAAU,IAAI,CAAC,MAAM;YAClB,oBACI,oBAACC,SAAOA;gBACJ,uBAAS,oBAACC,gBAAQA;gBAClB,SAAS;;YAGjB,SAAS;gBACLf,UAAU,IAAI,CAAC;oBACX,MAAM;oBACN,MAAMJ,MAAM,aAAa;gBAC7B;gBACAE,MAAM,gBAAgB,CAAC;oBACnB,OAAO;gBACX;YACJ;0BAEJ,oBAACe,UAAU,IAAI,CAAC,MAAM;YAClB,oBACI,oBAACC,SAAOA;gBACJ,uBAAS,oBAACE,2BAAUA;gBACpB,SAAS;;YAGjB,SAASR;;qBAMzB,oBAACS,cAAYA;QAAC,QAAQrB,MAAM,MAAM;WAG1C,MACH,CAACO,kBAAkB,CAACP,MAAM,QAAQ,IAAI,WAAJ,GAC/B,oBAAC;QAAI,WAAW;qBACZ,oBAACsB,mBAAiBA;QACd,WAAWtB,MAAM,kBAAkB;QACnC,UAAUuB,CAAAA,WAAYvB,MAAM,WAAW,CAACuB,SAAS,EAAE;QAEtDT,YAAY,WAAZA,GACG,oBAACU,QAAMA;QACH,MAAM;QACN,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,kCAASA;QAChB,SAAS;YACL,MAAMC,SAAStB,UAAU,KAAK;YAC9B,IAAIsB,QAAQ;gBACR1B,MAAM,QAAQ,CAAC0B,OAAO,IAAI;gBAC1BxB,MAAM,gBAAgB,CAAC;oBACnB,OAAO;gBACX;YACJ;QACJ;;IAQxB,IAAI,CAACD,eACD,OAAO,WAAP,GAAO,oBAAC;QAAI,WAAW;OAAyBe;IAGpD,OAAO,WAAP,GACI,oBAACC,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,oBACI,oBAACA,UAAU,IAAI,CAAC,IAAI;YAChB,OAAO;YACP,OAAO;YACP,oBAAM,oBAACU,oCAAkBA;;QAGjC,OAAO3B,MAAM,KAAK;QAClB,aAAa;OAEZgB;AAIjB"}

package/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.d.ts

@@ -1,4 +1,5 @@
 import type { IObjectFieldItemVM } from "../../../../features/formModel/index.js";
-type ItemTitleSetting = string | ((data: Record<string, unknown>, index: number) => string);
-export declare function resolveItemTitle(item: IObjectFieldItemVM, index: number, label: string | undefined, itemTitle: ItemTitleSetting | undefined): string;
+type ItemStringSetting = string | ((data: Record<string, unknown>, index: number) => string);
+export declare function resolveItemTitle(item: IObjectFieldItemVM, index: number, label: string | undefined, itemTitle: ItemStringSetting | undefined): string;
+export declare function resolveItemDescription(item: IObjectFieldItemVM, index: number, itemDescription: ItemStringSetting | undefined): string | undefined;
 export {};

package/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.js

@@ -14,6 +14,15 @@ function resolveItemTitle(item, index, label, itemTitle) {
     const data = fieldsToData(item.fields);
     return itemTitle(data, index) || fallback;
 }
-export { resolveItemTitle };
+function resolveItemDescription(item, index, itemDescription) {
+    if (!itemDescription) return;
+    if ("string" == typeof itemDescription) {
+        const field = item.fields.find((f)=>f.name === itemDescription);
+        return field ? String(field.value ?? "") || void 0 : void 0;
+    }
+    const data = fieldsToData(item.fields);
+    return itemDescription(data, index) || void 0;
+}
+export { resolveItemDescription, resolveItemTitle };
 
 //# sourceMappingURL=resolveItemTitle.js.map

package/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.ts"],"sourcesContent":["import type { IFieldVM, IObjectFieldItemVM } from \"~/features/formModel/index.js\";\n\ntype ItemTitleSetting = string | ((data: Record<string, unknown>, index: number) => string);\n\nfunction fieldsToData(fields: IFieldVM[]): Record<string, unknown> {\n    const data: Record<string, unknown> = {};\n    for (const field of fields) {\n        data[field.name] = field.value;\n    }\n    return data;\n}\n\nexport function resolveItemTitle(\n    item: IObjectFieldItemVM,\n    index: number,\n    label: string | undefined,\n    itemTitle: ItemTitleSetting | undefined\n): string {\n    const fallback = `${label || \"Item\"} #${index + 1}`;\n\n    if (!itemTitle) {\n        return fallback;\n    }\n\n    if (typeof itemTitle === \"string\") {\n        const field = item.fields.find(f => f.name === itemTitle);\n        const value = field ? String(field.value ?? \"\") : \"\";\n        return value || fallback;\n    }\n\n    const data = fieldsToData(item.fields);\n    return itemTitle(data, index) || fallback;\n}\n"],"names":["fieldsToData","fields","data","field","resolveItemTitle","item","index","label","itemTitle","fallback","f","value","String"],"mappings":"AAIA,SAASA,aAAaC,MAAkB;IACpC,MAAMC,OAAgC,CAAC;IACvC,KAAK,MAAMC,SAASF,OAChBC,IAAI,CAACC,MAAM,IAAI,CAAC,GAAGA,MAAM,KAAK;IAElC,OAAOD;AACX;AAEO,SAASE,iBACZC,IAAwB,EACxBC,KAAa,EACbC,KAAyB,EACzBC,SAAuC;IAEvC,MAAMC,WAAW,GAAGF,SAAS,OAAO,EAAE,EAAED,QAAQ,GAAG;IAEnD,IAAI,CAACE,WACD,OAAOC;IAGX,IAAI,AAAqB,YAArB,OAAOD,WAAwB;QAC/B,MAAML,QAAQE,KAAK,MAAM,CAAC,IAAI,CAACK,CAAAA,IAAKA,EAAE,IAAI,KAAKF;QAC/C,MAAMG,QAAQR,QAAQS,OAAOT,MAAM,KAAK,IAAI,MAAM;QAClD,OAAOQ,SAASF;IACpB;IAEA,MAAMP,OAAOF,aAAaK,KAAK,MAAM;IACrC,OAAOG,UAAUN,MAAMI,UAAUG;AACrC"}
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.ts"],"sourcesContent":["import type { IFieldVM, IObjectFieldItemVM } from \"~/features/formModel/index.js\";\n\ntype ItemStringSetting = string | ((data: Record<string, unknown>, index: number) => string);\n\nfunction fieldsToData(fields: IFieldVM[]): Record<string, unknown> {\n    const data: Record<string, unknown> = {};\n    for (const field of fields) {\n        data[field.name] = field.value;\n    }\n    return data;\n}\n\nexport function resolveItemTitle(\n    item: IObjectFieldItemVM,\n    index: number,\n    label: string | undefined,\n    itemTitle: ItemStringSetting | undefined\n): string {\n    const fallback = `${label || \"Item\"} #${index + 1}`;\n\n    if (!itemTitle) {\n        return fallback;\n    }\n\n    if (typeof itemTitle === \"string\") {\n        const field = item.fields.find(f => f.name === itemTitle);\n        const value = field ? String(field.value ?? \"\") : \"\";\n        return value || fallback;\n    }\n\n    const data = fieldsToData(item.fields);\n    return itemTitle(data, index) || fallback;\n}\n\nexport function resolveItemDescription(\n    item: IObjectFieldItemVM,\n    index: number,\n    itemDescription: ItemStringSetting | undefined\n): string | undefined {\n    if (!itemDescription) {\n        return undefined;\n    }\n\n    if (typeof itemDescription === \"string\") {\n        const field = item.fields.find(f => f.name === itemDescription);\n        return field ? String(field.value ?? \"\") || undefined : undefined;\n    }\n\n    const data = fieldsToData(item.fields);\n    return itemDescription(data, index) || undefined;\n}\n"],"names":["fieldsToData","fields","data","field","resolveItemTitle","item","index","label","itemTitle","fallback","f","value","String","resolveItemDescription","itemDescription","undefined"],"mappings":"AAIA,SAASA,aAAaC,MAAkB;IACpC,MAAMC,OAAgC,CAAC;IACvC,KAAK,MAAMC,SAASF,OAChBC,IAAI,CAACC,MAAM,IAAI,CAAC,GAAGA,MAAM,KAAK;IAElC,OAAOD;AACX;AAEO,SAASE,iBACZC,IAAwB,EACxBC,KAAa,EACbC,KAAyB,EACzBC,SAAwC;IAExC,MAAMC,WAAW,GAAGF,SAAS,OAAO,EAAE,EAAED,QAAQ,GAAG;IAEnD,IAAI,CAACE,WACD,OAAOC;IAGX,IAAI,AAAqB,YAArB,OAAOD,WAAwB;QAC/B,MAAML,QAAQE,KAAK,MAAM,CAAC,IAAI,CAACK,CAAAA,IAAKA,EAAE,IAAI,KAAKF;QAC/C,MAAMG,QAAQR,QAAQS,OAAOT,MAAM,KAAK,IAAI,MAAM;QAClD,OAAOQ,SAASF;IACpB;IAEA,MAAMP,OAAOF,aAAaK,KAAK,MAAM;IACrC,OAAOG,UAAUN,MAAMI,UAAUG;AACrC;AAEO,SAASI,uBACZR,IAAwB,EACxBC,KAAa,EACbQ,eAA8C;IAE9C,IAAI,CAACA,iBACD;IAGJ,IAAI,AAA2B,YAA3B,OAAOA,iBAA8B;QACrC,MAAMX,QAAQE,KAAK,MAAM,CAAC,IAAI,CAACK,CAAAA,IAAKA,EAAE,IAAI,KAAKI;QAC/C,OAAOX,QAAQS,OAAOT,MAAM,KAAK,IAAI,OAAOY,SAAYA;IAC5D;IAEA,MAAMb,OAAOF,aAAaK,KAAK,MAAM;IACrC,OAAOS,gBAAgBZ,MAAMI,UAAUS;AAC3C"}

package/base/Base/FieldRenderers/PasswordInputRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        passwordInput: {
+            fieldType: "password";
+            settings: undefined;
+        };
+    }
+}
+export declare const PasswordInputRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/PasswordInputRenderer.js

@@ -0,0 +1,22 @@
+import react from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { DelayedOnChange, Input } from "@webiny/admin-ui";
+const PasswordInputRenderer = createFieldRenderer(({ field })=>/*#__PURE__*/ react.createElement(DelayedOnChange, {
+        value: field.value,
+        onChange: (value)=>field.onChange(value)
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: field.label,
+        hint: field.help,
+        placeholder: field.placeholder,
+        type: "password",
+        autoComplete: "new-password",
+        description: field.description,
+        note: field.note,
+        required: field.required,
+        disabled: field.disabled,
+        validation: field.validation,
+        onBlur: ()=>field.onBlur()
+    })));
+export { PasswordInputRenderer };
+
+//# sourceMappingURL=PasswordInputRenderer.js.map

package/base/Base/FieldRenderers/PasswordInputRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/PasswordInputRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/PasswordInputRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Input } from \"@webiny/admin-ui\";\nimport { DelayedOnChange } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        passwordInput: { fieldType: \"password\"; settings: undefined };\n    }\n}\n\nexport const PasswordInputRenderer = createFieldRenderer(({ field }) => {\n    return (\n        <DelayedOnChange value={field.value} onChange={value => field.onChange(value)}>\n            <Input\n                label={field.label}\n                hint={field.help}\n                placeholder={field.placeholder}\n                type=\"password\"\n                autoComplete=\"new-password\"\n                description={field.description}\n                note={field.note}\n                required={field.required}\n                disabled={field.disabled}\n                validation={field.validation}\n                onBlur={() => field.onBlur()}\n            />\n        </DelayedOnChange>\n    );\n});\n"],"names":["PasswordInputRenderer","createFieldRenderer","field","DelayedOnChange","value","Input"],"mappings":";;;AAWO,MAAMA,wBAAwBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE,GACxD,WAAP,GACI,oBAACC,iBAAeA;QAAC,OAAOD,MAAM,KAAK;QAAE,UAAUE,CAAAA,QAASF,MAAM,QAAQ,CAACE;qBACnE,oBAACC,OAAKA;QACF,OAAOH,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,aAAaA,MAAM,WAAW;QAC9B,MAAK;QACL,cAAa;QACb,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,QAAQ,IAAMA,MAAM,MAAM"}

package/base/Base/FieldRenderers/PermissionsRenderer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        permissions: {
+            fieldType: "permissions";
+            settings: {
+                id?: string;
+            };
+        };
+    }
+}
+export declare const PermissionsRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/PermissionsRenderer.js

@@ -0,0 +1,18 @@
+import react from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { Permissions } from "../../../components/Permissions/Permissions.js";
+const PermissionsRenderer = createFieldRenderer(({ field })=>{
+    const id = field.rendererSettings?.id || "new";
+    return /*#__PURE__*/ react.createElement(Permissions, {
+        id: id,
+        value: field.value,
+        onChange: (value)=>field.onChange(value),
+        validate: ()=>Promise.resolve(true),
+        validation: {
+            isValid: null
+        }
+    });
+});
+export { PermissionsRenderer };
+
+//# sourceMappingURL=PermissionsRenderer.js.map

package/base/Base/FieldRenderers/PermissionsRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/PermissionsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/PermissionsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Permissions } from \"~/components/Permissions/Permissions.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        permissions: { fieldType: \"permissions\"; settings: { id?: string } };\n    }\n}\n\nexport const PermissionsRenderer = createFieldRenderer(({ field }) => {\n    const id = (field.rendererSettings?.id as string) || \"new\";\n\n    return (\n        <Permissions\n            id={id}\n            value={field.value as any[]}\n            onChange={value => field.onChange(value)}\n            validate={() => Promise.resolve(true)}\n            validation={{ isValid: null }}\n        />\n    );\n});\n"],"names":["PermissionsRenderer","createFieldRenderer","field","id","Permissions","value","Promise"],"mappings":";;;AAUO,MAAMA,sBAAsBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IAC7D,MAAMC,KAAMD,MAAM,gBAAgB,EAAE,MAAiB;IAErD,OAAO,WAAP,GACI,oBAACE,aAAWA;QACR,IAAID;QACJ,OAAOD,MAAM,KAAK;QAClB,UAAUG,CAAAA,QAASH,MAAM,QAAQ,CAACG;QAClC,UAAU,IAAMC,QAAQ,OAAO,CAAC;QAChC,YAAY;YAAE,SAAS;QAAK;;AAGxC"}

package/base/Base/FieldRenderers/RadioButtonsRenderer.js

@@ -5,6 +5,7 @@ const RadioButtonsRenderer = createFieldRenderer(({ field })=>{
     const options = field.options ?? [];
     return /*#__PURE__*/ react.createElement(RadioGroup, {
         label: field.label,
+        hint: field.help,
         description: field.description,
         note: field.note,
         required: field.required,

package/base/Base/FieldRenderers/RadioButtonsRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/RadioButtonsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/RadioButtonsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { RadioGroup } from \"@webiny/admin-ui\";\nimport type { IValueOption } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        radioButtons: { fieldType: \"text\" | \"number\"; options: true; settings: undefined };\n    }\n}\n\nexport const RadioButtonsRenderer = createFieldRenderer(({ field }) => {\n    const options: IValueOption[] = field.options ?? [];\n\n    return (\n        <RadioGroup\n            label={field.label}\n            description={field.description}\n            note={field.note}\n            required={field.required}\n            disabled={field.disabled}\n            validation={field.validation}\n            items={options.map(opt => ({\n                label: opt.label,\n                value: String(opt.value)\n            }))}\n            value={field.value !== undefined ? String(field.value) : undefined}\n            onChange={value => {\n                field.onChange(value);\n                field.onBlur();\n            }}\n        />\n    );\n});\n"],"names":["RadioButtonsRenderer","createFieldRenderer","field","options","RadioGroup","opt","String","undefined","value"],"mappings":";;;AAWO,MAAMA,uBAAuBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IAC9D,MAAMC,UAA0BD,MAAM,OAAO,IAAI,EAAE;IAEnD,OAAO,WAAP,GACI,oBAACE,YAAUA;QACP,OAAOF,MAAM,KAAK;QAClB,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,OAAOC,QAAQ,GAAG,CAACE,CAAAA,MAAQ;gBACvB,OAAOA,IAAI,KAAK;gBAChB,OAAOC,OAAOD,IAAI,KAAK;YAC3B;QACA,OAAOH,AAAgBK,WAAhBL,MAAM,KAAK,GAAiBI,OAAOJ,MAAM,KAAK,IAAIK;QACzD,UAAUC,CAAAA;YACNN,MAAM,QAAQ,CAACM;YACfN,MAAM,MAAM;QAChB;;AAGZ"}
+{"version":3,"file":"base/Base/FieldRenderers/RadioButtonsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/RadioButtonsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { RadioGroup } from \"@webiny/admin-ui\";\nimport type { IValueOption } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        radioButtons: { fieldType: \"text\" | \"number\"; options: true; settings: undefined };\n    }\n}\n\nexport const RadioButtonsRenderer = createFieldRenderer(({ field }) => {\n    const options: IValueOption[] = field.options ?? [];\n\n    return (\n        <RadioGroup\n            label={field.label}\n            hint={field.help}\n            description={field.description}\n            note={field.note}\n            required={field.required}\n            disabled={field.disabled}\n            validation={field.validation}\n            items={options.map(opt => ({\n                label: opt.label,\n                value: String(opt.value)\n            }))}\n            value={field.value !== undefined ? String(field.value) : undefined}\n            onChange={value => {\n                field.onChange(value);\n                field.onBlur();\n            }}\n        />\n    );\n});\n"],"names":["RadioButtonsRenderer","createFieldRenderer","field","options","RadioGroup","opt","String","undefined","value"],"mappings":";;;AAWO,MAAMA,uBAAuBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IAC9D,MAAMC,UAA0BD,MAAM,OAAO,IAAI,EAAE;IAEnD,OAAO,WAAP,GACI,oBAACE,YAAUA;QACP,OAAOF,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,OAAOC,QAAQ,GAAG,CAACE,CAAAA,MAAQ;gBACvB,OAAOA,IAAI,KAAK;gBAChB,OAAOC,OAAOD,IAAI,KAAK;YAC3B;QACA,OAAOH,AAAgBK,WAAhBL,MAAM,KAAK,GAAiBI,OAAOJ,MAAM,KAAK,IAAIK;QACzD,UAAUC,CAAAA;YACNN,MAAM,QAAQ,CAACM;YACfN,MAAM,MAAM;QAChB;;AAGZ"}

package/base/Base/FieldRenderers/RolesMultiSelectRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        rolesMultiSelect: {
+            fieldType: "rolesMultiSelect";
+            settings: undefined;
+        };
+    }
+}
+export declare const RolesMultiSelectRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/RolesMultiSelectRenderer.js

@@ -0,0 +1,21 @@
+import react, { useMemo } from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { RolesMultiAutocomplete } from "../../../components/RolesMultiAutocomplete/index.js";
+const RolesMultiSelectRenderer = createFieldRenderer(({ field })=>{
+    const rawValue = field.value;
+    const values = useMemo(()=>{
+        if (!rawValue) return [];
+        return rawValue.map((item)=>"string" == typeof item ? item : item.id);
+    }, [
+        rawValue
+    ]);
+    return /*#__PURE__*/ react.createElement(RolesMultiAutocomplete, {
+        label: field.label,
+        values: values,
+        onChange: (ids)=>field.onChange(ids),
+        disabled: field.disabled
+    });
+});
+export { RolesMultiSelectRenderer };
+
+//# sourceMappingURL=RolesMultiSelectRenderer.js.map

package/base/Base/FieldRenderers/RolesMultiSelectRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/RolesMultiSelectRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/RolesMultiSelectRenderer.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { RolesMultiAutocomplete } from \"~/components/RolesMultiAutocomplete/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        rolesMultiSelect: { fieldType: \"rolesMultiSelect\"; settings: undefined };\n    }\n}\n\nexport const RolesMultiSelectRenderer = createFieldRenderer(({ field }) => {\n    const rawValue = field.value as Array<string | { id: string }> | null;\n\n    const values = useMemo(() => {\n        if (!rawValue) {\n            return [];\n        }\n        return rawValue.map(item => (typeof item === \"string\" ? item : item.id));\n    }, [rawValue]);\n\n    return (\n        <RolesMultiAutocomplete\n            label={field.label}\n            values={values}\n            onChange={ids => field.onChange(ids)}\n            disabled={field.disabled}\n        />\n    );\n});\n"],"names":["RolesMultiSelectRenderer","createFieldRenderer","field","rawValue","values","useMemo","item","RolesMultiAutocomplete","ids"],"mappings":";;;AAUO,MAAMA,2BAA2BC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IAClE,MAAMC,WAAWD,MAAM,KAAK;IAE5B,MAAME,SAASC,QAAQ;QACnB,IAAI,CAACF,UACD,OAAO,EAAE;QAEb,OAAOA,SAAS,GAAG,CAACG,CAAAA,OAAS,AAAgB,YAAhB,OAAOA,OAAoBA,OAAOA,KAAK,EAAE;IAC1E,GAAG;QAACH;KAAS;IAEb,OAAO,WAAP,GACI,oBAACI,wBAAsBA;QACnB,OAAOL,MAAM,KAAK;QAClB,QAAQE;QACR,UAAUI,CAAAA,MAAON,MAAM,QAAQ,CAACM;QAChC,UAAUN,MAAM,QAAQ;;AAGpC"}

package/base/Base/FieldRenderers/SelectRenderer.js

@@ -5,6 +5,7 @@ const SelectRenderer = createFieldRenderer(({ field })=>{
     const options = field.options ?? [];
     return /*#__PURE__*/ react.createElement(Select, {
         label: field.label,
+        hint: field.help,
         placeholder: field.placeholder,
         description: field.description,
         note: field.note,

package/base/Base/FieldRenderers/SelectRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/SelectRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/SelectRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Select } from \"@webiny/admin-ui\";\nimport type { IValueOption } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        dropdown: { fieldType: \"text\" | \"number\"; options: true; settings: undefined };\n    }\n}\n\nexport const SelectRenderer = createFieldRenderer(({ field }) => {\n    const options: IValueOption[] = field.options ?? [];\n\n    return (\n        <Select\n            label={field.label}\n            placeholder={field.placeholder}\n            description={field.description}\n            note={field.note}\n            value={field.value != null ? String(field.value) : \"\"}\n            onChange={value => {\n                field.onChange(value);\n                field.onBlur();\n            }}\n            required={field.required}\n            disabled={field.disabled}\n            validation={field.validation}\n            options={options.map(opt => ({\n                label: opt.label,\n                value: String(opt.value),\n                disabled: opt.disabled\n            }))}\n        />\n    );\n});\n"],"names":["SelectRenderer","createFieldRenderer","field","options","Select","String","value","opt"],"mappings":";;;AAWO,MAAMA,iBAAiBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IACxD,MAAMC,UAA0BD,MAAM,OAAO,IAAI,EAAE;IAEnD,OAAO,WAAP,GACI,oBAACE,QAAMA;QACH,OAAOF,MAAM,KAAK;QAClB,aAAaA,MAAM,WAAW;QAC9B,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,OAAOA,AAAe,QAAfA,MAAM,KAAK,GAAWG,OAAOH,MAAM,KAAK,IAAI;QACnD,UAAUI,CAAAA;YACNJ,MAAM,QAAQ,CAACI;YACfJ,MAAM,MAAM;QAChB;QACA,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,SAASC,QAAQ,GAAG,CAACI,CAAAA,MAAQ;gBACzB,OAAOA,IAAI,KAAK;gBAChB,OAAOF,OAAOE,IAAI,KAAK;gBACvB,UAAUA,IAAI,QAAQ;YAC1B;;AAGZ"}
+{"version":3,"file":"base/Base/FieldRenderers/SelectRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/SelectRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Select } from \"@webiny/admin-ui\";\nimport type { IValueOption } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        dropdown: { fieldType: \"text\" | \"number\"; options: true; settings: undefined };\n    }\n}\n\nexport const SelectRenderer = createFieldRenderer(({ field }) => {\n    const options: IValueOption[] = field.options ?? [];\n\n    return (\n        <Select\n            label={field.label}\n            hint={field.help}\n            placeholder={field.placeholder}\n            description={field.description}\n            note={field.note}\n            value={field.value != null ? String(field.value) : \"\"}\n            onChange={value => {\n                field.onChange(value);\n                field.onBlur();\n            }}\n            required={field.required}\n            disabled={field.disabled}\n            validation={field.validation}\n            options={options.map(opt => ({\n                label: opt.label,\n                value: String(opt.value),\n                disabled: opt.disabled\n            }))}\n        />\n    );\n});\n"],"names":["SelectRenderer","createFieldRenderer","field","options","Select","String","value","opt"],"mappings":";;;AAWO,MAAMA,iBAAiBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IACxD,MAAMC,UAA0BD,MAAM,OAAO,IAAI,EAAE;IAEnD,OAAO,WAAP,GACI,oBAACE,QAAMA;QACH,OAAOF,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,aAAaA,MAAM,WAAW;QAC9B,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,OAAOA,AAAe,QAAfA,MAAM,KAAK,GAAWG,OAAOH,MAAM,KAAK,IAAI;QACnD,UAAUI,CAAAA;YACNJ,MAAM,QAAQ,CAACI;YACfJ,MAAM,MAAM;QAChB;QACA,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,SAASC,QAAQ,GAAG,CAACI,CAAAA,MAAQ;gBACzB,OAAOA,IAAI,KAAK;gBAChB,OAAOF,OAAOE,IAAI,KAAK;gBACvB,UAAUA,IAAI,QAAQ;YAC1B;;AAGZ"}

package/base/Base/FieldRenderers/TagsRenderer.js

@@ -5,6 +5,7 @@ const TagsRenderer = createFieldRenderer(({ field })=>{
     const value = field.value ?? [];
     return /*#__PURE__*/ react.createElement(Tags, {
         label: field.label,
+        hint: field.help,
         placeholder: field.placeholder || "Add values",
         description: field.description,
         note: field.note,

package/base/Base/FieldRenderers/TagsRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/TagsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/TagsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Tags } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        tags: { fieldType: \"text\"; settings: undefined };\n    }\n}\n\nexport const TagsRenderer = createFieldRenderer(({ field }) => {\n    const value = (field.value as string[]) ?? [];\n\n    return (\n        <Tags\n            label={field.label}\n            placeholder={field.placeholder || \"Add values\"}\n            description={field.description}\n            note={field.note}\n            required={field.required}\n            disabled={field.disabled}\n            validation={field.validation}\n            value={value}\n            onChange={value => field.onChange(value)}\n        />\n    );\n});\n"],"names":["TagsRenderer","createFieldRenderer","field","value","Tags"],"mappings":";;;AAUO,MAAMA,eAAeC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IACtD,MAAMC,QAASD,MAAM,KAAK,IAAiB,EAAE;IAE7C,OAAO,WAAP,GACI,oBAACE,MAAIA;QACD,OAAOF,MAAM,KAAK;QAClB,aAAaA,MAAM,WAAW,IAAI;QAClC,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,OAAOC;QACP,UAAUA,CAAAA,QAASD,MAAM,QAAQ,CAACC;;AAG9C"}
+{"version":3,"file":"base/Base/FieldRenderers/TagsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/TagsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Tags } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        tags: { fieldType: \"text\"; settings: undefined };\n    }\n}\n\nexport const TagsRenderer = createFieldRenderer(({ field }) => {\n    const value = (field.value as string[]) ?? [];\n\n    return (\n        <Tags\n            label={field.label}\n            hint={field.help}\n            placeholder={field.placeholder || \"Add values\"}\n            description={field.description}\n            note={field.note}\n            required={field.required}\n            disabled={field.disabled}\n            validation={field.validation}\n            value={value}\n            onChange={value => field.onChange(value)}\n        />\n    );\n});\n"],"names":["TagsRenderer","createFieldRenderer","field","value","Tags"],"mappings":";;;AAUO,MAAMA,eAAeC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IACtD,MAAMC,QAASD,MAAM,KAAK,IAAiB,EAAE;IAE7C,OAAO,WAAP,GACI,oBAACE,MAAIA;QACD,OAAOF,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,aAAaA,MAAM,WAAW,IAAI;QAClC,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,OAAOC;QACP,UAAUA,CAAAA,QAASD,MAAM,QAAQ,CAACC;;AAG9C"}

package/base/Base/FieldRenderers/TextInputsRenderer.js

@@ -2,7 +2,7 @@ import react from "react";
 import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
 import { ReactComponent } from "@webiny/icons/delete.svg";
 import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
-import { Button, DelayedOnChange, FormComponentDescription, Icon, Input, Separator } from "@webiny/admin-ui";
+import { Button, DelayedOnChange, FormComponentDescription, FormComponentErrorMessage, IconButton, Input, Separator } from "@webiny/admin-ui";
 const TextInputsRenderer = createFieldRenderer(({ field })=>{
     const values = field.value ?? [];
     const updateAt = (index, val)=>{
@@ -21,27 +21,37 @@ const TextInputsRenderer = createFieldRenderer(({ field })=>{
         className: "text-accent-primary text-lg font-semibold"
     }, `${field.label ?? ""} ${values.length ? `(${values.length})` : ""}`)), field.description && /*#__PURE__*/ react.createElement(FormComponentDescription, {
         text: field.description
-    }), values.map((val, index)=>/*#__PURE__*/ react.createElement(DelayedOnChange, {
+    }), values.map((val, index)=>/*#__PURE__*/ react.createElement("div", {
             key: index,
+            className: "flex items-end gap-sm"
+        }, /*#__PURE__*/ react.createElement("div", {
+            className: "flex-1"
+        }, /*#__PURE__*/ react.createElement(DelayedOnChange, {
             value: val,
             onChange: (value)=>updateAt(index, value)
         }, /*#__PURE__*/ react.createElement(Input, {
             disabled: field.disabled,
             label: `Value ${index + 1}`,
             placeholder: field.placeholder,
-            onEnter: ()=>field.addItem(""),
-            endIcon: /*#__PURE__*/ react.createElement(Icon, {
-                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
-                label: "Delete",
-                onClick: ()=>field.removeItem(index),
-                className: "cursor-pointer"
-            })
+            onEnter: ()=>field.addItem("")
+        }))), /*#__PURE__*/ react.createElement(IconButton, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            onClick: (e)=>{
+                e.stopPropagation();
+                field.removeItem(index);
+            },
+            size: "lg",
+            variant: "ghost"
         }))), /*#__PURE__*/ react.createElement(Button, {
         disabled: field.disabled,
         variant: "tertiary",
         icon: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null),
         text: field.rendererSettings?.addItemLabel ?? "Add Value",
         onClick: ()=>field.addItem("")
+    }), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: field.validation.message,
+        invalid: false === field.validation.isValid,
+        disabled: field.disabled
     }));
 });
 export { TextInputsRenderer };

package/base/Base/FieldRenderers/TextInputsRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/TextInputsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/TextInputsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport {\n    Button,\n    DelayedOnChange,\n    FormComponentDescription,\n    Icon,\n    Input,\n    Separator\n} from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        textInputs: { fieldType: \"text\"; settings?: { addItemLabel?: string } };\n    }\n}\n\nexport const TextInputsRenderer = createFieldRenderer<\"textInputs\">(({ field }) => {\n    const values = (field.value as string[]) ?? [];\n\n    const updateAt = (index: number, val: string) => {\n        const next = [...values];\n        next[index] = val;\n        field.onChange(next);\n    };\n\n    return (\n        <div className={\"flex flex-col gap-sm\"}>\n            <Separator labelPosition={\"start\"} variant={\"accent\"}>\n                <span className={\"text-accent-primary text-lg font-semibold\"}>\n                    {`${field.label ?? \"\"} ${values.length ? `(${values.length})` : \"\"}`}\n                </span>\n            </Separator>\n            {field.description && <FormComponentDescription text={field.description} />}\n            {values.map((val, index) => (\n                <DelayedOnChange\n                    key={index}\n                    value={val}\n                    onChange={value => updateAt(index, value as string)}\n                >\n                    <Input\n                        disabled={field.disabled}\n                        label={`Value ${index + 1}`}\n                        placeholder={field.placeholder}\n                        onEnter={() => field.addItem(\"\")}\n                        endIcon={\n                            <Icon\n                                icon={<DeleteIcon />}\n                                label={\"Delete\"}\n                                onClick={() => field.removeItem(index)}\n                                className={\"cursor-pointer\"}\n                            />\n                        }\n                    />\n                </DelayedOnChange>\n            ))}\n            <Button\n                disabled={field.disabled}\n                variant={\"tertiary\"}\n                icon={<AddIcon />}\n                text={field.rendererSettings?.addItemLabel ?? \"Add Value\"}\n                onClick={() => field.addItem(\"\")}\n            />\n        </div>\n    );\n});\n"],"names":["TextInputsRenderer","createFieldRenderer","field","values","updateAt","index","val","next","Separator","FormComponentDescription","DelayedOnChange","value","Input","Icon","DeleteIcon","Button","AddIcon"],"mappings":";;;;;AAmBO,MAAMA,qBAAqBC,oBAAkC,CAAC,EAAEC,KAAK,EAAE;IAC1E,MAAMC,SAAUD,MAAM,KAAK,IAAiB,EAAE;IAE9C,MAAME,WAAW,CAACC,OAAeC;QAC7B,MAAMC,OAAO;eAAIJ;SAAO;QACxBI,IAAI,CAACF,MAAM,GAAGC;QACdJ,MAAM,QAAQ,CAACK;IACnB;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,WAASA;QAAC,eAAe;QAAS,SAAS;qBACxC,oBAAC;QAAK,WAAW;OACZ,GAAGN,MAAM,KAAK,IAAI,GAAG,CAAC,EAAEC,OAAO,MAAM,GAAG,CAAC,CAAC,EAAEA,OAAO,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,IAG3ED,MAAM,WAAW,IAAI,WAAJ,GAAI,oBAACO,0BAAwBA;QAAC,MAAMP,MAAM,WAAW;QACtEC,OAAO,GAAG,CAAC,CAACG,KAAKD,QAAAA,WAAAA,GACd,oBAACK,iBAAeA;YACZ,KAAKL;YACL,OAAOC;YACP,UAAUK,CAAAA,QAASP,SAASC,OAAOM;yBAEnC,oBAACC,OAAKA;YACF,UAAUV,MAAM,QAAQ;YACxB,OAAO,CAAC,MAAM,EAAEG,QAAQ,GAAG;YAC3B,aAAaH,MAAM,WAAW;YAC9B,SAAS,IAAMA,MAAM,OAAO,CAAC;YAC7B,uBACI,oBAACW,MAAIA;gBACD,oBAAM,oBAACC,gBAAUA;gBACjB,OAAO;gBACP,SAAS,IAAMZ,MAAM,UAAU,CAACG;gBAChC,WAAW;;4BAM/B,oBAACU,QAAMA;QACH,UAAUb,MAAM,QAAQ;QACxB,SAAS;QACT,oBAAM,oBAACc,wBAAOA;QACd,MAAMd,MAAM,gBAAgB,EAAE,gBAAgB;QAC9C,SAAS,IAAMA,MAAM,OAAO,CAAC;;AAI7C"}
+{"version":3,"file":"base/Base/FieldRenderers/TextInputsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/TextInputsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport {\n    Button,\n    DelayedOnChange,\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    IconButton,\n    Input,\n    Separator\n} from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        textInputs: { fieldType: \"text\"; settings?: { addItemLabel?: string } };\n    }\n}\n\nexport const TextInputsRenderer = createFieldRenderer<\"textInputs\">(({ field }) => {\n    const values = (field.value as string[]) ?? [];\n\n    const updateAt = (index: number, val: string) => {\n        const next = [...values];\n        next[index] = val;\n        field.onChange(next);\n    };\n\n    return (\n        <div className={\"flex flex-col gap-sm\"}>\n            <Separator labelPosition={\"start\"} variant={\"accent\"}>\n                <span className={\"text-accent-primary text-lg font-semibold\"}>\n                    {`${field.label ?? \"\"} ${values.length ? `(${values.length})` : \"\"}`}\n                </span>\n            </Separator>\n            {field.description && <FormComponentDescription text={field.description} />}\n            {values.map((val, index) => (\n                <div key={index} className={\"flex items-end gap-sm\"}>\n                    <div className={\"flex-1\"}>\n                        <DelayedOnChange\n                            value={val}\n                            onChange={value => updateAt(index, value as string)}\n                        >\n                            <Input\n                                disabled={field.disabled}\n                                label={`Value ${index + 1}`}\n                                placeholder={field.placeholder}\n                                onEnter={() => field.addItem(\"\")}\n                            />\n                        </DelayedOnChange>\n                    </div>\n                    <IconButton\n                        icon={<DeleteIcon />}\n                        onClick={e => {\n                            e.stopPropagation();\n                            field.removeItem(index);\n                        }}\n                        size={\"lg\"}\n                        variant={\"ghost\"}\n                    />\n                </div>\n            ))}\n            <Button\n                disabled={field.disabled}\n                variant={\"tertiary\"}\n                icon={<AddIcon />}\n                text={field.rendererSettings?.addItemLabel ?? \"Add Value\"}\n                onClick={() => field.addItem(\"\")}\n            />\n            <FormComponentErrorMessage\n                text={field.validation.message}\n                invalid={field.validation.isValid === false}\n                disabled={field.disabled}\n            />\n        </div>\n    );\n});\n"],"names":["TextInputsRenderer","createFieldRenderer","field","values","updateAt","index","val","next","Separator","FormComponentDescription","DelayedOnChange","value","Input","IconButton","DeleteIcon","e","Button","AddIcon","FormComponentErrorMessage"],"mappings":";;;;;AAoBO,MAAMA,qBAAqBC,oBAAkC,CAAC,EAAEC,KAAK,EAAE;IAC1E,MAAMC,SAAUD,MAAM,KAAK,IAAiB,EAAE;IAE9C,MAAME,WAAW,CAACC,OAAeC;QAC7B,MAAMC,OAAO;eAAIJ;SAAO;QACxBI,IAAI,CAACF,MAAM,GAAGC;QACdJ,MAAM,QAAQ,CAACK;IACnB;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,WAASA;QAAC,eAAe;QAAS,SAAS;qBACxC,oBAAC;QAAK,WAAW;OACZ,GAAGN,MAAM,KAAK,IAAI,GAAG,CAAC,EAAEC,OAAO,MAAM,GAAG,CAAC,CAAC,EAAEA,OAAO,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,IAG3ED,MAAM,WAAW,IAAI,WAAJ,GAAI,oBAACO,0BAAwBA;QAAC,MAAMP,MAAM,WAAW;QACtEC,OAAO,GAAG,CAAC,CAACG,KAAKD,QAAAA,WAAAA,GACd,oBAAC;YAAI,KAAKA;YAAO,WAAW;yBACxB,oBAAC;YAAI,WAAW;yBACZ,oBAACK,iBAAeA;YACZ,OAAOJ;YACP,UAAUK,CAAAA,QAASP,SAASC,OAAOM;yBAEnC,oBAACC,OAAKA;YACF,UAAUV,MAAM,QAAQ;YACxB,OAAO,CAAC,MAAM,EAAEG,QAAQ,GAAG;YAC3B,aAAaH,MAAM,WAAW;YAC9B,SAAS,IAAMA,MAAM,OAAO,CAAC;4BAIzC,oBAACW,YAAUA;YACP,oBAAM,oBAACC,gBAAUA;YACjB,SAASC,CAAAA;gBACLA,EAAE,eAAe;gBACjBb,MAAM,UAAU,CAACG;YACrB;YACA,MAAM;YACN,SAAS;4BAIrB,oBAACW,QAAMA;QACH,UAAUd,MAAM,QAAQ;QACxB,SAAS;QACT,oBAAM,oBAACe,wBAAOA;QACd,MAAMf,MAAM,gBAAgB,EAAE,gBAAgB;QAC9C,SAAS,IAAMA,MAAM,OAAO,CAAC;sBAEjC,oBAACgB,2BAAyBA;QACtB,MAAMhB,MAAM,UAAU,CAAC,OAAO;QAC9B,SAASA,AAA6B,UAA7BA,MAAM,UAAU,CAAC,OAAO;QACjC,UAAUA,MAAM,QAAQ;;AAIxC"}

package/base/Base/FieldRenderers/TextareaRenderer.js

@@ -6,6 +6,7 @@ const TextareaRenderer = createFieldRenderer(({ field })=>/*#__PURE__*/ react.cr
         onChange: (value)=>field.onChange(value)
     }, /*#__PURE__*/ react.createElement(Textarea, {
         label: field.label,
+        hint: field.help,
         placeholder: field.placeholder,
         description: field.description,
         note: field.note,

package/base/Base/FieldRenderers/TextareaRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/TextareaRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/TextareaRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { DelayedOnChange } from \"@webiny/admin-ui\";\nimport { Textarea } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        textarea: { fieldType: \"text\"; settings?: { rows?: number } };\n    }\n}\n\nexport const TextareaRenderer = createFieldRenderer<\"textarea\">(({ field }) => {\n    return (\n        <DelayedOnChange value={field.value} onChange={value => field.onChange(value)}>\n            <Textarea\n                label={field.label}\n                placeholder={field.placeholder}\n                description={field.description}\n                note={field.note}\n                required={field.required}\n                disabled={field.disabled}\n                validation={field.validation}\n                onBlur={() => field.onBlur()}\n                rows={field.rendererSettings?.rows ?? 5}\n            />\n        </DelayedOnChange>\n    );\n});\n"],"names":["TextareaRenderer","createFieldRenderer","field","DelayedOnChange","value","Textarea"],"mappings":";;;AAWO,MAAMA,mBAAmBC,oBAAgC,CAAC,EAAEC,KAAK,EAAE,GAC/D,WAAP,GACI,oBAACC,iBAAeA;QAAC,OAAOD,MAAM,KAAK;QAAE,UAAUE,CAAAA,QAASF,MAAM,QAAQ,CAACE;qBACnE,oBAACC,UAAQA;QACL,OAAOH,MAAM,KAAK;QAClB,aAAaA,MAAM,WAAW;QAC9B,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,QAAQ,IAAMA,MAAM,MAAM;QAC1B,MAAMA,MAAM,gBAAgB,EAAE,QAAQ"}
+{"version":3,"file":"base/Base/FieldRenderers/TextareaRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/TextareaRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { DelayedOnChange } from \"@webiny/admin-ui\";\nimport { Textarea } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        textarea: { fieldType: \"text\"; settings?: { rows?: number } };\n    }\n}\n\nexport const TextareaRenderer = createFieldRenderer<\"textarea\">(({ field }) => {\n    return (\n        <DelayedOnChange value={field.value} onChange={value => field.onChange(value)}>\n            <Textarea\n                label={field.label}\n                hint={field.help}\n                placeholder={field.placeholder}\n                description={field.description}\n                note={field.note}\n                required={field.required}\n                disabled={field.disabled}\n                validation={field.validation}\n                onBlur={() => field.onBlur()}\n                rows={field.rendererSettings?.rows ?? 5}\n            />\n        </DelayedOnChange>\n    );\n});\n"],"names":["TextareaRenderer","createFieldRenderer","field","DelayedOnChange","value","Textarea"],"mappings":";;;AAWO,MAAMA,mBAAmBC,oBAAgC,CAAC,EAAEC,KAAK,EAAE,GAC/D,WAAP,GACI,oBAACC,iBAAeA;QAAC,OAAOD,MAAM,KAAK;QAAE,UAAUE,CAAAA,QAASF,MAAM,QAAQ,CAACE;qBACnE,oBAACC,UAAQA;QACL,OAAOH,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,aAAaA,MAAM,WAAW;QAC9B,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,QAAQ,IAAMA,MAAM,MAAM;QAC1B,MAAMA,MAAM,gBAAgB,EAAE,QAAQ"}

package/base/Base/FieldRenderers/TextareasRenderer.js

@@ -2,7 +2,7 @@ import react from "react";
 import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
 import { ReactComponent } from "@webiny/icons/delete_outline.svg";
 import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
-import { Button, DelayedOnChange, FormComponentDescription, IconButton, Separator, Textarea } from "@webiny/admin-ui";
+import { Button, DelayedOnChange, FormComponentDescription, FormComponentErrorMessage, IconButton, Separator, Textarea } from "@webiny/admin-ui";
 const TextareasRenderer = createFieldRenderer(({ field })=>{
     const values = field.value ?? [];
     const updateAt = (index, val)=>{
@@ -45,6 +45,10 @@ const TextareasRenderer = createFieldRenderer(({ field })=>{
         icon: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null),
         text: field.rendererSettings?.addItemLabel ?? "Add Value",
         onClick: ()=>field.addItem("")
+    }), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: field.validation.message,
+        invalid: false === field.validation.isValid,
+        disabled: field.disabled
     }));
 });
 export { TextareasRenderer };

package/base/Base/FieldRenderers/TextareasRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/TextareasRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/TextareasRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport {\n    Button,\n    DelayedOnChange,\n    FormComponentDescription,\n    IconButton,\n    Separator,\n    Textarea\n} from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        textareas: { fieldType: \"text\"; settings?: { addItemLabel?: string } };\n    }\n}\n\nexport const TextareasRenderer = createFieldRenderer<\"textareas\">(({ field }) => {\n    const values = (field.value as string[]) ?? [];\n\n    const updateAt = (index: number, val: string) => {\n        const next = [...values];\n        next[index] = val;\n        field.onChange(next);\n    };\n\n    return (\n        <div className={\"flex flex-col gap-sm\"}>\n            <Separator labelPosition={\"start\"} variant={\"accent\"}>\n                <span className={\"text-accent-primary text-lg font-semibold\"}>\n                    {`${field.label ?? \"\"} ${values.length ? `(${values.length})` : \"\"}`}\n                </span>\n            </Separator>\n            {field.description && <FormComponentDescription text={field.description} />}\n            {values.map((val, index) => (\n                <div key={index} className={\"relative\"}>\n                    <DelayedOnChange\n                        value={val}\n                        onChange={value => updateAt(index, value as string)}\n                    >\n                        <Textarea\n                            disabled={field.disabled}\n                            rows={5}\n                            label={`Value ${index + 1}`}\n                            placeholder={field.placeholder}\n                        />\n                    </DelayedOnChange>\n                    <div className={\"absolute top-xl right-sm z-10\"}>\n                        <IconButton\n                            variant={\"ghost\"}\n                            size={\"md\"}\n                            icon={<DeleteIcon />}\n                            onClick={() => field.removeItem(index)}\n                        />\n                    </div>\n                </div>\n            ))}\n            <Button\n                disabled={field.disabled}\n                variant={\"tertiary\"}\n                icon={<AddIcon />}\n                text={field.rendererSettings?.addItemLabel ?? \"Add Value\"}\n                onClick={() => field.addItem(\"\")}\n            />\n        </div>\n    );\n});\n"],"names":["TextareasRenderer","createFieldRenderer","field","values","updateAt","index","val","next","Separator","FormComponentDescription","DelayedOnChange","value","Textarea","IconButton","DeleteIcon","Button","AddIcon"],"mappings":";;;;;AAmBO,MAAMA,oBAAoBC,oBAAiC,CAAC,EAAEC,KAAK,EAAE;IACxE,MAAMC,SAAUD,MAAM,KAAK,IAAiB,EAAE;IAE9C,MAAME,WAAW,CAACC,OAAeC;QAC7B,MAAMC,OAAO;eAAIJ;SAAO;QACxBI,IAAI,CAACF,MAAM,GAAGC;QACdJ,MAAM,QAAQ,CAACK;IACnB;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,WAASA;QAAC,eAAe;QAAS,SAAS;qBACxC,oBAAC;QAAK,WAAW;OACZ,GAAGN,MAAM,KAAK,IAAI,GAAG,CAAC,EAAEC,OAAO,MAAM,GAAG,CAAC,CAAC,EAAEA,OAAO,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,IAG3ED,MAAM,WAAW,IAAI,WAAJ,GAAI,oBAACO,0BAAwBA;QAAC,MAAMP,MAAM,WAAW;QACtEC,OAAO,GAAG,CAAC,CAACG,KAAKD,QAAAA,WAAAA,GACd,oBAAC;YAAI,KAAKA;YAAO,WAAW;yBACxB,oBAACK,iBAAeA;YACZ,OAAOJ;YACP,UAAUK,CAAAA,QAASP,SAASC,OAAOM;yBAEnC,oBAACC,UAAQA;YACL,UAAUV,MAAM,QAAQ;YACxB,MAAM;YACN,OAAO,CAAC,MAAM,EAAEG,QAAQ,GAAG;YAC3B,aAAaH,MAAM,WAAW;2BAGtC,oBAAC;YAAI,WAAW;yBACZ,oBAACW,YAAUA;YACP,SAAS;YACT,MAAM;YACN,oBAAM,oBAACC,gBAAUA;YACjB,SAAS,IAAMZ,MAAM,UAAU,CAACG;6BAKhD,oBAACU,QAAMA;QACH,UAAUb,MAAM,QAAQ;QACxB,SAAS;QACT,oBAAM,oBAACc,wBAAOA;QACd,MAAMd,MAAM,gBAAgB,EAAE,gBAAgB;QAC9C,SAAS,IAAMA,MAAM,OAAO,CAAC;;AAI7C"}
+{"version":3,"file":"base/Base/FieldRenderers/TextareasRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/TextareasRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport {\n    Button,\n    DelayedOnChange,\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    IconButton,\n    Separator,\n    Textarea\n} from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        textareas: { fieldType: \"text\"; settings?: { addItemLabel?: string } };\n    }\n}\n\nexport const TextareasRenderer = createFieldRenderer<\"textareas\">(({ field }) => {\n    const values = (field.value as string[]) ?? [];\n\n    const updateAt = (index: number, val: string) => {\n        const next = [...values];\n        next[index] = val;\n        field.onChange(next);\n    };\n\n    return (\n        <div className={\"flex flex-col gap-sm\"}>\n            <Separator labelPosition={\"start\"} variant={\"accent\"}>\n                <span className={\"text-accent-primary text-lg font-semibold\"}>\n                    {`${field.label ?? \"\"} ${values.length ? `(${values.length})` : \"\"}`}\n                </span>\n            </Separator>\n            {field.description && <FormComponentDescription text={field.description} />}\n            {values.map((val, index) => (\n                <div key={index} className={\"relative\"}>\n                    <DelayedOnChange\n                        value={val}\n                        onChange={value => updateAt(index, value as string)}\n                    >\n                        <Textarea\n                            disabled={field.disabled}\n                            rows={5}\n                            label={`Value ${index + 1}`}\n                            placeholder={field.placeholder}\n                        />\n                    </DelayedOnChange>\n                    <div className={\"absolute top-xl right-sm z-10\"}>\n                        <IconButton\n                            variant={\"ghost\"}\n                            size={\"md\"}\n                            icon={<DeleteIcon />}\n                            onClick={() => field.removeItem(index)}\n                        />\n                    </div>\n                </div>\n            ))}\n            <Button\n                disabled={field.disabled}\n                variant={\"tertiary\"}\n                icon={<AddIcon />}\n                text={field.rendererSettings?.addItemLabel ?? \"Add Value\"}\n                onClick={() => field.addItem(\"\")}\n            />\n            <FormComponentErrorMessage\n                text={field.validation.message}\n                invalid={field.validation.isValid === false}\n                disabled={field.disabled}\n            />\n        </div>\n    );\n});\n"],"names":["TextareasRenderer","createFieldRenderer","field","values","updateAt","index","val","next","Separator","FormComponentDescription","DelayedOnChange","value","Textarea","IconButton","DeleteIcon","Button","AddIcon","FormComponentErrorMessage"],"mappings":";;;;;AAoBO,MAAMA,oBAAoBC,oBAAiC,CAAC,EAAEC,KAAK,EAAE;IACxE,MAAMC,SAAUD,MAAM,KAAK,IAAiB,EAAE;IAE9C,MAAME,WAAW,CAACC,OAAeC;QAC7B,MAAMC,OAAO;eAAIJ;SAAO;QACxBI,IAAI,CAACF,MAAM,GAAGC;QACdJ,MAAM,QAAQ,CAACK;IACnB;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,WAASA;QAAC,eAAe;QAAS,SAAS;qBACxC,oBAAC;QAAK,WAAW;OACZ,GAAGN,MAAM,KAAK,IAAI,GAAG,CAAC,EAAEC,OAAO,MAAM,GAAG,CAAC,CAAC,EAAEA,OAAO,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,IAG3ED,MAAM,WAAW,IAAI,WAAJ,GAAI,oBAACO,0BAAwBA;QAAC,MAAMP,MAAM,WAAW;QACtEC,OAAO,GAAG,CAAC,CAACG,KAAKD,QAAAA,WAAAA,GACd,oBAAC;YAAI,KAAKA;YAAO,WAAW;yBACxB,oBAACK,iBAAeA;YACZ,OAAOJ;YACP,UAAUK,CAAAA,QAASP,SAASC,OAAOM;yBAEnC,oBAACC,UAAQA;YACL,UAAUV,MAAM,QAAQ;YACxB,MAAM;YACN,OAAO,CAAC,MAAM,EAAEG,QAAQ,GAAG;YAC3B,aAAaH,MAAM,WAAW;2BAGtC,oBAAC;YAAI,WAAW;yBACZ,oBAACW,YAAUA;YACP,SAAS;YACT,MAAM;YACN,oBAAM,oBAACC,gBAAUA;YACjB,SAAS,IAAMZ,MAAM,UAAU,CAACG;6BAKhD,oBAACU,QAAMA;QACH,UAAUb,MAAM,QAAQ;QACxB,SAAS;QACT,oBAAM,oBAACc,wBAAOA;QACd,MAAMd,MAAM,gBAAgB,EAAE,gBAAgB;QAC9C,SAAS,IAAMA,MAAM,OAAO,CAAC;sBAEjC,oBAACe,2BAAyBA;QACtB,MAAMf,MAAM,UAAU,CAAC,OAAO;QAC9B,SAASA,AAA6B,UAA7BA,MAAM,UAAU,CAAC,OAAO;QACjC,UAAUA,MAAM,QAAQ;;AAIxC"}

package/base/Base.d.ts

@@ -1,2 +1,4 @@
 import React from "react";
-export declare const Base: React.MemoExoticComponent<() => React.JSX.Element>;
+declare const BaseExtension: () => React.JSX.Element;
+export declare const Base: React.MemoExoticComponent<typeof BaseExtension>;
+export {};

package/base/Base.js

@@ -7,7 +7,8 @@ import { LexicalPreset } from "./Base/LexicalPreset.js";
 import { DefaultFieldRenderers } from "./Base/DefaultFieldRenderers.js";
 import { DefaultLayoutRenderers } from "./Base/DefaultLayoutRenderers.js";
 import { DefaultLexicalEditorConfig } from "../components/LexicalEditor/DefaultLexicalEditorConfig.js";
-const BaseExtension = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Tenant, null), /*#__PURE__*/ react.createElement(Menus, null), /*#__PURE__*/ react.createElement(UserMenu, null), /*#__PURE__*/ react.createElement(RoutesConfig, null), /*#__PURE__*/ react.createElement(LexicalPreset, null), /*#__PURE__*/ react.createElement(DefaultFieldRenderers, null), /*#__PURE__*/ react.createElement(DefaultLayoutRenderers, null), /*#__PURE__*/ react.createElement(DefaultLexicalEditorConfig, null));
+import { AccessManagementExtension } from "../modules/AccessManagementExtension.js";
+const BaseExtension = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Tenant, null), /*#__PURE__*/ react.createElement(Menus, null), /*#__PURE__*/ react.createElement(UserMenu, null), /*#__PURE__*/ react.createElement(RoutesConfig, null), /*#__PURE__*/ react.createElement(LexicalPreset, null), /*#__PURE__*/ react.createElement(DefaultFieldRenderers, null), /*#__PURE__*/ react.createElement(DefaultLayoutRenderers, null), /*#__PURE__*/ react.createElement(DefaultLexicalEditorConfig, null), /*#__PURE__*/ react.createElement(AccessManagementExtension, null));
 const Base = /*#__PURE__*/ memo(BaseExtension);
 export { Base };
 

package/base/Base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base/Base.js","sources":["../../src/base/Base.tsx"],"sourcesContent":["import React, { memo } from \"react\";\nimport { Menus } from \"./Base/Menus.js\";\nimport { RoutesConfig } from \"./Base/RoutesConfig.js\";\nimport { Tenant } from \"./Base/Tenant.js\";\nimport { UserMenu } from \"./Base/UserMenu.js\";\nimport { LexicalPreset } from \"./Base/LexicalPreset.js\";\nimport { DefaultFieldRenderers } from \"./Base/DefaultFieldRenderers.js\";\nimport { DefaultLayoutRenderers } from \"./Base/DefaultLayoutRenderers.js\";\nimport { DefaultLexicalEditorConfig } from \"~/components/LexicalEditor/DefaultLexicalEditorConfig.js\";\n\nconst BaseExtension = () => {\n    return (\n        <>\n            <Tenant />\n            <Menus />\n            <UserMenu />\n            <RoutesConfig />\n            <LexicalPreset />\n            <DefaultFieldRenderers />\n            <DefaultLayoutRenderers />\n            <DefaultLexicalEditorConfig />\n        </>\n    );\n};\n\nexport const Base = memo(BaseExtension);\n"],"names":["BaseExtension","Tenant","Menus","UserMenu","RoutesConfig","LexicalPreset","DefaultFieldRenderers","DefaultLayoutRenderers","DefaultLexicalEditorConfig","Base","memo"],"mappings":";;;;;;;;;AAUA,MAAMA,gBAAgB,IACX,WAAP,GACI,wDACI,oBAACC,QAAMA,OAAAA,WAAAA,GACP,oBAACC,OAAKA,OAAAA,WAAAA,GACN,oBAACC,UAAQA,OAAAA,WAAAA,GACT,oBAACC,cAAYA,OAAAA,WAAAA,GACb,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,uBAAqBA,OAAAA,WAAAA,GACtB,oBAACC,wBAAsBA,OAAAA,WAAAA,GACvB,oBAACC,4BAA0BA;AAKhC,MAAMC,OAAO,WAAHA,GAAGC,KAAKV"}
+{"version":3,"file":"base/Base.js","sources":["../../src/base/Base.tsx"],"sourcesContent":["import React, { memo } from \"react\";\nimport { Menus } from \"./Base/Menus.js\";\nimport { RoutesConfig } from \"./Base/RoutesConfig.js\";\nimport { Tenant } from \"./Base/Tenant.js\";\nimport { UserMenu } from \"./Base/UserMenu.js\";\nimport { LexicalPreset } from \"./Base/LexicalPreset.js\";\nimport { DefaultFieldRenderers } from \"./Base/DefaultFieldRenderers.js\";\nimport { DefaultLayoutRenderers } from \"./Base/DefaultLayoutRenderers.js\";\nimport { DefaultLexicalEditorConfig } from \"~/components/LexicalEditor/DefaultLexicalEditorConfig.js\";\nimport { AccessManagementExtension } from \"~/modules/AccessManagementExtension.js\";\n\nconst BaseExtension = () => {\n    return (\n        <>\n            <Tenant />\n            <Menus />\n            <UserMenu />\n            <RoutesConfig />\n            <LexicalPreset />\n            <DefaultFieldRenderers />\n            <DefaultLayoutRenderers />\n            <DefaultLexicalEditorConfig />\n            <AccessManagementExtension />\n        </>\n    );\n};\n\nexport const Base = memo(BaseExtension);\n"],"names":["BaseExtension","Tenant","Menus","UserMenu","RoutesConfig","LexicalPreset","DefaultFieldRenderers","DefaultLayoutRenderers","DefaultLexicalEditorConfig","AccessManagementExtension","Base","memo"],"mappings":";;;;;;;;;;AAWA,MAAMA,gBAAgB,IACX,WAAP,GACI,wDACI,oBAACC,QAAMA,OAAAA,WAAAA,GACP,oBAACC,OAAKA,OAAAA,WAAAA,GACN,oBAACC,UAAQA,OAAAA,WAAAA,GACT,oBAACC,cAAYA,OAAAA,WAAAA,GACb,oBAACC,eAAaA,OAAAA,WAAAA,GACd,oBAACC,uBAAqBA,OAAAA,WAAAA,GACtB,oBAACC,wBAAsBA,OAAAA,WAAAA,GACvB,oBAACC,4BAA0BA,OAAAA,WAAAA,GAC3B,oBAACC,2BAAyBA;AAK/B,MAAMC,OAAO,WAAHA,GAAGC,KAAKX"}

package/base/createRootContainer.js

@@ -9,6 +9,7 @@ import { GraphQLClientFeature } from "@webiny/app/features/graphqlClient/feature
 import { MainGraphQLClientFeature } from "@webiny/app/features/mainGraphQLClient/feature.js";
 import { LocalStorageFeature } from "@webiny/app/features/localStorage/feature.js";
 import { EventPublisherFeature } from "@webiny/app/features/eventPublisher/feature.js";
+import { NotificationsFeature } from "../features/notifications/feature.js";
 import { WcpFeature } from "../features/wcp/feature.js";
 import { TenancyFeature } from "../features/tenancy/feature.js";
 import { SystemInstallerFeature } from "../presentation/installation/presenters/SystemInstaller/feature.js";
@@ -16,6 +17,9 @@ import { TelemetryFeature } from "../features/telemetry/feature.js";
 import { ErrorOverlayNetworkErrorHandler } from "../errors/ErrorOverlayNetworkErrorHandler.js";
 import { ToolsFeature } from "../features/tools/feature.js";
 import { TextToLexicalToolFeature } from "../presentation/textToLexicalTool/feature.js";
+import { ConfirmationFeature } from "../features/confirmation/feature.js";
+import { ClipboardFeature } from "../features/clipboard/feature.js";
+import { resolveApiUrl, resolveGraphqlUrl, resolveWebsocketUrl } from "./resolveApiUrl.js";
 const isUndefined = (value)=>[
         void 0,
         "undefined"
@@ -27,20 +31,21 @@ function createRootContainer() {
     const deploymentId = String(process.env.WEBINY_ADMIN_DEPLOYMENT_ID);
     EnvConfigFeature.register(container, {
         deploymentId,
-        apiUrl: String(process.env.REACT_APP_API_URL),
+        apiUrl: resolveApiUrl(),
         debug: "true" === process.env.WEBINY_ADMIN_DEBUG,
-        graphqlApiUrl: String(process.env.REACT_APP_GRAPHQL_API_URL),
+        graphqlApiUrl: resolveGraphqlUrl(),
         telemetryEnabled: "true" === process.env.REACT_APP_WEBINY_TELEMETRY,
         telemetryUserId: process.env.REACT_APP_WEBINY_TELEMETRY_USER_ID,
         trashBinRetentionPeriodDays: trashBinRetention,
         wcpProjectId: process.env.REACT_APP_WEBINY_PROJECT_ID || process.env.REACT_APP_WCP_PROJECT_ID,
-        websocketUrl: String(process.env.REACT_APP_WEBSOCKET_URL)
+        websocketUrl: resolveWebsocketUrl()
     });
     const history = createBrowserHistory();
     container.registerInstance(RouterGateway, new HistoryRouterGateway(history, ""));
     container.register(DefaultRouteElementRegistry).inSingletonScope();
     RouterFeature.register(container);
     EventPublisherFeature.register(container);
+    NotificationsFeature.register(container);
     GraphQLClientFeature.register(container, {
         batching: true,
         retry: true
@@ -56,6 +61,8 @@ function createRootContainer() {
     container.register(ErrorOverlayNetworkErrorHandler).inSingletonScope();
     ToolsFeature.register(container);
     TextToLexicalToolFeature.register(container);
+    ConfirmationFeature.register(container);
+    ClipboardFeature.register(container);
     return container;
 }
 export { createRootContainer };