@cube-dev/ui-kit 0.0.0-canary-ccfec10 → 0.0.0-canary-161c235

package/dist/components/data/TableBase/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","names":["mergeProps"],"sources":["../../../../src/components/data/TableBase/TableRow.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useDraggableItem, useDropIndicator } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\n\nimport type { Key } from '@react-types/shared';\nimport type { ReactNode, Ref } from 'react';\nimport type {\n  DraggableCollectionState,\n  DroppableCollectionState,\n} from 'react-stately';\n\nexport interface TableRowProps {\n  rowKey: Key;\n  /** Everything the renderer already computed: mods, ARIA, handlers. */\n  rowProps: Record<string, any>;\n  height?: number;\n  /** Set on the virtualized path so the virtualizer can measure the row. */\n  measureRef?: Ref<HTMLTableRowElement>;\n  index?: number;\n  dragState?: DraggableCollectionState;\n  dropState?: DroppableCollectionState;\n  children: ReactNode;\n}\n\nfunction Row(props: TableRowProps & { extra?: Record<string, any> }) {\n  const { rowProps, height, measureRef, index, extra, children } = props;\n\n  return (\n    <tr\n      {...rowProps}\n      {...extra}\n      ref={measureRef}\n      data-index={index}\n      style={height != null ? { height } : undefined}\n    >\n      {children}\n    </tr>\n  );\n}\n\n/**\n * A row inside a collection that accepts drags.\n *\n * Split from the plain row so the drag hooks can be called unconditionally —\n * they are hooks, and whether a table is draggable is a prop.\n */\nfunction DraggableRow(props: TableRowProps) {\n  const { rowKey, dragState, dropState } = props;\n\n  const dragResult = useDraggableItem(\n    { key: rowKey },\n    dragState as DraggableCollectionState,\n  );\n\n  /**\n   * Whether a drop would land *on* this row.\n   *\n   * `useDropIndicator` rather than asking `dropState.isDropTarget` directly:\n   * the state object's identity never changes as the pointer moves, so a plain\n   * read is computed once and never updates. The hook subscribes, which is what\n   * makes the highlight follow the cursor.\n   */\n  const onRef = useRef<HTMLDivElement>(null);\n  const { isDropTarget: isOnTarget } = useDropIndicator(\n    { target: { type: 'item', key: rowKey, dropPosition: 'on' } },\n    dropState as DroppableCollectionState,\n    onRef,\n  );\n\n  return (\n    <Row\n      {...props}\n      extra={{\n        ...mergeProps(props.rowProps, dragResult.dragProps),\n        'data-draggable': '',\n        'data-dragging': dragResult.isDragging ? '' : undefined,\n        'data-drop-target': isOnTarget ? '' : undefined,\n      }}\n    />\n  );\n}\n\nexport function TableRow(props: TableRowProps) {\n  return props.dragState && props.dropState ? (\n    <DraggableRow {...props} />\n  ) : (\n    <Row {...props} />\n  );\n}\n\nexport interface TableRowDropIndicatorProps {\n  rowKey: Key;\n  dropPosition: 'before' | 'after';\n  dropState: DroppableCollectionState;\n  columnCount: number;\n}\n\n/**\n * The line showing where a dragged row would land.\n *\n * Its own `<tr>`, because a native table cannot hold an arbitrary element\n * between two rows — the same shape `ListBox` uses with `<li>`. It renders\n * nothing at all unless a drag is in flight, so the table's normal structure is\n * untouched the rest of the time.\n */\nexport function TableRowDropIndicator(props: TableRowDropIndicatorProps) {\n  const { rowKey, dropPosition, dropState, columnCount } = props;\n  const ref = useRef<HTMLDivElement>(null);\n  const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(\n    { target: { type: 'item', key: rowKey, dropPosition } },\n    dropState,\n    ref,\n  );\n\n  if (isHidden) return null;\n\n  return (\n    <tr data-element=\"DropIndicatorRow\">\n      <td data-element=\"DropIndicatorCell\" colSpan={Math.max(columnCount, 1)}>\n        <div\n          {...dropIndicatorProps}\n          ref={ref}\n          data-element=\"DropIndicator\"\n          data-drop-target={isDropTarget ? '' : undefined}\n        />\n      </td>\n    </tr>\n  );\n}\n"],"mappings":";;;;;;;AAyBA,SAAS,IAAI,OAAwD;CACnE,MAAM,EAAE,UAAU,QAAQ,YAAY,OAAO,OAAO,aAAa;AAEjE,QACE,oBAAC;EACC,GAAI;EACJ,GAAI;EACJ,KAAK;EACL,cAAY;EACZ,OAAO,UAAU,OAAO,EAAE,QAAQ,GAAG;EAEpC;GACE;;;;;;;;AAUT,SAAS,aAAa,OAAsB;CAC1C,MAAM,EAAE,QAAQ,WAAW,cAAc;CAEzC,MAAM,aAAa,iBACjB,EAAE,KAAK,QAAQ,EACf,UACD;;;;;;;;;CAUD,MAAM,QAAQ,OAAuB,KAAK;CAC1C,MAAM,EAAE,cAAc,eAAe,iBACnC,EAAE,QAAQ;EAAE,MAAM;EAAQ,KAAK;EAAQ,cAAc;EAAM,EAAE,EAC7D,WACA,MACD;AAED,QACE,oBAAC;EACC,GAAI;EACJ,OAAO;GACL,GAAGA,aAAW,MAAM,UAAU,WAAW,UAAU;GACnD,kBAAkB;GAClB,iBAAiB,WAAW,aAAa,KAAK;GAC9C,oBAAoB,aAAa,KAAK;GACvC;GACD;;AAIN,SAAgB,SAAS,OAAsB;AAC7C,QAAO,MAAM,aAAa,MAAM,YAC9B,oBAAC,gBAAa,GAAI,QAAS,GAE3B,oBAAC,OAAI,GAAI,QAAS;;;;;;;;;;AAmBtB,SAAgB,sBAAsB,OAAmC;CACvE,MAAM,EAAE,QAAQ,cAAc,WAAW,gBAAgB;CACzD,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,EAAE,oBAAoB,UAAU,iBAAiB,iBACrD,EAAE,QAAQ;EAAE,MAAM;EAAQ,KAAK;EAAQ;EAAc,EAAE,EACvD,WACA,IACD;AAED,KAAI,SAAU,QAAO;AAErB,QACE,oBAAC;EAAG,gBAAa;YACf,oBAAC;GAAG,gBAAa;GAAoB,SAAS,KAAK,IAAI,aAAa,EAAE;aACpE,oBAAC;IACC,GAAI;IACC;IACL,gBAAa;IACb,oBAAkB,eAAe,KAAK;KACtC;IACC;GACF"}
+{"version":3,"file":"TableRow.js","names":["mergeProps"],"sources":["../../../../src/components/data/TableBase/TableRow.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useDraggableItem, useDropIndicator, useTreeItem } from 'react-aria';\n\nimport { mergeProps, mergeRefs } from '../../../utils/react';\n\nimport type { Key, Node } from '@react-types/shared';\nimport type { ReactNode, Ref } from 'react';\nimport type {\n  DraggableCollectionState,\n  DroppableCollectionState,\n  TreeState,\n} from 'react-stately';\nimport type { TableTreeNode } from './table-tree';\n\nexport interface TableRowTreeProps<T = any> {\n  state: TreeState<TableTreeNode<T>>;\n  node: Node<TableTreeNode<T>>;\n  entry: TableTreeNode<T>;\n  isVirtualized: boolean;\n}\n\nexport interface TableRowProps<T = any> {\n  rowKey: Key;\n  /** Everything the renderer already computed: mods, ARIA, handlers. */\n  rowProps: Record<string, any>;\n  height?: number;\n  /** Set on the virtualized path so the virtualizer can measure the row. */\n  measureRef?: Ref<HTMLTableRowElement>;\n  /** Internal React Aria row ref in tree mode. */\n  rowRef?: Ref<HTMLTableRowElement>;\n  index?: number;\n  dragState?: DraggableCollectionState;\n  dropState?: DroppableCollectionState;\n  tree?: TableRowTreeProps<T>;\n  children:\n    | ReactNode\n    | ((treeItemAria: ReturnType<typeof useTreeItem> | undefined) => ReactNode);\n}\n\nfunction Row(\n  props: TableRowProps & {\n    extra?: Record<string, any>;\n    rowRef?: Ref<HTMLTableRowElement>;\n  },\n) {\n  const { rowProps, height, measureRef, rowRef, index, extra, children } =\n    props;\n\n  return (\n    <tr\n      {...rowProps}\n      {...extra}\n      ref={mergeRefs(measureRef, rowRef)}\n      data-index={index}\n      style={height != null ? { height } : undefined}\n    >\n      {typeof children === 'function' ? children(undefined) : children}\n    </tr>\n  );\n}\n\n/**\n * A row inside a collection that accepts drags.\n *\n * Split from the plain row so the drag hooks can be called unconditionally —\n * they are hooks, and whether a table is draggable is a prop.\n */\nfunction DraggableRow(props: TableRowProps) {\n  const { rowKey, dragState, dropState } = props;\n\n  const dragResult = useDraggableItem(\n    { key: rowKey },\n    dragState as DraggableCollectionState,\n  );\n\n  /**\n   * Whether a drop would land *on* this row.\n   *\n   * `useDropIndicator` rather than asking `dropState.isDropTarget` directly:\n   * the state object's identity never changes as the pointer moves, so a plain\n   * read is computed once and never updates. The hook subscribes, which is what\n   * makes the highlight follow the cursor.\n   */\n  const onRef = useRef<HTMLDivElement>(null);\n  const { isDropTarget: isOnTarget } = useDropIndicator(\n    { target: { type: 'item', key: rowKey, dropPosition: 'on' } },\n    dropState as DroppableCollectionState,\n    onRef,\n  );\n\n  return (\n    <Row\n      {...props}\n      extra={{\n        ...mergeProps(props.rowProps, dragResult.dragProps),\n        'data-draggable': '',\n        'data-dragging': dragResult.isDragging ? '' : undefined,\n        'data-drop-target': isOnTarget ? '' : undefined,\n      }}\n    />\n  );\n}\n\nfunction TreeRow<T>(props: TableRowProps<T>) {\n  const { tree } = props;\n  const rowRef = useRef<HTMLTableRowElement>(null);\n  const treeItemAria = useTreeItem(\n    {\n      node: tree!.node,\n      hasChildItems: tree!.entry.children.length > 0,\n      isVirtualized: tree!.isVirtualized,\n    },\n    tree!.state,\n    rowRef,\n  );\n\n  const rowProps = mergeProps(treeItemAria.rowProps, props.rowProps);\n\n  // Table geometry and ItemTable selection are separate from React Aria's\n  // internal focus-only selection manager, so the renderer's values win.\n  if (props.rowProps['aria-rowindex'] !== undefined) {\n    rowProps['aria-rowindex'] = props.rowProps['aria-rowindex'];\n  }\n  if (props.rowProps['aria-selected'] !== undefined) {\n    rowProps['aria-selected'] = props.rowProps['aria-selected'];\n  }\n  rowProps['aria-level'] = tree!.entry.level + 1;\n  rowProps['aria-posinset'] = tree!.entry.siblingIndex + 1;\n  rowProps['aria-setsize'] = tree!.entry.siblingCount;\n\n  const children =\n    typeof props.children === 'function'\n      ? props.children(treeItemAria)\n      : props.children;\n  const next = { ...props, rowProps, rowRef, children };\n\n  return props.dragState && props.dropState ? (\n    <DraggableRow {...next} />\n  ) : (\n    <Row {...next} />\n  );\n}\n\nexport function TableRow<T>(props: TableRowProps<T>) {\n  if (props.tree) return <TreeRow {...props} />;\n\n  return props.dragState && props.dropState ? (\n    <DraggableRow {...props} />\n  ) : (\n    <Row {...props} />\n  );\n}\n\nexport interface TableRowDropIndicatorProps {\n  rowKey: Key;\n  dropPosition: 'before' | 'after';\n  dropState: DroppableCollectionState;\n  columnCount: number;\n}\n\n/**\n * The line showing where a dragged row would land.\n *\n * Its own `<tr>`, because a native table cannot hold an arbitrary element\n * between two rows — the same shape `ListBox` uses with `<li>`. It renders\n * nothing at all unless a drag is in flight, so the table's normal structure is\n * untouched the rest of the time.\n */\nexport function TableRowDropIndicator(props: TableRowDropIndicatorProps) {\n  const { rowKey, dropPosition, dropState, columnCount } = props;\n  const ref = useRef<HTMLDivElement>(null);\n  const { dropIndicatorProps, isHidden, isDropTarget } = useDropIndicator(\n    { target: { type: 'item', key: rowKey, dropPosition } },\n    dropState,\n    ref,\n  );\n\n  if (isHidden) return null;\n\n  return (\n    <tr data-element=\"DropIndicatorRow\">\n      <td data-element=\"DropIndicatorCell\" colSpan={Math.max(columnCount, 1)}>\n        <div\n          {...dropIndicatorProps}\n          ref={ref}\n          data-element=\"DropIndicator\"\n          data-drop-target={isDropTarget ? '' : undefined}\n        />\n      </td>\n    </tr>\n  );\n}\n"],"mappings":";;;;;;;;AAuCA,SAAS,IACP,OAIA;CACA,MAAM,EAAE,UAAU,QAAQ,YAAY,QAAQ,OAAO,OAAO,aAC1D;AAEF,QACE,oBAAC;EACC,GAAI;EACJ,GAAI;EACJ,KAAK,UAAU,YAAY,OAAO;EAClC,cAAY;EACZ,OAAO,UAAU,OAAO,EAAE,QAAQ,GAAG;YAEpC,OAAO,aAAa,aAAa,SAAS,OAAU,GAAG;GACrD;;;;;;;;AAUT,SAAS,aAAa,OAAsB;CAC1C,MAAM,EAAE,QAAQ,WAAW,cAAc;CAEzC,MAAM,aAAa,iBACjB,EAAE,KAAK,QAAQ,EACf,UACD;;;;;;;;;CAUD,MAAM,QAAQ,OAAuB,KAAK;CAC1C,MAAM,EAAE,cAAc,eAAe,iBACnC,EAAE,QAAQ;EAAE,MAAM;EAAQ,KAAK;EAAQ,cAAc;EAAM,EAAE,EAC7D,WACA,MACD;AAED,QACE,oBAAC;EACC,GAAI;EACJ,OAAO;GACL,GAAGA,aAAW,MAAM,UAAU,WAAW,UAAU;GACnD,kBAAkB;GAClB,iBAAiB,WAAW,aAAa,KAAK;GAC9C,oBAAoB,aAAa,KAAK;GACvC;GACD;;AAIN,SAAS,QAAW,OAAyB;CAC3C,MAAM,EAAE,SAAS;CACjB,MAAM,SAAS,OAA4B,KAAK;CAChD,MAAM,eAAe,YACnB;EACE,MAAM,KAAM;EACZ,eAAe,KAAM,MAAM,SAAS,SAAS;EAC7C,eAAe,KAAM;EACtB,EACD,KAAM,OACN,OACD;CAED,MAAM,WAAWA,aAAW,aAAa,UAAU,MAAM,SAAS;AAIlE,KAAI,MAAM,SAAS,qBAAqB,OACtC,UAAS,mBAAmB,MAAM,SAAS;AAE7C,KAAI,MAAM,SAAS,qBAAqB,OACtC,UAAS,mBAAmB,MAAM,SAAS;AAE7C,UAAS,gBAAgB,KAAM,MAAM,QAAQ;AAC7C,UAAS,mBAAmB,KAAM,MAAM,eAAe;AACvD,UAAS,kBAAkB,KAAM,MAAM;CAEvC,MAAM,WACJ,OAAO,MAAM,aAAa,aACtB,MAAM,SAAS,aAAa,GAC5B,MAAM;CACZ,MAAM,OAAO;EAAE,GAAG;EAAO;EAAU;EAAQ;EAAU;AAErD,QAAO,MAAM,aAAa,MAAM,YAC9B,oBAAC,gBAAa,GAAI,OAAQ,GAE1B,oBAAC,OAAI,GAAI,OAAQ;;AAIrB,SAAgB,SAAY,OAAyB;AACnD,KAAI,MAAM,KAAM,QAAO,oBAAC,WAAQ,GAAI,QAAS;AAE7C,QAAO,MAAM,aAAa,MAAM,YAC9B,oBAAC,gBAAa,GAAI,QAAS,GAE3B,oBAAC,OAAI,GAAI,QAAS;;;;;;;;;;AAmBtB,SAAgB,sBAAsB,OAAmC;CACvE,MAAM,EAAE,QAAQ,cAAc,WAAW,gBAAgB;CACzD,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,EAAE,oBAAoB,UAAU,iBAAiB,iBACrD,EAAE,QAAQ;EAAE,MAAM;EAAQ,KAAK;EAAQ;EAAc,EAAE,EACvD,WACA,IACD;AAED,KAAI,SAAU,QAAO;AAErB,QACE,oBAAC;EAAG,gBAAa;YACf,oBAAC;GAAG,gBAAa;GAAoB,SAAS,KAAK,IAAI,aAAa,EAAE;aACpE,oBAAC;IACC,GAAI;IACC;IACL,gBAAa;IACb,oBAAkB,eAAe,KAAK;KACtC;IACC;GACF"}

