@webiny/app-admin 6.3.0-beta.2 → 6.3.0-beta.4

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

@@ -1 +1 @@
-{"version":3,"names":["React","observer","Accordion","Button","IconButton","ReactComponent","DeleteIcon","ArrowUp","ArrowDown","useFormViewRenderers","resolveItemTitle","isObjectFieldVM","field","type","ChildFields","fields","fieldRenderers","createElement","className","map","childField","Renderer","renderer","undefined","key","name","ListItemRenderer","item","index","total","label","itemTitle","disabled","actions","Fragment","icon","onClick","e","stopPropagation","moveDown","variant","moveUp","Item","Action","Separator","remove","background","openClosedIndicatorPosition","title","defaultOpen","AddItemButton","onAdd","text","size"],"sources":["ObjectFieldComponents.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Button, IconButton } from \"@webiny/admin-ui\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as ArrowUp } from \"@webiny/icons/arrow_upward.svg\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/arrow_downward.svg\";\nimport type { IFieldVM, IObjectFieldVM, IObjectFieldItemVM } from \"~/features/formModel/index.js\";\nimport { useFormViewRenderers } from \"~/features/formModel/FormView.js\";\nimport { resolveItemTitle } from \"./resolveItemTitle.js\";\n\nexport const isObjectFieldVM = (field: IFieldVM): field is IObjectFieldVM => {\n    return field.type === \"object\";\n};\n\nexport const ChildFields = observer(({ fields }: { fields: IFieldVM[] }) => {\n    const { fieldRenderers } = useFormViewRenderers();\n\n    return (\n        <div className={\"flex flex-col gap-4 p-sm\"}>\n            {fields.map(childField => {\n                const Renderer = childField.renderer\n                    ? fieldRenderers[childField.renderer]\n                    : undefined;\n\n                if (!Renderer) {\n                    return null;\n                }\n\n                return <Renderer key={childField.name} field={childField} />;\n            })}\n        </div>\n    );\n});\n\nexport interface ListItemRendererProps {\n    item: IObjectFieldItemVM;\n    index: number;\n    total: number;\n    label?: string;\n    itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);\n    disabled: boolean;\n}\n\nexport const ListItemRenderer = observer(\n    ({ item, index, total, label, itemTitle, disabled }: ListItemRendererProps) => {\n        const actions = (\n            <>\n                <IconButton\n                    icon={<ArrowDown />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        item.moveDown();\n                    }}\n                    variant=\"ghost\"\n                    disabled={index === total - 1}\n                />\n                <IconButton\n                    icon={<ArrowUp />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        item.moveUp();\n                    }}\n                    variant=\"ghost\"\n                    disabled={index === 0}\n                />\n                <Accordion.Item.Action.Separator />\n                <IconButton\n                    icon={<DeleteIcon />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        item.remove();\n                    }}\n                    variant=\"ghost\"\n                />\n            </>\n        );\n\n        return (\n            <Accordion\n                background={\"base\"}\n                variant={\"container\"}\n                openClosedIndicatorPosition={\"left\"}\n            >\n                <Accordion.Item\n                    title={resolveItemTitle(item, index, label, itemTitle)}\n                    actions={disabled ? null : actions}\n                    defaultOpen={false}\n                >\n                    <ChildFields fields={item.fields} />\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n\nexport interface AddItemButtonProps {\n    label?: string;\n    disabled: boolean;\n    onAdd: () => void;\n}\n\nexport const AddItemButton = ({ label, disabled, onAdd }: AddItemButtonProps) => {\n    return (\n        <div>\n            <Button\n                text={label || \"Add Item\"}\n                variant={\"secondary\"}\n                size={\"sm\"}\n                onClick={onAdd}\n                disabled={disabled}\n            />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,SAAS,EAAEC,MAAM,EAAEC,UAAU,QAAQ,kBAAkB;AAChE,SAASC,cAAc,IAAIC,UAAU,QAAQ,kCAAkC;AAC/E,SAASD,cAAc,IAAIE,OAAO,QAAQ,gCAAgC;AAC1E,SAASF,cAAc,IAAIG,SAAS,QAAQ,kCAAkC;AAE9E,SAASC,oBAAoB;AAC7B,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,eAAe,GAAIC,KAAe,IAA8B;EACzE,OAAOA,KAAK,CAACC,IAAI,KAAK,QAAQ;AAClC,CAAC;AAED,OAAO,MAAMC,WAAW,GAAGb,QAAQ,CAAC,CAAC;EAAEc;AAA+B,CAAC,KAAK;EACxE,MAAM;IAAEC;EAAe,CAAC,GAAGP,oBAAoB,CAAC,CAAC;EAEjD,oBACIT,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAE;EAA2B,GACtCH,MAAM,CAACI,GAAG,CAACC,UAAU,IAAI;IACtB,MAAMC,QAAQ,GAAGD,UAAU,CAACE,QAAQ,GAC9BN,cAAc,CAACI,UAAU,CAACE,QAAQ,CAAC,GACnCC,SAAS;IAEf,IAAI,CAACF,QAAQ,EAAE;MACX,OAAO,IAAI;IACf;IAEA,oBAAOrB,KAAA,CAAAiB,aAAA,CAACI,QAAQ;MAACG,GAAG,EAAEJ,UAAU,CAACK,IAAK;MAACb,KAAK,EAAEQ;IAAW,CAAE,CAAC;EAChE,CAAC,CACA,CAAC;AAEd,CAAC,CAAC;AAWF,OAAO,MAAMM,gBAAgB,GAAGzB,QAAQ,CACpC,CAAC;EAAE0B,IAAI;EAAEC,KAAK;EAAEC,KAAK;EAAEC,KAAK;EAAEC,SAAS;EAAEC;AAAgC,CAAC,KAAK;EAC3E,MAAMC,OAAO,gBACTjC,KAAA,CAAAiB,aAAA,CAAAjB,KAAA,CAAAkC,QAAA,qBACIlC,KAAA,CAAAiB,aAAA,CAACb,UAAU;IACP+B,IAAI,eAAEnC,KAAA,CAAAiB,aAAA,CAACT,SAAS,MAAE,CAAE;IACpB4B,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBX,IAAI,CAACY,QAAQ,CAAC,CAAC;IACnB,CAAE;IACFC,OAAO,EAAC,OAAO;IACfR,QAAQ,EAAEJ,KAAK,KAAKC,KAAK,GAAG;EAAE,CACjC,CAAC,eACF7B,KAAA,CAAAiB,aAAA,CAACb,UAAU;IACP+B,IAAI,eAAEnC,KAAA,CAAAiB,aAAA,CAACV,OAAO,MAAE,CAAE;IAClB6B,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBX,IAAI,CAACc,MAAM,CAAC,CAAC;IACjB,CAAE;IACFD,OAAO,EAAC,OAAO;IACfR,QAAQ,EAAEJ,KAAK,KAAK;EAAE,CACzB,CAAC,eACF5B,KAAA,CAAAiB,aAAA,CAACf,SAAS,CAACwC,IAAI,CAACC,MAAM,CAACC,SAAS,MAAE,CAAC,eACnC5C,KAAA,CAAAiB,aAAA,CAACb,UAAU;IACP+B,IAAI,eAAEnC,KAAA,CAAAiB,aAAA,CAACX,UAAU,MAAE,CAAE;IACrB8B,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBX,IAAI,CAACkB,MAAM,CAAC,CAAC;IACjB,CAAE;IACFL,OAAO,EAAC;EAAO,CAClB,CACH,CACL;EAED,oBACIxC,KAAA,CAAAiB,aAAA,CAACf,SAAS;IACN4C,UAAU,EAAE,MAAO;IACnBN,OAAO,EAAE,WAAY;IACrBO,2BAA2B,EAAE;EAAO,gBAEpC/C,KAAA,CAAAiB,aAAA,CAACf,SAAS,CAACwC,IAAI;IACXM,KAAK,EAAEtC,gBAAgB,CAACiB,IAAI,EAAEC,KAAK,EAAEE,KAAK,EAAEC,SAAS,CAAE;IACvDE,OAAO,EAAED,QAAQ,GAAG,IAAI,GAAGC,OAAQ;IACnCgB,WAAW,EAAE;EAAM,gBAEnBjD,KAAA,CAAAiB,aAAA,CAACH,WAAW;IAACC,MAAM,EAAEY,IAAI,CAACZ;EAAO,CAAE,CACvB,CACT,CAAC;AAEpB,CACJ,CAAC;AAQD,OAAO,MAAMmC,aAAa,GAAGA,CAAC;EAAEpB,KAAK;EAAEE,QAAQ;EAAEmB;AAA0B,CAAC,KAAK;EAC7E,oBACInD,KAAA,CAAAiB,aAAA,2BACIjB,KAAA,CAAAiB,aAAA,CAACd,MAAM;IACHiD,IAAI,EAAEtB,KAAK,IAAI,UAAW;IAC1BU,OAAO,EAAE,WAAY;IACrBa,IAAI,EAAE,IAAK;IACXjB,OAAO,EAAEe,KAAM;IACfnB,QAAQ,EAAEA;EAAS,CACtB,CACA,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"names":["React","observer","Accordion","Button","IconButton","ReactComponent","DeleteIcon","ArrowUp","ArrowDown","LayoutNodeRenderer","resolveItemTitle","isObjectFieldVM","field","type","NestedLayout","layout","createElement","className","map","node","index","key","ListItemRenderer","item","total","label","itemTitle","disabled","actions","Fragment","icon","onClick","e","stopPropagation","moveDown","variant","moveUp","Item","Action","Separator","remove","background","openClosedIndicatorPosition","title","defaultOpen","AddItemButton","onAdd","text","size"],"sources":["ObjectFieldComponents.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Button, IconButton } from \"@webiny/admin-ui\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as ArrowUp } from \"@webiny/icons/arrow_upward.svg\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/arrow_downward.svg\";\nimport type {\n    IFieldVM,\n    IObjectFieldVM,\n    IObjectFieldItemVM,\n    LayoutNodeVM\n} from \"~/features/formModel/index.js\";\nimport { LayoutNodeRenderer } from \"~/features/formModel/FormView.js\";\nimport { resolveItemTitle } from \"./resolveItemTitle.js\";\n\nexport const isObjectFieldVM = (field: IFieldVM): field is IObjectFieldVM => {\n    return field.type === \"object\";\n};\n\n/**\n * Walks a resolved layout sub-tree. Used by dynamic-zone renderers to render\n * a templated object's children via per-template layouts (Phase 8c).\n */\nexport const NestedLayout = observer(({ layout }: { layout: LayoutNodeVM[] }) => {\n    return (\n        <div className={\"flex flex-col gap-md\"}>\n            {layout.map((node, index) => (\n                <LayoutNodeRenderer key={index} node={node} />\n            ))}\n        </div>\n    );\n});\n\nexport interface ListItemRendererProps {\n    item: IObjectFieldItemVM;\n    index: number;\n    total: number;\n    label?: string;\n    itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);\n    disabled: boolean;\n}\n\nexport const ListItemRenderer = observer(\n    ({ item, index, total, label, itemTitle, disabled }: ListItemRendererProps) => {\n        const actions = (\n            <>\n                <IconButton\n                    icon={<ArrowDown />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        item.moveDown();\n                    }}\n                    variant=\"ghost\"\n                    disabled={index === total - 1}\n                />\n                <IconButton\n                    icon={<ArrowUp />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        item.moveUp();\n                    }}\n                    variant=\"ghost\"\n                    disabled={index === 0}\n                />\n                <Accordion.Item.Action.Separator />\n                <IconButton\n                    icon={<DeleteIcon />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        item.remove();\n                    }}\n                    variant=\"ghost\"\n                />\n            </>\n        );\n\n        return (\n            <Accordion\n                background={\"base\"}\n                variant={\"container\"}\n                openClosedIndicatorPosition={\"left\"}\n            >\n                <Accordion.Item\n                    title={resolveItemTitle(item, index, label, itemTitle)}\n                    actions={disabled ? null : actions}\n                    defaultOpen={false}\n                >\n                    <NestedLayout layout={item.layout} />\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n\nexport interface AddItemButtonProps {\n    label?: string;\n    disabled: boolean;\n    onAdd: () => void;\n}\n\nexport const AddItemButton = ({ label, disabled, onAdd }: AddItemButtonProps) => {\n    return (\n        <div>\n            <Button\n                text={label || \"Add Item\"}\n                variant={\"secondary\"}\n                size={\"sm\"}\n                onClick={onAdd}\n                disabled={disabled}\n            />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,SAAS,EAAEC,MAAM,EAAEC,UAAU,QAAQ,kBAAkB;AAChE,SAASC,cAAc,IAAIC,UAAU,QAAQ,kCAAkC;AAC/E,SAASD,cAAc,IAAIE,OAAO,QAAQ,gCAAgC;AAC1E,SAASF,cAAc,IAAIG,SAAS,QAAQ,kCAAkC;AAO9E,SAASC,kBAAkB;AAC3B,SAASC,gBAAgB;AAEzB,OAAO,MAAMC,eAAe,GAAIC,KAAe,IAA8B;EACzE,OAAOA,KAAK,CAACC,IAAI,KAAK,QAAQ;AAClC,CAAC;;AAED;AACA;AACA;AACA;AACA,OAAO,MAAMC,YAAY,GAAGb,QAAQ,CAAC,CAAC;EAAEc;AAAmC,CAAC,KAAK;EAC7E,oBACIf,KAAA,CAAAgB,aAAA;IAAKC,SAAS,EAAE;EAAuB,GAClCF,MAAM,CAACG,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBACpBpB,KAAA,CAAAgB,aAAA,CAACP,kBAAkB;IAACY,GAAG,EAAED,KAAM;IAACD,IAAI,EAAEA;EAAK,CAAE,CAChD,CACA,CAAC;AAEd,CAAC,CAAC;AAWF,OAAO,MAAMG,gBAAgB,GAAGrB,QAAQ,CACpC,CAAC;EAAEsB,IAAI;EAAEH,KAAK;EAAEI,KAAK;EAAEC,KAAK;EAAEC,SAAS;EAAEC;AAAgC,CAAC,KAAK;EAC3E,MAAMC,OAAO,gBACT5B,KAAA,CAAAgB,aAAA,CAAAhB,KAAA,CAAA6B,QAAA,qBACI7B,KAAA,CAAAgB,aAAA,CAACZ,UAAU;IACP0B,IAAI,eAAE9B,KAAA,CAAAgB,aAAA,CAACR,SAAS,MAAE,CAAE;IACpBuB,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBV,IAAI,CAACW,QAAQ,CAAC,CAAC;IACnB,CAAE;IACFC,OAAO,EAAC,OAAO;IACfR,QAAQ,EAAEP,KAAK,KAAKI,KAAK,GAAG;EAAE,CACjC,CAAC,eACFxB,KAAA,CAAAgB,aAAA,CAACZ,UAAU;IACP0B,IAAI,eAAE9B,KAAA,CAAAgB,aAAA,CAACT,OAAO,MAAE,CAAE;IAClBwB,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBV,IAAI,CAACa,MAAM,CAAC,CAAC;IACjB,CAAE;IACFD,OAAO,EAAC,OAAO;IACfR,QAAQ,EAAEP,KAAK,KAAK;EAAE,CACzB,CAAC,eACFpB,KAAA,CAAAgB,aAAA,CAACd,SAAS,CAACmC,IAAI,CAACC,MAAM,CAACC,SAAS,MAAE,CAAC,eACnCvC,KAAA,CAAAgB,aAAA,CAACZ,UAAU;IACP0B,IAAI,eAAE9B,KAAA,CAAAgB,aAAA,CAACV,UAAU,MAAE,CAAE;IACrByB,OAAO,EAAEC,CAAC,IAAI;MACVA,CAAC,CAACC,eAAe,CAAC,CAAC;MACnBV,IAAI,CAACiB,MAAM,CAAC,CAAC;IACjB,CAAE;IACFL,OAAO,EAAC;EAAO,CAClB,CACH,CACL;EAED,oBACInC,KAAA,CAAAgB,aAAA,CAACd,SAAS;IACNuC,UAAU,EAAE,MAAO;IACnBN,OAAO,EAAE,WAAY;IACrBO,2BAA2B,EAAE;EAAO,gBAEpC1C,KAAA,CAAAgB,aAAA,CAACd,SAAS,CAACmC,IAAI;IACXM,KAAK,EAAEjC,gBAAgB,CAACa,IAAI,EAAEH,KAAK,EAAEK,KAAK,EAAEC,SAAS,CAAE;IACvDE,OAAO,EAAED,QAAQ,GAAG,IAAI,GAAGC,OAAQ;IACnCgB,WAAW,EAAE;EAAM,gBAEnB5C,KAAA,CAAAgB,aAAA,CAACF,YAAY;IAACC,MAAM,EAAEQ,IAAI,CAACR;EAAO,CAAE,CACxB,CACT,CAAC;AAEpB,CACJ,CAAC;AAQD,OAAO,MAAM8B,aAAa,GAAGA,CAAC;EAAEpB,KAAK;EAAEE,QAAQ;EAAEmB;AAA0B,CAAC,KAAK;EAC7E,oBACI9C,KAAA,CAAAgB,aAAA,2BACIhB,KAAA,CAAAgB,aAAA,CAACb,MAAM;IACH4C,IAAI,EAAEtB,KAAK,IAAI,UAAW;IAC1BU,OAAO,EAAE,WAAY;IACrBa,IAAI,EAAE,IAAK;IACXjB,OAAO,EAAEe,KAAM;IACfnB,QAAQ,EAAEA;EAAS,CACtB,CACA,CAAC;AAEd,CAAC","ignoreList":[]}

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

