@uipath/apollo-react 6.44.2 → 6.45.0

package/dist/canvas/components/FloatingCanvasPanel/CanvasPanelSurface.cjs

@@ -0,0 +1,59 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __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__, {
+    CanvasPanelSurface: ()=>CanvasPanelSurface_CanvasPanelSurface,
+    CANVAS_PANEL_FLOATING_SIZE_CLASS: ()=>CANVAS_PANEL_FLOATING_SIZE_CLASS
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
+const external_react_namespaceObject = require("react");
+const external_PanelChrome_cjs_namespaceObject = require("./PanelChrome.cjs");
+const PANEL_SURFACE_CLASS = 'text-(--canvas-foreground) bg-(--canvas-background-raised) border border-(--canvas-border-de-emp) text-sm';
+const PANEL_SHELL_CLASS = 'rounded-lg future:rounded-2xl shadow-[0_4px_16px_rgba(0,0,0,0.12)]';
+const CANVAS_PANEL_FLOATING_SIZE_CLASS = 'w-auto min-w-[280px] max-w-none h-auto max-h-[600px]';
+const PANEL_PINNED_CLASS = 'rounded-none shadow-none w-[320px] min-w-[320px] max-w-[320px] h-screen max-h-screen';
+const CanvasPanelSurface_CanvasPanelSurface = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ isPinned = false, className, style, onPointerEnter, onPointerLeave, ...chromeProps }, ref) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ref: ref,
+        "data-slot": "canvas-panel-surface",
+        className: (0, apollo_wind_namespaceObject.cn)(PANEL_SURFACE_CLASS, 'flex flex-col transition-opacity duration-200 ease-in-out', isPinned ? PANEL_PINNED_CLASS : `${PANEL_SHELL_CLASS} ${CANVAS_PANEL_FLOATING_SIZE_CLASS}`, className),
+        style: style,
+        onPointerEnter: onPointerEnter,
+        onPointerLeave: onPointerLeave,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_PanelChrome_cjs_namespaceObject.PanelChrome, {
+            ...chromeProps
+        })
+    });
+});
+exports.CANVAS_PANEL_FLOATING_SIZE_CLASS = __webpack_exports__.CANVAS_PANEL_FLOATING_SIZE_CLASS;
+exports.CanvasPanelSurface = __webpack_exports__.CanvasPanelSurface;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CANVAS_PANEL_FLOATING_SIZE_CLASS",
+    "CanvasPanelSurface"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/canvas/components/FloatingCanvasPanel/CanvasPanelSurface.d.ts

@@ -0,0 +1,12 @@
+import { type CSSProperties, type PointerEventHandler } from 'react';
+import { type PanelChromeProps } from './PanelChrome';
+export declare const CANVAS_PANEL_FLOATING_SIZE_CLASS = "w-auto min-w-[280px] max-w-none h-auto max-h-[600px]";
+export interface CanvasPanelSurfaceProps extends PanelChromeProps {
+    isPinned?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    onPointerEnter?: PointerEventHandler<HTMLDivElement>;
+    onPointerLeave?: PointerEventHandler<HTMLDivElement>;
+}
+export declare const CanvasPanelSurface: import("react").ForwardRefExoticComponent<CanvasPanelSurfaceProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=CanvasPanelSurface.d.ts.map

package/dist/canvas/components/FloatingCanvasPanel/CanvasPanelSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasPanelSurface.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/CanvasPanelSurface.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAc,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACjF,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAoBnE,eAAO,MAAM,gCAAgC,yDACW,CAAC;AAOzD,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAE/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,cAAc,CAAC,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;IACrD,cAAc,CAAC,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;CACtD;AAiBD,eAAO,MAAM,kBAAkB,oHAyB9B,CAAC"}