package/dist/components/data/TableBase/TableView.d.ts

@@ -5,7 +5,8 @@ import "./use-table-selection.js";
 import { Styles } from "@tenphi/tasty";
 import { ReactNode, RefObject } from "react";
 import "react/jsx-runtime";
-import { Key as Key$1 } from "@react-types/shared";
+import { TreeState } from "react-stately";
+import { Key as Key$1, Node } from "@react-types/shared";
 
 //#region src/components/data/TableBase/TableView.d.ts
 /** Visual/behavioural overrides a table adapter may attach to a single row. */

package/dist/components/data/TableBase/TableView.js

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-ccfec10 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-161c235 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
 import { TextItem } from "../../content/TextItem/TextItem.js";
@@ -6,6 +7,7 @@ import { ItemAction } from "../../actions/ItemAction/ItemAction.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { ArrowNarrowDownIcon } from "../../../icons/ArrowNarrowDownIcon.js";
 import { ArrowNarrowUpIcon } from "../../../icons/ArrowNarrowUpIcon.js";
+import { DirectionIcon } from "../../../icons/DirectionIcon.js";
 import { MoreIcon } from "../../../icons/MoreIcon.js";
 import { _MenuTrigger } from "../../actions/Menu/MenuTrigger.js";
 import { __Menu } from "../../actions/Menu/Menu.js";
