@uipath/apollo-wind 2.79.0 → 2.79.2

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;

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

@@ -1,9 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../../lib/index.js";
-import { RequiredIndicator } from "../label.js";
 import { ChevronDown, CircleCheck, Copy, Pencil, WrapText } from "lucide-react";
 import { createContext, useContext } from "react";
-import { useJsonTreeViewStrings } from "./strings.js";
+import { RequiredIndicator } from "../label.js";
+import { cn } from "../../../lib/index.js";
 import { formatLeafValue, isArrayItemTemplateRoot, isPathCollapsed } from "./buildJsonTree.js";
 import { DecorationChip } from "./DecorationChip.js";
 import { JsonContainerEditor } from "./JsonContainerEditor.js";
@@ -12,15 +11,30 @@ import { JsonTypeBadge } from "./JsonTypeBadge.js";
 import { NodeKey } from "./NodeKey.js";
 import { RowActions } from "./RowActions.js";
 import { ScalarValueCell, valueColorClass } from "./ScalarValueCell.js";
+import { useJsonTreeViewStrings } from "./strings.js";
+import { isParentRow } from "./treeGrid.js";
 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__*/ jsx("div", {
+        role: "gridcell",
+        "data-cell": cell,
+        tabIndex: -1,
+        "data-json-tree-editor": editing ? '' : void 0,
+        className: cn(FOCUS_RING_CLASS, className),
+        ...props
+    });
+}
 const JsonTreeRowContext = /*#__PURE__*/ createContext(null);
 const JsonTreeRowContextProvider = JsonTreeRowContext.Provider;
 function useJsonTreeRowContext() {
@@ -28,9 +42,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 = 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({
@@ -97,7 +113,20 @@ function JsonTreeRow({ node, depth }) {
         if (event.target.closest('button, a, input, textarea, select, [contenteditable="true"]')) return;
         onToggleCollapsed?.(node.path);
     };
+    const collapsedHere = isContainer && 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__*/ 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": isParentRow(row) ? !collapsedHere : void 0,
+        className: ROW_ELEMENT_CLASS,
         children: [
             /*#__PURE__*/ jsxs(RowWrapper, {
                 node: node,
@@ -105,48 +134,56 @@ function JsonTreeRow({ node, depth }) {
                 style: rowIndent(depth),
                 onClick: rowClickable ? handleRowClick : void 0,
                 children: [
-                    isContainer ? /*#__PURE__*/ jsx("button", {
-                        type: "button",
-                        onClick: ()=>onToggleCollapsed?.(node.path),
-                        disabled: !onToggleCollapsed,
-                        "aria-label": isPathCollapsed(collapsed, node.path) ? strings.expandKey(node.key) : strings.collapseKey(node.key),
-                        "aria-expanded": !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__*/ jsx(ChevronDown, {
-                            size: 10,
-                            className: cn('transition-transform duration-100', isPathCollapsed(collapsed, node.path) && '-rotate-90')
-                        })
-                    }) : /*#__PURE__*/ jsx("div", {
-                        className: "size-2.5 shrink-0"
-                    }),
-                    /*#__PURE__*/ jsx(JsonTypeBadge, {
-                        type: node.type,
-                        icon: decoration?.badge?.icon ?? deriveTypeIcon?.(node),
-                        className: decoration?.badge?.className,
-                        reference: decoration?.badge?.reference
-                    }),
-                    /*#__PURE__*/ jsx(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__*/ jsx(CircleCheck, {
-                        size: 11,
-                        className: "shrink-0 text-brand",
-                        role: "img",
-                        "aria-label": strings.pathCopied
-                    }),
-                    decoration?.sublabel && /*#__PURE__*/ jsx("span", {
-                        className: 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__*/ jsx(RequiredIndicator, {
-                        className: "ml-0 shrink-0 text-[10px] text-foreground",
-                        srLabel: strings.requiredMarker
+                    /*#__PURE__*/ jsxs(GridCell, {
+                        cell: "name",
+                        className: NAME_CELL_CLASS,
+                        children: [
+                            isContainer ? /*#__PURE__*/ 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__*/ jsx(ChevronDown, {
+                                    size: 10,
+                                    className: cn('transition-transform duration-100', collapsedHere && '-rotate-90')
+                                })
+                            }) : /*#__PURE__*/ jsx("div", {
+                                className: "size-2.5 shrink-0"
+                            }),
+                            /*#__PURE__*/ jsx(JsonTypeBadge, {
+                                type: node.type,
+                                icon: decoration?.badge?.icon ?? deriveTypeIcon?.(node),
+                                className: decoration?.badge?.className,
+                                reference: decoration?.badge?.reference
+                            }),
+                            /*#__PURE__*/ jsx(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__*/ jsx(CircleCheck, {
+                                size: 11,
+                                className: "shrink-0 text-brand",
+                                "aria-hidden": true
+                            }),
+                            decoration?.sublabel && /*#__PURE__*/ jsx("span", {
+                                className: 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__*/ jsx(RequiredIndicator, {
+                                className: "ml-0 shrink-0 text-[10px] text-foreground",
+                                srLabel: strings.requiredMarker
+                            })
+                        ]
                     }),
-                    isContainer ? /*#__PURE__*/ jsxs(Fragment, {
+                    isContainer ? /*#__PURE__*/ jsxs(GridCell, {
+                        cell: "value",
+                        className: cn('flex min-w-0 items-center gap-2', null != customCell && 'flex-1'),
                         children: [
                             !decoration?.hideCount && /*#__PURE__*/ jsx("span", {
                                 className: "shrink-0 whitespace-nowrap font-mono italic text-[10px] text-foreground-subtle",
@@ -158,56 +195,52 @@ function JsonTreeRow({ node, depth }) {
                             }),
                             /*#__PURE__*/ jsx(DecorationChip, {
                                 decoration: decoration
-                            }),
-                            /*#__PURE__*/ jsx(RowActions, {
-                                node: node,
-                                actions: actions,
-                                maxInline: maxInlineActions,
-                                meta: decoration?.meta
                             })
                         ]
-                    }) : /*#__PURE__*/ jsxs(Fragment, {
+                    }) : /*#__PURE__*/ jsxs(GridCell, {
+                        cell: "value",
+                        editing: editingInline,
+                        className: 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__*/ jsx("span", {
-                                className: VALUE_CELL_CLASS,
-                                children: customCell
-                            }) : !(readOnly && void 0 === node.value || isTemplate) && /*#__PURE__*/ jsxs(Fragment, {
+                            showsValue && (null != customCell ? customCell : /*#__PURE__*/ jsxs(Fragment, {
                                 children: [
                                     /*#__PURE__*/ jsx("span", {
                                         className: "shrink-0 font-mono text-xs text-foreground-subtle",
                                         children: "="
                                     }),
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: cn(VALUE_CELL_CLASS, 'shrink-3'),
-                                        children: /*#__PURE__*/ jsx(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__*/ jsxs(Fragment, {
-                                children: [
-                                    /*#__PURE__*/ jsx(DecorationChip, {
-                                        decoration: decoration
-                                    }),
-                                    /*#__PURE__*/ jsx(RowActions, {
+                                    /*#__PURE__*/ jsx(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__*/ jsx("span", {
+                                className: "ml-auto flex min-w-0 items-center",
+                                children: /*#__PURE__*/ jsx(DecorationChip, {
+                                    decoration: decoration
+                                })
                             })
                         ]
+                    }),
+                    /*#__PURE__*/ jsx(GridCell, {
+                        cell: "actions",
+                        className: "ml-auto flex shrink-0 items-center gap-2",
+                        children: (isContainer || editingPath !== node.path) && /*#__PURE__*/ jsx(RowActions, {
+                            node: node,
+                            actions: actions,
+                            maxInline: maxInlineActions,
+                            meta: decoration?.meta
+                        })
                     })
                 ]
             }),
-            wrapped && /*#__PURE__*/ jsx("div", {
+            wrapped && /*#__PURE__*/ 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__*/ jsx(JsonMultilineLeafEditor, {
@@ -229,7 +262,9 @@ function JsonTreeRow({ node, depth }) {
                     })
                 })
             }),
-            isContainer && jsonEditingPath === node.path && /*#__PURE__*/ jsx("div", {
+            isContainer && jsonEditingPath === node.path && /*#__PURE__*/ jsx(GridCell, {
+                cell: "detail",
+                editing: true,
                 className: "py-1.5 pr-3.5",
                 style: rowIndent(depth, KEY_ALIGN_OFFSET),
                 children: /*#__PURE__*/ jsx(JsonContainerEditor, {

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

@@ -28,13 +28,13 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const index_cjs_namespaceObject = require("../../../lib/index.cjs");
-const external_strings_cjs_namespaceObject = require("./strings.cjs");
 const external_JsonTreeTooltip_cjs_namespaceObject = require("./JsonTreeTooltip.cjs");
+const external_strings_cjs_namespaceObject = require("./strings.cjs");
 function NodeKey({ node, label, displayPath, onCopyPath, className }) {
     const strings = (0, external_strings_cjs_namespaceObject.useJsonTreeViewStrings)();
     const text = label ?? node.key;
     const copyPathText = displayPath ?? node.path;
-    const keyClass = (0, index_cjs_namespaceObject.cn)('min-w-4 max-w-[45%] truncate text-xs text-foreground', null != label ? 'font-medium' : 'font-mono', void 0 === node.value && 'text-foreground-muted', className);
+    const keyClass = (0, index_cjs_namespaceObject.cn)('min-w-4 truncate text-xs text-foreground', null != label ? 'font-medium' : 'font-mono', void 0 === node.value && 'text-foreground-muted', className);
     if (!onCopyPath) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
         className: keyClass,
         children: text