@@ -1,17 +1,14 @@
 import React from "react";
-import type { IFieldVM } from "../../../../features/formModel/index.js";
 declare module "../../../../features/formModel/abstractions.js" {
     interface IFieldRendererRegistry {
-        object: {
+        objectAccordionSingle: {
             fieldType: "object";
             settings?: {
-                itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);
+                open?: boolean;
             };
         };
     }
 }
-export declare const ObjectRenderer: (({ field }: {
-    field: IFieldVM;
-}) => React.JSX.Element | null) & {
-    displayName: string;
-};
+export declare const ObjectRenderer: React.ComponentType<{
+    field: import("../../../../index.js").IFieldVM;
+}>;

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

@@ -1,23 +1,8 @@
 import React from "react";
-import { observer } from "mobx-react-lite";
 import { Accordion } from "@webiny/admin-ui";
-import { isObjectFieldVM, ChildFields, ListItemRenderer, AddItemButton } from "./ObjectFieldComponents.js";
-export const ObjectRenderer = observer(({
-  field
-}) => {
-  if (!isObjectFieldVM(field)) {
-    return null;
-  }
-  if (field.isList) {
-    return /*#__PURE__*/React.createElement(ListObjectRenderer, {
-      field: field
-    });
-  }
-  return /*#__PURE__*/React.createElement(SingleObjectRenderer, {
-    field: field
-  });
-});
-const SingleObjectRenderer = observer(({
+import { createObjectFieldRenderer } from "../../../../features/formModel/createFieldRenderer.js";
+import { NestedLayout } from "./ObjectFieldComponents.js";
+export const ObjectRenderer = createObjectFieldRenderer(({
   field
 }) => {
   return /*#__PURE__*/React.createElement(Accordion, {
@@ -25,39 +10,11 @@ const SingleObjectRenderer = observer(({
     variant: "container"
   }, /*#__PURE__*/React.createElement(Accordion.Item, {
     title: field.label,
-    defaultOpen: true
-  }, /*#__PURE__*/React.createElement(ChildFields, {
-    fields: field.fields
+    defaultOpen: true,
+    className: "pl-sm"
+  }, /*#__PURE__*/React.createElement(NestedLayout, {
+    layout: field.layout
   })));
 });
-const ListObjectRenderer = observer(({
-  field
-}) => {
-  const label = `${field.label || ""} ${field.items.length ? `(${field.items.length})` : ""}`;
-  const settings = field.rendererSettings;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col gap-sm"
-  }, /*#__PURE__*/React.createElement(Accordion, {
-    background: "base",
-    variant: "container"
-  }, /*#__PURE__*/React.createElement(Accordion.Item, {
-    title: label,
-    defaultOpen: true
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col gap-sm"
-  }, field.items.map((item, index) => /*#__PURE__*/React.createElement(ListItemRenderer, {
-    key: item.key,
-    item: item,
-    index: index,
-    total: field.items.length,
-    label: field.label,
-    itemTitle: settings?.itemTitle,
-    disabled: field.disabled
-  }))))), /*#__PURE__*/React.createElement(AddItemButton, {
-    label: `Add ${field.label || "Item"}`,
-    disabled: field.disabled,
-    onAdd: () => field.addItem()
-  }));
-});
 
 //# sourceMappingURL=ObjectRenderer.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","observer","Accordion","isObjectFieldVM","ChildFields","ListItemRenderer","AddItemButton","ObjectRenderer","field","isList","createElement","ListObjectRenderer","SingleObjectRenderer","background","variant","Item","title","label","defaultOpen","fields","items","length","settings","rendererSettings","className","map","item","index","key","total","itemTitle","disabled","onAdd","addItem"],"sources":["ObjectRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport type {\n    IFieldVM,\n    IObjectFieldVM,\n    IFieldRendererRegistry\n} from \"~/features/formModel/index.js\";\nimport {\n    isObjectFieldVM,\n    ChildFields,\n    ListItemRenderer,\n    AddItemButton\n} from \"./ObjectFieldComponents.js\";\n\ndeclare module \"../../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        object: {\n            fieldType: \"object\";\n            settings?: {\n                itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);\n            };\n        };\n    }\n}\n\ntype ObjectSettings = NonNullable<IFieldRendererRegistry[\"object\"][\"settings\"]>;\n\nexport const ObjectRenderer = observer(({ field }: { field: IFieldVM }) => {\n    if (!isObjectFieldVM(field)) {\n        return null;\n    }\n\n    if (field.isList) {\n        return <ListObjectRenderer field={field} />;\n    }\n\n    return <SingleObjectRenderer field={field} />;\n});\n\nconst SingleObjectRenderer = observer(({ field }: { field: IObjectFieldVM }) => {\n    return (\n        <Accordion background={\"base\"} variant={\"container\"}>\n            <Accordion.Item title={field.label} defaultOpen={true}>\n                <ChildFields fields={field.fields} />\n            </Accordion.Item>\n        </Accordion>\n    );\n});\n\nconst ListObjectRenderer = observer(({ field }: { field: IObjectFieldVM }) => {\n    const label = `${field.label || \"\"} ${field.items.length ? `(${field.items.length})` : \"\"}`;\n    const settings = field.rendererSettings as ObjectSettings | undefined;\n\n    return (\n        <div className={\"flex flex-col gap-sm\"}>\n            <Accordion background={\"base\"} variant={\"container\"}>\n                <Accordion.Item title={label} defaultOpen={true}>\n                    <div className={\"flex flex-col gap-sm\"}>\n                        {field.items.map((item, index) => (\n                            <ListItemRenderer\n                                key={item.key}\n                                item={item}\n                                index={index}\n                                total={field.items.length}\n                                label={field.label}\n                                itemTitle={settings?.itemTitle}\n                                disabled={field.disabled}\n                            />\n                        ))}\n                    </div>\n                </Accordion.Item>\n            </Accordion>\n            <AddItemButton\n                label={`Add ${field.label || \"Item\"}`}\n                disabled={field.disabled}\n                onAdd={() => field.addItem()}\n            />\n        </div>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,SAAS,QAAQ,kBAAkB;AAM5C,SACIC,eAAe,EACfC,WAAW,EACXC,gBAAgB,EAChBC,aAAa;AAgBjB,OAAO,MAAMC,cAAc,GAAGN,QAAQ,CAAC,CAAC;EAAEO;AAA2B,CAAC,KAAK;EACvE,IAAI,CAACL,eAAe,CAACK,KAAK,CAAC,EAAE;IACzB,OAAO,IAAI;EACf;EAEA,IAAIA,KAAK,CAACC,MAAM,EAAE;IACd,oBAAOT,KAAA,CAAAU,aAAA,CAACC,kBAAkB;MAACH,KAAK,EAAEA;IAAM,CAAE,CAAC;EAC/C;EAEA,oBAAOR,KAAA,CAAAU,aAAA,CAACE,oBAAoB;IAACJ,KAAK,EAAEA;EAAM,CAAE,CAAC;AACjD,CAAC,CAAC;AAEF,MAAMI,oBAAoB,GAAGX,QAAQ,CAAC,CAAC;EAAEO;AAAiC,CAAC,KAAK;EAC5E,oBACIR,KAAA,CAAAU,aAAA,CAACR,SAAS;IAACW,UAAU,EAAE,MAAO;IAACC,OAAO,EAAE;EAAY,gBAChDd,KAAA,CAAAU,aAAA,CAACR,SAAS,CAACa,IAAI;IAACC,KAAK,EAAER,KAAK,CAACS,KAAM;IAACC,WAAW,EAAE;EAAK,gBAClDlB,KAAA,CAAAU,aAAA,CAACN,WAAW;IAACe,MAAM,EAAEX,KAAK,CAACW;EAAO,CAAE,CACxB,CACT,CAAC;AAEpB,CAAC,CAAC;AAEF,MAAMR,kBAAkB,GAAGV,QAAQ,CAAC,CAAC;EAAEO;AAAiC,CAAC,KAAK;EAC1E,MAAMS,KAAK,GAAG,GAAGT,KAAK,CAACS,KAAK,IAAI,EAAE,IAAIT,KAAK,CAACY,KAAK,CAACC,MAAM,GAAG,IAAIb,KAAK,CAACY,KAAK,CAACC,MAAM,GAAG,GAAG,EAAE,EAAE;EAC3F,MAAMC,QAAQ,GAAGd,KAAK,CAACe,gBAA8C;EAErE,oBACIvB,KAAA,CAAAU,aAAA;IAAKc,SAAS,EAAE;EAAuB,gBACnCxB,KAAA,CAAAU,aAAA,CAACR,SAAS;IAACW,UAAU,EAAE,MAAO;IAACC,OAAO,EAAE;EAAY,gBAChDd,KAAA,CAAAU,aAAA,CAACR,SAAS,CAACa,IAAI;IAACC,KAAK,EAAEC,KAAM;IAACC,WAAW,EAAE;EAAK,gBAC5ClB,KAAA,CAAAU,aAAA;IAAKc,SAAS,EAAE;EAAuB,GAClChB,KAAK,CAACY,KAAK,CAACK,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBACzB3B,KAAA,CAAAU,aAAA,CAACL,gBAAgB;IACbuB,GAAG,EAAEF,IAAI,CAACE,GAAI;IACdF,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbE,KAAK,EAAErB,KAAK,CAACY,KAAK,CAACC,MAAO;IAC1BJ,KAAK,EAAET,KAAK,CAACS,KAAM;IACnBa,SAAS,EAAER,QAAQ,EAAEQ,SAAU;IAC/BC,QAAQ,EAAEvB,KAAK,CAACuB;EAAS,CAC5B,CACJ,CACA,CACO,CACT,CAAC,eACZ/B,KAAA,CAAAU,aAAA,CAACJ,aAAa;IACVW,KAAK,EAAE,OAAOT,KAAK,CAACS,KAAK,IAAI,MAAM,EAAG;IACtCc,QAAQ,EAAEvB,KAAK,CAACuB,QAAS;IACzBC,KAAK,EAAEA,CAAA,KAAMxB,KAAK,CAACyB,OAAO,CAAC;EAAE,CAChC,CACA,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Accordion","createObjectFieldRenderer","NestedLayout","ObjectRenderer","field","createElement","background","variant","Item","title","label","defaultOpen","className","layout"],"sources":["ObjectRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { NestedLayout } from \"./ObjectFieldComponents.js\";\n\ndeclare module \"../../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        objectAccordionSingle: {\n            fieldType: \"object\";\n            settings?: {\n                open?: boolean;\n            };\n        };\n    }\n}\n\nexport const ObjectRenderer = createObjectFieldRenderer<\"objectAccordionSingle\">(({ field }) => {\n    return (\n        <Accordion background={\"base\"} variant={\"container\"}>\n            <Accordion.Item title={field.label} defaultOpen={true} className={\"pl-sm\"}>\n                <NestedLayout layout={field.layout} />\n            </Accordion.Item>\n        </Accordion>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,yBAAyB;AAClC,SAASC,YAAY;AAarB,OAAO,MAAMC,cAAc,GAAGF,yBAAyB,CAA0B,CAAC;EAAEG;AAAM,CAAC,KAAK;EAC5F,oBACIL,KAAA,CAAAM,aAAA,CAACL,SAAS;IAACM,UAAU,EAAE,MAAO;IAACC,OAAO,EAAE;EAAY,gBAChDR,KAAA,CAAAM,aAAA,CAACL,SAAS,CAACQ,IAAI;IAACC,KAAK,EAAEL,KAAK,CAACM,KAAM;IAACC,WAAW,EAAE,IAAK;IAACC,SAAS,EAAE;EAAQ,gBACtEb,KAAA,CAAAM,aAAA,CAACH,YAAY;IAACW,MAAM,EAAET,KAAK,CAACS;EAAO,CAAE,CACzB,CACT,CAAC;AAEpB,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import type { IObjectFieldVM } from "../../../../features/formModel/index.js";
+interface SingleValueDynamicZoneProps {
+    field: IObjectFieldVM;
+    showContainer?: boolean;
+}
+export declare const SingleValueDynamicZone: (({ field, showContainer }: SingleValueDynamicZoneProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,64 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { Accordion, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent as HorizontalRuleIcon } from "@webiny/icons/horizontal_rule.svg";
+import { useConfirmationDialog } from "../../../../hooks/useConfirmationDialog.js";
+import { NestedLayout } from "./ObjectFieldComponents.js";
+import { AddTemplateButton } from "./TemplatePicker.js";
+export const SingleValueDynamicZone = observer(({
+  field,
+  showContainer = true
+}) => {
+  const activeTemplate = field.activeTemplateId !== null ? field.availableTemplates.find(t => t.id === field.activeTemplateId) : undefined;
+  const {
+    showConfirmation
+  } = useConfirmationDialog({
+    title: "Remove template",
+    message: "Are you sure you want to remove this item? This action is not reversible.",
+    acceptLabel: "Yes, I'm sure!",
+    cancelLabel: "No, leave it."
+  });
+  const onClear = () => {
+    showConfirmation(() => {
+      field.onChange(null);
+    });
+  };
+  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, {
+      icon: /*#__PURE__*/React.createElement(Tooltip, {
+        trigger: /*#__PURE__*/React.createElement(DeleteIcon, null),
+        content: "Delete"
+      }),
+      onClick: onClear
+    })
+  }, /*#__PURE__*/React.createElement(NestedLayout, {
+    layout: field.layout
+  }))) : null, !activeTemplate && !field.disabled && /*#__PURE__*/React.createElement(AddTemplateButton, {
+    templates: field.availableTemplates,
+    onSelect: template => field.setTemplate(template.id)
+  }));
+  if (!showContainer) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "flex flex-col gap-lg"
+    }, content);
+  }
+  return /*#__PURE__*/React.createElement(Accordion, {
+    background: "base",
+    variant: "container"
+  }, /*#__PURE__*/React.createElement(Accordion.Item, {
+    icon: /*#__PURE__*/React.createElement(Accordion.Item.Icon, {
+      color: "accent",
+      label: "Dynamic Zone",
+      icon: /*#__PURE__*/React.createElement(HorizontalRuleIcon, null)
+    }),
+    title: field.label,
+    defaultOpen: true
+  }, content));
+});
+
+//# sourceMappingURL=SingleValueDynamicZone.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","observer","Accordion","Tooltip","ReactComponent","DeleteIcon","HorizontalRuleIcon","useConfirmationDialog","NestedLayout","AddTemplateButton","SingleValueDynamicZone","field","showContainer","activeTemplate","activeTemplateId","availableTemplates","find","t","id","undefined","showConfirmation","title","message","acceptLabel","cancelLabel","onClear","onChange","content","createElement","Fragment","background","variant","Item","label","actions","disabled","Action","icon","trigger","onClick","layout","templates","onSelect","template","setTemplate","className","Icon","color","defaultOpen"],"sources":["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"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ITemplateVM } from "../../../../features/formModel/index.js";
+export interface AddTemplateButtonProps {
+    templates: ITemplateVM[];
+    onSelect: (template: ITemplateVM) => void;
+    label?: string;
+    size?: "sm" | "md" | "lg";
+    variant?: "primary" | "secondary" | "tertiary";
+}
+export declare const AddTemplateButton: ({ templates, onSelect, label, size, variant }: AddTemplateButtonProps) => React.JSX.Element;

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

