@webiny/app-admin 6.6.0-alpha.0 → 6.6.0-alpha.2

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 } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Button, Tooltip, useToast } from \"@webiny/admin-ui\";\nimport { useFeature, useContainer } from \"@webiny/app\";\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.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        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                    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    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        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                    defaultOpen={false}\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","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","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

@@ -14,5 +14,5 @@ declare module "../../../../features/formModel/abstractions.js" {
     }
 }
 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,7 +1,10 @@
-import react from "react";
+import react, { useEffect, useMemo } 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";
 const ObjectAccordionMultipleRenderer = createObjectFieldRenderer(({ field })=>{
     if (!field.isList) return null;
     const settings = field.rendererSettings;
@@ -30,8 +33,20 @@ const ObjectAccordionMultipleRenderer = createObjectFieldRenderer(({ field })=>{
         field: field
     }), 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, {
@@ -42,7 +57,8 @@ const ListItems = createObjectFieldRenderer(({ field })=>{
             label: field.label,
             itemTitle: settings?.itemTitle,
             itemDescription: settings?.itemDescription,
-            disabled: field.disabled
+            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                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        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 title={label} description={field.description} defaultOpen={true}>\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\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                    itemDescription={settings?.itemDescription}\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":";;;;AAsBO,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,oBAACO,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QAAC,OAAOD;QAAO,aAAaN,MAAM,WAAW;QAAE,aAAa;qBACvE,oBAAC;QAAI,WAAW;qBACZ,oBAACK,WAASA;QAAC,OAAOL;QACjBG;AAKrB;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,iBAAiBA,UAAU;YAC3B,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 } 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\";\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        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 title={label} description={field.description} defaultOpen={true}>\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","settings","showContainer","addButton","AddItemButton","ListItems","label","Accordion","observer","container","useContainer","sortable","useMemo","p","SortablePresenter","from","to","useEffect","item","index","ListItemRenderer"],"mappings":";;;;;;;AA0BO,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,oBAACO,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QAAC,OAAOD;QAAO,aAAaN,MAAM,WAAW;QAAE,aAAa;qBACvE,oBAAC;QAAI,WAAW;qBACZ,oBAACK,WAASA;QAAC,OAAOL;QACjBG;AAKrB;AAOJ,MAAME,YAAYG,SAAS,CAAC,EAAER,KAAK,EAAkB;IACjD,MAAMC,WAAWD,MAAM,gBAAgB;IAOvC,MAAMS,YAAYC;IAClB,MAAMC,WAAWC,QAAQ;QACrB,MAAMC,IAAIJ,UAAU,OAAO,CAACK;QAC5BD,EAAE,IAAI,CAAC;YAAE,MAAM,CAAC,IAAI,EAAEb,MAAM,IAAI,EAAE;YAAE,WAAW,CAACe,MAAMC,KAAOhB,MAAM,QAAQ,CAACe,MAAMC;QAAI;QACtF,OAAOH;IACX,GAAG,EAAE;IAELI,UAAU,IACC,IAAMN,SAAS,OAAO,IAC9B;QAACA;KAAS;IAEb,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXX,MAAM,KAAK,CAAC,GAAG,CAAC,CAACkB,MAAMC,QAAAA,WAAAA,GACpB,oBAACC,kBAAgBA;YACb,KAAKF,KAAK,GAAG;YACb,MAAMA;YACN,OAAOC;YACP,OAAOnB,MAAM,KAAK,CAAC,MAAM;YACzB,OAAOA,MAAM,KAAK;YAClB,WAAWC,UAAU;YACrB,iBAAiBA,UAAU;YAC3B,UAAUD,MAAM,QAAQ;YACxB,UAAUW,SAAS,YAAY,CAACQ;;AAKpD"}

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

@@ -1,13 +1,14 @@
 import React from "react";
 import type { IObjectFieldItemVM, LayoutNodeVM } from "../../../../features/formModel/index.js";
-/**
- * Walks a resolved layout sub-tree. Used by dynamic-zone renderers to render
- * a templated object's children via per-template layouts (Phase 8c).
- */
+import type { ISortableItemProps } from "../../../../presentation/sortable/index.js";
 export declare const NestedLayout: (({ layout }: {
     layout: LayoutNodeVM[];
-}) => React.JSX.Element) & {
-    displayName: string;
+}) => React.JSX.Element) & React.NamedExoticComponent<{
+    layout: LayoutNodeVM[];
+}> & {
+    readonly type: ({ layout }: {
+        layout: LayoutNodeVM[];
+    }) => React.JSX.Element;
 };
 export interface ListItemRendererProps {
     item: IObjectFieldItemVM;
@@ -17,9 +18,10 @@ export interface ListItemRendererProps {
     itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);
     itemDescription?: string | ((data: Record<string, unknown>, index: number) => string);
     disabled: boolean;
+    sortable?: ISortableItemProps;
 }
-export declare const ListItemRenderer: (({ item, index, total, label, itemTitle, itemDescription, disabled }: ListItemRendererProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const ListItemRenderer: (({ item, index, total, label, itemTitle, itemDescription, disabled, sortable }: ListItemRendererProps) => React.JSX.Element) & React.NamedExoticComponent<ListItemRendererProps> & {
+    readonly type: ({ item, index, total, label, itemTitle, itemDescription, disabled, sortable }: ListItemRendererProps) => React.JSX.Element;
 };
 export interface AddItemButtonProps {
     label?: string;

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

@@ -13,7 +13,7 @@ const NestedLayout = observer(({ layout })=>/*#__PURE__*/ react.createElement("d
             key: index,
             node: node
         }))));
