@uipath/apollo-react 3.71.0 → 4.0.0

package/dist/canvas/components/ButtonHandle/ButtonHandle.js

@@ -1,12 +1,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { FontVariantToken } from "@uipath/apollo-core";
 import { Row } from "../../layouts/index.js";
 import { Position } from "../../xyflow/react.js";
-import { ApTypography } from "../../../material/index.js";
-import { ApIcon, ApTooltip } from "../../../material/components/index.js";
 import { AnimatePresence } from "motion/react";
 import { memo, useCallback, useMemo, useState } from "react";
 import { canvasEventBus } from "../../utils/CanvasEventBus.js";
+import { CanvasIcon } from "../../utils/icon-registry.js";
+import { CanvasTooltip } from "../CanvasTooltip.js";
 import { StyledAddButton, StyledHandle, StyledLabel, StyledLine, StyledNotch, StyledWrapper } from "./ButtonHandle.styles.js";
 import { calculateGridAlignedHandlePositions, pixelToPercent } from "./ButtonHandleStyleUtils.js";
 const AddButton = /*#__PURE__*/ memo(({ onAction })=>{
@@ -37,9 +36,9 @@ const AddButton = /*#__PURE__*/ memo(({ onAction })=>{
                 scale: 1.05
             },
             onClick: handleClick,
-            children: /*#__PURE__*/ jsx(ApIcon, {
-                name: "add",
-                size: "14px"
+            children: /*#__PURE__*/ jsx(CanvasIcon, {
+                icon: "plus",
+                size: 14
             })
         })
     });
@@ -115,10 +114,9 @@ const ButtonHandleBase = ({ id, nodeId, type, position, handleType, label, label
                     gap: 4,
                     children: [
                         labelIcon,
-                        /*#__PURE__*/ jsx(ApTypography, {
-                            color: "var(--uix-canvas-foreground-de-emp)",
-                            variant: FontVariantToken.fontSizeSBold,
-                            sx: shouldTruncateLabel ? {
+                        /*#__PURE__*/ jsx("span", {
+                            className: "text-xs font-bold text-foreground-muted",
+                            style: shouldTruncateLabel ? {
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
                                 whiteSpace: 'nowrap'
@@ -136,7 +134,7 @@ const ButtonHandleBase = ({ id, nodeId, type, position, handleType, label, label
                         $selected: selected,
                         $size: label ? '60px' : '16px'
                     }),
-                    /*#__PURE__*/ jsx(ApTooltip, {
+                    /*#__PURE__*/ jsx(CanvasTooltip, {
                         content: "Add node",
                         placement: "bottom",
                         children: /*#__PURE__*/ jsx("div", {

package/dist/canvas/components/ButtonHandle/SmartHandle.cjs

@@ -30,14 +30,12 @@ __webpack_require__.d(__webpack_exports__, {
     SmartSourceHandle: ()=>SmartSourceHandle
 });
 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 components_index_cjs_namespaceObject = require("../../../material/components/index.cjs");
 const react_namespaceObject = require("@xyflow/react");
 const external_motion_react_namespaceObject = require("motion/react");
 const external_react_namespaceObject = require("react");
 const CanvasEventBus_cjs_namespaceObject = require("../../utils/CanvasEventBus.cjs");
+const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
 const external_ButtonHandle_styles_cjs_namespaceObject = require("./ButtonHandle.styles.cjs");
 const external_ButtonHandleStyleUtils_cjs_namespaceObject = require("./ButtonHandleStyleUtils.cjs");
 const external_useButtonHandleSizeAndPosition_cjs_namespaceObject = require("./useButtonHandleSizeAndPosition.cjs");
@@ -81,9 +79,9 @@ const AddButton = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ onAc
                 scale: 1.05
             },
             onClick: handleClick,
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(components_index_cjs_namespaceObject.ApIcon, {
-                name: "add",
-                size: "14px"
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                icon: "plus",
+                size: 14
             })
         })
     });
@@ -436,9 +434,8 @@ function SmartHandle({ type, id, defaultPosition = 'source' === type ? react_nam
                         gap: 4,
                         children: [
                             labelIcon,
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTypography, {
-                                color: "var(--uix-canvas-foreground-de-emp)",
-                                variant: apollo_core_namespaceObject.FontVariantToken.fontSizeSBold,
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "text-xs font-bold text-foreground-muted",
                                 children: label
                             })
                         ]

package/dist/canvas/components/ButtonHandle/SmartHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SmartHandle.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/SmartHandle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,WAAW,EAEhB,QAAQ,EAKT,MAAM,eAAe,CAAC;AAcvB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAiBxD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAErE,eAAe,CAAC,EAAE,QAAQ,CAAC;IAE3B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IAE7C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAM9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAMlB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAuGD,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EAAE,UAAU,EACrB,UAAU,EAAE,WAAW,GACxB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CAiEA;AAyUD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,EAAE,EACF,eAAoE,EACpE,UAAmD,EACnD,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,KAAK,EACL,SAAS,EACT,oBAA+D,EAC/D,UAAkB,EAClB,QAAgB,EAChB,KAAkC,EAClC,WAAkB,EAClB,QAAQ,EACR,OAAc,EACd,WAAW,EACX,GAAG,IAAI,EACR,EAAE,gBAAgB,2CAwMlB;AASD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,2CAEtE;AAKD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,2CAEtE"}
+{"version":3,"file":"SmartHandle.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/SmartHandle.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,WAAW,EAEhB,QAAQ,EAKT,MAAM,eAAe,CAAC;AAcvB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAiBxD,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAErE,eAAe,CAAC,EAAE,QAAQ,CAAC;IAE3B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;IAE7C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAM9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAMlB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAuGD,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,EAAE,UAAU,EACrB,UAAU,EAAE,WAAW,GACxB,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CAiEA;AAyUD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,EAAE,EACF,eAAoE,EACpE,UAAmD,EACnD,KAAK,EACL,SAAS,EACT,SAAS,EACT,UAAU,EACV,KAAK,EACL,SAAS,EACT,oBAA+D,EAC/D,UAAkB,EAClB,QAAgB,EAChB,KAAkC,EAClC,WAAkB,EAClB,QAAQ,EACR,OAAc,EACd,WAAW,EACX,GAAG,IAAI,EACR,EAAE,gBAAgB,2CAmMlB;AASD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,2CAEtE;AAKD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,2CAEtE"}

package/dist/canvas/components/ButtonHandle/SmartHandle.js

@@ -1,12 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { FontVariantToken } from "@uipath/apollo-core";
 import { Row } from "../../layouts/index.js";
-import { ApTypography } from "../../../material/index.js";
-import { ApIcon } from "../../../material/components/index.js";
 import { Handle, Position, useNodeId, useStore, useUpdateNodeInternals } from "@xyflow/react";
 import { AnimatePresence } from "motion/react";
 import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { canvasEventBus } from "../../utils/CanvasEventBus.js";
+import { CanvasIcon } from "../../utils/icon-registry.js";
 import { StyledAddButton, StyledLabel, StyledLine, StyledNotch, StyledWrapper } from "./ButtonHandle.styles.js";
 import { calculateGridAlignedHandlePositions, pixelToPercent } from "./ButtonHandleStyleUtils.js";
 import { useButtonHandleSizeAndPosition } from "./useButtonHandleSizeAndPosition.js";
@@ -50,9 +48,9 @@ const AddButton = /*#__PURE__*/ memo(({ onAction })=>{
                 scale: 1.05
             },
             onClick: handleClick,
-            children: /*#__PURE__*/ jsx(ApIcon, {
-                name: "add",
-                size: "14px"
+            children: /*#__PURE__*/ jsx(CanvasIcon, {
+                icon: "plus",
+                size: 14
             })
         })
     });
@@ -405,9 +403,8 @@ function SmartHandle({ type, id, defaultPosition = 'source' === type ? Position.
                         gap: 4,
                         children: [
                             labelIcon,
-                            /*#__PURE__*/ jsx(ApTypography, {
-                                color: "var(--uix-canvas-foreground-de-emp)",
-                                variant: FontVariantToken.fontSizeSBold,
+                            /*#__PURE__*/ jsx("span", {
+                                className: "text-xs font-bold text-foreground-muted",
                                 children: label
                             })
                         ]

package/dist/canvas/components/CanvasPositionControls.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,14 +27,14 @@ __webpack_require__.d(__webpack_exports__, {
     CanvasPositionControls: ()=>CanvasPositionControls
 });
 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("../icons/index.cjs");
 const external_layouts_index_cjs_namespaceObject = require("../layouts/index.cjs");
 const react_cjs_namespaceObject = require("../xyflow/react.cjs");
-const external_material_index_cjs_namespaceObject = require("../../material/index.cjs");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
+const icon_registry_cjs_namespaceObject = require("../utils/icon-registry.cjs");
 const BaseCanvas_constants_cjs_namespaceObject = require("./BaseCanvas/BaseCanvas.constants.cjs");
+const external_CanvasTooltip_cjs_namespaceObject = require("./CanvasTooltip.cjs");
 const CanvasPositionControls = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ orientation = 'horizontal', fitViewOptions, zoomInOptions, zoomOutOptions, translations, onOrganize })=>{
     const { zoomIn, zoomOut, fitView } = (0, react_cjs_namespaceObject.useReactFlow)();
     const handleZoomIn = (0, external_react_namespaceObject.useCallback)(()=>zoomIn(zoomInOptions), [
@@ -71,48 +62,56 @@ const CanvasPositionControls = /*#__PURE__*/ (0, external_react_namespaceObject.
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(RootComponent, {
         "data-testid": "canvas-controls",
         children: [
-            showOrganize && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
+            showOrganize && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                 content: translations.organize,
                 placement: placement,
-                "data-testid": "organize-button",
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
-                    color: "secondary",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    "aria-label": translations.organize,
                     onClick: handleOrganize,
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.OrganizeIcon, {})
                 })
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                 content: translations.zoomIn,
                 placement: placement,
-                "data-testid": "zoom-in-button",
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
-                    color: "secondary",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    "aria-label": translations.zoomIn,
                     onClick: handleZoomIn,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-                        name: "add",
-                        size: apollo_core_default().Icon.IconXs
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                        icon: "plus",
+                        size: 16
                     })
                 })
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                 content: translations.zoomOut,
                 placement: placement,
-                "data-testid": "zoom-out-button",
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
-                    color: "secondary",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    "aria-label": translations.zoomOut,
                     onClick: handleZoomOut,
-                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
-                        name: "remove",
-                        size: apollo_core_default().Icon.IconXs
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
+                        icon: "minus",
+                        size: 16
                     })
                 })
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApTooltip, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
                 content: translations.zoomToFit,
                 placement: placement,
-                "data-testid": "fit-to-view-button",
-                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
-                    color: "secondary",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    "aria-label": translations.zoomToFit,
                     onClick: handleFitToView,
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.ZoomToFitIcon, {})
                 })

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

@@ -1 +1 @@
-{"version":3,"file":"CanvasPositionControls.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/CanvasPositionControls.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,6BAA6B,IAAI,qBAAqB,EAE5D,MAAM,0CAA0C,CAAC;AAGlD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAC9E,YAAY,EAAE,qBAAqB,EAAE,CAAC;AAEtC,MAAM,WAAW,2BAA2B;IAC1C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,cAAc,CAAC,EAAE,wBAAwB,CAAC;IAC1C,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,YAAY,EAAE,kBAAkB,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,sBAAsB,kIAQ9B,2BAA2B,6CA2D/B,CAAC"}
+{"version":3,"file":"CanvasPositionControls.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/CanvasPositionControls.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,6BAA6B,IAAI,qBAAqB,EAE5D,MAAM,0CAA0C,CAAC;AAGlD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAGnD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAE9E,YAAY,EAAE,qBAAqB,EAAE,CAAC;AAEtC,MAAM,WAAW,2BAA2B;IAC1C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,cAAc,CAAC,EAAE,wBAAwB,CAAC;IAC1C,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,YAAY,EAAE,kBAAkB,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,sBAAsB,kIAQ9B,2BAA2B,6CAuE/B,CAAC"}

package/dist/canvas/components/CanvasPositionControls.js

@@ -1,11 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import apollo_core from "@uipath/apollo-core";
 import { OrganizeIcon, ZoomToFitIcon } from "../icons/index.js";
 import { Column, Row } from "../layouts/index.js";
 import { useReactFlow } from "../xyflow/react.js";
-import { ApIcon, ApIconButton, ApTooltip } from "../../material/index.js";
+import { Button } from "@uipath/apollo-wind";
 import { memo, useCallback } from "react";
+import { CanvasIcon } from "../utils/icon-registry.js";
 import { BASE_CANVAS_DEFAULTS } from "./BaseCanvas/BaseCanvas.constants.js";
+import { CanvasTooltip } from "./CanvasTooltip.js";
 const CanvasPositionControls = /*#__PURE__*/ memo(({ orientation = 'horizontal', fitViewOptions, zoomInOptions, zoomOutOptions, translations, onOrganize })=>{
     const { zoomIn, zoomOut, fitView } = useReactFlow();
     const handleZoomIn = useCallback(()=>zoomIn(zoomInOptions), [
@@ -33,48 +34,56 @@ const CanvasPositionControls = /*#__PURE__*/ memo(({ orientation = 'horizontal',
     return /*#__PURE__*/ jsxs(RootComponent, {
         "data-testid": "canvas-controls",
         children: [
-            showOrganize && /*#__PURE__*/ jsx(ApTooltip, {
+            showOrganize && /*#__PURE__*/ jsx(CanvasTooltip, {
                 content: translations.organize,
                 placement: placement,
-                "data-testid": "organize-button",
-                children: /*#__PURE__*/ jsx(ApIconButton, {
-                    color: "secondary",
+                children: /*#__PURE__*/ jsx(Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    "aria-label": translations.organize,
                     onClick: handleOrganize,
                     children: /*#__PURE__*/ jsx(OrganizeIcon, {})
                 })
             }),
-            /*#__PURE__*/ jsx(ApTooltip, {
+            /*#__PURE__*/ jsx(CanvasTooltip, {
                 content: translations.zoomIn,
                 placement: placement,
-                "data-testid": "zoom-in-button",
-                children: /*#__PURE__*/ jsx(ApIconButton, {
-                    color: "secondary",
+                children: /*#__PURE__*/ jsx(Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    "aria-label": translations.zoomIn,
                     onClick: handleZoomIn,
-                    children: /*#__PURE__*/ jsx(ApIcon, {
-                        name: "add",
-                        size: apollo_core.Icon.IconXs
+                    children: /*#__PURE__*/ jsx(CanvasIcon, {
+                        icon: "plus",
+                        size: 16
                     })
                 })
             }),
-            /*#__PURE__*/ jsx(ApTooltip, {
+            /*#__PURE__*/ jsx(CanvasTooltip, {
                 content: translations.zoomOut,
                 placement: placement,
-                "data-testid": "zoom-out-button",
-                children: /*#__PURE__*/ jsx(ApIconButton, {
-                    color: "secondary",
+                children: /*#__PURE__*/ jsx(Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    "aria-label": translations.zoomOut,
                     onClick: handleZoomOut,
-                    children: /*#__PURE__*/ jsx(ApIcon, {
-                        name: "remove",
-                        size: apollo_core.Icon.IconXs
+                    children: /*#__PURE__*/ jsx(CanvasIcon, {
+                        icon: "minus",
+                        size: 16
                     })
                 })
             }),
-            /*#__PURE__*/ jsx(ApTooltip, {
+            /*#__PURE__*/ jsx(CanvasTooltip, {
                 content: translations.zoomToFit,
                 placement: placement,
-                "data-testid": "fit-to-view-button",
-                children: /*#__PURE__*/ jsx(ApIconButton, {
-                    color: "secondary",
+                children: /*#__PURE__*/ jsx(Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-8 w-8",
+                    "aria-label": translations.zoomToFit,
                     onClick: handleFitToView,
                     children: /*#__PURE__*/ jsx(ZoomToFitIcon, {})
                 })

package/dist/canvas/components/CanvasTooltip.cjs

@@ -0,0 +1,138 @@
+"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, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    CanvasTooltip: ()=>CanvasTooltip,
+    CanvasTooltipProviderMarker: ()=>CanvasTooltipProviderMarker
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const tooltip_namespaceObject = require("@uipath/apollo-wind/components/ui/tooltip");
+const external_react_namespaceObject = require("react");
+var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
+const useTruncationDetection_cjs_namespaceObject = require("../../material/components/ap-tooltip/useTruncationDetection.cjs");
+const HasTooltipProviderContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(false);
+function CanvasTooltipProviderMarker({ children }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(HasTooltipProviderContext.Provider, {
+        value: true,
+        children: children
+    });
+}
+function CanvasTooltip({ content, placement = 'top', smartTooltip = false, delay = false, isOpen, hide, children }) {
+    const childElement = (0, external_react_namespaceObject.useMemo)(()=>/*#__PURE__*/ external_react_default().isValidElement(children) ? children : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+            children: children
+        }), [
+        children
+    ]);
+    const childElementRef = (0, external_react_namespaceObject.useRef)(childElement);
+    childElementRef.current = childElement;
+    const childRef = (0, external_react_namespaceObject.useRef)(null);
+    const truncationDetection = (0, useTruncationDetection_cjs_namespaceObject.useTruncationDetection)(childRef);
+    const isTruncated = smartTooltip ? truncationDetection.isTruncated : true;
+    const [hoverOpen, setHoverOpen] = (0, external_react_namespaceObject.useState)(false);
+    const setChildRef = (0, external_react_namespaceObject.useCallback)((node)=>{
+        childRef.current = node;
+        const childRefProp = childElementRef.current.props.ref;
+        if ('function' == typeof childRefProp) childRefProp(node);
+        else if (childRefProp && 'object' == typeof childRefProp) childRefProp.current = node;
+    }, []);
+    const handleMouseEnter = (0, external_react_namespaceObject.useCallback)((e)=>{
+        truncationDetection.check();
+        const childProps = childElementRef.current.props;
+        childProps.onMouseEnter?.(e);
+    }, [
+        truncationDetection.check
+    ]);
+    const triggerWithSmartTooltipHandlers = (0, external_react_namespaceObject.useMemo)(()=>/*#__PURE__*/ external_react_default().cloneElement(childElement, {
+            ref: setChildRef,
+            onMouseEnter: handleMouseEnter
+        }), [
+        childElement,
+        setChildRef,
+        handleMouseEnter
+    ]);
+    const triggerWithHandlers = smartTooltip ? triggerWithSmartTooltipHandlers : childElement;
+    const handleOpenChange = (0, external_react_namespaceObject.useCallback)((nextOpen)=>{
+        if (nextOpen && smartTooltip) truncationDetection.check();
+        setHoverOpen(nextOpen);
+    }, [
+        smartTooltip,
+        truncationDetection.check
+    ]);
+    const isTooltipHidden = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (null != isOpen) return !isOpen;
+        if (null != hide) return hide;
+        if (smartTooltip && !isTruncated) return true;
+        return false;
+    }, [
+        isOpen,
+        hide,
+        smartTooltip,
+        isTruncated
+    ]);
+    const effectiveOpen = isTooltipHidden ? false : isOpen ?? hoverOpen;
+    const hasProvider = (0, external_react_namespaceObject.useContext)(HasTooltipProviderContext);
+    const tooltip = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tooltip_namespaceObject.Tooltip, {
+        open: effectiveOpen,
+        onOpenChange: handleOpenChange,
+        delayDuration: delay ? 700 : 200,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_namespaceObject.TooltipTrigger, {
+                asChild: true,
+                children: triggerWithHandlers
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_namespaceObject.TooltipPortal, {
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_namespaceObject.TooltipContent, {
+                    side: placement,
+                    className: "max-w-xs break-words",
+                    children: content
+                })
+            })
+        ]
+    });
+    if (hasProvider) return tooltip;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tooltip_namespaceObject.TooltipProvider, {
+        delayDuration: 200,
+        skipDelayDuration: 100,
+        children: tooltip
+    });
+}
+exports.CanvasTooltip = __webpack_exports__.CanvasTooltip;
+exports.CanvasTooltipProviderMarker = __webpack_exports__.CanvasTooltipProviderMarker;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CanvasTooltip",
+    "CanvasTooltipProviderMarker"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,14 @@
+import { type PropsWithChildren, type ReactNode } from 'react';
+export declare function CanvasTooltipProviderMarker({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+interface CanvasTooltipProps extends PropsWithChildren {
+    content: ReactNode;
+    placement?: TooltipPlacement;
+    smartTooltip?: boolean;
+    delay?: boolean;
+    isOpen?: boolean;
+    hide?: boolean;
+}
+export declare function CanvasTooltip({ content, placement, smartTooltip, delay, isOpen, hide, children, }: Readonly<CanvasTooltipProps>): import("react/jsx-runtime").JSX.Element;
+export type { CanvasTooltipProps };
+//# sourceMappingURL=CanvasTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasTooltip.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/CanvasTooltip.tsx"],"names":[],"mappings":"AAOA,OAAc,EAEZ,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AASf,wBAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAI1E;AAED,KAAK,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5D,UAAU,kBAAmB,SAAQ,iBAAiB;IAEpD,OAAO,EAAE,SAAS,CAAC;IAEnB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AASD,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,SAAiB,EACjB,YAAoB,EACpB,KAAa,EACb,MAAM,EACN,IAAI,EACJ,QAAQ,GACT,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CA2F9B;AAED,YAAY,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/canvas/components/CanvasTooltip.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "@uipath/apollo-wind/components/ui/tooltip";
+import react, { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { useTruncationDetection } from "../../material/components/ap-tooltip/useTruncationDetection.js";
+const HasTooltipProviderContext = /*#__PURE__*/ createContext(false);
+function CanvasTooltipProviderMarker({ children }) {
+    return /*#__PURE__*/ jsx(HasTooltipProviderContext.Provider, {
+        value: true,
+        children: children
+    });
+}
+function CanvasTooltip({ content, placement = 'top', smartTooltip = false, delay = false, isOpen, hide, children }) {
+    const childElement = useMemo(()=>/*#__PURE__*/ react.isValidElement(children) ? children : /*#__PURE__*/ jsx("span", {
+            children: children
+        }), [
+        children
+    ]);
+    const childElementRef = useRef(childElement);
+    childElementRef.current = childElement;
+    const childRef = useRef(null);
+    const truncationDetection = useTruncationDetection(childRef);
+    const isTruncated = smartTooltip ? truncationDetection.isTruncated : true;
+    const [hoverOpen, setHoverOpen] = useState(false);
+    const setChildRef = useCallback((node)=>{
+        childRef.current = node;
+        const childRefProp = childElementRef.current.props.ref;
+        if ('function' == typeof childRefProp) childRefProp(node);
+        else if (childRefProp && 'object' == typeof childRefProp) childRefProp.current = node;
+    }, []);
+    const handleMouseEnter = useCallback((e)=>{
+        truncationDetection.check();
+        const childProps = childElementRef.current.props;
+        childProps.onMouseEnter?.(e);
+    }, [
+        truncationDetection.check
+    ]);
+    const triggerWithSmartTooltipHandlers = useMemo(()=>/*#__PURE__*/ react.cloneElement(childElement, {
+            ref: setChildRef,
+            onMouseEnter: handleMouseEnter
+        }), [
+        childElement,
+        setChildRef,
+        handleMouseEnter
+    ]);
+    const triggerWithHandlers = smartTooltip ? triggerWithSmartTooltipHandlers : childElement;
+    const handleOpenChange = useCallback((nextOpen)=>{
+        if (nextOpen && smartTooltip) truncationDetection.check();
+        setHoverOpen(nextOpen);
+    }, [
+        smartTooltip,
+        truncationDetection.check
+    ]);
+    const isTooltipHidden = useMemo(()=>{
+        if (null != isOpen) return !isOpen;
+        if (null != hide) return hide;
+        if (smartTooltip && !isTruncated) return true;
+        return false;
+    }, [
+        isOpen,
+        hide,
+        smartTooltip,
+        isTruncated
+    ]);
+    const effectiveOpen = isTooltipHidden ? false : isOpen ?? hoverOpen;
+    const hasProvider = useContext(HasTooltipProviderContext);
+    const tooltip = /*#__PURE__*/ jsxs(Tooltip, {
+        open: effectiveOpen,
+        onOpenChange: handleOpenChange,
+        delayDuration: delay ? 700 : 200,
+        children: [
+            /*#__PURE__*/ jsx(TooltipTrigger, {
+                asChild: true,
+                children: triggerWithHandlers
+            }),
+            /*#__PURE__*/ jsx(TooltipPortal, {
+                children: /*#__PURE__*/ jsx(TooltipContent, {
+                    side: placement,
+                    className: "max-w-xs break-words",
+                    children: content
+                })
+            })
+        ]
+    });
+    if (hasProvider) return tooltip;
+    return /*#__PURE__*/ jsx(TooltipProvider, {
+        delayDuration: 200,
+        skipDelayDuration: 100,
+        children: tooltip
+    });
+}
+export { CanvasTooltip, CanvasTooltipProviderMarker };