@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Button, Dialog, Text } from "@webiny/admin-ui";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as PlusIcon } from "@webiny/icons/add_circle_outline.svg";
+const normalizeIcon = icon => {
+  if (!icon) {
+    return undefined;
+  }
+  return icon.name.split("/");
+};
+export const AddTemplateButton = ({
+  templates,
+  onSelect,
+  label = "Add a template",
+  size = "sm",
+  variant = "tertiary"
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-between items-center"
+  }, /*#__PURE__*/React.createElement(Dialog, {
+    size: "lg",
+    className: "w-[800px]",
+    trigger: /*#__PURE__*/React.createElement(Button, {
+      size: size,
+      variant: variant,
+      text: label,
+      icon: /*#__PURE__*/React.createElement(AddIcon, null)
+    }),
+    title: "Insert a template",
+    info: /*#__PURE__*/React.createElement(React.Fragment, null)
+  }, /*#__PURE__*/React.createElement(TemplateGallery, {
+    templates: templates,
+    onSelect: onSelect
+  })));
+};
+const TemplateGallery = ({
+  templates,
+  onSelect
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "gap-md flex flex-wrap p-xs"
+  }, templates.map(template => /*#__PURE__*/React.createElement(TemplateCard, {
+    key: template.id,
+    template: template,
+    onSelect: onSelect
+  })));
+};
+const TemplateCard = ({
+  template,
+  onSelect
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const icon = normalizeIcon(template.icon);
+  return /*#__PURE__*/React.createElement("div", {
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    className: "flex flex-col justify-between bg-neutral-base overflow-hidden rounded-lg w-[173px] relative shadow-sm"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-center py-xxl w-full bg-neutral-dimmed"
+  }, icon ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    className: "text-neutral-xstrong",
+    icon: icon,
+    style: {
+      width: 40,
+      height: 40
+    }
+  }) : null), /*#__PURE__*/React.createElement("div", {
+    className: "py-sm-extra px-md"
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "md",
+    className: "mb-xs text-neutral-primary font-semibold"
+  }, template.label))), isHovered && /*#__PURE__*/React.createElement(Dialog.Close, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "absolute inset-0 flex items-center justify-center bg-white/80 cursor-pointer",
+    onClick: () => onSelect(template)
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "lg",
+    variant: "primary",
+    icon: /*#__PURE__*/React.createElement(PlusIcon, null)
+  }, "Insert"))));
+};
+
+//# sourceMappingURL=TemplatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","FontAwesomeIcon","Button","Dialog","Text","ReactComponent","AddIcon","PlusIcon","normalizeIcon","icon","undefined","name","split","AddTemplateButton","templates","onSelect","label","size","variant","createElement","className","trigger","text","title","info","Fragment","TemplateGallery","map","template","TemplateCard","key","id","isHovered","setIsHovered","onMouseEnter","onMouseLeave","style","width","height","Close","asChild","onClick"],"sources":["TemplatePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Button, Dialog, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as PlusIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport type { ITemplateIcon, ITemplateVM } from \"~/features/formModel/index.js\";\n\nconst normalizeIcon = (icon: ITemplateIcon | undefined): IconProp | undefined => {\n    if (!icon) {\n        return undefined;\n    }\n    return icon.name.split(\"/\") as IconProp;\n};\n\nexport interface AddTemplateButtonProps {\n    templates: ITemplateVM[];\n    onSelect: (template: ITemplateVM) => void;\n    label?: string;\n    size?: \"sm\" | \"md\" | \"lg\";\n    variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport const AddTemplateButton = ({\n    templates,\n    onSelect,\n    label = \"Add a template\",\n    size = \"sm\",\n    variant = \"tertiary\"\n}: AddTemplateButtonProps) => {\n    return (\n        <div className={\"flex justify-between items-center\"}>\n            <Dialog\n                size={\"lg\"}\n                className={\"w-[800px]\"}\n                trigger={<Button size={size} variant={variant} text={label} icon={<AddIcon />} />}\n                title={\"Insert a template\"}\n                info={<></>}\n            >\n                <TemplateGallery templates={templates} onSelect={onSelect} />\n            </Dialog>\n        </div>\n    );\n};\n\ninterface TemplateGalleryProps {\n    templates: ITemplateVM[];\n    onSelect: (template: ITemplateVM) => void;\n}\n\nconst TemplateGallery = ({ templates, onSelect }: TemplateGalleryProps) => {\n    return (\n        <div className={\"gap-md flex flex-wrap p-xs\"}>\n            {templates.map(template => (\n                <TemplateCard key={template.id} template={template} onSelect={onSelect} />\n            ))}\n        </div>\n    );\n};\n\ninterface TemplateCardProps {\n    template: ITemplateVM;\n    onSelect: (template: ITemplateVM) => void;\n}\n\nconst TemplateCard = ({ template, onSelect }: TemplateCardProps) => {\n    const [isHovered, setIsHovered] = useState(false);\n    const icon = normalizeIcon(template.icon);\n\n    return (\n        <div\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n            className={\n                \"flex flex-col justify-between bg-neutral-base overflow-hidden rounded-lg w-[173px] relative shadow-sm\"\n            }\n        >\n            <div>\n                <div className={\"flex items-center justify-center py-xxl w-full bg-neutral-dimmed\"}>\n                    {icon ? (\n                        <FontAwesomeIcon\n                            className={\"text-neutral-xstrong\"}\n                            icon={icon}\n                            style={{ width: 40, height: 40 }}\n                        />\n                    ) : null}\n                </div>\n                <div className={\"py-sm-extra px-md\"}>\n                    <Text size={\"md\"} className={\"mb-xs text-neutral-primary font-semibold\"}>\n                        {template.label}\n                    </Text>\n                </div>\n            </div>\n\n            {isHovered && (\n                <Dialog.Close asChild>\n                    <div\n                        className={\n                            \"absolute inset-0 flex items-center justify-center bg-white/80 cursor-pointer\"\n                        }\n                        onClick={() => onSelect(template)}\n                    >\n                        <Button size={\"lg\"} variant={\"primary\"} icon={<PlusIcon />}>\n                            Insert\n                        </Button>\n                    </div>\n                </Dialog.Close>\n            )}\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,MAAM,EAAEC,MAAM,EAAEC,IAAI,QAAQ,kBAAkB;AACvD,SAASC,cAAc,IAAIC,OAAO,QAAQ,uBAAuB;AACjE,SAASD,cAAc,IAAIE,QAAQ,QAAQ,sCAAsC;AAGjF,MAAMC,aAAa,GAAIC,IAA+B,IAA2B;EAC7E,IAAI,CAACA,IAAI,EAAE;IACP,OAAOC,SAAS;EACpB;EACA,OAAOD,IAAI,CAACE,IAAI,CAACC,KAAK,CAAC,GAAG,CAAC;AAC/B,CAAC;AAUD,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAC9BC,SAAS;EACTC,QAAQ;EACRC,KAAK,GAAG,gBAAgB;EACxBC,IAAI,GAAG,IAAI;EACXC,OAAO,GAAG;AACU,CAAC,KAAK;EAC1B,oBACInB,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAE;EAAoC,gBAChDrB,KAAA,CAAAoB,aAAA,CAAChB,MAAM;IACHc,IAAI,EAAE,IAAK;IACXG,SAAS,EAAE,WAAY;IACvBC,OAAO,eAAEtB,KAAA,CAAAoB,aAAA,CAACjB,MAAM;MAACe,IAAI,EAAEA,IAAK;MAACC,OAAO,EAAEA,OAAQ;MAACI,IAAI,EAAEN,KAAM;MAACP,IAAI,eAAEV,KAAA,CAAAoB,aAAA,CAACb,OAAO,MAAE;IAAE,CAAE,CAAE;IAClFiB,KAAK,EAAE,mBAAoB;IAC3BC,IAAI,eAAEzB,KAAA,CAAAoB,aAAA,CAAApB,KAAA,CAAA0B,QAAA,MAAI;EAAE,gBAEZ1B,KAAA,CAAAoB,aAAA,CAACO,eAAe;IAACZ,SAAS,EAAEA,SAAU;IAACC,QAAQ,EAAEA;EAAS,CAAE,CACxD,CACP,CAAC;AAEd,CAAC;AAOD,MAAMW,eAAe,GAAGA,CAAC;EAAEZ,SAAS;EAAEC;AAA+B,CAAC,KAAK;EACvE,oBACIhB,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAE;EAA6B,GACxCN,SAAS,CAACa,GAAG,CAACC,QAAQ,iBACnB7B,KAAA,CAAAoB,aAAA,CAACU,YAAY;IAACC,GAAG,EAAEF,QAAQ,CAACG,EAAG;IAACH,QAAQ,EAAEA,QAAS;IAACb,QAAQ,EAAEA;EAAS,CAAE,CAC5E,CACA,CAAC;AAEd,CAAC;AAOD,MAAMc,YAAY,GAAGA,CAAC;EAAED,QAAQ;EAAEb;AAA4B,CAAC,KAAK;EAChE,MAAM,CAACiB,SAAS,EAAEC,YAAY,CAAC,GAAGjC,QAAQ,CAAC,KAAK,CAAC;EACjD,MAAMS,IAAI,GAAGD,aAAa,CAACoB,QAAQ,CAACnB,IAAI,CAAC;EAEzC,oBACIV,KAAA,CAAAoB,aAAA;IACIe,YAAY,EAAEA,CAAA,KAAMD,YAAY,CAAC,IAAI,CAAE;IACvCE,YAAY,EAAEA,CAAA,KAAMF,YAAY,CAAC,KAAK,CAAE;IACxCb,SAAS,EACL;EACH,gBAEDrB,KAAA,CAAAoB,aAAA,2BACIpB,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAE;EAAmE,GAC9EX,IAAI,gBACDV,KAAA,CAAAoB,aAAA,CAAClB,eAAe;IACZmB,SAAS,EAAE,sBAAuB;IAClCX,IAAI,EAAEA,IAAK;IACX2B,KAAK,EAAE;MAAEC,KAAK,EAAE,EAAE;MAAEC,MAAM,EAAE;IAAG;EAAE,CACpC,CAAC,GACF,IACH,CAAC,eACNvC,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAE;EAAoB,gBAChCrB,KAAA,CAAAoB,aAAA,CAACf,IAAI;IAACa,IAAI,EAAE,IAAK;IAACG,SAAS,EAAE;EAA2C,GACnEQ,QAAQ,CAACZ,KACR,CACL,CACJ,CAAC,EAELgB,SAAS,iBACNjC,KAAA,CAAAoB,aAAA,CAAChB,MAAM,CAACoC,KAAK;IAACC,OAAO;EAAA,gBACjBzC,KAAA,CAAAoB,aAAA;IACIC,SAAS,EACL,8EACH;IACDqB,OAAO,EAAEA,CAAA,KAAM1B,QAAQ,CAACa,QAAQ;EAAE,gBAElC7B,KAAA,CAAAoB,aAAA,CAACjB,MAAM;IAACe,IAAI,EAAE,IAAK;IAACC,OAAO,EAAE,SAAU;IAACT,IAAI,eAAEV,KAAA,CAAAoB,aAAA,CAACZ,QAAQ,MAAE;EAAE,GAAC,QAEpD,CACP,CACK,CAEjB,CAAC;AAEd,CAAC","ignoreList":[]}

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

