@webiny/app-admin 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/NumberInputsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/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"],"names":["NumberInputsRenderer","createFieldRenderer","field","values","Array","updateAt","index","val","next","Separator","FormComponentDescription","DelayedOnChange","value","Input","Icon","DeleteIcon","Button","AddIcon"],"mappings":";;;;;AAmBO,MAAMA,uBAAuBC,oBAAoC,CAAC,EAAEC,KAAK,EAAE;IAC9E,MAAMC,SAASC,MAAM,OAAO,CAACF,MAAM,KAAK,IAAIA,MAAM,KAAK,GAAG,EAAE;IAE5D,MAAMG,WAAW,CAACC,OAAeC;QAC7B,MAAMC,OAAO;eAAIL;SAAO;QACxBK,IAAI,CAACF,MAAM,GAAGC;QACdL,MAAM,QAAQ,CAACM;IACnB;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,WAASA;QAAC,eAAe;QAAS,SAAS;qBACxC,oBAAC;QAAK,WAAW;OACZ,GAAGP,MAAM,KAAK,IAAI,GAAG,CAAC,EAAEC,OAAO,MAAM,GAAG,CAAC,CAAC,EAAEA,OAAO,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,IAG3ED,MAAM,WAAW,IAAI,WAAJ,GAAI,oBAACQ,0BAAwBA;QAAC,MAAMR,MAAM,WAAW;QACtEC,OAAO,GAAG,CAAC,CAACI,KAAKD,QAAAA,WAAAA,GACd,oBAACK,iBAAeA;YAAC,KAAKL;YAAO,OAAOC;YAAK,UAAUK,CAAAA,QAASP,SAASC,OAAOM;yBACxE,oBAACC,OAAKA;YACF,UAAUX,MAAM,QAAQ;YACxB,OAAO,CAAC,MAAM,EAAEI,QAAQ,GAAG;YAC3B,aAAaJ,MAAM,WAAW;YAC9B,MAAK;YACL,SAAS,IAAMA,MAAM,OAAO,CAAC;YAC7B,uBACI,oBAACY,MAAIA;gBACD,oBAAM,oBAACC,gBAAUA;gBACjB,OAAO;gBACP,SAAS,IAAMb,MAAM,UAAU,CAACI;gBAChC,WAAW;;4BAM/B,oBAACU,QAAMA;QACH,UAAUd,MAAM,QAAQ;QACxB,SAAS;QACT,oBAAM,oBAACe,wBAAOA;QACd,MAAMf,MAAM,gBAAgB,EAAE,gBAAgB;QAC9C,SAAS,IAAMA,MAAM,OAAO,CAAC;;AAI7C"}
+{"version":3,"file":"base/Base/FieldRenderers/NumberInputsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/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    FormComponentErrorMessage,\n    IconButton,\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                <div key={index} className={\"flex items-end gap-sm\"}>\n                    <div className={\"flex-1\"}>\n                        <DelayedOnChange 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                            />\n                        </DelayedOnChange>\n                    </div>\n                    <IconButton\n                        icon={<DeleteIcon />}\n                        onClick={e => {\n                            e.stopPropagation();\n                            field.removeItem(index);\n                        }}\n                        size={\"lg\"}\n                        variant={\"ghost\"}\n                    />\n                </div>\n            ))}\n            <Button\n                disabled={field.disabled}\n                variant={\"tertiary\"}\n                icon={<AddIcon />}\n                text={field.rendererSettings?.addItemLabel ?? \"Add Value\"}\n                onClick={() => field.addItem(\"\")}\n            />\n            <FormComponentErrorMessage\n                text={field.validation.message}\n                invalid={field.validation.isValid === false}\n                disabled={field.disabled}\n            />\n        </div>\n    );\n});\n"],"names":["NumberInputsRenderer","createFieldRenderer","field","values","Array","updateAt","index","val","next","Separator","FormComponentDescription","DelayedOnChange","value","Input","IconButton","DeleteIcon","e","Button","AddIcon","FormComponentErrorMessage"],"mappings":";;;;;AAoBO,MAAMA,uBAAuBC,oBAAoC,CAAC,EAAEC,KAAK,EAAE;IAC9E,MAAMC,SAASC,MAAM,OAAO,CAACF,MAAM,KAAK,IAAIA,MAAM,KAAK,GAAG,EAAE;IAE5D,MAAMG,WAAW,CAACC,OAAeC;QAC7B,MAAMC,OAAO;eAAIL;SAAO;QACxBK,IAAI,CAACF,MAAM,GAAGC;QACdL,MAAM,QAAQ,CAACM;IACnB;IAEA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,WAASA;QAAC,eAAe;QAAS,SAAS;qBACxC,oBAAC;QAAK,WAAW;OACZ,GAAGP,MAAM,KAAK,IAAI,GAAG,CAAC,EAAEC,OAAO,MAAM,GAAG,CAAC,CAAC,EAAEA,OAAO,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI,IAG3ED,MAAM,WAAW,IAAI,WAAJ,GAAI,oBAACQ,0BAAwBA;QAAC,MAAMR,MAAM,WAAW;QACtEC,OAAO,GAAG,CAAC,CAACI,KAAKD,QAAAA,WAAAA,GACd,oBAAC;YAAI,KAAKA;YAAO,WAAW;yBACxB,oBAAC;YAAI,WAAW;yBACZ,oBAACK,iBAAeA;YAAC,OAAOJ;YAAK,UAAUK,CAAAA,QAASP,SAASC,OAAOM;yBAC5D,oBAACC,OAAKA;YACF,UAAUX,MAAM,QAAQ;YACxB,OAAO,CAAC,MAAM,EAAEI,QAAQ,GAAG;YAC3B,aAAaJ,MAAM,WAAW;YAC9B,MAAK;YACL,SAAS,IAAMA,MAAM,OAAO,CAAC;4BAIzC,oBAACY,YAAUA;YACP,oBAAM,oBAACC,gBAAUA;YACjB,SAASC,CAAAA;gBACLA,EAAE,eAAe;gBACjBd,MAAM,UAAU,CAACI;YACrB;YACA,MAAM;YACN,SAAS;4BAIrB,oBAACW,QAAMA;QACH,UAAUf,MAAM,QAAQ;QACxB,SAAS;QACT,oBAAM,oBAACgB,wBAAOA;QACd,MAAMhB,MAAM,gBAAgB,EAAE,gBAAgB;QAC9C,SAAS,IAAMA,MAAM,OAAO,CAAC;sBAEjC,oBAACiB,2BAAyBA;QACtB,MAAMjB,MAAM,UAAU,CAAC,OAAO;QAC9B,SAASA,AAA6B,UAA7BA,MAAM,UAAU,CAAC,OAAO;QACjC,UAAUA,MAAM,QAAQ;;AAIxC"}

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

