@webiny/app-admin 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

package/base/Base/FieldRenderers/TextInputsRenderer.js

@@ -1,48 +1,59 @@
-import React from "react";
+import react from "react";
 import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
-import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
-import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
-import { Button, DelayedOnChange, FormComponentDescription, Icon, Input, Separator } from "@webiny/admin-ui";
-export const TextInputsRenderer = createFieldRenderer(({
-  field
-}) => {
-  const values = field.value ?? [];
-  const updateAt = (index, val) => {
-    const next = [...values];
-    next[index] = val;
-    field.onChange(next);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col gap-sm"
-  }, /*#__PURE__*/React.createElement(Separator, {
-    labelPosition: "start",
-    variant: "accent"
-  }, /*#__PURE__*/React.createElement("span", {
-    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, {
-    key: index,
-    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(DeleteIcon, null),
-      label: "Delete",
-      onClick: () => field.removeItem(index),
-      className: "cursor-pointer"
-    })
-  }))), /*#__PURE__*/React.createElement(Button, {
-    disabled: field.disabled,
-    variant: "tertiary",
-    icon: /*#__PURE__*/React.createElement(AddIcon, null),
-    text: field.rendererSettings?.addItemLabel ?? "Add Value",
-    onClick: () => field.addItem("")
-  }));
+import { ReactComponent } from "@webiny/icons/delete.svg";
+import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
+import { Button, DelayedOnChange, FormComponentDescription, FormComponentErrorMessage, IconButton, Input, Separator } from "@webiny/admin-ui";
+const TextInputsRenderer = createFieldRenderer(({ field })=>{
+    const values = field.value ?? [];
+    const updateAt = (index, val)=>{
+        const next = [
+            ...values
+        ];
+        next[index] = val;
+        field.onChange(next);
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement(Separator, {
+        labelPosition: "start",
+        variant: "accent"
+    }, /*#__PURE__*/ react.createElement("span", {
+        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("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("")
+        }))), /*#__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 };
 
 //# sourceMappingURL=TextInputsRenderer.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","createFieldRenderer","ReactComponent","DeleteIcon","AddIcon","Button","DelayedOnChange","FormComponentDescription","Icon","Input","Separator","TextInputsRenderer","field","values","value","updateAt","index","val","next","onChange","createElement","className","labelPosition","variant","label","length","description","text","map","key","disabled","placeholder","onEnter","addItem","endIcon","icon","onClick","removeItem","rendererSettings","addItemLabel"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,SAASD,cAAc,IAAIE,OAAO,QAAQ,uBAAuB;AACjE,SACIC,MAAM,EACNC,eAAe,EACfC,wBAAwB,EACxBC,IAAI,EACJC,KAAK,EACLC,SAAS,QACN,kBAAkB;AAQzB,OAAO,MAAMC,kBAAkB,GAAGV,mBAAmB,CAAe,CAAC;EAAEW;AAAM,CAAC,KAAK;EAC/E,MAAMC,MAAM,GAAID,KAAK,CAACE,KAAK,IAAiB,EAAE;EAE9C,MAAMC,QAAQ,GAAGA,CAACC,KAAa,EAAEC,GAAW,KAAK;IAC7C,MAAMC,IAAI,GAAG,CAAC,GAAGL,MAAM,CAAC;IACxBK,IAAI,CAACF,KAAK,CAAC,GAAGC,GAAG;IACjBL,KAAK,CAACO,QAAQ,CAACD,IAAI,CAAC;EACxB,CAAC;EAED,oBACIlB,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAE;EAAuB,gBACnCrB,KAAA,CAAAoB,aAAA,CAACV,SAAS;IAACY,aAAa,EAAE,OAAQ;IAACC,OAAO,EAAE;EAAS,gBACjDvB,KAAA,CAAAoB,aAAA;IAAMC,SAAS,EAAE;EAA4C,GACxD,GAAGT,KAAK,CAACY,KAAK,IAAI,EAAE,IAAIX,MAAM,CAACY,MAAM,GAAG,IAAIZ,MAAM,CAACY,MAAM,GAAG,GAAG,EAAE,EAChE,CACC,CAAC,EACXb,KAAK,CAACc,WAAW,iBAAI1B,KAAA,CAAAoB,aAAA,CAACb,wBAAwB;IAACoB,IAAI,EAAEf,KAAK,CAACc;EAAY,CAAE,CAAC,EAC1Eb,MAAM,CAACe,GAAG,CAAC,CAACX,GAAG,EAAED,KAAK,kBACnBhB,KAAA,CAAAoB,aAAA,CAACd,eAAe;IACZuB,GAAG,EAAEb,KAAM;IACXF,KAAK,EAAEG,GAAI;IACXE,QAAQ,EAAEL,KAAK,IAAIC,QAAQ,CAACC,KAAK,EAAEF,KAAe;EAAE,gBAEpDd,KAAA,CAAAoB,aAAA,CAACX,KAAK;IACFqB,QAAQ,EAAElB,KAAK,CAACkB,QAAS;IACzBN,KAAK,EAAE,SAASR,KAAK,GAAG,CAAC,EAAG;IAC5Be,WAAW,EAAEnB,KAAK,CAACmB,WAAY;IAC/BC,OAAO,EAAEA,CAAA,KAAMpB,KAAK,CAACqB,OAAO,CAAC,EAAE,CAAE;IACjCC,OAAO,eACHlC,KAAA,CAAAoB,aAAA,CAACZ,IAAI;MACD2B,IAAI,eAAEnC,KAAA,CAAAoB,aAAA,CAACjB,UAAU,MAAE,CAAE;MACrBqB,KAAK,EAAE,QAAS;MAChBY,OAAO,EAAEA,CAAA,KAAMxB,KAAK,CAACyB,UAAU,CAACrB,KAAK,CAAE;MACvCK,SAAS,EAAE;IAAiB,CAC/B;EACJ,CACJ,CACY,CACpB,CAAC,eACFrB,KAAA,CAAAoB,aAAA,CAACf,MAAM;IACHyB,QAAQ,EAAElB,KAAK,CAACkB,QAAS;IACzBP,OAAO,EAAE,UAAW;IACpBY,IAAI,eAAEnC,KAAA,CAAAoB,aAAA,CAAChB,OAAO,MAAE,CAAE;IAClBuB,IAAI,EAAEf,KAAK,CAAC0B,gBAAgB,EAAEC,YAAY,IAAI,WAAY;IAC1DH,OAAO,EAAEA,CAAA,KAAMxB,KAAK,CAACqB,OAAO,CAAC,EAAE;EAAE,CACpC,CACA,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}
+{"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

@@ -1,24 +1,21 @@
-import React from "react";
+import react from "react";
 import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
-import { DelayedOnChange } from "@webiny/admin-ui";
-import { Textarea } from "@webiny/admin-ui";
-export const TextareaRenderer = createFieldRenderer(({
-  field
-}) => {
-  return /*#__PURE__*/React.createElement(DelayedOnChange, {
-    value: field.value,
-    onChange: value => field.onChange(value)
-  }, /*#__PURE__*/React.createElement(Textarea, {
-    label: field.label,
-    placeholder: field.placeholder,
-    description: field.description,
-    note: field.note,
-    required: field.required,
-    disabled: field.disabled,
-    validation: field.validation,
-    onBlur: () => field.onBlur(),
-    rows: field.rendererSettings?.rows ?? 5
-  }));
-});
+import { DelayedOnChange, Textarea } from "@webiny/admin-ui";
+const TextareaRenderer = createFieldRenderer(({ field })=>/*#__PURE__*/ react.createElement(DelayedOnChange, {
+        value: field.value,
+        onChange: (value)=>field.onChange(value)
+    }, /*#__PURE__*/ react.createElement(Textarea, {
+        label: field.label,
+        hint: field.help,
+        placeholder: field.placeholder,
+        description: field.description,
+        note: field.note,
+        required: field.required,
+        disabled: field.disabled,
+        validation: field.validation,
+        onBlur: ()=>field.onBlur(),
+        rows: field.rendererSettings?.rows ?? 5
+    })));
+export { TextareaRenderer };
 
 //# sourceMappingURL=TextareaRenderer.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","createFieldRenderer","DelayedOnChange","Textarea","TextareaRenderer","field","createElement","value","onChange","label","placeholder","description","note","required","disabled","validation","onBlur","rows","rendererSettings"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,eAAe,QAAQ,kBAAkB;AAClD,SAASC,QAAQ,QAAQ,kBAAkB;AAQ3C,OAAO,MAAMC,gBAAgB,GAAGH,mBAAmB,CAAa,CAAC;EAAEI;AAAM,CAAC,KAAK;EAC3E,oBACIL,KAAA,CAAAM,aAAA,CAACJ,eAAe;IAACK,KAAK,EAAEF,KAAK,CAACE,KAAM;IAACC,QAAQ,EAAED,KAAK,IAAIF,KAAK,CAACG,QAAQ,CAACD,KAAK;EAAE,gBAC1EP,KAAA,CAAAM,aAAA,CAACH,QAAQ;IACLM,KAAK,EAAEJ,KAAK,CAACI,KAAM;IACnBC,WAAW,EAAEL,KAAK,CAACK,WAAY;IAC/BC,WAAW,EAAEN,KAAK,CAACM,WAAY;IAC/BC,IAAI,EAAEP,KAAK,CAACO,IAAK;IACjBC,QAAQ,EAAER,KAAK,CAACQ,QAAS;IACzBC,QAAQ,EAAET,KAAK,CAACS,QAAS;IACzBC,UAAU,EAAEV,KAAK,CAACU,UAAW;IAC7BC,MAAM,EAAEA,CAAA,KAAMX,KAAK,CAACW,MAAM,CAAC,CAAE;IAC7BC,IAAI,EAAEZ,KAAK,CAACa,gBAAgB,EAAED,IAAI,IAAI;EAAE,CAC3C,CACY,CAAC;AAE1B,CAAC,CAAC","ignoreList":[]}
+{"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

@@ -1,51 +1,56 @@
-import React from "react";
+import react from "react";
 import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
-import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
-import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
-import { Button, DelayedOnChange, FormComponentDescription, IconButton, Separator, Textarea } from "@webiny/admin-ui";
-export const TextareasRenderer = createFieldRenderer(({
-  field
-}) => {
-  const values = field.value ?? [];
-  const updateAt = (index, val) => {
-    const next = [...values];
-    next[index] = val;
-    field.onChange(next);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col gap-sm"
-  }, /*#__PURE__*/React.createElement(Separator, {
-    labelPosition: "start",
-    variant: "accent"
-  }, /*#__PURE__*/React.createElement("span", {
-    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("div", {
-    key: index,
-    className: "relative"
-  }, /*#__PURE__*/React.createElement(DelayedOnChange, {
-    value: val,
-    onChange: value => updateAt(index, value)
-  }, /*#__PURE__*/React.createElement(Textarea, {
-    disabled: field.disabled,
-    rows: 5,
-    label: `Value ${index + 1}`,
-    placeholder: field.placeholder
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "absolute top-xl right-sm z-10"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    variant: "ghost",
-    size: "md",
-    icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
-    onClick: () => field.removeItem(index)
-  })))), /*#__PURE__*/React.createElement(Button, {
-    disabled: field.disabled,
-    variant: "tertiary",
-    icon: /*#__PURE__*/React.createElement(AddIcon, null),
-    text: field.rendererSettings?.addItemLabel ?? "Add Value",
-    onClick: () => field.addItem("")
-  }));
+import { ReactComponent } from "@webiny/icons/delete_outline.svg";
+import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
+import { Button, DelayedOnChange, FormComponentDescription, FormComponentErrorMessage, IconButton, Separator, Textarea } from "@webiny/admin-ui";
+const TextareasRenderer = createFieldRenderer(({ field })=>{
+    const values = field.value ?? [];
+    const updateAt = (index, val)=>{
+        const next = [
+            ...values
+        ];
+        next[index] = val;
+        field.onChange(next);
+    };
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement(Separator, {
+        labelPosition: "start",
+        variant: "accent"
+    }, /*#__PURE__*/ react.createElement("span", {
+        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("div", {
+            key: index,
+            className: "relative"
+        }, /*#__PURE__*/ react.createElement(DelayedOnChange, {
+            value: val,
+            onChange: (value)=>updateAt(index, value)
+        }, /*#__PURE__*/ react.createElement(Textarea, {
+            disabled: field.disabled,
+            rows: 5,
+            label: `Value ${index + 1}`,
+            placeholder: field.placeholder
+        })), /*#__PURE__*/ react.createElement("div", {
+            className: "absolute top-xl right-sm z-10"
+        }, /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "ghost",
+            size: "md",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            onClick: ()=>field.removeItem(index)
+        })))), /*#__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 { TextareasRenderer };
 
 //# sourceMappingURL=TextareasRenderer.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","createFieldRenderer","ReactComponent","DeleteIcon","AddIcon","Button","DelayedOnChange","FormComponentDescription","IconButton","Separator","Textarea","TextareasRenderer","field","values","value","updateAt","index","val","next","onChange","createElement","className","labelPosition","variant","label","length","description","text","map","key","disabled","rows","placeholder","size","icon","onClick","removeItem","rendererSettings","addItemLabel","addItem"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,cAAc,IAAIC,UAAU,QAAQ,kCAAkC;AAC/E,SAASD,cAAc,IAAIE,OAAO,QAAQ,uBAAuB;AACjE,SACIC,MAAM,EACNC,eAAe,EACfC,wBAAwB,EACxBC,UAAU,EACVC,SAAS,EACTC,QAAQ,QACL,kBAAkB;AAQzB,OAAO,MAAMC,iBAAiB,GAAGV,mBAAmB,CAAc,CAAC;EAAEW;AAAM,CAAC,KAAK;EAC7E,MAAMC,MAAM,GAAID,KAAK,CAACE,KAAK,IAAiB,EAAE;EAE9C,MAAMC,QAAQ,GAAGA,CAACC,KAAa,EAAEC,GAAW,KAAK;IAC7C,MAAMC,IAAI,GAAG,CAAC,GAAGL,MAAM,CAAC;IACxBK,IAAI,CAACF,KAAK,CAAC,GAAGC,GAAG;IACjBL,KAAK,CAACO,QAAQ,CAACD,IAAI,CAAC;EACxB,CAAC;EAED,oBACIlB,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAE;EAAuB,gBACnCrB,KAAA,CAAAoB,aAAA,CAACX,SAAS;IAACa,aAAa,EAAE,OAAQ;IAACC,OAAO,EAAE;EAAS,gBACjDvB,KAAA,CAAAoB,aAAA;IAAMC,SAAS,EAAE;EAA4C,GACxD,GAAGT,KAAK,CAACY,KAAK,IAAI,EAAE,IAAIX,MAAM,CAACY,MAAM,GAAG,IAAIZ,MAAM,CAACY,MAAM,GAAG,GAAG,EAAE,EAChE,CACC,CAAC,EACXb,KAAK,CAACc,WAAW,iBAAI1B,KAAA,CAAAoB,aAAA,CAACb,wBAAwB;IAACoB,IAAI,EAAEf,KAAK,CAACc;EAAY,CAAE,CAAC,EAC1Eb,MAAM,CAACe,GAAG,CAAC,CAACX,GAAG,EAAED,KAAK,kBACnBhB,KAAA,CAAAoB,aAAA;IAAKS,GAAG,EAAEb,KAAM;IAACK,SAAS,EAAE;EAAW,gBACnCrB,KAAA,CAAAoB,aAAA,CAACd,eAAe;IACZQ,KAAK,EAAEG,GAAI;IACXE,QAAQ,EAAEL,KAAK,IAAIC,QAAQ,CAACC,KAAK,EAAEF,KAAe;EAAE,gBAEpDd,KAAA,CAAAoB,aAAA,CAACV,QAAQ;IACLoB,QAAQ,EAAElB,KAAK,CAACkB,QAAS;IACzBC,IAAI,EAAE,CAAE;IACRP,KAAK,EAAE,SAASR,KAAK,GAAG,CAAC,EAAG;IAC5BgB,WAAW,EAAEpB,KAAK,CAACoB;EAAY,CAClC,CACY,CAAC,eAClBhC,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAE;EAAgC,gBAC5CrB,KAAA,CAAAoB,aAAA,CAACZ,UAAU;IACPe,OAAO,EAAE,OAAQ;IACjBU,IAAI,EAAE,IAAK;IACXC,IAAI,eAAElC,KAAA,CAAAoB,aAAA,CAACjB,UAAU,MAAE,CAAE;IACrBgC,OAAO,EAAEA,CAAA,KAAMvB,KAAK,CAACwB,UAAU,CAACpB,KAAK;EAAE,CAC1C,CACA,CACJ,CACR,CAAC,eACFhB,KAAA,CAAAoB,aAAA,CAACf,MAAM;IACHyB,QAAQ,EAAElB,KAAK,CAACkB,QAAS;IACzBP,OAAO,EAAE,UAAW;IACpBW,IAAI,eAAElC,KAAA,CAAAoB,aAAA,CAAChB,OAAO,MAAE,CAAE;IAClBuB,IAAI,EAAEf,KAAK,CAACyB,gBAAgB,EAAEC,YAAY,IAAI,WAAY;IAC1DH,OAAO,EAAEA,CAAA,KAAMvB,KAAK,CAAC2B,OAAO,CAAC,EAAE;EAAE,CACpC,CACA,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}
+{"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/FieldRenderers/VerticalTabsRenderer.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import type { TabsNodeRendererProps } from "../../../features/formModel/FormView.js";
-export declare const VerticalTabsRenderer: (({ node }: TabsNodeRendererProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const VerticalTabsRenderer: (({ node }: TabsNodeRendererProps) => React.JSX.Element) & React.NamedExoticComponent<TabsNodeRendererProps> & {
+    readonly type: ({ node }: TabsNodeRendererProps) => React.JSX.Element;
 };

package/base/Base/FieldRenderers/VerticalTabsRenderer.js

@@ -1,41 +1,40 @@
-import React from "react";
+import react from "react";
 import { observer } from "mobx-react-lite";
-import { List, Heading, Text } from "@webiny/admin-ui";
+import { Heading, List, Text } from "@webiny/admin-ui";
 import { LayoutNodeRenderer, renderTabIcon } from "../../../features/formModel/FormView.js";
-export const VerticalTabsRenderer = observer(function VerticalTabsRenderer({
-  node
-}) {
-  const activeTab = node.tabs.find(t => t.id === node.activeTabId);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-row flex-1 min-h-full shrink-0"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col",
-    style: {
-      width: 300
-    }
-  }, /*#__PURE__*/React.createElement(List, null, node.tabs.map(tab => /*#__PURE__*/React.createElement(List.Item, {
-    key: tab.id,
-    className: "fill-neutral-strong",
-    icon: renderTabIcon(tab.icon),
-    title: tab.label,
-    description: tab.description,
-    activated: tab.id === node.activeTabId,
-    onClick: () => node.setActiveTab(tab.id)
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col flex-1 px-md border-l border-neutral-dimmed"
-  }, activeTab && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "p-md"
-  }, /*#__PURE__*/React.createElement(Heading, {
-    level: 4,
-    className: "text-neutral-primary"
-  }, activeTab.label), activeTab.description && /*#__PURE__*/React.createElement(Text, {
-    size: "sm"
-  }, activeTab.description)), /*#__PURE__*/React.createElement("div", {
-    className: "p-md flex flex-col gap-4"
-  }, activeTab.layout.map((childNode, index) => /*#__PURE__*/React.createElement(LayoutNodeRenderer, {
-    key: index,
-    node: childNode
-  }))))));
+const VerticalTabsRenderer_VerticalTabsRenderer = observer(function({ node }) {
+    const activeTab = node.tabs.find((t)=>t.id === node.activeTabId);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-row flex-1 min-h-full shrink-0"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col",
+        style: {
+            width: 300
+        }
+    }, /*#__PURE__*/ react.createElement(List, null, node.tabs.map((tab)=>/*#__PURE__*/ react.createElement(List.Item, {
+            key: tab.id,
+            className: "fill-neutral-strong",
+            icon: renderTabIcon(tab.icon),
+            title: tab.label,
+            description: tab.description,
+            activated: tab.id === node.activeTabId,
+            onClick: ()=>node.setActiveTab(tab.id)
+        })))), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col flex-1 px-md border-l border-neutral-dimmed"
+    }, activeTab && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", {
+        className: "p-md"
+    }, /*#__PURE__*/ react.createElement(Heading, {
+        level: 4,
+        className: "text-neutral-primary"
+    }, activeTab.label), activeTab.description && /*#__PURE__*/ react.createElement(Text, {
+        size: "sm"
+    }, activeTab.description)), /*#__PURE__*/ react.createElement("div", {
+        className: "p-md flex flex-col gap-4"
+    }, activeTab.layout.map((childNode, index)=>/*#__PURE__*/ react.createElement(LayoutNodeRenderer, {
+            key: index,
+            node: childNode
+        }))))));
 });
