@webiny/app-website-builder 6.4.0-beta.2 → 6.4.0-beta.4

package/BaseEditor/defaultConfig/Toolbar/Navigator/LayoutIllustration.js

@@ -0,0 +1,94 @@
+import react from "react";
+const LayoutIllustration = ()=>/*#__PURE__*/ react.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "104",
+        height: "86",
+        viewBox: "0 0 104 86",
+        fill: "none"
+    }, /*#__PURE__*/ react.createElement("g", {
+        filter: "url(#filter0_d_6405_31803)"
+    }, /*#__PURE__*/ react.createElement("path", {
+        d: "M7.01172 11.7C7.01172 8.55198 9.5637 6 12.7117 6H90.3742C93.5222 6 96.0742 8.55198 96.0742 11.7V71.55C96.0742 74.698 93.5222 77.25 90.3742 77.25H12.7117C9.56369 77.25 7.01172 74.698 7.01172 71.55V11.7Z",
+        fill: "white"
+    })), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "14.8105",
+        cy: "13.4043",
+        rx: "1.76361",
+        ry: "1.78125",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "20.5429",
+        cy: "13.4043",
+        rx: "1.76361",
+        ry: "1.78125",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("ellipse", {
+        cx: "26.7148",
+        cy: "13.4043",
+        rx: "1.76361",
+        ry: "1.78125",
+        fill: "#FA5723"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "15.1016",
+        y: "23.0527",
+        width: "23.8155",
+        height: "45.9626",
+        rx: "1.4012",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "43.0762",
+        y: "23.0527",
+        width: "44.814",
+        height: "21.4722",
+        rx: "1.4012",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "43.0762",
+        y: "47.873",
+        width: "20.7899",
+        height: "21.1422",
+        rx: "1.4012",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("rect", {
+        x: "67.0996",
+        y: "47.873",
+        width: "20.7899",
+        height: "21.1422",
+        rx: "1.4012",
+        fill: "#F0F1F3"
+    }), /*#__PURE__*/ react.createElement("defs", null, /*#__PURE__*/ react.createElement("filter", {
+        id: "filter0_d_6405_31803",
+        x: "0.000718594",
+        y: "-7.95126e-05",
+        width: "103.085",
+        height: "85.272",
+        filterUnits: "userSpaceOnUse",
+        colorInterpolationFilters: "sRGB"
+    }, /*#__PURE__*/ react.createElement("feFlood", {
+        floodOpacity: "0",
+        result: "BackgroundImageFix"
+    }), /*#__PURE__*/ react.createElement("feColorMatrix", {
+        in: "SourceAlpha",
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+        result: "hardAlpha"
+    }), /*#__PURE__*/ react.createElement("feOffset", {
+        dy: "1.01092"
+    }), /*#__PURE__*/ react.createElement("feGaussianBlur", {
+        stdDeviation: "3.5055"
+    }), /*#__PURE__*/ react.createElement("feColorMatrix", {
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+    }), /*#__PURE__*/ react.createElement("feBlend", {
+        mode: "normal",
+        in2: "BackgroundImageFix",
+        result: "effect1_dropShadow_6405_31803"
+    }), /*#__PURE__*/ react.createElement("feBlend", {
+        mode: "normal",
+        in: "SourceGraphic",
+        in2: "effect1_dropShadow_6405_31803",
+        result: "shape"
+    }))));
+export { LayoutIllustration };
+
+//# sourceMappingURL=LayoutIllustration.js.map

package/BaseEditor/defaultConfig/Toolbar/Navigator/LayoutIllustration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/LayoutIllustration.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/LayoutIllustration.tsx"],"sourcesContent":["import React from \"react\";\n\nexport const LayoutIllustration = () => (\n    <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"104\"\n        height=\"86\"\n        viewBox=\"0 0 104 86\"\n        fill=\"none\"\n    >\n        <g filter=\"url(#filter0_d_6405_31803)\">\n            <path\n                d=\"M7.01172 11.7C7.01172 8.55198 9.5637 6 12.7117 6H90.3742C93.5222 6 96.0742 8.55198 96.0742 11.7V71.55C96.0742 74.698 93.5222 77.25 90.3742 77.25H12.7117C9.56369 77.25 7.01172 74.698 7.01172 71.55V11.7Z\"\n                fill=\"white\"\n            />\n        </g>\n        <ellipse cx=\"14.8105\" cy=\"13.4043\" rx=\"1.76361\" ry=\"1.78125\" fill=\"#FA5723\" />\n        <ellipse cx=\"20.5429\" cy=\"13.4043\" rx=\"1.76361\" ry=\"1.78125\" fill=\"#FA5723\" />\n        <ellipse cx=\"26.7148\" cy=\"13.4043\" rx=\"1.76361\" ry=\"1.78125\" fill=\"#FA5723\" />\n        <rect x=\"15.1016\" y=\"23.0527\" width=\"23.8155\" height=\"45.9626\" rx=\"1.4012\" fill=\"#F0F1F3\" />\n        <rect x=\"43.0762\" y=\"23.0527\" width=\"44.814\" height=\"21.4722\" rx=\"1.4012\" fill=\"#F0F1F3\" />\n        <rect x=\"43.0762\" y=\"47.873\" width=\"20.7899\" height=\"21.1422\" rx=\"1.4012\" fill=\"#F0F1F3\" />\n        <rect x=\"67.0996\" y=\"47.873\" width=\"20.7899\" height=\"21.1422\" rx=\"1.4012\" fill=\"#F0F1F3\" />\n        <defs>\n            <filter\n                id=\"filter0_d_6405_31803\"\n                x=\"0.000718594\"\n                y=\"-7.95126e-05\"\n                width=\"103.085\"\n                height=\"85.272\"\n                filterUnits=\"userSpaceOnUse\"\n                colorInterpolationFilters=\"sRGB\"\n            >\n                <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n                <feColorMatrix\n                    in=\"SourceAlpha\"\n                    type=\"matrix\"\n                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                    result=\"hardAlpha\"\n                />\n                <feOffset dy=\"1.01092\" />\n                <feGaussianBlur stdDeviation=\"3.5055\" />\n                <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0\" />\n                <feBlend\n                    mode=\"normal\"\n                    in2=\"BackgroundImageFix\"\n                    result=\"effect1_dropShadow_6405_31803\"\n                />\n                <feBlend\n                    mode=\"normal\"\n                    in=\"SourceGraphic\"\n                    in2=\"effect1_dropShadow_6405_31803\"\n                    result=\"shape\"\n                />\n            </filter>\n        </defs>\n    </svg>\n);\n"],"names":["LayoutIllustration"],"mappings":";AAEO,MAAMA,qBAAqB,kBAC9B,oBAAC;QACG,OAAM;QACN,OAAM;QACN,QAAO;QACP,SAAQ;QACR,MAAK;qBAEL,oBAAC;QAAE,QAAO;qBACN,oBAAC;QACG,GAAE;QACF,MAAK;uBAGb,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,MAAK;sBAClE,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,MAAK;sBAClE,oBAAC;QAAQ,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,IAAG;QAAU,MAAK;sBAClE,oBAAC;QAAK,GAAE;QAAU,GAAE;QAAU,OAAM;QAAU,QAAO;QAAU,IAAG;QAAS,MAAK;sBAChF,oBAAC;QAAK,GAAE;QAAU,GAAE;QAAU,OAAM;QAAS,QAAO;QAAU,IAAG;QAAS,MAAK;sBAC/E,oBAAC;QAAK,GAAE;QAAU,GAAE;QAAS,OAAM;QAAU,QAAO;QAAU,IAAG;QAAS,MAAK;sBAC/E,oBAAC;QAAK,GAAE;QAAU,GAAE;QAAS,OAAM;QAAU,QAAO;QAAU,IAAG;QAAS,MAAK;sBAC/E,oBAAC,4BACG,oBAAC;QACG,IAAG;QACH,GAAE;QACF,GAAE;QACF,OAAM;QACN,QAAO;QACP,aAAY;QACZ,2BAA0B;qBAE1B,oBAAC;QAAQ,cAAa;QAAI,QAAO;sBACjC,oBAAC;QACG,IAAG;QACH,MAAK;QACL,QAAO;QACP,QAAO;sBAEX,oBAAC;QAAS,IAAG;sBACb,oBAAC;QAAe,cAAa;sBAC7B,oBAAC;QAAc,MAAK;QAAS,QAAO;sBACpC,oBAAC;QACG,MAAK;QACL,KAAI;QACJ,QAAO;sBAEX,oBAAC;QACG,MAAK;QACL,IAAG;QACH,KAAI;QACJ,QAAO"}

package/BaseEditor/defaultConfig/Toolbar/Navigator/Navigator.js

@@ -1,79 +1,14 @@
 import react, { useCallback, useMemo } from "react";
-import get from "lodash/get.js";
 import { observer } from "mobx-react-lite";
-import { Tooltip, Tree } from "@webiny/admin-ui";
-import { ReactComponent } from "@webiny/icons/visibility_off.svg";
+import { ScrollArea, Tree } from "@webiny/admin-ui";
 import { useActiveElement } from "../../../hooks/useActiveElement.js";
 import { useSelectFromEditor } from "../../../hooks/useSelectFromEditor.js";
 import { useDocumentEditor } from "../../../../DocumentEditor/index.js";
 import { Commands } from "../../../index.js";
