@uipath/apollo-react 6.41.0 → 6.43.0

package/dist/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.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, {
@@ -37,113 +28,39 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
-const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
-const external_react_focus_lock_namespaceObject = require("react-focus-lock");
-var external_react_focus_lock_default = /*#__PURE__*/ __webpack_require__.n(external_react_focus_lock_namespaceObject);
-function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, className, sidebarClassName, closeOnBackdropClick = true }) {
-    const titleId = (0, external_react_namespaceObject.useId)();
-    const expandButtonRef = (0, external_react_namespaceObject.useRef)(null);
+function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded, defaultExpanded, onExpandedChange, className, sidebarClassName, closeOnBackdropClick = true }) {
     const previouslyFocusedElementRef = (0, external_react_namespaceObject.useRef)(null);
-    const [uncontrolledExpanded, setUncontrolledExpanded] = (0, external_react_namespaceObject.useState)(defaultExpanded);
-    const expanded = controlledExpanded ?? uncontrolledExpanded;
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (!open) return;
         previouslyFocusedElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-        const animationFrame = requestAnimationFrame(()=>expandButtonRef.current?.focus());
-        const handleKeyDown = (event)=>{
-            if ('Escape' === event.key) onOpenChange?.(false);
-        };
-        document.addEventListener('keydown', handleKeyDown);
         return ()=>{
-            cancelAnimationFrame(animationFrame);
-            document.removeEventListener('keydown', handleKeyDown);
             previouslyFocusedElementRef.current?.focus();
             previouslyFocusedElementRef.current = null;
         };
     }, [
-        onOpenChange,
         open
     ]);
-    if (!open) return null;
-    const setExpanded = (nextExpanded)=>{
-        if (void 0 === controlledExpanded) setUncontrolledExpanded(nextExpanded);
-        onExpandedChange?.(nextExpanded);
-    };
-    const handleBackdropClick = (event)=>{
-        if (closeOnBackdropClick && event.target === event.currentTarget) onOpenChange?.(false);
-    };
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, apollo_wind_namespaceObject.cn)('absolute inset-0 z-50 flex items-center justify-center bg-black/60', expanded ? 'p-0' : 'p-3'),
-        onMouseDown: handleBackdropClick,
-        "data-testid": "canvas-takeover-backdrop",
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_focus_lock_default(), {
-            autoFocus: false,
-            className: "contents",
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("section", {
-                role: "dialog",
-                "aria-modal": "true",
-                "aria-labelledby": titleId,
-                "data-expanded": expanded,
-                className: (0, apollo_wind_namespaceObject.cn)('flex min-h-0 flex-col overflow-hidden border border-border-subtle bg-surface-raised text-foreground shadow-xl transition-[width,height,border-radius] duration-200', expanded ? 'h-full w-full rounded-none' : 'h-[95%] w-[95%] rounded-2xl', className),
-                children: [
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("header", {
-                        className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-4",
-                        children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
-                                id: titleId,
-                                className: "min-w-0 flex-1 truncate text-sm font-semibold",
-                                children: title
-                            }),
-                            headerActions,
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                className: "-mr-1 flex shrink-0 items-center gap-1",
-                                children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-                                        ref: expandButtonRef,
-                                        type: "button",
-                                        onClick: ()=>setExpanded(!expanded),
-                                        className: "grid size-8 place-items-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
-                                        "aria-label": expanded ? 'Collapse modal' : 'Expand modal',
-                                        title: expanded ? 'Collapse modal' : 'Expand modal',
-                                        children: expanded ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Minimize2, {
-                                            size: 16,
-                                            strokeWidth: 1.75
-                                        }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Maximize2, {
-                                            size: 16,
-                                            strokeWidth: 1.75
-                                        })
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-                                        type: "button",
-                                        onClick: ()=>onOpenChange?.(false),
-                                        className: "grid size-8 place-items-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
-                                        "aria-label": "Close modal",
-                                        title: "Close modal",
-                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
-                                            size: 16,
-                                            strokeWidth: 1.75
-                                        })
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                        className: "flex min-h-0 flex-1",
-                        children: [
-                            null != sidebar && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("aside", {
-                                className: (0, apollo_wind_namespaceObject.cn)('w-64 shrink-0 overflow-auto border-r border-border-subtle', sidebarClassName),
-                                children: sidebar
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("main", {
-                                className: "min-w-0 flex-1 overflow-auto",
-                                children: children
-                            })
-                        ]
-                    })
-                ]
-            })
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Modal, {
+        open: open,
+        onOpenChange: onOpenChange,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.ModalContent, {
+            variant: "takeover",
+            headerTitle: title,
+            headerActions: headerActions,
+            sidebar: sidebar,
+            expanded: expanded,
+            defaultExpanded: defaultExpanded,
+            onExpandedChange: onExpandedChange,
+            className: className,
+            sidebarClassName: sidebarClassName,
+            closeOnBackdropClick: closeOnBackdropClick,
+            overlayTestId: "canvas-takeover-backdrop",
+            onOpenAutoFocus: (event)=>{
+                event.preventDefault();
+                event.currentTarget.querySelector('[aria-label="Expand modal"], [aria-label="Collapse modal"]')?.focus();
+            },
+            children: children
         })
     });
 }

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