package/dist/canvas/components/FloatingCanvasPanel/CanvasPanelSurface.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@uipath/apollo-wind";
+import { forwardRef } from "react";
+import { PanelChrome } from "./PanelChrome.js";
+const PANEL_SURFACE_CLASS = 'text-(--canvas-foreground) bg-(--canvas-background-raised) border border-(--canvas-border-de-emp) text-sm';
+const PANEL_SHELL_CLASS = 'rounded-lg future:rounded-2xl shadow-[0_4px_16px_rgba(0,0,0,0.12)]';
+const CANVAS_PANEL_FLOATING_SIZE_CLASS = 'w-auto min-w-[280px] max-w-none h-auto max-h-[600px]';
+const PANEL_PINNED_CLASS = 'rounded-none shadow-none w-[320px] min-w-[320px] max-w-[320px] h-screen max-h-screen';
+const CanvasPanelSurface_CanvasPanelSurface = /*#__PURE__*/ forwardRef(function({ isPinned = false, className, style, onPointerEnter, onPointerLeave, ...chromeProps }, ref) {
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        "data-slot": "canvas-panel-surface",
+        className: cn(PANEL_SURFACE_CLASS, 'flex flex-col transition-opacity duration-200 ease-in-out', isPinned ? PANEL_PINNED_CLASS : `${PANEL_SHELL_CLASS} ${CANVAS_PANEL_FLOATING_SIZE_CLASS}`, className),
+        style: style,
+        onPointerEnter: onPointerEnter,
+        onPointerLeave: onPointerLeave,
+        children: /*#__PURE__*/ jsx(PanelChrome, {
+            ...chromeProps
+        })
+    });
+});
+export { CANVAS_PANEL_FLOATING_SIZE_CLASS, CanvasPanelSurface_CanvasPanelSurface as CanvasPanelSurface };

package/dist/canvas/components/FloatingCanvasPanel/CanvasPortal.cjs

@@ -28,7 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const external_react_dom_namespaceObject = require("react-dom");
-const reactFlowPortalSelector = (state)=>state.domNode?.querySelector('.react-flow__renderer');
+const reactFlowPortalSelector = (state)=>state.domNode;
 function CanvasPortal({ children }) {
     const wrapperRef = (0, react_cjs_namespaceObject.useStore)(reactFlowPortalSelector);
     if (!wrapperRef) return null;

package/dist/canvas/components/FloatingCanvasPanel/CanvasPortal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasPortal.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/CanvasPortal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,sCAQ3D"}
+{"version":3,"file":"CanvasPortal.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/CanvasPortal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBvC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,sCAQ3D"}

package/dist/canvas/components/FloatingCanvasPanel/CanvasPortal.js

@@ -1,6 +1,6 @@
 import { useStore } from "../../xyflow/react.js";
 import { createPortal } from "react-dom";
-const reactFlowPortalSelector = (state)=>state.domNode?.querySelector('.react-flow__renderer');
+const reactFlowPortalSelector = (state)=>state.domNode;
 function CanvasPortal({ children }) {
     const wrapperRef = useStore(reactFlowPortalSelector);
     if (!wrapperRef) return null;

package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.cjs

@@ -28,17 +28,13 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
-const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
 const external_react_dom_namespaceObject = require("react-dom");
+const external_CanvasPanelSurface_cjs_namespaceObject = require("./CanvasPanelSurface.cjs");
 const external_CanvasPortal_cjs_namespaceObject = require("./CanvasPortal.cjs");
-const external_PanelChrome_cjs_namespaceObject = require("./PanelChrome.cjs");
 const external_useFloatingPosition_cjs_namespaceObject = require("./useFloatingPosition.cjs");
-const PANEL_BASE_CLASS = 'text-(--canvas-foreground) bg-(--canvas-background-raised) border border-(--canvas-border-de-emp) text-sm flex flex-col transition-opacity duration-200 ease-in-out';
 const PANEL_FLOATING_MAX_HEIGHT = 600;
 const PANEL_FLOATING_MIN_HEIGHT = 100;
-const PANEL_FLOATING_CLASS = 'rounded-lg shadow-[0_4px_16px_rgba(0,0,0,0.12)] w-auto min-w-[280px] max-w-none h-auto max-h-[600px]';
-const PANEL_PINNED_CLASS = 'rounded-none shadow-none w-[320px] min-w-[320px] max-w-[320px] h-screen max-h-screen';
 function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, fallbackPlacement, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, scrollableContent = true, onMouseEnter, onMouseLeave }) {
     const { computedAnchor, floatingStyles, availableHeight, refs, mergedReferenceRef } = (0, external_useFloatingPosition_cjs_namespaceObject.useFloatingPosition)({
         open,
@@ -48,9 +44,6 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
         offset,
         fallbackPlacement
     });
-    const panelClassName = (0, external_react_namespaceObject.useMemo)(()=>(0, apollo_wind_namespaceObject.cn)(PANEL_BASE_CLASS, isPinned ? PANEL_PINNED_CLASS : PANEL_FLOATING_CLASS), [
-        isPinned
-    ]);
     const sizingStyle = (0, external_react_namespaceObject.useMemo)(()=>{
         if (isPinned || null == availableHeight) return {};
         const maxHeight = Math.min(PANEL_FLOATING_MAX_HEIGHT, availableHeight);
@@ -64,6 +57,17 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
         isPinned,
         availableHeight
     ]);
+    const chromeProps = {
+        title,
+        header,
+        headerActions,
+        onClose,
+        scrollKey,
+        scrollableContent,
+        onPointerEnter: onMouseEnter,
+        onPointerLeave: onMouseLeave,
+        children
+    };
     if (!open || !computedAnchor) return null;
     if (useFixedPosition && anchorRect) {
         const getScreenSpacePosition = ()=>{
@@ -108,36 +112,27 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
             }
         };
         const screenPosition = getScreenSpacePosition();
-        const fixedContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-            className: (0, apollo_wind_namespaceObject.cn)('nodrag nopan nowheel', panelClassName),
-            onPointerEnter: onMouseEnter,
-            onPointerLeave: onMouseLeave,
+        const fixedContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPanelSurface_cjs_namespaceObject.CanvasPanelSurface, {
+            ...chromeProps,
+            isPinned: isPinned,
+            className: "nodrag nopan nowheel",
             style: {
                 position: 'fixed',
                 ...screenPosition,
                 ...sizingStyle,
                 zIndex: 1100,
                 pointerEvents: 'auto'
-            },
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_PanelChrome_cjs_namespaceObject.PanelChrome, {
-                title: title,
-                header: header,
-                headerActions: headerActions,
-                onClose: onClose,
-                scrollKey: scrollKey,
-                scrollableContent: scrollableContent,
-                children: children
-            })
+            }
         });
         return portalToBody ? /*#__PURE__*/ (0, external_react_dom_namespaceObject.createPortal)(fixedContent, document.body) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPortal_cjs_namespaceObject.CanvasPortal, {
             children: fixedContent
         });
     }
