@uipath/apollo-react 4.10.0 → 4.12.0

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.cjs

@@ -27,14 +27,40 @@ __webpack_require__.d(__webpack_exports__, {
     NodeToolbar: ()=>NodeToolbar
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const react_namespaceObject = require("motion/react");
 const external_react_namespaceObject = require("react");
 const icon_registry_cjs_namespaceObject = require("../../../utils/icon-registry.cjs");
 const external_CanvasTooltip_cjs_namespaceObject = require("../../CanvasTooltip.cjs");
 const index_cjs_namespaceObject = require("../shared/index.cjs");
-const external_NodeToolbar_styles_cjs_namespaceObject = require("./NodeToolbar.styles.cjs");
 const external_NodeToolbar_utils_cjs_namespaceObject = require("./NodeToolbar.utils.cjs");
 const external_useToolbarState_cjs_namespaceObject = require("./useToolbarState.cjs");
+const POSITIONER_BASE_CLASS = 'absolute flex pointer-events-none z-10';
+const POSITIONER_POSITION_CLASS = {
+    top: 'top-[-52px] left-0 right-0 flex-row',
+    bottom: 'bottom-[-52px] left-0 right-0 flex-row',
+    left: 'left-[-52px] top-0 bottom-0 flex-col',
+    right: 'right-[-52px] top-0 bottom-0 flex-col'
+};
+const POSITIONER_ALIGN_CLASS = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end'
+};
+const CONTAINER_BASE_CLASS = "flex items-center gap-1 p-1 min-h-10 min-w-10 shrink-0 bg-(--canvas-background-raised) border border-(--canvas-background-overlay) rounded-xl shadow-[0_2px_6px_rgba(0,0,0,0.08)] pointer-events-auto";
+const CONTAINER_DIRECTION_CLASS = {
+    top: 'flex-row',
+    bottom: 'flex-row',
+    left: 'flex-col',
+    right: 'flex-col'
+};
+const SEPARATOR_BASE_CLASS = 'flex-[0_0_auto] bg-(--canvas-background-overlay) self-center';
+const SEPARATOR_VERTICAL_CLASS = 'w-px h-5';
+const SEPARATOR_HORIZONTAL_CLASS = 'w-full h-px';
+const DROPDOWN_MENU_CLASS = "absolute top-[-2px] left-[calc(100%+4px)] min-w-[180px] bg-(--canvas-background-raised) border border-(--canvas-background-overlay) rounded-md shadow-[0_4px_12px_rgba(0,0,0,0.08),0_2px_4px_rgba(0,0,0,0.04)] p-1 z-[1000] pointer-events-auto";
+const DROPDOWN_ITEM_BASE_CLASS = "flex items-center gap-3 w-full py-2 px-3 bg-transparent border-none rounded-[4px] text-sm text-(--canvas-foreground) text-left [transition:background_0.15s_ease] enabled:hover:bg-(--canvas-background-hover) future:enabled:hover:bg-(--canvas-background-overlay) [&>svg]:shrink-0 [&>svg]:text-(--canvas-foreground)";
+const DROPDOWN_ITEM_DISABLED_CLASS = 'cursor-not-allowed opacity-40 pointer-events-none';
+const DROPDOWN_ITEM_ENABLED_CLASS = 'cursor-pointer opacity-100';
 const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
     const { isDropdownOpen, setIsDropdownOpen, dropdownRef, buttonRef, actionsToDisplay, displayState, shouldShowOverflow, overflowActionsToDisplay, separatorOrientation, toggleDropdown } = (0, external_useToolbarState_cjs_namespaceObject.useToolbarState)({
         config,
@@ -42,9 +68,21 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
         nodeId,
         hidden
     });
+    const position = config.position || 'top';
+    const align = config.align || 'center';
+    const positionerClassName = (0, external_react_namespaceObject.useMemo)(()=>(0, apollo_wind_namespaceObject.cn)(POSITIONER_BASE_CLASS, POSITIONER_POSITION_CLASS[position], POSITIONER_ALIGN_CLASS[align]), [
+        position,
+        align
+    ]);
+    const containerClassName = (0, external_react_namespaceObject.useMemo)(()=>(0, apollo_wind_namespaceObject.cn)(CONTAINER_BASE_CLASS, CONTAINER_DIRECTION_CLASS[position]), [
+        position
+    ]);
+    const separatorClassName = (0, external_react_namespaceObject.useMemo)(()=>(0, apollo_wind_namespaceObject.cn)(SEPARATOR_BASE_CLASS, 'horizontal' === separatorOrientation ? SEPARATOR_HORIZONTAL_CLASS : SEPARATOR_VERTICAL_CLASS), [
+        separatorOrientation
+    ]);
     const toolbarAnimationVariants = (0, external_react_namespaceObject.useMemo)(()=>{
-        const offsetAxis = 'top' === config.position || 'bottom' === config.position ? 'y' : 'x';
-        const offsetAmount = 'top' === config.position || 'left' === config.position ? -10 : 10;
+        const offsetAxis = 'top' === position || 'bottom' === position ? 'y' : 'x';
+        const offsetAmount = 'top' === position || 'left' === position ? -10 : 10;
         const offset = 'pinned' !== displayState ? {
             [offsetAxis]: offsetAmount
         } : {};
@@ -66,118 +104,123 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
             }
         };
     }, [
-        config.position,
+        position,
         displayState
     ]);
     if (0 === config.actions.length && (!config.overflowActions || 0 === config.overflowActions.length)) return null;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.AnimatePresence, {
-        children: 'hidden' !== displayState && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_NodeToolbar_styles_cjs_namespaceObject.StyledToolbarContainer, {
-            layout: true,
-            $position: config.position || 'top',
-            $align: config.align || 'end',
-            initial: toolbarAnimationVariants.initial,
-            animate: toolbarAnimationVariants.animate,
-            exit: toolbarAnimationVariants.exit,
-            transition: {
-                duration: 0.15,
-                ease: 'easeOut'
-            },
-            role: "toolbar",
-            children: [
-                actionsToDisplay.map((item, i)=>(0, external_NodeToolbar_utils_cjs_namespaceObject.isSeparator)(item) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeToolbar_styles_cjs_namespaceObject.StyledToolbarSeparator, {
-                        $orientation: separatorOrientation
-                    }, `separator-${i}`) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ToolbarButton, {
-                        action: item,
-                        layoutId: item.isPinned ? `toolbar-btn-${nodeId}-${item.id}` : void 0
-                    }, item.id)),
-                shouldShowOverflow && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-                    children: [
-                        actionsToDisplay.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeToolbar_styles_cjs_namespaceObject.StyledToolbarSeparator, {
-                            $orientation: separatorOrientation
-                        }),
-                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_NodeToolbar_styles_cjs_namespaceObject.StyledOverflowContainer, {
-                            children: [
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.StyledToolbarButton, {
-                                    ref: buttonRef,
-                                    type: "button",
-                                    className: "nodrag nopan",
-                                    onClick: toggleDropdown,
-                                    "aria-label": "More options",
-                                    "aria-expanded": isDropdownOpen,
-                                    "aria-haspopup": "menu",
-                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
-                                        content: config.overflowLabel,
+        children: 'hidden' !== displayState && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: positionerClassName,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_namespaceObject.motion.div, {
+                layout: "position",
+                className: containerClassName,
+                initial: toolbarAnimationVariants.initial,
+                animate: toolbarAnimationVariants.animate,
+                exit: toolbarAnimationVariants.exit,
+                transition: {
+                    duration: 0.15,
+                    ease: 'easeOut'
+                },
+                role: "toolbar",
+                children: [
+                    actionsToDisplay.map((item, i)=>(0, external_NodeToolbar_utils_cjs_namespaceObject.isSeparator)(item) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            className: separatorClassName
+                        }, `separator-${i}`) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ToolbarButton, {
+                            action: item,
+                            layoutId: item.isPinned ? `toolbar-btn-${nodeId}-${item.id}` : void 0
+                        }, item.id)),
+                    shouldShowOverflow && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                        children: [
+                            actionsToDisplay.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: separatorClassName
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                className: "relative",
+                                children: [
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
+                                        content: config.overflowLabel ?? 'More options',
                                         placement: "top",
-                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-                                            icon: "ellipsis-vertical",
-                                            size: 16
+                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ToolbarIconButton, {
+                                            ref: buttonRef,
+                                            type: "button",
+                                            className: "nodrag nopan",
+                                            onClick: toggleDropdown,
+                                            "aria-label": config.overflowLabel ?? 'More options',
+                                            "aria-expanded": isDropdownOpen,
+                                            "aria-haspopup": "menu",
+                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                                icon: "ellipsis-vertical",
+                                                size: 16
+                                            })
                                         })
-                                    })
-                                }),
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.AnimatePresence, {
-                                    children: isDropdownOpen && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeToolbar_styles_cjs_namespaceObject.StyledDropdownMenu, {
-                                        ref: dropdownRef,
-                                        initial: {
-                                            opacity: 0,
-                                            x: -8
-                                        },
-                                        animate: {
-                                            opacity: 1,
-                                            x: 0
-                                        },
-                                        exit: {
-                                            opacity: 0,
-                                            x: -8
-                                        },
-                                        transition: {
-                                            duration: 0.15
-                                        },
-                                        role: "menu",
-                                        "aria-labelledby": buttonRef.current?.id,
-                                        children: overflowActionsToDisplay.map((item, i)=>{
-                                            if ((0, external_NodeToolbar_utils_cjs_namespaceObject.isSeparator)(item)) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeToolbar_styles_cjs_namespaceObject.StyledToolbarSeparator, {
-                                                $orientation: "horizontal"
-                                            }, `separator-${i}`);
-                                            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_NodeToolbar_styles_cjs_namespaceObject.StyledDropdownItem, {
-                                                type: "button",
-                                                className: "nodrag nopan",
-                                                onClick: (e)=>{
-                                                    e.stopPropagation();
-                                                    e.preventDefault();
-                                                    if (!item.disabled) {
-                                                        item.onClick();
-                                                        setIsDropdownOpen(false);
-                                                    }
-                                                },
-                                                "aria-label": item.label,
-                                                "aria-disabled": item.disabled,
-                                                role: "menuitem",
-                                                $disabled: item.disabled,
-                                                children: [
-                                                    item.icon && 'string' == typeof item.icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                        style: {
-                                                            flex: 'unset',
-                                                            display: 'inline-flex'
-                                                        },
-                                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
-                                                            icon: item.icon,
-                                                            size: 16
+                                    }),
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.AnimatePresence, {
+                                        children: isDropdownOpen && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.motion.div, {
+                                            ref: dropdownRef,
+                                            className: DROPDOWN_MENU_CLASS,
+                                            initial: {
+                                                opacity: 0,
+                                                x: -8
+                                            },
+                                            animate: {
+                                                opacity: 1,
+                                                x: 0
+                                            },
+                                            exit: {
+                                                opacity: 0,
+                                                x: -8
+                                            },
+                                            transition: {
+                                                duration: 0.15
+                                            },
+                                            role: "menu",
+                                            "aria-label": config.overflowLabel ?? 'More options',
+                                            children: overflowActionsToDisplay.map((item, i)=>{
+                                                if ((0, external_NodeToolbar_utils_cjs_namespaceObject.isSeparator)(item)) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                    className: (0, apollo_wind_namespaceObject.cn)(SEPARATOR_BASE_CLASS, SEPARATOR_HORIZONTAL_CLASS)
+                                                }, `separator-${i}`);
+                                                return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                                                    type: "button",
+                                                    className: (0, apollo_wind_namespaceObject.cn)(DROPDOWN_ITEM_BASE_CLASS, item.disabled ? DROPDOWN_ITEM_DISABLED_CLASS : DROPDOWN_ITEM_ENABLED_CLASS, 'nodrag nopan'),
+                                                    onClick: (e)=>{
+                                                        e.stopPropagation();
+                                                        e.preventDefault();
+                                                        if (!item.disabled) {
+                                                            item.onClick();
+                                                            setIsDropdownOpen(false);
+                                                        }
+                                                    },
+                                                    "aria-label": item.label,
+                                                    "aria-disabled": item.disabled,
+                                                    disabled: item.disabled,
+                                                    role: "menuitem",
+                                                    children: [
+                                                        item.icon && 'string' == typeof item.icon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                            style: {
+                                                                flex: 'unset',
+                                                                display: 'inline-flex'
+                                                            },
+                                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                                                                icon: item.icon,
+                                                                size: 16
+                                                            })
+                                                        }),
+                                                        item.icon && 'string' != typeof item.icon && item.icon,
+                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                            className: "flex-1 text-(--canvas-foreground)",
+                                                            children: item.label
                                                         })
