@webiny/app-admin 6.3.0 → 6.4.0-beta.0

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

@@ -1,55 +1,48 @@
-import React from "react";
+import react from "react";
 import { Accordion } from "@webiny/admin-ui";
 import { createObjectFieldRenderer } from "../../../../features/formModel/createFieldRenderer.js";
-import { ListItemRenderer, AddItemButton } from "./ObjectFieldComponents.js";
-export const ObjectAccordionMultipleRenderer = createObjectFieldRenderer(({
-  field
-}) => {
-  if (!field.isList) {
-    return null;
-  }
-  const settings = field.rendererSettings;
-  const showContainer = settings?.container !== false;
-  const addButton = /*#__PURE__*/React.createElement(AddItemButton, {
-    label: settings?.addItemLabel ?? `Add ${field.label || "Item"}`,
-    disabled: field.disabled,
-    onAdd: () => field.addItem()
-  });
-  if (!showContainer) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "flex flex-col gap-lg"
-    }, /*#__PURE__*/React.createElement(ListItems, {
-      field: field
+import { AddItemButton, ListItemRenderer } from "./ObjectFieldComponents.js";
+const ObjectAccordionMultipleRenderer = createObjectFieldRenderer(({ field })=>{
+    if (!field.isList) return null;
+    const settings = field.rendererSettings;
+    const showContainer = settings?.container !== false;
+    const addButton = /*#__PURE__*/ react.createElement(AddItemButton, {
+        label: settings?.addItemLabel ?? `Add ${field.label || "Item"}`,
+        disabled: field.disabled,
+        onAdd: ()=>field.addItem()
+    });
+    if (!showContainer) return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-lg"
+    }, /*#__PURE__*/ react.createElement(ListItems, {
+        field: field
     }), addButton);
-  }
-  const label = `${field.label || ""} ${field.items.length ? `(${field.items.length})` : ""}`;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col gap-lg"
-  }, /*#__PURE__*/React.createElement(Accordion, {
-    background: "base",
-    variant: "container"
-  }, /*#__PURE__*/React.createElement(Accordion.Item, {
-    title: label,
-    defaultOpen: true
-  }, /*#__PURE__*/React.createElement(ListItems, {
-    field: field
-  }))), addButton);
+    const label = `${field.label || ""} ${field.items.length ? `(${field.items.length})` : ""}`;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-lg"
+    }, /*#__PURE__*/ react.createElement(Accordion, {
+        background: "base",
+        variant: "container"
+    }, /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: label,
+        defaultOpen: true
+    }, /*#__PURE__*/ react.createElement(ListItems, {
+        field: field
+    }))), addButton);
 });
-const ListItems = createObjectFieldRenderer(({
-  field
-}) => {
-  const settings = field.rendererSettings;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col gap-md"
-  }, 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
-  })));
+const ListItems = createObjectFieldRenderer(({ field })=>{
+    const settings = field.rendererSettings;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-md"
+    }, 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
+        })));
 });