-import { InlineSvg } from "../InsertElements/InlineSvg.js";
-import { InfoMessage } from "../../Sidebar/InfoMessage.js";
-import { useStyles } from "../../../hooks/useStyles.js";
-function flattenElements(elements, activeElementId) {
-    const result = [];
-    const asArray = Object.values(elements);
-    for(const key in elements){
-        const node = elements[key];
-        if (node.parent) result.push({
-            id: node.id,
-            label: node.label,
-            parentId: node.parent.id,
-            active: node.id === activeElementId,
-            droppable: asArray.filter((el)=>el.parent?.id === node.id).length > 0,
-            data: {
-                parent: node.parent,
-                icon: node.image ? /*#__PURE__*/ react.createElement(InlineSvg, {
-                    src: node.image,
-                    className: "fill-neutral-strong"
-                }) : /*#__PURE__*/ react.createElement(react.Fragment, null),
-                draggable: node.canDrag
-            }
-        });
-    }
-    return result;
-}
-function getElementNodeData({ components, elements, bindings }) {
-    const getIndex = (elementId, parentId, slot)=>{
-        const elementBindings = bindings[parentId];
-        if (!elementBindings) return -1;
-        const slotValue = get(elementBindings, `inputs.${slot}`);
-        if (!slotValue) return -1;
-        if (slotValue.list) return slotValue.static.indexOf(elementId);
-        return -1;
-    };
-    return Object.values(elements).reduce((acc, element)=>{
-        if ("root" === element.id) return {
-            ...acc,
-            [element.id]: {
-                id: element.id,
-                label: "Root",
-                image: ""
-            }
-        };
-        const component = components[element.component.name] ?? {
-            label: "",
-            image: null,
-            canDrag: false
-        };
-        const parentId = element.parent.id;
-        const slot = element.parent.slot;
-        return {
-            ...acc,
-            [element.id]: {
-                id: element.id,
-                label: component?.label ?? component?.name ?? "",
-                image: component.image,
-                canDrag: component.canDrag,
-                parent: {
-                    id: parentId,
-                    slot,
-                    index: getIndex(element.id, parentId, slot)
-                }
-            }
-        };
-    }, {});
-}
+import { NavigatorEmptyState } from "./NavigatorEmptyState.js";
+import { Placeholder } from "./Placeholder.js";
+import { ElementActions } from "./ElementActions.js";
+import { flattenElements, getElementNodeData } from "./navigatorUtils.js";
 const Navigator = observer(()=>{
     const editor = useDocumentEditor();
     const [activeElement] = useActiveElement();
@@ -133,10 +68,10 @@ const Navigator = observer(()=>{
         }, /*#__PURE__*/ react.createElement(ElementActions, {
             elementId: node.id
         })));
-    if (Object.keys(elementNodes).length <= 1) return /*#__PURE__*/ react.createElement(InfoMessage, {
-        message: "No elements to display."
-    });
-    return /*#__PURE__*/ react.createElement(Tree, {
+    if (Object.keys(elementNodes).length <= 1) return /*#__PURE__*/ react.createElement(NavigatorEmptyState, null);
+    return /*#__PURE__*/ react.createElement(ScrollArea, {
+        className: "h-full pt-xs"
+    }, /*#__PURE__*/ react.createElement(Tree, {
         key: treeKey,
         autoExpandOnDragOver: false,
         insertDroppableFirst: false,
@@ -147,8 +82,8 @@ const Navigator = observer(()=>{
         defaultOpenNodeIds: activeAncestors,
         dropTargetOffset: 5,
         placeholderRender: (node, { depth })=>/*#__PURE__*/ react.createElement(Placeholder, {
-                depth: depth,
-                node: node
+                node: node,
+                depth: depth
             }),
         onDrop: (newTree, { dragSource })=>{
             if (!dragSource || !dragSource.data) return;
@@ -167,42 +102,8 @@ const Navigator = observer(()=>{
             if (dragSource?.parentId === dropTargetId) return true;
             return false;
         }
-    });
-});
-const Placeholder = (props)=>/*#__PURE__*/ react.createElement("div", {
-        className: "bg-primary",
-        style: {
-            height: 2,
-            zIndex: 999,
-            position: "absolute",
-            right: 0,
-            transform: "translateY(-50%)",
-            top: -2,
-            left: 24 * props.depth
-        }
-    });
-const ElementActions = ({ elementId })=>{
-    const { styles, onChange } = useStyles(elementId);
-    const isVisible = "none" !== styles.display;
-    const unhideElement = ()=>{
-        onChange(({ styles })=>{
-            styles.set("display", "flex");
-        });
-    };
-    if (isVisible) return null;
-    return /*#__PURE__*/ react.createElement("div", {
-        className: "flex"
-    }, /*#__PURE__*/ react.createElement(Tooltip, {
-        trigger: /*#__PURE__*/ react.createElement(Tree.Item.Icon, {
-            size: "sm",
-            className: "cursor-pointer",
-            element: /*#__PURE__*/ react.createElement(ReactComponent, null),
-            label: "This element is hidden.",
-            onClick: unhideElement
-        }),
-        content: "This element is hidden. Click to unhide."
     }));
-};
+});
 export { Navigator };
 
 //# sourceMappingURL=Navigator.js.map

package/BaseEditor/defaultConfig/Toolbar/Navigator/Navigator.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/Navigator.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/Navigator.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from \"react\";\nimport get from \"lodash/get.js\";\nimport { observer } from \"mobx-react-lite\";\nimport { type NodeDto, Tree, type TreeProps, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as VisibilityNone } from \"@webiny/icons/visibility_off.svg\";\nimport type { Document } from \"@webiny/website-builder-sdk\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport type { EditorState } from \"~/editorSdk/Editor.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport { InfoMessage } from \"~/BaseEditor/defaultConfig/Sidebar/InfoMessage.js\";\nimport { useStyles } from \"~/BaseEditor/hooks/useStyles.js\";\n\n// Node type for the Tree component.\ntype ElementNode = NodeDto<{\n    draggable: boolean;\n    icon: React.ReactNode;\n    parent: {\n        id: string;\n        slot: string;\n        index: number;\n    };\n}>;\n\n// Element data extracted from the Document state.\ntype ElementNodeData = {\n    id: string;\n    label: string;\n    image: string;\n    canDrag: boolean;\n    parent: {\n        id: string;\n        slot: string;\n        index: number;\n    };\n};\n\nfunction flattenElements(elements: Record<string, ElementNodeData>, activeElementId?: string) {\n    const result: ElementNode[] = [];\n    const asArray = Object.values(elements);\n\n    for (const key in elements) {\n        const node = elements[key];\n\n        // Skip root element.\n        if (!node.parent) {\n            continue;\n        }\n\n        result.push({\n            id: node.id,\n            label: node.label,\n            parentId: node.parent.id,\n            active: node.id === activeElementId,\n            droppable: asArray.filter(el => el.parent?.id === node.id).length > 0,\n            data: {\n                parent: node.parent,\n                icon: node.image ? (\n                    <InlineSvg src={node.image} className={\"fill-neutral-strong\"} />\n                ) : (\n                    <></>\n                ),\n                draggable: node.canDrag\n            }\n        });\n    }\n\n    return result;\n}\n\ninterface GetElementNodeDataParams {\n    components: EditorState[\"components\"];\n    elements: Document[\"elements\"];\n    bindings: Document[\"bindings\"];\n}\n\nfunction getElementNodeData({\n    components,\n    elements,\n    bindings\n}: GetElementNodeDataParams): Record<string, ElementNodeData> {\n    const getIndex = (elementId: string, parentId: string, slot: string) => {\n        const elementBindings = bindings[parentId];\n        if (!elementBindings) {\n            return -1;\n        }\n\n        const slotValue = get(elementBindings, `inputs.${slot}`);\n        if (!slotValue) {\n            return -1;\n        }\n\n        if (slotValue.list) {\n            return slotValue.static.indexOf(elementId);\n        }\n\n        return -1;\n    };\n\n    return Object.values(elements).reduce((acc, element) => {\n        if (element.id === \"root\") {\n            return {\n                ...acc,\n                [element.id]: {\n                    id: element.id,\n                    label: \"Root\",\n                    image: \"\"\n                }\n            };\n        }\n\n        const component = components[element.component.name] ?? {\n            label: \"\",\n            image: null,\n            canDrag: false\n        };\n\n        const parentId = element.parent!.id;\n        const slot = element.parent!.slot;\n\n        return {\n            ...acc,\n            [element.id]: {\n                id: element.id,\n                label: component?.label ?? component?.name ?? \"\",\n                image: component.image,\n                canDrag: component.canDrag,\n                parent: {\n                    id: parentId,\n                    slot,\n                    index: getIndex(element.id, parentId, slot)\n                }\n            }\n        };\n    }, {});\n}\n\nexport const Navigator = observer(() => {\n    const editor = useDocumentEditor();\n    const [activeElement] = useActiveElement();\n\n    const document = editor.getDocumentState().read();\n    const elements = document.elements;\n    const bindings = document.bindings;\n    const treeKey = document.id;\n\n    const components = useSelectFromEditor(state => {\n        return state.components;\n    });\n\n    const elementNodes = getElementNodeData({ components, elements, bindings });\n\n    const activeAncestors = useMemo(() => {\n        if (!activeElement) {\n            return [];\n        }\n\n        const ancestors: string[] = [activeElement.id];\n        let parent = elementNodes[activeElement.id].parent;\n        while (parent) {\n            ancestors.push(parent.id);\n            parent = elementNodes[parent.id].parent;\n        }\n        return ancestors.reverse();\n    }, [elementNodes, activeElement]);\n\n    const nodes = useMemo(() => {\n        return flattenElements(elementNodes, activeElement?.id).sort((a, b) => {\n            return a.data!.parent.index - b.data!.parent.index;\n        });\n    }, [elementNodes, activeElement]);\n\n    const highlightElement = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n        e.preventDefault();\n        const nodeId = e.currentTarget.getAttribute(\"data-node-id\");\n\n        if (nodeId) {\n            editor.executeCommand(Commands.HighlightElement, { id: nodeId });\n        }\n    }, []);\n\n    const activateElement = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n        e.preventDefault();\n        const nodeId = e.currentTarget.getAttribute(\"data-node-id\");\n\n        if (nodeId) {\n            editor.executeCommand(Commands.SelectElement, { id: nodeId });\n        }\n    }, []);\n\n    const renderer: TreeProps[\"renderer\"] = node => {\n        return (\n            <Tree.Item.Content\n                data-node-id={node.id}\n                onMouseOver={highlightElement}\n                onClick={activateElement}\n            >\n                <Tree.Item.Icon label={node.label} element={node.icon} size={\"sm\"} />\n                {node.label}\n                <div className={\"flex w-full justify-end\"}>\n                    <ElementActions elementId={node.id} />\n                </div>\n            </Tree.Item.Content>\n        );\n    };\n\n    if (Object.keys(elementNodes).length <= 1) {\n        return <InfoMessage message={\"No elements to display.\"} />;\n    }\n\n    return (\n        <Tree\n            key={treeKey}\n            autoExpandOnDragOver={false}\n            insertDroppableFirst={false}\n            nodes={nodes}\n            rootId={\"root\"}\n            renderer={renderer}\n            sort={false}\n            defaultOpenNodeIds={activeAncestors}\n            dropTargetOffset={5}\n            placeholderRender={(node, { depth }) => {\n                return <Placeholder depth={depth} node={node} />;\n            }}\n            onDrop={(newTree, { dragSource }) => {\n                if (!dragSource || !dragSource.data) {\n                    return;\n                }\n\n                const parent = dragSource.data.parent;\n\n                const sameLevelNodes = newTree.filter(n => n.parentId === dragSource.parentId);\n                const newIndex = sameLevelNodes.findIndex(n => n.id === dragSource.id);\n                editor.executeCommand(Commands.MoveElement, {\n                    elementId: dragSource.id,\n                    parentId: parent.id,\n                    slot: parent.slot,\n                    index: newIndex\n                });\n            }}\n            canDrag={node => node.data?.draggable ?? true}\n            canDrop={(_, { dragSource, dropTargetId }) => {\n                // Only allow dropping within the same parent (for now).\n                if (dragSource?.parentId === dropTargetId) {\n                    return true;\n                }\n                return false;\n            }}\n        />\n    );\n});\n\ntype PlaceholderProps = {\n    node: any;\n    depth: number;\n};\n\nconst Placeholder = (props: PlaceholderProps) => (\n    <div\n        className={\"bg-primary\"}\n        style={{\n            height: 2,\n            zIndex: 999,\n            position: \"absolute\",\n            right: 0,\n            transform: \"translateY(-50%)\",\n            top: -2,\n            left: props.depth * 24\n        }}\n    ></div>\n);\n\nconst ElementActions = ({ elementId }: { elementId: string }) => {\n    const { styles, onChange } = useStyles(elementId);\n\n    const isVisible = styles.display !== \"none\";\n\n    const unhideElement = () => {\n        onChange(({ styles }) => {\n            styles.set(\"display\", \"flex\");\n        });\n    };\n\n    if (isVisible) {\n        return null;\n    }\n\n    return (\n        <div className={\"flex\"}>\n            <Tooltip\n                trigger={\n                    <Tree.Item.Icon\n                        size={\"sm\"}\n                        className={\"cursor-pointer\"}\n                        element={<VisibilityNone />}\n                        label={\"This element is hidden.\"}\n                        onClick={unhideElement}\n                    />\n                }\n                content={\"This element is hidden. Click to unhide.\"}\n            />\n        </div>\n    );\n};\n"],"names":["flattenElements","elements","activeElementId","result","asArray","Object","key","node","el","InlineSvg","getElementNodeData","components","bindings","getIndex","elementId","parentId","slot","elementBindings","slotValue","get","acc","element","component","Navigator","observer","editor","useDocumentEditor","activeElement","useActiveElement","document","treeKey","useSelectFromEditor","state","elementNodes","activeAncestors","useMemo","ancestors","parent","nodes","a","b","highlightElement","useCallback","e","nodeId","Commands","activateElement","renderer","Tree","ElementActions","InfoMessage","depth","Placeholder","newTree","dragSource","sameLevelNodes","n","newIndex","_","dropTargetId","props","styles","onChange","useStyles","isVisible","unhideElement","Tooltip","VisibilityNone"],"mappings":";;;;;;;;;;;;AAuCA,SAASA,gBAAgBC,QAAyC,EAAEC,eAAwB;IACxF,MAAMC,SAAwB,EAAE;IAChC,MAAMC,UAAUC,OAAO,MAAM,CAACJ;IAE9B,IAAK,MAAMK,OAAOL,SAAU;QACxB,MAAMM,OAAON,QAAQ,CAACK,IAAI;QAG1B,IAAKC,KAAK,MAAM,EAIhBJ,OAAO,IAAI,CAAC;YACR,IAAII,KAAK,EAAE;YACX,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,MAAM,CAAC,EAAE;YACxB,QAAQA,KAAK,EAAE,KAAKL;YACpB,WAAWE,QAAQ,MAAM,CAACI,CAAAA,KAAMA,GAAG,MAAM,EAAE,OAAOD,KAAK,EAAE,EAAE,MAAM,GAAG;YACpE,MAAM;gBACF,QAAQA,KAAK,MAAM;gBACnB,MAAMA,KAAK,KAAK,GAAG,WAAH,GACZ,oBAACE,WAASA;oBAAC,KAAKF,KAAK,KAAK;oBAAE,WAAW;mCAEvC;gBAEJ,WAAWA,KAAK,OAAO;YAC3B;QACJ;IACJ;IAEA,OAAOJ;AACX;AAQA,SAASO,mBAAmB,EACxBC,UAAU,EACVV,QAAQ,EACRW,QAAQ,EACe;IACvB,MAAMC,WAAW,CAACC,WAAmBC,UAAkBC;QACnD,MAAMC,kBAAkBL,QAAQ,CAACG,SAAS;QAC1C,IAAI,CAACE,iBACD,OAAO;QAGX,MAAMC,YAAYC,IAAIF,iBAAiB,CAAC,OAAO,EAAED,MAAM;QACvD,IAAI,CAACE,WACD,OAAO;QAGX,IAAIA,UAAU,IAAI,EACd,OAAOA,UAAU,MAAM,CAAC,OAAO,CAACJ;QAGpC,OAAO;IACX;IAEA,OAAOT,OAAO,MAAM,CAACJ,UAAU,MAAM,CAAC,CAACmB,KAAKC;QACxC,IAAIA,AAAe,WAAfA,QAAQ,EAAE,EACV,OAAO;YACH,GAAGD,GAAG;YACN,CAACC,QAAQ,EAAE,CAAC,EAAE;gBACV,IAAIA,QAAQ,EAAE;gBACd,OAAO;gBACP,OAAO;YACX;QACJ;QAGJ,MAAMC,YAAYX,UAAU,CAACU,QAAQ,SAAS,CAAC,IAAI,CAAC,IAAI;YACpD,OAAO;YACP,OAAO;YACP,SAAS;QACb;QAEA,MAAMN,WAAWM,QAAQ,MAAM,CAAE,EAAE;QACnC,MAAML,OAAOK,QAAQ,MAAM,CAAE,IAAI;QAEjC,OAAO;YACH,GAAGD,GAAG;YACN,CAACC,QAAQ,EAAE,CAAC,EAAE;gBACV,IAAIA,QAAQ,EAAE;gBACd,OAAOC,WAAW,SAASA,WAAW,QAAQ;gBAC9C,OAAOA,UAAU,KAAK;gBACtB,SAASA,UAAU,OAAO;gBAC1B,QAAQ;oBACJ,IAAIP;oBACJC;oBACA,OAAOH,SAASQ,QAAQ,EAAE,EAAEN,UAAUC;gBAC1C;YACJ;QACJ;IACJ,GAAG,CAAC;AACR;AAEO,MAAMO,YAAYC,SAAS;IAC9B,MAAMC,SAASC;IACf,MAAM,CAACC,cAAc,GAAGC;IAExB,MAAMC,WAAWJ,OAAO,gBAAgB,GAAG,IAAI;IAC/C,MAAMxB,WAAW4B,SAAS,QAAQ;IAClC,MAAMjB,WAAWiB,SAAS,QAAQ;IAClC,MAAMC,UAAUD,SAAS,EAAE;IAE3B,MAAMlB,aAAaoB,oBAAoBC,CAAAA,QAC5BA,MAAM,UAAU;IAG3B,MAAMC,eAAevB,mBAAmB;QAAEC;QAAYV;QAAUW;IAAS;IAEzE,MAAMsB,kBAAkBC,QAAQ;QAC5B,IAAI,CAACR,eACD,OAAO,EAAE;QAGb,MAAMS,YAAsB;YAACT,cAAc,EAAE;SAAC;QAC9C,IAAIU,SAASJ,YAAY,CAACN,cAAc,EAAE,CAAC,CAAC,MAAM;QAClD,MAAOU,OAAQ;YACXD,UAAU,IAAI,CAACC,OAAO,EAAE;YACxBA,SAASJ,YAAY,CAACI,OAAO,EAAE,CAAC,CAAC,MAAM;QAC3C;QACA,OAAOD,UAAU,OAAO;IAC5B,GAAG;QAACH;QAAcN;KAAc;IAEhC,MAAMW,QAAQH,QAAQ,IACXnC,gBAAgBiC,cAAcN,eAAe,IAAI,IAAI,CAAC,CAACY,GAAGC,IACtDD,EAAE,IAAI,CAAE,MAAM,CAAC,KAAK,GAAGC,EAAE,IAAI,CAAE,MAAM,CAAC,KAAK,GAEvD;QAACP;QAAcN;KAAc;IAEhC,MAAMc,mBAAmBC,YAAY,CAACC;QAClCA,EAAE,cAAc;QAChB,MAAMC,SAASD,EAAE,aAAa,CAAC,YAAY,CAAC;QAE5C,IAAIC,QACAnB,OAAO,cAAc,CAACoB,SAAS,gBAAgB,EAAE;YAAE,IAAID;QAAO;IAEtE,GAAG,EAAE;IAEL,MAAME,kBAAkBJ,YAAY,CAACC;QACjCA,EAAE,cAAc;QAChB,MAAMC,SAASD,EAAE,aAAa,CAAC,YAAY,CAAC;QAE5C,IAAIC,QACAnB,OAAO,cAAc,CAACoB,SAAS,aAAa,EAAE;YAAE,IAAID;QAAO;IAEnE,GAAG,EAAE;IAEL,MAAMG,WAAkCxC,CAAAA,OAC7B,WAAP,GACI,oBAACyC,KAAK,IAAI,CAAC,OAAO;YACd,gBAAczC,KAAK,EAAE;YACrB,aAAakC;YACb,SAASK;yBAET,oBAACE,KAAK,IAAI,CAAC,IAAI;YAAC,OAAOzC,KAAK,KAAK;YAAE,SAASA,KAAK,IAAI;YAAE,MAAM;YAC5DA,KAAK,KAAK,gBACX,oBAAC;YAAI,WAAW;yBACZ,oBAAC0C,gBAAcA;YAAC,WAAW1C,KAAK,EAAE;;IAMlD,IAAIF,OAAO,IAAI,CAAC4B,cAAc,MAAM,IAAI,GACpC,OAAO,WAAP,GAAO,oBAACiB,aAAWA;QAAC,SAAS;;IAGjC,OAAO,WAAP,GACI,oBAACF,MAAIA;QACD,KAAKlB;QACL,sBAAsB;QACtB,sBAAsB;QACtB,OAAOQ;QACP,QAAQ;QACR,UAAUS;QACV,MAAM;QACN,oBAAoBb;QACpB,kBAAkB;QAClB,mBAAmB,CAAC3B,MAAM,EAAE4C,KAAK,EAAE,GACxB,WAAP,GAAO,oBAACC,aAAWA;gBAAC,OAAOD;gBAAO,MAAM5C;;QAE5C,QAAQ,CAAC8C,SAAS,EAAEC,UAAU,EAAE;YAC5B,IAAI,CAACA,cAAc,CAACA,WAAW,IAAI,EAC/B;YAGJ,MAAMjB,SAASiB,WAAW,IAAI,CAAC,MAAM;YAErC,MAAMC,iBAAiBF,QAAQ,MAAM,CAACG,CAAAA,IAAKA,EAAE,QAAQ,KAAKF,WAAW,QAAQ;YAC7E,MAAMG,WAAWF,eAAe,SAAS,CAACC,CAAAA,IAAKA,EAAE,EAAE,KAAKF,WAAW,EAAE;YACrE7B,OAAO,cAAc,CAACoB,SAAS,WAAW,EAAE;gBACxC,WAAWS,WAAW,EAAE;gBACxB,UAAUjB,OAAO,EAAE;gBACnB,MAAMA,OAAO,IAAI;gBACjB,OAAOoB;YACX;QACJ;QACA,SAASlD,CAAAA,OAAQA,KAAK,IAAI,EAAE,aAAa;QACzC,SAAS,CAACmD,GAAG,EAAEJ,UAAU,EAAEK,YAAY,EAAE;YAErC,IAAIL,YAAY,aAAaK,cACzB,OAAO;YAEX,OAAO;QACX;;AAGZ;AAOA,MAAMP,cAAc,CAACQ,QAAAA,WAAAA,GACjB,oBAAC;QACG,WAAW;QACX,OAAO;YACH,QAAQ;YACR,QAAQ;YACR,UAAU;YACV,OAAO;YACP,WAAW;YACX,KAAK;YACL,MAAMA,AAAc,KAAdA,MAAM,KAAK;QACrB;;AAIR,MAAMX,iBAAiB,CAAC,EAAEnC,SAAS,EAAyB;IACxD,MAAM,EAAE+C,MAAM,EAAEC,QAAQ,EAAE,GAAGC,UAAUjD;IAEvC,MAAMkD,YAAYH,AAAmB,WAAnBA,OAAO,OAAO;IAEhC,MAAMI,gBAAgB;QAClBH,SAAS,CAAC,EAAED,MAAM,EAAE;YAChBA,OAAO,GAAG,CAAC,WAAW;QAC1B;IACJ;IAEA,IAAIG,WACA,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACE,SAAOA;QACJ,uBACI,oBAAClB,KAAK,IAAI,CAAC,IAAI;YACX,MAAM;YACN,WAAW;YACX,uBAAS,oBAACmB,gBAAcA;YACxB,OAAO;YACP,SAASF;;QAGjB,SAAS;;AAIzB"}
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/Navigator.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/Navigator.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { type TreeProps, Tree, ScrollArea } from \"@webiny/admin-ui\";\nimport { useActiveElement } from \"~/BaseEditor/hooks/useActiveElement.js\";\nimport { useSelectFromEditor } from \"~/BaseEditor/hooks/useSelectFromEditor.js\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/index.js\";\nimport { NavigatorEmptyState } from \"./NavigatorEmptyState.js\";\nimport { Placeholder } from \"./Placeholder.js\";\nimport { ElementActions } from \"./ElementActions.js\";\nimport { flattenElements, getElementNodeData } from \"./navigatorUtils.js\";\n\nexport const Navigator = observer(() => {\n    const editor = useDocumentEditor();\n    const [activeElement] = useActiveElement();\n\n    const document = editor.getDocumentState().read();\n    const elements = document.elements;\n    const bindings = document.bindings;\n    const treeKey = document.id;\n\n    const components = useSelectFromEditor(state => state.components);\n\n    const elementNodes = getElementNodeData({ components, elements, bindings });\n\n    const activeAncestors = useMemo(() => {\n        if (!activeElement) {\n            return [];\n        }\n        const ancestors: string[] = [activeElement.id];\n        let parent = elementNodes[activeElement.id].parent;\n        while (parent) {\n            ancestors.push(parent.id);\n            parent = elementNodes[parent.id].parent;\n        }\n        return ancestors.reverse();\n    }, [elementNodes, activeElement]);\n\n    const nodes = useMemo(() => {\n        return flattenElements(elementNodes, activeElement?.id).sort((a, b) => {\n            return a.data!.parent.index - b.data!.parent.index;\n        });\n    }, [elementNodes, activeElement]);\n\n    const highlightElement = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n        e.preventDefault();\n        const nodeId = e.currentTarget.getAttribute(\"data-node-id\");\n        if (nodeId) {\n            editor.executeCommand(Commands.HighlightElement, { id: nodeId });\n        }\n    }, []);\n\n    const activateElement = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n        e.preventDefault();\n        const nodeId = e.currentTarget.getAttribute(\"data-node-id\");\n        if (nodeId) {\n            editor.executeCommand(Commands.SelectElement, { id: nodeId });\n        }\n    }, []);\n\n    const renderer: TreeProps[\"renderer\"] = node => (\n        <Tree.Item.Content\n            data-node-id={node.id}\n            onMouseOver={highlightElement}\n            onClick={activateElement}\n        >\n            <Tree.Item.Icon label={node.label} element={node.icon} size={\"sm\"} />\n            {node.label}\n            <div className={\"flex w-full justify-end\"}>\n                <ElementActions elementId={node.id} />\n            </div>\n        </Tree.Item.Content>\n    );\n\n    if (Object.keys(elementNodes).length <= 1) {\n        return <NavigatorEmptyState />;\n    }\n\n    return (\n        <ScrollArea className={\"h-full pt-xs\"}>\n            <Tree\n                key={treeKey}\n                autoExpandOnDragOver={false}\n                insertDroppableFirst={false}\n                nodes={nodes}\n                rootId={\"root\"}\n                renderer={renderer}\n                sort={false}\n                defaultOpenNodeIds={activeAncestors}\n                dropTargetOffset={5}\n                placeholderRender={(node, { depth }) => <Placeholder node={node} depth={depth} />}\n                onDrop={(newTree, { dragSource }) => {\n                    if (!dragSource || !dragSource.data) {\n                        return;\n                    }\n                    const parent = dragSource.data.parent;\n                    const sameLevelNodes = newTree.filter(n => n.parentId === dragSource.parentId);\n                    const newIndex = sameLevelNodes.findIndex(n => n.id === dragSource.id);\n                    editor.executeCommand(Commands.MoveElement, {\n                        elementId: dragSource.id,\n                        parentId: parent.id,\n                        slot: parent.slot,\n                        index: newIndex\n                    });\n                }}\n                canDrag={node => node.data?.draggable ?? true}\n                canDrop={(_, { dragSource, dropTargetId }) => {\n                    if (dragSource?.parentId === dropTargetId) {\n                        return true;\n                    }\n                    return false;\n                }}\n            />\n        </ScrollArea>\n    );\n});\n"],"names":["Navigator","observer","editor","useDocumentEditor","activeElement","useActiveElement","document","elements","bindings","treeKey","components","useSelectFromEditor","state","elementNodes","getElementNodeData","activeAncestors","useMemo","ancestors","parent","nodes","flattenElements","a","b","highlightElement","useCallback","e","nodeId","Commands","activateElement","renderer","node","Tree","ElementActions","Object","NavigatorEmptyState","ScrollArea","depth","Placeholder","newTree","dragSource","sameLevelNodes","n","newIndex","_","dropTargetId"],"mappings":"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"}

