@uipath/apollo-react 4.32.1 → 4.32.2

package/dist/canvas/components/AddNodePanel/AddNodeManager.cjs

@@ -184,6 +184,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
         nodeId: external_constants_cjs_namespaceObject.PREVIEW_NODE_ID,
         placement: "right-start",
         offset: external_constants_cjs_namespaceObject.FLOATING_CANVAS_PANEL_OFFSET,
+        scrollableContent: !!CustomPanel,
         children: CustomPanel ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(CustomPanel, {
             onNodeSelect: (item)=>handleNodeSelect(item),
             onClose: handleClose

package/dist/canvas/components/AddNodePanel/AddNodeManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddNodeManager.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodeManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAKlC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC;IAI7E,YAAY,CAAC,EAAE,OAAO,CAAC;IAIvB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAK7F,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,YAAY,CAAC,KAAK,YAAY,CAAC;IAOtE,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK;QAAE,OAAO,EAAE,IAAI,CAAC;QAAC,QAAQ,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC;IAK7F,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IAMpF,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AASD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2NxD,CAAC"}
+{"version":3,"file":"AddNodeManager.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodeManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAKlC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC;IAI7E,YAAY,CAAC,EAAE,OAAO,CAAC;IAIvB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAK7F,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,YAAY,CAAC,KAAK,YAAY,CAAC;IAOtE,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK;QAAE,OAAO,EAAE,IAAI,CAAC;QAAC,QAAQ,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC;IAK7F,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IAMpF,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AASD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8NxD,CAAC"}

package/dist/canvas/components/AddNodePanel/AddNodeManager.js

@@ -156,6 +156,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
         nodeId: PREVIEW_NODE_ID,
         placement: "right-start",
         offset: FLOATING_CANVAS_PANEL_OFFSET,
+        scrollableContent: !!CustomPanel,
         children: CustomPanel ? /*#__PURE__*/ jsx(CustomPanel, {
             onNodeSelect: (item)=>handleNodeSelect(item),
             onClose: handleClose

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

@@ -35,10 +35,12 @@ 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, onMouseEnter, onMouseLeave }) {
-    const { computedAnchor, floatingStyles, refs, mergedReferenceRef } = (0, external_useFloatingPosition_cjs_namespaceObject.useFloatingPosition)({
+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,
         nodeId,
         anchorRect,
@@ -49,6 +51,19 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
     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);
+        const occupiedHeight = Math.max(PANEL_FLOATING_MIN_HEIGHT, maxHeight);
+        return {
+            maxHeight: `${maxHeight}px`,
+            minHeight: `${PANEL_FLOATING_MIN_HEIGHT}px`,
+            ['--floating-available-height']: `${occupiedHeight}px`
+        };
+    }, [
+        isPinned,
+        availableHeight
+    ]);
     if (!open || !computedAnchor) return null;
     if (useFixedPosition && anchorRect) {
         const getScreenSpacePosition = ()=>{
@@ -100,6 +115,7 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
             style: {
                 position: 'fixed',
                 ...screenPosition,
+                ...sizingStyle,
                 zIndex: 1100,
                 pointerEvents: 'auto'
             },
@@ -109,6 +125,7 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
                 headerActions: headerActions,
                 onClose: onClose,
                 scrollKey: scrollKey,
+                scrollableContent: scrollableContent,
                 children: children
             })
         });
@@ -123,6 +140,7 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
         onPointerLeave: onMouseLeave,
         style: {
             ...isPinned ? {} : floatingStyles,
+            ...sizingStyle,
             position: isPinned ? 'fixed' : 'absolute',
             right: isPinned ? 0 : void 0,
             top: isPinned ? 0 : void 0,
@@ -135,6 +153,7 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
             headerActions: headerActions,
             onClose: onClose,
             scrollKey: scrollKey,
+            scrollableContent: scrollableContent,
             children: children
         })
     });

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

@@ -17,8 +17,9 @@ export type FloatingCanvasPanelProps = {
     children?: ReactNode;
     onClose?: () => void;
     scrollKey?: string;
+    scrollableContent?: boolean;
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
 };