@@ -4,7 +4,9 @@ declare module "../../../../features/formModel/abstractions.js" {
         dynamicZone: {
             fieldType: "object";
             settings?: {
+                open?: boolean;
                 container?: boolean;
+                addItemLabel?: string;
             };
         };
     }

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

@@ -1,14 +1,17 @@
 import react from "react";
 import { createObjectFieldRenderer } from "../../../../features/formModel/createFieldRenderer.js";
 import { SingleValueDynamicZone } from "./SingleValueDynamicZone.js";
-import { MultiValueDynamicZone } from "./MultiValueDynamicZone.js";
+import { MultiValueDynamicZone } from "./MultiValueDynamicZone/index.js";
 const DynamicZoneRenderer = createObjectFieldRenderer(({ field })=>{
+    const settings = field.rendererSettings ?? {};
     if (field.isList) return /*#__PURE__*/ react.createElement(MultiValueDynamicZone, {
         field: field,
-        showContainer: field.rendererSettings?.container !== false
+        addItemLabel: settings.addItemLabel ?? "Add Item",
+        showContainer: false !== settings.container
     });
     return /*#__PURE__*/ react.createElement(SingleValueDynamicZone, {
         field: field,
+        addItemLabel: settings.addItemLabel ?? "Add Item",
         showContainer: field.rendererSettings?.container !== false
     });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/DynamicZoneRenderer.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/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"],"names":["DynamicZoneRenderer","createObjectFieldRenderer","field","MultiValueDynamicZone","SingleValueDynamicZone"],"mappings":";;;;AAgBO,MAAMA,sBAAsBC,0BAAyC,CAAC,EAAEC,KAAK,EAAE;IAClF,IAAIA,MAAM,MAAM,EACZ,OAAO,WAAP,GACI,oBAACC,uBAAqBA;QAClB,OAAOD;QACP,eAAeA,MAAM,gBAAgB,EAAE,cAAc;;IAKjE,OAAO,WAAP,GACI,oBAACE,wBAAsBA;QACnB,OAAOF;QACP,eAAeA,MAAM,gBAAgB,EAAE,cAAc;;AAGjE"}
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/DynamicZoneRenderer.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/DynamicZoneRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { SingleValueDynamicZone } from \"./SingleValueDynamicZone.js\";\nimport { MultiValueDynamicZone } from \"./MultiValueDynamicZone/index.js\";\n\ndeclare module \"../../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        dynamicZone: {\n            fieldType: \"object\";\n            settings?: {\n                open?: boolean;\n                container?: boolean;\n                addItemLabel?: string;\n            };\n        };\n    }\n}\n\nexport const DynamicZoneRenderer = createObjectFieldRenderer<\"dynamicZone\">(({ field }) => {\n    const settings = field.rendererSettings ?? {};\n\n    if (field.isList) {\n        return (\n            <MultiValueDynamicZone\n                field={field}\n                addItemLabel={settings.addItemLabel ?? \"Add Item\"}\n                showContainer={settings.container !== false}\n            />\n        );\n    }\n\n    return (\n        <SingleValueDynamicZone\n            field={field}\n            addItemLabel={settings.addItemLabel ?? \"Add Item\"}\n            showContainer={field.rendererSettings?.container !== false}\n        />\n    );\n});\n"],"names":["DynamicZoneRenderer","createObjectFieldRenderer","field","settings","MultiValueDynamicZone","SingleValueDynamicZone"],"mappings":";;;;AAkBO,MAAMA,sBAAsBC,0BAAyC,CAAC,EAAEC,KAAK,EAAE;IAClF,MAAMC,WAAWD,MAAM,gBAAgB,IAAI,CAAC;IAE5C,IAAIA,MAAM,MAAM,EACZ,OAAO,WAAP,GACI,oBAACE,uBAAqBA;QAClB,OAAOF;QACP,cAAcC,SAAS,YAAY,IAAI;QACvC,eAAeA,AAAuB,UAAvBA,SAAS,SAAS;;IAK7C,OAAO,WAAP,GACI,oBAACE,wBAAsBA;QACnB,OAAOH;QACP,cAAcC,SAAS,YAAY,IAAI;QACvC,eAAeD,MAAM,gBAAgB,EAAE,cAAc;;AAGjE"}

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