package/BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorEmptyState.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const NavigatorEmptyState: () => React.JSX.Element;

package/BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorEmptyState.js

@@ -0,0 +1,20 @@
+import react from "react";
+import { Button, Text, useSegmentedTabs } from "@webiny/admin-ui";
+import { LayoutIllustration } from "./LayoutIllustration.js";
+const NavigatorEmptyState = ()=>{
+    const { setActiveTab } = useSegmentedTabs();
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col items-center gap-md px-md text-center mt-[200px]"
+    }, /*#__PURE__*/ react.createElement(LayoutIllustration, null), /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong"
+    }, "You do not have any items in your layout. Add your first item in Insert panel."), /*#__PURE__*/ react.createElement(Button, {
+        variant: "secondary",
+        text: "Add item",
+        size: "sm",
+        onClick: ()=>setActiveTab("insert")
+    }));
+};
+export { NavigatorEmptyState };
+
+//# sourceMappingURL=NavigatorEmptyState.js.map

package/BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorEmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorEmptyState.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorEmptyState.tsx"],"sourcesContent":["import React from \"react\";\nimport { Text, Button, useSegmentedTabs } from \"@webiny/admin-ui\";\nimport { LayoutIllustration } from \"./LayoutIllustration.js\";\n\nexport const NavigatorEmptyState = () => {\n    const { setActiveTab } = useSegmentedTabs();\n\n    return (\n        <div className={\"flex flex-col items-center gap-md px-md text-center mt-[200px]\"}>\n            <LayoutIllustration />\n            <Text size={\"sm\"} className={\"text-neutral-strong\"}>\n                {\"You do not have any items in your layout. Add your first item in Insert panel.\"}\n            </Text>\n            <Button\n                variant={\"secondary\"}\n                text={\"Add item\"}\n                size={\"sm\"}\n                onClick={() => setActiveTab(\"insert\")}\n            />\n        </div>\n    );\n};\n"],"names":["NavigatorEmptyState","setActiveTab","useSegmentedTabs","LayoutIllustration","Text","Button"],"mappings":";;;AAIO,MAAMA,sBAAsB;IAC/B,MAAM,EAAEC,YAAY,EAAE,GAAGC;IAEzB,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACC,oBAAkBA,OAAAA,WAAAA,GACnB,oBAACC,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxB,iGAEL,oBAACC,QAAMA;QACH,SAAS;QACT,MAAM;QACN,MAAM;QACN,SAAS,IAAMJ,aAAa;;AAI5C"}