-const ListItemRenderer = observer(({ item, index, total, label, itemTitle, itemDescription, disabled })=>{
+const ListItemRenderer = observer(({ item, index, total, label, itemTitle, itemDescription, disabled, sortable })=>{
     const [open, setOpen] = useState(false);
     const hasFocusRequest = item.fields.some((f)=>f.focusRequested);
     useEffect(()=>{
@@ -45,7 +45,7 @@ const ListItemRenderer = observer(({ item, index, total, label, itemTitle, itemD
         },
         variant: "ghost"
     }));
-    return /*#__PURE__*/ react.createElement(Accordion, {
+    const accordion = /*#__PURE__*/ react.createElement(Accordion, {
         background: "base",
         variant: "container",
         openClosedIndicatorPosition: "left"
@@ -54,11 +54,42 @@ const ListItemRenderer = observer(({ item, index, total, label, itemTitle, itemD
         description: resolveItemDescription(item, index, itemDescription),
         actions: disabled ? null : actions,
         open: open,
-        onOpenChange: setOpen
+        onOpenChange: setOpen,
+        draggable: !disabled && void 0 !== sortable,
+        dragHandleRef: sortable?.handleRef
     }, /*#__PURE__*/ react.createElement(NestedLayout, {
         layout: item.layout
     })));
+    if (!sortable) return accordion;
+    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
+    }), accordion, "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"
+    }));
+};
 const AddItemButton = ({ label, disabled, onAdd })=>/*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Button, {
         icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
         text: label || "Add Item",

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/ObjectFieldComponents.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/ObjectFieldComponents.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Button, IconButton } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as ArrowUp } from \"@webiny/icons/arrow_upward.svg\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/arrow_downward.svg\";\nimport type { IObjectFieldItemVM, LayoutNodeVM } from \"~/features/formModel/index.js\";\nimport { LayoutNodeRenderer } from \"~/features/formModel/FormView.js\";\nimport { resolveItemTitle, resolveItemDescription } from \"./resolveItemTitle.js\";\n/**\n * Walks a resolved layout sub-tree. Used by dynamic-zone renderers to render\n * a templated object's children via per-template layouts (Phase 8c).\n */\nexport const NestedLayout = observer(({ layout }: { layout: LayoutNodeVM[] }) => {\n    return (\n        <div className={\"flex flex-col gap-md\"}>\n            {layout.map((node, index) => (\n                <LayoutNodeRenderer key={index} node={node} />\n            ))}\n        </div>\n    );\n});\n\nexport interface ListItemRendererProps {\n    item: IObjectFieldItemVM;\n    index: number;\n    total: number;\n    label?: string;\n    itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);\n    itemDescription?: string | ((data: Record<string, unknown>, index: number) => string);\n    disabled: boolean;\n}\n\nexport const ListItemRenderer = observer(\n    ({\n        item,\n        index,\n        total,\n        label,\n        itemTitle,\n        itemDescription,\n        disabled\n    }: ListItemRendererProps) => {\n        const [open, setOpen] = useState(false);\n        const hasFocusRequest = item.fields.some(f => f.focusRequested);\n\n        useEffect(() => {\n            if (hasFocusRequest) {\n                setOpen(true);\n            }\n        }, [hasFocusRequest]);\n\n        const actions = (\n            <>\n                <IconButton\n                    icon={<ArrowDown />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        item.moveDown();\n                    }}\n                    variant=\"ghost\"\n                    disabled={index === total - 1}\n                />\n                <IconButton\n                    icon={<ArrowUp />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        item.moveUp();\n                    }}\n                    variant=\"ghost\"\n                    disabled={index === 0}\n                />\n                <Accordion.Item.Action.Separator />\n                <IconButton\n                    icon={<DeleteIcon />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        item.remove();\n                    }}\n                    variant=\"ghost\"\n                />\n            </>\n        );\n\n        return (\n            <Accordion\n                background={\"base\"}\n                variant={\"container\"}\n                openClosedIndicatorPosition={\"left\"}\n            >\n                <Accordion.Item\n                    title={resolveItemTitle(item, index, label, itemTitle)}\n                    description={resolveItemDescription(item, index, itemDescription)}\n                    actions={disabled ? null : actions}\n                    open={open}\n                    onOpenChange={setOpen}\n                >\n                    <NestedLayout layout={item.layout} />\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n\nexport interface AddItemButtonProps {\n    label?: string;\n    disabled: boolean;\n    onAdd: () => void;\n}\n\nexport const AddItemButton = ({ label, disabled, onAdd }: AddItemButtonProps) => {\n    return (\n        <div>\n            <Button\n                icon={<AddIcon />}\n                text={label || \"Add Item\"}\n                variant={\"tertiary\"}\n                onClick={onAdd}\n                disabled={disabled}\n            />\n        </div>\n    );\n};\n"],"names":["NestedLayout","observer","layout","node","index","LayoutNodeRenderer","ListItemRenderer","item","total","label","itemTitle","itemDescription","disabled","open","setOpen","useState","hasFocusRequest","f","useEffect","actions","IconButton","ArrowDown","e","ArrowUp","Accordion","DeleteIcon","resolveItemTitle","resolveItemDescription","AddItemButton","onAdd","Button","AddIcon"],"mappings":";;;;;;;;;AAcO,MAAMA,eAAeC,SAAS,CAAC,EAAEC,MAAM,EAA8B,GACjE,WAAP,GACI,oBAAC;QAAI,WAAW;OACXA,OAAO,GAAG,CAAC,CAACC,MAAMC,QAAAA,WAAAA,GACf,oBAACC,oBAAkBA;YAAC,KAAKD;YAAO,MAAMD;;AAgB/C,MAAMG,mBAAmBL,SAC5B,CAAC,EACGM,IAAI,EACJH,KAAK,EACLI,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,eAAe,EACfC,QAAQ,EACY;IACpB,MAAM,CAACC,MAAMC,QAAQ,GAAGC,SAAS;IACjC,MAAMC,kBAAkBT,KAAK,MAAM,CAAC,IAAI,CAACU,CAAAA,IAAKA,EAAE,cAAc;IAE9DC,UAAU;QACN,IAAIF,iBACAF,QAAQ;IAEhB,GAAG;QAACE;KAAgB;IAEpB,MAAMG,UAAU,WAAVA,GACF,wDACI,oBAACC,YAAUA;QACP,oBAAM,oBAACC,mCAASA;QAChB,SAASC,CAAAA;YACLA,EAAE,eAAe;YACjBf,KAAK,QAAQ;QACjB;QACA,SAAQ;QACR,UAAUH,UAAUI,QAAQ;sBAEhC,oBAACY,YAAUA;QACP,oBAAM,oBAACG,iCAAOA;QACd,SAASD,CAAAA;YACLA,EAAE,eAAe;YACjBf,KAAK,MAAM;QACf;QACA,SAAQ;QACR,UAAUH,AAAU,MAAVA;sBAEd,oBAACoB,UAAU,IAAI,CAAC,MAAM,CAAC,SAAS,uBAChC,oBAACJ,YAAUA;QACP,oBAAM,oBAACK,mCAAUA;QACjB,SAASH,CAAAA;YACLA,EAAE,eAAe;YACjBf,KAAK,MAAM;QACf;QACA,SAAQ;;IAKpB,OAAO,WAAP,GACI,oBAACiB,WAASA;QACN,YAAY;QACZ,SAAS;QACT,6BAA6B;qBAE7B,oBAACA,UAAU,IAAI;QACX,OAAOE,iBAAiBnB,MAAMH,OAAOK,OAAOC;QAC5C,aAAaiB,uBAAuBpB,MAAMH,OAAOO;QACjD,SAASC,WAAW,OAAOO;QAC3B,MAAMN;QACN,cAAcC;qBAEd,oBAACd,cAAYA;QAAC,QAAQO,KAAK,MAAM;;AAIjD;AASG,MAAMqB,gBAAgB,CAAC,EAAEnB,KAAK,EAAEG,QAAQ,EAAEiB,KAAK,EAAsB,GACjE,WAAP,GACI,oBAAC,2BACG,oBAACC,QAAMA;QACH,oBAAM,oBAACC,gBAAOA;QACd,MAAMtB,SAAS;QACf,SAAS;QACT,SAASoB;QACT,UAAUjB"}
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/ObjectFieldComponents.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/ObjectFieldComponents.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Button, IconButton } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as DeleteIcon } from \"@webiny/icons/delete_outline.svg\";\nimport { ReactComponent as ArrowUp } from \"@webiny/icons/arrow_upward.svg\";\nimport { ReactComponent as ArrowDown } from \"@webiny/icons/arrow_downward.svg\";\nimport type { IObjectFieldItemVM, LayoutNodeVM } from \"~/features/formModel/index.js\";\nimport { LayoutNodeRenderer } from \"~/features/formModel/FormView.js\";\nimport { resolveItemTitle, resolveItemDescription } from \"./resolveItemTitle.js\";\nimport type { ISortableItemProps } from \"~/presentation/sortable/index.js\";\n\nexport const NestedLayout = observer(({ layout }: { layout: LayoutNodeVM[] }) => {\n    return (\n        <div className={\"flex flex-col gap-md\"}>\n            {layout.map((node, index) => (\n                <LayoutNodeRenderer key={index} node={node} />\n            ))}\n        </div>\n    );\n});\n\nexport interface ListItemRendererProps {\n    item: IObjectFieldItemVM;\n    index: number;\n    total: number;\n    label?: string;\n    itemTitle?: string | ((data: Record<string, unknown>, index: number) => string);\n    itemDescription?: string | ((data: Record<string, unknown>, index: number) => string);\n    disabled: boolean;\n    sortable?: ISortableItemProps;\n}\n\nexport const ListItemRenderer = observer(\n    ({\n        item,\n        index,\n        total,\n        label,\n        itemTitle,\n        itemDescription,\n        disabled,\n        sortable\n    }: ListItemRendererProps) => {\n        const [open, setOpen] = useState(false);\n        const hasFocusRequest = item.fields.some(f => f.focusRequested);\n\n        useEffect(() => {\n            if (hasFocusRequest) {\n                setOpen(true);\n            }\n        }, [hasFocusRequest]);\n\n        const actions = (\n            <>\n                <IconButton\n                    icon={<ArrowDown />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        item.moveDown();\n                    }}\n                    variant=\"ghost\"\n                    disabled={index === total - 1}\n                />\n                <IconButton\n                    icon={<ArrowUp />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        item.moveUp();\n                    }}\n                    variant=\"ghost\"\n                    disabled={index === 0}\n                />\n                <Accordion.Item.Action.Separator />\n                <IconButton\n                    icon={<DeleteIcon />}\n                    onClick={e => {\n                        e.stopPropagation();\n                        item.remove();\n                    }}\n                    variant=\"ghost\"\n                />\n            </>\n        );\n\n        const accordion = (\n            <Accordion\n                background={\"base\"}\n                variant={\"container\"}\n                openClosedIndicatorPosition={\"left\"}\n            >\n                <Accordion.Item\n                    title={resolveItemTitle(item, index, label, itemTitle)}\n                    description={resolveItemDescription(item, index, itemDescription)}\n                    actions={disabled ? null : actions}\n                    open={open}\n                    onOpenChange={setOpen}\n                    draggable={!disabled && sortable !== undefined}\n                    dragHandleRef={sortable?.handleRef}\n                >\n                    <NestedLayout layout={item.layout} />\n                </Accordion.Item>\n            </Accordion>\n        );\n\n        if (!sortable) {\n            return accordion;\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}\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\nexport interface AddItemButtonProps {\n    label?: string;\n    disabled: boolean;\n    onAdd: () => void;\n}\n\nexport const AddItemButton = ({ label, disabled, onAdd }: AddItemButtonProps) => {\n    return (\n        <div>\n            <Button\n                icon={<AddIcon />}\n                text={label || \"Add Item\"}\n                variant={\"tertiary\"}\n                onClick={onAdd}\n                disabled={disabled}\n            />\n        </div>\n    );\n};\n"],"names":["NestedLayout","observer","layout","node","index","LayoutNodeRenderer","ListItemRenderer","item","total","label","itemTitle","itemDescription","disabled","sortable","open","setOpen","useState","hasFocusRequest","f","useEffect","actions","IconButton","ArrowDown","e","ArrowUp","Accordion","DeleteIcon","accordion","resolveItemTitle","resolveItemDescription","undefined","DropIndicator","position","isFirst","isLast","offset","AddItemButton","onAdd","Button","AddIcon"],"mappings":"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"}

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

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

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

@@ -1,6 +1,6 @@
 import react from "react";
 import { observer } from "mobx-react-lite";
-import { Accordion, Button, Tooltip, useToast } from "@webiny/admin-ui";
+import { Accordion, Button, Separator, Tooltip, useToast } from "@webiny/admin-ui";
 import { useFeature } from "@webiny/app";
 import { ReactComponent } from "@webiny/icons/content_copy.svg";
 import { ReactComponent as content_paste_svg_ReactComponent } from "@webiny/icons/content_paste.svg";
@@ -11,7 +11,7 @@ import { ClipboardFeature } from "../../../../features/clipboard/feature.js";
 import { useConfirmationDialog } from "../../../../hooks/useConfirmationDialog.js";
 import { NestedLayout } from "./ObjectFieldComponents.js";
 import { AddTemplateButton } from "./TemplatePicker.js";
-const SingleValueDynamicZone = observer(({ field, showContainer = true })=>{
+const SingleValueDynamicZone = observer(({ field, addItemLabel, showContainer = true })=>{
     const toast = useToast();
     const { clipboard } = useFeature(ClipboardFeature);
     const activeTemplate = null !== field.activeTemplateId ? field.availableTemplates.find((t)=>t.id === field.activeTemplateId) : void 0;
@@ -59,6 +59,7 @@ const SingleValueDynamicZone = observer(({ field, showContainer = true })=>{
     }))) : null, !activeTemplate && !field.disabled && /*#__PURE__*/ react.createElement("div", {
         className: "flex gap-sm items-center"
     }, /*#__PURE__*/ react.createElement(AddTemplateButton, {
+        label: addItemLabel,
         templates: field.availableTemplates,
         onSelect: (template)=>field.setTemplate(template.id)
     }), canPaste && /*#__PURE__*/ react.createElement(Button, {
@@ -76,9 +77,14 @@ const SingleValueDynamicZone = observer(({ field, showContainer = true })=>{
             }
         }
     })));
-    if (!showContainer) return /*#__PURE__*/ react.createElement("div", {
-        className: "flex flex-col gap-lg"
-    }, content);
+    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 ?? "")), /*#__PURE__*/ react.createElement("div", {
+        className: "mt-md"
+    }, content));
     return /*#__PURE__*/ react.createElement(Accordion, {
         background: "base",
         variant: "container"

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Button, Tooltip, useToast } from \"@webiny/admin-ui\";\nimport { useFeature } from \"@webiny/app\";\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.svg\";\nimport { ReactComponent as HorizontalRuleIcon } from \"@webiny/icons/horizontal_rule.svg\";\nimport type { 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.js\";\n\ninterface SingleValueDynamicZoneProps {\n    field: IObjectFieldVM;\n    showContainer?: boolean;\n}\n\nexport const SingleValueDynamicZone = observer(\n    ({ field, showContainer = true }: SingleValueDynamicZoneProps) => {\n        const toast = useToast();\n        const { clipboard } = useFeature(ClipboardFeature);\n        const activeTemplate =\n            field.activeTemplateId !== null\n                ? field.availableTemplates.find(t => t.id === field.activeTemplateId)\n                : undefined;\n\n        const { showConfirmation } = useConfirmationDialog({\n            title: \"Remove template\",\n            message: \"Are you sure you want to remove this item? This action is not reversible.\",\n            acceptLabel: \"Yes, I'm sure!\",\n            cancelLabel: \"No, leave it.\"\n        });\n\n        const onClear = () => {\n            showConfirmation(() => {\n                field.onChange(null);\n            });\n        };\n\n        const 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            <>\n                {activeTemplate ? (\n                    <Accordion background={\"base\"} variant={\"container\"}>\n                        <Accordion.Item\n                            title={activeTemplate.label}\n                            actions={\n                                field.disabled ? null : (\n                                    <>\n                                        <Accordion.Item.Action\n                                            icon={\n                                                <Tooltip\n                                                    trigger={<CopyIcon />}\n                                                    content={\"Copy to clipboard\"}\n                                                />\n                                            }\n                                            onClick={() => {\n                                                clipboard.copy({\n                                                    type: \"wby.dz\",\n                                                    data: field.getClonedData()\n                                                });\n                                                toast.showSuccessToast({\n                                                    title: \"Copied to clipboard.\"\n                                                });\n                                            }}\n                                        />\n                                        <Accordion.Item.Action\n                                            icon={\n                                                <Tooltip\n                                                    trigger={<DeleteIcon />}\n                                                    content={\"Delete\"}\n                                                />\n                                            }\n                                            onClick={onClear}\n                                        />\n                                    </>\n                                )\n                            }\n                        >\n                            <NestedLayout layout={field.layout} />\n                        </Accordion.Item>\n                    </Accordion>\n                ) : null}\n                {!activeTemplate && !field.disabled && (\n                    <div className={\"flex gap-sm items-center\"}>\n                        <AddTemplateButton\n                            templates={field.availableTemplates}\n                            onSelect={template => field.setTemplate(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.onChange(pasted.data);\n                                        toast.showSuccessToast({\n                                            title: \"Pasted from clipboard.\"\n                                        });\n                                    }\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </>\n        );\n\n        if (!showContainer) {\n            return <div className={\"flex flex-col gap-lg\"}>{content}</div>;\n        }\n\n        return (\n            <Accordion background={\"base\"} variant={\"container\"}>\n                <Accordion.Item\n                    icon={\n                        <Accordion.Item.Icon\n                            color={\"accent\"}\n                            label={\"Dynamic Zone\"}\n                            icon={<HorizontalRuleIcon />}\n                        />\n                    }\n                    title={field.label}\n                    defaultOpen={true}\n                >\n                    {content}\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n"],"names":["SingleValueDynamicZone","observer","field","showContainer","toast","useToast","clipboard","useFeature","ClipboardFeature","activeTemplate","t","undefined","showConfirmation","useConfirmationDialog","onClear","clipboardItem","canPaste","TEMPLATE_DISCRIMINATOR","content","Accordion","Tooltip","CopyIcon","DeleteIcon","NestedLayout","AddTemplateButton","template","Button","PasteIcon","pasted","HorizontalRuleIcon"],"mappings":";;;;;;;;;;;;;AAoBO,MAAMA,yBAAyBC,SAClC,CAAC,EAAEC,KAAK,EAAEC,gBAAgB,IAAI,EAA+B;IACzD,MAAMC,QAAQC;IACd,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAMC,iBACFP,AAA2B,SAA3BA,MAAM,gBAAgB,GAChBA,MAAM,kBAAkB,CAAC,IAAI,CAACQ,CAAAA,IAAKA,EAAE,EAAE,KAAKR,MAAM,gBAAgB,IAClES;IAEV,MAAM,EAAEC,gBAAgB,EAAE,GAAGC,sBAAsB;QAC/C,OAAO;QACP,SAAS;QACT,aAAa;QACb,aAAa;IACjB;IAEA,MAAMC,UAAU;QACZF,iBAAiB;YACbV,MAAM,QAAQ,CAAC;QACnB;IACJ;IAEA,MAAMa,gBAAgBT,UAAU,IAAI;IACpC,MAAMU,WACFD,AAAkB,SAAlBA,iBACAA,AAAuB,aAAvBA,cAAc,IAAI,IAClB,AAAsD,YAAtD,OAAOA,cAAc,IAAI,CAACE,uBAAuB,IACjDf,MAAM,kBAAkB,CAAC,IAAI,CAACQ,CAAAA,IAAKA,EAAE,EAAE,KAAKK,cAAc,IAAI,CAACE,uBAAuB;IAE1F,MAAMC,UAAU,WAAVA,GACF,0CACKT,iBAAiB,WAAjBA,GACG,oBAACU,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,OAAOV,eAAe,KAAK;QAC3B,SACIP,MAAM,QAAQ,GAAG,OAAO,WAAP,GACb,wDACI,oBAACiB,UAAU,IAAI,CAAC,MAAM;YAClB,oBACI,oBAACC,SAAOA;gBACJ,uBAAS,oBAACC,gBAAQA;gBAClB,SAAS;;YAGjB,SAAS;gBACLf,UAAU,IAAI,CAAC;oBACX,MAAM;oBACN,MAAMJ,MAAM,aAAa;gBAC7B;gBACAE,MAAM,gBAAgB,CAAC;oBACnB,OAAO;gBACX;YACJ;0BAEJ,oBAACe,UAAU,IAAI,CAAC,MAAM;YAClB,oBACI,oBAACC,SAAOA;gBACJ,uBAAS,oBAACE,2BAAUA;gBACpB,SAAS;;YAGjB,SAASR;;qBAMzB,oBAACS,cAAYA;QAAC,QAAQrB,MAAM,MAAM;WAG1C,MACH,CAACO,kBAAkB,CAACP,MAAM,QAAQ,IAAI,WAAJ,GAC/B,oBAAC;QAAI,WAAW;qBACZ,oBAACsB,mBAAiBA;QACd,WAAWtB,MAAM,kBAAkB;QACnC,UAAUuB,CAAAA,WAAYvB,MAAM,WAAW,CAACuB,SAAS,EAAE;QAEtDT,YAAY,WAAZA,GACG,oBAACU,QAAMA;QACH,MAAM;QACN,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,kCAASA;QAChB,SAAS;YACL,MAAMC,SAAStB,UAAU,KAAK;YAC9B,IAAIsB,QAAQ;gBACR1B,MAAM,QAAQ,CAAC0B,OAAO,IAAI;gBAC1BxB,MAAM,gBAAgB,CAAC;oBACnB,OAAO;gBACX;YACJ;QACJ;;IAQxB,IAAI,CAACD,eACD,OAAO,WAAP,GAAO,oBAAC;QAAI,WAAW;OAAyBe;IAGpD,OAAO,WAAP,GACI,oBAACC,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,oBACI,oBAACA,UAAU,IAAI,CAAC,IAAI;YAChB,OAAO;YACP,OAAO;YACP,oBAAM,oBAACU,oCAAkBA;;QAGjC,OAAO3B,MAAM,KAAK;QAClB,aAAa;OAEZgB;AAIjB"}
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/SingleValueDynamicZone.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { Accordion, Button, Tooltip, useToast } from \"@webiny/admin-ui\";\nimport { useFeature } from \"@webiny/app\";\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.svg\";\nimport { ReactComponent as HorizontalRuleIcon } from \"@webiny/icons/horizontal_rule.svg\";\nimport type { 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.js\";\nimport { Separator } from \"@webiny/admin-ui\";\n\ninterface SingleValueDynamicZoneProps {\n    field: IObjectFieldVM;\n    addItemLabel: string;\n    showContainer?: boolean;\n}\n\nexport const SingleValueDynamicZone = observer(\n    ({ field, addItemLabel, showContainer = true }: SingleValueDynamicZoneProps) => {\n        const toast = useToast();\n        const { clipboard } = useFeature(ClipboardFeature);\n        const activeTemplate =\n            field.activeTemplateId !== null\n                ? field.availableTemplates.find(t => t.id === field.activeTemplateId)\n                : undefined;\n\n        const { showConfirmation } = useConfirmationDialog({\n            title: \"Remove template\",\n            message: \"Are you sure you want to remove this item? This action is not reversible.\",\n            acceptLabel: \"Yes, I'm sure!\",\n            cancelLabel: \"No, leave it.\"\n        });\n\n        const onClear = () => {\n            showConfirmation(() => {\n                field.onChange(null);\n            });\n        };\n\n        const 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            <>\n                {activeTemplate ? (\n                    <Accordion background={\"base\"} variant={\"container\"}>\n                        <Accordion.Item\n                            title={activeTemplate.label}\n                            actions={\n                                field.disabled ? null : (\n                                    <>\n                                        <Accordion.Item.Action\n                                            icon={\n                                                <Tooltip\n                                                    trigger={<CopyIcon />}\n                                                    content={\"Copy to clipboard\"}\n                                                />\n                                            }\n                                            onClick={() => {\n                                                clipboard.copy({\n                                                    type: \"wby.dz\",\n                                                    data: field.getClonedData()\n                                                });\n                                                toast.showSuccessToast({\n                                                    title: \"Copied to clipboard.\"\n                                                });\n                                            }}\n                                        />\n                                        <Accordion.Item.Action\n                                            icon={\n                                                <Tooltip\n                                                    trigger={<DeleteIcon />}\n                                                    content={\"Delete\"}\n                                                />\n                                            }\n                                            onClick={onClear}\n                                        />\n                                    </>\n                                )\n                            }\n                        >\n                            <NestedLayout layout={field.layout} />\n                        </Accordion.Item>\n                    </Accordion>\n                ) : null}\n                {!activeTemplate && !field.disabled && (\n                    <div className={\"flex gap-sm items-center\"}>\n                        <AddTemplateButton\n                            label={addItemLabel}\n                            templates={field.availableTemplates}\n                            onSelect={template => field.setTemplate(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.onChange(pasted.data);\n                                        toast.showSuccessToast({\n                                            title: \"Pasted from clipboard.\"\n                                        });\n                                    }\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </>\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 ?? \"\"}\n                        </span>\n                    </Separator>\n                    <div className={\"mt-md\"}>{content}</div>\n                </>\n            );\n        }\n\n        return (\n            <Accordion background={\"base\"} variant={\"container\"}>\n                <Accordion.Item\n                    icon={\n                        <Accordion.Item.Icon\n                            color={\"accent\"}\n                            label={\"Dynamic Zone\"}\n                            icon={<HorizontalRuleIcon />}\n                        />\n                    }\n                    title={field.label}\n                    defaultOpen={true}\n                >\n                    {content}\n                </Accordion.Item>\n            </Accordion>\n        );\n    }\n);\n"],"names":["SingleValueDynamicZone","observer","field","addItemLabel","showContainer","toast","useToast","clipboard","useFeature","ClipboardFeature","activeTemplate","t","undefined","showConfirmation","useConfirmationDialog","onClear","clipboardItem","canPaste","TEMPLATE_DISCRIMINATOR","content","Accordion","Tooltip","CopyIcon","DeleteIcon","NestedLayout","AddTemplateButton","template","Button","PasteIcon","pasted","Separator","HorizontalRuleIcon"],"mappings":";;;;;;;;;;;;;AAsBO,MAAMA,yBAAyBC,SAClC,CAAC,EAAEC,KAAK,EAAEC,YAAY,EAAEC,gBAAgB,IAAI,EAA+B;IACvE,MAAMC,QAAQC;IACd,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWC;IACjC,MAAMC,iBACFR,AAA2B,SAA3BA,MAAM,gBAAgB,GAChBA,MAAM,kBAAkB,CAAC,IAAI,CAACS,CAAAA,IAAKA,EAAE,EAAE,KAAKT,MAAM,gBAAgB,IAClEU;IAEV,MAAM,EAAEC,gBAAgB,EAAE,GAAGC,sBAAsB;QAC/C,OAAO;QACP,SAAS;QACT,aAAa;QACb,aAAa;IACjB;IAEA,MAAMC,UAAU;QACZF,iBAAiB;YACbX,MAAM,QAAQ,CAAC;QACnB;IACJ;IAEA,MAAMc,gBAAgBT,UAAU,IAAI;IACpC,MAAMU,WACFD,AAAkB,SAAlBA,iBACAA,AAAuB,aAAvBA,cAAc,IAAI,IAClB,AAAsD,YAAtD,OAAOA,cAAc,IAAI,CAACE,uBAAuB,IACjDhB,MAAM,kBAAkB,CAAC,IAAI,CAACS,CAAAA,IAAKA,EAAE,EAAE,KAAKK,cAAc,IAAI,CAACE,uBAAuB;IAE1F,MAAMC,UAAU,WAAVA,GACF,0CACKT,iBAAiB,WAAjBA,GACG,oBAACU,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,OAAOV,eAAe,KAAK;QAC3B,SACIR,MAAM,QAAQ,GAAG,OAAO,WAAP,GACb,wDACI,oBAACkB,UAAU,IAAI,CAAC,MAAM;YAClB,oBACI,oBAACC,SAAOA;gBACJ,uBAAS,oBAACC,gBAAQA;gBAClB,SAAS;;YAGjB,SAAS;gBACLf,UAAU,IAAI,CAAC;oBACX,MAAM;oBACN,MAAML,MAAM,aAAa;gBAC7B;gBACAG,MAAM,gBAAgB,CAAC;oBACnB,OAAO;gBACX;YACJ;0BAEJ,oBAACe,UAAU,IAAI,CAAC,MAAM;YAClB,oBACI,oBAACC,SAAOA;gBACJ,uBAAS,oBAACE,2BAAUA;gBACpB,SAAS;;YAGjB,SAASR;;qBAMzB,oBAACS,cAAYA;QAAC,QAAQtB,MAAM,MAAM;WAG1C,MACH,CAACQ,kBAAkB,CAACR,MAAM,QAAQ,IAAI,WAAJ,GAC/B,oBAAC;QAAI,WAAW;qBACZ,oBAACuB,mBAAiBA;QACd,OAAOtB;QACP,WAAWD,MAAM,kBAAkB;QACnC,UAAUwB,CAAAA,WAAYxB,MAAM,WAAW,CAACwB,SAAS,EAAE;QAEtDT,YAAY,WAAZA,GACG,oBAACU,QAAMA;QACH,MAAM;QACN,SAAS;QACT,MAAM;QACN,oBAAM,oBAACC,kCAASA;QAChB,SAAS;YACL,MAAMC,SAAStB,UAAU,KAAK;YAC9B,IAAIsB,QAAQ;gBACR3B,MAAM,QAAQ,CAAC2B,OAAO,IAAI;gBAC1BxB,MAAM,gBAAgB,CAAC;oBACnB,OAAO;gBACX;YACJ;QACJ;;IAQxB,IAAI,CAACD,eACD,OAAO,WAAP,GACI,wDACI,oBAAC0B,WAASA;QAAC,eAAe;QAAS,SAAS;qBACxC,oBAAC;QAAK,WAAW;OACZ5B,MAAM,KAAK,IAAI,oBAGxB,oBAAC;QAAI,WAAW;OAAUiB;IAKtC,OAAO,WAAP,GACI,oBAACC,WAASA;QAAC,YAAY;QAAQ,SAAS;qBACpC,oBAACA,UAAU,IAAI;QACX,oBACI,oBAACA,UAAU,IAAI,CAAC,IAAI;YAChB,OAAO;YACP,OAAO;YACP,oBAAM,oBAACW,oCAAkBA;;QAGjC,OAAO7B,MAAM,KAAK;QAClB,aAAa;OAEZiB;AAIjB"}

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

