@uipath/apollo-wind 2.79.0 → 2.79.2

package/dist/components/ui/json-tree-view/JsonTree.cjs

@@ -31,16 +31,17 @@ const react_virtual_namespaceObject = require("@tanstack/react-virtual");
 const external_react_namespaceObject = require("react");
 const index_cjs_namespaceObject = require("../../../lib/index.cjs");
 const clipboard_cjs_namespaceObject = require("../../../lib/clipboard.cjs");
+const use_isomorphic_layout_effect_cjs_namespaceObject = require("../../../lib/use-isomorphic-layout-effect.cjs");
 const external_buildJsonTree_cjs_namespaceObject = require("./buildJsonTree.cjs");
 const external_JsonTreeRow_cjs_namespaceObject = require("./JsonTreeRow.cjs");
 const external_JsonTreeTooltip_cjs_namespaceObject = require("./JsonTreeTooltip.cjs");
 const external_strings_cjs_namespaceObject = require("./strings.cjs");
-const useIsomorphicLayoutEffect = "u" < typeof window ? external_react_namespaceObject.useEffect : external_react_namespaceObject.useLayoutEffect;
+const external_treeGrid_cjs_namespaceObject = require("./treeGrid.cjs");
 const VIRTUAL_OVERSCAN = 10;
 function scrollMarginOf(element, scrollElement) {
     return Math.round(element.getBoundingClientRect().top - scrollElement.getBoundingClientRect().top + scrollElement.scrollTop);
 }