@@ -13,5 +13,5 @@ export interface CanvasTakeoverModalProps {
     sidebarClassName?: string;
     closeOnBackdropClick?: boolean;
 }
-export declare function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded: controlledExpanded, defaultExpanded, onExpandedChange, className, sidebarClassName, closeOnBackdropClick, }: CanvasTakeoverModalProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded, defaultExpanded, onExpandedChange, className, sidebarClassName, closeOnBackdropClick, }: CanvasTakeoverModalProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CanvasTakeoverModal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CanvasTakeoverModal.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,EAAsC,MAAM,OAAO,CAAC;AAG5F,MAAM,WAAW,wBAAwB;IAEvC,IAAI,EAAE,OAAO,CAAC;IAEd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC,KAAK,EAAE,SAAS,CAAC;IAEjB,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,QAAQ,EAAE,SAAS,CAAC;IAEpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAMD,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,aAAa,EACb,OAAO,EACP,QAAQ,EACR,QAAQ,EAAE,kBAAkB,EAC5B,eAAuB,EACvB,gBAAgB,EAChB,SAAS,EACT,gBAAgB,EAChB,oBAA2B,GAC5B,EAAE,wBAAwB,kDA2G1B"}
+{"version":3,"file":"CanvasTakeoverModal.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAE1D,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE,SAAS,CAAC;IACjB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAGD,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,aAAa,EACb,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,SAAS,EACT,gBAAgB,EAChB,oBAA2B,GAC5B,EAAE,wBAAwB,2CAwC1B"}

package/dist/canvas/components/CanvasTakeoverModal/CanvasTakeoverModal.js