@@ -22,7 +24,7 @@ import { ROW_MENU_COLUMN_KEY, isMenuEmpty, normalizeMenuAction } from "./row-men
 import { COLUMN_MENU_SORT_DIRECTION, isColumnMenuSortKey, processColumnMenuItems } from "./column-menu.js";
 import { buildColumnTints, tintSlot } from "./column-tint.js";
 import { ColumnResizer } from "./ColumnResizer.js";
-import { TableElement, TableHeaderItem } from "./styled.js";
+import { TableElement, TableHeaderItem, TableTreeToggle, TableTreeTogglePlaceholder } from "./styled.js";
 import { TableHeaderCell } from "./TableHeaderCell.js";
 import { TableRow, TableRowDropIndicator } from "./TableRow.js";
 import { selectionRowKey } from "./types.js";
@@ -34,7 +36,7 @@ import { getColumnText, getColumnValue } from "./use-table-columns.js";
 import { ROW_NUMBER_COLUMN_KEY, SELECTION_COLUMN_KEY } from "./use-table-selection.js";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { VisuallyHidden } from "react-aria";
+import { VisuallyHidden, useTree } from "react-aria";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 //#region src/components/data/TableBase/TableView.tsx
@@ -103,12 +105,78 @@ function pinStyle(column) {
 	return { ["--pin-offset"]: `${column.pinOffset}px` };
 }
 /**
+* Hook boundary for the native table. Flat tables deliberately avoid this
+* component so their DOM and keyboard behaviour remain exactly as before.
+*/
+function TreeGridTable(props) {
+	const { tree, tableProps, style, children } = props;
+	const ref = useRef(null);
+	const pendingFocusKey = useRef(null);
+	const { gridProps } = useTree(tree.ariaProps, tree.state, ref);
+	useEffect(() => {
+		const key = pendingFocusKey.current;
+		if (key == null) return;
+		const target = Array.from(ref.current?.querySelectorAll("tbody tr[data-element=\"Row\"][data-key]") ?? []).find((element) => element.dataset.key === String(key));
+		if (target) {
+			pendingFocusKey.current = null;
+			target.focus();
+		}
+	});
+	const handleKeyDownCapture = (event) => {
+		const row = event.target.closest("tbody tr[data-element=\"Row\"][data-key]");
+		if (!row || event.target !== row) {
+			gridProps.onKeyDownCapture?.(event);
+			return;
+		}
+		const index = tree.entries.findIndex((entry) => String(entry.key) === row.dataset.key);
+		const entry = tree.entries[index];
+		if (!entry) return;
+		const focusEntry = (next) => {
+			if (!next) return false;
+			tree.state.selectionManager.setFocusedKey(next.key);
+			const target = Array.from(ref.current?.querySelectorAll("tbody tr[data-element=\"Row\"][data-key]") ?? []).find((element) => element.dataset.key === String(next.key));
+			if (target) target.focus();
+			else pendingFocusKey.current = next.key;
+			return true;
+		};
+		const hasChildren = entry.children.length > 0;
+		const isExpanded = tree.state.expandedKeys.has(entry.key);
+		let handled = false;
+		if (event.key === "ArrowRight" && hasChildren) if (isExpanded) handled = focusEntry(entry.children[0]);
+		else {
+			tree.state.toggleKey(entry.key);
+			handled = true;
+		}
+		else if (event.key === "ArrowLeft") {
+			if (hasChildren && isExpanded) {
+				tree.state.toggleKey(entry.key);
+				handled = true;
+			} else if (entry.parentKey != null) handled = focusEntry(tree.entries.find((candidate) => candidate.key === entry.parentKey));
+		} else if (event.key === "ArrowDown") handled = focusEntry(tree.entries[index + 1]);
+		else if (event.key === "ArrowUp") handled = focusEntry(tree.entries[index - 1]);
+		if (handled) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		gridProps.onKeyDownCapture?.(event);
+	};
+	return /* @__PURE__ */ jsx("table", {
+		...mergeProps$1(gridProps, tableProps),
+		ref,
+		role: "treegrid",
+		style,
+		onKeyDownCapture: handleKeyDownCapture,
+		children
+	});
+}
+/**
 * The one place table DOM exists. Both `ItemTable` and `DataTable` resolve their
 * props into the shape above and hand it here, so the markup, the ARIA
 * bookkeeping and the tasty sub-element contract have a single implementation.
 */
 function TableView(props) {
-	const { qa, rows, getRowKey, layout, onScrollerRef, rootRef, size = "medium", shape = "plain", rowSize, rowHeight, headerHeight, isHeaderHidden = false, isStriped = false, hasColumnDividers, isRowMoveAnimated = true, isHeaderSticky = true, isVirtualized = "auto", virtualizeThreshold = 50, overscan = 20, isLoading = false, loadingIndicator = "overlay", skeletonRowCount = 6, selection, selectionTooltip, overlay, rowMenu, rowContextMenu = false, onRowMenuAction, rowMenuTriggerProps, rowLink, onRowAction, onLoadMore, hasMore = false, isLoadingMore = false, loadMoreMargin, pinnedTopRows, pinnedBottomRows, cellSelection, rowNumberOffset = 0, rowIndexOffset = 0, totalRowCount, isReorderable = false, dragState, dropState, collectionProps, isColumnReorderable = false, columnDragState, columnDropState, headCollectionProps, headRowRef, onColumnFocus, bodyRef, isResizable = false, onColumnResize, onColumnResizeEnd, emptyLabel, noResultsLabel, error, isFiltered = false, sortMode = "off", sort, sorts, onColumnSort, onColumnSortChange, columnContextMenu = true, onColumnMenuAction, columnMenuTriggerProps, columnMenuProps, getRowProps, headerPreset, contentPreset, toolbar, footer, ariaLabel, styles, headerStyles, headerCellStyles, bodyStyles, rowStyles, cellStyles, mods } = props;
+	const { qa, rows, rowKeys, getRowKey, layout, onScrollerRef, rootRef, size = "medium", shape = "plain", rowSize, rowHeight, headerHeight, isHeaderHidden = false, isStriped = false, hasColumnDividers, isRowMoveAnimated = true, isHeaderSticky = true, isVirtualized = "auto", virtualizeThreshold = 50, overscan = 20, isLoading = false, loadingIndicator = "overlay", skeletonRowCount = 6, selection, selectionTooltip, overlay, rowMenu, rowContextMenu = false, onRowMenuAction, rowMenuTriggerProps, rowLink, onRowAction, onLoadMore, hasMore = false, isLoadingMore = false, loadMoreMargin, pinnedTopRows, pinnedBottomRows, cellSelection, rowNumberOffset = 0, rowIndexOffset = 0, totalRowCount, tree, isReorderable = false, dragState, dropState, collectionProps, isColumnReorderable = false, columnDragState, columnDropState, headCollectionProps, headRowRef, onColumnFocus, bodyRef, isResizable = false, onColumnResize, onColumnResizeEnd, emptyLabel, noResultsLabel, error, isFiltered = false, sortMode = "off", sort, sorts, onColumnSort, onColumnSortChange, columnContextMenu = true, onColumnMenuAction, columnMenuTriggerProps, columnMenuProps, getRowProps, headerPreset, contentPreset, toolbar, footer, ariaLabel, styles, headerStyles, headerCellStyles, bodyStyles, rowStyles, cellStyles, mods } = props;
 	const { columns } = layout;
 	const columnCount = columns.length;
 	/**
@@ -150,6 +218,16 @@ function TableView(props) {
 	const bodyRowCount = Math.max(totalRowCount ?? rows.length, rowIndexOffset + rows.length);
 	/** 1-based `aria-rowindex` for the i-th body row of the current page. */
 	const bodyRowIndex = (rowIndex) => headerRowCount + pinnedTopCount + rowIndexOffset + rowIndex + 1;
+	const bodyRowKey = (row, rowIndex) => rowKeys?.[rowIndex] ?? getRowKey(row, rowIndex);
+	const treeRowState = (rowIndex) => {
+		const entry = tree?.entries[rowIndex];
+		return entry ? {
+			level: entry.level,
+			parentKey: entry.parentKey,
+			hasChildren: entry.children.length > 0,
+			isExpanded: tree.state.expandedKeys.has(entry.key)
+		} : void 0;
+	};
 	/** 1-based `aria-rowindex` for the i-th pinned row at `edge`. */
 	const pinnedRowIndex = (index, edge) => edge === "top" ? headerRowCount + index + 1 : headerRowCount + pinnedTopCount + bodyRowCount + index + 1;
 	const tints = useMemo(() => buildColumnTints(columns, { resolveTheme: getColorTheme }), [columns, usePaletteVersion()]);
@@ -345,6 +423,7 @@ function TableView(props) {
 		const checkbox = /* @__PURE__ */ jsx(__Checkbox, {
 			"aria-label": t("itemTable.selectRow", "Select row"),
 			isSelected: selection.isSelected(rowKey),
+			isIndeterminate: selection.isIndeterminate(rowKey),
 			isDisabled: !canSelect,
 			onChange: () => selection.toggleRow(rowKey)
 		});
@@ -546,7 +625,7 @@ function TableView(props) {
 			}) : null]
 		}, column.key);
 	}