@@ -7,7 +7,7 @@ const normalizeIcon = (icon)=>{
     if (!icon) return;
     return icon.name.split("/");
 };
-const AddTemplateButton = ({ templates, onSelect, label = "Add a template", size = "sm", variant = "tertiary" })=>/*#__PURE__*/ react.createElement("div", {
+const AddTemplateButton = ({ templates, onSelect, label, size = "sm", variant = "tertiary" })=>/*#__PURE__*/ react.createElement("div", {
         className: "flex justify-between items-center"
     }, /*#__PURE__*/ react.createElement(Dialog, {
         size: "lg",

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Button, Dialog, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as PlusIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport type { ITemplateIcon, ITemplateVM } from \"~/features/formModel/index.js\";\n\nconst normalizeIcon = (icon: ITemplateIcon | undefined): IconProp | undefined => {\n    if (!icon) {\n        return undefined;\n    }\n    return icon.name.split(\"/\") as IconProp;\n};\n\nexport interface AddTemplateButtonProps {\n    templates: ITemplateVM[];\n    onSelect: (template: ITemplateVM) => void;\n    label?: string;\n    size?: \"sm\" | \"md\" | \"lg\";\n    variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport const AddTemplateButton = ({\n    templates,\n    onSelect,\n    label = \"Add a template\",\n    size = \"sm\",\n    variant = \"tertiary\"\n}: AddTemplateButtonProps) => {\n    return (\n        <div className={\"flex justify-between items-center\"}>\n            <Dialog\n                size={\"lg\"}\n                className={\"w-[800px]\"}\n                trigger={<Button size={size} variant={variant} text={label} icon={<AddIcon />} />}\n                title={\"Insert a template\"}\n                info={<></>}\n            >\n                <TemplateGallery templates={templates} onSelect={onSelect} />\n            </Dialog>\n        </div>\n    );\n};\n\ninterface TemplateGalleryProps {\n    templates: ITemplateVM[];\n    onSelect: (template: ITemplateVM) => void;\n}\n\nconst TemplateGallery = ({ templates, onSelect }: TemplateGalleryProps) => {\n    return (\n        <div className={\"gap-md flex flex-wrap p-xs\"}>\n            {templates.map(template => (\n                <TemplateCard key={template.id} template={template} onSelect={onSelect} />\n            ))}\n        </div>\n    );\n};\n\ninterface TemplateCardProps {\n    template: ITemplateVM;\n    onSelect: (template: ITemplateVM) => void;\n}\n\nconst TemplateCard = ({ template, onSelect }: TemplateCardProps) => {\n    const [isHovered, setIsHovered] = useState(false);\n    const icon = normalizeIcon(template.icon);\n\n    return (\n        <div\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n            className={\n                \"flex flex-col justify-between bg-neutral-base overflow-hidden rounded-lg w-[173px] relative shadow-sm\"\n            }\n        >\n            <div>\n                <div className={\"flex items-center justify-center py-xxl w-full bg-neutral-dimmed\"}>\n                    {icon ? (\n                        <FontAwesomeIcon\n                            className={\"text-neutral-xstrong\"}\n                            icon={icon}\n                            style={{ width: 40, height: 40 }}\n                        />\n                    ) : null}\n                </div>\n                <div className={\"py-sm-extra px-md\"}>\n                    <Text size={\"md\"} className={\"mb-xs text-neutral-primary font-semibold\"}>\n                        {template.label}\n                    </Text>\n                </div>\n            </div>\n\n            {isHovered && (\n                <Dialog.Close asChild>\n                    <div\n                        className={\n                            \"absolute inset-0 flex items-center justify-center bg-white/80 cursor-pointer\"\n                        }\n                        onClick={() => onSelect(template)}\n                    >\n                        <Button size={\"lg\"} variant={\"primary\"} icon={<PlusIcon />}>\n                            Insert\n                        </Button>\n                    </div>\n                </Dialog.Close>\n            )}\n        </div>\n    );\n};\n"],"names":["normalizeIcon","icon","AddTemplateButton","templates","onSelect","label","size","variant","Dialog","Button","AddIcon","TemplateGallery","template","TemplateCard","isHovered","setIsHovered","useState","FontAwesomeIcon","Text","PlusIcon"],"mappings":";;;;;AAQA,MAAMA,gBAAgB,CAACC;IACnB,IAAI,CAACA,MACD;IAEJ,OAAOA,KAAK,IAAI,CAAC,KAAK,CAAC;AAC3B;AAUO,MAAMC,oBAAoB,CAAC,EAC9BC,SAAS,EACTC,QAAQ,EACRC,QAAQ,gBAAgB,EACxBC,OAAO,IAAI,EACXC,UAAU,UAAU,EACC,GACd,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAM;QACN,WAAW;QACX,uBAAS,oBAACC,QAAMA;YAAC,MAAMH;YAAM,SAASC;YAAS,MAAMF;YAAO,oBAAM,oBAACK,gBAAOA;;QAC1E,OAAO;QACP,oBAAM;qBAEN,oBAACC,iBAAeA;QAAC,WAAWR;QAAW,UAAUC;;AAWjE,MAAMO,kBAAkB,CAAC,EAAER,SAAS,EAAEC,QAAQ,EAAwB,GAC3D,WAAP,GACI,oBAAC;QAAI,WAAW;OACXD,UAAU,GAAG,CAACS,CAAAA,WAAAA,WAAAA,GACX,oBAACC,cAAYA;YAAC,KAAKD,SAAS,EAAE;YAAE,UAAUA;YAAU,UAAUR;;AAW9E,MAAMS,eAAe,CAAC,EAAED,QAAQ,EAAER,QAAQ,EAAqB;IAC3D,MAAM,CAACU,WAAWC,aAAa,GAAGC,SAAS;IAC3C,MAAMf,OAAOD,cAAcY,SAAS,IAAI;IAExC,OAAO,WAAP,GACI,oBAAC;QACG,cAAc,IAAMG,aAAa;QACjC,cAAc,IAAMA,aAAa;QACjC,WACI;qBAGJ,oBAAC,2BACG,oBAAC;QAAI,WAAW;OACXd,OAAO,WAAPA,GACG,oBAACgB,iBAAeA;QACZ,WAAW;QACX,MAAMhB;QACN,OAAO;YAAE,OAAO;YAAI,QAAQ;QAAG;SAEnC,qBAER,oBAAC;QAAI,WAAW;qBACZ,oBAACiB,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBN,SAAS,KAAK,KAK1BE,aAAa,WAAbA,GACG,oBAACN,OAAO,KAAK;QAAC;qBACV,oBAAC;QACG,WACI;QAEJ,SAAS,IAAMJ,SAASQ;qBAExB,oBAACH,QAAMA;QAAC,MAAM;QAAM,SAAS;QAAW,oBAAM,oBAACU,uCAAQA;OAAK;AAQpF"}
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Button, Dialog, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as PlusIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport type { ITemplateIcon, ITemplateVM } from \"~/features/formModel/index.js\";\n\nconst normalizeIcon = (icon: ITemplateIcon | undefined): IconProp | undefined => {\n    if (!icon) {\n        return undefined;\n    }\n    return icon.name.split(\"/\") as IconProp;\n};\n\nexport interface AddTemplateButtonProps {\n    templates: ITemplateVM[];\n    onSelect: (template: ITemplateVM) => void;\n    label?: string;\n    size?: \"sm\" | \"md\" | \"lg\";\n    variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport const AddTemplateButton = ({\n    templates,\n    onSelect,\n    label,\n    size = \"sm\",\n    variant = \"tertiary\"\n}: AddTemplateButtonProps) => {\n    return (\n        <div className={\"flex justify-between items-center\"}>\n            <Dialog\n                size={\"lg\"}\n                className={\"w-[800px]\"}\n                trigger={<Button size={size} variant={variant} text={label} icon={<AddIcon />} />}\n                title={\"Insert a template\"}\n                info={<></>}\n            >\n                <TemplateGallery templates={templates} onSelect={onSelect} />\n            </Dialog>\n        </div>\n    );\n};\n\ninterface TemplateGalleryProps {\n    templates: ITemplateVM[];\n    onSelect: (template: ITemplateVM) => void;\n}\n\nconst TemplateGallery = ({ templates, onSelect }: TemplateGalleryProps) => {\n    return (\n        <div className={\"gap-md flex flex-wrap p-xs\"}>\n            {templates.map(template => (\n                <TemplateCard key={template.id} template={template} onSelect={onSelect} />\n            ))}\n        </div>\n    );\n};\n\ninterface TemplateCardProps {\n    template: ITemplateVM;\n    onSelect: (template: ITemplateVM) => void;\n}\n\nconst TemplateCard = ({ template, onSelect }: TemplateCardProps) => {\n    const [isHovered, setIsHovered] = useState(false);\n    const icon = normalizeIcon(template.icon);\n\n    return (\n        <div\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n            className={\n                \"flex flex-col justify-between bg-neutral-base overflow-hidden rounded-lg w-[173px] relative shadow-sm\"\n            }\n        >\n            <div>\n                <div className={\"flex items-center justify-center py-xxl w-full bg-neutral-dimmed\"}>\n                    {icon ? (\n                        <FontAwesomeIcon\n                            className={\"text-neutral-xstrong\"}\n                            icon={icon}\n                            style={{ width: 40, height: 40 }}\n                        />\n                    ) : null}\n                </div>\n                <div className={\"py-sm-extra px-md\"}>\n                    <Text size={\"md\"} className={\"mb-xs text-neutral-primary font-semibold\"}>\n                        {template.label}\n                    </Text>\n                </div>\n            </div>\n\n            {isHovered && (\n                <Dialog.Close asChild>\n                    <div\n                        className={\n                            \"absolute inset-0 flex items-center justify-center bg-white/80 cursor-pointer\"\n                        }\n                        onClick={() => onSelect(template)}\n                    >\n                        <Button size={\"lg\"} variant={\"primary\"} icon={<PlusIcon />}>\n                            Insert\n                        </Button>\n                    </div>\n                </Dialog.Close>\n            )}\n        </div>\n    );\n};\n"],"names":["normalizeIcon","icon","AddTemplateButton","templates","onSelect","label","size","variant","Dialog","Button","AddIcon","TemplateGallery","template","TemplateCard","isHovered","setIsHovered","useState","FontAwesomeIcon","Text","PlusIcon"],"mappings":";;;;;AAQA,MAAMA,gBAAgB,CAACC;IACnB,IAAI,CAACA,MACD;IAEJ,OAAOA,KAAK,IAAI,CAAC,KAAK,CAAC;AAC3B;AAUO,MAAMC,oBAAoB,CAAC,EAC9BC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,IAAI,EACXC,UAAU,UAAU,EACC,GACd,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAM;QACN,WAAW;QACX,uBAAS,oBAACC,QAAMA;YAAC,MAAMH;YAAM,SAASC;YAAS,MAAMF;YAAO,oBAAM,oBAACK,gBAAOA;;QAC1E,OAAO;QACP,oBAAM;qBAEN,oBAACC,iBAAeA;QAAC,WAAWR;QAAW,UAAUC;;AAWjE,MAAMO,kBAAkB,CAAC,EAAER,SAAS,EAAEC,QAAQ,EAAwB,GAC3D,WAAP,GACI,oBAAC;QAAI,WAAW;OACXD,UAAU,GAAG,CAACS,CAAAA,WAAAA,WAAAA,GACX,oBAACC,cAAYA;YAAC,KAAKD,SAAS,EAAE;YAAE,UAAUA;YAAU,UAAUR;;AAW9E,MAAMS,eAAe,CAAC,EAAED,QAAQ,EAAER,QAAQ,EAAqB;IAC3D,MAAM,CAACU,WAAWC,aAAa,GAAGC,SAAS;IAC3C,MAAMf,OAAOD,cAAcY,SAAS,IAAI;IAExC,OAAO,WAAP,GACI,oBAAC;QACG,cAAc,IAAMG,aAAa;QACjC,cAAc,IAAMA,aAAa;QACjC,WACI;qBAGJ,oBAAC,2BACG,oBAAC;QAAI,WAAW;OACXd,OAAO,WAAPA,GACG,oBAACgB,iBAAeA;QACZ,WAAW;QACX,MAAMhB;QACN,OAAO;YAAE,OAAO;YAAI,QAAQ;QAAG;SAEnC,qBAER,oBAAC;QAAI,WAAW;qBACZ,oBAACiB,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBN,SAAS,KAAK,KAK1BE,aAAa,WAAbA,GACG,oBAACN,OAAO,KAAK;QAAC;qBACV,oBAAC;QACG,WACI;QAEJ,SAAS,IAAMJ,SAASQ;qBAExB,oBAACH,QAAMA;QAAC,MAAM;QAAM,SAAS;QAAW,oBAAM,oBAACU,uCAAQA;OAAK;AAQpF"}

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

@@ -1,6 +1,12 @@
 import React from "react";
 declare module "../../../features/formModel/abstractions.js" {
     interface IFieldRendererRegistry {
+        select: {
+            fieldType: "text" | "number";
+            options: true;
+            settings: undefined;
+        };
+        /** @deprecated Use "select" instead. */
         dropdown: {
             fieldType: "text" | "number";
             options: true;

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

@@ -1 +1 @@
-{"version":3,"file":"base/Base/FieldRenderers/SelectRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/SelectRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Select } from \"@webiny/admin-ui\";\nimport type { IValueOption } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        dropdown: { fieldType: \"text\" | \"number\"; options: true; settings: undefined };\n    }\n}\n\nexport const SelectRenderer = createFieldRenderer(({ field }) => {\n    const options: IValueOption[] = field.options ?? [];\n\n    return (\n        <Select\n            label={field.label}\n            hint={field.help}\n            placeholder={field.placeholder}\n            description={field.description}\n            note={field.note}\n            value={field.value != null ? String(field.value) : \"\"}\n            onChange={value => {\n                field.onChange(value);\n                field.onBlur();\n            }}\n            required={field.required}\n            disabled={field.disabled}\n            validation={field.validation}\n            options={options.map(opt => ({\n                label: opt.label,\n                value: String(opt.value),\n                disabled: opt.disabled\n            }))}\n        />\n    );\n});\n"],"names":["SelectRenderer","createFieldRenderer","field","options","Select","String","value","opt"],"mappings":";;;AAWO,MAAMA,iBAAiBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IACxD,MAAMC,UAA0BD,MAAM,OAAO,IAAI,EAAE;IAEnD,OAAO,WAAP,GACI,oBAACE,QAAMA;QACH,OAAOF,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,aAAaA,MAAM,WAAW;QAC9B,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,OAAOA,AAAe,QAAfA,MAAM,KAAK,GAAWG,OAAOH,MAAM,KAAK,IAAI;QACnD,UAAUI,CAAAA;YACNJ,MAAM,QAAQ,CAACI;YACfJ,MAAM,MAAM;QAChB;QACA,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,SAASC,QAAQ,GAAG,CAACI,CAAAA,MAAQ;gBACzB,OAAOA,IAAI,KAAK;gBAChB,OAAOF,OAAOE,IAAI,KAAK;gBACvB,UAAUA,IAAI,QAAQ;YAC1B;;AAGZ"}
+{"version":3,"file":"base/Base/FieldRenderers/SelectRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/SelectRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Select } from \"@webiny/admin-ui\";\nimport type { IValueOption } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        select: { fieldType: \"text\" | \"number\"; options: true; settings: undefined };\n        /** @deprecated Use \"select\" instead. */\n        dropdown: { fieldType: \"text\" | \"number\"; options: true; settings: undefined };\n    }\n}\n\nexport const SelectRenderer = createFieldRenderer(({ field }) => {\n    const options: IValueOption[] = field.options ?? [];\n\n    return (\n        <Select\n            label={field.label}\n            hint={field.help}\n            placeholder={field.placeholder}\n            description={field.description}\n            note={field.note}\n            value={field.value != null ? String(field.value) : \"\"}\n            onChange={value => {\n                field.onChange(value);\n                field.onBlur();\n            }}\n            required={field.required}\n            disabled={field.disabled}\n            validation={field.validation}\n            options={options.map(opt => ({\n                label: opt.label,\n                value: String(opt.value),\n                disabled: opt.disabled\n            }))}\n        />\n    );\n});\n"],"names":["SelectRenderer","createFieldRenderer","field","options","Select","String","value","opt"],"mappings":";;;AAaO,MAAMA,iBAAiBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IACxD,MAAMC,UAA0BD,MAAM,OAAO,IAAI,EAAE;IAEnD,OAAO,WAAP,GACI,oBAACE,QAAMA;QACH,OAAOF,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,aAAaA,MAAM,WAAW;QAC9B,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,OAAOA,AAAe,QAAfA,MAAM,KAAK,GAAWG,OAAOH,MAAM,KAAK,IAAI;QACnD,UAAUI,CAAAA;YACNJ,MAAM,QAAQ,CAACI;YACfJ,MAAM,MAAM;QAChB;QACA,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,SAASC,QAAQ,GAAG,CAACI,CAAAA,MAAQ;gBACzB,OAAOA,IAAI,KAAK;gBAChB,OAAOF,OAAOE,IAAI,KAAK;gBACvB,UAAUA,IAAI,QAAQ;YAC1B;;AAGZ"}

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

@@ -1,5 +1,5 @@
 import React from "react";
 import type { TabsNodeRendererProps } from "../../../features/formModel/FormView.js";
-export declare const VerticalTabsRenderer: (({ node }: TabsNodeRendererProps) => React.JSX.Element) & {
-    displayName: string;
+export declare const VerticalTabsRenderer: (({ node }: TabsNodeRendererProps) => React.JSX.Element) & React.NamedExoticComponent<TabsNodeRendererProps> & {
+    readonly type: ({ node }: TabsNodeRendererProps) => React.JSX.Element;
 };

package/base/Base/Menus.js

@@ -4,10 +4,10 @@ import { ReactComponent as settings_svg_ReactComponent } from "@webiny/icons/set
 import { ReactComponent as electric_bolt_svg_ReactComponent } from "@webiny/icons/electric_bolt.svg";
 import { AdminConfig } from "../../config/AdminConfig.js";
 import { Menu } from "../../config/AdminConfig/Menu.js";
-import { useWcp } from "../../presentation/wcp/useWcp.js";
+import { useFeatureFlags } from "../../presentation/featureFlags/useFeatureFlags.js";
 const Menus = /*#__PURE__*/ react.memo(()=>{
-    const wcp = useWcp();
-    const hasWcpLicense = Boolean(wcp.getProject());
+    const featureFlags = useFeatureFlags();
+    const showUpgrade = !featureFlags.isEnabled("multiTenancy");
     return /*#__PURE__*/ react.createElement(AdminConfig, null, /*#__PURE__*/ react.createElement(Menu, {
         name: "home",
         pin: "start",
@@ -37,7 +37,7 @@ const Menus = /*#__PURE__*/ react.memo(()=>{
             text: "System",
             collapsible: false
         })
-    }), !hasWcpLicense && /*#__PURE__*/ react.createElement(Menu.Footer, {
+    }), showUpgrade && /*#__PURE__*/ react.createElement(Menu.Footer, {
         name: "upgrade",
         element: /*#__PURE__*/ react.createElement(Menu.Link, {
             text: "Upgrade",