@octanejs/aria 0.0.5 → 0.0.7

package/src/stately/table/useTreeGridState.ts

@@ -0,0 +1,248 @@
+// Ported from react-stately (source: .react-spectrum/packages/react-stately/src/table/useTreeGridState.ts).
+// octane adaptations: public-hook slot threading (splitSlot/subSlot) per the binding
+// convention; React element types → `any` descriptors; upstream's implicitly-typed
+// `nodes` parameter is typed as `Iterable<GridNode<T>>`; the feature flag import points
+// at the ported `../flags`; explicit dependency arrays are kept verbatim (they retain
+// React's exact behavior in octane).
+import type { Key } from '@react-types/shared';
+import { useMemo } from 'octane';
+
+import { S, splitSlot, subSlot } from '../../internal';
+import { CollectionBuilder } from '../collections/CollectionBuilder';
+import type { GridNode } from '../grid/GridCollection';
+import { TableCollection } from './TableCollection';
+import { tableNestedRows } from '../flags';
+import { type TableState, type TableStateProps, useTableState } from './useTableState';
+import { useControlledState } from '../utils/useControlledState';
+
+export interface TreeGridState<T> extends Omit<TableState<T>, 'expandedKeys'> {
+	/** A set of keys for items that are expanded. */
+	expandedKeys: 'all' | Set<Key>;
+	/** Toggles the expanded state for a row by its key. */
+	toggleKey(key: Key): void;
+	/** The key map containing nodes representing the collection's tree grid structure. */
+	keyMap: Map<Key, GridNode<T>>;
+	/** The number of leaf columns provided by the user. */
+	userColumnCount: number;
+}
+
+export interface TreeGridStateProps<T> extends Omit<TableStateProps<T>, 'collection'> {
+	/** The currently expanded keys in the collection (controlled). */
+	UNSTABLE_expandedKeys?: 'all' | Iterable<Key>;
+	/** The initial expanded keys in the collection (uncontrolled). */
+	UNSTABLE_defaultExpandedKeys?: 'all' | Iterable<Key>;
+	/** Handler that is called when items are expanded or collapsed. */
+	UNSTABLE_onExpandedChange?: (keys: Set<Key>) => any;
+}
+
+/**
+ * Provides state management for a tree grid component. Handles building a collection of columns and
+ * rows from props. In addition, it tracks and manages expanded rows, row selection, and sort order
+ * changes.
+ */
+export function UNSTABLE_useTreeGridState<T extends object>(
+	props: TreeGridStateProps<T>,
+): TreeGridState<T>;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function UNSTABLE_useTreeGridState<T extends object>(
+	props: TreeGridStateProps<T>,
+	slot: symbol | undefined,
+): TreeGridState<T>;
+export function UNSTABLE_useTreeGridState(...args: any[]): TreeGridState<any> {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('UNSTABLE_useTreeGridState');
+	const props = user[0] as TreeGridStateProps<any>;
+
+	let {
+		selectionMode = 'none',
+		showSelectionCheckboxes,
+		showDragButtons,
+		UNSTABLE_expandedKeys: propExpandedKeys,
+		UNSTABLE_defaultExpandedKeys: propDefaultExpandedKeys,
+		UNSTABLE_onExpandedChange,
+		children,
+	} = props;
+
+	if (!tableNestedRows()) {
+		throw new Error('Feature flag for table nested rows must be enabled to use useTreeGridState.');
+	}
+
+	let [expandedKeys, setExpandedKeys] = useControlledState(
+		propExpandedKeys ? convertExpanded(propExpandedKeys) : undefined,
+		propDefaultExpandedKeys ? convertExpanded(propDefaultExpandedKeys) : new Set(),
+		UNSTABLE_onExpandedChange,
+		subSlot(slot, 'expanded'),
+	);
+
+	let context = useMemo(
+		() => ({
+			showSelectionCheckboxes: showSelectionCheckboxes && selectionMode !== 'none',
+			showDragButtons: showDragButtons,
+			selectionMode,
+			columns: [],
+		}),
+		[children, showSelectionCheckboxes, selectionMode, showDragButtons],
+		subSlot(slot, 'context'),
+	);
+
+	let builder = useMemo(() => new CollectionBuilder<any>(), [], subSlot(slot, 'builder'));
+	let nodes = useMemo(
+		() => builder.build({ children: children as any }, context),
+		[builder, children, context],
+		subSlot(slot, 'nodes'),
+	);
+	let treeGridCollection = useMemo(
+		() => {
+			return generateTreeGridCollection<any>(nodes, {
+				showSelectionCheckboxes,
+				showDragButtons,
+				expandedKeys,
+			});
+		},
+		[nodes, showSelectionCheckboxes, showDragButtons, expandedKeys],
+		subSlot(slot, 'treeGrid'),
+	);
+
+	let onToggle = (key: Key) => {
+		setExpandedKeys(toggleKey(expandedKeys, key, treeGridCollection));
+	};
+
+	let collection = useMemo(
+		() => {
+			return new TableCollection(treeGridCollection.tableNodes, null, context);
+		},
+		[context, treeGridCollection.tableNodes],
+		subSlot(slot, 'collection'),
+	);
+
+	let tableState = useTableState({ ...props, collection }, subSlot(slot, 'table'));
+	return {
+		...tableState,
+		keyMap: treeGridCollection.keyMap,
+		userColumnCount: treeGridCollection.userColumnCount,
+		expandedKeys,
+		toggleKey: onToggle,
+		treeColumn: tableState.treeColumn ?? collection.rowHeaderColumnKeys.keys().next().value ?? null,
+	};
+}
+
+function toggleKey<T>(
+	currentExpandedKeys: 'all' | Set<Key>,
+	key: Key,
+	collection: TreeGridCollection<T>,
+): Set<Key> {
+	let updatedExpandedKeys: Set<Key>;
+	if (currentExpandedKeys === 'all') {
+		updatedExpandedKeys = new Set(
+			collection.flattenedRows
+				.filter(
+					(row) =>
+						row.props.UNSTABLE_childItems || row.props.children.length > collection.userColumnCount,
+				)
+				.map((row) => row.key),
+		);
+		updatedExpandedKeys.delete(key);
+	} else {
+		updatedExpandedKeys = new Set(currentExpandedKeys);
+		if (updatedExpandedKeys.has(key)) {
+			updatedExpandedKeys.delete(key);
+		} else {
+			updatedExpandedKeys.add(key);
+		}
+	}
+
+	return updatedExpandedKeys;
+}
+
+function convertExpanded(expanded: 'all' | Iterable<Key>): 'all' | Set<Key> {
+	if (!expanded) {
+		return new Set<Key>();
+	}
+
+	return expanded === 'all' ? 'all' : new Set(expanded);
+}
+
+interface TreeGridCollectionOptions {
+	showSelectionCheckboxes?: boolean;
+	showDragButtons?: boolean;
+	expandedKeys: 'all' | Set<Key>;
+}
+
+interface TreeGridCollection<T> {
+	keyMap: Map<Key, GridNode<T>>;
+	tableNodes: GridNode<T>[];
+	flattenedRows: GridNode<T>[];
+	userColumnCount: number;
+}
+function generateTreeGridCollection<T>(
+	nodes: Iterable<GridNode<T>>,
+	opts: TreeGridCollectionOptions,
+): TreeGridCollection<T> {
+	let { expandedKeys = new Set() } = opts;
+
+	let body: GridNode<T> | null = null;
+	let flattenedRows: GridNode<T>[] = [];
+	let userColumnCount = 0;
+	let originalColumns: GridNode<T>[] = [];
+	let keyMap = new Map();
+
+	let topLevelRows: GridNode<T>[] = [];
+	let visit = (node: GridNode<T>) => {
+		switch (node.type) {
+			case 'body':
+				body = node;
+				keyMap.set(body.key, body);
+				break;
+			case 'column':
+				if (!node.hasChildNodes) {
+					userColumnCount++;
+				}
+				break;
+			case 'item':
+				topLevelRows.push(node);
+				return;
+		}
+
+		for (let child of node.childNodes) {
+			visit(child);
+		}
+	};
+
+	for (let node of nodes) {
+		if (node.type === 'column') {
+			originalColumns.push(node);
+		}
+		visit(node);
+	}
+
+	// Update each grid node in the treegrid table with values specific to a treegrid structure. Also store a set of flattened row nodes for TableCollection to consume
+	let visitNode = (node: GridNode<T>) => {
+		if (node.type === 'item') {
+			flattenedRows.push(node);
+		}
+
+		keyMap.set(node.key, node);
+
+		for (let child of node.childNodes) {
+			if (!(child.type === 'item' && expandedKeys !== 'all' && !expandedKeys.has(node.key))) {
+				if (child.type === 'item') {
+					visitNode(child);
+				} else {
+					// We enforce that the cells come before rows so can just reuse cell index
+					visitNode(child);
+				}
+			}
+		}
+	};
+
+	for (let node of topLevelRows) {
+		visitNode(node as GridNode<T>);
+	}
+
+	return {
+		keyMap,
+		userColumnCount,
+		flattenedRows,
+		tableNodes: [...originalColumns, { ...body!, childNodes: flattenedRows }],
+	};
+}