-export declare function FloatingCanvasPanel({ open, nodeId, anchorRect, placement, offset, fallbackPlacement, isPinned, useFixedPosition, portalToBody, title, header, headerActions, children, onClose, scrollKey, onMouseEnter, onMouseLeave, }: FloatingCanvasPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function FloatingCanvasPanel({ open, nodeId, anchorRect, placement, offset, fallbackPlacement, isPinned, useFixedPosition, portalToBody, title, header, headerActions, children, onClose, scrollKey, scrollableContent, onMouseEnter, onMouseLeave, }: FloatingCanvasPanelProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=FloatingCanvasPanel.d.ts.map

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,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,uBAAuB,CAAC;AAW7E,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;IAGnB,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,YAAY,EACZ,YAAY,GACb,EAAE,wBAAwB,kDAgJ1B"}
+{"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"}

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

@@ -7,10 +7,12 @@ 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, onMouseEnter, onMouseLeave }) {
-    const { computedAnchor, floatingStyles, refs, mergedReferenceRef } = useFloatingPosition({
+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,
         nodeId,
         anchorRect,
@@ -21,6 +23,19 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
     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);
+        const occupiedHeight = Math.max(PANEL_FLOATING_MIN_HEIGHT, maxHeight);
+        return {
+            maxHeight: `${maxHeight}px`,
+            minHeight: `${PANEL_FLOATING_MIN_HEIGHT}px`,
+            ['--floating-available-height']: `${occupiedHeight}px`
+        };
+    }, [
+        isPinned,
+        availableHeight
+    ]);
     if (!open || !computedAnchor) return null;
     if (useFixedPosition && anchorRect) {
         const getScreenSpacePosition = ()=>{
@@ -72,6 +87,7 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
             style: {
                 position: 'fixed',
                 ...screenPosition,
+                ...sizingStyle,
                 zIndex: 1100,
                 pointerEvents: 'auto'
             },
@@ -81,6 +97,7 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
                 headerActions: headerActions,
                 onClose: onClose,
                 scrollKey: scrollKey,
+                scrollableContent: scrollableContent,
                 children: children
             })
         });
@@ -95,6 +112,7 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
         onPointerLeave: onMouseLeave,
         style: {
             ...isPinned ? {} : floatingStyles,
+            ...sizingStyle,
             position: isPinned ? 'fixed' : 'absolute',
             right: isPinned ? 0 : void 0,
             top: isPinned ? 0 : void 0,
@@ -107,6 +125,7 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
             headerActions: headerActions,
             onClose: onClose,
             scrollKey: scrollKey,
+            scrollableContent: scrollableContent,
             children: children
         })
     });

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

@@ -51,7 +51,8 @@ const PanelHeader = styled_default().div`
 `;
 const PanelContent = styled_default().div`
   flex: 1;
-  overflow-y: auto;
+  min-height: 0;
+  overflow-y: ${(props)=>false === props.scrollable ? 'hidden' : 'auto'};
   overflow-x: hidden;
 
   &::-webkit-scrollbar {
@@ -72,7 +73,7 @@ const PanelContent = styled_default().div`
     }
   }
 `;
-function PanelChrome({ title, header, headerActions, children, onClose, scrollKey }) {
+function PanelChrome({ title, header, headerActions, children, onClose, scrollKey, scrollableContent = true }) {
     const contentRef = (0, external_react_namespaceObject.useRef)(null);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (contentRef.current && scrollKey) contentRef.current.scrollTop = 0;
@@ -114,6 +115,7 @@ function PanelChrome({ title, header, headerActions, children, onClose, scrollKe
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PanelContent, {
                 ref: contentRef,
+                scrollable: scrollableContent,
                 children: children
             })
         ]

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

@@ -6,6 +6,7 @@ export interface PanelChromeProps {
     children?: ReactNode;
     onClose?: () => void;
     scrollKey?: string;
+    scrollableContent?: boolean;
 }
-export declare function PanelChrome({ title, header, headerActions, children, onClose, scrollKey, }: PanelChromeProps): import("react/jsx-runtime").JSX.Element;
+export declare function PanelChrome({ title, header, headerActions, children, onClose, scrollKey, scrollableContent, }: PanelChromeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PanelChrome.d.ts.map

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;AAqCvC,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;CACpB;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,gBAAgB,2CAqClB"}
+{"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"}

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

@@ -13,7 +13,8 @@ const PanelHeader = styled.div`
 `;
 const PanelContent = styled.div`
   flex: 1;
