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

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

@@ -0,0 +1,109 @@
+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_outline.svg";
+import { ReactComponent as CloneIcon } from "@webiny/icons/library_add.svg";
+import { ReactComponent as ArrowUpIcon } from "@webiny/icons/expand_less.svg";
+import { ReactComponent as ArrowDownIcon } from "@webiny/icons/expand_more.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 MultiValueDynamicZone = observer(({
+  field,
+  showContainer = true
+}) => {
+  const itemCount = field.items.length;
+  const content = /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-lg"
+  }, itemCount > 0 ? /*#__PURE__*/React.createElement(Accordion, {
+    background: "base",
+    variant: "container",
+    className: "gap-md flex flex-col"
+  }, field.items.map((item, index) => /*#__PURE__*/React.createElement(TemplatedListItem, {
+    key: item.key,
+    item: item,
+    index: index,
+    total: itemCount,
+    templates: field.availableTemplates,
+    disabled: field.disabled
+  }))) : null, !field.disabled && /*#__PURE__*/React.createElement(AddTemplateButton, {
+    templates: field.availableTemplates,
+    onSelect: template => field.addItem(template.id)
+  }));
+  if (!showContainer) {
+    return content;
+  }
+  const label = `${field.label || ""}${itemCount ? ` (${itemCount})` : ""}`;
+  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: label,
+    defaultOpen: true
+  }, content));
+});
+const TemplatedListItem = observer(({
+  item,
+  index,
+  total,
+  templates,
+  disabled
+}) => {
+  const {
+    showConfirmation
+  } = useConfirmationDialog({
+    title: "Delete item",
+    message: "Are you sure you want to delete this item? This action is not reversible.",
+    acceptLabel: "Yes, I'm sure!",
+    cancelLabel: "No, leave it."
+  });
+  const template = templates.find(t => t.id === item.templateId);
+  const title = template?.label || `Item #${index + 1}`;
+  const onDelete = () => {
+    showConfirmation(() => {
+      item.remove();
+    });
+  };
+  const actions = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Accordion.Item.Action, {
+    icon: /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: /*#__PURE__*/React.createElement(ArrowUpIcon, null),
+      content: "Move up"
+    }),
+    onClick: item.moveUp,
+    disabled: index === 0
+  }), /*#__PURE__*/React.createElement(Accordion.Item.Action, {
+    icon: /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: /*#__PURE__*/React.createElement(ArrowDownIcon, null),
+      content: "Move down"
+    }),
+    onClick: item.moveDown,
+    disabled: index === total - 1
+  }), /*#__PURE__*/React.createElement(Accordion.Item.Action.Separator, null), /*#__PURE__*/React.createElement(Accordion.Item.Action, {
+    icon: /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: /*#__PURE__*/React.createElement(CloneIcon, null),
+      content: "Duplicate"
+    }),
+    onClick: item.duplicate
+  }), /*#__PURE__*/React.createElement(Accordion.Item.Action, {
+    icon: /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: /*#__PURE__*/React.createElement(DeleteIcon, null),
+      content: "Delete"
+    }),
+    onClick: onDelete
+  }));
+  return /*#__PURE__*/React.createElement(Accordion.Item, {
+    title: title,
+    actions: disabled ? null : actions,
+    defaultOpen: false
+  }, /*#__PURE__*/React.createElement(NestedLayout, {
+    layout: item.layout
+  }));
+});
+
+//# sourceMappingURL=MultiValueDynamicZone.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","observer","Accordion","Tooltip","ReactComponent","DeleteIcon","CloneIcon","ArrowUpIcon","ArrowDownIcon","HorizontalRuleIcon","useConfirmationDialog","NestedLayout","AddTemplateButton","MultiValueDynamicZone","field","showContainer","itemCount","items","length","content","createElement","className","background","variant","map","item","index","TemplatedListItem","key","total","templates","availableTemplates","disabled","onSelect","template","addItem","id","label","Item","icon","Icon","color","title","defaultOpen","showConfirmation","message","acceptLabel","cancelLabel","find","t","templateId","onDelete","remove","actions","Fragment","Action","trigger","onClick","moveUp","moveDown","Separator","duplicate","layout"],"sources":["MultiValueDynamicZone.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_outline.svg\";\nimport { ReactComponent as CloneIcon } from \"@webiny/icons/library_add.svg\";\nimport { ReactComponent as ArrowUpIcon } from \"@webiny/icons/expand_less.svg\";\nimport { ReactComponent as ArrowDownIcon } from \"@webiny/icons/expand_more.svg\";\nimport { ReactComponent as HorizontalRuleIcon } from \"@webiny/icons/horizontal_rule.svg\";\nimport type { IObjectFieldItemVM, IObjectFieldVM } from \"~/features/formModel/index.js\";\nimport { useConfirmationDialog } from \"~/hooks/useConfirmationDialog.js\";\nimport { NestedLayout } from \"./ObjectFieldComponents.js\";\nimport { AddTemplateButton } from \"./TemplatePicker.js\";\n\ninterface MultiValueDynamicZoneProps {\n    field: IObjectFieldVM;\n    showContainer?: boolean;\n}\n\nexport const MultiValueDynamicZone = observer(\n    ({ field, showContainer = true }: MultiValueDynamicZoneProps) => {\n        const itemCount = field.items.length;\n\n        const content = (\n            <div className={\"flex flex-col gap-lg\"}>\n                {itemCount > 0 ? (\n                    <Accordion\n                        background={\"base\"}\n                        variant={\"container\"}\n                        className={\"gap-md flex flex-col\"}\n                    >\n                        {field.items.map((item, index) => (\n                            <TemplatedListItem\n                                key={item.key}\n                                item={item}\n                                index={index}\n                                total={itemCount}\n                                templates={field.availableTemplates}\n                                disabled={field.disabled}\n                            />\n                        ))}\n                    </Accordion>\n                ) : null}\n                {!field.disabled && (\n                    <AddTemplateButton\n                        templates={field.availableTemplates}\n                        onSelect={template => field.addItem(template.id)}\n                    />\n                )}\n            </div>\n        );\n\n        if (!showContainer) {\n            return content;\n        }\n\n        const label = `${field.label || \"\"}${itemCount ? ` (${itemCount})` : \"\"}`;\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={label}\n                    defaultOpen={true}\n                >\n                    {content}\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n\ninterface TemplatedListItemProps {\n    item: IObjectFieldItemVM;\n    index: number;\n    total: number;\n    templates: { id: string; label: string }[];\n    disabled: boolean;\n}\n\nconst TemplatedListItem = observer(\n    ({ item, index, total, templates, disabled }: TemplatedListItemProps) => {\n        const { showConfirmation } = useConfirmationDialog({\n            title: \"Delete item\",\n            message: \"Are you sure you want to delete this item? This action is not reversible.\",\n            acceptLabel: \"Yes, I'm sure!\",\n            cancelLabel: \"No, leave it.\"\n        });\n\n        const template = templates.find(t => t.id === item.templateId);\n        const title = template?.label || `Item #${index + 1}`;\n\n        const onDelete = () => {\n            showConfirmation(() => {\n                item.remove();\n            });\n        };\n\n        const actions = (\n            <>\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<ArrowUpIcon />} content={\"Move up\"} />}\n                    onClick={item.moveUp}\n                    disabled={index === 0}\n                />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<ArrowDownIcon />} content={\"Move down\"} />}\n                    onClick={item.moveDown}\n                    disabled={index === total - 1}\n                />\n                <Accordion.Item.Action.Separator />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<CloneIcon />} content={\"Duplicate\"} />}\n                    onClick={item.duplicate}\n                />\n                <Accordion.Item.Action\n                    icon={<Tooltip trigger={<DeleteIcon />} content={\"Delete\"} />}\n                    onClick={onDelete}\n                />\n            </>\n        );\n\n        return (\n            <Accordion.Item title={title} actions={disabled ? null : actions} defaultOpen={false}>\n                <NestedLayout layout={item.layout} />\n            </Accordion.Item>\n        );\n    }\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,SAAS,EAAEC,OAAO,QAAQ,kBAAkB;AACrD,SAASC,cAAc,IAAIC,UAAU,QAAQ,kCAAkC;AAC/E,SAASD,cAAc,IAAIE,SAAS,QAAQ,+BAA+B;AAC3E,SAASF,cAAc,IAAIG,WAAW,QAAQ,+BAA+B;AAC7E,SAASH,cAAc,IAAII,aAAa,QAAQ,+BAA+B;AAC/E,SAASJ,cAAc,IAAIK,kBAAkB,QAAQ,mCAAmC;AAExF,SAASC,qBAAqB;AAC9B,SAASC,YAAY;AACrB,SAASC,iBAAiB;AAO1B,OAAO,MAAMC,qBAAqB,GAAGZ,QAAQ,CACzC,CAAC;EAAEa,KAAK;EAAEC,aAAa,GAAG;AAAiC,CAAC,KAAK;EAC7D,MAAMC,SAAS,GAAGF,KAAK,CAACG,KAAK,CAACC,MAAM;EAEpC,MAAMC,OAAO,gBACTnB,KAAA,CAAAoB,aAAA;IAAKC,SAAS,EAAE;EAAuB,GAClCL,SAAS,GAAG,CAAC,gBACVhB,KAAA,CAAAoB,aAAA,CAAClB,SAAS;IACNoB,UAAU,EAAE,MAAO;IACnBC,OAAO,EAAE,WAAY;IACrBF,SAAS,EAAE;EAAuB,GAEjCP,KAAK,CAACG,KAAK,CAACO,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBACzB1B,KAAA,CAAAoB,aAAA,CAACO,iBAAiB;IACdC,GAAG,EAAEH,IAAI,CAACG,GAAI;IACdH,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbG,KAAK,EAAEb,SAAU;IACjBc,SAAS,EAAEhB,KAAK,CAACiB,kBAAmB;IACpCC,QAAQ,EAAElB,KAAK,CAACkB;EAAS,CAC5B,CACJ,CACM,CAAC,GACZ,IAAI,EACP,CAAClB,KAAK,CAACkB,QAAQ,iBACZhC,KAAA,CAAAoB,aAAA,CAACR,iBAAiB;IACdkB,SAAS,EAAEhB,KAAK,CAACiB,kBAAmB;IACpCE,QAAQ,EAAEC,QAAQ,IAAIpB,KAAK,CAACqB,OAAO,CAACD,QAAQ,CAACE,EAAE;EAAE,CACpD,CAEJ,CACR;EAED,IAAI,CAACrB,aAAa,EAAE;IAChB,OAAOI,OAAO;EAClB;EAEA,MAAMkB,KAAK,GAAG,GAAGvB,KAAK,CAACuB,KAAK,IAAI,EAAE,GAAGrB,SAAS,GAAG,KAAKA,SAAS,GAAG,GAAG,EAAE,EAAE;EAEzE,oBACIhB,KAAA,CAAAoB,aAAA,CAAClB,SAAS;IAACoB,UAAU,EAAE,MAAO;IAACC,OAAO,EAAE;EAAY,gBAChDvB,KAAA,CAAAoB,aAAA,CAAClB,SAAS,CAACoC,IAAI;IACXC,IAAI,eACAvC,KAAA,CAAAoB,aAAA,CAAClB,SAAS,CAACoC,IAAI,CAACE,IAAI;MAChBC,KAAK,EAAE,QAAS;MAChBJ,KAAK,EAAE,cAAe;MACtBE,IAAI,eAAEvC,KAAA,CAAAoB,aAAA,CAACX,kBAAkB,MAAE;IAAE,CAChC,CACJ;IACDiC,KAAK,EAAEL,KAAM;IACbM,WAAW,EAAE;EAAK,GAEjBxB,OACW,CACT,CAAC;AAEpB,CACJ,CAAC;AAUD,MAAMQ,iBAAiB,GAAG1B,QAAQ,CAC9B,CAAC;EAAEwB,IAAI;EAAEC,KAAK;EAAEG,KAAK;EAAEC,SAAS;EAAEE;AAAiC,CAAC,KAAK;EACrE,MAAM;IAAEY;EAAiB,CAAC,GAAGlC,qBAAqB,CAAC;IAC/CgC,KAAK,EAAE,aAAa;IACpBG,OAAO,EAAE,2EAA2E;IACpFC,WAAW,EAAE,gBAAgB;IAC7BC,WAAW,EAAE;EACjB,CAAC,CAAC;EAEF,MAAMb,QAAQ,GAAGJ,SAAS,CAACkB,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACb,EAAE,KAAKX,IAAI,CAACyB,UAAU,CAAC;EAC9D,MAAMR,KAAK,GAAGR,QAAQ,EAAEG,KAAK,IAAI,SAASX,KAAK,GAAG,CAAC,EAAE;EAErD,MAAMyB,QAAQ,GAAGA,CAAA,KAAM;IACnBP,gBAAgB,CAAC,MAAM;MACnBnB,IAAI,CAAC2B,MAAM,CAAC,CAAC;IACjB,CAAC,CAAC;EACN,CAAC;EAED,MAAMC,OAAO,gBACTrD,KAAA,CAAAoB,aAAA,CAAApB,KAAA,CAAAsD,QAAA,qBACItD,KAAA,CAAAoB,aAAA,CAAClB,SAAS,CAACoC,IAAI,CAACiB,MAAM;IAClBhB,IAAI,eAAEvC,KAAA,CAAAoB,aAAA,CAACjB,OAAO;MAACqD,OAAO,eAAExD,KAAA,CAAAoB,aAAA,CAACb,WAAW,MAAE,CAAE;MAACY,OAAO,EAAE;IAAU,CAAE,CAAE;IAChEsC,OAAO,EAAEhC,IAAI,CAACiC,MAAO;IACrB1B,QAAQ,EAAEN,KAAK,KAAK;EAAE,CACzB,CAAC,eACF1B,KAAA,CAAAoB,aAAA,CAAClB,SAAS,CAACoC,IAAI,CAACiB,MAAM;IAClBhB,IAAI,eAAEvC,KAAA,CAAAoB,aAAA,CAACjB,OAAO;MAACqD,OAAO,eAAExD,KAAA,CAAAoB,aAAA,CAACZ,aAAa,MAAE,CAAE;MAACW,OAAO,EAAE;IAAY,CAAE,CAAE;IACpEsC,OAAO,EAAEhC,IAAI,CAACkC,QAAS;IACvB3B,QAAQ,EAAEN,KAAK,KAAKG,KAAK,GAAG;EAAE,CACjC,CAAC,eACF7B,KAAA,CAAAoB,aAAA,CAAClB,SAAS,CAACoC,IAAI,CAACiB,MAAM,CAACK,SAAS,MAAE,CAAC,eACnC5D,KAAA,CAAAoB,aAAA,CAAClB,SAAS,CAACoC,IAAI,CAACiB,MAAM;IAClBhB,IAAI,eAAEvC,KAAA,CAAAoB,aAAA,CAACjB,OAAO;MAACqD,OAAO,eAAExD,KAAA,CAAAoB,aAAA,CAACd,SAAS,MAAE,CAAE;MAACa,OAAO,EAAE;IAAY,CAAE,CAAE;IAChEsC,OAAO,EAAEhC,IAAI,CAACoC;EAAU,CAC3B,CAAC,eACF7D,KAAA,CAAAoB,aAAA,CAAClB,SAAS,CAACoC,IAAI,CAACiB,MAAM;IAClBhB,IAAI,eAAEvC,KAAA,CAAAoB,aAAA,CAACjB,OAAO;MAACqD,OAAO,eAAExD,KAAA,CAAAoB,aAAA,CAACf,UAAU,MAAE,CAAE;MAACc,OAAO,EAAE;IAAS,CAAE,CAAE;IAC9DsC,OAAO,EAAEN;EAAS,CACrB,CACH,CACL;EAED,oBACInD,KAAA,CAAAoB,aAAA,CAAClB,SAAS,CAACoC,IAAI;IAACI,KAAK,EAAEA,KAAM;IAACW,OAAO,EAAErB,QAAQ,GAAG,IAAI,GAAGqB,OAAQ;IAACV,WAAW,EAAE;EAAM,gBACjF3C,KAAA,CAAAoB,aAAA,CAACT,YAAY;IAACmD,MAAM,EAAErC,IAAI,CAACqC;EAAO,CAAE,CACxB,CAAC;AAEzB,CACJ,CAAC","ignoreList":[]}

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