package/BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorTab.js

@@ -1,17 +1,16 @@
 import react from "react";
-import { Icon, Tabs } from "@webiny/admin-ui";
+import { Icon } from "@webiny/admin-ui";
 import { ReactComponent } from "@webiny/icons/account_tree.svg";
-import { ScrollableContainer } from "../../../config/Sidebar/ScrollableContainer.js";
+import { Toolbar } from "../../../config/Toolbar/Toolbar.js";
 import { Navigator } from "./Navigator.js";
-const NavigatorTab = ()=>/*#__PURE__*/ react.createElement(Tabs.Tab, {
-        value: "navigator",
-        trigger: "Navigator",
-        spacing: "sm",
+const NavigatorTab = ()=>/*#__PURE__*/ react.createElement(Toolbar.Tab, {
+        name: "navigator",
+        label: "Navigator",
         icon: /*#__PURE__*/ react.createElement(Icon, {
             icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
             label: "Navigator"
         }),
-        content: /*#__PURE__*/ react.createElement(ScrollableContainer, null, /*#__PURE__*/ react.createElement(Navigator, null))
+        element: /*#__PURE__*/ react.createElement(Navigator, null)
     });
 export { NavigatorTab };
 

package/BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorTab.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon, Tabs } from \"@webiny/admin-ui\";\nimport { ReactComponent as TreeIcon } from \"@webiny/icons/account_tree.svg\";\nimport { ScrollableContainer } from \"~/BaseEditor/config/Sidebar/ScrollableContainer.js\";\nimport { Navigator } from \"./Navigator.js\";\n\nexport const NavigatorTab = () => {\n    return (\n        <Tabs.Tab\n            value=\"navigator\"\n            trigger={\"Navigator\"}\n            spacing={\"sm\"}\n            icon={<Icon icon={<TreeIcon />} label={\"Navigator\"} />}\n            content={\n                <ScrollableContainer>\n                    <Navigator />\n                </ScrollableContainer>\n            }\n        />\n    );\n};\n"],"names":["NavigatorTab","Tabs","Icon","TreeIcon","ScrollableContainer","Navigator"],"mappings":";;;;;AAMO,MAAMA,eAAe,IACjB,WAAP,GACI,oBAACC,KAAK,GAAG;QACL,OAAM;QACN,SAAS;QACT,SAAS;QACT,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAO;;QACvC,uBACI,oBAACC,qBAAmBA,MAAAA,WAAAA,GAChB,oBAACC,WAASA"}
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorTab.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/NavigatorTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { ReactComponent as TreeIcon } from \"@webiny/icons/account_tree.svg\";\nimport { Toolbar } from \"~/BaseEditor/config/Toolbar/Toolbar.js\";\nimport { Navigator } from \"./Navigator.js\";\n\nexport const NavigatorTab = () => (\n    <Toolbar.Tab\n        name={\"navigator\"}\n        label={\"Navigator\"}\n        icon={<Icon icon={<TreeIcon />} label={\"Navigator\"} />}\n        element={<Navigator />}\n    />\n);\n"],"names":["NavigatorTab","Toolbar","Icon","TreeIcon","Navigator"],"mappings":";;;;;AAMO,MAAMA,eAAe,kBACxB,oBAACC,QAAQ,GAAG;QACR,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAO;;QACvC,uBAAS,oBAACC,WAASA"}