+export { ObjectAccordionMultipleRenderer };
 
 //# sourceMappingURL=ObjectAccordionMultipleRenderer.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","Accordion","createObjectFieldRenderer","ListItemRenderer","AddItemButton","ObjectAccordionMultipleRenderer","field","isList","settings","rendererSettings","showContainer","container","addButton","createElement","label","addItemLabel","disabled","onAdd","addItem","className","ListItems","items","length","background","variant","Item","title","defaultOpen","map","item","index","key","total","itemTitle"],"sources":["ObjectAccordionMultipleRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { ListItemRenderer, AddItemButton } from \"./ObjectFieldComponents.js\";\n\ndeclare module \"../../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        objectAccordionMultiple: {\n            fieldType: \"object\";\n            settings?: {\n                open?: boolean;\n                container?: boolean;\n                itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);\n                addItemLabel?: string;\n            };\n        };\n    }\n}\n\nexport const ObjectAccordionMultipleRenderer = createObjectFieldRenderer<\"objectAccordionMultiple\">(\n    ({ field }) => {\n        if (!field.isList) {\n            return null;\n        }\n\n        const settings = field.rendererSettings;\n        const showContainer = settings?.container !== false;\n\n        const addButton = (\n            <AddItemButton\n                label={settings?.addItemLabel ?? `Add ${field.label || \"Item\"}`}\n                disabled={field.disabled}\n                onAdd={() => field.addItem()}\n            />\n        );\n\n        if (!showContainer) {\n            return (\n                <div className={\"flex flex-col gap-lg\"}>\n                    <ListItems field={field} />\n                    {addButton}\n                </div>\n            );\n        }\n\n        const label = `${field.label || \"\"} ${field.items.length ? `(${field.items.length})` : \"\"}`;\n\n        return (\n            <div className={\"flex flex-col gap-lg\"}>\n                <Accordion background={\"base\"} variant={\"container\"}>\n                    <Accordion.Item title={label} defaultOpen={true}>\n                        <ListItems field={field} />\n                    </Accordion.Item>\n                </Accordion>\n                {addButton}\n            </div>\n        );\n    }\n);\n\nconst ListItems = createObjectFieldRenderer<\"objectAccordionMultiple\">(({ field }) => {\n    const settings = field.rendererSettings;\n\n    return (\n        <div className={\"flex flex-col gap-md\"}>\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    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,kBAAkB;AAC5C,SAASC,yBAAyB;AAClC,SAASC,gBAAgB,EAAEC,aAAa;AAgBxC,OAAO,MAAMC,+BAA+B,GAAGH,yBAAyB,CACpE,CAAC;EAAEI;AAAM,CAAC,KAAK;EACX,IAAI,CAACA,KAAK,CAACC,MAAM,EAAE;IACf,OAAO,IAAI;EACf;EAEA,MAAMC,QAAQ,GAAGF,KAAK,CAACG,gBAAgB;EACvC,MAAMC,aAAa,GAAGF,QAAQ,EAAEG,SAAS,KAAK,KAAK;EAEnD,MAAMC,SAAS,gBACXZ,KAAA,CAAAa,aAAA,CAACT,aAAa;IACVU,KAAK,EAAEN,QAAQ,EAAEO,YAAY,IAAI,OAAOT,KAAK,CAACQ,KAAK,IAAI,MAAM,EAAG;IAChEE,QAAQ,EAAEV,KAAK,CAACU,QAAS;IACzBC,KAAK,EAAEA,CAAA,KAAMX,KAAK,CAACY,OAAO,CAAC;EAAE,CAChC,CACJ;EAED,IAAI,CAACR,aAAa,EAAE;IAChB,oBACIV,KAAA,CAAAa,aAAA;MAAKM,SAAS,EAAE;IAAuB,gBACnCnB,KAAA,CAAAa,aAAA,CAACO,SAAS;MAACd,KAAK,EAAEA;IAAM,CAAE,CAAC,EAC1BM,SACA,CAAC;EAEd;EAEA,MAAME,KAAK,GAAG,GAAGR,KAAK,CAACQ,KAAK,IAAI,EAAE,IAAIR,KAAK,CAACe,KAAK,CAACC,MAAM,GAAG,IAAIhB,KAAK,CAACe,KAAK,CAACC,MAAM,GAAG,GAAG,EAAE,EAAE;EAE3F,oBACItB,KAAA,CAAAa,aAAA;IAAKM,SAAS,EAAE;EAAuB,gBACnCnB,KAAA,CAAAa,aAAA,CAACZ,SAAS;IAACsB,UAAU,EAAE,MAAO;IAACC,OAAO,EAAE;EAAY,gBAChDxB,KAAA,CAAAa,aAAA,CAACZ,SAAS,CAACwB,IAAI;IAACC,KAAK,EAAEZ,KAAM;IAACa,WAAW,EAAE;EAAK,gBAC5C3B,KAAA,CAAAa,aAAA,CAACO,SAAS;IAACd,KAAK,EAAEA;EAAM,CAAE,CACd,CACT,CAAC,EACXM,SACA,CAAC;AAEd,CACJ,CAAC;AAED,MAAMQ,SAAS,GAAGlB,yBAAyB,CAA4B,CAAC;EAAEI;AAAM,CAAC,KAAK;EAClF,MAAME,QAAQ,GAAGF,KAAK,CAACG,gBAAgB;EAEvC,oBACIT,KAAA,CAAAa,aAAA;IAAKM,SAAS,EAAE;EAAuB,GAClCb,KAAK,CAACe,KAAK,CAACO,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBACzB9B,KAAA,CAAAa,aAAA,CAACV,gBAAgB;IACb4B,GAAG,EAAEF,IAAI,CAACE,GAAI;IACdF,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbE,KAAK,EAAE1B,KAAK,CAACe,KAAK,CAACC,MAAO;IAC1BR,KAAK,EAAER,KAAK,CAACQ,KAAM;IACnBmB,SAAS,EAAEzB,QAAQ,EAAEyB,SAAU;IAC/BjB,QAAQ,EAAEV,KAAK,CAACU;EAAS,CAC5B,CACJ,CACA,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/ObjectAccordionMultipleRenderer.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/ObjectAccordionMultipleRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { ListItemRenderer, AddItemButton } from \"./ObjectFieldComponents.js\";\n\ndeclare module \"../../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        objectAccordionMultiple: {\n            fieldType: \"object\";\n            settings?: {\n                open?: boolean;\n                container?: boolean;\n                itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);\n                addItemLabel?: string;\n            };\n        };\n    }\n}\n\nexport const ObjectAccordionMultipleRenderer = createObjectFieldRenderer<\"objectAccordionMultiple\">(\n    ({ field }) => {\n        if (!field.isList) {\n            return null;\n        }\n\n        const settings = field.rendererSettings;\n        const showContainer = settings?.container !== false;\n\n        const addButton = (\n            <AddItemButton\n                label={settings?.addItemLabel ?? `Add ${field.label || \"Item\"}`}\n                disabled={field.disabled}\n                onAdd={() => field.addItem()}\n            />\n        );\n\n        if (!showContainer) {\n            return (\n                <div className={\"flex flex-col gap-lg\"}>\n                    <ListItems field={field} />\n                    {addButton}\n                </div>\n            );\n        }\n\n        const label = `${field.label || \"\"} ${field.items.length ? `(${field.items.length})` : \"\"}`;\n\n        return (\n            <div className={\"flex flex-col gap-lg\"}>\n                <Accordion background={\"base\"} variant={\"container\"}>\n                    <Accordion.Item title={label} defaultOpen={true}>\n                        <ListItems field={field} />\n                    </Accordion.Item>\n                </Accordion>\n                {addButton}\n            </div>\n        );\n    }\n);\n\nconst ListItems = createObjectFieldRenderer<\"objectAccordionMultiple\">(({ field }) => {\n    const settings = field.rendererSettings;\n\n    return (\n        <div className={\"flex flex-col gap-md\"}>\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    );\n});\n"],"names":["ObjectAccordionMultipleRenderer","createObjectFieldRenderer","field","settings","showContainer","addButton","AddItemButton","ListItems","label","Accordion","item","index","ListItemRenderer"],"mappings":";;;;AAmBO,MAAMA,kCAAkCC,0BAC3C,CAAC,EAAEC,KAAK,EAAE;IACN,IAAI,CAACA,MAAM,MAAM,EACb,OAAO;IAGX,MAAMC,WAAWD,MAAM,gBAAgB;IACvC,MAAME,gBAAgBD,UAAU,cAAc;IAE9C,MAAME,YAAY,WAAZA,GACF,oBAACC,eAAaA;QACV,OAAOH,UAAU,gBAAgB,CAAC,IAAI,EAAED,MAAM,KAAK,IAAI,QAAQ;QAC/D,UAAUA,MAAM,QAAQ;QACxB,OAAO,IAAMA,MAAM,OAAO;;IAIlC,IAAI,CAACE,eACD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACG,WAASA;QAAC,OAAOL;QACjBG;IAKb,MAAMG,QAAQ,GAAGN,MAAM,KAAK,IAAI,GAAG,CAAC,EAAEA,MAAM,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAEA,MAAM,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI;IAE3F,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACO,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QAAC,OAAOD;QAAO,aAAa;qBACvC,oBAACD,WAASA;QAAC,OAAOL;UAGzBG;AAGb;AAGJ,MAAME,YAAYN,0BAAqD,CAAC,EAAEC,KAAK,EAAE;IAC7E,MAAMC,WAAWD,MAAM,gBAAgB;IAEvC,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXA,MAAM,KAAK,CAAC,GAAG,CAAC,CAACQ,MAAMC,QAAAA,WAAAA,GACpB,oBAACC,kBAAgBA;YACb,KAAKF,KAAK,GAAG;YACb,MAAMA;YACN,OAAOC;YACP,OAAOT,MAAM,KAAK,CAAC,MAAM;YACzB,OAAOA,MAAM,KAAK;YAClB,WAAWC,UAAU;YACrB,UAAUD,MAAM,QAAQ;;AAK5C"}

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

