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

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

@@ -1,15 +1,12 @@
 import React from "react";
-import type { IFieldVM } from "../../../features/formModel/index.js";
 declare module "../../../features/formModel/abstractions.js" {
     interface IFieldRendererRegistry {
-        input: {
+        textInput: {
             fieldType: "text";
             settings: undefined;
         };
     }
 }
-export declare const InputRenderer: (({ field }: {
-    field: IFieldVM;
-}) => React.JSX.Element) & {
-    displayName: string;
-};
+export declare const InputRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/InputRenderer.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { observer } from "mobx-react-lite";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
 import { Input } from "@webiny/admin-ui";
 import { DelayedOnChange } from "@webiny/admin-ui";
-export const InputRenderer = observer(({
+export const InputRenderer = createFieldRenderer(({
   field
 }) => {
   return /*#__PURE__*/React.createElement(DelayedOnChange, {

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

@@ -1 +1 @@
-{"version":3,"names":["React","observer","Input","DelayedOnChange","InputRenderer","field","createElement","value","onChange","label","placeholder","description","note","required","disabled","validation","onBlur"],"sources":["InputRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Input } from \"@webiny/admin-ui\";\nimport { DelayedOnChange } from \"@webiny/admin-ui\";\nimport type { IFieldVM } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        input: { fieldType: \"text\"; settings: undefined };\n    }\n}\n\nexport const InputRenderer = observer(({ field }: { field: IFieldVM }) => {\n    return (\n        <DelayedOnChange value={field.value} onChange={value => field.onChange(value)}>\n            <Input\n                label={field.label}\n                placeholder={field.placeholder}\n                description={field.description}\n                note={field.note}\n                required={field.required}\n                disabled={field.disabled}\n                validation={field.validation}\n                onBlur={() => field.onBlur()}\n            />\n        </DelayedOnChange>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,KAAK,QAAQ,kBAAkB;AACxC,SAASC,eAAe,QAAQ,kBAAkB;AASlD,OAAO,MAAMC,aAAa,GAAGH,QAAQ,CAAC,CAAC;EAAEI;AAA2B,CAAC,KAAK;EACtE,oBACIL,KAAA,CAAAM,aAAA,CAACH,eAAe;IAACI,KAAK,EAAEF,KAAK,CAACE,KAAM;IAACC,QAAQ,EAAED,KAAK,IAAIF,KAAK,CAACG,QAAQ,CAACD,KAAK;EAAE,gBAC1EP,KAAA,CAAAM,aAAA,CAACJ,KAAK;IACFO,KAAK,EAAEJ,KAAK,CAACI,KAAM;IACnBC,WAAW,EAAEL,KAAK,CAACK,WAAY;IAC/BC,WAAW,EAAEN,KAAK,CAACM,WAAY;IAC/BC,IAAI,EAAEP,KAAK,CAACO,IAAK;IACjBC,QAAQ,EAAER,KAAK,CAACQ,QAAS;IACzBC,QAAQ,EAAET,KAAK,CAACS,QAAS;IACzBC,UAAU,EAAEV,KAAK,CAACU,UAAW;IAC7BC,MAAM,EAAEA,CAAA,KAAMX,KAAK,CAACW,MAAM,CAAC;EAAE,CAChC,CACY,CAAC;AAE1B,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","createFieldRenderer","Input","DelayedOnChange","InputRenderer","field","createElement","value","onChange","label","placeholder","description","note","required","disabled","validation","onBlur"],"sources":["InputRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Input } from \"@webiny/admin-ui\";\nimport { DelayedOnChange } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        textInput: { fieldType: \"text\"; settings: undefined };\n    }\n}\n\nexport const InputRenderer = createFieldRenderer(({ field }) => {\n    return (\n        <DelayedOnChange value={field.value} onChange={value => field.onChange(value)}>\n            <Input\n                label={field.label}\n                placeholder={field.placeholder}\n                description={field.description}\n                note={field.note}\n                required={field.required}\n                disabled={field.disabled}\n                validation={field.validation}\n                onBlur={() => field.onBlur()}\n            />\n        </DelayedOnChange>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,KAAK,QAAQ,kBAAkB;AACxC,SAASC,eAAe,QAAQ,kBAAkB;AAQlD,OAAO,MAAMC,aAAa,GAAGH,mBAAmB,CAAC,CAAC;EAAEI;AAAM,CAAC,KAAK;EAC5D,oBACIL,KAAA,CAAAM,aAAA,CAACH,eAAe;IAACI,KAAK,EAAEF,KAAK,CAACE,KAAM;IAACC,QAAQ,EAAED,KAAK,IAAIF,KAAK,CAACG,QAAQ,CAACD,KAAK;EAAE,gBAC1EP,KAAA,CAAAM,aAAA,CAACJ,KAAK;IACFO,KAAK,EAAEJ,KAAK,CAACI,KAAM;IACnBC,WAAW,EAAEL,KAAK,CAACK,WAAY;IAC/BC,WAAW,EAAEN,KAAK,CAACM,WAAY;IAC/BC,IAAI,EAAEP,KAAK,CAACO,IAAK;IACjBC,QAAQ,EAAER,KAAK,CAACQ,QAAS;IACzBC,QAAQ,EAAET,KAAK,CAACS,QAAS;IACzBC,UAAU,EAAEV,KAAK,CAACU,UAAW;IAC7BC,MAAM,EAAEA,CAAA,KAAMX,KAAK,CAACW,MAAM,CAAC;EAAE,CAChC,CACY,CAAC;AAE1B,CAAC,CAAC","ignoreList":[]}

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

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

package/base/Base/FieldRenderers/NumberInputRenderer.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","createFieldRenderer","DelayedOnChange","Input","NumberInputRenderer","field","createElement","value","onChange","label","placeholder","description","note","required","disabled","validation","onBlur","type"],"sources":["NumberInputRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { DelayedOnChange, Input } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        numberInput: { fieldType: \"number\"; settings: undefined };\n    }\n}\n\nexport const NumberInputRenderer = createFieldRenderer(({ field }) => {\n    return (\n        <DelayedOnChange value={field.value} onChange={value => field.onChange(value)}>\n            <Input\n                label={field.label}\n                placeholder={field.placeholder}\n                description={field.description}\n                note={field.note}\n                required={field.required}\n                disabled={field.disabled}\n                validation={field.validation}\n                onBlur={() => field.onBlur()}\n                type=\"number\"\n            />\n        </DelayedOnChange>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,eAAe,EAAEC,KAAK,QAAQ,kBAAkB;AAQzD,OAAO,MAAMC,mBAAmB,GAAGH,mBAAmB,CAAC,CAAC;EAAEI;AAAM,CAAC,KAAK;EAClE,oBACIL,KAAA,CAAAM,aAAA,CAACJ,eAAe;IAACK,KAAK,EAAEF,KAAK,CAACE,KAAM;IAACC,QAAQ,EAAED,KAAK,IAAIF,KAAK,CAACG,QAAQ,CAACD,KAAK;EAAE,gBAC1EP,KAAA,CAAAM,aAAA,CAACH,KAAK;IACFM,KAAK,EAAEJ,KAAK,CAACI,KAAM;IACnBC,WAAW,EAAEL,KAAK,CAACK,WAAY;IAC/BC,WAAW,EAAEN,KAAK,CAACM,WAAY;IAC/BC,IAAI,EAAEP,KAAK,CAACO,IAAK;IACjBC,QAAQ,EAAER,KAAK,CAACQ,QAAS;IACzBC,QAAQ,EAAET,KAAK,CAACS,QAAS;IACzBC,UAAU,EAAEV,KAAK,CAACU,UAAW;IAC7BC,MAAM,EAAEA,CAAA,KAAMX,KAAK,CAACW,MAAM,CAAC,CAAE;IAC7BC,IAAI,EAAC;EAAQ,CAChB,CACY,CAAC;AAE1B,CAAC,CAAC","ignoreList":[]}

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

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

package/base/Base/FieldRenderers/NumberInputsRenderer.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { Button, DelayedOnChange, FormComponentDescription, Icon, Input, Separator } from "@webiny/admin-ui";
+export const NumberInputsRenderer = createFieldRenderer(({
+  field
+}) => {
+  const values = Array.isArray(field.value) ? field.value : [];
+  const updateAt = (index, val) => {
+    const next = [...values];
+    next[index] = val;
+    field.onChange(next);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-sm"
+  }, /*#__PURE__*/React.createElement(Separator, {
+    labelPosition: "start",
+    variant: "accent"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-accent-primary text-lg font-semibold"
+  }, `${field.label ?? ""} ${values.length ? `(${values.length})` : ""}`)), field.description && /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: field.description
+  }), values.map((val, index) => /*#__PURE__*/React.createElement(DelayedOnChange, {
+    key: index,
+    value: val,
+    onChange: value => updateAt(index, value)
+  }, /*#__PURE__*/React.createElement(Input, {
+    disabled: field.disabled,
+    label: `Value ${index + 1}`,
+    placeholder: field.placeholder,
+    type: "number",
+    onEnter: () => field.addItem(""),
+    endIcon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+      label: "Delete",
+      onClick: () => field.removeItem(index),
+      className: "cursor-pointer"
+    })
+  }))), /*#__PURE__*/React.createElement(Button, {
+    disabled: field.disabled,
+    variant: "tertiary",
+    icon: /*#__PURE__*/React.createElement(AddIcon, null),
+    text: field.rendererSettings?.addItemLabel ?? "Add Value",
+    onClick: () => field.addItem("")
+  }));
+});
+
+//# sourceMappingURL=NumberInputsRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","createFieldRenderer","ReactComponent","DeleteIcon","AddIcon","Button","DelayedOnChange","FormComponentDescription","Icon","Input","Separator","NumberInputsRenderer","field","values","Array","isArray","value","updateAt","index","val","next","onChange","createElement","className","labelPosition","variant","label","length","description","text","map","key","disabled","placeholder","type","onEnter","addItem","endIcon","icon","onClick","removeItem","rendererSettings","addItemLabel"],"sources":["NumberInputsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport {\n    Button,\n    DelayedOnChange,\n    FormComponentDescription,\n    Icon,\n    Input,\n    Separator\n} from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        numberInputs: { fieldType: \"number\"; settings?: { addItemLabel?: string } };\n    }\n}\n\nexport const NumberInputsRenderer = createFieldRenderer<\"numberInputs\">(({ field }) => {\n    const values = Array.isArray(field.value) ? field.value : [];\n\n    const updateAt = (index: number, val: unknown) => {\n        const next = [...values];\n        next[index] = val as number;\n        field.onChange(next);\n    };\n\n    return (\n        <div className={\"flex flex-col gap-sm\"}>\n            <Separator labelPosition={\"start\"} variant={\"accent\"}>\n                <span className={\"text-accent-primary text-lg font-semibold\"}>\n                    {`${field.label ?? \"\"} ${values.length ? `(${values.length})` : \"\"}`}\n                </span>\n            </Separator>\n            {field.description && <FormComponentDescription text={field.description} />}\n            {values.map((val, index) => (\n                <DelayedOnChange key={index} value={val} onChange={value => updateAt(index, value)}>\n                    <Input\n                        disabled={field.disabled}\n                        label={`Value ${index + 1}`}\n                        placeholder={field.placeholder}\n                        type=\"number\"\n                        onEnter={() => field.addItem(\"\")}\n                        endIcon={\n                            <Icon\n                                icon={<DeleteIcon />}\n                                label={\"Delete\"}\n                                onClick={() => field.removeItem(index)}\n                                className={\"cursor-pointer\"}\n                            />\n                        }\n                    />\n                </DelayedOnChange>\n            ))}\n            <Button\n                disabled={field.disabled}\n                variant={\"tertiary\"}\n                icon={<AddIcon />}\n                text={field.rendererSettings?.addItemLabel ?? \"Add Value\"}\n                onClick={() => field.addItem(\"\")}\n            />\n        </div>\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,mBAAmB;AAC5B,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,SAASD,cAAc,IAAIE,OAAO,QAAQ,uBAAuB;AACjE,SACIC,MAAM,EACNC,eAAe,EACfC,wBAAwB,EACxBC,IAAI,EACJC,KAAK,EACLC,SAAS,QACN,kBAAkB;AAQzB,OAAO,MAAMC,oBAAoB,GAAGV,mBAAmB,CAAiB,CAAC;EAAEW;AAAM,CAAC,KAAK;EACnF,MAAMC,MAAM,GAAGC,KAAK,CAACC,OAAO,CAACH,KAAK,CAACI,KAAK,CAAC,GAAGJ,KAAK,CAACI,KAAK,GAAG,EAAE;EAE5D,MAAMC,QAAQ,GAAGA,CAACC,KAAa,EAAEC,GAAY,KAAK;IAC9C,MAAMC,IAAI,GAAG,CAAC,GAAGP,MAAM,CAAC;IACxBO,IAAI,CAACF,KAAK,CAAC,GAAGC,GAAa;IAC3BP,KAAK,CAACS,QAAQ,CAACD,IAAI,CAAC;EACxB,CAAC;EAED,oBACIpB,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAE;EAAuB,gBACnCvB,KAAA,CAAAsB,aAAA,CAACZ,SAAS;IAACc,aAAa,EAAE,OAAQ;IAACC,OAAO,EAAE;EAAS,gBACjDzB,KAAA,CAAAsB,aAAA;IAAMC,SAAS,EAAE;EAA4C,GACxD,GAAGX,KAAK,CAACc,KAAK,IAAI,EAAE,IAAIb,MAAM,CAACc,MAAM,GAAG,IAAId,MAAM,CAACc,MAAM,GAAG,GAAG,EAAE,EAChE,CACC,CAAC,EACXf,KAAK,CAACgB,WAAW,iBAAI5B,KAAA,CAAAsB,aAAA,CAACf,wBAAwB;IAACsB,IAAI,EAAEjB,KAAK,CAACgB;EAAY,CAAE,CAAC,EAC1Ef,MAAM,CAACiB,GAAG,CAAC,CAACX,GAAG,EAAED,KAAK,kBACnBlB,KAAA,CAAAsB,aAAA,CAAChB,eAAe;IAACyB,GAAG,EAAEb,KAAM;IAACF,KAAK,EAAEG,GAAI;IAACE,QAAQ,EAAEL,KAAK,IAAIC,QAAQ,CAACC,KAAK,EAAEF,KAAK;EAAE,gBAC/EhB,KAAA,CAAAsB,aAAA,CAACb,KAAK;IACFuB,QAAQ,EAAEpB,KAAK,CAACoB,QAAS;IACzBN,KAAK,EAAE,SAASR,KAAK,GAAG,CAAC,EAAG;IAC5Be,WAAW,EAAErB,KAAK,CAACqB,WAAY;IAC/BC,IAAI,EAAC,QAAQ;IACbC,OAAO,EAAEA,CAAA,KAAMvB,KAAK,CAACwB,OAAO,CAAC,EAAE,CAAE;IACjCC,OAAO,eACHrC,KAAA,CAAAsB,aAAA,CAACd,IAAI;MACD8B,IAAI,eAAEtC,KAAA,CAAAsB,aAAA,CAACnB,UAAU,MAAE,CAAE;MACrBuB,KAAK,EAAE,QAAS;MAChBa,OAAO,EAAEA,CAAA,KAAM3B,KAAK,CAAC4B,UAAU,CAACtB,KAAK,CAAE;MACvCK,SAAS,EAAE;IAAiB,CAC/B;EACJ,CACJ,CACY,CACpB,CAAC,eACFvB,KAAA,CAAAsB,aAAA,CAACjB,MAAM;IACH2B,QAAQ,EAAEpB,KAAK,CAACoB,QAAS;IACzBP,OAAO,EAAE,UAAW;IACpBa,IAAI,eAAEtC,KAAA,CAAAsB,aAAA,CAAClB,OAAO,MAAE,CAAE;IAClByB,IAAI,EAAEjB,KAAK,CAAC6B,gBAAgB,EAAEC,YAAY,IAAI,WAAY;IAC1DH,OAAO,EAAEA,CAAA,KAAM3B,KAAK,CAACwB,OAAO,CAAC,EAAE;EAAE,CACpC,CACA,CAAC;AAEd,CAAC,CAAC","ignoreList":[]}

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

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

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { createObjectFieldRenderer } from "../../../../features/formModel/createFieldRenderer.js";
+import { SingleValueDynamicZone } from "./SingleValueDynamicZone.js";
+import { MultiValueDynamicZone } from "./MultiValueDynamicZone.js";
+export const DynamicZoneRenderer = createObjectFieldRenderer(({
+  field
+}) => {
+  if (field.isList) {
+    return /*#__PURE__*/React.createElement(MultiValueDynamicZone, {
+      field: field,
+      showContainer: field.rendererSettings?.container !== false
+    });
+  }
+  return /*#__PURE__*/React.createElement(SingleValueDynamicZone, {
+    field: field,
+    showContainer: field.rendererSettings?.container !== false
+  });
+});
+
+//# sourceMappingURL=DynamicZoneRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","createObjectFieldRenderer","SingleValueDynamicZone","MultiValueDynamicZone","DynamicZoneRenderer","field","isList","createElement","showContainer","rendererSettings","container"],"sources":["DynamicZoneRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { SingleValueDynamicZone } from \"./SingleValueDynamicZone.js\";\nimport { MultiValueDynamicZone } from \"./MultiValueDynamicZone.js\";\n\ndeclare module \"../../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        dynamicZone: {\n            fieldType: \"object\";\n            settings?: {\n                container?: boolean;\n            };\n        };\n    }\n}\n\nexport const DynamicZoneRenderer = createObjectFieldRenderer<\"dynamicZone\">(({ field }) => {\n    if (field.isList) {\n        return (\n            <MultiValueDynamicZone\n                field={field}\n                showContainer={field.rendererSettings?.container !== false}\n            />\n        );\n    }\n\n    return (\n        <SingleValueDynamicZone\n            field={field}\n            showContainer={field.rendererSettings?.container !== false}\n        />\n    );\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,yBAAyB;AAClC,SAASC,sBAAsB;AAC/B,SAASC,qBAAqB;AAa9B,OAAO,MAAMC,mBAAmB,GAAGH,yBAAyB,CAAgB,CAAC;EAAEI;AAAM,CAAC,KAAK;EACvF,IAAIA,KAAK,CAACC,MAAM,EAAE;IACd,oBACIN,KAAA,CAAAO,aAAA,CAACJ,qBAAqB;MAClBE,KAAK,EAAEA,KAAM;MACbG,aAAa,EAAEH,KAAK,CAACI,gBAAgB,EAAEC,SAAS,KAAK;IAAM,CAC9D,CAAC;EAEV;EAEA,oBACIV,KAAA,CAAAO,aAAA,CAACL,sBAAsB;IACnBG,KAAK,EAAEA,KAAM;IACbG,aAAa,EAAEH,KAAK,CAACI,gBAAgB,EAAEC,SAAS,KAAK;EAAM,CAC9D,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}

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

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

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

@@ -0,0 +1,65 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { ReactComponent as DeleteIcon } from "@webiny/icons/delete.svg";
+import { Button, FormComponentDescription, FormComponentLabel, IconButton } from "@webiny/admin-ui";
+import { createObjectFieldRenderer } from "../../../../features/formModel/createFieldRenderer.js";
+import { NestedLayout } from "./ObjectFieldComponents.js";
+export const KeyValueTagsRenderer = createObjectFieldRenderer(({
+  field
+}) => {
+  if (!field.isList) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(KeyValueTagsList, {
+    field: field
+  });
+});
+const KeyValueTagsList = createObjectFieldRenderer(({
+  field
+}) => {
+  const settings = field.rendererSettings;
+  const hasItems = field.items.length > 0;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, field.label && /*#__PURE__*/React.createElement(FormComponentLabel, {
+    text: field.label
+  }), field.description && /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: field.description
+  }), hasItems ? /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-md"
+  }, field.items.map(item => /*#__PURE__*/React.createElement(TagRow, {
+    key: item.key,
+    item: item,
+    disabled: field.disabled
+  }))) : null, !field.disabled ? /*#__PURE__*/React.createElement("div", {
+    className: "mt-md"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => field.addItem(),
+    text: settings?.addItemLabel ?? "Add tag",
+    variant: "secondary",
+    size: "sm",
+    icon: /*#__PURE__*/React.createElement(AddIcon, null)
+  })) : null);
+});
+const TagRow = observer(({
+  item,
+  disabled
+}) => {
+  const inlineLayout = [{
+    type: "row",
+    fields: item.fields
+  }];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-sm"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-1 gap-md"
+  }, /*#__PURE__*/React.createElement(NestedLayout, {
+    layout: inlineLayout
+  })), !disabled && /*#__PURE__*/React.createElement(IconButton, {
+    variant: "ghost",
+    size: "lg",
+    icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
+    onClick: () => item.remove()
+  }));
+});
+
+//# sourceMappingURL=KeyValueTagsRenderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","observer","ReactComponent","AddIcon","DeleteIcon","Button","FormComponentDescription","FormComponentLabel","IconButton","createObjectFieldRenderer","NestedLayout","KeyValueTagsRenderer","field","isList","createElement","KeyValueTagsList","settings","rendererSettings","hasItems","items","length","Fragment","label","text","description","className","map","item","TagRow","key","disabled","onClick","addItem","addItemLabel","variant","size","icon","inlineLayout","type","fields","layout","remove"],"sources":["KeyValueTagsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete.svg\";\nimport { Button, FormComponentDescription, FormComponentLabel, IconButton } from \"@webiny/admin-ui\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport type { IObjectFieldItemVM } from \"~/features/formModel/index.js\";\nimport { NestedLayout } from \"./ObjectFieldComponents.js\";\n\ndeclare module \"../../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        keyValueTags: {\n            fieldType: \"object\";\n            settings?: { addItemLabel?: string };\n        };\n    }\n}\n\nexport const KeyValueTagsRenderer = createObjectFieldRenderer(({ field }) => {\n    if (!field.isList) {\n        return null;\n    }\n\n    return <KeyValueTagsList field={field} />;\n});\n\nconst KeyValueTagsList = createObjectFieldRenderer<\"keyValueTags\">(({ field }) => {\n    const settings = field.rendererSettings;\n\n    const hasItems = field.items.length > 0;\n\n    return (\n        <>\n            {field.label && <FormComponentLabel text={field.label} />}\n            {field.description && <FormComponentDescription text={field.description} />}\n            {hasItems ? (\n                <div className={\"flex flex-col gap-md\"}>\n                    {field.items.map(item => (\n                        <TagRow key={item.key} item={item} disabled={field.disabled} />\n                    ))}\n                </div>\n            ) : null}\n            {!field.disabled ? (\n                <div className={\"mt-md\"}>\n                    <Button\n                        onClick={() => field.addItem()}\n                        text={settings?.addItemLabel ?? \"Add tag\"}\n                        variant={\"secondary\"}\n                        size={\"sm\"}\n                        icon={<AddIcon />}\n                    />\n                </div>\n            ) : null}\n        </>\n    );\n});\n\nconst TagRow = observer(({ item, disabled }: { item: IObjectFieldItemVM; disabled: boolean }) => {\n    const inlineLayout = [{ type: \"row\" as const, fields: item.fields }];\n\n    return (\n        <div className={\"flex items-center gap-sm\"}>\n            <div className={\"flex-1 gap-md\"}>\n                <NestedLayout layout={inlineLayout} />\n            </div>\n            {!disabled && (\n                <IconButton\n                    variant={\"ghost\"}\n                    size={\"lg\"}\n                    icon={<DeleteIcon />}\n                    onClick={() => item.remove()}\n                />\n            )}\n        </div>\n    );\n});\n"],"mappings":"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","ignoreList":[]}

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

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

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":"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","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