package/BaseEditor/defaultConfig/Toolbar/Navigator/Placeholder.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface PlaceholderProps {
+    node: any;
+    depth: number;
+}
+export declare const Placeholder: ({ depth }: PlaceholderProps) => React.JSX.Element;
+export {};

package/BaseEditor/defaultConfig/Toolbar/Navigator/Placeholder.js

@@ -0,0 +1,16 @@
+import react from "react";
+const Placeholder = ({ depth })=>/*#__PURE__*/ react.createElement("div", {
+        className: "bg-primary",
+        style: {
+            height: 2,
+            zIndex: 999,
+            position: "absolute",
+            right: 0,
+            transform: "translateY(-50%)",
+            top: -2,
+            left: 24 * depth
+        }
+    });
+export { Placeholder };
+
+//# sourceMappingURL=Placeholder.js.map

package/BaseEditor/defaultConfig/Toolbar/Navigator/Placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/Placeholder.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/Placeholder.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface PlaceholderProps {\n    node: any;\n    depth: number;\n}\n\nexport const Placeholder = ({ depth }: PlaceholderProps) => (\n    <div\n        className={\"bg-primary\"}\n        style={{\n            height: 2,\n            zIndex: 999,\n            position: \"absolute\",\n            right: 0,\n            transform: \"translateY(-50%)\",\n            top: -2,\n            left: depth * 24\n        }}\n    />\n);\n"],"names":["Placeholder","depth"],"mappings":";AAOO,MAAMA,cAAc,CAAC,EAAEC,KAAK,EAAoB,iBACnD,oBAAC;QACG,WAAW;QACX,OAAO;YACH,QAAQ;YACR,QAAQ;YACR,UAAU;YACV,OAAO;YACP,WAAW;YACX,KAAK;YACL,MAAMA,AAAQ,KAARA;QACV"}

package/BaseEditor/defaultConfig/Toolbar/Navigator/navigatorUtils.d.ts

@@ -0,0 +1,32 @@
+import type { NodeDto } from "@webiny/admin-ui";
+import type { Document } from "@webiny/website-builder-sdk";
+import type { EditorState } from "../../../../editorSdk/Editor.js";
+import React from "react";
+export type ElementNode = NodeDto<{
+    draggable: boolean;
+    icon: React.ReactNode;
+    parent: {
+        id: string;
+        slot: string;
+        index: number;
+    };
+}>;
+export type ElementNodeData = {
+    id: string;
+    label: string;
+    image: string;
+    canDrag: boolean;
+    parent: {
+        id: string;
+        slot: string;
+        index: number;
+    };
+};
+export declare function flattenElements(elements: Record<string, ElementNodeData>, activeElementId?: string): ElementNode[];
+interface GetElementNodeDataParams {
+    components: EditorState["components"];
+    elements: Document["elements"];
+    bindings: Document["bindings"];
+}
+export declare function getElementNodeData({ components, elements, bindings }: GetElementNodeDataParams): Record<string, ElementNodeData>;
+export {};