-    const panelContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+    const panelContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPanelSurface_cjs_namespaceObject.CanvasPanelSurface, {
+        ...chromeProps,
         ref: refs.setFloating,
-        className: (0, apollo_wind_namespaceObject.cn)('nodrag nopan nowheel', panelClassName),
-        onPointerEnter: onMouseEnter,
-        onPointerLeave: onMouseLeave,
+        isPinned: isPinned,
+        className: "nodrag nopan nowheel",
         style: {
             ...isPinned ? {} : floatingStyles,
             ...sizingStyle,
@@ -146,16 +141,7 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
             top: isPinned ? 0 : void 0,
             zIndex: 1100,
             pointerEvents: 'auto'
-        },
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_PanelChrome_cjs_namespaceObject.PanelChrome, {
-            title: title,
-            header: header,
-            headerActions: headerActions,
-            onClose: onClose,
-            scrollKey: scrollKey,
-            scrollableContent: scrollableContent,
-            children: children
-        })
+        }
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingCanvasPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGpD,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,uBAAuB,CAAC;AA4B7E,MAAM,MAAM,wBAAwB,GAAG;IAErC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAShB,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAOnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAM3B,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAOnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAG5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAW,EACX,iBAAiB,EACjB,QAAgB,EAChB,gBAAwB,EACxB,YAAoB,EACpB,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,iBAAwB,EACxB,YAAY,EACZ,YAAY,GACb,EAAE,wBAAwB,kDAmK1B"}
+{"version":3,"file":"FloatingCanvasPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,uBAAuB,CAAC;AAoB7E,MAAM,MAAM,wBAAwB,GAAG;IAErC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAShB,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAOnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAM3B,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAOnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAG5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAW,EACX,iBAAiB,EACjB,QAAgB,EAChB,gBAAwB,EACxB,YAAoB,EACpB,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,iBAAwB,EACxB,YAAY,EACZ,YAAY,GACb,EAAE,wBAAwB,kDAoJ1B"}