-function VirtualRows({ rows, container, scrollElement, pinnedPaths }) {
+function VirtualRows({ rows, indexByPath, container, scrollElement, pinnedPaths, gridProps }) {
     const [scrollMargin, setScrollMargin] = (0, external_react_namespaceObject.useState)(0);
     const getItemKey = (0, external_react_namespaceObject.useCallback)((index)=>rows[index]?.node.path ?? index, [
         rows
@@ -53,7 +54,7 @@ function VirtualRows({ rows, container, scrollElement, pinnedPaths }) {
         overscan: VIRTUAL_OVERSCAN,
         scrollMargin
     });
-    useIsomorphicLayoutEffect(()=>{
+    (0, use_isomorphic_layout_effect_cjs_namespaceObject.useIsomorphicLayoutEffect)(()=>{
         if (!container || !scrollElement) {
             if (0 !== scrollMargin) setScrollMargin(0);
             return;
@@ -62,21 +63,11 @@ function VirtualRows({ rows, container, scrollElement, pinnedPaths }) {
         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();
-        for (const [index, row] of rows.entries())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){
+    for (const path of pinnedPaths){
         const index = indexByPath.get(path);
         if (void 0 === index || index >= firstWindowed && index <= lastWindowed) continue;
         const measurement = virtualizer.measurementsCache[index];
@@ -88,6 +79,7 @@ function VirtualRows({ rows, container, scrollElement, pinnedPaths }) {
         ...pinnedItems.filter((item)=>item.index > lastWindowed)
     ];
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        ...gridProps,
         className: "relative",
         style: {
             height: virtualizer.getTotalSize()
@@ -103,8 +95,8 @@ function VirtualRows({ rows, container, scrollElement, pinnedPaths }) {
                     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
+                    row: row,
+                    index: item.index
                 })
             }, item.key);
         })
@@ -130,7 +122,7 @@ function JsonTreeView({ strings, tooltipContentClassName, ...props }) {
         })
     });
 }
-function JsonTreeViewContent({ nodes, collapsed = {}, onToggleCollapsed, query, filterPredicate, readOnly = false, onEdit, rowWrapper, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions = 3, renderCodeEditor, pathForCopy, onCopy, virtualized = false, scrollElement, emptyMessage, className }) {
+function JsonTreeViewContent({ nodes, collapsed = {}, onToggleCollapsed, query, filterPredicate, readOnly = false, onEdit, rowWrapper, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions = 3, renderCodeEditor, pathForCopy, onCopy, virtualized = false, scrollElement, emptyMessage, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className }) {
     const strings = (0, external_strings_cjs_namespaceObject.useJsonTreeViewStrings)();
     const [container, setContainer] = (0, external_react_namespaceObject.useState)(null);
     const usesAncestorScroller = virtualized && !!scrollElement;
@@ -138,15 +130,6 @@ function JsonTreeViewContent({ nodes, collapsed = {}, onToggleCollapsed, query,
     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)(()=>()=>{
@@ -155,10 +138,11 @@ function JsonTreeViewContent({ nodes, collapsed = {}, onToggleCollapsed, query,
     const copy = (node, kind, text)=>{
         (0, clipboard_cjs_namespaceObject.copyTextToClipboard)(text).then((ok)=>{
             if (!ok) return;
-            setCopied({
-                path: node.path,
-                kind
-            });
+            setCopied((prev)=>({
+                    path: node.path,
+                    kind,
+                    id: (prev?.id ?? 0) + 1
+                }));
             if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
             copyTimerRef.current = setTimeout(()=>setCopied(null), 1500);
             onCopy?.({
@@ -191,6 +175,37 @@ function JsonTreeViewContent({ nodes, collapsed = {}, onToggleCollapsed, query,
         filterPredicate,
         decorateNode
     ]);
+    const indexByPath = (0, external_react_namespaceObject.useMemo)(()=>new Map(rows.map((row, index)=>[
+                row.node.path,
+                index
+            ])), [
+        rows
+    ]);
+    const { activePath, gridHandlers, trackEditor } = (0, external_treeGrid_cjs_namespaceObject.useTreeGrid)({
+        rows,
+        indexByPath,
+        collapsed,
+        toggle: onToggleCollapsed
+    });
+    const pinnedPaths = (0, external_react_namespaceObject.useMemo)(()=>[
+            ...new Set([
+                editingPath,
+                jsonEditingPath,
+                activePath
+            ].filter((path)=>null !== path))
+        ], [
+        editingPath,
+        jsonEditingPath,
+        activePath
+    ]);
+    const gridProps = {
+        ...gridHandlers,
+        role: 'treegrid',
+        'aria-label': ariaLabelledBy ? void 0 : ariaLabel ?? strings.treeLabel,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-readonly': !canEdit || void 0,
+        'aria-rowcount': rows.length
+    };
     const templateItemLabel = strings.arrayItem;
     const filtering = !!query?.trim() || !!filterPredicate;
     const resolvedEmptyMessage = filtering ? strings.emptySearch : emptyMessage ?? strings.emptyDefault;
@@ -212,8 +227,9 @@ function JsonTreeViewContent({ nodes, collapsed = {}, onToggleCollapsed, query,
         jsonEditingPath,
         wrappedPaths,
         copied,
-        setEditingPath,
-        setJsonEditingPath,
+        activePath,
+        setEditingPath: trackEditor('leaf', setEditingPath),
+        setJsonEditingPath: trackEditor('json', setJsonEditingPath),
         copyPath,
         copyValue,
         toggleWrapped,
@@ -226,15 +242,27 @@ function JsonTreeViewContent({ nodes, collapsed = {}, onToggleCollapsed, query,
                 ref: setContainer,
                 className: (0, index_cjs_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: [
-                    virtualized ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VirtualRows, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        role: "status",
+                        className: "sr-only",
+                        children: copied && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            children: 'path' === copied.kind ? strings.pathCopied : strings.valueCopied
+                        }, copied.id)
+                    }),
+                    rows.length > 0 && (virtualized ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(VirtualRows, {
                         rows: rows,
+                        indexByPath: indexByPath,
                         container: container,
                         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)),
+                        pinnedPaths: pinnedPaths,
+                        gridProps: gridProps
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        ...gridProps,
+                        children: rows.map((row, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTreeRow_cjs_namespaceObject.JsonTreeRow, {
+                                row: row,
+                                index: index
+                            }, row.node.path))
+                    })),
                     0 === rows.length && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                         className: "p-4 text-center text-xs text-foreground-subtle",
                         children: resolvedEmptyMessage

package/dist/components/ui/json-tree-view/JsonTree.d.ts

@@ -51,7 +51,8 @@ export interface JsonTreeViewProps {
      * for values with thousands of fields. Rows are measured, so wrapped values
      * and inline editors keep their height. The tree scrolls inside its own box,
      * capped at the viewport height, unless `scrollElement` names the scroller.
-     * Off by default.
+     * Also keeps arrow-key navigation quick in large trees, since each focus move
+     * re-renders the mounted rows. Off by default.
      */
     virtualized?: boolean;
     /**
@@ -70,6 +71,10 @@ export interface JsonTreeViewProps {
     strings?: Partial<JsonTreeViewStrings>;
     /** Extra classes for every tooltip panel (e.g. a z-index above a host's overlays). */
     tooltipContentClassName?: string;
+    /** Accessible name of the tree grid. Defaults to the `treeLabel` string. */
+    'aria-label'?: string;
+    /** Id of a visible heading naming the tree grid; takes precedence over `aria-label`. */
+    'aria-labelledby'?: string;
     className?: string;
 }
 /**

package/dist/components/ui/json-tree-view/JsonTree.js

@@ -1,18 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { cn } from "../../../lib/index.js";
 import { copyTextToClipboard } from "../../../lib/clipboard.js";
+import { useIsomorphicLayoutEffect } from "../../../lib/use-isomorphic-layout-effect.js";
 import { flattenJsonTree } from "./buildJsonTree.js";
 import { JsonTreeRow, JsonTreeRowContextProvider, ROW_MIN_HEIGHT_PX } from "./JsonTreeRow.js";
 import { JsonTreeTooltipProvider } from "./JsonTreeTooltip.js";
 import { JsonTreeViewProvider, useJsonTreeViewStrings } from "./strings.js";
-const useIsomorphicLayoutEffect = "u" < typeof window ? useEffect : useLayoutEffect;
+import { useTreeGrid } from "./treeGrid.js";
 const VIRTUAL_OVERSCAN = 10;
 function scrollMarginOf(element, scrollElement) {
     return Math.round(element.getBoundingClientRect().top - scrollElement.getBoundingClientRect().top + scrollElement.scrollTop);
 }
-function VirtualRows({ rows, container, scrollElement, pinnedPaths }) {
+function VirtualRows({ rows, indexByPath, container, scrollElement, pinnedPaths, gridProps }) {
     const [scrollMargin, setScrollMargin] = useState(0);
     const getItemKey = useCallback((index)=>rows[index]?.node.path ?? index, [
         rows
@@ -34,21 +35,11 @@ function VirtualRows({ rows, container, scrollElement, pinnedPaths }) {
         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();
-        for (const [index, row] of rows.entries())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){
+    for (const path of pinnedPaths){
         const index = indexByPath.get(path);
         if (void 0 === index || index >= firstWindowed && index <= lastWindowed) continue;
         const measurement = virtualizer.measurementsCache[index];
@@ -60,6 +51,7 @@ function VirtualRows({ rows, container, scrollElement, pinnedPaths }) {
         ...pinnedItems.filter((item)=>item.index > lastWindowed)
     ];
     return /*#__PURE__*/ jsx("div", {
+        ...gridProps,
         className: "relative",
         style: {
             height: virtualizer.getTotalSize()
@@ -75,8 +67,8 @@ function VirtualRows({ rows, container, scrollElement, pinnedPaths }) {
                     transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`
                 },
                 children: /*#__PURE__*/ jsx(JsonTreeRow, {
-                    node: row.node,
-                    depth: row.depth
+                    row: row,
+                    index: item.index
                 })
             }, item.key);
         })
@@ -102,7 +94,7 @@ function JsonTreeView({ strings, tooltipContentClassName, ...props }) {
         })
     });
 }
-function JsonTreeViewContent({ nodes, collapsed = {}, onToggleCollapsed, query, filterPredicate, readOnly = false, onEdit, rowWrapper, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions = 3, renderCodeEditor, pathForCopy, onCopy, virtualized = false, scrollElement, emptyMessage, className }) {
+function JsonTreeViewContent({ nodes, collapsed = {}, onToggleCollapsed, query, filterPredicate, readOnly = false, onEdit, rowWrapper, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions = 3, renderCodeEditor, pathForCopy, onCopy, virtualized = false, scrollElement, emptyMessage, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className }) {
     const strings = useJsonTreeViewStrings();
     const [container, setContainer] = useState(null);
     const usesAncestorScroller = virtualized && !!scrollElement;
@@ -110,15 +102,6 @@ function JsonTreeViewContent({ nodes, collapsed = {}, onToggleCollapsed, query,
     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(()=>()=>{
@@ -127,10 +110,11 @@ function JsonTreeViewContent({ nodes, collapsed = {}, onToggleCollapsed, query,
     const copy = (node, kind, text)=>{
         copyTextToClipboard(text).then((ok)=>{
             if (!ok) return;
-            setCopied({
-                path: node.path,
-                kind
-            });
+            setCopied((prev)=>({
+                    path: node.path,
+                    kind,
+                    id: (prev?.id ?? 0) + 1
+                }));
             if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
             copyTimerRef.current = setTimeout(()=>setCopied(null), 1500);
             onCopy?.({
@@ -163,6 +147,37 @@ function JsonTreeViewContent({ nodes, collapsed = {}, onToggleCollapsed, query,
         filterPredicate,
         decorateNode
     ]);
+    const indexByPath = useMemo(()=>new Map(rows.map((row, index)=>[
+                row.node.path,
+                index
+            ])), [
+        rows
+    ]);
+    const { activePath, gridHandlers, trackEditor } = useTreeGrid({
+        rows,
+        indexByPath,
+        collapsed,
+        toggle: onToggleCollapsed
+    });
+    const pinnedPaths = useMemo(()=>[
+            ...new Set([
+                editingPath,
+                jsonEditingPath,
+                activePath
+            ].filter((path)=>null !== path))
+        ], [
+        editingPath,
+        jsonEditingPath,
+        activePath
+    ]);
+    const gridProps = {
+        ...gridHandlers,
+        role: 'treegrid',
+        'aria-label': ariaLabelledBy ? void 0 : ariaLabel ?? strings.treeLabel,
+        'aria-labelledby': ariaLabelledBy,
+        'aria-readonly': !canEdit || void 0,
+        'aria-rowcount': rows.length
+    };
     const templateItemLabel = strings.arrayItem;
     const filtering = !!query?.trim() || !!filterPredicate;
     const resolvedEmptyMessage = filtering ? strings.emptySearch : emptyMessage ?? strings.emptyDefault;
@@ -184,8 +199,9 @@ function JsonTreeViewContent({ nodes, collapsed = {}, onToggleCollapsed, query,
         jsonEditingPath,
         wrappedPaths,
         copied,
-        setEditingPath,
-        setJsonEditingPath,
+        activePath,
+        setEditingPath: trackEditor('leaf', setEditingPath),
+        setJsonEditingPath: trackEditor('json', setJsonEditingPath),
         copyPath,
         copyValue,
         toggleWrapped,
@@ -198,15 +214,27 @@ function JsonTreeViewContent({ nodes, collapsed = {}, onToggleCollapsed, query,
                 ref: setContainer,
                 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: [
-                    virtualized ? /*#__PURE__*/ jsx(VirtualRows, {
+                    /*#__PURE__*/ jsx("span", {
+                        role: "status",
+                        className: "sr-only",
+                        children: copied && /*#__PURE__*/ jsx("span", {
+                            children: 'path' === copied.kind ? strings.pathCopied : strings.valueCopied
+                        }, copied.id)
+                    }),
+                    rows.length > 0 && (virtualized ? /*#__PURE__*/ jsx(VirtualRows, {
                         rows: rows,
+                        indexByPath: indexByPath,
                         container: container,
                         scrollElement: scrollElement,
-                        pinnedPaths: pinnedPaths
-                    }) : rows.map(({ node, depth })=>/*#__PURE__*/ jsx(JsonTreeRow, {
-                            node: node,
-                            depth: depth
-                        }, node.path)),
+                        pinnedPaths: pinnedPaths,
+                        gridProps: gridProps
+                    }) : /*#__PURE__*/ jsx("div", {
+                        ...gridProps,
+                        children: rows.map((row, index)=>/*#__PURE__*/ jsx(JsonTreeRow, {
+                                row: row,
+                                index: index
+                            }, row.node.path))
+                    })),
                     0 === rows.length && /*#__PURE__*/ jsx("span", {
                         className: "p-4 text-center text-xs text-foreground-subtle",
                         children: resolvedEmptyMessage

package/dist/components/ui/json-tree-view/JsonTree.types.d.ts

@@ -248,9 +248,14 @@ export interface JsonTreeChange {
     previous?: JsonValue;
 }
 /**
- * Props passed to a custom row container. The wrapper IS the row element:
+ * Props passed to a custom row container. The wrapper is the row's visual line:
  * render a single container applying `className`/`style` and `children`
  * verbatim, plus whatever behavior you attach (e.g. dnd-kit drag listeners).
+ *
+ * It renders inside the tree grid's `row` element, which owns the row's role
+ * and keyboard focus, so don't give the wrapper a role or tabindex. dnd-kit's
+ * `attributes` add both (`role="button"`, `tabIndex={0}`); spread only its
+ * `listeners`.
  */
 export interface JsonTreeRowWrapperProps {
     node: JsonTreeNode;