package/BaseEditor/defaultConfig/Toolbar/Navigator/navigatorUtils.js

@@ -0,0 +1,70 @@
+import { InlineSvg } from "../InsertElements/InlineSvg.js";
+import react from "react";
+import get from "lodash/get.js";
+function flattenElements(elements, activeElementId) {
+    const result = [];
+    const asArray = Object.values(elements);
+    for(const key in elements){
+        const node = elements[key];
+        if (node.parent) result.push({
+            id: node.id,
+            label: node.label,
+            parentId: node.parent.id,
+            active: node.id === activeElementId,
+            droppable: asArray.filter((el)=>el.parent?.id === node.id).length > 0,
+            data: {
+                parent: node.parent,
+                icon: node.image ? /*#__PURE__*/ react.createElement(InlineSvg, {
+                    src: node.image,
+                    className: "fill-neutral-strong"
+                }) : /*#__PURE__*/ react.createElement(react.Fragment, null),
+                draggable: node.canDrag
+            }
+        });
+    }
+    return result;
+}
+function getElementNodeData({ components, elements, bindings }) {
+    const getIndex = (elementId, parentId, slot)=>{
+        const elementBindings = bindings[parentId];
+        if (!elementBindings) return -1;
+        const slotValue = get(elementBindings, `inputs.${slot}`);
+        if (!slotValue) return -1;
+        if (slotValue.list) return slotValue.static.indexOf(elementId);
+        return -1;
+    };
+    return Object.values(elements).reduce((acc, element)=>{
+        if ("root" === element.id) return {
+            ...acc,
+            [element.id]: {
+                id: element.id,
+                label: "Root",
+                image: ""
+            }
+        };
+        const component = components[element.component.name] ?? {
+            label: "",
+            image: null,
+            canDrag: false
+        };
+        const parentId = element.parent.id;
+        const slot = element.parent.slot;
+        return {
+            ...acc,
+            [element.id]: {
+                id: element.id,
+                label: component?.label ?? component?.name ?? "",
+                image: component.image,
+                canDrag: component.canDrag,
+                parent: {
+                    id: parentId,
+                    slot,
+                    index: getIndex(element.id, parentId, slot)
+                }
+            }
+        };
+    }, {});
+}
+export { flattenElements, getElementNodeData };
+
+//# sourceMappingURL=navigatorUtils.js.map

package/BaseEditor/defaultConfig/Toolbar/Navigator/navigatorUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseEditor/defaultConfig/Toolbar/Navigator/navigatorUtils.js","sources":["../../../../../src/BaseEditor/defaultConfig/Toolbar/Navigator/navigatorUtils.tsx"],"sourcesContent":["import type { NodeDto } from \"@webiny/admin-ui\";\nimport type { Document } from \"@webiny/website-builder-sdk\";\nimport type { EditorState } from \"~/editorSdk/Editor.js\";\nimport { InlineSvg } from \"~/BaseEditor/defaultConfig/Toolbar/InsertElements/InlineSvg.js\";\nimport React from \"react\";\nimport get from \"lodash/get.js\";\n\nexport type ElementNode = NodeDto<{\n    draggable: boolean;\n    icon: React.ReactNode;\n    parent: {\n        id: string;\n        slot: string;\n        index: number;\n    };\n}>;\n\nexport type ElementNodeData = {\n    id: string;\n    label: string;\n    image: string;\n    canDrag: boolean;\n    parent: {\n        id: string;\n        slot: string;\n        index: number;\n    };\n};\n\nexport function flattenElements(\n    elements: Record<string, ElementNodeData>,\n    activeElementId?: string\n): ElementNode[] {\n    const result: ElementNode[] = [];\n    const asArray = Object.values(elements);\n\n    for (const key in elements) {\n        const node = elements[key];\n\n        if (!node.parent) {\n            continue;\n        }\n\n        result.push({\n            id: node.id,\n            label: node.label,\n            parentId: node.parent.id,\n            active: node.id === activeElementId,\n            droppable: asArray.filter(el => el.parent?.id === node.id).length > 0,\n            data: {\n                parent: node.parent,\n                icon: node.image ? (\n                    <InlineSvg src={node.image} className={\"fill-neutral-strong\"} />\n                ) : (\n                    <></>\n                ),\n                draggable: node.canDrag\n            }\n        });\n    }\n\n    return result;\n}\n\ninterface GetElementNodeDataParams {\n    components: EditorState[\"components\"];\n    elements: Document[\"elements\"];\n    bindings: Document[\"bindings\"];\n}\n\nexport function getElementNodeData({\n    components,\n    elements,\n    bindings\n}: GetElementNodeDataParams): Record<string, ElementNodeData> {\n    const getIndex = (elementId: string, parentId: string, slot: string) => {\n        const elementBindings = bindings[parentId];\n        if (!elementBindings) {\n            return -1;\n        }\n\n        const slotValue = get(elementBindings, `inputs.${slot}`);\n        if (!slotValue) {\n            return -1;\n        }\n\n        if (slotValue.list) {\n            return slotValue.static.indexOf(elementId);\n        }\n\n        return -1;\n    };\n\n    return Object.values(elements).reduce((acc, element) => {\n        if (element.id === \"root\") {\n            return { ...acc, [element.id]: { id: element.id, label: \"Root\", image: \"\" } };\n        }\n\n        const component = components[element.component.name] ?? {\n            label: \"\",\n            image: null,\n            canDrag: false\n        };\n\n        const parentId = element.parent!.id;\n        const slot = element.parent!.slot;\n\n        return {\n            ...acc,\n            [element.id]: {\n                id: element.id,\n                label: component?.label ?? component?.name ?? \"\",\n                image: component.image,\n                canDrag: component.canDrag,\n                parent: {\n                    id: parentId,\n                    slot,\n                    index: getIndex(element.id, parentId, slot)\n                }\n            }\n        };\n    }, {});\n}\n"],"names":["flattenElements","elements","activeElementId","result","asArray","Object","key","node","el","InlineSvg","getElementNodeData","components","bindings","getIndex","elementId","parentId","slot","elementBindings","slotValue","get","acc","element","component"],"mappings":";;;AA6BO,SAASA,gBACZC,QAAyC,EACzCC,eAAwB;IAExB,MAAMC,SAAwB,EAAE;IAChC,MAAMC,UAAUC,OAAO,MAAM,CAACJ;IAE9B,IAAK,MAAMK,OAAOL,SAAU;QACxB,MAAMM,OAAON,QAAQ,CAACK,IAAI;QAE1B,IAAKC,KAAK,MAAM,EAIhBJ,OAAO,IAAI,CAAC;YACR,IAAII,KAAK,EAAE;YACX,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,MAAM,CAAC,EAAE;YACxB,QAAQA,KAAK,EAAE,KAAKL;YACpB,WAAWE,QAAQ,MAAM,CAACI,CAAAA,KAAMA,GAAG,MAAM,EAAE,OAAOD,KAAK,EAAE,EAAE,MAAM,GAAG;YACpE,MAAM;gBACF,QAAQA,KAAK,MAAM;gBACnB,MAAMA,KAAK,KAAK,GAAG,WAAH,GACZ,oBAACE,WAASA;oBAAC,KAAKF,KAAK,KAAK;oBAAE,WAAW;mCAEvC;gBAEJ,WAAWA,KAAK,OAAO;YAC3B;QACJ;IACJ;IAEA,OAAOJ;AACX;AAQO,SAASO,mBAAmB,EAC/BC,UAAU,EACVV,QAAQ,EACRW,QAAQ,EACe;IACvB,MAAMC,WAAW,CAACC,WAAmBC,UAAkBC;QACnD,MAAMC,kBAAkBL,QAAQ,CAACG,SAAS;QAC1C,IAAI,CAACE,iBACD,OAAO;QAGX,MAAMC,YAAYC,IAAIF,iBAAiB,CAAC,OAAO,EAAED,MAAM;QACvD,IAAI,CAACE,WACD,OAAO;QAGX,IAAIA,UAAU,IAAI,EACd,OAAOA,UAAU,MAAM,CAAC,OAAO,CAACJ;QAGpC,OAAO;IACX;IAEA,OAAOT,OAAO,MAAM,CAACJ,UAAU,MAAM,CAAC,CAACmB,KAAKC;QACxC,IAAIA,AAAe,WAAfA,QAAQ,EAAE,EACV,OAAO;YAAE,GAAGD,GAAG;YAAE,CAACC,QAAQ,EAAE,CAAC,EAAE;gBAAE,IAAIA,QAAQ,EAAE;gBAAE,OAAO;gBAAQ,OAAO;YAAG;QAAE;QAGhF,MAAMC,YAAYX,UAAU,CAACU,QAAQ,SAAS,CAAC,IAAI,CAAC,IAAI;YACpD,OAAO;YACP,OAAO;YACP,SAAS;QACb;QAEA,MAAMN,WAAWM,QAAQ,MAAM,CAAE,EAAE;QACnC,MAAML,OAAOK,QAAQ,MAAM,CAAE,IAAI;QAEjC,OAAO;YACH,GAAGD,GAAG;YACN,CAACC,QAAQ,EAAE,CAAC,EAAE;gBACV,IAAIA,QAAQ,EAAE;gBACd,OAAOC,WAAW,SAASA,WAAW,QAAQ;gBAC9C,OAAOA,UAAU,KAAK;gBACtB,SAASA,UAAU,OAAO;gBAC1B,QAAQ;oBACJ,IAAIP;oBACJC;oBACA,OAAOH,SAASQ,QAAQ,EAAE,EAAEN,UAAUC;gBAC1C;YACJ;QACJ;IACJ,GAAG,CAAC;AACR"}