@@ -1,5 +1,4 @@
 import React from "react";
-import type { IFieldVM } from "../../../features/formModel/index.js";
 declare module "../../../features/formModel/abstractions.js" {
     interface IFieldRendererRegistry {
         passthrough: {
@@ -8,8 +7,6 @@ declare module "../../../features/formModel/abstractions.js" {
         };
     }
 }
-export declare const PassthroughRenderer: (({ field }: {
-    field: IFieldVM;
-}) => React.JSX.Element | null) & {
-    displayName: string;
-};
+export declare const PassthroughRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/PassthroughRenderer.js

@@ -1,29 +1,15 @@
 import React from "react";
-import { observer } from "mobx-react-lite";
-import { useFormViewRenderers } from "../../../features/formModel/FormView.js";
-const isObjectFieldVM = field => {
-  return field.type === "object";
-};
-export const PassthroughRenderer = observer(({
+import { createObjectFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { LayoutNodeRenderer } from "../../../features/formModel/FormView.js";
+export const PassthroughRenderer = createObjectFieldRenderer(({
   field
 }) => {
-  const {
-    fieldRenderers
-  } = useFormViewRenderers();
-  if (!isObjectFieldVM(field)) {
-    return null;
-  }
-  const children = field.isList ? [] : field.fields;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children.map(childField => {
-    const Renderer = childField.renderer ? fieldRenderers[childField.renderer] : undefined;
-    if (!Renderer) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement(Renderer, {
-      key: childField.name,
-      field: childField
-    });
-  }));
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-4"
+  }, field.layout.map((node, index) => /*#__PURE__*/React.createElement(LayoutNodeRenderer, {
+    key: index,
+    node: node
+  })));
 });
 
 //# sourceMappingURL=PassthroughRenderer.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","observer","useFormViewRenderers","isObjectFieldVM","field","type","PassthroughRenderer","fieldRenderers","children","isList","fields","createElement","Fragment","map","childField","Renderer","renderer","undefined","key","name"],"sources":["PassthroughRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport type { IFieldVM, IObjectFieldVM } from \"~/features/formModel/index.js\";\nimport { useFormViewRenderers } from \"~/features/formModel/FormView.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        passthrough: { fieldType: string; settings: undefined };\n    }\n}\n\nconst isObjectFieldVM = (field: IFieldVM): field is IObjectFieldVM => {\n    return field.type === \"object\";\n};\n\nexport const PassthroughRenderer = observer(({ field }: { field: IFieldVM }) => {\n    const { fieldRenderers } = useFormViewRenderers();\n\n    if (!isObjectFieldVM(field)) {\n        return null;\n    }\n\n    const children = field.isList ? [] : field.fields;\n\n    return (\n        <>\n            {children.map(childField => {\n                const Renderer = childField.renderer\n                    ? fieldRenderers[childField.renderer]\n                    : undefined;\n\n                if (!Renderer) {\n                    return null;\n                }\n\n                return <Renderer key={childField.name} field={childField} />;\n            })}\n        </>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,oBAAoB;AAQ7B,MAAMC,eAAe,GAAIC,KAAe,IAA8B;EAClE,OAAOA,KAAK,CAACC,IAAI,KAAK,QAAQ;AAClC,CAAC;AAED,OAAO,MAAMC,mBAAmB,GAAGL,QAAQ,CAAC,CAAC;EAAEG;AAA2B,CAAC,KAAK;EAC5E,MAAM;IAAEG;EAAe,CAAC,GAAGL,oBAAoB,CAAC,CAAC;EAEjD,IAAI,CAACC,eAAe,CAACC,KAAK,CAAC,EAAE;IACzB,OAAO,IAAI;EACf;EAEA,MAAMI,QAAQ,GAAGJ,KAAK,CAACK,MAAM,GAAG,EAAE,GAAGL,KAAK,CAACM,MAAM;EAEjD,oBACIV,KAAA,CAAAW,aAAA,CAAAX,KAAA,CAAAY,QAAA,QACKJ,QAAQ,CAACK,GAAG,CAACC,UAAU,IAAI;IACxB,MAAMC,QAAQ,GAAGD,UAAU,CAACE,QAAQ,GAC9BT,cAAc,CAACO,UAAU,CAACE,QAAQ,CAAC,GACnCC,SAAS;IAEf,IAAI,CAACF,QAAQ,EAAE;MACX,OAAO,IAAI;IACf;IAEA,oBAAOf,KAAA,CAAAW,aAAA,CAACI,QAAQ;MAACG,GAAG,EAAEJ,UAAU,CAACK,IAAK;MAACf,KAAK,EAAEU;IAAW,CAAE,CAAC;EAChE,CAAC,CACH,CAAC;AAEX,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","createObjectFieldRenderer","LayoutNodeRenderer","PassthroughRenderer","field","createElement","className","layout","map","node","index","key"],"sources":["PassthroughRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { LayoutNodeRenderer } from \"~/features/formModel/FormView.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        passthrough: { fieldType: string; settings: undefined };\n    }\n}\n\nexport const PassthroughRenderer = createObjectFieldRenderer(({ field }) => {\n    return (\n        <div className=\"flex flex-col gap-4\">\n            {field.layout.map((node, index) => (\n                <LayoutNodeRenderer key={index} node={node} />\n            ))}\n        </div>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,yBAAyB;AAClC,SAASC,kBAAkB;AAQ3B,OAAO,MAAMC,mBAAmB,GAAGF,yBAAyB,CAAC,CAAC;EAAEG;AAAM,CAAC,KAAK;EACxE,oBACIJ,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAC;EAAqB,GAC/BF,KAAK,CAACG,MAAM,CAACC,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBAC1BV,KAAA,CAAAK,aAAA,CAACH,kBAAkB;IAACS,GAAG,EAAED,KAAM;IAACD,IAAI,EAAEA;EAAK,CAAE,CAChD,CACA,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,13 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        radioButtons: {
+            fieldType: "text" | "number";
+            options: true;
+            settings: undefined;
+        };
+    }
+}
+export declare const RadioButtonsRenderer: React.ComponentType<{
+    field: import("~/features/formModel/index.js").IFieldVM;
+}>;