@@ -0,0 +1,17 @@
+import React from "react";
+declare module "../../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        objectAccordionMultiple: {
+            fieldType: "object";
+            settings?: {
+                open?: boolean;
+                container?: boolean;
+                itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);
+                addItemLabel?: string;
+            };
+        };
+    }
+}
+export declare const ObjectAccordionMultipleRenderer: React.ComponentType<{
+    field: import("../../../../index.js").IFieldVM;
+}>;

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

@@ -0,0 +1,55 @@
+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
+    }), 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
+  })));
+});
+
+//# sourceMappingURL=ObjectAccordionMultipleRenderer.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,28 @@
+import React from "react";
+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).
+ */
+export declare const NestedLayout: (({ layout }: {
+    layout: LayoutNodeVM[];
+}) => React.JSX.Element) & {
+    displayName: string;
+};
+export interface ListItemRendererProps {
+    item: IObjectFieldItemVM;
+    index: number;
+    total: number;
+    label?: string;
+    itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);
+    disabled: boolean;
+}
+export declare const ListItemRenderer: (({ item, index, total, label, itemTitle, disabled }: ListItemRendererProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export interface AddItemButtonProps {
+    label?: string;
+    disabled: boolean;
+    onAdd: () => void;
+}
+export declare const AddItemButton: ({ label, disabled, onAdd }: AddItemButtonProps) => React.JSX.Element;

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

@@ -0,0 +1,89 @@
+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 { LayoutNodeRenderer } from "../../../../features/formModel/FormView.js";
+import { resolveItemTitle } from "./resolveItemTitle.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).
+ */
+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 [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(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,
+    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
+  }));
+};
+
+//# sourceMappingURL=ObjectFieldComponents.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","observer","Accordion","Button","IconButton","ReactComponent","DeleteIcon","ArrowUp","ArrowDown","LayoutNodeRenderer","resolveItemTitle","NestedLayout","layout","createElement","className","map","node","index","key","ListItemRenderer","item","total","label","itemTitle","disabled","open","setOpen","hasFocusRequest","fields","some","f","focusRequested","actions","Fragment","icon","onClick","e","stopPropagation","moveDown","variant","moveUp","Item","Action","Separator","remove","background","openClosedIndicatorPosition","title","onOpenChange","AddItemButton","onAdd","text","size"],"sources":["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"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,14 @@
+import React from "react";
+declare module "../../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        objectAccordionSingle: {
+            fieldType: "object";
+            settings?: {
+                open?: boolean;
+            };
+        };
+    }
+}
+export declare const ObjectRenderer: React.ComponentType<{
+    field: import("../../../../index.js").IFieldVM;
+}>;

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

@@ -0,0 +1,20 @@
+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
+  })));
+});
+
+//# sourceMappingURL=ObjectRenderer.js.map

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

@@ -0,0 +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":[]}

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":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1,22 @@
+function fieldsToData(fields) {
+  const data = {};
+  for (const field of fields) {
+    data[field.name] = field.value;
+  }
+  return data;
+}
+export function resolveItemTitle(item, index, label, itemTitle) {
+  const fallback = `${label || "Item"} #${index + 1}`;
+  if (!itemTitle) {
+    return fallback;
+  }
+  if (typeof itemTitle === "string") {
+    const field = item.fields.find(f => f.name === itemTitle);
+    const value = field ? String(field.value ?? "") : "";
+    return value || fallback;
+  }
+  const data = fieldsToData(item.fields);
+  return itemTitle(data, index) || fallback;
+}
+
+//# sourceMappingURL=resolveItemTitle.js.map