@@ -1,6 +1,5 @@
 import React from "react";
-import type { IFieldVM, IObjectFieldVM, IObjectFieldItemVM, LayoutNodeVM } from "../../../../features/formModel/index.js";
-export declare const isObjectFieldVM: (field: IFieldVM) => field is IObjectFieldVM;
+import type { IObjectFieldItemVM, LayoutNodeVM } from "../../../../features/formModel/index.js";
 /**
  * Walks a resolved layout sub-tree. Used by dynamic-zone renderers to render
  * a templated object's children via per-template layouts (Phase 8c).

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

@@ -1,85 +1,69 @@
-import React from "react";
+import react, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Accordion, Button, IconButton } from "@webiny/admin-ui";
-import { ReactComponent as DeleteIcon } from "@webiny/icons/delete_outline.svg";
-import { ReactComponent as ArrowUp } from "@webiny/icons/arrow_upward.svg";
-import { ReactComponent as ArrowDown } from "@webiny/icons/arrow_downward.svg";
+import { ReactComponent } from "@webiny/icons/delete_outline.svg";
+import { ReactComponent as arrow_upward_svg_ReactComponent } from "@webiny/icons/arrow_upward.svg";
+import { ReactComponent as arrow_downward_svg_ReactComponent } from "@webiny/icons/arrow_downward.svg";
 import { LayoutNodeRenderer } from "../../../../features/formModel/FormView.js";
 import { resolveItemTitle } from "./resolveItemTitle.js";
-export const isObjectFieldVM = field => {
-  return field.type === "object";
-};
-
-/**
- * Walks a resolved layout sub-tree. Used by dynamic-zone renderers to render
- * a templated object's children via per-template layouts (Phase 8c).
- */
-export const NestedLayout = observer(({
-  layout
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col gap-md"
-  }, layout.map((node, index) => /*#__PURE__*/React.createElement(LayoutNodeRenderer, {
-    key: index,
-    node: node
-  })));
-});
-export const ListItemRenderer = observer(({
-  item,
-  index,
-  total,
-  label,
-  itemTitle,
-  disabled
-}) => {
-  const actions = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(ArrowDown, null),
-    onClick: e => {
-      e.stopPropagation();
-      item.moveDown();
-    },
-    variant: "ghost",
-    disabled: index === total - 1
-  }), /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(ArrowUp, null),
-    onClick: e => {
-      e.stopPropagation();
-      item.moveUp();
-    },
-    variant: "ghost",
-    disabled: index === 0
-  }), /*#__PURE__*/React.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
-    onClick: e => {
-      e.stopPropagation();
-      item.remove();
-    },
-    variant: "ghost"
-  }));
-  return /*#__PURE__*/React.createElement(Accordion, {
-    background: "base",
-    variant: "container",
-    openClosedIndicatorPosition: "left"
-  }, /*#__PURE__*/React.createElement(Accordion.Item, {
-    title: resolveItemTitle(item, index, label, itemTitle),
-    actions: disabled ? null : actions,
-    defaultOpen: false
-  }, /*#__PURE__*/React.createElement(NestedLayout, {
-    layout: item.layout
-  })));
+const NestedLayout = observer(({ layout })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-md"
+    }, layout.map((node, index)=>/*#__PURE__*/ react.createElement(LayoutNodeRenderer, {
+            key: index,
+            node: node
+        }))));
+const ListItemRenderer = observer(({ item, index, total, label, itemTitle, disabled })=>{
+    const [open, setOpen] = useState(false);
+    const hasFocusRequest = item.fields.some((f)=>f.focusRequested);
+    useEffect(()=>{
+        if (hasFocusRequest) setOpen(true);
+    }, [
+        hasFocusRequest
+    ]);
+    const actions = /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(arrow_downward_svg_ReactComponent, null),
+        onClick: (e)=>{
+            e.stopPropagation();
+            item.moveDown();
+        },
+        variant: "ghost",
+        disabled: index === total - 1
+    }), /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(arrow_upward_svg_ReactComponent, null),
+        onClick: (e)=>{
+            e.stopPropagation();
+            item.moveUp();
+        },
+        variant: "ghost",
+        disabled: 0 === index
+    }), /*#__PURE__*/ react.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/ react.createElement(IconButton, {
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        onClick: (e)=>{
+            e.stopPropagation();
+            item.remove();
+        },
+        variant: "ghost"
+    }));
+    return /*#__PURE__*/ react.createElement(Accordion, {
+        background: "base",
+        variant: "container",
+        openClosedIndicatorPosition: "left"
+    }, /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: resolveItemTitle(item, index, label, itemTitle),
+        actions: disabled ? null : actions,
+        open: open,
+        onOpenChange: setOpen
+    }, /*#__PURE__*/ react.createElement(NestedLayout, {
+        layout: item.layout
+    })));
 });