@@ -15,7 +15,8 @@ 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
+        text: field.label,
+        hint: field.help
     }), field.description && /*#__PURE__*/ react.createElement(FormComponentDescription, {
         text: field.description
     }), hasItems ? /*#__PURE__*/ react.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/KeyValueTagsRenderer.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/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"],"names":["KeyValueTagsRenderer","createObjectFieldRenderer","field","KeyValueTagsList","settings","hasItems","FormComponentLabel","FormComponentDescription","item","TagRow","Button","AddIcon","observer","disabled","inlineLayout","NestedLayout","IconButton","DeleteIcon"],"mappings":";;;;;;;AAkBO,MAAMA,uBAAuBC,0BAA0B,CAAC,EAAEC,KAAK,EAAE;IACpE,IAAI,CAACA,MAAM,MAAM,EACb,OAAO;IAGX,OAAO,WAAP,GAAO,oBAACC,kBAAgBA;QAAC,OAAOD;;AACpC;AAEA,MAAMC,mBAAmBF,0BAA0C,CAAC,EAAEC,KAAK,EAAE;IACzE,MAAME,WAAWF,MAAM,gBAAgB;IAEvC,MAAMG,WAAWH,MAAM,KAAK,CAAC,MAAM,GAAG;IAEtC,OAAO,WAAP,GACI,0CACKA,MAAM,KAAK,IAAI,WAAJ,GAAI,oBAACI,oBAAkBA;QAAC,MAAMJ,MAAM,KAAK;QACpDA,MAAM,WAAW,IAAI,WAAJ,GAAI,oBAACK,0BAAwBA;QAAC,MAAML,MAAM,WAAW;QACtEG,WAAW,WAAXA,GACG,oBAAC;QAAI,WAAW;OACXH,MAAM,KAAK,CAAC,GAAG,CAACM,CAAAA,OAAAA,WAAAA,GACb,oBAACC,QAAMA;YAAC,KAAKD,KAAK,GAAG;YAAE,MAAMA;YAAM,UAAUN,MAAM,QAAQ;eAGnE,MACH,AAACA,MAAM,QAAQ,GAUZ,OAVe,WAAH,GACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACQ,QAAMA;QACH,SAAS,IAAMR,MAAM,OAAO;QAC5B,MAAME,UAAU,gBAAgB;QAChC,SAAS;QACT,MAAM;QACN,oBAAM,oBAACO,gBAAOA;;AAMtC;AAEA,MAAMF,SAASG,SAAS,CAAC,EAAEJ,IAAI,EAAEK,QAAQ,EAAmD;IACxF,MAAMC,eAAe;QAAC;YAAE,MAAM;YAAgB,QAAQN,KAAK,MAAM;QAAC;KAAE;IAEpE,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACO,cAAYA;QAAC,QAAQD;SAEzB,CAACD,YAAY,WAAZA,GACE,oBAACG,YAAUA;QACP,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,2BAAUA;QACjB,SAAS,IAAMT,KAAK,MAAM;;AAK9C"}
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/KeyValueTagsRenderer.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/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} hint={field.help} />}\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"],"names":["KeyValueTagsRenderer","createObjectFieldRenderer","field","KeyValueTagsList","settings","hasItems","FormComponentLabel","FormComponentDescription","item","TagRow","Button","AddIcon","observer","disabled","inlineLayout","NestedLayout","IconButton","DeleteIcon"],"mappings":";;;;;;;AAkBO,MAAMA,uBAAuBC,0BAA0B,CAAC,EAAEC,KAAK,EAAE;IACpE,IAAI,CAACA,MAAM,MAAM,EACb,OAAO;IAGX,OAAO,WAAP,GAAO,oBAACC,kBAAgBA;QAAC,OAAOD;;AACpC;AAEA,MAAMC,mBAAmBF,0BAA0C,CAAC,EAAEC,KAAK,EAAE;IACzE,MAAME,WAAWF,MAAM,gBAAgB;IAEvC,MAAMG,WAAWH,MAAM,KAAK,CAAC,MAAM,GAAG;IAEtC,OAAO,WAAP,GACI,0CACKA,MAAM,KAAK,IAAI,WAAJ,GAAI,oBAACI,oBAAkBA;QAAC,MAAMJ,MAAM,KAAK;QAAE,MAAMA,MAAM,IAAI;QACtEA,MAAM,WAAW,IAAI,WAAJ,GAAI,oBAACK,0BAAwBA;QAAC,MAAML,MAAM,WAAW;QACtEG,WAAW,WAAXA,GACG,oBAAC;QAAI,WAAW;OACXH,MAAM,KAAK,CAAC,GAAG,CAACM,CAAAA,OAAAA,WAAAA,GACb,oBAACC,QAAMA;YAAC,KAAKD,KAAK,GAAG;YAAE,MAAMA;YAAM,UAAUN,MAAM,QAAQ;eAGnE,MACH,AAACA,MAAM,QAAQ,GAUZ,OAVe,WAAH,GACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACQ,QAAMA;QACH,SAAS,IAAMR,MAAM,OAAO;QAC5B,MAAME,UAAU,gBAAgB;QAChC,SAAS;QACT,MAAM;QACN,oBAAM,oBAACO,gBAAOA;;AAMtC;AAEA,MAAMF,SAASG,SAAS,CAAC,EAAEJ,IAAI,EAAEK,QAAQ,EAAmD;IACxF,MAAMC,eAAe;QAAC;YAAE,MAAM;YAAgB,QAAQN,KAAK,MAAM;QAAC;KAAE;IAEpE,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACO,cAAYA;QAAC,QAAQD;SAEzB,CAACD,YAAY,WAAZA,GACE,oBAACG,YAAUA;QACP,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,2BAAUA;QACjB,SAAS,IAAMT,KAAK,MAAM;;AAK9C"}

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

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

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