-                                                    }),
-                                                    item.icon && 'string' != typeof item.icon && item.icon,
-                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                                        children: item.label
-                                                    })
-                                                ]
-                                            }, item.id);
+                                                    ]
+                                                }, item.id);
+                                            })
                                         })
                                     })
-                                })
-                            ]
-                        })
-                    ]
-                })
-            ]
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
         })
     });
 };

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AA8I5D,eAAO,MAAM,WAAW,6EA1I4C,gBAAgB,oDA0I/B,CAAC"}
+{"version":3,"file":"NodeToolbar.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AA+N5D,eAAO,MAAM,WAAW,6EA3K4C,gBAAgB,oDA2K/B,CAAC"}

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.js

@@ -1,12 +1,38 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AnimatePresence } from "motion/react";
+import { cn } from "@uipath/apollo-wind";
+import { AnimatePresence, motion } from "motion/react";
 import { memo, useMemo } from "react";
 import { CanvasIcon } from "../../../utils/icon-registry.js";
 import { CanvasTooltip } from "../../CanvasTooltip.js";
-import { StyledToolbarButton, ToolbarButton } from "../shared/index.js";
-import { StyledDropdownItem, StyledDropdownMenu, StyledOverflowContainer, StyledToolbarContainer, StyledToolbarSeparator } from "./NodeToolbar.styles.js";
+import { ToolbarButton, ToolbarIconButton } from "../shared/index.js";
 import { isSeparator } from "./NodeToolbar.utils.js";
 import { useToolbarState } from "./useToolbarState.js";
