@uipath/apollo-wind 2.78.0 → 2.79.1

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;

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

@@ -29,11 +29,10 @@ __webpack_require__.d(__webpack_exports__, {
     ROW_MIN_HEIGHT_PX: ()=>ROW_MIN_HEIGHT_PX
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const index_cjs_namespaceObject = require("../../../lib/index.cjs");
-const external_label_cjs_namespaceObject = require("../label.cjs");
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
-const external_strings_cjs_namespaceObject = require("./strings.cjs");
+const external_label_cjs_namespaceObject = require("../label.cjs");
+const index_cjs_namespaceObject = require("../../../lib/index.cjs");
 const external_buildJsonTree_cjs_namespaceObject = require("./buildJsonTree.cjs");
 const external_DecorationChip_cjs_namespaceObject = require("./DecorationChip.cjs");
 const external_JsonContainerEditor_cjs_namespaceObject = require("./JsonContainerEditor.cjs");
@@ -42,15 +41,30 @@ const external_JsonTypeBadge_cjs_namespaceObject = require("./JsonTypeBadge.cjs"
 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 external_strings_cjs_namespaceObject = require("./strings.cjs");
+const external_treeGrid_cjs_namespaceObject = require("./treeGrid.cjs");
 const ROW_CLASS = 'group flex min-h-7 cursor-default items-center gap-2 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';
+const NAME_CELL_CLASS = 'flex min-w-0 max-w-1/2 items-center gap-2';
+const FOCUS_RING_CLASS = 'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring';
+const ROW_ELEMENT_CLASS = `group/row ${FOCUS_RING_CLASS}`;
 function rowIndent(depth, extra = 0) {
     return {
         paddingLeft: `${8 + 16 * depth + extra}px`
     };
 }
 const KEY_ALIGN_OFFSET = 44;
+function GridCell({ cell, editing = false, className, ...props }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        role: "gridcell",
+        "data-cell": cell,
+        tabIndex: -1,
+        "data-json-tree-editor": editing ? '' : void 0,
+        className: (0, index_cjs_namespaceObject.cn)(FOCUS_RING_CLASS, className),
+        ...props
+    });
+}
 const JsonTreeRowContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(null);
 const JsonTreeRowContextProvider = JsonTreeRowContext.Provider;
 function useJsonTreeRowContext() {
@@ -58,9 +72,11 @@ function useJsonTreeRowContext() {
     if (!ctx) throw new Error('JsonTreeRow must be rendered inside a JsonTreeRowContext provider');
     return ctx;
 }
-function JsonTreeRow({ node, depth }) {
+function JsonTreeRow({ row, index }) {
+    const { node, depth } = row;
     const strings = (0, external_strings_cjs_namespaceObject.useJsonTreeViewStrings)();
-    const { collapsed, onToggleCollapsed, readOnly, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions, renderCodeEditor, pathForCopy, canEdit, RowWrapper, templateItemLabel, editingPath, jsonEditingPath, wrappedPaths, copied, setEditingPath, setJsonEditingPath, copyPath, copyValue, toggleWrapped, commitEdit } = useJsonTreeRowContext();
+    const { collapsed, onToggleCollapsed, readOnly, decorateNode, deriveTypeIcon, renderValue, nodeActions, maxInlineActions, renderCodeEditor, pathForCopy, canEdit, RowWrapper, templateItemLabel, editingPath, jsonEditingPath, wrappedPaths, copied, activePath, setEditingPath, setJsonEditingPath, copyPath, copyValue, toggleWrapped, commitEdit } = useJsonTreeRowContext();
+    const isTabStop = activePath === node.path;
     const buildDefaultActions = (node, flags)=>{
         const actions = [];
         if (flags.wrappable) actions.push({
@@ -127,7 +143,20 @@ function JsonTreeRow({ node, depth }) {
         if (event.target.closest('button, a, input, textarea, select, [contenteditable="true"]')) return;
         onToggleCollapsed?.(node.path);
     };
+    const collapsedHere = isContainer && (0, external_buildJsonTree_cjs_namespaceObject.isPathCollapsed)(collapsed, node.path);
+    const editingInline = editingPath === node.path && !wrapped;
+    const showsValue = !isContainer && !wrapped && !decoration?.hideValue && (null != customCell || !(readOnly && void 0 === node.value || isTemplate));
+    const editingDetail = wrapped && editingPath === node.path && canEdit || isContainer && jsonEditingPath === node.path;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        role: "row",
+        "data-path": node.path,
+        tabIndex: isTabStop ? 0 : -1,
+        "aria-level": depth + 1,
+        "aria-posinset": row.posInSet,
+        "aria-setsize": row.setSize,
+        "aria-rowindex": index + 1,
+        "aria-expanded": (0, external_treeGrid_cjs_namespaceObject.isParentRow)(row) ? !collapsedHere : void 0,
+        className: ROW_ELEMENT_CLASS,
         children: [
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(RowWrapper, {
                 node: node,
@@ -135,48 +164,56 @@ function JsonTreeRow({ node, depth }) {
                 style: rowIndent(depth),
                 onClick: rowClickable ? handleRowClick : void 0,
                 children: [
-                    isContainer ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-                        type: "button",
-                        onClick: ()=>onToggleCollapsed?.(node.path),
-                        disabled: !onToggleCollapsed,
-                        "aria-label": (0, external_buildJsonTree_cjs_namespaceObject.isPathCollapsed)(collapsed, node.path) ? strings.expandKey(node.key) : strings.collapseKey(node.key),
-                        "aria-expanded": !(0, external_buildJsonTree_cjs_namespaceObject.isPathCollapsed)(collapsed, node.path),
-                        className: "grid size-2.5 shrink-0 cursor-pointer place-items-center text-foreground-subtle transition hover:text-foreground disabled:cursor-default disabled:hover:text-foreground-subtle",
-                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
-                            size: 10,
-                            className: (0, index_cjs_namespaceObject.cn)('transition-transform duration-100', (0, external_buildJsonTree_cjs_namespaceObject.isPathCollapsed)(collapsed, node.path) && '-rotate-90')
-                        })
-                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                        className: "size-2.5 shrink-0"
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTypeBadge_cjs_namespaceObject.JsonTypeBadge, {
-                        type: node.type,
-                        icon: decoration?.badge?.icon ?? deriveTypeIcon?.(node),
-                        className: decoration?.badge?.className,
-                        reference: decoration?.badge?.reference
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeKey_cjs_namespaceObject.NodeKey, {
-                        node: node,
-                        label: isTemplateItem ? templateItemLabel : decoration?.label,
-                        displayPath: pathForCopy?.(node.path, node.segments) ?? node.path,
-                        onCopyPath: copyPath,
-                        className: isTemplateItem ? 'font-normal italic text-foreground-subtle' : void 0
-                    }),
-                    copied?.path === node.path && 'path' === copied.kind && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CircleCheck, {
-                        size: 11,
-                        className: "shrink-0 text-brand",
-                        role: "img",
-                        "aria-label": strings.pathCopied
-                    }),
-                    decoration?.sublabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                        className: (0, index_cjs_namespaceObject.cn)('min-w-0 truncate font-mono text-[10px] text-foreground-subtle leading-4', decoration.sublabelOnHover && 'hidden group-hover:block group-focus-within:block'),
-                        children: decoration.sublabel
-                    }),
-                    node.required && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_label_cjs_namespaceObject.RequiredIndicator, {
-                        className: "ml-0 shrink-0 text-[10px] text-foreground",
-                        srLabel: strings.requiredMarker
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(GridCell, {
+                        cell: "name",
+                        className: NAME_CELL_CLASS,
+                        children: [
+                            isContainer ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                                type: "button",
+                                tabIndex: -1,
+                                "data-json-tree-skip": "",
+                                onClick: ()=>onToggleCollapsed?.(node.path),
+                                disabled: !onToggleCollapsed,
+                                "aria-label": collapsedHere ? strings.expandKey(node.key) : strings.collapseKey(node.key),
+                                className: "grid size-2.5 shrink-0 cursor-pointer place-items-center text-foreground-subtle transition hover:text-foreground disabled:cursor-default disabled:hover:text-foreground-subtle",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
+                                    size: 10,
+                                    className: (0, index_cjs_namespaceObject.cn)('transition-transform duration-100', collapsedHere && '-rotate-90')
+                                })
+                            }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: "size-2.5 shrink-0"
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonTypeBadge_cjs_namespaceObject.JsonTypeBadge, {
+                                type: node.type,
+                                icon: decoration?.badge?.icon ?? deriveTypeIcon?.(node),
+                                className: decoration?.badge?.className,
+                                reference: decoration?.badge?.reference
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_NodeKey_cjs_namespaceObject.NodeKey, {
+                                node: node,
+                                label: isTemplateItem ? templateItemLabel : decoration?.label,
+                                displayPath: pathForCopy?.(node.path, node.segments) ?? node.path,
+                                onCopyPath: copyPath,
+                                className: isTemplateItem ? 'font-normal italic text-foreground-subtle' : void 0
+                            }),
+                            copied?.path === node.path && 'path' === copied.kind && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CircleCheck, {
+                                size: 11,
+                                className: "shrink-0 text-brand",
+                                "aria-hidden": true
+                            }),
+                            decoration?.sublabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: (0, index_cjs_namespaceObject.cn)('min-w-0 truncate font-mono text-[10px] text-foreground-subtle leading-4', decoration.sublabelOnHover && 'hidden group-hover:block group-focus-within/row:block'),
+                                children: decoration.sublabel
+                            }),
+                            node.required && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_label_cjs_namespaceObject.RequiredIndicator, {
+                                className: "ml-0 shrink-0 text-[10px] text-foreground",
+                                srLabel: strings.requiredMarker
+                            })
+                        ]
                     }),
-                    isContainer ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                    isContainer ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(GridCell, {
+                        cell: "value",
+                        className: (0, index_cjs_namespaceObject.cn)('flex min-w-0 items-center gap-2', null != customCell && 'flex-1'),
                         children: [
                             !decoration?.hideCount && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                 className: "shrink-0 whitespace-nowrap font-mono italic text-[10px] text-foreground-subtle",
@@ -188,56 +225,52 @@ function JsonTreeRow({ node, depth }) {
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DecorationChip_cjs_namespaceObject.DecorationChip, {
                                 decoration: decoration
-                            }),
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_RowActions_cjs_namespaceObject.RowActions, {
-                                node: node,
-                                actions: actions,
-                                maxInline: maxInlineActions,
-                                meta: decoration?.meta
                             })
                         ]
-                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                    }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(GridCell, {
+                        cell: "value",
+                        editing: editingInline,
+                        className: (0, index_cjs_namespaceObject.cn)('flex flex-1 items-center gap-2', showsValue ? 'min-w-8' : 'min-w-0', showsValue && null == customCell && 'shrink-3'),
                         children: [
-                            !wrapped && !decoration?.hideValue && (null != customCell ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                className: VALUE_CELL_CLASS,
-                                children: customCell
-                            }) : !(readOnly && void 0 === node.value || isTemplate) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                            showsValue && (null != customCell ? customCell : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                                 children: [
                                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
                                         className: "shrink-0 font-mono text-xs text-foreground-subtle",
                                         children: "="
                                     }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                        className: (0, index_cjs_namespaceObject.cn)(VALUE_CELL_CLASS, 'shrink-3'),
-                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ScalarValueCell_cjs_namespaceObject.ScalarValueCell, {
-                                            node: node,
-                                            readOnly: readOnly,
-                                            editing: editingPath === node.path,
-                                            onStartEdit: (n)=>setEditingPath(n.path),
-                                            onStopEdit: ()=>setEditingPath(null),
-                                            onEdit: canEdit ? commitEdit : void 0
-                                        })
-                                    })
-                                ]
-                            })),
-                            editingPath !== node.path && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
-                                children: [
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DecorationChip_cjs_namespaceObject.DecorationChip, {
-                                        decoration: decoration
-                                    }),
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_RowActions_cjs_namespaceObject.RowActions, {
+                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ScalarValueCell_cjs_namespaceObject.ScalarValueCell, {
                                         node: node,
-                                        actions: actions,
-                                        maxInline: maxInlineActions,
-                                        meta: decoration?.meta
+                                        readOnly: readOnly,
+                                        editing: editingPath === node.path,
+                                        onStartEdit: (n)=>setEditingPath(n.path),
+                                        onStopEdit: ()=>setEditingPath(null),
+                                        onEdit: canEdit ? commitEdit : void 0
                                     })
                                 ]