@@ -0,0 +1,206 @@
+import react, { useEffect, useMemo, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Accordion, Button, Separator, Tooltip, useToast } from "@webiny/admin-ui";
+import { useContainer, useFeature } from "@webiny/app";
+import { hasSubtreeFocusRequest } from "../../../../../features/formModel/index.js";
+import { ReactComponent } from "@webiny/icons/content_copy.svg";
+import { ReactComponent as content_paste_svg_ReactComponent } from "@webiny/icons/content_paste.svg";
+import { ReactComponent as delete_outline_svg_ReactComponent } from "@webiny/icons/delete_outline.svg";
+import { ReactComponent as library_add_svg_ReactComponent } from "@webiny/icons/library_add.svg";
+import { ReactComponent as expand_less_svg_ReactComponent } from "@webiny/icons/expand_less.svg";
+import { ReactComponent as expand_more_svg_ReactComponent } from "@webiny/icons/expand_more.svg";
+import { ReactComponent as horizontal_rule_svg_ReactComponent } from "@webiny/icons/horizontal_rule.svg";
+import { TEMPLATE_DISCRIMINATOR } from "../../../../../features/formModel/ObjectField.js";
+import { ClipboardFeature } from "../../../../../features/clipboard/feature.js";
+import { useConfirmationDialog } from "../../../../../hooks/useConfirmationDialog.js";
+import { NestedLayout } from "../ObjectFieldComponents.js";
+import { AddTemplateButton } from "../TemplatePicker/index.js";
+import { MultiValueDynamicZonePresenter } from "./abstractions.js";
+const MultiValueDynamicZone = observer(({ field, addItemLabel, showContainer = true })=>{
+    const toast = useToast();
+    const { clipboard } = useFeature(ClipboardFeature);
+    const container = useContainer();
+    const presenter = useMemo(()=>{
+        const p = container.resolve(MultiValueDynamicZonePresenter);
+        p.init({
+            type: `dz:${field.name}`,
+            onReorder: (from, to)=>field.moveItem(from, to)
+        });
+        return p;
+    }, []);
+    useEffect(()=>()=>presenter.dispose(), [
+        presenter
+    ]);
+    const focusInside = hasSubtreeFocusRequest(field.items.flatMap((i)=>i.fields));
+    const [containerOpen, setContainerOpen] = useState(true);
+    useEffect(()=>{
+        if (focusInside) setContainerOpen(true);
+    }, [
+        focusInside
+    ]);
+    const itemCount = field.items.length;
+    const clipboardItem = clipboard.item;
+    const canPaste = null !== clipboardItem && "wby.dz" === clipboardItem.type && "string" == typeof clipboardItem.data[TEMPLATE_DISCRIMINATOR] && field.availableTemplates.some((t)=>t.id === clipboardItem.data[TEMPLATE_DISCRIMINATOR]);
+    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,
+            sortable: presenter.getItemProps(index)
+        }))) : null, !field.disabled && /*#__PURE__*/ react.createElement("div", {
+        className: "flex gap-sm items-center"
+    }, /*#__PURE__*/ react.createElement(AddTemplateButton, {
+        label: addItemLabel,
+        templates: field.availableTemplates,
+        onSelect: (template)=>field.addItem(template.id)
+    }), canPaste && /*#__PURE__*/ react.createElement(Button, {
+        size: "sm",
+        variant: "tertiary",
+        text: "Paste",
+        icon: /*#__PURE__*/ react.createElement(content_paste_svg_ReactComponent, null),
+        onClick: ()=>{
+            const pasted = clipboard.paste();
+            if (pasted) {
+                field.addItem(pasted.data);
+                toast.showSuccessToast({
+                    title: "Pasted from clipboard."
+                });
+            }
+        }
+    })));
+    if (!showContainer) return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Separator, {
+        labelPosition: "start",
+        variant: "accent"
+    }, /*#__PURE__*/ react.createElement("span", {
+        className: "text-accent-primary text-lg font-semibold"
+    }, field.label ?? "", " (", itemCount, ")")), /*#__PURE__*/ react.createElement("div", {
+        className: "mt-md"
+    }, 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(horizontal_rule_svg_ReactComponent, null)
+        }),
+        title: label,
+        open: containerOpen,
+        onOpenChange: setContainerOpen
+    }, content));
+});
+const TemplatedListItem = observer(({ item, index, total, templates, disabled, sortable })=>{
+    const toast = useToast();
+    const { clipboard } = useFeature(ClipboardFeature);
+    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 focusInside = hasSubtreeFocusRequest(item.fields);
+    const [open, setOpen] = useState(false);
+    useEffect(()=>{
+        if (focusInside) setOpen(true);
+    }, [
+        focusInside
+    ]);
+    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(expand_less_svg_ReactComponent, null),
+            content: "Move up"
+        }),
+        onClick: item.moveUp,
+        disabled: 0 === index
+    }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+        icon: /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement(expand_more_svg_ReactComponent, 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(ReactComponent, null),
+            content: "Copy to clipboard"
+        }),
+        onClick: ()=>{
+            clipboard.copy({
+                type: "wby.dz",
+                data: item.getClonedData()
+            });
+            toast.showSuccessToast({
+                title: "Copied to clipboard."
+            });
+        }
+    }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+        icon: /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement(library_add_svg_ReactComponent, null),
+            content: "Duplicate"
+        }),
+        onClick: item.duplicate
+    }), /*#__PURE__*/ react.createElement(Accordion.Item.Action, {
+        icon: /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement(delete_outline_svg_ReactComponent, null),
+            content: "Delete"
+        }),
+        onClick: onDelete
+    }));
+    return /*#__PURE__*/ react.createElement("div", {
+        ref: sortable.ref,
+        "data-sortable-item": "",
+        className: "relative",
+        style: {
+            opacity: sortable.isDragging ? 0.4 : 1
+        }
+    }, "top" === sortable.closestEdge && /*#__PURE__*/ react.createElement(DropIndicator, {
+        position: "top",
+        isFirst: 0 === index
+    }), /*#__PURE__*/ react.createElement(Accordion.Item, {
+        title: title,
+        actions: disabled ? null : actions,
+        open: open,
+        onOpenChange: setOpen,
+        draggable: !disabled,
+        dragHandleRef: sortable.handleRef
+    }, /*#__PURE__*/ react.createElement(NestedLayout, {
+        layout: item.layout
+    })), "bottom" === sortable.closestEdge && /*#__PURE__*/ react.createElement(DropIndicator, {
+        position: "bottom",
+        isLast: index === total - 1
+    }));
+});
+const DropIndicator = ({ position, isFirst = false, isLast = false })=>{
+    let offset = "calc(var(--spacing-md) / -2)";
+    if ("top" === position && isFirst) offset = "0px";
+    if ("bottom" === position && isLast) offset = "0px";
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "absolute left-0 right-0 z-10",
+        style: {
+            [position]: offset,
+            transform: "top" === position ? "translateY(-50%)" : "translateY(50%)"
+        }
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "w-full h-[2px] bg-primary rounded-full"
+    }));
+};
+export { MultiValueDynamicZone };
+
+//# sourceMappingURL=MultiValueDynamicZone.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone/MultiValueDynamicZone.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone/MultiValueDynamicZone.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Button, Tooltip, useToast } from \"@webiny/admin-ui\";\nimport { useFeature, useContainer } from \"@webiny/app\";\nimport { hasSubtreeFocusRequest } from \"~/features/formModel/index.js\";\nimport { ReactComponent as CopyIcon } from \"@webiny/icons/content_copy.svg\";\nimport { ReactComponent as PasteIcon } from \"@webiny/icons/content_paste.svg\";\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 { TEMPLATE_DISCRIMINATOR } from \"~/features/formModel/ObjectField.js\";\nimport { ClipboardFeature } from \"~/features/clipboard/feature.js\";\nimport { useConfirmationDialog } from \"~/hooks/useConfirmationDialog.js\";\nimport { NestedLayout } from \"../ObjectFieldComponents.js\";\nimport { AddTemplateButton } from \"../TemplatePicker/index.js\";\nimport {\n    MultiValueDynamicZonePresenter,\n    type IMultiValueDynamicZonePresenter\n} from \"./abstractions.js\";\nimport type { ISortableItemProps } from \"~/presentation/sortable/index.js\";\nimport { Separator } from \"@webiny/admin-ui\";\n\ninterface MultiValueDynamicZoneProps {\n    field: IObjectFieldVM;\n    addItemLabel: string;\n    showContainer?: boolean;\n}\n\nexport const MultiValueDynamicZone = observer(\n    ({ field, addItemLabel, showContainer = true }: MultiValueDynamicZoneProps) => {\n        const toast = useToast();\n        const { clipboard } = useFeature(ClipboardFeature);\n        const container = useContainer();\n\n        const presenter = useMemo<IMultiValueDynamicZonePresenter>(() => {\n            const p = container.resolve(MultiValueDynamicZonePresenter);\n            p.init({ type: `dz:${field.name}`, onReorder: (from, to) => field.moveItem(from, to) });\n            return p;\n        }, []);\n\n        useEffect(() => {\n            return () => presenter.dispose();\n        }, [presenter]);\n\n        // Force the DZ list container open when a focus request lands anywhere\n        // in its subtree, so \"jump to field\" can cascade through collapsed levels.\n        const focusInside = hasSubtreeFocusRequest(field.items.flatMap(i => i.fields));\n        const [containerOpen, setContainerOpen] = useState(true);\n        useEffect(() => {\n            if (focusInside) {\n                setContainerOpen(true);\n            }\n        }, [focusInside]);\n\n        const itemCount = field.items.length;\n\n        const clipboardItem = clipboard.item;\n        const canPaste =\n            clipboardItem !== null &&\n            clipboardItem.type === \"wby.dz\" &&\n            typeof clipboardItem.data[TEMPLATE_DISCRIMINATOR] === \"string\" &&\n            field.availableTemplates.some(t => t.id === clipboardItem.data[TEMPLATE_DISCRIMINATOR]);\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                                sortable={presenter.getItemProps(index)}\n                            />\n                        ))}\n                    </Accordion>\n                ) : null}\n                {!field.disabled && (\n                    <div className={\"flex gap-sm items-center\"}>\n                        <AddTemplateButton\n                            label={addItemLabel}\n                            templates={field.availableTemplates}\n                            onSelect={template => field.addItem(template.id)}\n                        />\n                        {canPaste && (\n                            <Button\n                                size={\"sm\"}\n                                variant={\"tertiary\"}\n                                text={\"Paste\"}\n                                icon={<PasteIcon />}\n                                onClick={() => {\n                                    const pasted = clipboard.paste();\n                                    if (pasted) {\n                                        field.addItem(pasted.data);\n                                        toast.showSuccessToast({\n                                            title: \"Pasted from clipboard.\"\n                                        });\n                                    }\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </div>\n        );\n\n        if (!showContainer) {\n            return (\n                <>\n                    <Separator labelPosition={\"start\"} variant={\"accent\"}>\n                        <span className={\"text-accent-primary text-lg font-semibold\"}>\n                            {field.label ?? \"\"} ({itemCount})\n                        </span>\n                    </Separator>\n                    <div className={\"mt-md\"}>{content}</div>\n                </>\n            );\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                    open={containerOpen}\n                    onOpenChange={setContainerOpen}\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    sortable: ISortableItemProps;\n}\n\nconst TemplatedListItem = observer(\n    ({ item, index, total, templates, disabled, sortable }: TemplatedListItemProps) => {\n        const toast = useToast();\n        const { clipboard } = useFeature(ClipboardFeature);\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        // Force this item open when a focus request lands anywhere in its subtree.\n        const focusInside = hasSubtreeFocusRequest(item.fields);\n        const [open, setOpen] = useState(false);\n        useEffect(() => {\n            if (focusInside) {\n                setOpen(true);\n            }\n        }, [focusInside]);\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={<CopyIcon />} content={\"Copy to clipboard\"} />}\n                    onClick={() => {\n                        clipboard.copy({ type: \"wby.dz\", data: item.getClonedData() });\n                        toast.showSuccessToast({ title: \"Copied to clipboard.\" });\n                    }}\n                />\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            <div\n                ref={sortable.ref}\n                data-sortable-item=\"\"\n                className={\"relative\"}\n                style={{ opacity: sortable.isDragging ? 0.4 : 1 }}\n            >\n                {sortable.closestEdge === \"top\" && (\n                    <DropIndicator position={\"top\"} isFirst={index === 0} />\n                )}\n                <Accordion.Item\n                    title={title}\n                    actions={disabled ? null : actions}\n                    open={open}\n                    onOpenChange={setOpen}\n                    draggable={!disabled}\n                    dragHandleRef={sortable.handleRef}\n                >\n                    <NestedLayout layout={item.layout} />\n                </Accordion.Item>\n                {sortable.closestEdge === \"bottom\" && (\n                    <DropIndicator position={\"bottom\"} isLast={index === total - 1} />\n                )}\n            </div>\n        );\n    }\n);\n\nconst DropIndicator = ({\n    position,\n    isFirst = false,\n    isLast = false\n}: {\n    position: \"top\" | \"bottom\";\n    isFirst?: boolean;\n    isLast?: boolean;\n}) => {\n    let offset = \"calc(var(--spacing-md) / -2)\";\n    if (position === \"top\" && isFirst) {\n        offset = \"0px\";\n    }\n    if (position === \"bottom\" && isLast) {\n        offset = \"0px\";\n    }\n\n    return (\n        <div\n            className={\"absolute left-0 right-0 z-10\"}\n            style={{\n                [position]: offset,\n                transform: position === \"top\" ? \"translateY(-50%)\" : \"translateY(50%)\"\n            }}\n        >\n            <div className={\"w-full h-[2px] bg-primary rounded-full\"} />\n        </div>\n    );\n};\n"],"names":["MultiValueDynamicZone","observer","field","addItemLabel","showContainer","toast","useToast","clipboard","useFeature","ClipboardFeature","container","useContainer","presenter","useMemo","p","MultiValueDynamicZonePresenter","from","to","useEffect","focusInside","hasSubtreeFocusRequest","i","containerOpen","setContainerOpen","useState","itemCount","clipboardItem","canPaste","TEMPLATE_DISCRIMINATOR","t","content","Accordion","item","index","TemplatedListItem","AddTemplateButton","template","Button","PasteIcon","pasted","Separator","label","HorizontalRuleIcon","total","templates","disabled","sortable","showConfirmation","useConfirmationDialog","title","open","setOpen","onDelete","actions","Tooltip","ArrowUpIcon","ArrowDownIcon","CopyIcon","CloneIcon","DeleteIcon","DropIndicator","NestedLayout","position","isFirst","isLast","offset"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+import type { ISortablePresenter, ISortableItemProps } from "../../../../../presentation/sortable/abstractions.js";
+import { type IMultiValueDynamicZonePresenter, type IMultiValueDynamicZonePresenterConfig } from "./abstractions.js";
+declare class MultiValueDynamicZonePresenterImpl implements IMultiValueDynamicZonePresenter {
+    private sortable;
+    constructor(sortable: ISortablePresenter);
+    init(config: IMultiValueDynamicZonePresenterConfig): void;
+    getItemProps(index: number): ISortableItemProps;
+    dispose(): void;
+}
+export declare const MultiValueDynamicZonePresenter: typeof MultiValueDynamicZonePresenterImpl & {
+    __abstraction: import("@webiny/di").Abstraction<IMultiValueDynamicZonePresenter>;
+};
+export {};

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