+export { VerticalTabsRenderer_VerticalTabsRenderer as VerticalTabsRenderer };
 
 //# sourceMappingURL=VerticalTabsRenderer.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","observer","List","Heading","Text","LayoutNodeRenderer","renderTabIcon","VerticalTabsRenderer","node","activeTab","tabs","find","t","id","activeTabId","createElement","className","style","width","map","tab","Item","key","icon","title","label","description","activated","onClick","setActiveTab","Fragment","level","size","layout","childNode","index"],"sources":["VerticalTabsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { List, Heading, Text } from \"@webiny/admin-ui\";\nimport { LayoutNodeRenderer, renderTabIcon } from \"~/features/formModel/FormView.js\";\nimport type { TabsNodeRendererProps } from \"~/features/formModel/FormView.js\";\n\nexport const VerticalTabsRenderer = observer(function VerticalTabsRenderer({\n    node\n}: TabsNodeRendererProps) {\n    const activeTab = node.tabs.find(t => t.id === node.activeTabId);\n\n    return (\n        <div className={\"flex flex-row flex-1 min-h-full shrink-0\"}>\n            <div className={\"flex flex-col\"} style={{ width: 300 }}>\n                <List>\n                    {node.tabs.map(tab => (\n                        <List.Item\n                            key={tab.id}\n                            className={\"fill-neutral-strong\"}\n                            icon={renderTabIcon(tab.icon)}\n                            title={tab.label}\n                            description={tab.description}\n                            activated={tab.id === node.activeTabId}\n                            onClick={() => node.setActiveTab(tab.id)}\n                        />\n                    ))}\n                </List>\n            </div>\n            <div className={\"flex flex-col flex-1 px-md border-l border-neutral-dimmed\"}>\n                {activeTab && (\n                    <>\n                        <div className={\"p-md\"}>\n                            <Heading level={4} className={\"text-neutral-primary\"}>\n                                {activeTab.label}\n                            </Heading>\n                            {activeTab.description && (\n                                <Text size={\"sm\"}>{activeTab.description}</Text>\n                            )}\n                        </div>\n                        <div className={\"p-md flex flex-col gap-4\"}>\n                            {activeTab.layout.map((childNode, index) => (\n                                <LayoutNodeRenderer key={index} node={childNode} />\n                            ))}\n                        </div>\n                    </>\n                )}\n            </div>\n        </div>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,IAAI,EAAEC,OAAO,EAAEC,IAAI,QAAQ,kBAAkB;AACtD,SAASC,kBAAkB,EAAEC,aAAa;AAG1C,OAAO,MAAMC,oBAAoB,GAAGN,QAAQ,CAAC,SAASM,oBAAoBA,CAAC;EACvEC;AACmB,CAAC,EAAE;EACtB,MAAMC,SAAS,GAAGD,IAAI,CAACE,IAAI,CAACC,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACC,EAAE,KAAKL,IAAI,CAACM,WAAW,CAAC;EAEhE,oBACId,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAE;EAA2C,gBACvDhB,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAE,eAAgB;IAACC,KAAK,EAAE;MAAEC,KAAK,EAAE;IAAI;EAAE,gBACnDlB,KAAA,CAAAe,aAAA,CAACb,IAAI,QACAM,IAAI,CAACE,IAAI,CAACS,GAAG,CAACC,GAAG,iBACdpB,KAAA,CAAAe,aAAA,CAACb,IAAI,CAACmB,IAAI;IACNC,GAAG,EAAEF,GAAG,CAACP,EAAG;IACZG,SAAS,EAAE,qBAAsB;IACjCO,IAAI,EAAEjB,aAAa,CAACc,GAAG,CAACG,IAAI,CAAE;IAC9BC,KAAK,EAAEJ,GAAG,CAACK,KAAM;IACjBC,WAAW,EAAEN,GAAG,CAACM,WAAY;IAC7BC,SAAS,EAAEP,GAAG,CAACP,EAAE,KAAKL,IAAI,CAACM,WAAY;IACvCc,OAAO,EAAEA,CAAA,KAAMpB,IAAI,CAACqB,YAAY,CAACT,GAAG,CAACP,EAAE;EAAE,CAC5C,CACJ,CACC,CACL,CAAC,eACNb,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAE;EAA4D,GACvEP,SAAS,iBACNT,KAAA,CAAAe,aAAA,CAAAf,KAAA,CAAA8B,QAAA,qBACI9B,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAE;EAAO,gBACnBhB,KAAA,CAAAe,aAAA,CAACZ,OAAO;IAAC4B,KAAK,EAAE,CAAE;IAACf,SAAS,EAAE;EAAuB,GAChDP,SAAS,CAACgB,KACN,CAAC,EACThB,SAAS,CAACiB,WAAW,iBAClB1B,KAAA,CAAAe,aAAA,CAACX,IAAI;IAAC4B,IAAI,EAAE;EAAK,GAAEvB,SAAS,CAACiB,WAAkB,CAElD,CAAC,eACN1B,KAAA,CAAAe,aAAA;IAAKC,SAAS,EAAE;EAA2B,GACtCP,SAAS,CAACwB,MAAM,CAACd,GAAG,CAAC,CAACe,SAAS,EAAEC,KAAK,kBACnCnC,KAAA,CAAAe,aAAA,CAACV,kBAAkB;IAACiB,GAAG,EAAEa,KAAM;IAAC3B,IAAI,EAAE0B;EAAU,CAAE,CACrD,CACA,CACP,CAEL,CACJ,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"base/Base/FieldRenderers/VerticalTabsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/VerticalTabsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { List, Heading, Text } from \"@webiny/admin-ui\";\nimport { LayoutNodeRenderer, renderTabIcon } from \"~/features/formModel/FormView.js\";\nimport type { TabsNodeRendererProps } from \"~/features/formModel/FormView.js\";\n\nexport const VerticalTabsRenderer = observer(function VerticalTabsRenderer({\n    node\n}: TabsNodeRendererProps) {\n    const activeTab = node.tabs.find(t => t.id === node.activeTabId);\n\n    return (\n        <div className={\"flex flex-row flex-1 min-h-full shrink-0\"}>\n            <div className={\"flex flex-col\"} style={{ width: 300 }}>\n                <List>\n                    {node.tabs.map(tab => (\n                        <List.Item\n                            key={tab.id}\n                            className={\"fill-neutral-strong\"}\n                            icon={renderTabIcon(tab.icon)}\n                            title={tab.label}\n                            description={tab.description}\n                            activated={tab.id === node.activeTabId}\n                            onClick={() => node.setActiveTab(tab.id)}\n                        />\n                    ))}\n                </List>\n            </div>\n            <div className={\"flex flex-col flex-1 px-md border-l border-neutral-dimmed\"}>\n                {activeTab && (\n                    <>\n                        <div className={\"p-md\"}>\n                            <Heading level={4} className={\"text-neutral-primary\"}>\n                                {activeTab.label}\n                            </Heading>\n                            {activeTab.description && (\n                                <Text size={\"sm\"}>{activeTab.description}</Text>\n                            )}\n                        </div>\n                        <div className={\"p-md flex flex-col gap-4\"}>\n                            {activeTab.layout.map((childNode, index) => (\n                                <LayoutNodeRenderer key={index} node={childNode} />\n                            ))}\n                        </div>\n                    </>\n                )}\n            </div>\n        </div>\n    );\n});\n"],"names":["VerticalTabsRenderer","observer","node","activeTab","t","List","tab","renderTabIcon","Heading","Text","childNode","index","LayoutNodeRenderer"],"mappings":";;;;AAMO,MAAMA,4CAAuBC,SAAS,SAA8B,EACvEC,IAAI,EACgB;IACpB,MAAMC,YAAYD,KAAK,IAAI,CAAC,IAAI,CAACE,CAAAA,IAAKA,EAAE,EAAE,KAAKF,KAAK,WAAW;IAE/D,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;QAAiB,OAAO;YAAE,OAAO;QAAI;qBACjD,oBAACG,MAAIA,MACAH,KAAK,IAAI,CAAC,GAAG,CAACI,CAAAA,MAAAA,WAAAA,GACX,oBAACD,KAAK,IAAI;YACN,KAAKC,IAAI,EAAE;YACX,WAAW;YACX,MAAMC,cAAcD,IAAI,IAAI;YAC5B,OAAOA,IAAI,KAAK;YAChB,aAAaA,IAAI,WAAW;YAC5B,WAAWA,IAAI,EAAE,KAAKJ,KAAK,WAAW;YACtC,SAAS,IAAMA,KAAK,YAAY,CAACI,IAAI,EAAE;6BAKvD,oBAAC;QAAI,WAAW;OACXH,aAAa,WAAbA,GACG,wDACI,oBAAC;QAAI,WAAW;qBACZ,oBAACK,SAAOA;QAAC,OAAO;QAAG,WAAW;OACzBL,UAAU,KAAK,GAEnBA,UAAU,WAAW,IAAI,WAAJ,GAClB,oBAACM,MAAIA;QAAC,MAAM;OAAON,UAAU,WAAW,kBAGhD,oBAAC;QAAI,WAAW;OACXA,UAAU,MAAM,CAAC,GAAG,CAAC,CAACO,WAAWC,QAAAA,WAAAA,GAC9B,oBAACC,oBAAkBA;YAAC,KAAKD;YAAO,MAAMD;;AAQtE"}

