@uipath/apollo-react 3.71.0 → 4.0.0

package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.js

@@ -1,12 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { FontVariantToken } from "@uipath/apollo-core";
 import { Panel, ReactFlowProvider, useReactFlow } from "../../xyflow/react.js";
-import { ApButton, ApTypography } from "../../../material/index.js";
-import { ApIcon } from "../../../material/components/index.js";
+import { Button } from "@uipath/apollo-wind";
 import { useCallback, useEffect, useState } from "react";
 import { NodeRegistryProvider } from "../../core/index.js";
 import { selectAddNode, selectCurrentCanvas, selectCurrentPathLength, selectRemoveEdge, selectRemoveNode, selectUpdateNodes, useCanvasStore } from "../../stores/canvasStore.js";
 import { canvasEventBus } from "../../utils/CanvasEventBus.js";
+import { CanvasIcon } from "../../utils/icon-registry.js";
 import { createAddNodePreview } from "../AddNodePanel/createAddNodePreview.js";
 import { HierarchicalCanvas } from "./HierarchicalCanvas.js";
 const createDemoCanvases = ()=>{
@@ -283,7 +282,7 @@ const workflowManifests = [
                 actions: [
                     {
                         id: 'drill-in',
-                        icon: 'open_in_new',
+                        icon: 'external-link',
                         label: 'Open Sub-Process'
                     }
                 ]
@@ -433,74 +432,88 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
                         minWidth: '180px'
                     },
                     children: [
-                        /*#__PURE__*/ jsx(ApButton, {
+                        /*#__PURE__*/ jsxs(Button, {
                             variant: "secondary",
-                            label: "Start",
-                            size: "small",
-                            startIcon: /*#__PURE__*/ jsx(ApIcon, {
-                                variant: "outlined",
-                                name: "play_circle"
-                            }),
-                            onClick: ()=>handleAddNode('start')
+                            size: "sm",
+                            onClick: ()=>handleAddNode('start'),
+                            children: [
+                                /*#__PURE__*/ jsx(CanvasIcon, {
+                                    icon: "circle-play",
+                                    size: 16
+                                }),
+                                " Start"
+                            ]
                         }),
-                        /*#__PURE__*/ jsx(ApButton, {
+                        /*#__PURE__*/ jsxs(Button, {
                             variant: "secondary",
-                            size: "small",
-                            label: "Process",
-                            startIcon: /*#__PURE__*/ jsx(ApIcon, {
-                                variant: "outlined",
-                                name: "settings"
-                            }),
-                            onClick: ()=>handleAddNode('process')
+                            size: "sm",
+                            onClick: ()=>handleAddNode('process'),
+                            children: [
+                                /*#__PURE__*/ jsx(CanvasIcon, {
+                                    icon: "settings",
+                                    size: 16
+                                }),
+                                " Process"
+                            ]
                         }),
-                        /*#__PURE__*/ jsx(ApButton, {
+                        /*#__PURE__*/ jsxs(Button, {
                             variant: "secondary",
-                            size: "small",
-                            label: "Decision",
-                            startIcon: /*#__PURE__*/ jsx(ApIcon, {
-                                variant: "outlined",
-                                name: "help"
-                            }),
-                            onClick: ()=>handleAddNode('decision')
+                            size: "sm",
+                            onClick: ()=>handleAddNode('decision'),
+                            children: [
+                                /*#__PURE__*/ jsx(CanvasIcon, {
+                                    icon: "circle-question-mark",
+                                    size: 16
+                                }),
+                                " Decision"
+                            ]
                         }),
-                        /*#__PURE__*/ jsx(ApButton, {
+                        /*#__PURE__*/ jsxs(Button, {
                             variant: "secondary",
-                            size: "small",
-                            label: "Sub-Process",
-                            startIcon: /*#__PURE__*/ jsx(ApIcon, {
-                                variant: "outlined",
-                                name: "folder"
-                            }),
-                            onClick: ()=>handleAddNode('subprocess')
+                            size: "sm",
+                            onClick: ()=>handleAddNode('subprocess'),
+                            children: [
+                                /*#__PURE__*/ jsx(CanvasIcon, {
+                                    icon: "folder",
+                                    size: 16
+                                }),
+                                " Sub-Process"
+                            ]
                         }),
-                        /*#__PURE__*/ jsx(ApButton, {
+                        /*#__PURE__*/ jsxs(Button, {
                             variant: "secondary",
-                            size: "small",
-                            label: "End",
-                            startIcon: /*#__PURE__*/ jsx(ApIcon, {
-                                variant: "outlined",
-                                name: "stop_circle"
-                            }),
-                            onClick: ()=>handleAddNode('end')
+                            size: "sm",
+                            onClick: ()=>handleAddNode('end'),
+                            children: [
+                                /*#__PURE__*/ jsx(CanvasIcon, {
+                                    icon: "circle-stop",
+                                    size: 16
+                                }),
+                                " End"
+                            ]
                         }),
-                        /*#__PURE__*/ jsx(ApButton, {
-                            variant: "primary",
-                            size: "small",
-                            label: "Sample Workflow",
-                            startIcon: /*#__PURE__*/ jsx(ApIcon, {
-                                variant: "outlined",
-                                name: "auto_awesome"
-                            }),
-                            onClick: handleAddSampleWorkflow
+                        /*#__PURE__*/ jsxs(Button, {
+                            size: "sm",
+                            onClick: handleAddSampleWorkflow,
+                            children: [
+                                /*#__PURE__*/ jsx(CanvasIcon, {
+                                    icon: "sparkles",
+                                    size: 16
+                                }),
+                                " Sample Workflow"
+                            ]
                         }),
-                        /*#__PURE__*/ jsx(ApButton, {
+                        /*#__PURE__*/ jsxs(Button, {
                             variant: "secondary",
-                            size: "small",
-                            label: "Clear Canvas",
-                            startIcon: /*#__PURE__*/ jsx(ApIcon, {
-                                name: "clear"
-                            }),
-                            onClick: handleClearCanvas
+                            size: "sm",
+                            onClick: handleClearCanvas,
+                            children: [
+                                /*#__PURE__*/ jsx(CanvasIcon, {
+                                    icon: "x",
+                                    size: 16
+                                }),
+                                " Clear Canvas"
+                            ]
                         })
                     ]
                 })
@@ -517,8 +530,8 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
                         fontSize: '12px'
                     },
                     children: [
-                        /*#__PURE__*/ jsx(ApTypography, {
-                            variant: FontVariantToken.fontSizeMBold,
+                        /*#__PURE__*/ jsx("span", {
+                            className: "text-sm font-bold",
                             children: "Canvas Info"
                         }),
                         /*#__PURE__*/ jsxs("div", {
@@ -539,8 +552,8 @@ const CanvasWithControlsContent = ({ initialCanvases, initialPath, onCanvasesCha
                                 currentPathLength
                             ]
                         }),
-                        /*#__PURE__*/ jsx(ApTypography, {
-                            variant: FontVariantToken.fontSizeMBold,
+                        /*#__PURE__*/ jsx("span", {
+                            className: "text-sm font-bold",
                             children: "Instructions"
                         }),
                         /*#__PURE__*/ jsxs("div", {

package/dist/canvas/components/NodeContextMenu/NodeContextMenu.cjs

@@ -27,97 +27,29 @@ __webpack_require__.d(__webpack_exports__, {
     NodeContextMenu: ()=>NodeContextMenu
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const index_cjs_namespaceObject = require("../../../material/components/index.cjs");
 const external_react_namespaceObject = require("react");
+const CanvasDropdownMenu_cjs_namespaceObject = require("../shared/CanvasDropdownMenu.cjs");
 const external_NodeContextMenu_styles_cjs_namespaceObject = require("./NodeContextMenu.styles.cjs");
 const NodeContextMenu = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ menuItems, isVisible = false })=>{
     const [isOpen, setIsOpen] = (0, external_react_namespaceObject.useState)(false);
-    const anchorRef = (0, external_react_namespaceObject.useRef)(null);
-    const handleMenuOpen = (0, external_react_namespaceObject.useCallback)((event)=>{
-        event.stopPropagation();
-        event.preventDefault();
-        setIsOpen(true);
-    }, []);
-    const handleMenuClose = (0, external_react_namespaceObject.useCallback)(()=>{
-        setIsOpen(false);
-    }, []);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if (!isOpen) return;
-        const handleKeyDown = (e)=>{
-            if ('Escape' === e.key || 'Esc' === e.key) {
-                e.preventDefault();
-                e.stopPropagation();
-                setIsOpen(false);
-            }
-        };
-        const handleClickAway = (e)=>{
-            const target = e.target;
-            if (anchorRef.current?.contains(target)) return;
-            const menuElement = document.querySelector('[role="menu"]');
-            if (menuElement && !menuElement.contains(target)) setIsOpen(false);
-        };
-        window.addEventListener('keydown', handleKeyDown, true);
-        document.addEventListener('mousedown', handleClickAway);
-        return ()=>{
-            window.removeEventListener('keydown', handleKeyDown, true);
-            document.removeEventListener('mousedown', handleClickAway);
-        };
-    }, [
-        isOpen
-    ]);
     const handleMenuItemClick = (0, external_react_namespaceObject.useCallback)((item)=>{
         if (true === item.disabled) return;
         item.onClick();
-        handleMenuClose();
-    }, [
-        handleMenuClose
-    ]);
-    const transformedMenuItems = (0, external_react_namespaceObject.useMemo)(()=>menuItems?.map((item, index)=>{
-            if ('type' in item && 'divider' === item.type) return {
-                divider: true,
-                key: `divider-${index}`,
-                variant: 'separator'
-            };
-            const actionItem = item;
-            return {
-                key: actionItem.id,
-                title: actionItem.label,
-                startIcon: actionItem.icon,
-                disabled: actionItem.disabled,
-                onClick: ()=>handleMenuItemClick(actionItem),
-                variant: 'item'
-            };
-        }) || [], [
-        menuItems,
-        handleMenuItemClick
-    ]);
+        setIsOpen(false);
+    }, []);
     if (!menuItems || 0 === menuItems.length) return null;
     if (!isVisible && !isOpen) return null;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeContextMenu_styles_cjs_namespaceObject.MenuButton, {
-                $isVisible: isVisible || isOpen,
-                onClick: (e)=>e.stopPropagation(),
-                onMouseDown: (e)=>e.stopPropagation(),
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIconButton, {
-                    ref: anchorRef,
-                    size: "small",
-                    color: "secondary",
-                    onClick: handleMenuOpen,
-                    onMouseDown: (e)=>e.stopPropagation(),
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApIcon, {
-                        name: "more_vert",
-                        size: "16px"
-                    })
-                })
-            }),
-            isOpen && anchorRef.current && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ApMenu, {
-                isOpen: isOpen,
-                anchorEl: anchorRef.current,
-                menuItems: transformedMenuItems,
-                onClose: handleMenuClose
-            })
-        ]
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeContextMenu_styles_cjs_namespaceObject.MenuButton, {
+        $isVisible: isVisible || isOpen,
+        onClick: (e)=>e.stopPropagation(),
+        onMouseDown: (e)=>e.stopPropagation(),
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CanvasDropdownMenu_cjs_namespaceObject.CanvasDropdownMenu, {
+            open: isOpen,
+            onOpenChange: setIsOpen,
+            menuItems: menuItems,
+            onItemClick: handleMenuItemClick,
+            triggerAriaLabel: "Node context menu"
+        })
     });
 });
 exports.NodeContextMenu = __webpack_exports__.NodeContextMenu;

package/dist/canvas/components/NodeContextMenu/NodeContextMenu.d.ts

@@ -1,4 +1,3 @@
-import type React from 'react';
 import type { NodeContextMenuProps } from './NodeContextMenu.types';
-export declare const NodeContextMenu: React.MemoExoticComponent<({ menuItems, isVisible }: NodeContextMenuProps) => import("react/jsx-runtime").JSX.Element | null>;
+export declare const NodeContextMenu: import("react").MemoExoticComponent<({ menuItems, isVisible }: NodeContextMenuProps) => import("react/jsx-runtime").JSX.Element | null>;
 //# sourceMappingURL=NodeContextMenu.d.ts.map

package/dist/canvas/components/NodeContextMenu/NodeContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeContextMenu.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodeContextMenu/NodeContextMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,oBAAoB,EAAkB,MAAM,yBAAyB,CAAC;AAEpF,eAAO,MAAM,eAAe,uDAA2C,oBAAoB,oDA0HzF,CAAC"}
+{"version":3,"file":"NodeContextMenu.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodeContextMenu/NodeContextMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAkB,MAAM,yBAAyB,CAAC;AAEpF,eAAO,MAAM,eAAe,iEAA2C,oBAAoB,oDAkCzF,CAAC"}

package/dist/canvas/components/NodeContextMenu/NodeContextMenu.js

@@ -1,95 +1,27 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ApIcon, ApIconButton, ApMenu } from "../../../material/components/index.js";
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { memo, useCallback, useState } from "react";
+import { CanvasDropdownMenu } from "../shared/CanvasDropdownMenu.js";
 import { MenuButton } from "./NodeContextMenu.styles.js";
 const NodeContextMenu = /*#__PURE__*/ memo(({ menuItems, isVisible = false })=>{
     const [isOpen, setIsOpen] = useState(false);
-    const anchorRef = useRef(null);
-    const handleMenuOpen = useCallback((event)=>{
-        event.stopPropagation();
-        event.preventDefault();
-        setIsOpen(true);
-    }, []);
-    const handleMenuClose = useCallback(()=>{
-        setIsOpen(false);
-    }, []);
-    useEffect(()=>{
-        if (!isOpen) return;
-        const handleKeyDown = (e)=>{
-            if ('Escape' === e.key || 'Esc' === e.key) {
-                e.preventDefault();
-                e.stopPropagation();
-                setIsOpen(false);
-            }
-        };
-        const handleClickAway = (e)=>{
-            const target = e.target;
-            if (anchorRef.current?.contains(target)) return;
-            const menuElement = document.querySelector('[role="menu"]');
-            if (menuElement && !menuElement.contains(target)) setIsOpen(false);
-        };
-        window.addEventListener('keydown', handleKeyDown, true);
-        document.addEventListener('mousedown', handleClickAway);
-        return ()=>{
-            window.removeEventListener('keydown', handleKeyDown, true);
-            document.removeEventListener('mousedown', handleClickAway);
-        };
-    }, [
-        isOpen
-    ]);
     const handleMenuItemClick = useCallback((item)=>{
         if (true === item.disabled) return;
         item.onClick();
-        handleMenuClose();
-    }, [
-        handleMenuClose
-    ]);
-    const transformedMenuItems = useMemo(()=>menuItems?.map((item, index)=>{
-            if ('type' in item && 'divider' === item.type) return {
-                divider: true,
-                key: `divider-${index}`,
-                variant: 'separator'
-            };
-            const actionItem = item;
-            return {
-                key: actionItem.id,
-                title: actionItem.label,
-                startIcon: actionItem.icon,
-                disabled: actionItem.disabled,
-                onClick: ()=>handleMenuItemClick(actionItem),
-                variant: 'item'
-            };
-        }) || [], [
-        menuItems,
-        handleMenuItemClick
-    ]);
+        setIsOpen(false);
+    }, []);
     if (!menuItems || 0 === menuItems.length) return null;
     if (!isVisible && !isOpen) return null;
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx(MenuButton, {
-                $isVisible: isVisible || isOpen,
-                onClick: (e)=>e.stopPropagation(),
-                onMouseDown: (e)=>e.stopPropagation(),
-                children: /*#__PURE__*/ jsx(ApIconButton, {
-                    ref: anchorRef,
-                    size: "small",
-                    color: "secondary",
-                    onClick: handleMenuOpen,
-                    onMouseDown: (e)=>e.stopPropagation(),
-                    children: /*#__PURE__*/ jsx(ApIcon, {
-                        name: "more_vert",
-                        size: "16px"
-                    })
-                })
-            }),
-            isOpen && anchorRef.current && /*#__PURE__*/ jsx(ApMenu, {
-                isOpen: isOpen,
-                anchorEl: anchorRef.current,
-                menuItems: transformedMenuItems,
-                onClose: handleMenuClose
-            })
-        ]
+    return /*#__PURE__*/ jsx(MenuButton, {
+        $isVisible: isVisible || isOpen,
+        onClick: (e)=>e.stopPropagation(),
+        onMouseDown: (e)=>e.stopPropagation(),
+        children: /*#__PURE__*/ jsx(CanvasDropdownMenu, {
+            open: isOpen,
+            onOpenChange: setIsOpen,
+            menuItems: menuItems,
+            onItemClick: handleMenuItemClick,
+            triggerAriaLabel: "Node context menu"
+        })
     });
 });
 export { NodeContextMenu };