-export const AddItemButton = ({
-  label,
-  disabled,
-  onAdd
-}) => {
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
-    text: label || "Add Item",
-    variant: "secondary",
-    size: "sm",
-    onClick: onAdd,
-    disabled: disabled
-  }));
-};
+const AddItemButton = ({ label, disabled, onAdd })=>/*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Button, {
+        text: label || "Add Item",
+        variant: "secondary",
+        size: "sm",
+        onClick: onAdd,
+        disabled: disabled
+    }));
+export { AddItemButton, ListItemRenderer, NestedLayout };
 
 //# sourceMappingURL=ObjectFieldComponents.js.map

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

@@ -1 +1 @@
-{"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":"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","ignoreList":[]}
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/ObjectFieldComponents.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/ObjectFieldComponents.tsx"],"sourcesContent":["import React, { useEffect, useState } 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 { IObjectFieldItemVM, LayoutNodeVM } from \"~/features/formModel/index.js\";\nimport { LayoutNodeRenderer } from \"~/features/formModel/FormView.js\";\nimport { resolveItemTitle } from \"./resolveItemTitle.js\";\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 [open, setOpen] = useState(false);\n        const hasFocusRequest = item.fields.some(f => f.focusRequested);\n\n        useEffect(() => {\n            if (hasFocusRequest) {\n                setOpen(true);\n            }\n        }, [hasFocusRequest]);\n\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                    open={open}\n                    onOpenChange={setOpen}\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"],"names":["NestedLayout","observer","layout","node","index","LayoutNodeRenderer","ListItemRenderer","item","total","label","itemTitle","disabled","open","setOpen","useState","hasFocusRequest","f","useEffect","actions","IconButton","ArrowDown","e","ArrowUp","Accordion","DeleteIcon","resolveItemTitle","AddItemButton","onAdd","Button"],"mappings":";;;;;;;;AAaO,MAAMA,eAAeC,SAAS,CAAC,EAAEC,MAAM,EAA8B,GACjE,WAAP,GACI,oBAAC;QAAI,WAAW;OACXA,OAAO,GAAG,CAAC,CAACC,MAAMC,QAAAA,WAAAA,GACf,oBAACC,oBAAkBA;YAAC,KAAKD;YAAO,MAAMD;;AAe/C,MAAMG,mBAAmBL,SAC5B,CAAC,EAAEM,IAAI,EAAEH,KAAK,EAAEI,KAAK,EAAEC,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAyB;IACtE,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IACjC,MAAMC,kBAAkBR,KAAK,MAAM,CAAC,IAAI,CAACS,CAAAA,IAAKA,EAAE,cAAc;IAE9DC,UAAU;QACN,IAAIF,iBACAF,QAAQ;IAEhB,GAAG;QAACE;KAAgB;IAEpB,MAAMG,UAAU,WAAVA,GACF,wDACI,oBAACC,YAAUA;QACP,oBAAM,oBAACC,mCAASA;QAChB,SAASC,CAAAA;YACLA,EAAE,eAAe;YACjBd,KAAK,QAAQ;QACjB;QACA,SAAQ;QACR,UAAUH,UAAUI,QAAQ;sBAEhC,oBAACW,YAAUA;QACP,oBAAM,oBAACG,iCAAOA;QACd,SAASD,CAAAA;YACLA,EAAE,eAAe;YACjBd,KAAK,MAAM;QACf;QACA,SAAQ;QACR,UAAUH,AAAU,MAAVA;sBAEd,oBAACmB,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACJ,YAAUA;QACP,oBAAM,oBAACK,gBAAUA;QACjB,SAASH,CAAAA;YACLA,EAAE,eAAe;YACjBd,KAAK,MAAM;QACf;QACA,SAAQ;;IAKpB,OAAO,WAAP,GACI,oBAACgB,WAASA;QACN,YAAY;QACZ,SAAS;QACT,6BAA6B;qBAE7B,oBAACA,UAAU,IAAI;QACX,OAAOE,iBAAiBlB,MAAMH,OAAOK,OAAOC;QAC5C,SAASC,WAAW,OAAOO;QAC3B,MAAMN;QACN,cAAcC;qBAEd,oBAACb,cAAYA;QAAC,QAAQO,KAAK,MAAM;;AAIjD;AASG,MAAMmB,gBAAgB,CAAC,EAAEjB,KAAK,EAAEE,QAAQ,EAAEgB,KAAK,EAAsB,GACjE,WAAP,GACI,oBAAC,2BACG,oBAACC,QAAMA;QACH,MAAMnB,SAAS;QACf,SAAS;QACT,MAAM;QACN,SAASkB;QACT,UAAUhB"}

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

@@ -1,20 +1,17 @@
-import React from "react";
+import react from "react";
 import { Accordion } from "@webiny/admin-ui";
 import { createObjectFieldRenderer } from "../../../../features/formModel/createFieldRenderer.js";
 import { NestedLayout } from "./ObjectFieldComponents.js";
-export const ObjectRenderer = createObjectFieldRenderer(({
-  field
-}) => {
-  return /*#__PURE__*/React.createElement(Accordion, {
-    background: "base",
-    variant: "container"
-  }, /*#__PURE__*/React.createElement(Accordion.Item, {
-    title: field.label,
-    defaultOpen: true,
-    className: "pl-sm"
-  }, /*#__PURE__*/React.createElement(NestedLayout, {
-    layout: field.layout
-  })));
-});
+const ObjectRenderer = createObjectFieldRenderer(({ field })=>/*#__PURE__*/ react.createElement(Accordion, {
+        background: "base",
+        variant: "container"
+    }, /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: field.label,
+        defaultOpen: true,
+        className: "pl-sm"
+    }, /*#__PURE__*/ react.createElement(NestedLayout, {
+        layout: field.layout
+    }))));
+export { ObjectRenderer };
 
 //# sourceMappingURL=ObjectRenderer.js.map

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/ObjectRenderer.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/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"],"names":["ObjectRenderer","createObjectFieldRenderer","field","Accordion","NestedLayout"],"mappings":";;;;AAgBO,MAAMA,iBAAiBC,0BAAmD,CAAC,EAAEC,KAAK,EAAE,GAChF,WAAP,GACI,oBAACC,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QAAC,OAAOD,MAAM,KAAK;QAAE,aAAa;QAAM,WAAW;qBAC9D,oBAACE,cAAYA;QAAC,QAAQF,MAAM,MAAM"}

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