package/base/Base/LexicalPreset.js

@@ -1,67 +1,63 @@
-import React from "react";
+import react from "react";
 import { LexicalEditorConfig } from "@webiny/lexical-editor/components/LexicalEditorConfig/LexicalEditorConfig.js";
 import { FloatingLinkEditorPlugin } from "@webiny/lexical-editor";
 import { AdminConfig } from "../../config/AdminConfig.js";
 import { LexicalTheme } from "../../config/AdminConfig/LexicalTheme.js";
 import { LexicalLinkForm } from "../../components/index.js";
-const {
-  Color,
-  Typography
-} = LexicalTheme;
-export const LexicalPreset = () => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AdminConfig, null, /*#__PURE__*/React.createElement(Color, {
-    id: "color1",
-    label: "Primary color",
-    value: "var(--wa-theme-color1)"
-  }), /*#__PURE__*/React.createElement(Color, {
-    id: "color2",
-    label: "Secondary color",
-    value: "var(--wa-theme-color2)"
-  }), /*#__PURE__*/React.createElement(Color, {
-    id: "color3",
-    label: "Regular color",
-    value: "var(--wa-theme-color3)"
-  }), /*#__PURE__*/React.createElement(Typography.Heading, {
-    id: "heading1",
-    label: "Heading 1",
-    tag: "h1",
-    className: "wa-heading-1"
-  }), /*#__PURE__*/React.createElement(Typography.Heading, {
-    id: "heading2",
-    label: "Heading 2",
-    tag: "h2",
-    className: "wa-heading-2"
-  }), /*#__PURE__*/React.createElement(Typography.Heading, {
-    id: "heading3",
-    label: "Heading 3",
-    tag: "h3",
-    className: "wa-heading-3"
-  }), /*#__PURE__*/React.createElement(Typography.Paragraph, {
-    id: "paragraph1",
-    label: "Paragraph",
-    tag: "p",
-    className: "wa-paragraph-1"
-  }), /*#__PURE__*/React.createElement(Typography.Quote, {
-    id: "quote",
-    label: "Quote",
-    tag: "blockquote",
-    className: "wa-blockquote-1"
-  }), /*#__PURE__*/React.createElement(Typography.List, {
-    id: "list1",
-    label: "Unordered list",
-    tag: "ul",
-    className: "wa-unordered-list-1"
-  }), /*#__PURE__*/React.createElement(Typography.List, {
-    id: "list2",
-    label: "Ordered list",
-    tag: "ol",
-    className: "wa-ordered-list-1"
-  })), /*#__PURE__*/React.createElement(LexicalEditorConfig, null, /*#__PURE__*/React.createElement(LexicalEditorConfig.Plugin, {
-    name: "floatingLinkEditor",
-    element: /*#__PURE__*/React.createElement(FloatingLinkEditorPlugin, {
-      LinkForm: LexicalLinkForm
-    })
-  })));
-};
+const { Color: Color, Typography: Typography } = LexicalTheme;
+const LexicalPreset = ()=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(AdminConfig, null, /*#__PURE__*/ react.createElement(Color, {
+        id: "color1",
+        label: "Primary color",
+        value: "var(--wa-theme-color1)"
+    }), /*#__PURE__*/ react.createElement(Color, {
+        id: "color2",
+        label: "Secondary color",
+        value: "var(--wa-theme-color2)"
+    }), /*#__PURE__*/ react.createElement(Color, {
+        id: "color3",
+        label: "Regular color",
+        value: "var(--wa-theme-color3)"
+    }), /*#__PURE__*/ react.createElement(Typography.Heading, {
+        id: "heading1",
+        label: "Heading 1",
+        tag: "h1",
+        className: "wa-heading-1"
+    }), /*#__PURE__*/ react.createElement(Typography.Heading, {
+        id: "heading2",
+        label: "Heading 2",
+        tag: "h2",
+        className: "wa-heading-2"
+    }), /*#__PURE__*/ react.createElement(Typography.Heading, {
+        id: "heading3",
+        label: "Heading 3",
+        tag: "h3",
+        className: "wa-heading-3"
+    }), /*#__PURE__*/ react.createElement(Typography.Paragraph, {
+        id: "paragraph1",
+        label: "Paragraph",
+        tag: "p",
+        className: "wa-paragraph-1"
+    }), /*#__PURE__*/ react.createElement(Typography.Quote, {
+        id: "quote",
+        label: "Quote",
+        tag: "blockquote",
+        className: "wa-blockquote-1"
+    }), /*#__PURE__*/ react.createElement(Typography.List, {
+        id: "list1",
+        label: "Unordered list",
+        tag: "ul",
+        className: "wa-unordered-list-1"
+    }), /*#__PURE__*/ react.createElement(Typography.List, {
+        id: "list2",
+        label: "Ordered list",
+        tag: "ol",
+        className: "wa-ordered-list-1"
+    })), /*#__PURE__*/ react.createElement(LexicalEditorConfig, null, /*#__PURE__*/ react.createElement(LexicalEditorConfig.Plugin, {
+        name: "floatingLinkEditor",
+        element: /*#__PURE__*/ react.createElement(FloatingLinkEditorPlugin, {
+            LinkForm: LexicalLinkForm
+        })
+    })));
+export { LexicalPreset };
 
 //# sourceMappingURL=LexicalPreset.js.map