package/base/Base/FieldRenderers/RadioButtonsRenderer.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { RadioGroup } from "@webiny/admin-ui";
+export const RadioButtonsRenderer = createFieldRenderer(({
+  field
+}) => {
+  const options = field.options ?? [];
+  return /*#__PURE__*/React.createElement(RadioGroup, {
+    label: field.label,
+    description: field.description,
+    note: field.note,
+    required: field.required,
+    disabled: field.disabled,
+    validation: field.validation,
+    items: options.map(opt => ({
+      label: opt.label,
+      value: String(opt.value)
+    })),
+    value: field.value !== undefined ? String(field.value) : undefined,
+    onChange: value => {
+      field.onChange(value);
+      field.onBlur();
+    }
+  });
+});
+
+//# sourceMappingURL=RadioButtonsRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","createFieldRenderer","RadioGroup","RadioButtonsRenderer","field","options","createElement","label","description","note","required","disabled","validation","items","map","opt","value","String","undefined","onChange","onBlur"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,UAAU,QAAQ,kBAAkB;AAS7C,OAAO,MAAMC,oBAAoB,GAAGF,mBAAmB,CAAC,CAAC;EAAEG;AAAM,CAAC,KAAK;EACnE,MAAMC,OAAuB,GAAGD,KAAK,CAACC,OAAO,IAAI,EAAE;EAEnD,oBACIL,KAAA,CAAAM,aAAA,CAACJ,UAAU;IACPK,KAAK,EAAEH,KAAK,CAACG,KAAM;IACnBC,WAAW,EAAEJ,KAAK,CAACI,WAAY;IAC/BC,IAAI,EAAEL,KAAK,CAACK,IAAK;IACjBC,QAAQ,EAAEN,KAAK,CAACM,QAAS;IACzBC,QAAQ,EAAEP,KAAK,CAACO,QAAS;IACzBC,UAAU,EAAER,KAAK,CAACQ,UAAW;IAC7BC,KAAK,EAAER,OAAO,CAACS,GAAG,CAACC,GAAG,KAAK;MACvBR,KAAK,EAAEQ,GAAG,CAACR,KAAK;MAChBS,KAAK,EAAEC,MAAM,CAACF,GAAG,CAACC,KAAK;IAC3B,CAAC,CAAC,CAAE;IACJA,KAAK,EAAEZ,KAAK,CAACY,KAAK,KAAKE,SAAS,GAAGD,MAAM,CAACb,KAAK,CAACY,KAAK,CAAC,GAAGE,SAAU;IACnEC,QAAQ,EAAEH,KAAK,IAAI;MACfZ,KAAK,CAACe,QAAQ,CAACH,KAAK,CAAC;MACrBZ,KAAK,CAACgB,MAAM,CAAC,CAAC;IAClB;EAAE,CACL,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

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