@@ -0,0 +1,28 @@
+import { SortablePresenter } from "../../../../../presentation/sortable/abstractions.js";
+import { MultiValueDynamicZonePresenter } from "./abstractions.js";
+class MultiValueDynamicZonePresenterImpl {
+    constructor(sortable){
+        this.sortable = sortable;
+    }
+    init(config) {
+        this.sortable.init({
+            type: config.type,
+            onReorder: config.onReorder
+        });
+    }
+    getItemProps(index) {
+        return this.sortable.getItemProps(index);
+    }
+    dispose() {
+        this.sortable.dispose();
+    }
+}
+const MultiValueDynamicZonePresenter_MultiValueDynamicZonePresenter = MultiValueDynamicZonePresenter.createImplementation({
+    implementation: MultiValueDynamicZonePresenterImpl,
+    dependencies: [
+        SortablePresenter
+    ]
+});
+export { MultiValueDynamicZonePresenter_MultiValueDynamicZonePresenter as MultiValueDynamicZonePresenter };
+
+//# sourceMappingURL=MultiValueDynamicZonePresenter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone/MultiValueDynamicZonePresenter.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone/MultiValueDynamicZonePresenter.ts"],"sourcesContent":["import type {\n    ISortablePresenter,\n    ISortableItemProps\n} from \"~/presentation/sortable/abstractions.js\";\nimport { SortablePresenter } from \"~/presentation/sortable/abstractions.js\";\nimport {\n    MultiValueDynamicZonePresenter as Abstraction,\n    type IMultiValueDynamicZonePresenter,\n    type IMultiValueDynamicZonePresenterConfig\n} from \"./abstractions.js\";\n\nclass MultiValueDynamicZonePresenterImpl implements IMultiValueDynamicZonePresenter {\n    private sortable: ISortablePresenter;\n\n    constructor(sortable: ISortablePresenter) {\n        this.sortable = sortable;\n    }\n\n    init(config: IMultiValueDynamicZonePresenterConfig): void {\n        this.sortable.init({ type: config.type, onReorder: config.onReorder });\n    }\n\n    getItemProps(index: number): ISortableItemProps {\n        return this.sortable.getItemProps(index);\n    }\n\n    dispose(): void {\n        this.sortable.dispose();\n    }\n}\n\nexport const MultiValueDynamicZonePresenter = Abstraction.createImplementation({\n    implementation: MultiValueDynamicZonePresenterImpl,\n    dependencies: [SortablePresenter]\n});\n"],"names":["MultiValueDynamicZonePresenterImpl","sortable","config","index","MultiValueDynamicZonePresenter","Abstraction","SortablePresenter"],"mappings":";;AAWA,MAAMA;IAGF,YAAYC,QAA4B,CAAE;QACtC,IAAI,CAAC,QAAQ,GAAGA;IACpB;IAEA,KAAKC,MAA6C,EAAQ;QACtD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YAAE,MAAMA,OAAO,IAAI;YAAE,WAAWA,OAAO,SAAS;QAAC;IACxE;IAEA,aAAaC,KAAa,EAAsB;QAC5C,OAAO,IAAI,CAAC,QAAQ,CAAC,YAAY,CAACA;IACtC;IAEA,UAAgB;QACZ,IAAI,CAAC,QAAQ,CAAC,OAAO;IACzB;AACJ;AAEO,MAAMC,gEAAiCC,+BAAAA,oBAAgC,CAAC;IAC3E,gBAAgBL;IAChB,cAAc;QAACM;KAAkB;AACrC"}

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