@@ -1,8 +1,12 @@
 import React from "react";
-import type { IFieldVM, IObjectFieldVM, IObjectFieldItemVM } from "../../../../features/formModel/index.js";
+import type { IFieldVM, IObjectFieldVM, IObjectFieldItemVM, LayoutNodeVM } from "../../../../features/formModel/index.js";
 export declare const isObjectFieldVM: (field: IFieldVM) => field is IObjectFieldVM;
-export declare const ChildFields: (({ fields }: {
-    fields: IFieldVM[];
+/**
+ * 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;
 };

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

@@ -4,29 +4,25 @@ 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 { useFormViewRenderers } from "../../../../features/formModel/FormView.js";
+import { LayoutNodeRenderer } from "../../../../features/formModel/FormView.js";
 import { resolveItemTitle } from "./resolveItemTitle.js";
 export const isObjectFieldVM = field => {
   return field.type === "object";
 };
-export const ChildFields = observer(({
-  fields
+
+/**
+ * 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
 }) => {
-  const {
-    fieldRenderers
-  } = useFormViewRenderers();
   return /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col gap-4 p-sm"
-  }, fields.map(childField => {
-    const Renderer = childField.renderer ? fieldRenderers[childField.renderer] : undefined;
-    if (!Renderer) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement(Renderer, {
-      key: childField.name,
-      field: childField
-    });
-  }));
+    className: "flex flex-col gap-md"
+  }, layout.map((node, index) => /*#__PURE__*/React.createElement(LayoutNodeRenderer, {
+    key: index,
+    node: node
+  })));
 });
 export const ListItemRenderer = observer(({
   item,
@@ -68,8 +64,8 @@ export const ListItemRenderer = observer(({
     title: resolveItemTitle(item, index, label, itemTitle),
     actions: disabled ? null : actions,
     defaultOpen: false
-  }, /*#__PURE__*/React.createElement(ChildFields, {
-    fields: item.fields
+  }, /*#__PURE__*/React.createElement(NestedLayout, {
+    layout: item.layout
   })));
 });
 export const AddItemButton = ({