@uipath/apollo-react 4.32.0 → 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/LoopNode/IterationNavigator.cjs

@@ -29,7 +29,8 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const external_react_namespaceObject = require("react");
-const index_cjs_namespaceObject = require("../../utils/index.cjs");
+const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
+const external_utils_index_cjs_namespaceObject = require("../../utils/index.cjs");
 const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
 function resolveState(iterationState) {
     if (!Number.isFinite(iterationState.total)) return;
@@ -39,7 +40,7 @@ function resolveState(iterationState) {
     return {
         ...iterationState,
         total,
-        activeIndex: (0, index_cjs_namespaceObject.clamp)(rawActiveIndex, 0, total - 1)
+        activeIndex: (0, external_utils_index_cjs_namespaceObject.clamp)(rawActiveIndex, 0, total - 1)
     };
 }
 function stopCanvasControlEvent(event) {
@@ -53,12 +54,33 @@ function IterationNavigator({ iterationState }) {
     });
 }
 function NavigatorContent({ iterationState }) {
+    const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
     const { activeIndex, total, onActiveIndexChange, disabled, ariaLabel } = iterationState;
     const canInteract = !disabled && 'function' == typeof onActiveIndexChange;
     const canGoPrevious = canInteract && activeIndex > 0;
     const canGoNext = canInteract && activeIndex < total - 1;
-    const label = ariaLabel ?? 'Loop iteration';
+    const label = ariaLabel ?? _({
+        id: 'loop-node.iteration.label',
+        message: 'Loop iteration'
+    });
     const visibleIndex = activeIndex + 1;
+    const statusLabel = _({
+        id: 'loop-node.iteration.status',
+        message: '{label}: {visibleIndex} of {total}',
+        values: {
+            label,
+            visibleIndex,
+            total
+        }
+    });
+    const previousLabel = _({
+        id: 'loop-node.iteration.previous',
+        message: 'Previous loop iteration'
+    });
+    const nextLabel = _({
+        id: 'loop-node.iteration.next',
+        message: 'Next loop iteration'
+    });
     const handlePrevious = (0, external_react_namespaceObject.useCallback)((event)=>{
         event.stopPropagation();
         if (!canGoPrevious) return;
@@ -84,21 +106,15 @@ function NavigatorContent({ iterationState }) {
         onMouseDown: stopCanvasControlEvent,
         onDoubleClick: stopCanvasControlEvent,
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("legend", {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("legend", {
                 className: "sr-only",
-                children: [
-                    label,
-                    ": ",
-                    visibleIndex,
-                    " of ",
-                    total
-                ]
+                children: statusLabel
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
                 type: "button",
                 className: (0, apollo_wind_namespaceObject.cn)('nodrag nopan inline-flex h-4 w-4 items-center justify-center rounded-full', 'text-foreground transition-opacity', canGoPrevious ? 'cursor-pointer opacity-100' : 'cursor-not-allowed opacity-40'),
                 disabled: !canGoPrevious,
-                "aria-label": "Previous loop iteration",
+                "aria-label": previousLabel,
                 onClick: handlePrevious,
                 onPointerDown: stopCanvasControlEvent,
                 onMouseDown: stopCanvasControlEvent,
@@ -121,7 +137,7 @@ function NavigatorContent({ iterationState }) {
                 type: "button",
                 className: (0, apollo_wind_namespaceObject.cn)('nodrag nopan inline-flex h-4 w-4 items-center justify-center rounded-full', 'text-foreground transition-opacity', canGoNext ? 'cursor-pointer opacity-100' : 'cursor-not-allowed opacity-40'),
                 disabled: !canGoNext,
-                "aria-label": "Next loop iteration",
+                "aria-label": nextLabel,
                 onClick: handleNext,
                 onPointerDown: stopCanvasControlEvent,
                 onMouseDown: stopCanvasControlEvent,

package/dist/canvas/components/LoopNode/IterationNavigator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IterationNavigator.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/IterationNavigator.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,UAAU,uBAAuB;IAC/B,cAAc,EAAE,kBAAkB,CAAC;CACpC;AA4BD,wBAAgB,kBAAkB,CAAC,EAAE,cAAc,EAAE,EAAE,uBAAuB,kDAQ7E"}
+{"version":3,"file":"IterationNavigator.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/IterationNavigator.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,UAAU,uBAAuB;IAC/B,cAAc,EAAE,kBAAkB,CAAC;CACpC;AA4BD,wBAAgB,kBAAkB,CAAC,EAAE,cAAc,EAAE,EAAE,uBAAuB,kDAQ7E"}

package/dist/canvas/components/LoopNode/IterationNavigator.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@uipath/apollo-wind";
 import { useCallback } from "react";
+import { useSafeLingui } from "../../../i18n/index.js";
 import { clamp } from "../../utils/index.js";
 import { CanvasIcon } from "../../utils/icon-registry.js";
 function resolveState(iterationState) {
@@ -25,12 +26,33 @@ function IterationNavigator({ iterationState }) {
     });
 }
 function NavigatorContent({ iterationState }) {
+    const { _ } = useSafeLingui();
     const { activeIndex, total, onActiveIndexChange, disabled, ariaLabel } = iterationState;
     const canInteract = !disabled && 'function' == typeof onActiveIndexChange;
     const canGoPrevious = canInteract && activeIndex > 0;
     const canGoNext = canInteract && activeIndex < total - 1;
-    const label = ariaLabel ?? 'Loop iteration';
+    const label = ariaLabel ?? _({
+        id: 'loop-node.iteration.label',
+        message: 'Loop iteration'
+    });
     const visibleIndex = activeIndex + 1;
+    const statusLabel = _({
+        id: 'loop-node.iteration.status',
+        message: '{label}: {visibleIndex} of {total}',
+        values: {
+            label,
+            visibleIndex,
+            total
+        }
+    });
+    const previousLabel = _({
+        id: 'loop-node.iteration.previous',
+        message: 'Previous loop iteration'
+    });
+    const nextLabel = _({
+        id: 'loop-node.iteration.next',
+        message: 'Next loop iteration'
+    });
     const handlePrevious = useCallback((event)=>{
         event.stopPropagation();
         if (!canGoPrevious) return;
@@ -56,21 +78,15 @@ function NavigatorContent({ iterationState }) {
         onMouseDown: stopCanvasControlEvent,
         onDoubleClick: stopCanvasControlEvent,
         children: [
-            /*#__PURE__*/ jsxs("legend", {
+            /*#__PURE__*/ jsx("legend", {
                 className: "sr-only",
-                children: [
-                    label,
-                    ": ",
-                    visibleIndex,
-                    " of ",
-                    total
-                ]
+                children: statusLabel
             }),
             /*#__PURE__*/ jsx("button", {
                 type: "button",
                 className: cn('nodrag nopan inline-flex h-4 w-4 items-center justify-center rounded-full', 'text-foreground transition-opacity', canGoPrevious ? 'cursor-pointer opacity-100' : 'cursor-not-allowed opacity-40'),
                 disabled: !canGoPrevious,
-                "aria-label": "Previous loop iteration",
+                "aria-label": previousLabel,
                 onClick: handlePrevious,
                 onPointerDown: stopCanvasControlEvent,
                 onMouseDown: stopCanvasControlEvent,
@@ -93,7 +109,7 @@ function NavigatorContent({ iterationState }) {
                 type: "button",
                 className: cn('nodrag nopan inline-flex h-4 w-4 items-center justify-center rounded-full', 'text-foreground transition-opacity', canGoNext ? 'cursor-pointer opacity-100' : 'cursor-not-allowed opacity-40'),
                 disabled: !canGoNext,
-                "aria-label": "Next loop iteration",
+                "aria-label": nextLabel,
                 onClick: handleNext,
                 onPointerDown: stopCanvasControlEvent,
                 onMouseDown: stopCanvasControlEvent,