@@ -0,0 +1,15 @@
+import type { ISortableItemProps } from "../../../../../presentation/sortable/abstractions.js";
+export interface IMultiValueDynamicZonePresenterConfig {
+    type: string;
+    onReorder: (fromIndex: number, toIndex: number) => void;
+}
+export interface IMultiValueDynamicZonePresenter {
+    init(config: IMultiValueDynamicZonePresenterConfig): void;
+    getItemProps(index: number): ISortableItemProps;
+    dispose(): void;
+}
+export declare const MultiValueDynamicZonePresenter: import("@webiny/di").Abstraction<IMultiValueDynamicZonePresenter>;
+export declare namespace MultiValueDynamicZonePresenter {
+    type Interface = IMultiValueDynamicZonePresenter;
+    type Config = IMultiValueDynamicZonePresenterConfig;
+}

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

@@ -0,0 +1,5 @@
+import { createAbstraction } from "@webiny/feature/admin";
+const MultiValueDynamicZonePresenter = createAbstraction("MultiValueDynamicZonePresenter");
+export { MultiValueDynamicZonePresenter };
+
+//# sourceMappingURL=abstractions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone/abstractions.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone/abstractions.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type { ISortableItemProps } from \"~/presentation/sortable/abstractions.js\";\n\nexport interface IMultiValueDynamicZonePresenterConfig {\n    type: string;\n    onReorder: (fromIndex: number, toIndex: number) => void;\n}\n\nexport interface IMultiValueDynamicZonePresenter {\n    init(config: IMultiValueDynamicZonePresenterConfig): void;\n    getItemProps(index: number): ISortableItemProps;\n    dispose(): void;\n}\n\nexport const MultiValueDynamicZonePresenter = createAbstraction<IMultiValueDynamicZonePresenter>(\n    \"MultiValueDynamicZonePresenter\"\n);\n\nexport namespace MultiValueDynamicZonePresenter {\n    export type Interface = IMultiValueDynamicZonePresenter;\n    export type Config = IMultiValueDynamicZonePresenterConfig;\n}\n"],"names":["MultiValueDynamicZonePresenter","createAbstraction"],"mappings":";AAcO,MAAMA,iCAAiCC,kBAC1C"}

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

@@ -0,0 +1 @@
+export declare const MultiValueDynamicZoneFeature: import("@webiny/feature/admin").FeatureDefinition<any, []>;

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

@@ -0,0 +1,11 @@
+import { createFeature } from "@webiny/feature/admin";
+import { MultiValueDynamicZonePresenter } from "./MultiValueDynamicZonePresenter.js";
+const MultiValueDynamicZoneFeature = createFeature({
+    name: "MultiValueDynamicZone",
+    register (container) {
+        container.register(MultiValueDynamicZonePresenter);
+    }
+});
+export { MultiValueDynamicZoneFeature };
+
+//# sourceMappingURL=feature.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone/feature.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/MultiValueDynamicZone/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { MultiValueDynamicZonePresenter } from \"./MultiValueDynamicZonePresenter.js\";\n\nexport const MultiValueDynamicZoneFeature = createFeature({\n    name: \"MultiValueDynamicZone\",\n    register(container) {\n        container.register(MultiValueDynamicZonePresenter);\n    }\n});\n"],"names":["MultiValueDynamicZoneFeature","createFeature","container","MultiValueDynamicZonePresenter"],"mappings":";;AAGO,MAAMA,+BAA+BC,cAAc;IACtD,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC;IACvB;AACJ"}

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

@@ -0,0 +1,2 @@
+export { MultiValueDynamicZonePresenter, type IMultiValueDynamicZonePresenter, type IMultiValueDynamicZonePresenterConfig } from "./abstractions.js";
+export { MultiValueDynamicZone } from "./MultiValueDynamicZone.js";

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

@@ -0,0 +1,2 @@
+export { MultiValueDynamicZonePresenter } from "./abstractions.js";
+export { MultiValueDynamicZone } from "./MultiValueDynamicZone.js";

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

@@ -7,11 +7,12 @@ declare module "../../../../features/formModel/abstractions.js" {
                 open?: boolean;
                 container?: boolean;
                 itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);