@@ -1,111 +1,38 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "@uipath/apollo-wind";
-import { Maximize2, Minimize2, X } from "lucide-react";
-import { useEffect, useId, useRef, useState } from "react";
-import react_focus_lock from "react-focus-lock";
-function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded: controlledExpanded, defaultExpanded = false, onExpandedChange, className, sidebarClassName, closeOnBackdropClick = true }) {
-    const titleId = useId();
-    const expandButtonRef = useRef(null);
+import { jsx } from "react/jsx-runtime";
+import { Modal, ModalContent } from "@uipath/apollo-wind";
+import { useEffect, useRef } from "react";
+function CanvasTakeoverModal({ open, onOpenChange, title, headerActions, sidebar, children, expanded, defaultExpanded, onExpandedChange, className, sidebarClassName, closeOnBackdropClick = true }) {
     const previouslyFocusedElementRef = useRef(null);
-    const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);
-    const expanded = controlledExpanded ?? uncontrolledExpanded;
     useEffect(()=>{
         if (!open) return;
         previouslyFocusedElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-        const animationFrame = requestAnimationFrame(()=>expandButtonRef.current?.focus());
-        const handleKeyDown = (event)=>{
-            if ('Escape' === event.key) onOpenChange?.(false);
-        };
-        document.addEventListener('keydown', handleKeyDown);
         return ()=>{
-            cancelAnimationFrame(animationFrame);
-            document.removeEventListener('keydown', handleKeyDown);
             previouslyFocusedElementRef.current?.focus();
             previouslyFocusedElementRef.current = null;
         };
     }, [
-        onOpenChange,
         open
     ]);
-    if (!open) return null;
-    const setExpanded = (nextExpanded)=>{
-        if (void 0 === controlledExpanded) setUncontrolledExpanded(nextExpanded);
-        onExpandedChange?.(nextExpanded);
-    };
-    const handleBackdropClick = (event)=>{
-        if (closeOnBackdropClick && event.target === event.currentTarget) onOpenChange?.(false);
-    };
-    return /*#__PURE__*/ jsx("div", {
-        className: cn('absolute inset-0 z-50 flex items-center justify-center bg-black/60', expanded ? 'p-0' : 'p-3'),
-        onMouseDown: handleBackdropClick,
-        "data-testid": "canvas-takeover-backdrop",
-        children: /*#__PURE__*/ jsx(react_focus_lock, {
-            autoFocus: false,
-            className: "contents",
-            children: /*#__PURE__*/ jsxs("section", {
-                role: "dialog",
-                "aria-modal": "true",
-                "aria-labelledby": titleId,
-                "data-expanded": expanded,
-                className: cn('flex min-h-0 flex-col overflow-hidden border border-border-subtle bg-surface-raised text-foreground shadow-xl transition-[width,height,border-radius] duration-200', expanded ? 'h-full w-full rounded-none' : 'h-[95%] w-[95%] rounded-2xl', className),
-                children: [
-                    /*#__PURE__*/ jsxs("header", {
-                        className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-4",
-                        children: [
-                            /*#__PURE__*/ jsx("h2", {
-                                id: titleId,
-                                className: "min-w-0 flex-1 truncate text-sm font-semibold",
-                                children: title
-                            }),
-                            headerActions,
-                            /*#__PURE__*/ jsxs("div", {
-                                className: "-mr-1 flex shrink-0 items-center gap-1",
-                                children: [
-                                    /*#__PURE__*/ jsx("button", {
-                                        ref: expandButtonRef,
-                                        type: "button",
-                                        onClick: ()=>setExpanded(!expanded),
-                                        className: "grid size-8 place-items-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
-                                        "aria-label": expanded ? 'Collapse modal' : 'Expand modal',
-                                        title: expanded ? 'Collapse modal' : 'Expand modal',
-                                        children: expanded ? /*#__PURE__*/ jsx(Minimize2, {
-                                            size: 16,
-                                            strokeWidth: 1.75
-                                        }) : /*#__PURE__*/ jsx(Maximize2, {
-                                            size: 16,
-                                            strokeWidth: 1.75
-                                        })
-                                    }),
-                                    /*#__PURE__*/ jsx("button", {
-                                        type: "button",
-                                        onClick: ()=>onOpenChange?.(false),
-                                        className: "grid size-8 place-items-center rounded-md text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
-                                        "aria-label": "Close modal",
-                                        title: "Close modal",
-                                        children: /*#__PURE__*/ jsx(X, {
-                                            size: 16,
-                                            strokeWidth: 1.75
-                                        })
-                                    })
-                                ]
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "flex min-h-0 flex-1",
-                        children: [
-                            null != sidebar && /*#__PURE__*/ jsx("aside", {
-                                className: cn('w-64 shrink-0 overflow-auto border-r border-border-subtle', sidebarClassName),
-                                children: sidebar
-                            }),
-                            /*#__PURE__*/ jsx("main", {
-                                className: "min-w-0 flex-1 overflow-auto",
-                                children: children
-                            })
-                        ]
-                    })
-                ]
-            })
+    return /*#__PURE__*/ jsx(Modal, {
+        open: open,
+        onOpenChange: onOpenChange,
+        children: /*#__PURE__*/ jsx(ModalContent, {
+            variant: "takeover",
+            headerTitle: title,
+            headerActions: headerActions,
+            sidebar: sidebar,
+            expanded: expanded,
+            defaultExpanded: defaultExpanded,
+            onExpandedChange: onExpandedChange,
+            className: className,
+            sidebarClassName: sidebarClassName,
+            closeOnBackdropClick: closeOnBackdropClick,
+            overlayTestId: "canvas-takeover-backdrop",
+            onOpenAutoFocus: (event)=>{
+                event.preventDefault();
+                event.currentTarget.querySelector('[aria-label="Expand modal"], [aria-label="Collapse modal"]')?.focus();
+            },
+            children: children
         })
     });
 }

package/dist/canvas/components/JsonTree/JsonTree.cjs

@@ -27,14 +27,91 @@ __webpack_require__.d(__webpack_exports__, {
     JsonTree: ()=>JsonTree
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const react_virtual_namespaceObject = require("@tanstack/react-virtual");
 const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
 const tooltip_namespaceObject = require("@uipath/apollo-wind/components/ui/tooltip");
 const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
+const useIsomorphicLayoutEffect_cjs_namespaceObject = require("../../hooks/useIsomorphicLayoutEffect.cjs");
 const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
 const external_buildJsonTree_cjs_namespaceObject = require("./buildJsonTree.cjs");
 const external_clipboard_cjs_namespaceObject = require("./clipboard.cjs");
 const external_JsonTreeRow_cjs_namespaceObject = require("./JsonTreeRow.cjs");
+const VIRTUAL_OVERSCAN = 10;
+function scrollMarginOf(element, scrollElement) {
+    return Math.round(element.getBoundingClientRect().top - scrollElement.getBoundingClientRect().top + scrollElement.scrollTop);
+}
+function VirtualRows({ rows, containerRef, scrollElement, pinnedPaths }) {
+    const [scrollMargin, setScrollMargin] = (0, external_react_namespaceObject.useState)(0);
+    const getItemKey = (0, external_react_namespaceObject.useCallback)((index)=>rows[index]?.node.path ?? index, [
+        rows
+    ]);
+    const virtualizer = (0, react_virtual_namespaceObject.useVirtualizer)({
+        count: rows.length,
+        getScrollElement: ()=>scrollElement ?? containerRef.current,
+        estimateSize: ()=>external_JsonTreeRow_cjs_namespaceObject.ROW_MIN_HEIGHT_PX,
+        getItemKey,
+        overscan: VIRTUAL_OVERSCAN,
+        scrollMargin
+    });
+    (0, useIsomorphicLayoutEffect_cjs_namespaceObject.useIsomorphicLayoutEffect)(()=>{
+        const container = containerRef.current;
+        if (!container || !scrollElement) {
+            if (0 !== scrollMargin) setScrollMargin(0);
+            return;
+        }
+        if (virtualizer.isScrolling) return;
+        const next = scrollMarginOf(container, scrollElement);
+        if (next !== scrollMargin) setScrollMargin(next);
+    });
+    const isPinning = pinnedPaths.length > 0;
+    const indexByPath = (0, external_react_namespaceObject.useMemo)(()=>{
+        if (!isPinning) return;
+        const byPath = new Map();
+        rows.forEach((row, index)=>byPath.set(row.node.path, index));
+        return byPath;
+    }, [
+        isPinning,
+        rows
+    ]);
+    const items = virtualizer.getVirtualItems();
+    const firstWindowed = items[0]?.index ?? -1;
+    const lastWindowed = items[items.length - 1]?.index ?? -2;
+    const pinnedItems = [];
+    if (indexByPath) for (const path of pinnedPaths){
+        const index = indexByPath.get(path);
+        if (void 0 === index || index >= firstWindowed && index <= lastWindowed) continue;
+        const measurement = virtualizer.measurementsCache[index];
+        if (measurement) pinnedItems.push(measurement);
+    }
+    const rendered = 0 === pinnedItems.length ? items : [
+        ...pinnedItems.filter((item)=>item.index < firstWindowed),
+        ...items,
+        ...pinnedItems.filter((item)=>item.index > lastWindowed)
+    ];
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "relative",
+        style: {
+            height: virtualizer.getTotalSize()
+        },
+        children: rendered.map((item)=>{
+            const row = rows[item.index];
+            if (!row) return null;
+            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                "data-index": item.index,
+                ref: virtualizer.measureElement,
+                className: "absolute top-0 left-0 w-full",
+                style: {
+                    transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`
+                },
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTreeRow_cjs_namespaceObject.JsonTreeRow, {
+                    node: row.node,
+                    depth: row.depth
+                })
+            }, item.key);
+        })
+    });
+}
 function valueAsText(node) {
     if ('string' == typeof node.value) return node.value;
     if (void 0 === node.value) return 'null';
@@ -46,12 +123,23 @@ const DefaultRowWrapper = ({ className, style, onClick, children })=>/*#__PURE__
         onClick: onClick,
         children: children
     });
-function JsonTree({ nodes, collapsed = {}, onToggleCollapsed, query, filterPredicate, readOnly = false, onEdit, rowWrapper, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions = 3, renderCodeEditor, pathForCopy, onCopy, emptyMessage, className }) {
+function JsonTree({ nodes, collapsed = {}, onToggleCollapsed, query, filterPredicate, readOnly = false, onEdit, rowWrapper, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions = 3, renderCodeEditor, pathForCopy, onCopy, virtualized = false, scrollElement, emptyMessage, className }) {
     const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
+    const containerRef = (0, external_react_namespaceObject.useRef)(null);
+    const usesAncestorScroller = virtualized && !!scrollElement;
     const RowWrapper = rowWrapper ?? DefaultRowWrapper;
     const [editingPath, setEditingPath] = (0, external_react_namespaceObject.useState)(null);
     const [jsonEditingPath, setJsonEditingPath] = (0, external_react_namespaceObject.useState)(null);
     const [wrappedPaths, setWrappedPaths] = (0, external_react_namespaceObject.useState)({});
+    const pinnedPaths = (0, external_react_namespaceObject.useMemo)(()=>[
+            ...new Set([
+                editingPath,
+                jsonEditingPath
+            ].filter((path)=>null !== path))
+        ], [
+        editingPath,
+        jsonEditingPath
+    ]);
     const [copied, setCopied] = (0, external_react_namespaceObject.useState)(null);
     const copyTimerRef = (0, external_react_namespaceObject.useRef)(null);
     (0, external_react_namespaceObject.useEffect)(()=>()=>{
@@ -140,9 +228,15 @@ function JsonTree({ nodes, collapsed = {}, onToggleCollapsed, query, filterPredi
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTreeRow_cjs_namespaceObject.JsonTreeRowContextProvider, {
                 value: rowContext,
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                    className: (0, apollo_wind_namespaceObject.cn)('h-full overflow-y-auto overflow-x-hidden', className),
+                    ref: containerRef,
+                    className: (0, apollo_wind_namespaceObject.cn)(usesAncestorScroller ? 'overflow-x-clip' : 'h-full overflow-y-auto overflow-x-hidden', virtualized && !usesAncestorScroller && 'max-h-screen', virtualized && '[overflow-anchor:none]', className),
                     children: [
-                        rows.map(({ node, depth })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTreeRow_cjs_namespaceObject.JsonTreeRow, {
+                        virtualized ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VirtualRows, {
+                            rows: rows,
+                            containerRef: containerRef,
+                            scrollElement: scrollElement,
+                            pinnedPaths: pinnedPaths
+                        }) : rows.map(({ node, depth })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTreeRow_cjs_namespaceObject.JsonTreeRow, {
                                 node: node,
                                 depth: depth
                             }, node.path)),

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

@@ -16,8 +16,10 @@ export interface JsonTreeProps {
     renderCodeEditor?: RenderCodeEditor;
     pathForCopy?: (path: string) => string;
     onCopy?: (event: CopyEvent) => void;
+    virtualized?: boolean;
+    scrollElement?: HTMLElement | null;
     emptyMessage?: string;
     className?: string;
 }
-export declare function JsonTree({ nodes, collapsed, onToggleCollapsed, query, filterPredicate, readOnly, onEdit, rowWrapper, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions, renderCodeEditor, pathForCopy, onCopy, emptyMessage, className, }: JsonTreeProps): import("react/jsx-runtime").JSX.Element;
+export declare function JsonTree({ nodes, collapsed, onToggleCollapsed, query, filterPredicate, readOnly, onEdit, rowWrapper, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions, renderCodeEditor, pathForCopy, onCopy, virtualized, scrollElement, emptyMessage, className, }: JsonTreeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=JsonTree.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"JsonTree.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/JsonTree/JsonTree.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,SAAS,EACT,mBAAmB,EACnB,cAAc,EACd,gBAAgB,EAChB,eAAe,EAChB,MAAM,kBAAkB,CAAC;AAO1B,MAAM,WAAW,aAAa;IAE5B,KAAK,EAAE,YAAY,EAAE,CAAC;IAEtB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAE3C,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC;IAElD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAMpE,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,cAAc,GAAG,SAAS,CAAC;IAElE,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC,WAAW,CAAC,EAAE,eAAe,CAAC;IAM9B,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAKlC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAEvC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAc,EACd,iBAAiB,EACjB,KAAK,EACL,eAAe,EACf,QAAgB,EAChB,MAAM,EACN,UAAU,EACV,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,EACX,gBAAoB,EACpB,gBAAgB,EAChB,WAAW,EACX,MAAM,EACN,YAAY,EACZ,SAAS,GACV,EAAE,aAAa,2CA4Hf"}
+{"version":3,"file":"JsonTree.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/JsonTree/JsonTree.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,SAAS,EACT,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,SAAS,EACT,mBAAmB,EACnB,cAAc,EACd,gBAAgB,EAChB,eAAe,EAChB,MAAM,kBAAkB,CAAC;AAQ1B,MAAM,WAAW,aAAa;IAE5B,KAAK,EAAE,YAAY,EAAE,CAAC;IAEtB,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAE3C,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC;IAElD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAMpE,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,cAAc,GAAG,SAAS,CAAC;IAElE,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC,WAAW,CAAC,EAAE,eAAe,CAAC;IAM9B,WAAW,CAAC,EAAE,mBAAmB,CAAC;IAKlC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAEvC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAQpC,WAAW,CAAC,EAAE,OAAO,CAAC;IAQtB,aAAa,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+ID,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAc,EACd,iBAAiB,EACjB,KAAK,EACL,eAAe,EACf,QAAgB,EAChB,MAAM,EACN,UAAU,EACV,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,EACX,gBAAoB,EACpB,gBAAgB,EAChB,WAAW,EACX,MAAM,EACN,WAAmB,EACnB,aAAa,EACb,YAAY,EACZ,SAAS,GACV,EAAE,aAAa,2CA4Jf"}

package/dist/canvas/components/JsonTree/JsonTree.js

@@ -1,12 +1,89 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { cn } from "@uipath/apollo-wind";
 import { TooltipProvider } from "@uipath/apollo-wind/components/ui/tooltip";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useSafeLingui } from "../../../i18n/index.js";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
 import { CanvasTooltipProviderMarker } from "../CanvasTooltip.js";
 import { flattenJsonTree } from "./buildJsonTree.js";
 import { copyTextToClipboard } from "./clipboard.js";
-import { JsonTreeRow, JsonTreeRowContextProvider } from "./JsonTreeRow.js";
+import { JsonTreeRow, JsonTreeRowContextProvider, ROW_MIN_HEIGHT_PX } from "./JsonTreeRow.js";
+const VIRTUAL_OVERSCAN = 10;
+function scrollMarginOf(element, scrollElement) {
+    return Math.round(element.getBoundingClientRect().top - scrollElement.getBoundingClientRect().top + scrollElement.scrollTop);
+}
+function VirtualRows({ rows, containerRef, scrollElement, pinnedPaths }) {
+    const [scrollMargin, setScrollMargin] = useState(0);
+    const getItemKey = useCallback((index)=>rows[index]?.node.path ?? index, [
+        rows
+    ]);
+    const virtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: ()=>scrollElement ?? containerRef.current,
+        estimateSize: ()=>ROW_MIN_HEIGHT_PX,
+        getItemKey,
+        overscan: VIRTUAL_OVERSCAN,
+        scrollMargin
+    });
+    useIsomorphicLayoutEffect(()=>{
+        const container = containerRef.current;
+        if (!container || !scrollElement) {
+            if (0 !== scrollMargin) setScrollMargin(0);
+            return;
+        }
+        if (virtualizer.isScrolling) return;
+        const next = scrollMarginOf(container, scrollElement);
+        if (next !== scrollMargin) setScrollMargin(next);
+    });
+    const isPinning = pinnedPaths.length > 0;
+    const indexByPath = useMemo(()=>{
+        if (!isPinning) return;
+        const byPath = new Map();
+        rows.forEach((row, index)=>byPath.set(row.node.path, index));
+        return byPath;
+    }, [
+        isPinning,
+        rows
+    ]);
+    const items = virtualizer.getVirtualItems();
+    const firstWindowed = items[0]?.index ?? -1;
+    const lastWindowed = items[items.length - 1]?.index ?? -2;
+    const pinnedItems = [];
+    if (indexByPath) for (const path of pinnedPaths){
+        const index = indexByPath.get(path);
+        if (void 0 === index || index >= firstWindowed && index <= lastWindowed) continue;
+        const measurement = virtualizer.measurementsCache[index];
+        if (measurement) pinnedItems.push(measurement);
+    }
+    const rendered = 0 === pinnedItems.length ? items : [
+        ...pinnedItems.filter((item)=>item.index < firstWindowed),
+        ...items,
+        ...pinnedItems.filter((item)=>item.index > lastWindowed)
+    ];
+    return /*#__PURE__*/ jsx("div", {
+        className: "relative",
+        style: {
+            height: virtualizer.getTotalSize()
+        },
+        children: rendered.map((item)=>{
+            const row = rows[item.index];
+            if (!row) return null;
+            return /*#__PURE__*/ jsx("div", {
+                "data-index": item.index,
+                ref: virtualizer.measureElement,
+                className: "absolute top-0 left-0 w-full",
+                style: {
+                    transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`
+                },
+                children: /*#__PURE__*/ jsx(JsonTreeRow, {
+                    node: row.node,
+                    depth: row.depth
+                })
+            }, item.key);
+        })
+    });
+}
 function valueAsText(node) {
     if ('string' == typeof node.value) return node.value;
     if (void 0 === node.value) return 'null';
@@ -18,12 +95,23 @@ const DefaultRowWrapper = ({ className, style, onClick, children })=>/*#__PURE__
         onClick: onClick,
         children: children
     });
-function JsonTree({ nodes, collapsed = {}, onToggleCollapsed, query, filterPredicate, readOnly = false, onEdit, rowWrapper, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions = 3, renderCodeEditor, pathForCopy, onCopy, emptyMessage, className }) {
+function JsonTree({ nodes, collapsed = {}, onToggleCollapsed, query, filterPredicate, readOnly = false, onEdit, rowWrapper, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions = 3, renderCodeEditor, pathForCopy, onCopy, virtualized = false, scrollElement, emptyMessage, className }) {
     const { _ } = useSafeLingui();
+    const containerRef = useRef(null);
+    const usesAncestorScroller = virtualized && !!scrollElement;
     const RowWrapper = rowWrapper ?? DefaultRowWrapper;
     const [editingPath, setEditingPath] = useState(null);
     const [jsonEditingPath, setJsonEditingPath] = useState(null);
     const [wrappedPaths, setWrappedPaths] = useState({});
+    const pinnedPaths = useMemo(()=>[
+            ...new Set([
+                editingPath,
+                jsonEditingPath
+            ].filter((path)=>null !== path))
+        ], [
+        editingPath,
+        jsonEditingPath
+    ]);
     const [copied, setCopied] = useState(null);
     const copyTimerRef = useRef(null);
     useEffect(()=>()=>{
@@ -112,9 +200,15 @@ function JsonTree({ nodes, collapsed = {}, onToggleCollapsed, query, filterPredi
             children: /*#__PURE__*/ jsx(JsonTreeRowContextProvider, {
                 value: rowContext,
                 children: /*#__PURE__*/ jsxs("div", {
-                    className: cn('h-full overflow-y-auto overflow-x-hidden', className),
+                    ref: containerRef,
+                    className: cn(usesAncestorScroller ? 'overflow-x-clip' : 'h-full overflow-y-auto overflow-x-hidden', virtualized && !usesAncestorScroller && 'max-h-screen', virtualized && '[overflow-anchor:none]', className),
                     children: [
-                        rows.map(({ node, depth })=>/*#__PURE__*/ jsx(JsonTreeRow, {
+                        virtualized ? /*#__PURE__*/ jsx(VirtualRows, {
+                            rows: rows,
+                            containerRef: containerRef,
+                            scrollElement: scrollElement,
+                            pinnedPaths: pinnedPaths
+                        }) : rows.map(({ node, depth })=>/*#__PURE__*/ jsx(JsonTreeRow, {
                                 node: node,
                                 depth: depth
                             }, node.path)),

package/dist/canvas/components/JsonTree/JsonTreeRow.cjs

@@ -25,7 +25,8 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     JsonTreeRowContextProvider: ()=>JsonTreeRowContextProvider,
-    JsonTreeRow: ()=>JsonTreeRow
+    JsonTreeRow: ()=>JsonTreeRow,
+    ROW_MIN_HEIGHT_PX: ()=>ROW_MIN_HEIGHT_PX
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
@@ -41,6 +42,7 @@ const external_NodeKey_cjs_namespaceObject = require("./NodeKey.cjs");
 const external_RowActions_cjs_namespaceObject = require("./RowActions.cjs");
 const external_ScalarValueCell_cjs_namespaceObject = require("./ScalarValueCell.cjs");
 const ROW_CLASS = 'group flex min-h-7 cursor-default items-center gap-1.5 py-1 pr-1 transition hover:bg-surface-overlay';
+const ROW_MIN_HEIGHT_PX = 28;
 const VALUE_CELL_CLASS = 'flex min-w-8 flex-1 items-center';
 function rowIndent(depth, extra = 0) {
     return {
@@ -345,9 +347,11 @@ function JsonTreeRow({ node, depth }) {
 }
 exports.JsonTreeRow = __webpack_exports__.JsonTreeRow;
 exports.JsonTreeRowContextProvider = __webpack_exports__.JsonTreeRowContextProvider;
+exports.ROW_MIN_HEIGHT_PX = __webpack_exports__.ROW_MIN_HEIGHT_PX;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "JsonTreeRow",
-    "JsonTreeRowContextProvider"
+    "JsonTreeRowContextProvider",
+    "ROW_MIN_HEIGHT_PX"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/canvas/components/JsonTree/JsonTreeRow.d.ts

@@ -1,4 +1,5 @@
 import type { CopyEvent, DeriveTypeIcon, JsonTreeNode, JsonTreeRowWrapper, JsonValue, NodeActionsResolver, NodeDecoration, RenderCodeEditor, RenderValueCell } from './JsonTree.types';
+export declare const ROW_MIN_HEIGHT_PX = 28;
 export interface JsonTreeRowContextValue {
     collapsed: Record<string, boolean>;
     onToggleCollapsed?: (path: string) => void;