@uipath/apollo-react 3.71.0 → 4.0.0

package/dist/canvas/components/StageNode/StageNode.stories.utils.js

@@ -6,6 +6,18 @@ const StageNodeWrapper = /*#__PURE__*/ memo(({ id, selected, dragging, width, da
         selected: selected,
         dragging: dragging,
         width: width,
-        ...data
+        ...data,
+        menuItems: [
+            {
+                id: 'menu-item-1',
+                label: 'Menu Item 1',
+                onClick: ()=>alert('Menu Item 1 clicked')
+            },
+            {
+                id: 'menu-item-2',
+                label: 'Menu Item 2',
+                onClick: ()=>alert('Menu Item 2 clicked')
+            }
+        ]
     }));
 export { StageNodeWrapper };

package/dist/canvas/components/StageNode/TaskContent.cjs

@@ -38,14 +38,15 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const apollo_core_namespaceObject = require("@uipath/apollo-core");
 const index_cjs_namespaceObject = require("../../layouts/index.cjs");
-const external_material_index_cjs_namespaceObject = require("../../../material/index.cjs");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_debounce_namespaceObject = require("debounce");
 var external_debounce_default = /*#__PURE__*/ __webpack_require__.n(external_debounce_namespaceObject);
 const external_react_namespaceObject = require("react");
 const external_icons_index_cjs_namespaceObject = require("../../icons/index.cjs");
+const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
 const external_ExecutionStatusIcon_index_cjs_namespaceObject = require("../ExecutionStatusIcon/index.cjs");
 const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
-const ProcessNodeIcon = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
+const ProcessCanvasIcon = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
         stroke: "currentColor",
@@ -110,27 +111,33 @@ const TaskPlayButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({
     ]);
     const iconSize = small ? 18 : 22;
     const buttonSize = small ? '20px' : apollo_core_namespaceObject.Spacing.SpacingL;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
         content: "Trigger task",
         placement: "top",
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+            variant: "ghost",
+            size: "icon",
             "data-testid": `stage-task-play-${taskId}`,
             onClick: handlePlayClick,
             onMouseDown: (e)=>e.stopPropagation(),
             onKeyDown: (e)=>e.stopPropagation(),
             className: "task-menu-icon-button",
-            sx: {
-                color: 'var(--uix-canvas-icon-default) !important',
-                minWidth: 'unset !important',
-                width: `${buttonSize} !important`,
-                height: `${buttonSize} !important`,
-                padding: '0 !important',
+            style: {
+                color: 'var(--uix-canvas-icon-default)',
+                minWidth: 'unset',
+                width: buttonSize,
+                height: buttonSize,
+                padding: 0,
                 ...small && {
                     marginRight: '-2px'
                 }
             },
-            children: playLoading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApCircularProgress, {
-                size: iconSize - 2
+            children: playLoading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Spinner, {
+                size: "sm",
+                style: {
+                    width: iconSize - 2,
+                    height: iconSize - 2
+                }
             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_icons_index_cjs_namespaceObject.TimelinePlayIcon, {
                 w: iconSize,
                 h: iconSize
@@ -166,23 +173,17 @@ const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ ta
                             },
                             children: [
                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskIcon, {
-                                    children: task.icon ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessNodeIcon, {})
+                                    children: task.icon ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ProcessCanvasIcon, {})
                                 }),
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                                     content: task.label,
                                     placement: "top",
                                     smartTooltip: true,
                                     ...isDragging && {
                                         isOpen: false
                                     },
-                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                                        variant: apollo_core_namespaceObject.FontVariantToken.fontSizeM,
-                                        color: "var(--uix-canvas-foreground)",
-                                        style: {
-                                            overflow: 'hidden',
-                                            textOverflow: 'ellipsis',
-                                            whiteSpace: 'nowrap'
-                                        },
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: "text-sm truncate",
                                         children: task.label
                                     })
                                 })