+                itemDescription?: string | ((data: Record<string, unknown>, index: number) => string);
                 addItemLabel?: string;
             };
         };
     }
 }
 export declare const ObjectAccordionMultipleRenderer: React.ComponentType<{
-    field: import("../../../../index.js").IFieldVM;
+    field: import("~/features/formModel/index.js").IFieldVM;
 }>;

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

@@ -1,9 +1,20 @@
-import react from "react";
+import react, { useEffect, useMemo, useState } from "react";
+import { observer } from "mobx-react-lite";
 import { Accordion } from "@webiny/admin-ui";
+import { useContainer } from "@webiny/app";
 import { createObjectFieldRenderer } from "../../../../features/formModel/createFieldRenderer.js";
 import { AddItemButton, ListItemRenderer } from "./ObjectFieldComponents.js";
+import { SortablePresenter } from "../../../../presentation/sortable/index.js";
+import { hasSubtreeFocusRequest } from "../../../../features/formModel/index.js";
 const ObjectAccordionMultipleRenderer = createObjectFieldRenderer(({ field })=>{
     if (!field.isList) return null;
+    const focusInside = hasSubtreeFocusRequest(field.items.flatMap((i)=>i.fields));
+    const [open, setOpen] = useState(true);
+    useEffect(()=>{
+        if (focusInside) setOpen(true);
+    }, [
+        focusInside
+    ]);
     const settings = field.rendererSettings;
     const showContainer = settings?.container !== false;
     const addButton = /*#__PURE__*/ react.createElement(AddItemButton, {
@@ -17,20 +28,34 @@ const ObjectAccordionMultipleRenderer = createObjectFieldRenderer(({ field })=>{
         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, {
+    return /*#__PURE__*/ react.createElement(Accordion, {
         background: "base",
         variant: "container"
     }, /*#__PURE__*/ react.createElement(Accordion.Item, {
         title: label,
-        defaultOpen: true
+        description: field.description,
+        open: open,
+        onOpenChange: setOpen
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-lg"
     }, /*#__PURE__*/ react.createElement(ListItems, {
         field: field
-    }))), addButton);
+    }), addButton)));
 });