+const POSITIONER_BASE_CLASS = 'absolute flex pointer-events-none z-10';
+const POSITIONER_POSITION_CLASS = {
+    top: 'top-[-52px] left-0 right-0 flex-row',
+    bottom: 'bottom-[-52px] left-0 right-0 flex-row',
+    left: 'left-[-52px] top-0 bottom-0 flex-col',
+    right: 'right-[-52px] top-0 bottom-0 flex-col'
+};
+const POSITIONER_ALIGN_CLASS = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end'
+};
+const CONTAINER_BASE_CLASS = "flex items-center gap-1 p-1 min-h-10 min-w-10 shrink-0 bg-(--canvas-background-raised) border border-(--canvas-background-overlay) rounded-xl shadow-[0_2px_6px_rgba(0,0,0,0.08)] pointer-events-auto";
+const CONTAINER_DIRECTION_CLASS = {
+    top: 'flex-row',
+    bottom: 'flex-row',
+    left: 'flex-col',
+    right: 'flex-col'
+};
+const SEPARATOR_BASE_CLASS = 'flex-[0_0_auto] bg-(--canvas-background-overlay) self-center';
+const SEPARATOR_VERTICAL_CLASS = 'w-px h-5';
+const SEPARATOR_HORIZONTAL_CLASS = 'w-full h-px';
+const DROPDOWN_MENU_CLASS = "absolute top-[-2px] left-[calc(100%+4px)] min-w-[180px] bg-(--canvas-background-raised) border border-(--canvas-background-overlay) rounded-md shadow-[0_4px_12px_rgba(0,0,0,0.08),0_2px_4px_rgba(0,0,0,0.04)] p-1 z-[1000] pointer-events-auto";
+const DROPDOWN_ITEM_BASE_CLASS = "flex items-center gap-3 w-full py-2 px-3 bg-transparent border-none rounded-[4px] text-sm text-(--canvas-foreground) text-left [transition:background_0.15s_ease] enabled:hover:bg-(--canvas-background-hover) future:enabled:hover:bg-(--canvas-background-overlay) [&>svg]:shrink-0 [&>svg]:text-(--canvas-foreground)";
+const DROPDOWN_ITEM_DISABLED_CLASS = 'cursor-not-allowed opacity-40 pointer-events-none';
+const DROPDOWN_ITEM_ENABLED_CLASS = 'cursor-pointer opacity-100';
 const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
     const { isDropdownOpen, setIsDropdownOpen, dropdownRef, buttonRef, actionsToDisplay, displayState, shouldShowOverflow, overflowActionsToDisplay, separatorOrientation, toggleDropdown } = useToolbarState({
         config,
@@ -14,9 +40,21 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
         nodeId,
         hidden
     });