@@ -195,11 +196,14 @@ const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ ta
                                 flexShrink: 0
                             },
                             children: [
-                                hasExecutionStatus && (taskExecution.message ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
+                                hasExecutionStatus && (taskExecution.message ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                                     content: taskExecution.message,
                                     placement: "top",
-                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
-                                        size: "small",
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                                        variant: "ghost",
+                                        size: "icon",
+                                        className: "h-6 w-6",
+                                        "aria-label": taskExecution.message,
                                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ExecutionStatusIcon_index_cjs_namespaceObject.ExecutionStatusIcon, {
                                             status: taskExecution.status
                                         })
@@ -227,16 +231,14 @@ const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ ta
                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
                             gap: '2px',
                             children: [
-                                taskExecution?.duration && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                                    variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
-                                    color: "var(--uix-canvas-foreground-de-emp)",
+                                taskExecution?.duration && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                    className: "text-xs text-foreground-muted",
                                     children: taskExecution.duration
                                 }),
                                 taskExecution?.retryDuration && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTaskRetryDuration, {
                                     status: taskExecution.badgeStatus ?? 'warning',
-                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                                        variant: apollo_core_namespaceObject.FontVariantToken.fontSizeS,
-                                        color: "inherit",
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                        className: "text-xs",
                                         children: `(+${taskExecution.retryDuration})`
                                     })
                                 })