package/src/table/TableKeyboardDelegate.ts

@@ -0,0 +1,205 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/table/TableKeyboardDelegate.ts).
+// octane adaptations:
+// - `getChildNodes`/`getFirstItem` come from the ported stately collections helpers and
+//   `ITableCollection` from the ported stately table collection.
+// - Pure class (no hooks) — no slot threading involved.
+import { getChildNodes, getFirstItem } from '../stately/collections/getChildNodes';
+import { GridKeyboardDelegate } from '../grid/GridKeyboardDelegate';
+import type { ITableCollection } from '../stately/table/TableCollection';
+import type { Key, Node } from '@react-types/shared';
+
+export class TableKeyboardDelegate<T> extends GridKeyboardDelegate<T, ITableCollection<T>> {
+	protected isCell(node: Node<T>): boolean {
+		return node.type === 'cell' || node.type === 'rowheader' || node.type === 'column';
+	}
+
+	getKeyBelow(key: Key, options?: { includeDisabled?: boolean }): Key | null {
+		let startItem = this.collection.getItem(key);
+		if (!startItem) {
+			return null;
+		}
+
+		// If focus was on a column, then focus the first child column if any,
+		// or find the corresponding cell in the first row.
+		if (startItem.type === 'column') {
+			let child = getFirstItem(getChildNodes(startItem, this.collection));
+			if (child) {
+				return child.key;
+			}
+
+			let firstKey = this.getFirstKey();
+			if (firstKey == null) {
+				return null;
+			}
+
+			let firstItem = this.collection.getItem(firstKey);
+			if (!firstItem) {
+				return null;
+			}
+
+			return super.getKeyForItemInRowByIndex(firstKey, startItem.index);
+		}
+
+		return super.getKeyBelow(key, options);
+	}
+
+	getKeyAbove(key: Key, options?: { includeDisabled?: boolean }): Key | null {
+		let startItem = this.collection.getItem(key);
+		if (!startItem) {
+			return null;
+		}
+
+		// If focus was on a column, focus the parent column if any
+		if (startItem.type === 'column') {
+			let parent =
+				startItem.parentKey != null ? this.collection.getItem(startItem.parentKey) : null;
+			if (parent && parent.type === 'column') {
+				return parent.key;
+			}
+
+			return null;
+		}
+
+		// only return above row key if not header row
+		let superKey = super.getKeyAbove(key, options);
+		let superItem = superKey != null ? this.collection.getItem(superKey) : null;
+		if (superItem && superItem.type !== 'headerrow') {
+			return superKey;
+		}
+
+		// If no item was found, and focus was on a cell, then focus the
+		// corresponding column header.
+		if (this.isCell(startItem)) {
+			return this.collection.columns[startItem.index].key;
+		}
+
+		// If focus was on a row, then focus the first column header.
+		return this.collection.columns[0].key;
+	}
+
+	private findNextColumnKey(column: Node<T>): Key | null {
+		// Search following columns
+		let key = this.findNextKey(column.key, (item) => item.type === 'column');
+		if (key != null) {
+			return key;
+		}
+
+		// Wrap around to the first column
+		let row = this.collection.headerRows[column.level];
+		for (let item of getChildNodes(row, this.collection)) {
+			if (item.type === 'column') {
+				return item.key;
+			}
+		}
+
+		return null;
+	}
+
+	private findPreviousColumnKey(column: Node<T>): Key | null {
+		// Search previous columns
+		let key = this.findPreviousKey(column.key, (item) => item.type === 'column');
+		if (key != null) {
+			return key;
+		}
+
+		// Wrap around to the last column
+		let row = this.collection.headerRows[column.level];
+		let childNodes = [...getChildNodes(row, this.collection)];
+		for (let i = childNodes.length - 1; i >= 0; i--) {
+			let item = childNodes[i];
+			if (item.type === 'column') {
+				return item.key;
+			}
+		}
+
+		return null;
+	}
+
+	getKeyRightOf(key: Key): Key | null {
+		let item = this.collection.getItem(key);
+		if (!item) {
+			return null;
+		}
+
+		// If focus was on a column, then focus the next column
+		if (item.type === 'column') {
+			return this.direction === 'rtl'
+				? this.findPreviousColumnKey(item)
+				: this.findNextColumnKey(item);
+		}
+
+		return super.getKeyRightOf(key);
+	}
+
+	getKeyLeftOf(key: Key): Key | null {
+		let item = this.collection.getItem(key);
+		if (!item) {
+			return null;
+		}
+
+		// If focus was on a column, then focus the previous column
+		if (item.type === 'column') {
+			return this.direction === 'rtl'
+				? this.findNextColumnKey(item)
+				: this.findPreviousColumnKey(item);
+		}
+
+		return super.getKeyLeftOf(key);
+	}
+
+	getKeyForSearch(search: string, fromKey?: Key): Key | null {
+		if (!this.collator) {
+			return null;
+		}
+
+		let collection = this.collection;
+		let key = fromKey ?? this.getFirstKey();
+		if (key == null) {
+			return null;
+		}
+
+		// If the starting key is a cell, search from its parent row.
+		let startItem = collection.getItem(key);
+		if (startItem?.type === 'cell') {
+			key = startItem.parentKey ?? null;
+		}
+
+		let hasWrapped = false;
+		while (key != null) {
+			let item = collection.getItem(key);
+			if (!item) {
+				return null;
+			}
+
+			if (item.textValue) {
+				let substring = item.textValue.slice(0, search.length);
+				if (this.collator.compare(substring, search) === 0) {
+					return item.key;
+				}
+			}
+
+			// Check each of the row header cells in this row for a match
+			for (let cell of getChildNodes(item, this.collection)) {
+				let column = collection.columns[cell.index];
+				if (collection.rowHeaderColumnKeys.has(column.key) && cell.textValue) {
+					let substring = cell.textValue.slice(0, search.length);
+					if (this.collator.compare(substring, search) === 0) {
+						// If we started on a cell, end on the matching cell. Otherwise, end on the row.
+						let fromItem = fromKey != null ? collection.getItem(fromKey) : startItem;
+						return fromItem?.type === 'cell' ? cell.key : item.key;
+					}
+				}
+			}
+
+			key = this.getKeyBelow(key);
+
+			// Wrap around when reaching the end of the collection
+			if (key == null && !hasWrapped) {
+				key = this.getFirstKey();
+				hasWrapped = true;
+			}
+		}
+
+		return null;
+	}
+}