@@ -1,64 +1,58 @@
-import React from "react";
+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 { ReactComponent } from "@webiny/icons/delete.svg";
+import { ReactComponent as horizontal_rule_svg_ReactComponent } 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 SingleValueDynamicZone = observer(({ field, showContainer = true })=>{
+    const activeTemplate = null !== field.activeTemplateId ? field.availableTemplates.find((t)=>t.id === field.activeTemplateId) : void 0;
+    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 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"
+    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(ReactComponent, 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));
+    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(horizontal_rule_svg_ReactComponent, null)
+        }),
+        title: field.label,
+        defaultOpen: true
+    }, content));
 });
+export { SingleValueDynamicZone };
 
 //# sourceMappingURL=SingleValueDynamicZone.js.map

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

@@ -1 +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":[]}
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as HorizontalRuleIcon } from \"@webiny/icons/horizontal_rule.svg\";\nimport type { IObjectFieldVM } from \"~/features/formModel/index.js\";\nimport { useConfirmationDialog } from \"~/hooks/useConfirmationDialog.js\";\nimport { NestedLayout } from \"./ObjectFieldComponents.js\";\nimport { AddTemplateButton } from \"./TemplatePicker.js\";\n\ninterface SingleValueDynamicZoneProps {\n    field: IObjectFieldVM;\n    showContainer?: boolean;\n}\n\nexport const SingleValueDynamicZone = observer(\n    ({ field, showContainer = true }: SingleValueDynamicZoneProps) => {\n        const activeTemplate =\n            field.activeTemplateId !== null\n                ? field.availableTemplates.find(t => t.id === field.activeTemplateId)\n                : undefined;\n\n        const { showConfirmation } = useConfirmationDialog({\n            title: \"Remove template\",\n            message: \"Are you sure you want to remove this item? This action is not reversible.\",\n            acceptLabel: \"Yes, I'm sure!\",\n            cancelLabel: \"No, leave it.\"\n        });\n\n        const onClear = () => {\n            showConfirmation(() => {\n                field.onChange(null);\n            });\n        };\n\n        const content = (\n            <>\n                {activeTemplate ? (\n                    <Accordion background={\"base\"} variant={\"container\"}>\n                        <Accordion.Item\n                            title={activeTemplate.label}\n                            actions={\n                                field.disabled ? null : (\n                                    <Accordion.Item.Action\n                                        icon={\n                                            <Tooltip trigger={<DeleteIcon />} content={\"Delete\"} />\n                                        }\n                                        onClick={onClear}\n                                    />\n                                )\n                            }\n                        >\n                            <NestedLayout layout={field.layout} />\n                        </Accordion.Item>\n                    </Accordion>\n                ) : null}\n                {!activeTemplate && !field.disabled && (\n                    <AddTemplateButton\n                        templates={field.availableTemplates}\n                        onSelect={template => field.setTemplate(template.id)}\n                    />\n                )}\n            </>\n        );\n\n        if (!showContainer) {\n            return <div className={\"flex flex-col gap-lg\"}>{content}</div>;\n        }\n\n        return (\n            <Accordion background={\"base\"} variant={\"container\"}>\n                <Accordion.Item\n                    icon={\n                        <Accordion.Item.Icon\n                            color={\"accent\"}\n                            label={\"Dynamic Zone\"}\n                            icon={<HorizontalRuleIcon />}\n                        />\n                    }\n                    title={field.label}\n                    defaultOpen={true}\n                >\n                    {content}\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n"],"names":["SingleValueDynamicZone","observer","field","showContainer","activeTemplate","t","undefined","showConfirmation","useConfirmationDialog","onClear","content","Accordion","Tooltip","DeleteIcon","NestedLayout","AddTemplateButton","template","HorizontalRuleIcon"],"mappings":";;;;;;;;AAeO,MAAMA,yBAAyBC,SAClC,CAAC,EAAEC,KAAK,EAAEC,gBAAgB,IAAI,EAA+B;IACzD,MAAMC,iBACFF,AAA2B,SAA3BA,MAAM,gBAAgB,GAChBA,MAAM,kBAAkB,CAAC,IAAI,CAACG,CAAAA,IAAKA,EAAE,EAAE,KAAKH,MAAM,gBAAgB,IAClEI;IAEV,MAAM,EAAEC,gBAAgB,EAAE,GAAGC,sBAAsB;QAC/C,OAAO;QACP,SAAS;QACT,aAAa;QACb,aAAa;IACjB;IAEA,MAAMC,UAAU;QACZF,iBAAiB;YACbL,MAAM,QAAQ,CAAC;QACnB;IACJ;IAEA,MAAMQ,UAAU,WAAVA,GACF,0CACKN,iBAAiB,WAAjBA,GACG,oBAACO,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,OAAOP,eAAe,KAAK;QAC3B,SACIF,MAAM,QAAQ,GAAG,OAAO,WAAP,GACb,oBAACS,UAAU,IAAI,CAAC,MAAM;YAClB,oBACI,oBAACC,SAAOA;gBAAC,uBAAS,oBAACC,gBAAUA;gBAAK,SAAS;;YAE/C,SAASJ;;qBAKrB,oBAACK,cAAYA;QAAC,QAAQZ,MAAM,MAAM;WAG1C,MACH,CAACE,kBAAkB,CAACF,MAAM,QAAQ,IAAI,WAAJ,GAC/B,oBAACa,mBAAiBA;QACd,WAAWb,MAAM,kBAAkB;QACnC,UAAUc,CAAAA,WAAYd,MAAM,WAAW,CAACc,SAAS,EAAE;;IAMnE,IAAI,CAACb,eACD,OAAO,WAAP,GAAO,oBAAC;QAAI,WAAW;OAAyBO;IAGpD,OAAO,WAAP,GACI,oBAACC,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,oBACI,oBAACA,UAAU,IAAI,CAAC,IAAI;YAChB,OAAO;YACP,OAAO;YACP,oBAAM,oBAACM,oCAAkBA;;QAGjC,OAAOf,MAAM,KAAK;QAClB,aAAa;OAEZQ;AAIjB"}