@@ -246,10 +248,9 @@ const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ ta
                             align: "center",
                             gap: apollo_core_namespaceObject.Spacing.SpacingXs,
                             children: [
-                                taskExecution?.badge && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApBadge, {
-                                    size: external_material_index_cjs_namespaceObject.BadgeSize.SMALL,
-                                    status: taskExecution.badgeStatus,
-                                    label: generateBadgeText(taskExecution) ?? ''
+                                taskExecution?.badge && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Badge, {
+                                    variant: taskExecution.badgeStatus,
+                                    children: generateBadgeText(taskExecution) ?? ''
                                 }),
                                 showPlayButtonSmall && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TaskPlayButton, {
                                     taskId: task.id,

package/dist/canvas/components/StageNode/TaskContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TaskContent.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskContent.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AA4F3E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,WAAW,wFAC4B,gBAAgB,6CA6FnE,CAAC"}
+{"version":3,"file":"TaskContent.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskContent.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AA8F3E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAChD;AAED,eAAO,MAAM,WAAW,wFAC4B,gBAAgB,6CAmFnE,CAAC"}

package/dist/canvas/components/StageNode/TaskContent.js

@@ -1,13 +1,14 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { FontVariantToken, Padding, Spacing } from "@uipath/apollo-core";
+import { Padding, Spacing } from "@uipath/apollo-core";
 import { Column, Row } from "../../layouts/index.js";
-import { ApBadge, ApCircularProgress, ApIconButton, ApTooltip, ApTypography, BadgeSize } from "../../../material/index.js";
+import { Badge, Button, Spinner } from "@uipath/apollo-wind";
 import debounce from "debounce";
 import { memo, useCallback, useMemo, useState } from "react";
 import { TimelinePlayIcon } from "../../icons/index.js";
+import { CanvasTooltip } from "../CanvasTooltip.js";
 import { ExecutionStatusIcon } from "../ExecutionStatusIcon/index.js";
 import { StageTaskIcon, StageTaskRetryDuration } from "./StageNode.styles.js";
-const ProcessNodeIcon = ()=>/*#__PURE__*/ jsxs("svg", {
+const ProcessCanvasIcon = ()=>/*#__PURE__*/ jsxs("svg", {
         viewBox: "0 0 24 24",
         fill: "none",
         stroke: "currentColor",
@@ -72,27 +73,33 @@ const TaskPlayButton = /*#__PURE__*/ memo(({ taskId, onTaskPlay, small })=>{
     ]);
     const iconSize = small ? 18 : 22;
     const buttonSize = small ? '20px' : Spacing.SpacingL;
-    return /*#__PURE__*/ jsx(ApTooltip, {
+    return /*#__PURE__*/ jsx(CanvasTooltip, {
         content: "Trigger task",
         placement: "top",
-        children: /*#__PURE__*/ jsx(ApIconButton, {
+        children: /*#__PURE__*/ jsx(Button, {
+            variant: "ghost",
+            size: "icon",
             "data-testid": `stage-task-play-${taskId}`,
             onClick: handlePlayClick,
             onMouseDown: (e)=>e.stopPropagation(),
             onKeyDown: (e)=>e.stopPropagation(),
             className: "task-menu-icon-button",
-            sx: {
-                color: 'var(--uix-canvas-icon-default) !important',
-                minWidth: 'unset !important',
-                width: `${buttonSize} !important`,
-                height: `${buttonSize} !important`,
-                padding: '0 !important',
+            style: {
+                color: 'var(--uix-canvas-icon-default)',
+                minWidth: 'unset',
+                width: buttonSize,
+                height: buttonSize,
+                padding: 0,
                 ...small && {
                     marginRight: '-2px'
                 }
             },
-            children: playLoading ? /*#__PURE__*/ jsx(ApCircularProgress, {
-                size: iconSize - 2
+            children: playLoading ? /*#__PURE__*/ jsx(Spinner, {
+                size: "sm",
+                style: {
+                    width: iconSize - 2,
+                    height: iconSize - 2
+                }
             }) : /*#__PURE__*/ jsx(TimelinePlayIcon, {
                 w: iconSize,
                 h: iconSize
@@ -128,23 +135,17 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging, onTas
                             },
                             children: [
                                 /*#__PURE__*/ jsx(StageTaskIcon, {
-                                    children: task.icon ?? /*#__PURE__*/ jsx(ProcessNodeIcon, {})
+                                    children: task.icon ?? /*#__PURE__*/ jsx(ProcessCanvasIcon, {})
                                 }),
-                                /*#__PURE__*/ jsx(ApTooltip, {
+                                /*#__PURE__*/ jsx(CanvasTooltip, {
                                     content: task.label,
                                     placement: "top",
                                     smartTooltip: true,
                                     ...isDragging && {
                                         isOpen: false
                                     },
-                                    children: /*#__PURE__*/ jsx(ApTypography, {
-                                        variant: FontVariantToken.fontSizeM,
-                                        color: "var(--uix-canvas-foreground)",
-                                        style: {
-                                            overflow: 'hidden',
-                                            textOverflow: 'ellipsis',
-                                            whiteSpace: 'nowrap'
-                                        },
+                                    children: /*#__PURE__*/ jsx("span", {
+                                        className: "text-sm truncate",
                                         children: task.label
                                     })
                                 })
@@ -157,11 +158,14 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging, onTas
                                 flexShrink: 0
                             },
                             children: [
-                                hasExecutionStatus && (taskExecution.message ? /*#__PURE__*/ jsx(ApTooltip, {
+                                hasExecutionStatus && (taskExecution.message ? /*#__PURE__*/ jsx(CanvasTooltip, {
                                     content: taskExecution.message,
                                     placement: "top",
-                                    children: /*#__PURE__*/ jsx(ApIconButton, {
-                                        size: "small",
+                                    children: /*#__PURE__*/ jsx(Button, {
+                                        variant: "ghost",
+                                        size: "icon",
+                                        className: "h-6 w-6",
+                                        "aria-label": taskExecution.message,
                                         children: /*#__PURE__*/ jsx(ExecutionStatusIcon, {
                                             status: taskExecution.status
                                         })
@@ -189,16 +193,14 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging, onTas
                         /*#__PURE__*/ jsxs(Row, {
                             gap: '2px',
                             children: [
-                                taskExecution?.duration && /*#__PURE__*/ jsx(ApTypography, {
-                                    variant: FontVariantToken.fontSizeS,
-                                    color: "var(--uix-canvas-foreground-de-emp)",
+                                taskExecution?.duration && /*#__PURE__*/ jsx("span", {
+                                    className: "text-xs text-foreground-muted",
                                     children: taskExecution.duration
                                 }),
                                 taskExecution?.retryDuration && /*#__PURE__*/ jsx(StageTaskRetryDuration, {
                                     status: taskExecution.badgeStatus ?? 'warning',
-                                    children: /*#__PURE__*/ jsx(ApTypography, {
-                                        variant: FontVariantToken.fontSizeS,
-                                        color: "inherit",
+                                    children: /*#__PURE__*/ jsx("span", {
+                                        className: "text-xs",
                                         children: `(+${taskExecution.retryDuration})`
                                     })
                                 })
@@ -208,10 +210,9 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging, onTas
                             align: "center",
                             gap: Spacing.SpacingXs,
                             children: [
-                                taskExecution?.badge && /*#__PURE__*/ jsx(ApBadge, {
-                                    size: BadgeSize.SMALL,
-                                    status: taskExecution.badgeStatus,
-                                    label: generateBadgeText(taskExecution) ?? ''
+                                taskExecution?.badge && /*#__PURE__*/ jsx(Badge, {
+                                    variant: taskExecution.badgeStatus,
+                                    children: generateBadgeText(taskExecution) ?? ''
                                 }),
                                 showPlayButtonSmall && /*#__PURE__*/ jsx(TaskPlayButton, {
                                     taskId: task.id,

package/dist/canvas/components/StageNode/TaskMenu.cjs

@@ -1,14 +1,5 @@
 "use strict";
 var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
@@ -36,110 +27,39 @@ __webpack_require__.d(__webpack_exports__, {
     TaskMenu: ()=>TaskMenu
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const apollo_core_namespaceObject = require("@uipath/apollo-core");
-var apollo_core_default = /*#__PURE__*/ __webpack_require__.n(apollo_core_namespaceObject);
-const index_cjs_namespaceObject = require("../../../material/index.cjs");
 const external_react_namespaceObject = require("react");
-const external_StageNodeTaskUtilities_cjs_namespaceObject = require("./StageNodeTaskUtilities.cjs");
-const TaskMenuComponent = ({ taskId, getContextMenuItems, onMenuOpenChange, taskRef }, ref)=>{
-    const [anchorElement, setAnchorElement] = (0, external_react_namespaceObject.useState)(null);
-    const menuAnchorRef = (0, external_react_namespaceObject.useRef)(null);
-    const isMenuOpen = null !== anchorElement;
+const CanvasDropdownMenu_cjs_namespaceObject = require("../shared/CanvasDropdownMenu.cjs");
+const TaskMenuComponent = ({ taskId, getContextMenuItems }, ref)=>{
+    const [isOpen, setIsOpen] = (0, external_react_namespaceObject.useState)(false);
     const [menuItems, setMenuItems] = (0, external_react_namespaceObject.useState)([]);
-    const handleMenuClose = (0, external_react_namespaceObject.useCallback)(()=>{
-        setAnchorElement(null);
-        onMenuOpenChange?.(false);
+    const handleOpenChange = (0, external_react_namespaceObject.useCallback)((open)=>{
+        if (open) setMenuItems(getContextMenuItems());
+        setIsOpen(open);
     }, [
-        onMenuOpenChange
+        getContextMenuItems
     ]);
     const handleMenuItemClick = (0, external_react_namespaceObject.useCallback)((item)=>{
         item.onClick();
-        handleMenuClose();
-    }, [
-        handleMenuClose
-    ]);
-    const openMenu = (0, external_react_namespaceObject.useCallback)((anchor)=>{
-        if (!anchor) return;
-        setAnchorElement(anchor);
-        setMenuItems((0, external_StageNodeTaskUtilities_cjs_namespaceObject.transformMenuItems)(getContextMenuItems(), handleMenuItemClick));
-        onMenuOpenChange?.(true);
-    }, [
-        getContextMenuItems,
-        handleMenuItemClick,
-        onMenuOpenChange
-    ]);
-    const handleMenuClick = (0, external_react_namespaceObject.useCallback)((e)=>{
-        e.stopPropagation();
-        e.preventDefault();
-        if (isMenuOpen) handleMenuClose();
-        else openMenu(menuAnchorRef.current);
-    }, [
-        isMenuOpen,
-        handleMenuClose,
-        openMenu
-    ]);
+        setIsOpen(false);
+    }, []);
     const handleContextMenu = (0, external_react_namespaceObject.useCallback)((e)=>{
         e.stopPropagation();
         e.preventDefault();
-        const anchor = taskRef?.current || e.currentTarget;
-        openMenu(anchor);
+        handleOpenChange(true);
     }, [
-        taskRef,
-        openMenu
+        handleOpenChange
     ]);
     (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>({
             handleContextMenu
         }));
-    const handleMenuMouseDown = (0, external_react_namespaceObject.useCallback)((e)=>{
-        e.stopPropagation();
-    }, []);
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIconButton, {
-                ref: menuAnchorRef,
-                "data-testid": `stage-task-menu-${taskId}`,
-                onClick: handleMenuClick,
-                onMouseDown: handleMenuMouseDown,
-                className: "task-menu-icon-button",
-                sx: {
-                    color: 'var(--colorIconDefault) !important',
-                    minWidth: 'unset !important',
-                    width: `${apollo_core_namespaceObject.Spacing.SpacingL} !important`,
-                    height: `${apollo_core_namespaceObject.Spacing.SpacingL} !important`,
-                    padding: '0 !important'
-                },
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-                    name: "more_vert",
-                    size: "16px"
-                })
-            }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApMenu, {
-                isOpen: isMenuOpen,
-                menuItems: menuItems,
-                anchorEl: anchorElement,
-                onClose: handleMenuClose,
-                anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'right'
-                },
-                transformOrigin: {
-                    vertical: 'top',
-                    horizontal: 'right'
-                },
-                width: 300,
-                slotProps: {
-                    paper: {
-                        className: 'task-menu-paper',
-                        sx: {
-                            '&.task-menu-paper .MuiList-padding': {
-                                paddingTop: apollo_core_default().Padding.PadL,
-                                paddingBottom: apollo_core_default().Padding.PadL
-                            }
-                        }
-                    }
-                }
-            })
-        ]
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CanvasDropdownMenu_cjs_namespaceObject.CanvasDropdownMenu, {
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+        menuItems: menuItems,
+        onItemClick: handleMenuItemClick,
+        triggerTestId: `stage-task-menu-${taskId}`,
+        triggerAriaLabel: "Task actions",
+        contentClassName: "w-[300px]"
     });
 };
 const TaskMenu = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(/*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(TaskMenuComponent));

package/dist/canvas/components/StageNode/TaskMenu.d.ts

@@ -5,8 +5,6 @@ export interface TaskMenuHandle {
 interface TaskMenuProps {
     taskId: string;
     getContextMenuItems: () => NodeMenuItem[];
-    onMenuOpenChange?: (isOpen: boolean) => void;
-    taskRef?: React.RefObject<HTMLElement | null>;
 }
 export declare const TaskMenu: import("react").NamedExoticComponent<TaskMenuProps & import("react").RefAttributes<TaskMenuHandle>>;
 export {};

package/dist/canvas/components/StageNode/TaskMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TaskMenu.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAkB,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGvE,MAAM,WAAW,cAAc;IAC7B,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC/D;AAED,UAAU,aAAa;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,mBAAmB,EAAE,MAAM,YAAY,EAAE,CAAC;IAC1C,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC/C;AAqHD,eAAO,MAAM,QAAQ,qGAAsC,CAAC"}
+{"version":3,"file":"TaskMenu.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/TaskMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAkB,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGvE,MAAM,WAAW,cAAc;IAC7B,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC/D;AAED,UAAU,aAAa;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,mBAAmB,EAAE,MAAM,YAAY,EAAE,CAAC;CAC3C;AAkDD,eAAO,MAAM,QAAQ,qGAAsC,CAAC"}

package/dist/canvas/components/StageNode/TaskMenu.js

@@ -1,107 +1,37 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import apollo_core, { Spacing } from "@uipath/apollo-core";
-import { ApIcon, ApIconButton, ApMenu } from "../../../material/index.js";
-import { forwardRef, memo, useCallback, useImperativeHandle, useRef, useState } from "react";
-import { transformMenuItems } from "./StageNodeTaskUtilities.js";
-const TaskMenuComponent = ({ taskId, getContextMenuItems, onMenuOpenChange, taskRef }, ref)=>{
-    const [anchorElement, setAnchorElement] = useState(null);
-    const menuAnchorRef = useRef(null);
-    const isMenuOpen = null !== anchorElement;
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, memo, useCallback, useImperativeHandle, useState } from "react";
+import { CanvasDropdownMenu } from "../shared/CanvasDropdownMenu.js";
+const TaskMenuComponent = ({ taskId, getContextMenuItems }, ref)=>{
+    const [isOpen, setIsOpen] = useState(false);
     const [menuItems, setMenuItems] = useState([]);
-    const handleMenuClose = useCallback(()=>{
-        setAnchorElement(null);
-        onMenuOpenChange?.(false);
+    const handleOpenChange = useCallback((open)=>{
+        if (open) setMenuItems(getContextMenuItems());
+        setIsOpen(open);
     }, [
-        onMenuOpenChange
+        getContextMenuItems
     ]);
     const handleMenuItemClick = useCallback((item)=>{
         item.onClick();
-        handleMenuClose();
-    }, [
-        handleMenuClose
-    ]);
-    const openMenu = useCallback((anchor)=>{
-        if (!anchor) return;
-        setAnchorElement(anchor);
-        setMenuItems(transformMenuItems(getContextMenuItems(), handleMenuItemClick));
-        onMenuOpenChange?.(true);
-    }, [
-        getContextMenuItems,
-        handleMenuItemClick,
-        onMenuOpenChange
-    ]);
-    const handleMenuClick = useCallback((e)=>{
-        e.stopPropagation();
-        e.preventDefault();
-        if (isMenuOpen) handleMenuClose();
-        else openMenu(menuAnchorRef.current);
-    }, [
-        isMenuOpen,
-        handleMenuClose,
-        openMenu
-    ]);
+        setIsOpen(false);
+    }, []);
     const handleContextMenu = useCallback((e)=>{
         e.stopPropagation();
         e.preventDefault();
-        const anchor = taskRef?.current || e.currentTarget;
-        openMenu(anchor);
+        handleOpenChange(true);
     }, [
-        taskRef,
-        openMenu
+        handleOpenChange
     ]);
     useImperativeHandle(ref, ()=>({
             handleContextMenu
         }));
-    const handleMenuMouseDown = useCallback((e)=>{
-        e.stopPropagation();
-    }, []);
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx(ApIconButton, {
-                ref: menuAnchorRef,
-                "data-testid": `stage-task-menu-${taskId}`,
-                onClick: handleMenuClick,
-                onMouseDown: handleMenuMouseDown,
-                className: "task-menu-icon-button",
-                sx: {
-                    color: 'var(--colorIconDefault) !important',
-                    minWidth: 'unset !important',
-                    width: `${Spacing.SpacingL} !important`,
-                    height: `${Spacing.SpacingL} !important`,
-                    padding: '0 !important'
-                },
-                children: /*#__PURE__*/ jsx(ApIcon, {
-                    name: "more_vert",
-                    size: "16px"
-                })
-            }),
-            /*#__PURE__*/ jsx(ApMenu, {
-                isOpen: isMenuOpen,
-                menuItems: menuItems,
-                anchorEl: anchorElement,
-                onClose: handleMenuClose,
-                anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'right'
-                },
-                transformOrigin: {
-                    vertical: 'top',
-                    horizontal: 'right'
-                },
-                width: 300,
-                slotProps: {
-                    paper: {
-                        className: 'task-menu-paper',
-                        sx: {
-                            '&.task-menu-paper .MuiList-padding': {
-                                paddingTop: apollo_core.Padding.PadL,
-                                paddingBottom: apollo_core.Padding.PadL
-                            }
-                        }
-                    }
-                }
-            })
-        ]
+    return /*#__PURE__*/ jsx(CanvasDropdownMenu, {
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+        menuItems: menuItems,
+        onItemClick: handleMenuItemClick,
+        triggerTestId: `stage-task-menu-${taskId}`,
+        triggerAriaLabel: "Task actions",
+        contentClassName: "w-[300px]"
     });
 };
 const TaskMenu = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(TaskMenuComponent));