package/src/table/useTable.ts

@@ -0,0 +1,175 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/table/useTable.ts).
+// octane adaptations:
+// - `TableState`/`TreeGridState` come from the ported stately table hooks; the grid-area
+//   imports resolve to the ported src/grid/ modules.
+// - The Parcel glob intl import becomes the generated src/intl/table index (verbatim
+//   dictionaries).
+// - Public-hook slot threading (splitSlot/subSlot); explicit dependency arrays are kept
+//   verbatim.
+import { announce } from '../live-announcer/LiveAnnouncer';
+
+import { GridAria, GridProps, useGrid } from '../grid/useGrid';
+import { gridIds } from './utils';
+import intlMessages from '../intl/table';
+import type { Key, LayoutDelegate, Rect, RefObject, Size } from '@react-types/shared';
+import { mergeProps } from '../utils/mergeProps';
+import { TableKeyboardDelegate } from './TableKeyboardDelegate';
+import type { TableState } from '../stately/table/useTableState';
+import type { TreeGridState } from '../stately/table/useTreeGridState';
+import { useCollator } from '../i18n/useCollator';
+import { useDescription } from '../utils/useDescription';
+import { useId } from '../utils/useId';
+import { useLocale } from '../i18n/I18nProvider';
+import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';
+import { useMemo } from 'octane';
+import { useUpdateEffect } from '../utils/useUpdateEffect';
+
+import { S, splitSlot, subSlot } from '../internal';
+
+export interface AriaTableProps extends GridProps {
+	/**
+	 * The layout object for the table. Computes what content is visible and how to position and style
+	 * them.
+	 */
+	layoutDelegate?: LayoutDelegate;
+	/** @deprecated - Use layoutDelegate instead. */
+	layout?: DeprecatedLayout;
+}
+
+interface DeprecatedLayout {
+	getLayoutInfo(key: Key): DeprecatedLayoutInfo;
+	getContentSize(): Size;
+	virtualizer: DeprecatedVirtualizer;
+}
+
+interface DeprecatedLayoutInfo {
+	rect: Rect;
+}
+
+interface DeprecatedVirtualizer {
+	visibleRect: Rect;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a table component. A table displays
+ * data in rows and columns and enables a user to navigate its contents via directional navigation
+ * keys, and optionally supports row selection and sorting.
+ *
+ * @param props - Props for the table.
+ * @param state - State for the table, as returned by `useTableState`.
+ * @param ref - The ref attached to the table element.
+ */
+export function useTable<T>(
+	props: AriaTableProps,
+	state: TableState<T> | TreeGridState<T>,
+	ref: RefObject<HTMLElement | null>,
+): GridAria;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function useTable<T>(
+	props: AriaTableProps,
+	state: TableState<T> | TreeGridState<T>,
+	ref: RefObject<HTMLElement | null>,
+	slot: symbol | undefined,
+): GridAria;
+export function useTable(...args: any[]): GridAria {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useTable');
+	const props = user[0] as AriaTableProps;
+	const state = user[1] as TableState<any> | TreeGridState<any>;
+	const ref = user[2] as RefObject<HTMLElement | null>;
+
+	let { keyboardDelegate, isVirtualized, layoutDelegate, layout } = props;
+
+	// By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
+	// When virtualized, the layout object will be passed in as a prop and override this.
+	let collator = useCollator({ usage: 'search', sensitivity: 'base' }, subSlot(slot, 'collator'));
+	let { direction } = useLocale(subSlot(slot, 'locale'));
+	let disabledBehavior = state.selectionManager.disabledBehavior;
+	let delegate = useMemo(
+		() =>
+			keyboardDelegate ||
+			new TableKeyboardDelegate({
+				collection: state.collection,
+				disabledKeys: state.disabledKeys,
+				disabledBehavior,
+				ref,
+				direction,
+				collator,
+				layoutDelegate,
+				layout,
+			}),
+		[
+			keyboardDelegate,
+			state.collection,
+			state.disabledKeys,
+			disabledBehavior,
+			ref,
+			direction,
+			collator,
+			layoutDelegate,
+			layout,
+		],
+		subSlot(slot, 'delegate'),
+	);
+	let id = useId(props.id, subSlot(slot, 'id'));
+	gridIds.set(state as TableState<any>, id);
+
+	let { gridProps } = useGrid(
+		{
+			...props,
+			id,
+			keyboardDelegate: delegate,
+		},
+		state,
+		ref,
+		subSlot(slot, 'grid'),
+	);
+
+	// Override to include header rows
+	if (isVirtualized) {
+		gridProps['aria-rowcount'] = state.collection.size + state.collection.headerRows.length;
+	}
+
+	if (state.treeColumn != null) {
+		gridProps.role = 'treegrid';
+	}
+
+	let { column, direction: sortDirection } = state.sortDescriptor || {};
+	let stringFormatter = useLocalizedStringFormatter(
+		intlMessages,
+		'@react-aria/table',
+		subSlot(slot, 'strings'),
+	);
+	let sortDescription = useMemo(
+		() => {
+			let columnName = state.collection.columns.find((c) => c.key === column)?.textValue ?? '';
+			return sortDirection && column
+				? stringFormatter.format(`${sortDirection}Sort`, { columnName })
+				: undefined;
+		},
+		[sortDirection, column, state.collection.columns],
+		subSlot(slot, 'sortDescription'),
+	);
+
+	let descriptionProps = useDescription(sortDescription, subSlot(slot, 'description'));
+
+	// Only announce after initial render, tabbing to the table will tell you the initial sort info already
+	useUpdateEffect(
+		() => {
+			if (sortDescription) {
+				announce(sortDescription, 'assertive', 500);
+			}
+		},
+		[sortDescription],
+		subSlot(slot, 'announceSort'),
+	);
+
+	return {
+		gridProps: mergeProps(gridProps, descriptionProps, {
+			// merge sort description with long press information
+			'aria-describedby': [descriptionProps['aria-describedby'], gridProps['aria-describedby']]
+				.filter(Boolean)
+				.join(' '),
+		}),
+	};
+}

package/src/table/useTableCell.ts

@@ -0,0 +1,81 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/table/useTableCell.ts).
+// octane adaptations:
+// - `TableState`/`GridNode` come from the ported stately hooks; `useGridCell` from the
+//   ported src/grid/; `DOMAttributes` is a local structural prop-bag alias.
+// - Public-hook slot threading (splitSlot/subSlot).
+import type { FocusableElement, RefObject } from '@react-types/shared';
+import { getCellId } from './utils';
+import type { GridNode } from '../stately/grid/GridCollection';
+import type { TableState } from '../stately/table/useTableState';
+import { useGridCell } from '../grid/useGridCell';
+
+import { S, splitSlot, subSlot } from '../internal';
+
+// octane adaptation: minimal structural DOMAttributes (upstream's drags React's synthetic
+// handler types along).
+type DOMAttributes = Record<string, any>;
+
+export interface AriaTableCellProps {
+	/**
+	 * An object representing the table cell. Contains all the relevant information that makes up the
+	 * row header.
+	 */
+	node: GridNode<unknown>;
+	/** Whether the cell is contained in a virtual scroller. */
+	isVirtualized?: boolean;
+	/** Whether selection should occur on press up instead of press down. */
+	shouldSelectOnPressUp?: boolean;
+	/**
+	 * Handler that is called when a user performs an action on the cell.
+	 * Please use onCellAction at the collection level instead.
+	 *
+	 * @deprecated
+	 */
+	onAction?: () => void;
+}
+
+export interface TableCellAria {
+	/** Props for the table cell element. */
+	gridCellProps: DOMAttributes;
+	/** Whether the cell is currently in a pressed state. */
+	isPressed: boolean;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a cell in a table.
+ *
+ * @param props - Props for the cell.
+ * @param state - State of the table, as returned by `useTableState`.
+ * @param ref - The ref attached to the cell element.
+ */
+export function useTableCell<T>(
+	props: AriaTableCellProps,
+	state: TableState<T>,
+	ref: RefObject<FocusableElement | null>,
+): TableCellAria;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function useTableCell<T>(
+	props: AriaTableCellProps,
+	state: TableState<T>,
+	ref: RefObject<FocusableElement | null>,
+	slot: symbol | undefined,
+): TableCellAria;
+export function useTableCell(...args: any[]): TableCellAria {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useTableCell');
+	const props = user[0] as AriaTableCellProps;
+	const state = user[1] as TableState<any>;
+	const ref = user[2] as RefObject<FocusableElement | null>;
+
+	let { gridCellProps, isPressed } = useGridCell(props, state, ref, subSlot(slot, 'gridCell'));
+	let columnKey = props.node.column?.key;
+	if (columnKey != null && state.collection.rowHeaderColumnKeys.has(columnKey)) {
+		gridCellProps.role = 'rowheader';
+		gridCellProps.id = getCellId(state, props.node.parentKey!, columnKey);
+	}
+
+	return {
+		gridCellProps,
+		isPressed,
+	};
+}