@@ -1,15 +1,13 @@
 import React from "react";
-import type { IFieldVM } from "../../../features/formModel/index.js";
 declare module "../../../features/formModel/abstractions.js" {
     interface IFieldRendererRegistry {
-        select: {
-            fieldType: "select";
+        dropdown: {
+            fieldType: "text" | "number";
+            options: true;
             settings: undefined;
         };
     }
 }
-export declare const SelectRenderer: (({ field }: {
-    field: IFieldVM;
-}) => React.JSX.Element) & {
-    displayName: string;
-};
+export declare const SelectRenderer: React.ComponentType<{
+    field: import("~/features/formModel/index.js").IFieldVM;
+}>;

package/base/Base/FieldRenderers/SelectRenderer.js

@@ -1,7 +1,7 @@
 import React from "react";
-import { observer } from "mobx-react-lite";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
 import { Select } from "@webiny/admin-ui";
-export const SelectRenderer = observer(({
+export const SelectRenderer = createFieldRenderer(({
   field
 }) => {
   const options = field.options ?? [];
@@ -10,14 +10,17 @@ export const SelectRenderer = observer(({
     placeholder: field.placeholder,
     description: field.description,
     note: field.note,
-    value: field.value ?? "",
-    onChange: value => field.onChange(value),
+    value: field.value != null ? String(field.value) : "",
+    onChange: value => {
+      field.onChange(value);
+      field.onBlur();
+    },
     required: field.required,
     disabled: field.disabled,
     validation: field.validation,
     options: options.map(opt => ({
       label: opt.label,
-      value: opt.value,
+      value: String(opt.value),
       disabled: opt.disabled
     }))
   });

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

@@ -1 +1 @@
-{"version":3,"names":["React","observer","Select","SelectRenderer","field","options","createElement","label","placeholder","description","note","value","onChange","required","disabled","validation","map","opt"],"sources":["SelectRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Select } from \"@webiny/admin-ui\";\nimport type { IFieldVM } from \"~/features/formModel/index.js\";\nimport type { IValueOption } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        select: { fieldType: \"select\"; settings: undefined };\n    }\n}\n\nexport const SelectRenderer = observer(({ field }: { field: IFieldVM }) => {\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 as string) ?? \"\"}\n            onChange={value => field.onChange(value)}\n            required={field.required}\n            disabled={field.disabled}\n            validation={field.validation}\n            options={options.map(opt => ({\n                label: opt.label,\n                value: opt.value,\n                disabled: opt.disabled\n            }))}\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,MAAM,QAAQ,kBAAkB;AAUzC,OAAO,MAAMC,cAAc,GAAGF,QAAQ,CAAC,CAAC;EAAEG;AAA2B,CAAC,KAAK;EACvE,MAAMC,OAAuB,GAAGD,KAAK,CAACC,OAAO,IAAI,EAAE;EAEnD,oBACIL,KAAA,CAAAM,aAAA,CAACJ,MAAM;IACHK,KAAK,EAAEH,KAAK,CAACG,KAAM;IACnBC,WAAW,EAAEJ,KAAK,CAACI,WAAY;IAC/BC,WAAW,EAAEL,KAAK,CAACK,WAAY;IAC/BC,IAAI,EAAEN,KAAK,CAACM,IAAK;IACjBC,KAAK,EAAGP,KAAK,CAACO,KAAK,IAAe,EAAG;IACrCC,QAAQ,EAAED,KAAK,IAAIP,KAAK,CAACQ,QAAQ,CAACD,KAAK,CAAE;IACzCE,QAAQ,EAAET,KAAK,CAACS,QAAS;IACzBC,QAAQ,EAAEV,KAAK,CAACU,QAAS;IACzBC,UAAU,EAAEX,KAAK,CAACW,UAAW;IAC7BV,OAAO,EAAEA,OAAO,CAACW,GAAG,CAACC,GAAG,KAAK;MACzBV,KAAK,EAAEU,GAAG,CAACV,KAAK;MAChBI,KAAK,EAAEM,GAAG,CAACN,KAAK;MAChBG,QAAQ,EAAEG,GAAG,CAACH;IAClB,CAAC,CAAC;EAAE,CACP,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","createFieldRenderer","Select","SelectRenderer","field","options","createElement","label","placeholder","description","note","value","String","onChange","onBlur","required","disabled","validation","map","opt"],"sources":["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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,MAAM,QAAQ,kBAAkB;AASzC,OAAO,MAAMC,cAAc,GAAGF,mBAAmB,CAAC,CAAC;EAAEG;AAAM,CAAC,KAAK;EAC7D,MAAMC,OAAuB,GAAGD,KAAK,CAACC,OAAO,IAAI,EAAE;EAEnD,oBACIL,KAAA,CAAAM,aAAA,CAACJ,MAAM;IACHK,KAAK,EAAEH,KAAK,CAACG,KAAM;IACnBC,WAAW,EAAEJ,KAAK,CAACI,WAAY;IAC/BC,WAAW,EAAEL,KAAK,CAACK,WAAY;IAC/BC,IAAI,EAAEN,KAAK,CAACM,IAAK;IACjBC,KAAK,EAAEP,KAAK,CAACO,KAAK,IAAI,IAAI,GAAGC,MAAM,CAACR,KAAK,CAACO,KAAK,CAAC,GAAG,EAAG;IACtDE,QAAQ,EAAEF,KAAK,IAAI;MACfP,KAAK,CAACS,QAAQ,CAACF,KAAK,CAAC;MACrBP,KAAK,CAACU,MAAM,CAAC,CAAC;IAClB,CAAE;IACFC,QAAQ,EAAEX,KAAK,CAACW,QAAS;IACzBC,QAAQ,EAAEZ,KAAK,CAACY,QAAS;IACzBC,UAAU,EAAEb,KAAK,CAACa,UAAW;IAC7BZ,OAAO,EAAEA,OAAO,CAACa,GAAG,CAACC,GAAG,KAAK;MACzBZ,KAAK,EAAEY,GAAG,CAACZ,KAAK;MAChBI,KAAK,EAAEC,MAAM,CAACO,GAAG,CAACR,KAAK,CAAC;MACxBK,QAAQ,EAAEG,GAAG,CAACH;IAClB,CAAC,CAAC;EAAE,CACP,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

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

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

package/base/Base/FieldRenderers/SwitchRenderer.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { Switch } from "@webiny/admin-ui";
+export const SwitchRenderer = createFieldRenderer(({
+  field
+}) => {
+  return /*#__PURE__*/React.createElement(Switch, {
+    checked: !!field.value,
+    onChange: value => field.onChange(value),
+    label: field.label,
+    description: field.description,
+    note: field.note,
+    required: field.required,
+    disabled: field.disabled,
+    validation: field.validation
+  });
+});
+
+//# sourceMappingURL=SwitchRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","createFieldRenderer","Switch","SwitchRenderer","field","createElement","checked","value","onChange","label","description","note","required","disabled","validation"],"sources":["SwitchRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Switch } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        switch: { fieldType: \"boolean\"; settings: undefined };\n    }\n}\n\nexport const SwitchRenderer = createFieldRenderer(({ field }) => {\n    return (\n        <Switch\n            checked={!!field.value}\n            onChange={value => field.onChange(value)}\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        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,MAAM,QAAQ,kBAAkB;AAQzC,OAAO,MAAMC,cAAc,GAAGF,mBAAmB,CAAC,CAAC;EAAEG;AAAM,CAAC,KAAK;EAC7D,oBACIJ,KAAA,CAAAK,aAAA,CAACH,MAAM;IACHI,OAAO,EAAE,CAAC,CAACF,KAAK,CAACG,KAAM;IACvBC,QAAQ,EAAED,KAAK,IAAIH,KAAK,CAACI,QAAQ,CAACD,KAAK,CAAE;IACzCE,KAAK,EAAEL,KAAK,CAACK,KAAM;IACnBC,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;EAAW,CAChC,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

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

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