+                            })),
+                            editingPath !== node.path && decoration?.chip && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                className: "ml-auto flex min-w-0 items-center",
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DecorationChip_cjs_namespaceObject.DecorationChip, {
+                                    decoration: decoration
+                                })
                             })
                         ]
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(GridCell, {
+                        cell: "actions",
+                        className: "ml-auto flex shrink-0 items-center gap-2",
+                        children: (isContainer || editingPath !== node.path) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_RowActions_cjs_namespaceObject.RowActions, {
+                            node: node,
+                            actions: actions,
+                            maxInline: maxInlineActions,
+                            meta: decoration?.meta
+                        })
                     })
                 ]
             }),
-            wrapped && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            wrapped && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(GridCell, {
+                cell: "detail",
+                editing: editingDetail,
                 className: "pb-1.5 pr-3.5",
                 style: rowIndent(depth, KEY_ALIGN_OFFSET),
                 children: editingPath === node.path && canEdit ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonMultilineLeafEditor_cjs_namespaceObject.JsonMultilineLeafEditor, {
@@ -259,7 +292,9 @@ function JsonTreeRow({ node, depth }) {
                     })
                 })
             }),
-            isContainer && jsonEditingPath === node.path && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            isContainer && jsonEditingPath === node.path && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(GridCell, {
+                cell: "detail",
+                editing: true,
                 className: "py-1.5 pr-3.5",
                 style: rowIndent(depth, KEY_ALIGN_OFFSET),
                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_JsonContainerEditor_cjs_namespaceObject.JsonContainerEditor, {

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

@@ -1,11 +1,19 @@
+import { type FlatJsonTreeRow } from './buildJsonTree';
 import type { CopyEvent, DeriveTypeIcon, JsonTreeNode, JsonTreeRowWrapper, JsonValue, NodeActionsResolver, NodeDecoration, PathForCopy, RenderCodeEditor, RenderValueCell } from './JsonTree.types';
 /** `min-h-7` above (1.75rem) in px at the default root size: the virtualizer's estimate
  *  until each row is measured, so a different root size costs accuracy but not correctness. */
 export declare const ROW_MIN_HEIGHT_PX = 28;
+/** The last copy, for the inline confirmation and the tree's announcement. */
+export interface JsonTreeCopyState {
+    path: string;
+    kind: CopyEvent['kind'];
+    /** Re-keys the announcement, so copying twice in a row is heard twice. */
+    id: number;
+}
 /**
  * Shared, node-invariant context every row needs: the tree config, the mutable
  * edit/copy state, and the handlers that mutate it. Held once by `JsonTreeView` so
- * each `JsonTreeRow` only takes its own `node`/`depth`.
+ * each `JsonTreeRow` only takes its own `row` and `index`.
  */
 export interface JsonTreeRowContextValue {
     collapsed: Record<string, boolean>;
@@ -26,10 +34,10 @@ export interface JsonTreeRowContextValue {
     editingPath: string | null;
     jsonEditingPath: string | null;
     wrappedPaths: Record<string, boolean>;
-    copied: {
-        path: string;
-        kind: CopyEvent['kind'];
-    } | null;
+    copied: JsonTreeCopyState | null;
+    /** The row holding the tree's single Tab stop. */
+    activePath: string | null;
+    /** Opening and closing an editor through these also moves focus into and back out of it. */
     setEditingPath: (path: string | null) => void;
     setJsonEditingPath: (path: string | null) => void;
     copyPath: (node: JsonTreeNode) => void;
@@ -44,7 +52,7 @@ export declare const JsonTreeRowContextProvider: import("react").Provider<JsonTr
  * plus the expanded wrapped-scalar and edit-as-JSON surfaces below it. All
  * shared state and handlers come from `JsonTreeRowContext`.
  */
-export declare function JsonTreeRow({ node, depth }: {
-    node: JsonTreeNode;
-    depth: number;
+export declare function JsonTreeRow({ row, index }: {
+    row: FlatJsonTreeRow;
+    index: number;
 }): import("react/jsx-runtime").JSX.Element;