-	function renderCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge) {
+	function renderCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge, treeItemAria) {
 		const rangeKey = selectionRowKey(sectionOf(pinnedEdge), rowKey);
 		if (column.key === SELECTION_COLUMN_KEY) return renderSelectionCell(column, row, rowIndex, rowKey, isLastRow, pinnedEdge);
 		if (column.key === ROW_NUMBER_COLUMN_KEY) return /* @__PURE__ */ jsx("td", {
@@ -571,12 +650,30 @@ function TableView(props) {
 			columnKey: column.key,
 			columnIndex: column.index,
 			section: sectionOf(pinnedEdge),
-			isSelected: selection?.isSelected(rowKey) ?? false
+			isSelected: selection?.isSelected(rowKey) ?? false,
+			tree: pinnedEdge == null ? treeRowState(rowIndex) : void 0
 		};
 		const value = column.isStructural ? void 0 : getColumnValue(column, row, rowIndex);
 		const rendered = column.render ? column.render(value, row, rowIndex, ctx) : column.isStructural ? null : getColumnText(column, row, rowIndex);
 		const isText = typeof rendered === "string" || typeof rendered === "number" || typeof rendered === "bigint";
 		const content = isText && !column.autoHeight ? /* @__PURE__ */ jsx(TextItem, { children: String(rendered) }) : isText ? String(rendered) : rendered;
+		const treeEntry = pinnedEdge == null ? tree?.entries[rowIndex] : void 0;
+		const displayContent = treeEntry && column.key === tree?.columnKey ? /* @__PURE__ */ jsxs("div", {
+			"data-element": "TreeContent",
+			style: { "--tree-level": String(treeEntry.level) },
+			children: [treeEntry.children.length > 0 ? /* @__PURE__ */ jsx(TableTreeToggle, {
+				...treeItemAria?.expandButtonProps,
+				"data-element": "TreeToggle",
+				tabIndex: -1,
+				children: /* @__PURE__ */ jsx(DirectionIcon, { to: tree.state.expandedKeys.has(treeEntry.key) ? "bottom" : "right" })
+			}) : /* @__PURE__ */ jsx(TableTreeTogglePlaceholder, {
+				"data-element": "TreeToggle",
+				"aria-hidden": "true"
+			}), /* @__PURE__ */ jsx("div", {
+				"data-element": "TreeValue",
+				children: content
+			})]
+		}) : content;
 		const resolvedCellStyles = typeof column.cellStyles === "function" ? column.cellStyles(ctx) : column.cellStyles;
 		const CellTag = column.isRowHeader ? "th" : "td";
 		const link = column.isRowHeader ? rowLink?.(row, rowIndex) : void 0;
@@ -603,7 +700,7 @@ function TableView(props) {
 				...resolvedCellStyles
 			},
 			...column.cellProps?.(ctx),
-			children: [content, link !== void 0 ? /* @__PURE__ */ jsx(Action, {
+			children: [displayContent, link !== void 0 ? /* @__PURE__ */ jsx(Action, {
 				"data-element": "RowLink",
 				to: link,
 				tabIndex: -1,
@@ -630,9 +727,9 @@ function TableView(props) {
 		}, `pinned-${edge}-${rowKey}`);
 	}
 	/** The cells of one body row. Shared by both render paths. */
-	function renderRowCells(row, rowIndex) {
-		const rowKey = getRowKey(row, rowIndex);
-		return columns.map((column) => renderCell(column, row, rowIndex, rowKey, rowIndex === rows.length - 1));
+	function renderRowCells(row, rowIndex, treeItemAria) {
+		const rowKey = bodyRowKey(row, rowIndex);
+		return columns.map((column) => renderCell(column, row, rowIndex, rowKey, rowIndex === rows.length - 1, void 0, treeItemAria));
 	}
 	/**
 	* The `<tr>` shell. Virtuoso owns the element in the virtualized path (it
@@ -640,15 +737,17 @@ function TableView(props) {
 	* props rather than the element.
 	*/
 	function getRowElementProps(row, rowIndex) {
-		const rowKey = getRowKey(row, rowIndex);
+		const rowKey = bodyRowKey(row, rowIndex);
 		const isSelected = selection?.isSelected(rowKey) ?? false;
-		const extra = getRowProps?.({
+		const ctx = {
 			row,
 			rowKey,
 			rowIndex,
 			section: "body",
-			isSelected
-		});
+			isSelected,
+			tree: treeRowState(rowIndex)
+		};
+		const extra = getRowProps?.(ctx);
 		return {
 			"data-element": "Row",
 			"data-key": String(rowKey),
@@ -659,7 +758,7 @@ function TableView(props) {
 			"data-selected": isSelected ? "" : void 0,
 			"data-disabled": selection?.isRowDisabled(rowKey) ? "" : void 0,
 			role: "row",
-			tabIndex: isReorderable ? rowIndex === focusedRowIndex ? 0 : -1 : void 0,
+			tabIndex: !tree && isReorderable ? rowIndex === focusedRowIndex ? 0 : -1 : void 0,
 			"aria-selected": selection?.isEnabled ? isSelected : void 0,
 			"aria-rowindex": bodyRowIndex(rowIndex),
 			title: extra?.tooltip,
@@ -675,15 +774,24 @@ function TableView(props) {
 	}
 	function renderRow(row, rowIndex, isVirtual = false) {
 		const { height, ...rowProps } = getRowElementProps(row, rowIndex);
+		const rowKey = bodyRowKey(row, rowIndex);
+		const treeNode = tree?.nodes[rowIndex];
+		const treeEntry = tree?.entries[rowIndex];
 		return /* @__PURE__ */ jsx(TableRow, {
-			rowKey: getRowKey(row, rowIndex),
+			rowKey,
 			rowProps,
 			height,
 			index: isVirtual ? rowIndex : void 0,
 			measureRef: isVirtual ? virtualizer.measureElement : void 0,
 			dragState: isReorderable ? dragState : void 0,
 			dropState: isReorderable ? dropState : void 0,
-			children: renderRowCells(row, rowIndex)
+			tree: treeNode && treeEntry ? {
+				state: tree.state,
+				node: treeNode,
+				entry: treeEntry,
+				isVirtualized: isVirtual
+			} : void 0,
+			children: (treeItemAria) => renderRowCells(row, rowIndex, treeItemAria)
 		}, rowProps["data-key"]);
 	}
 	function renderSpacerRow(height, position) {
@@ -705,7 +813,7 @@ function TableView(props) {
 	* is merely *capable* of dragging keeps its ordinary structure.
 	*/
 	function withDropIndicators(row, index, isVirtual = false) {
-		const rowKey = getRowKey(row, index);
+		const rowKey = bodyRowKey(row, index);
 		const rowNode = renderRow(row, index, isVirtual);
 		if (!isReorderable || !dropState) return rowNode;
 		return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -734,11 +842,22 @@ function TableView(props) {
 	const virtualizer = useVirtualizer({
 		count: shouldVirtualize ? rows.length : 0,
 		getScrollElement: () => scrollerRef.current,
-		getItemKey: (index) => String(getRowKey(rowsRef.current[index], index)),
+		getItemKey: (index) => String(rowKeys?.[index] ?? getRowKey(rowsRef.current[index], index)),
 		estimateSize: () => (rowHeight ?? (rowSizeKey ? SIZES[rowSizeKey] : ESTIMATED_ROW_HEIGHT[size ?? "medium"])) + 1,
 		measureElement: (element) => element.getBoundingClientRect().height,
 		overscan
 	});
+	const focusedTreeKey = tree?.state.selectionManager.focusedKey;
+	useEffect(() => {
+		if (!shouldVirtualize || focusedTreeKey == null || !tree) return;
+		const index = tree.entries.findIndex((entry) => entry.key === focusedTreeKey);
+		if (index >= 0) virtualizer.scrollToIndex(index, { align: "auto" });
+	}, [
+		focusedTreeKey,
+		shouldVirtualize,
+		tree,
+		virtualizer
+	]);
 	const scrollability = useScrollability(scrollerEl);
 	/**
 	* Roving tabindex over the rows, so a reorderable table can be operated from
@@ -908,7 +1027,8 @@ function TableView(props) {
 		const row = rows[index];
 		return row === void 0 ? null : {
 			row,
-			index
+			index,
+			key: bodyRowKey(row, index)
 		};
 	}
 	const virtualItems = shouldVirtualize ? virtualizer.getVirtualItems() : [];
@@ -929,7 +1049,7 @@ function TableView(props) {
 	});
 	const tableProps = {
 		"data-element": "Table",
-		role: "grid",
+		role: tree ? "treegrid" : "grid",
 		"aria-label": ariaLabel,
 		"aria-busy": isLoading || void 0,
 		"aria-rowcount": headerRowCount + pinnedTopCount + bodyRowCount + pinnedBottomCount,
@@ -947,6 +1067,40 @@ function TableView(props) {
 		renderSpacerRow(paddingBottom, "bottom")
 	] });
 	else bodyContent = rows.map((row, index) => withDropIndicators(row, index));
+	const tableContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		colGroup,
+		isHeaderHidden ? null : /* @__PURE__ */ jsx("thead", {
+			"data-element": "Head",
+			children: headerRow
+		}),
+		/* @__PURE__ */ jsxs("tbody", {
+			"data-element": "Body",
+			...collectionProps,
+			ref: handleBodyRef,
+			children: [
+				pinnedTopRows?.map((row, index) => renderPinnedRow(row, index, "top")),
+				bodyContent,
+				pinnedBottomRows?.map((row, index) => renderPinnedRow(row, index, "bottom")),
+				isLoadingMore ? renderSkeletonRows(loadMoreSkeletonCount, "load-more") : null,
+				onLoadMore && hasRows ? /* @__PURE__ */ jsx("tr", {
+					"data-sentinel": "",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("td", {
+						colSpan: Math.max(columnCount, 1),
+						style: {
+							height: 1,
+							padding: 0,
+							border: 0
+						},
+						children: /* @__PURE__ */ jsx("div", {
+							ref: sentinelRef,
+							style: { height: 1 }
+						})
+					})
+				}) : null
+			]
+		})
+	] });
 	if (columnCount === 0 && isLoading) return /* @__PURE__ */ jsxs(TableElement, {
 		ref: rootRef,
 		qa: qa || "Table",
@@ -989,16 +1143,16 @@ function TableView(props) {
 						const found = rowFromEvent(event.target);
 						if (found) {
 							event.stopPropagation();
-							openContextMenuFor(found.row, found.index, getRowKey(found.row, found.index), event);
+							openContextMenuFor(found.row, found.index, found.key, event);
 						}
 						return;
 					}
 					if (event.key === "Enter" && onRowAction) {
 						const found = rowFromEvent(event.target);
-						if (found && !event.target.closest("a, button, input, select, textarea, [role=\"button\"]")) onRowAction(found.row, getRowKey(found.row, found.index));
+						if (found && !event.target.closest("a, button, input, select, textarea, [role=\"button\"]")) onRowAction(found.row, found.key);
 						return;
 					}
-					if (isReorderable && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+					if (!tree && isReorderable && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
 						if (dragState?.draggingKeys?.size) return;
 						if (moveRowFocus(event.target, event.key === "ArrowDown" ? 1 : -1)) event.preventDefault();
 						return;
@@ -1027,43 +1181,15 @@ function TableView(props) {
 						description: t("itemTable.copiedCells", "{{count}} cells copied", { count: cellSelection.cellCount })
 					});
 				},
-				children: /* @__PURE__ */ jsxs("table", {
+				children: tree ? /* @__PURE__ */ jsx(TreeGridTable, {
+					tree,
+					tableProps,
+					style: layout.totalWidth != null ? { width: layout.totalWidth } : void 0,
+					children: tableContent
+				}) : /* @__PURE__ */ jsx("table", {
 					...tableProps,
 					style: layout.totalWidth != null ? { width: layout.totalWidth } : void 0,
-					children: [
-						colGroup,
-						isHeaderHidden ? null : /* @__PURE__ */ jsx("thead", {
-							"data-element": "Head",
-							children: headerRow
-						}),
-						/* @__PURE__ */ jsxs("tbody", {
-							"data-element": "Body",
-							...collectionProps,
-							ref: handleBodyRef,
-							children: [
-								pinnedTopRows?.map((row, index) => renderPinnedRow(row, index, "top")),
-								bodyContent,
-								pinnedBottomRows?.map((row, index) => renderPinnedRow(row, index, "bottom")),
-								isLoadingMore ? renderSkeletonRows(loadMoreSkeletonCount, "load-more") : null,
-								onLoadMore && hasRows ? /* @__PURE__ */ jsx("tr", {
-									"data-sentinel": "",
-									"aria-hidden": "true",
-									children: /* @__PURE__ */ jsx("td", {
-										colSpan: Math.max(columnCount, 1),
-										style: {
-											height: 1,
-											padding: 0,
-											border: 0
-										},
-										children: /* @__PURE__ */ jsx("div", {
-											ref: sentinelRef,
-											style: { height: 1 }
-										})
-									})
-								}) : null
-							]
-						})
-					]
+					children: tableContent
 				})
 			}),
 			/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", {