package/BaseEditor/hooks/useCreateElement.d.ts

@@ -1,5 +1,5 @@
 import { Commands } from "../../BaseEditor/commands.js";
 import type { CommandPayload } from "../../editorSdk/createCommand.js";
 export declare function useCreateElement(): {
-    createElement: (payload: CommandPayload<typeof Commands.CreateElement>) => void;
+    createElement: (payload: CommandPayload<typeof Commands.CreateElement>) => Promise<void>;
 };

package/BaseEditor/hooks/useCreateElement.js

@@ -3,9 +3,7 @@ import { useDocumentEditor } from "../../DocumentEditor/index.js";
 import { Commands } from "../commands.js";
 function useCreateElement() {
     const editor = useDocumentEditor();
-    const createElement = useCallback((payload)=>{
-        editor.executeCommand(Commands.CreateElement, payload);
-    }, [
+    const createElement = useCallback((payload)=>editor.executeCommand(Commands.CreateElement, payload), [
         editor
     ]);
     return {

package/BaseEditor/hooks/useCreateElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseEditor/hooks/useCreateElement.js","sources":["../../../src/BaseEditor/hooks/useCreateElement.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/commands.js\";\nimport type { CommandPayload } from \"~/editorSdk/createCommand.js\";\n\nexport function useCreateElement() {\n    const editor = useDocumentEditor();\n\n    const createElement = useCallback(\n        (payload: CommandPayload<typeof Commands.CreateElement>) => {\n            editor.executeCommand(Commands.CreateElement, payload);\n        },\n        [editor]\n    );\n\n    return { createElement };\n}\n"],"names":["useCreateElement","editor","useDocumentEditor","createElement","useCallback","payload","Commands"],"mappings":";;;AAKO,SAASA;IACZ,MAAMC,SAASC;IAEf,MAAMC,gBAAgBC,YAClB,CAACC;QACGJ,OAAO,cAAc,CAACK,SAAS,aAAa,EAAED;IAClD,GACA;QAACJ;KAAO;IAGZ,OAAO;QAAEE;IAAc;AAC3B"}
+{"version":3,"file":"BaseEditor/hooks/useCreateElement.js","sources":["../../../src/BaseEditor/hooks/useCreateElement.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useDocumentEditor } from \"~/DocumentEditor/index.js\";\nimport { Commands } from \"~/BaseEditor/commands.js\";\nimport type { CommandPayload } from \"~/editorSdk/createCommand.js\";\n\nexport function useCreateElement() {\n    const editor = useDocumentEditor();\n\n    const createElement = useCallback(\n        (payload: CommandPayload<typeof Commands.CreateElement>) => {\n            return editor.executeCommand(Commands.CreateElement, payload);\n        },\n        [editor]\n    );\n\n    return { createElement };\n}\n"],"names":["useCreateElement","editor","useDocumentEditor","createElement","useCallback","payload","Commands"],"mappings":";;;AAKO,SAASA;IACZ,MAAMC,SAASC;IAEf,MAAMC,gBAAgBC,YAClB,CAACC,UACUJ,OAAO,cAAc,CAACK,SAAS,aAAa,EAAED,UAEzD;QAACJ;KAAO;IAGZ,OAAO;QAAEE;IAAc;AAC3B"}

package/ecommerce/EcommerceIntegration.js

@@ -43,7 +43,7 @@ const EcommerceIntegration_PageType = (props)=>{
     }, []);
     if (!renderer) return null;
     return /*#__PURE__*/ react.createElement(AdminConfig, null, /*#__PURE__*/ react.createElement(AdminConfig.Form.FieldRenderer, {
-        name: "resource-picker",
+        name: `resource-picker:${pluginName}`,
         component: renderer
     }));
 };

package/ecommerce/EcommerceIntegration.js.map