package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.js

@@ -1,16 +1,12 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ViewportPortal } from "../../xyflow/react.js";
-import { cn } from "@uipath/apollo-wind";
 import { useMemo } from "react";
 import { createPortal } from "react-dom";
+import { CanvasPanelSurface } from "./CanvasPanelSurface.js";
 import { CanvasPortal } from "./CanvasPortal.js";
-import { PanelChrome } from "./PanelChrome.js";
 import { useFloatingPosition } from "./useFloatingPosition.js";
-const PANEL_BASE_CLASS = 'text-(--canvas-foreground) bg-(--canvas-background-raised) border border-(--canvas-border-de-emp) text-sm flex flex-col transition-opacity duration-200 ease-in-out';
 const PANEL_FLOATING_MAX_HEIGHT = 600;
 const PANEL_FLOATING_MIN_HEIGHT = 100;
-const PANEL_FLOATING_CLASS = 'rounded-lg shadow-[0_4px_16px_rgba(0,0,0,0.12)] w-auto min-w-[280px] max-w-none h-auto max-h-[600px]';
-const PANEL_PINNED_CLASS = 'rounded-none shadow-none w-[320px] min-w-[320px] max-w-[320px] h-screen max-h-screen';
 function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, fallbackPlacement, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, scrollableContent = true, onMouseEnter, onMouseLeave }) {
     const { computedAnchor, floatingStyles, availableHeight, refs, mergedReferenceRef } = useFloatingPosition({
         open,
@@ -20,9 +16,6 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
         offset,
         fallbackPlacement
     });
-    const panelClassName = useMemo(()=>cn(PANEL_BASE_CLASS, isPinned ? PANEL_PINNED_CLASS : PANEL_FLOATING_CLASS), [
-        isPinned
-    ]);
     const sizingStyle = useMemo(()=>{
         if (isPinned || null == availableHeight) return {};
         const maxHeight = Math.min(PANEL_FLOATING_MAX_HEIGHT, availableHeight);
@@ -36,6 +29,17 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
         isPinned,
         availableHeight
     ]);
+    const chromeProps = {
+        title,
+        header,
+        headerActions,
+        onClose,
+        scrollKey,
+        scrollableContent,
+        onPointerEnter: onMouseEnter,
+        onPointerLeave: onMouseLeave,
+        children
+    };
     if (!open || !computedAnchor) return null;
     if (useFixedPosition && anchorRect) {
         const getScreenSpacePosition = ()=>{
@@ -80,36 +84,27 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
             }
         };
         const screenPosition = getScreenSpacePosition();
-        const fixedContent = /*#__PURE__*/ jsx("div", {
-            className: cn('nodrag nopan nowheel', panelClassName),
-            onPointerEnter: onMouseEnter,
-            onPointerLeave: onMouseLeave,
+        const fixedContent = /*#__PURE__*/ jsx(CanvasPanelSurface, {
+            ...chromeProps,
+            isPinned: isPinned,
+            className: "nodrag nopan nowheel",
             style: {
                 position: 'fixed',
                 ...screenPosition,
                 ...sizingStyle,
                 zIndex: 1100,
                 pointerEvents: 'auto'
-            },
-            children: /*#__PURE__*/ jsx(PanelChrome, {
-                title: title,
-                header: header,
-                headerActions: headerActions,
-                onClose: onClose,
-                scrollKey: scrollKey,
-                scrollableContent: scrollableContent,
-                children: children
-            })
+            }
         });
         return portalToBody ? /*#__PURE__*/ createPortal(fixedContent, document.body) : /*#__PURE__*/ jsx(CanvasPortal, {
             children: fixedContent
         });
     }
-    const panelContent = /*#__PURE__*/ jsx("div", {
+    const panelContent = /*#__PURE__*/ jsx(CanvasPanelSurface, {
+        ...chromeProps,
         ref: refs.setFloating,
-        className: cn('nodrag nopan nowheel', panelClassName),
-        onPointerEnter: onMouseEnter,
-        onPointerLeave: onMouseLeave,
+        isPinned: isPinned,
+        className: "nodrag nopan nowheel",
         style: {
             ...isPinned ? {} : floatingStyles,
             ...sizingStyle,
@@ -118,16 +113,7 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
             top: isPinned ? 0 : void 0,
             zIndex: 1100,
             pointerEvents: 'auto'
-        },
-        children: /*#__PURE__*/ jsx(PanelChrome, {
-            title: title,
-            header: header,
-            headerActions: headerActions,
-            onClose: onClose,
-            scrollKey: scrollKey,
-            scrollableContent: scrollableContent,
-            children: children
-        })
+        }
     });
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [

package/dist/canvas/components/FloatingCanvasPanel/PanelChrome.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,43 +27,12 @@ __webpack_require__.d(__webpack_exports__, {
     PanelChrome: ()=>PanelChrome
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const styled_namespaceObject = require("@emotion/styled");
-var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
 const index_cjs_namespaceObject = require("../../layouts/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 PanelHeader = styled_default().div`
-  border-bottom: 1px solid var(--canvas-border-de-emp);
-  padding: 8px 16px;
-  background-color: var(--canvas-background-raised);
-  border-radius: 8px 8px 0 0;
-  flex-shrink: 0;
-`;
-const PanelContent = styled_default().div`
-  flex: 1;
-  min-height: 0;
-  overflow-y: ${(props)=>false === props.scrollable ? 'hidden' : 'auto'};
-  overflow-x: hidden;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--canvas-background-secondary);
-    border-radius: 3px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--canvas-border);
-    border-radius: 3px;
-
-    &:hover {
-      background: var(--canvas-border-de-emp);
-    }
-  }
-`;
+const PANEL_HEADER_CLASS = 'shrink-0 rounded-t-lg border-b border-b-(--canvas-border-de-emp) bg-(--canvas-background-raised) px-4 py-2 future:rounded-t-2xl';
+const PANEL_CONTENT_CLASS = "min-h-0 flex-1 overflow-x-hidden rounded-b-lg future:rounded-b-2xl [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-(--canvas-background-secondary) [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-(--canvas-border) [&::-webkit-scrollbar-thumb:hover]:bg-(--canvas-border-de-emp)";
 function PanelChrome({ title, header, headerActions, children, onClose, scrollKey, scrollableContent = true }) {
     const contentRef = (0, external_react_namespaceObject.useRef)(null);
     (0, external_react_namespaceObject.useEffect)(()=>{
@@ -82,7 +42,8 @@ function PanelChrome({ title, header, headerActions, children, onClose, scrollKe
     ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
         children: [
-            (header || title || onClose) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PanelHeader, {
+            (header || title || onClose) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                className: PANEL_HEADER_CLASS,
                 children: header ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
                     gap: 8,
                     justify: "between",
@@ -113,9 +74,9 @@ function PanelChrome({ title, header, headerActions, children, onClose, scrollKe
                     ]
                 })
             }),
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PanelContent, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 ref: contentRef,
-                scrollable: scrollableContent,
+                className: scrollableContent ? `${PANEL_CONTENT_CLASS} overflow-y-auto` : `${PANEL_CONTENT_CLASS} overflow-y-hidden`,
                 children: children
             })
         ]

package/dist/canvas/components/FloatingCanvasPanel/PanelChrome.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelChrome.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/PanelChrome.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAsCvC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,iBAAwB,GACzB,EAAE,gBAAgB,2CAuClB"}
+{"version":3,"file":"PanelChrome.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/PanelChrome.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBvC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,iBAAwB,GACzB,EAAE,gBAAgB,2CA8ClB"}

package/dist/canvas/components/FloatingCanvasPanel/PanelChrome.js

@@ -1,40 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import styled from "@emotion/styled";
 import { Row } from "../../layouts/index.js";
 import { Button } from "@uipath/apollo-wind";
 import { useEffect, useRef } from "react";
 import { CanvasIcon } from "../../utils/icon-registry.js";
-const PanelHeader = styled.div`
-  border-bottom: 1px solid var(--canvas-border-de-emp);
-  padding: 8px 16px;
-  background-color: var(--canvas-background-raised);
-  border-radius: 8px 8px 0 0;
-  flex-shrink: 0;
-`;
-const PanelContent = styled.div`
-  flex: 1;
-  min-height: 0;
-  overflow-y: ${(props)=>false === props.scrollable ? 'hidden' : 'auto'};
-  overflow-x: hidden;
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--canvas-background-secondary);
-    border-radius: 3px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--canvas-border);
-    border-radius: 3px;
-
-    &:hover {
-      background: var(--canvas-border-de-emp);
-    }
-  }
-`;
+const PANEL_HEADER_CLASS = 'shrink-0 rounded-t-lg border-b border-b-(--canvas-border-de-emp) bg-(--canvas-background-raised) px-4 py-2 future:rounded-t-2xl';
+const PANEL_CONTENT_CLASS = "min-h-0 flex-1 overflow-x-hidden rounded-b-lg future:rounded-b-2xl [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-(--canvas-background-secondary) [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-(--canvas-border) [&::-webkit-scrollbar-thumb:hover]:bg-(--canvas-border-de-emp)";
 function PanelChrome({ title, header, headerActions, children, onClose, scrollKey, scrollableContent = true }) {
     const contentRef = useRef(null);
     useEffect(()=>{
@@ -44,7 +14,8 @@ function PanelChrome({ title, header, headerActions, children, onClose, scrollKe
     ]);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            (header || title || onClose) && /*#__PURE__*/ jsx(PanelHeader, {
+            (header || title || onClose) && /*#__PURE__*/ jsx("div", {
+                className: PANEL_HEADER_CLASS,
                 children: header ?? /*#__PURE__*/ jsxs(Row, {
                     gap: 8,
                     justify: "between",
@@ -75,9 +46,9 @@ function PanelChrome({ title, header, headerActions, children, onClose, scrollKe
                     ]
                 })
             }),
-            /*#__PURE__*/ jsx(PanelContent, {
+            /*#__PURE__*/ jsx("div", {
                 ref: contentRef,
-                scrollable: scrollableContent,
+                className: scrollableContent ? `${PANEL_CONTENT_CLASS} overflow-y-auto` : `${PANEL_CONTENT_CLASS} overflow-y-hidden`,
                 children: children
             })
         ]

package/dist/canvas/components/FloatingCanvasPanel/index.cjs

@@ -24,20 +24,27 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    FloatingCanvasPanel: ()=>external_FloatingCanvasPanel_cjs_namespaceObject.FloatingCanvasPanel,
     PanelChrome: ()=>external_PanelChrome_cjs_namespaceObject.PanelChrome,
     useFloatingPosition: ()=>external_useFloatingPosition_cjs_namespaceObject.useFloatingPosition,
+    CANVAS_PANEL_FLOATING_SIZE_CLASS: ()=>external_CanvasPanelSurface_cjs_namespaceObject.CANVAS_PANEL_FLOATING_SIZE_CLASS,
     CanvasPortal: ()=>external_CanvasPortal_cjs_namespaceObject.CanvasPortal,
-    FloatingCanvasPanel: ()=>external_FloatingCanvasPanel_cjs_namespaceObject.FloatingCanvasPanel
+    CanvasPanelSurface: ()=>external_CanvasPanelSurface_cjs_namespaceObject.CanvasPanelSurface
 });
+const external_CanvasPanelSurface_cjs_namespaceObject = require("./CanvasPanelSurface.cjs");
 const external_CanvasPortal_cjs_namespaceObject = require("./CanvasPortal.cjs");
 const external_FloatingCanvasPanel_cjs_namespaceObject = require("./FloatingCanvasPanel.cjs");
 const external_PanelChrome_cjs_namespaceObject = require("./PanelChrome.cjs");
 const external_useFloatingPosition_cjs_namespaceObject = require("./useFloatingPosition.cjs");
+exports.CANVAS_PANEL_FLOATING_SIZE_CLASS = __webpack_exports__.CANVAS_PANEL_FLOATING_SIZE_CLASS;
+exports.CanvasPanelSurface = __webpack_exports__.CanvasPanelSurface;
 exports.CanvasPortal = __webpack_exports__.CanvasPortal;
 exports.FloatingCanvasPanel = __webpack_exports__.FloatingCanvasPanel;
 exports.PanelChrome = __webpack_exports__.PanelChrome;
 exports.useFloatingPosition = __webpack_exports__.useFloatingPosition;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CANVAS_PANEL_FLOATING_SIZE_CLASS",
+    "CanvasPanelSurface",
     "CanvasPortal",
     "FloatingCanvasPanel",
     "PanelChrome",

package/dist/canvas/components/FloatingCanvasPanel/index.d.ts

@@ -1,3 +1,5 @@
+export type { CanvasPanelSurfaceProps } from './CanvasPanelSurface';
+export { CANVAS_PANEL_FLOATING_SIZE_CLASS, CanvasPanelSurface } from './CanvasPanelSurface';
 export type { CanvasPortalProps } from './CanvasPortal';
 export { CanvasPortal } from './CanvasPortal';
 export type { FloatingCanvasPanelProps } from './FloatingCanvasPanel';

package/dist/canvas/components/FloatingCanvasPanel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,UAAU,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AACpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,gCAAgC,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC5F,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,UAAU,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AACpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/canvas/components/FloatingCanvasPanel/index.js

@@ -1,5 +1,6 @@
+import { CANVAS_PANEL_FLOATING_SIZE_CLASS, CanvasPanelSurface } from "./CanvasPanelSurface.js";
 import { CanvasPortal } from "./CanvasPortal.js";
 import { FloatingCanvasPanel } from "./FloatingCanvasPanel.js";
 import { PanelChrome } from "./PanelChrome.js";
 import { useFloatingPosition } from "./useFloatingPosition.js";
-export { CanvasPortal, FloatingCanvasPanel, PanelChrome, useFloatingPosition };
+export { CANVAS_PANEL_FLOATING_SIZE_CLASS, CanvasPanelSurface, CanvasPortal, FloatingCanvasPanel, PanelChrome, useFloatingPosition };

package/dist/canvas/components/Toolbox/Header.cjs

@@ -28,9 +28,13 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const index_cjs_namespaceObject = require("../../layouts/index.cjs");
+const external_utils_index_cjs_namespaceObject = require("../../utils/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 BACK_SLOT_CLASS = 'overflow-hidden transition-[width,opacity,transform,margin] duration-300 ease-in-out';
+const BACK_SLOT_VISIBLE_CLASS = 'mr-2 w-8 translate-x-0 opacity-100';
+const BACK_SLOT_HIDDEN_CLASS = 'mr-0 w-0 translate-x-5 opacity-0';
 const Header_Header = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ title, onBack, showBackButton }) {
     const isBackButtonVisible = showBackButton && onBack;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
@@ -38,23 +42,13 @@ const Header_Header = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(fun
         align: "center",
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                style: {
-                    width: isBackButtonVisible ? '32px' : '0px',
-                    opacity: isBackButtonVisible ? 1 : 0,
-                    transform: isBackButtonVisible ? 'translateX(0)' : 'translateX(20px)',
-                    marginRight: isBackButtonVisible ? '8px' : '0px',
-                    transition: 'width 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
-                    overflow: 'hidden'
-                },
+                className: (0, external_utils_index_cjs_namespaceObject.cx)(BACK_SLOT_CLASS, isBackButtonVisible ? BACK_SLOT_VISIBLE_CLASS : BACK_SLOT_HIDDEN_CLASS),
                 children: isBackButtonVisible && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
                     variant: "ghost",
                     size: "icon",
-                    className: "h-8 w-8",
+                    className: "h-8 w-8 transition-transform duration-300 ease-in-out",
                     "aria-label": "Back",
                     onClick: onBack,
-                    style: {
-                        transition: 'transform 0.3s ease-in-out'
-                    },
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
                         icon: "chevron-left",
                         size: 20
@@ -63,10 +57,6 @@ const Header_Header = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(fun
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                 className: "text-base font-bold",
-                style: {
-                    transition: 'transform 0.3s ease-in-out, margin 0.3s ease-in-out',
-                    margin: 0
-                },
                 children: title
             })
         ]

package/dist/canvas/components/Toolbox/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Header.tsx"],"names":[],"mappings":"AAKA,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,mDA0CjB,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Header.tsx"],"names":[],"mappings":"AAMA,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AASD,eAAO,MAAM,MAAM,mDA0BjB,CAAC"}