-const ListItems = createObjectFieldRenderer(({ field })=>{
+const ListItems = observer(({ field })=>{
     const settings = field.rendererSettings;
+    const container = useContainer();
+    const sortable = useMemo(()=>{
+        const p = container.resolve(SortablePresenter);
+        p.init({
+            type: `obj:${field.name}`,
+            onReorder: (from, to)=>field.moveItem(from, to)
+        });
+        return p;
+    }, []);
+    useEffect(()=>()=>sortable.dispose(), [
+        sortable
+    ]);
     return /*#__PURE__*/ react.createElement("div", {
         className: "flex flex-col gap-md"
     }, field.items.map((item, index)=>/*#__PURE__*/ react.createElement(ListItemRenderer, {
@@ -40,7 +65,9 @@ const ListItems = createObjectFieldRenderer(({ field })=>{
             total: field.items.length,
             label: field.label,
             itemTitle: settings?.itemTitle,
-            disabled: field.disabled
+            itemDescription: settings?.itemDescription,
+            disabled: field.disabled,
+            sortable: sortable.getItemProps(index)
         })));
 });
 export { ObjectAccordionMultipleRenderer };

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/ObjectAccordionMultipleRenderer.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/ObjectAccordionMultipleRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { ListItemRenderer, AddItemButton } from \"./ObjectFieldComponents.js\";\n\ndeclare module \"../../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        objectAccordionMultiple: {\n            fieldType: \"object\";\n            settings?: {\n                open?: boolean;\n                container?: boolean;\n                itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);\n                addItemLabel?: string;\n            };\n        };\n    }\n}\n\nexport const ObjectAccordionMultipleRenderer = createObjectFieldRenderer<\"objectAccordionMultiple\">(\n    ({ field }) => {\n        if (!field.isList) {\n            return null;\n        }\n\n        const settings = field.rendererSettings;\n        const showContainer = settings?.container !== false;\n\n        const addButton = (\n            <AddItemButton\n                label={settings?.addItemLabel ?? `Add ${field.label || \"Item\"}`}\n                disabled={field.disabled}\n                onAdd={() => field.addItem()}\n            />\n        );\n\n        if (!showContainer) {\n            return (\n                <div className={\"flex flex-col gap-lg\"}>\n                    <ListItems field={field} />\n                    {addButton}\n                </div>\n            );\n        }\n\n        const label = `${field.label || \"\"} ${field.items.length ? `(${field.items.length})` : \"\"}`;\n\n        return (\n            <div className={\"flex flex-col gap-lg\"}>\n                <Accordion background={\"base\"} variant={\"container\"}>\n                    <Accordion.Item title={label} defaultOpen={true}>\n                        <ListItems field={field} />\n                    </Accordion.Item>\n                </Accordion>\n                {addButton}\n            </div>\n        );\n    }\n);\n\nconst ListItems = createObjectFieldRenderer<\"objectAccordionMultiple\">(({ field }) => {\n    const settings = field.rendererSettings;\n\n    return (\n        <div className={\"flex flex-col gap-md\"}>\n            {field.items.map((item, index) => (\n                <ListItemRenderer\n                    key={item.key}\n                    item={item}\n                    index={index}\n                    total={field.items.length}\n                    label={field.label}\n                    itemTitle={settings?.itemTitle}\n                    disabled={field.disabled}\n                />\n            ))}\n        </div>\n    );\n});\n"],"names":["ObjectAccordionMultipleRenderer","createObjectFieldRenderer","field","settings","showContainer","addButton","AddItemButton","ListItems","label","Accordion","item","index","ListItemRenderer"],"mappings":";;;;AAmBO,MAAMA,kCAAkCC,0BAC3C,CAAC,EAAEC,KAAK,EAAE;IACN,IAAI,CAACA,MAAM,MAAM,EACb,OAAO;IAGX,MAAMC,WAAWD,MAAM,gBAAgB;IACvC,MAAME,gBAAgBD,UAAU,cAAc;IAE9C,MAAME,YAAY,WAAZA,GACF,oBAACC,eAAaA;QACV,OAAOH,UAAU,gBAAgB,CAAC,IAAI,EAAED,MAAM,KAAK,IAAI,QAAQ;QAC/D,UAAUA,MAAM,QAAQ;QACxB,OAAO,IAAMA,MAAM,OAAO;;IAIlC,IAAI,CAACE,eACD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACG,WAASA;QAAC,OAAOL;QACjBG;IAKb,MAAMG,QAAQ,GAAGN,MAAM,KAAK,IAAI,GAAG,CAAC,EAAEA,MAAM,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAEA,MAAM,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI;IAE3F,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACO,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QAAC,OAAOD;QAAO,aAAa;qBACvC,oBAACD,WAASA;QAAC,OAAOL;UAGzBG;AAGb;AAGJ,MAAME,YAAYN,0BAAqD,CAAC,EAAEC,KAAK,EAAE;IAC7E,MAAMC,WAAWD,MAAM,gBAAgB;IAEvC,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXA,MAAM,KAAK,CAAC,GAAG,CAAC,CAACQ,MAAMC,QAAAA,WAAAA,GACpB,oBAACC,kBAAgBA;YACb,KAAKF,KAAK,GAAG;YACb,MAAMA;YACN,OAAOC;YACP,OAAOT,MAAM,KAAK,CAAC,MAAM;YACzB,OAAOA,MAAM,KAAK;YAClB,WAAWC,UAAU;YACrB,UAAUD,MAAM,QAAQ;;AAK5C"}
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/ObjectAccordionMultipleRenderer.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/ObjectAccordionMultipleRenderer.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion } from \"@webiny/admin-ui\";\nimport { useContainer } from \"@webiny/app\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { ListItemRenderer, AddItemButton } from \"./ObjectFieldComponents.js\";\nimport { SortablePresenter } from \"~/presentation/sortable/index.js\";\nimport type { IObjectFieldVM } from \"~/features/formModel/index.js\";\nimport { hasSubtreeFocusRequest } from \"~/features/formModel/index.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                itemDescription?:\n                    | string\n                    | ((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        // Force the list container open when a focus request lands anywhere in\n        // its subtree, so \"jump to field\" can cascade through collapsed levels.\n        const focusInside = hasSubtreeFocusRequest(field.items.flatMap(i => i.fields));\n        const [open, setOpen] = useState(true);\n        useEffect(() => {\n            if (focusInside) {\n                setOpen(true);\n            }\n        }, [focusInside]);\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            <Accordion background={\"base\"} variant={\"container\"}>\n                <Accordion.Item\n                    title={label}\n                    description={field.description}\n                    open={open}\n                    onOpenChange={setOpen}\n                >\n                    <div className={\"flex flex-col gap-lg\"}>\n                        <ListItems field={field} />\n                        {addButton}\n                    </div>\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n\ninterface ListItemsProps {\n    field: IObjectFieldVM;\n}\n\nconst ListItems = observer(({ field }: ListItemsProps) => {\n    const settings = field.rendererSettings as\n        | {\n              itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);\n              itemDescription?: string | ((data: Record<string, unknown>, index: number) => string);\n          }\n        | undefined;\n\n    const container = useContainer();\n    const sortable = useMemo(() => {\n        const p = container.resolve(SortablePresenter);\n        p.init({ type: `obj:${field.name}`, onReorder: (from, to) => field.moveItem(from, to) });\n        return p;\n    }, []);\n\n    useEffect(() => {\n        return () => sortable.dispose();\n    }, [sortable]);\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                    itemDescription={settings?.itemDescription}\n                    disabled={field.disabled}\n                    sortable={sortable.getItemProps(index)}\n                />\n            ))}\n        </div>\n    );\n});\n"],"names":["ObjectAccordionMultipleRenderer","createObjectFieldRenderer","field","focusInside","hasSubtreeFocusRequest","i","open","setOpen","useState","useEffect","settings","showContainer","addButton","AddItemButton","ListItems","label","Accordion","observer","container","useContainer","sortable","useMemo","p","SortablePresenter","from","to","item","index","ListItemRenderer"],"mappings":";;;;;;;;AA2BO,MAAMA,kCAAkCC,0BAC3C,CAAC,EAAEC,KAAK,EAAE;IACN,IAAI,CAACA,MAAM,MAAM,EACb,OAAO;IAKX,MAAMC,cAAcC,uBAAuBF,MAAM,KAAK,CAAC,OAAO,CAACG,CAAAA,IAAKA,EAAE,MAAM;IAC5E,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IACjCC,UAAU;QACN,IAAIN,aACAI,QAAQ;IAEhB,GAAG;QAACJ;KAAY;IAEhB,MAAMO,WAAWR,MAAM,gBAAgB;IACvC,MAAMS,gBAAgBD,UAAU,cAAc;IAE9C,MAAME,YAAY,WAAZA,GACF,oBAACC,eAAaA;QACV,OAAOH,UAAU,gBAAgB,CAAC,IAAI,EAAER,MAAM,KAAK,IAAI,QAAQ;QAC/D,UAAUA,MAAM,QAAQ;QACxB,OAAO,IAAMA,MAAM,OAAO;;IAIlC,IAAI,CAACS,eACD,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACG,WAASA;QAAC,OAAOZ;QACjBU;IAKb,MAAMG,QAAQ,GAAGb,MAAM,KAAK,IAAI,GAAG,CAAC,EAAEA,MAAM,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAEA,MAAM,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,IAAI;IAE3F,OAAO,WAAP,GACI,oBAACc,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,OAAOD;QACP,aAAab,MAAM,WAAW;QAC9B,MAAMI;QACN,cAAcC;qBAEd,oBAAC;QAAI,WAAW;qBACZ,oBAACO,WAASA;QAAC,OAAOZ;QACjBU;AAKrB;AAOJ,MAAME,YAAYG,SAAS,CAAC,EAAEf,KAAK,EAAkB;IACjD,MAAMQ,WAAWR,MAAM,gBAAgB;IAOvC,MAAMgB,YAAYC;IAClB,MAAMC,WAAWC,QAAQ;QACrB,MAAMC,IAAIJ,UAAU,OAAO,CAACK;QAC5BD,EAAE,IAAI,CAAC;YAAE,MAAM,CAAC,IAAI,EAAEpB,MAAM,IAAI,EAAE;YAAE,WAAW,CAACsB,MAAMC,KAAOvB,MAAM,QAAQ,CAACsB,MAAMC;QAAI;QACtF,OAAOH;IACX,GAAG,EAAE;IAELb,UAAU,IACC,IAAMW,SAAS,OAAO,IAC9B;QAACA;KAAS;IAEb,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXlB,MAAM,KAAK,CAAC,GAAG,CAAC,CAACwB,MAAMC,QAAAA,WAAAA,GACpB,oBAACC,kBAAgBA;YACb,KAAKF,KAAK,GAAG;YACb,MAAMA;YACN,OAAOC;YACP,OAAOzB,MAAM,KAAK,CAAC,MAAM;YACzB,OAAOA,MAAM,KAAK;YAClB,WAAWQ,UAAU;YACrB,iBAAiBA,UAAU;YAC3B,UAAUR,MAAM,QAAQ;YACxB,UAAUkB,SAAS,YAAY,CAACO;;AAKpD"}