@@ -1 +1 @@
-{"version":3,"file":"ecommerce/EcommerceIntegration.js","sources":["../../src/ecommerce/EcommerceIntegration.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { useContainer } from \"@webiny/app\";\nimport { Editor } from \"~/index.js\";\nimport type {\n    IEcommerceApi,\n    IEcommerceApiFactory,\n    SettingsInput as ISettingsInput,\n    Resource as IResource\n} from \"./types.js\";\nimport { CreateInputRenderers } from \"./CreateInputRenderers.js\";\nimport type { EcommerceResourcePageTypeConfig } from \"./components/ResourcePage.js\";\nimport {\n    EcommerceResourcePageType,\n    createResourcePickerRenderer\n} from \"./components/ResourcePage.js\";\nimport { AdminConfig } from \"@webiny/app-admin\";\nimport { createGenericContext } from \"@webiny/app\";\nimport {\n    EcommerceApiManifest,\n    EcommerceApiProviderAbstraction,\n    useEcommerceApiProvider\n} from \"~/features/index.js\";\nimport { PageType as PageTypeAbstraction } from \"~/presentation/pages/CreatePage/abstractions.js\";\nimport { createPageTypeRemovalDecorator } from \"~/presentation/pages/CreatePage/PageTypeProvider.js\";\n\nexport interface CustomResourcePickerProps<T = any> {\n    value?: T;\n    onChange(val: T | undefined): void;\n}\n\nexport type EcommerceIntegrationProps = {\n    name: string;\n    init: IEcommerceApiFactory;\n    settings: ISettingsInput[];\n    children?: React.ReactNode;\n};\n\nconst Context = createGenericContext<{ pluginName: string }>(\"EcommerceIntegrationContext\");\n\nconst EcommerceIntegrationBase = (props: EcommerceIntegrationProps) => {\n    const provider = useEcommerceApiProvider();\n    const container = useContainer();\n\n    useMemo(() => {\n        container.registerInstance(EcommerceApiProviderAbstraction, provider);\n    }, []);\n\n    useEffect(() => {\n        provider.addApiManifest(new EcommerceApiManifest(props.name, props.init, props.settings));\n    }, []);\n\n    return (\n        <Context.Provider pluginName={props.name}>\n            <Editor.EditorConfig priority={\"secondary\"}>\n                <CreateInputRenderers pluginName={props.name} />\n            </Editor.EditorConfig>\n            {props.children}\n        </Context.Provider>\n    );\n};\n\nexport type PageTypeProps =\n    | (Omit<EcommerceResourcePageTypeConfig, \"apiName\"> & { remove?: never })\n    | { name: string; remove: true };\n\nconst PageType = (props: PageTypeProps) => {\n    const { pluginName } = Context.useHook();\n    const container = useContainer();\n    const provider = useEcommerceApiProvider();\n\n    const renderer = useMemo(() => {\n        if (props.remove) {\n            container.registerDecorator(createPageTypeRemovalDecorator(props.name));\n            return undefined;\n        }\n\n        const pageType = new EcommerceResourcePageType({ ...props, apiName: pluginName }, provider);\n        container.registerInstance(PageTypeAbstraction, pageType);\n\n        return createResourcePickerRenderer({\n            pluginName,\n            resourceType: props.resourceType\n        });\n    }, []);\n\n    if (!renderer) {\n        return null;\n    }\n\n    return (\n        <AdminConfig>\n            <AdminConfig.Form.FieldRenderer name={\"resource-picker\"} component={renderer} />\n        </AdminConfig>\n    );\n};\n\nexport const EcommerceIntegration = Object.assign(EcommerceIntegrationBase, { PageType });\n\nexport namespace EcommerceIntegration {\n    export type Props = EcommerceIntegrationProps;\n    export type EcommerceApi = IEcommerceApi;\n    export type EcommerceApiFactory = IEcommerceApiFactory;\n    export type SettingsInput = ISettingsInput;\n    export type Resource = IResource;\n}\n"],"names":["Context","createGenericContext","EcommerceIntegrationBase","props","provider","useEcommerceApiProvider","container","useContainer","useMemo","EcommerceApiProviderAbstraction","useEffect","EcommerceApiManifest","Editor","CreateInputRenderers","PageType","pluginName","renderer","createPageTypeRemovalDecorator","pageType","EcommerceResourcePageType","PageTypeAbstraction","createResourcePickerRenderer","AdminConfig","EcommerceIntegration","Object"],"mappings":";;;;;;;;;AAqCA,MAAMA,UAAUC,qBAA6C;AAE7D,MAAMC,2BAA2B,CAACC;IAC9B,MAAMC,WAAWC;IACjB,MAAMC,YAAYC;IAElBC,QAAQ;QACJF,UAAU,gBAAgB,CAACG,iCAAiCL;IAChE,GAAG,EAAE;IAELM,UAAU;QACNN,SAAS,cAAc,CAAC,IAAIO,qBAAqBR,MAAM,IAAI,EAAEA,MAAM,IAAI,EAAEA,MAAM,QAAQ;IAC3F,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACH,QAAQ,QAAQ;QAAC,YAAYG,MAAM,IAAI;qBACpC,oBAACS,OAAO,YAAY;QAAC,UAAU;qBAC3B,oBAACC,sBAAoBA;QAAC,YAAYV,MAAM,IAAI;SAE/CA,MAAM,QAAQ;AAG3B;AAMA,MAAMW,gCAAW,CAACX;IACd,MAAM,EAAEY,UAAU,EAAE,GAAGf,QAAQ,OAAO;IACtC,MAAMM,YAAYC;IAClB,MAAMH,WAAWC;IAEjB,MAAMW,WAAWR,QAAQ;QACrB,IAAIL,MAAM,MAAM,EAAE,YACdG,UAAU,iBAAiB,CAACW,+BAA+Bd,MAAM,IAAI;QAIzE,MAAMe,WAAW,IAAIC,0BAA0B;YAAE,GAAGhB,KAAK;YAAE,SAASY;QAAW,GAAGX;QAClFE,UAAU,gBAAgB,CAACc,UAAqBF;QAEhD,OAAOG,6BAA6B;YAChCN;YACA,cAAcZ,MAAM,YAAY;QACpC;IACJ,GAAG,EAAE;IAEL,IAAI,CAACa,UACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACM,aAAWA,MAAAA,WAAAA,GACR,oBAACA,YAAY,IAAI,CAAC,aAAa;QAAC,MAAM;QAAmB,WAAWN;;AAGhF;AAEO,MAAMO,uBAAuBC,OAAO,MAAM,CAACtB,0BAA0B;IAAEY,UAAAA;AAAS"}
+{"version":3,"file":"ecommerce/EcommerceIntegration.js","sources":["../../src/ecommerce/EcommerceIntegration.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { useContainer } from \"@webiny/app\";\nimport { Editor } from \"~/index.js\";\nimport type {\n    IEcommerceApi,\n    IEcommerceApiFactory,\n    SettingsInput as ISettingsInput,\n    Resource as IResource\n} from \"./types.js\";\nimport { CreateInputRenderers } from \"./CreateInputRenderers.js\";\nimport type { EcommerceResourcePageTypeConfig } from \"./components/ResourcePage.js\";\nimport {\n    EcommerceResourcePageType,\n    createResourcePickerRenderer\n} from \"./components/ResourcePage.js\";\nimport { AdminConfig } from \"@webiny/app-admin\";\nimport { createGenericContext } from \"@webiny/app\";\nimport {\n    EcommerceApiManifest,\n    EcommerceApiProviderAbstraction,\n    useEcommerceApiProvider\n} from \"~/features/index.js\";\nimport { PageType as PageTypeAbstraction } from \"~/presentation/pages/CreatePage/abstractions.js\";\nimport { createPageTypeRemovalDecorator } from \"~/presentation/pages/CreatePage/PageTypeProvider.js\";\n\nexport interface CustomResourcePickerProps<T = any> {\n    value?: T;\n    onChange(val: T | undefined): void;\n}\n\nexport type EcommerceIntegrationProps = {\n    name: string;\n    init: IEcommerceApiFactory;\n    settings: ISettingsInput[];\n    children?: React.ReactNode;\n};\n\nconst Context = createGenericContext<{ pluginName: string }>(\"EcommerceIntegrationContext\");\n\nconst EcommerceIntegrationBase = (props: EcommerceIntegrationProps) => {\n    const provider = useEcommerceApiProvider();\n    const container = useContainer();\n\n    useMemo(() => {\n        container.registerInstance(EcommerceApiProviderAbstraction, provider);\n    }, []);\n\n    useEffect(() => {\n        provider.addApiManifest(new EcommerceApiManifest(props.name, props.init, props.settings));\n    }, []);\n\n    return (\n        <Context.Provider pluginName={props.name}>\n            <Editor.EditorConfig priority={\"secondary\"}>\n                <CreateInputRenderers pluginName={props.name} />\n            </Editor.EditorConfig>\n            {props.children}\n        </Context.Provider>\n    );\n};\n\nexport type PageTypeProps =\n    | (Omit<EcommerceResourcePageTypeConfig, \"apiName\"> & { remove?: never })\n    | { name: string; remove: true };\n\nconst PageType = (props: PageTypeProps) => {\n    const { pluginName } = Context.useHook();\n    const container = useContainer();\n    const provider = useEcommerceApiProvider();\n\n    const renderer = useMemo(() => {\n        if (props.remove) {\n            container.registerDecorator(createPageTypeRemovalDecorator(props.name));\n            return undefined;\n        }\n\n        const pageType = new EcommerceResourcePageType({ ...props, apiName: pluginName }, provider);\n        container.registerInstance(PageTypeAbstraction, pageType);\n\n        return createResourcePickerRenderer({\n            pluginName,\n            resourceType: props.resourceType\n        });\n    }, []);\n\n    if (!renderer) {\n        return null;\n    }\n\n    return (\n        <AdminConfig>\n            <AdminConfig.Form.FieldRenderer\n                name={`resource-picker:${pluginName}`}\n                component={renderer}\n            />\n        </AdminConfig>\n    );\n};\n\nexport const EcommerceIntegration = Object.assign(EcommerceIntegrationBase, { PageType });\n\nexport namespace EcommerceIntegration {\n    export type Props = EcommerceIntegrationProps;\n    export type EcommerceApi = IEcommerceApi;\n    export type EcommerceApiFactory = IEcommerceApiFactory;\n    export type SettingsInput = ISettingsInput;\n    export type Resource = IResource;\n}\n"],"names":["Context","createGenericContext","EcommerceIntegrationBase","props","provider","useEcommerceApiProvider","container","useContainer","useMemo","EcommerceApiProviderAbstraction","useEffect","EcommerceApiManifest","Editor","CreateInputRenderers","PageType","pluginName","renderer","createPageTypeRemovalDecorator","pageType","EcommerceResourcePageType","PageTypeAbstraction","createResourcePickerRenderer","AdminConfig","EcommerceIntegration","Object"],"mappings":";;;;;;;;;AAqCA,MAAMA,UAAUC,qBAA6C;AAE7D,MAAMC,2BAA2B,CAACC;IAC9B,MAAMC,WAAWC;IACjB,MAAMC,YAAYC;IAElBC,QAAQ;QACJF,UAAU,gBAAgB,CAACG,iCAAiCL;IAChE,GAAG,EAAE;IAELM,UAAU;QACNN,SAAS,cAAc,CAAC,IAAIO,qBAAqBR,MAAM,IAAI,EAAEA,MAAM,IAAI,EAAEA,MAAM,QAAQ;IAC3F,GAAG,EAAE;IAEL,OAAO,WAAP,GACI,oBAACH,QAAQ,QAAQ;QAAC,YAAYG,MAAM,IAAI;qBACpC,oBAACS,OAAO,YAAY;QAAC,UAAU;qBAC3B,oBAACC,sBAAoBA;QAAC,YAAYV,MAAM,IAAI;SAE/CA,MAAM,QAAQ;AAG3B;AAMA,MAAMW,gCAAW,CAACX;IACd,MAAM,EAAEY,UAAU,EAAE,GAAGf,QAAQ,OAAO;IACtC,MAAMM,YAAYC;IAClB,MAAMH,WAAWC;IAEjB,MAAMW,WAAWR,QAAQ;QACrB,IAAIL,MAAM,MAAM,EAAE,YACdG,UAAU,iBAAiB,CAACW,+BAA+Bd,MAAM,IAAI;QAIzE,MAAMe,WAAW,IAAIC,0BAA0B;YAAE,GAAGhB,KAAK;YAAE,SAASY;QAAW,GAAGX;QAClFE,UAAU,gBAAgB,CAACc,UAAqBF;QAEhD,OAAOG,6BAA6B;YAChCN;YACA,cAAcZ,MAAM,YAAY;QACpC;IACJ,GAAG,EAAE;IAEL,IAAI,CAACa,UACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACM,aAAWA,MAAAA,WAAAA,GACR,oBAACA,YAAY,IAAI,CAAC,aAAa;QAC3B,MAAM,CAAC,gBAAgB,EAAEP,YAAY;QACrC,WAAWC;;AAI3B;AAEO,MAAMO,uBAAuBC,OAAO,MAAM,CAACtB,0BAA0B;IAAEY,UAAAA;AAAS"}

package/ecommerce/components/ResourcePage.d.ts

@@ -6,7 +6,7 @@ import type { IEcommerceApiProvider } from "../../features/index.js";
 import type { Resource } from "../types.js";
 declare module "@webiny/app-admin/features/formModel/abstractions.js" {
     interface IFieldRendererRegistry {
-        "resource-picker": {
+        [key: `resource-picker:${string}`]: {
             fieldType: "text";
             settings?: {
                 rows?: number;

package/ecommerce/components/ResourcePage.js

@@ -28,7 +28,7 @@ class EcommerceResourcePageType {
     }
     modifyForm(form) {
         form.fields((fields)=>({
-                resourceId: fields.text().label(toTitleCaseLabel(this.config.resourceType)).required().renderer("resource-picker").afterChange((value, f)=>{
+                resourceId: fields.text().label(toTitleCaseLabel(this.config.resourceType)).required().renderer(`resource-picker:${this.config.apiName}`).afterChange((value, f)=>{
                     if (!value) return;
                     this.onResourceSelected(String(value), f);
                 })