-  overflow-y: auto;
+  min-height: 0;
+  overflow-y: ${(props)=>false === props.scrollable ? 'hidden' : 'auto'};
   overflow-x: hidden;
 
   &::-webkit-scrollbar {
@@ -34,7 +35,7 @@ const PanelContent = styled.div`
     }
   }
 `;
-function PanelChrome({ title, header, headerActions, children, onClose, scrollKey }) {
+function PanelChrome({ title, header, headerActions, children, onClose, scrollKey, scrollableContent = true }) {
     const contentRef = useRef(null);
     useEffect(()=>{
         if (contentRef.current && scrollKey) contentRef.current.scrollTop = 0;
@@ -76,6 +77,7 @@ function PanelChrome({ title, header, headerActions, children, onClose, scrollKe
             }),
             /*#__PURE__*/ jsx(PanelContent, {
                 ref: contentRef,
+                scrollable: scrollableContent,
                 children: children
             })
         ]

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

@@ -29,9 +29,11 @@ __webpack_require__.d(__webpack_exports__, {
 const react_namespaceObject = require("@floating-ui/react");
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const external_react_namespaceObject = require("react");
+const VIEWPORT_PADDING = 8;
 function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'right-start', offset: offsetValue = 20, fallbackPlacement = 'none' }) {
     const referenceRef = (0, external_react_namespaceObject.useRef)(null);
     const internalNode = (0, react_cjs_namespaceObject.useInternalNode)(nodeId || '');
+    const [availableHeight, setAvailableHeight] = (0, external_react_namespaceObject.useState)(null);
     const computedAnchor = (0, external_react_namespaceObject.useMemo)(()=>{
         if (anchorRect) return anchorRect;
         if (!internalNode) return null;
@@ -58,6 +60,16 @@ function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'rig
             (0, react_namespaceObject.offset)(offsetValue),
             (0, react_namespaceObject.flip)({
                 fallbackAxisSideDirection: fallbackPlacement
+            }),
+            (0, react_namespaceObject.shift)({
+                padding: VIEWPORT_PADDING
+            }),
+            (0, react_namespaceObject.size)({
+                padding: VIEWPORT_PADDING,
+                apply ({ availableHeight: ah }) {
+                    const next = Math.max(0, Math.floor(ah));
+                    setAvailableHeight((prev)=>prev === next ? prev : next);
+                }
             })
         ],
         whileElementsMounted: react_namespaceObject.autoUpdate
@@ -66,6 +78,11 @@ function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'rig
         refs.setReference,
         referenceRef
     ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!open) setAvailableHeight(null);
+    }, [
+        open
+    ]);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (open) update();
     }, [
@@ -79,6 +96,7 @@ function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'rig
     return {
         computedAnchor,
         floatingStyles,
+        availableHeight,
         refs,
         mergedReferenceRef
     };

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

@@ -17,6 +17,7 @@ export interface UseFloatingPositionOptions {
 export interface UseFloatingPositionReturn {
     computedAnchor: AnchorRect | null;
     floatingStyles: CSSProperties;
+    availableHeight: number | null;
     refs: {
         setReference: RefCallback<Element>;
         setFloating: RefCallback<HTMLElement>;

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

@@ -1 +1 @@
-{"version":3,"file":"useFloatingPosition.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/useFloatingPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EAGf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,WAAW,EAA8B,MAAM,OAAO,CAAC;AAEzF,MAAM,MAAM,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjF,MAAM,WAAW,0BAA0B;IACzC,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;IAChB,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;CAC9C;AAED,MAAM,WAAW,yBAAyB;IACxC,cAAc,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,cAAc,EAAE,aAAa,CAAC;IAC9B,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QACnC,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;KACvC,CAAC;IACF,kBAAkB,EAAE,CAAC,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;CACjE;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAM,EAAE,WAAgB,EACxB,iBAA0B,GAC3B,EAAE,0BAA0B,GAAG,yBAAyB,CA8CxD"}
+{"version":3,"file":"useFloatingPosition.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/useFloatingPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EAKf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,WAAW,EAAwC,MAAM,OAAO,CAAC;AAEnG,MAAM,MAAM,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AASjF,MAAM,WAAW,0BAA0B;IACzC,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;IAChB,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;CAC9C;AAED,MAAM,WAAW,yBAAyB;IACxC,cAAc,EAAE,UAAU,GAAG,IAAI,CAAC;IAClC,cAAc,EAAE,aAAa,CAAC;IAC9B,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,IAAI,EAAE;QACJ,YAAY,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;QACnC,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;KACvC,CAAC;IACF,kBAAkB,EAAE,CAAC,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;CACjE;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAM,EAAE,WAAgB,EACxB,iBAA0B,GAC3B,EAAE,0BAA0B,GAAG,yBAAyB,CAmExD"}

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

@@ -1,9 +1,11 @@
-import { autoUpdate, flip, offset, useFloating, useMergeRefs } from "@floating-ui/react";
+import { autoUpdate, flip, offset, shift, size, useFloating, useMergeRefs } from "@floating-ui/react";
 import { useInternalNode } from "../../xyflow/react.js";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+const VIEWPORT_PADDING = 8;
 function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'right-start', offset: offsetValue = 20, fallbackPlacement = 'none' }) {
     const referenceRef = useRef(null);
     const internalNode = useInternalNode(nodeId || '');
+    const [availableHeight, setAvailableHeight] = useState(null);
     const computedAnchor = useMemo(()=>{
         if (anchorRect) return anchorRect;
         if (!internalNode) return null;
@@ -30,6 +32,16 @@ function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'rig
             offset(offsetValue),
             flip({
                 fallbackAxisSideDirection: fallbackPlacement
+            }),
+            shift({
+                padding: VIEWPORT_PADDING
+            }),
+            size({
+                padding: VIEWPORT_PADDING,
+                apply ({ availableHeight: ah }) {
+                    const next = Math.max(0, Math.floor(ah));
+                    setAvailableHeight((prev)=>prev === next ? prev : next);
+                }
             })
         ],
         whileElementsMounted: autoUpdate
@@ -38,6 +50,11 @@ function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'rig
         refs.setReference,
         referenceRef
     ]);
+    useEffect(()=>{
+        if (!open) setAvailableHeight(null);
+    }, [
+        open
+    ]);
     useEffect(()=>{
         if (open) update();
     }, [
@@ -51,6 +68,7 @@ function useFloatingPosition({ open = true, nodeId, anchorRect, placement = 'rig
     return {
         computedAnchor,
         floatingStyles,
+        availableHeight,
         refs,
         mergedReferenceRef
     };

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

@@ -428,15 +428,30 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         startTransition,
         handleBackTransition
     ]);
+    const responsiveStyle = (0, external_react_namespaceObject.useMemo)(()=>fullHeight ? {
+            boxSizing: 'border-box',
+            overflow: 'hidden'
+        } : {
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+            maxHeight: `min(${external_constants_cjs_namespaceObject.TOOLBOX_HEIGHT}px, var(--floating-available-height, ${external_constants_cjs_namespaceObject.TOOLBOX_HEIGHT}px))`
+        }, [
+        fullHeight
+    ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: containerRef,
         "data-testid": "toolbox-container",
+        style: {
+            maxHeight: '100%',
+            overflow: 'hidden'
+        },
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_layouts_index_cjs_namespaceObject.Column, {
             px: external_constants_cjs_namespaceObject.TOOLBOX_PADDING_X,
             py: external_constants_cjs_namespaceObject.TOOLBOX_PADDING_Y,
             gap: external_constants_cjs_namespaceObject.TOOLBOX_GAP,
             w: fullWidth ? '100%' : external_constants_cjs_namespaceObject.TOOLBOX_WIDTH,
             h: fullHeight ? '100%' : external_constants_cjs_namespaceObject.TOOLBOX_HEIGHT,
+            style: responsiveStyle,
             children: [
                 quickActions && quickActions.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_QuickActionsRow_cjs_namespaceObject.QuickActionsRow, {
                     actions: quickActions

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,QAAQ,EAAkD,MAAM,YAAY,CAAC;AAC3F,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AA+C7E,MAAM,MAAM,yBAAyB,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE;IACrD,eAAe,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;CAC/B,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAEhC,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,GAAG,IAAI,CAC1C,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5E,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAOnC,YAAY,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAOpC,gBAAgB,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CACjD;AAgDD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,EACP,SAAiB,EACjB,UAAkB,EAClB,YAAY,EACZ,gBAAgB,GACjB,EAAE,YAAY,CAAC,CAAC,CAAC,2CA8gBjB"}
+{"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,QAAQ,EAAkD,MAAM,YAAY,CAAC;AAC3F,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AA+C7E,MAAM,MAAM,yBAAyB,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE;IACrD,eAAe,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;CAC/B,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAEhC,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,GAAG,IAAI,CAC1C,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5E,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAOnC,YAAY,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAOpC,gBAAgB,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CACjD;AAgDD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,EACP,SAAiB,EACjB,UAAkB,EAClB,YAAY,EACZ,gBAAgB,GACjB,EAAE,YAAY,CAAC,CAAC,CAAC,2CAkiBjB"}

package/dist/canvas/components/Toolbox/Toolbox.js

@@ -400,15 +400,30 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
         startTransition,
         handleBackTransition
     ]);
+    const responsiveStyle = useMemo(()=>fullHeight ? {
+            boxSizing: 'border-box',
+            overflow: 'hidden'
+        } : {
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+            maxHeight: `min(${TOOLBOX_HEIGHT}px, var(--floating-available-height, ${TOOLBOX_HEIGHT}px))`
+        }, [
+        fullHeight
+    ]);
     return /*#__PURE__*/ jsx("div", {
         ref: containerRef,
         "data-testid": "toolbox-container",
+        style: {
+            maxHeight: '100%',
+            overflow: 'hidden'
+        },
         children: /*#__PURE__*/ jsxs(Column, {
             px: TOOLBOX_PADDING_X,
             py: TOOLBOX_PADDING_Y,
             gap: TOOLBOX_GAP,
             w: fullWidth ? '100%' : TOOLBOX_WIDTH,
             h: fullHeight ? '100%' : TOOLBOX_HEIGHT,
+            style: responsiveStyle,
             children: [
                 quickActions && quickActions.length > 0 && /*#__PURE__*/ jsx(QuickActionsRow, {
                     actions: quickActions

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

@@ -71,14 +71,14 @@ const AnimatedContainer = styled_default().div`
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  min-height: 200px;
+  min-height: 50px;
 `;
 const AnimatedContent = styled_default().div`
   flex: 1;
   display: flex;
   flex-direction: column;
   animation: ${(props)=>props.entering ? `slideIn-${props.direction}` : 'none'} 0.15s ease-out;
-  min-height: 200px;
+  min-height: 50px;
 
   @keyframes slideIn-forward {
     from {

package/dist/canvas/components/Toolbox/Toolbox.styles.js

@@ -31,14 +31,14 @@ const AnimatedContainer = styled.div`
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  min-height: 200px;
+  min-height: 50px;
 `;
 const AnimatedContent = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
   animation: ${(props)=>props.entering ? `slideIn-${props.direction}` : 'none'} 0.15s ease-out;
-  min-height: 200px;
+  min-height: 50px;
 
   @keyframes slideIn-forward {
     from {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "4.32.1",
+  "version": "4.32.2",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",