+    const position = config.position || 'top';
+    const align = config.align || 'center';
+    const positionerClassName = useMemo(()=>cn(POSITIONER_BASE_CLASS, POSITIONER_POSITION_CLASS[position], POSITIONER_ALIGN_CLASS[align]), [
+        position,
+        align
+    ]);
+    const containerClassName = useMemo(()=>cn(CONTAINER_BASE_CLASS, CONTAINER_DIRECTION_CLASS[position]), [
+        position
+    ]);
+    const separatorClassName = useMemo(()=>cn(SEPARATOR_BASE_CLASS, 'horizontal' === separatorOrientation ? SEPARATOR_HORIZONTAL_CLASS : SEPARATOR_VERTICAL_CLASS), [
+        separatorOrientation
+    ]);
     const toolbarAnimationVariants = useMemo(()=>{
-        const offsetAxis = 'top' === config.position || 'bottom' === config.position ? 'y' : 'x';
-        const offsetAmount = 'top' === config.position || 'left' === config.position ? -10 : 10;
+        const offsetAxis = 'top' === position || 'bottom' === position ? 'y' : 'x';
+        const offsetAmount = 'top' === position || 'left' === position ? -10 : 10;
         const offset = 'pinned' !== displayState ? {
             [offsetAxis]: offsetAmount
         } : {};
@@ -38,118 +76,123 @@ const NodeToolbarComponent = ({ nodeId, config, expanded, hidden })=>{
             }
         };
     }, [
-        config.position,
+        position,
         displayState
     ]);
     if (0 === config.actions.length && (!config.overflowActions || 0 === config.overflowActions.length)) return null;
     return /*#__PURE__*/ jsx(AnimatePresence, {
-        children: 'hidden' !== displayState && /*#__PURE__*/ jsxs(StyledToolbarContainer, {
-            layout: true,
-            $position: config.position || 'top',
-            $align: config.align || 'end',
-            initial: toolbarAnimationVariants.initial,
-            animate: toolbarAnimationVariants.animate,
-            exit: toolbarAnimationVariants.exit,
-            transition: {
-                duration: 0.15,
-                ease: 'easeOut'
-            },
-            role: "toolbar",
-            children: [
-                actionsToDisplay.map((item, i)=>isSeparator(item) ? /*#__PURE__*/ jsx(StyledToolbarSeparator, {
-                        $orientation: separatorOrientation
-                    }, `separator-${i}`) : /*#__PURE__*/ jsx(ToolbarButton, {
-                        action: item,
-                        layoutId: item.isPinned ? `toolbar-btn-${nodeId}-${item.id}` : void 0
-                    }, item.id)),
-                shouldShowOverflow && /*#__PURE__*/ jsxs(Fragment, {
-                    children: [
-                        actionsToDisplay.length > 0 && /*#__PURE__*/ jsx(StyledToolbarSeparator, {
-                            $orientation: separatorOrientation
-                        }),
-                        /*#__PURE__*/ jsxs(StyledOverflowContainer, {
-                            children: [
-                                /*#__PURE__*/ jsx(StyledToolbarButton, {
-                                    ref: buttonRef,
-                                    type: "button",
-                                    className: "nodrag nopan",
-                                    onClick: toggleDropdown,
-                                    "aria-label": "More options",
-                                    "aria-expanded": isDropdownOpen,
-                                    "aria-haspopup": "menu",
-                                    children: /*#__PURE__*/ jsx(CanvasTooltip, {
-                                        content: config.overflowLabel,
+        children: 'hidden' !== displayState && /*#__PURE__*/ jsx("div", {
+            className: positionerClassName,
+            children: /*#__PURE__*/ jsxs(motion.div, {
+                layout: "position",
+                className: containerClassName,
+                initial: toolbarAnimationVariants.initial,
+                animate: toolbarAnimationVariants.animate,
+                exit: toolbarAnimationVariants.exit,
+                transition: {
+                    duration: 0.15,
+                    ease: 'easeOut'
+                },
+                role: "toolbar",
+                children: [
+                    actionsToDisplay.map((item, i)=>isSeparator(item) ? /*#__PURE__*/ jsx("div", {
+                            className: separatorClassName
+                        }, `separator-${i}`) : /*#__PURE__*/ jsx(ToolbarButton, {
+                            action: item,
+                            layoutId: item.isPinned ? `toolbar-btn-${nodeId}-${item.id}` : void 0
+                        }, item.id)),
+                    shouldShowOverflow && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            actionsToDisplay.length > 0 && /*#__PURE__*/ jsx("div", {
+                                className: separatorClassName
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "relative",
+                                children: [
+                                    /*#__PURE__*/ jsx(CanvasTooltip, {
+                                        content: config.overflowLabel ?? 'More options',
                                         placement: "top",
-                                        children: /*#__PURE__*/ jsx(CanvasIcon, {
-                                            icon: "ellipsis-vertical",
-                                            size: 16
+                                        children: /*#__PURE__*/ jsx(ToolbarIconButton, {
+                                            ref: buttonRef,
+                                            type: "button",
+                                            className: "nodrag nopan",
+                                            onClick: toggleDropdown,
+                                            "aria-label": config.overflowLabel ?? 'More options',
+                                            "aria-expanded": isDropdownOpen,
+                                            "aria-haspopup": "menu",
+                                            children: /*#__PURE__*/ jsx(CanvasIcon, {
+                                                icon: "ellipsis-vertical",
+                                                size: 16
+                                            })
                                         })
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(AnimatePresence, {
-                                    children: isDropdownOpen && /*#__PURE__*/ jsx(StyledDropdownMenu, {
-                                        ref: dropdownRef,
-                                        initial: {
-                                            opacity: 0,
-                                            x: -8
-                                        },
-                                        animate: {
-                                            opacity: 1,
-                                            x: 0
-                                        },
-                                        exit: {
-                                            opacity: 0,
-                                            x: -8
-                                        },
-                                        transition: {
-                                            duration: 0.15
-                                        },
-                                        role: "menu",
-                                        "aria-labelledby": buttonRef.current?.id,
-                                        children: overflowActionsToDisplay.map((item, i)=>{
-                                            if (isSeparator(item)) return /*#__PURE__*/ jsx(StyledToolbarSeparator, {
-                                                $orientation: "horizontal"
-                                            }, `separator-${i}`);
-                                            return /*#__PURE__*/ jsxs(StyledDropdownItem, {
-                                                type: "button",
-                                                className: "nodrag nopan",
-                                                onClick: (e)=>{
-                                                    e.stopPropagation();
-                                                    e.preventDefault();
-                                                    if (!item.disabled) {
-                                                        item.onClick();
-                                                        setIsDropdownOpen(false);
-                                                    }
-                                                },
-                                                "aria-label": item.label,
-                                                "aria-disabled": item.disabled,
-                                                role: "menuitem",
-                                                $disabled: item.disabled,
-                                                children: [
-                                                    item.icon && 'string' == typeof item.icon && /*#__PURE__*/ jsx("span", {
-                                                        style: {
-                                                            flex: 'unset',
-                                                            display: 'inline-flex'
-                                                        },
-                                                        children: /*#__PURE__*/ jsx(CanvasIcon, {
-                                                            icon: item.icon,
-                                                            size: 16
+                                    }),
+                                    /*#__PURE__*/ jsx(AnimatePresence, {
+                                        children: isDropdownOpen && /*#__PURE__*/ jsx(motion.div, {
+                                            ref: dropdownRef,
+                                            className: DROPDOWN_MENU_CLASS,
+                                            initial: {
+                                                opacity: 0,
+                                                x: -8
+                                            },
+                                            animate: {
+                                                opacity: 1,
+                                                x: 0
+                                            },
+                                            exit: {
+                                                opacity: 0,
+                                                x: -8
+                                            },
+                                            transition: {
+                                                duration: 0.15
+                                            },
+                                            role: "menu",
+                                            "aria-label": config.overflowLabel ?? 'More options',
+                                            children: overflowActionsToDisplay.map((item, i)=>{
+                                                if (isSeparator(item)) return /*#__PURE__*/ jsx("div", {
+                                                    className: cn(SEPARATOR_BASE_CLASS, SEPARATOR_HORIZONTAL_CLASS)
+                                                }, `separator-${i}`);
+                                                return /*#__PURE__*/ jsxs("button", {
+                                                    type: "button",
+                                                    className: cn(DROPDOWN_ITEM_BASE_CLASS, item.disabled ? DROPDOWN_ITEM_DISABLED_CLASS : DROPDOWN_ITEM_ENABLED_CLASS, 'nodrag nopan'),
+                                                    onClick: (e)=>{
+                                                        e.stopPropagation();
+                                                        e.preventDefault();
+                                                        if (!item.disabled) {
+                                                            item.onClick();
+                                                            setIsDropdownOpen(false);
+                                                        }
+                                                    },
+                                                    "aria-label": item.label,
+                                                    "aria-disabled": item.disabled,
+                                                    disabled: item.disabled,
+                                                    role: "menuitem",
+                                                    children: [
+                                                        item.icon && 'string' == typeof item.icon && /*#__PURE__*/ jsx("span", {
+                                                            style: {
+                                                                flex: 'unset',
+                                                                display: 'inline-flex'
+                                                            },
+                                                            children: /*#__PURE__*/ jsx(CanvasIcon, {
+                                                                icon: item.icon,
+                                                                size: 16
+                                                            })
+                                                        }),
+                                                        item.icon && 'string' != typeof item.icon && item.icon,
+                                                        /*#__PURE__*/ jsx("span", {
+                                                            className: "flex-1 text-(--canvas-foreground)",
+                                                            children: item.label
                                                         })
-                                                    }),
-                                                    item.icon && 'string' != typeof item.icon && item.icon,
-                                                    /*#__PURE__*/ jsx("span", {
-                                                        children: item.label
-                                                    })
-                                                ]
-                                            }, item.id);
+                                                    ]
+                                                }, item.id);
+                                            })
                                         })
                                     })
-                                })
-                            ]
-                        })
-                    ]
-                })
-            ]
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
         })
     });
 };

package/dist/canvas/components/Toolbar/NodeToolbar/useToolbarState.cjs

@@ -119,7 +119,7 @@ const useToolbarState = ({ config, expanded, nodeId, hidden })=>{
         displayState,
         actionsToDisplay,
         overflowActionsToDisplay: overflowActionsWithState,
-        separatorOrientation: 'top' === config.position || 'bottom' === config.position ? 'vertical' : 'horizontal',
+        separatorOrientation: config.position && 'top' !== config.position && 'bottom' !== config.position ? 'horizontal' : 'vertical',
         toggleDropdown
     };
 };

package/dist/canvas/components/Toolbar/NodeToolbar/useToolbarState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToolbarState.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/useToolbarState.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEnE,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,EAAE,mBAAmB,CAAC;IAClC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,oBAAoB,EAAE,CAAC;IACzC,wBAAwB,EAAE,oBAAoB,EAAE,CAAC;IACjD,oBAAoB,EAAE,YAAY,GAAG,UAAU,CAAC;IAChD,cAAc,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,eAAe,GAAI,uCAK7B,oBAAoB,KAAG,qBAsHzB,CAAC"}
+{"version":3,"file":"useToolbarState.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/useToolbarState.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEnE,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACrD,YAAY,EAAE,mBAAmB,CAAC;IAClC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,gBAAgB,EAAE,oBAAoB,EAAE,CAAC;IACzC,wBAAwB,EAAE,oBAAoB,EAAE,CAAC;IACjD,oBAAoB,EAAE,YAAY,GAAG,UAAU,CAAC;IAChD,cAAc,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC/C;AAED,eAAO,MAAM,eAAe,GAAI,uCAK7B,oBAAoB,KAAG,qBAwHzB,CAAC"}