@proyecto-viviana/solidaria 0.3.0 → 0.4.1

package/dist/_chunk/table.jsx

@@ -0,0 +1,1088 @@
+import { i as mergeProps$1 } from "./env.jsx";
+import { S as scrollIntoViewport, i as createDescription } from "./utils.jsx";
+import { o as getInteractionModality } from "./createInteractionModality.jsx";
+import { i as useLocale } from "./locale.jsx";
+import { n as createSelectableItem } from "./createSelectableItem.jsx";
+import { t as announce } from "./announce.jsx";
+import { createEffect, createMemo, createSignal, on } from "solid-js";
+import { createId } from "@proyecto-viviana/solid-stately";
+//#region src/table/createTable.ts
+/**
+* createTable - Provides accessibility for a table component.
+* Based on @react-aria/table/useTable.
+*/
+const tableMap = /* @__PURE__ */ new WeakMap();
+/**
+* Get the table metadata for child components.
+*/
+function getTableData(state) {
+	return tableMap.get(state);
+}
+/**
+* Helper to get cells from a row by iterating children
+*/
+function getChildCells(collection, rowKey) {
+	return [...collection.getChildren(rowKey)].filter((node) => node.type === "cell" || node.type === "rowheader");
+}
+/**
+* Helper to get cell at specific index in a row
+*/
+function getCellAtIndex(collection, rowKey, index) {
+	return getChildCells(collection, rowKey)[index] ?? null;
+}
+/**
+* Helper to check if a node is a cell
+*/
+function isCell(node) {
+	return node?.type === "cell" || node?.type === "rowheader";
+}
+/**
+* Helper to check if a node is a row
+*/
+function isRow(node) {
+	return node?.type === "item";
+}
+/**
+* Creates accessibility props for a table component.
+*/
+function createTable(props, state, ref) {
+	const id = createId(props().id);
+	const locale = useLocale();
+	let prevSortDescriptor = null;
+	let isFirstRender = true;
+	let typeaheadBuffer = "";
+	let typeaheadTimeout;
+	const storeTableData = () => {
+		const s = state();
+		const p = props();
+		tableMap.set(s, {
+			tableId: id,
+			actions: {
+				onRowAction: p.onRowAction,
+				onCellAction: p.onCellAction
+			},
+			shouldSelectOnPressUp: p.shouldSelectOnPressUp,
+			focusMode: p.focusMode
+		});
+	};
+	createMemo(() => {
+		storeTableData();
+	});
+	createEffect(on(() => state().sortDescriptor, (sortDescriptor) => {
+		if (isFirstRender) {
+			isFirstRender = false;
+			prevSortDescriptor = sortDescriptor;
+			return;
+		}
+		if (sortDescriptor && (sortDescriptor.column !== prevSortDescriptor?.column || sortDescriptor.direction !== prevSortDescriptor?.direction)) announce(`Sorted by ${state().collection.columns.find((c) => c.key === sortDescriptor.column)?.textValue ?? String(sortDescriptor.column)}, ${sortDescriptor.direction === "ascending" ? "ascending" : "descending"}`, "assertive", 500);
+		prevSortDescriptor = sortDescriptor;
+	}));
+	const onKeyDown = (e) => {
+		const s = state();
+		const collection = s.collection;
+		const p = props();
+		const focusMode = p.focusMode ?? "row";
+		const isRTL = locale().direction === "rtl";
+		const setFocusedKey = (key) => {
+			s.setFocusedKey(key);
+		};
+		const runTypeahead = (focusedKey, focusedItem) => {
+			if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return false;
+			if (e.key === " " && typeaheadBuffer.length === 0) return false;
+			typeaheadBuffer += e.key.toLocaleLowerCase();
+			if (typeaheadTimeout) clearTimeout(typeaheadTimeout);
+			typeaheadTimeout = setTimeout(() => {
+				typeaheadBuffer = "";
+				typeaheadTimeout = void 0;
+			}, 500);
+			const rows = Array.from(collection).filter((node) => !s.isDisabled(node.key));
+			if (rows.length === 0) return true;
+			const currentRowKey = isCell(focusedItem) && focusedItem.parentKey != null ? focusedItem.parentKey : focusedKey;
+			const currentIndex = rows.findIndex((node) => node.key === currentRowKey);
+			const match = (currentIndex >= 0 ? [...rows.slice(currentIndex + 1), ...rows.slice(0, currentIndex + 1)] : rows).find((node) => collection.getTextValue(node.key).toLocaleLowerCase().startsWith(typeaheadBuffer));
+			if (match) {
+				e.preventDefault();
+				setFocusedKey(match.key);
+			}
+			return true;
+		};
+		if (s.isKeyboardNavigationDisabled) return;
+		const focusedKey = s.focusedKey;
+		if (focusedKey == null) {
+			if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") {
+				const firstKey = collection.getFirstKey();
+				if (firstKey != null) {
+					e.preventDefault();
+					setFocusedKey(firstKey);
+				}
+			}
+			return;
+		}
+		const focusedItem = collection.getItem(focusedKey);
+		if (!focusedItem) return;
+		let nextKey = null;
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				if (isCell(focusedItem) && focusedItem.parentKey != null) {
+					const nextRowKey = collection.getKeyAfter(focusedItem.parentKey);
+					if (nextRowKey != null) {
+						const cellIndex = focusedItem.index;
+						nextKey = getCellAtIndex(collection, nextRowKey, cellIndex)?.key ?? nextRowKey;
+					}
+				} else nextKey = collection.getKeyAfter(focusedKey);
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				if (isCell(focusedItem) && focusedItem.parentKey != null) {
+					const prevRowKey = collection.getKeyBefore(focusedItem.parentKey);
+					if (prevRowKey != null) {
+						const cellIndex = focusedItem.index;
+						nextKey = getCellAtIndex(collection, prevRowKey, cellIndex)?.key ?? prevRowKey;
+					}
+				} else nextKey = collection.getKeyBefore(focusedKey);
+				break;
+			case "ArrowRight": {
+				e.preventDefault();
+				const goNext = !isRTL;
+				if (isRow(focusedItem)) {
+					const cells = getChildCells(collection, focusedKey);
+					if (cells.length > 0) nextKey = goNext ? cells[0].key : cells[cells.length - 1].key;
+				} else if (isCell(focusedItem) && focusedItem.parentKey != null) {
+					const cells = getChildCells(collection, focusedItem.parentKey);
+					const currentIndex = focusedItem.index;
+					const targetIndex = goNext ? currentIndex + 1 : currentIndex - 1;
+					if (targetIndex >= 0 && targetIndex < cells.length) nextKey = cells[targetIndex].key;
+					else if (focusMode === "row") nextKey = focusedItem.parentKey;
+					else nextKey = goNext ? cells[0].key : cells[cells.length - 1].key;
+				}
+				break;
+			}
+			case "ArrowLeft": {
+				e.preventDefault();
+				const goNext = isRTL;
+				if (isRow(focusedItem)) {
+					const cells = getChildCells(collection, focusedKey);
+					if (cells.length > 0) nextKey = goNext ? cells[0].key : cells[cells.length - 1].key;
+				} else if (isCell(focusedItem) && focusedItem.parentKey != null) {
+					const cells = getChildCells(collection, focusedItem.parentKey);
+					const currentIndex = focusedItem.index;
+					const targetIndex = goNext ? currentIndex + 1 : currentIndex - 1;
+					if (targetIndex >= 0 && targetIndex < cells.length) nextKey = cells[targetIndex].key;
+					else if (focusMode === "row") nextKey = focusedItem.parentKey;
+					else nextKey = goNext ? cells[0].key : cells[cells.length - 1].key;
+				}
+				break;
+			}
+			case "Home":
+				e.preventDefault();
+				if (e.ctrlKey) {
+					const firstRowKey = collection.getFirstKey();
+					if (firstRowKey != null) if (isCell(focusedItem) || focusMode === "cell") nextKey = getChildCells(collection, firstRowKey)[0]?.key ?? firstRowKey;
+					else nextKey = firstRowKey;
+				} else if (isCell(focusedItem) && focusedItem.parentKey != null) nextKey = getChildCells(collection, focusedItem.parentKey)[0]?.key ?? null;
+				else nextKey = collection.getFirstKey();
+				break;
+			case "End":
+				e.preventDefault();
+				if (e.ctrlKey) {
+					const lastRowKey = collection.getLastKey();
+					if (lastRowKey != null) if (isCell(focusedItem) || focusMode === "cell") {
+						const cells = getChildCells(collection, lastRowKey);
+						nextKey = cells[cells.length - 1]?.key ?? lastRowKey;
+					} else nextKey = lastRowKey;
+				} else if (isCell(focusedItem) && focusedItem.parentKey != null) {
+					const cells = getChildCells(collection, focusedItem.parentKey);
+					nextKey = cells[cells.length - 1]?.key ?? null;
+				} else nextKey = collection.getLastKey();
+				break;
+			case "PageDown": {
+				e.preventDefault();
+				const el = ref();
+				if (el && el.clientHeight > 0) {
+					const visibleHeight = el.clientHeight;
+					let currentKey = focusedKey;
+					let traveled = 0;
+					if (isCell(focusedItem) && focusedItem.parentKey != null) currentKey = focusedItem.parentKey;
+					while (currentKey != null && traveled < visibleHeight) {
+						const next = collection.getKeyAfter(currentKey);
+						if (next == null) break;
+						const rowElement = el.querySelector(`[data-key="${currentKey}"]`);
+						traveled += rowElement?.clientHeight ?? 40;
+						currentKey = next;
+					}
+					if (currentKey != null) if (isCell(focusedItem)) {
+						const cellIndex = focusedItem.index;
+						nextKey = getCellAtIndex(collection, currentKey, cellIndex)?.key ?? currentKey;
+					} else nextKey = currentKey;
+				} else {
+					let count = 10;
+					let current = isCell(focusedItem) && focusedItem.parentKey != null ? focusedItem.parentKey : focusedKey;
+					while (count > 0 && current != null) {
+						const next = collection.getKeyAfter(current);
+						if (next == null) break;
+						current = next;
+						count--;
+					}
+					if (current != null && isCell(focusedItem)) nextKey = getCellAtIndex(collection, current, focusedItem.index)?.key ?? current;
+					else nextKey = current;
+				}
+				break;
+			}
+			case "PageUp": {
+				e.preventDefault();
+				const el = ref();
+				if (el && el.clientHeight > 0) {
+					const visibleHeight = el.clientHeight;
+					let currentKey = focusedKey;
+					let traveled = 0;
+					if (isCell(focusedItem) && focusedItem.parentKey != null) currentKey = focusedItem.parentKey;
+					while (currentKey != null && traveled < visibleHeight) {
+						const prev = collection.getKeyBefore(currentKey);
+						if (prev == null) break;
+						const rowElement = el.querySelector(`[data-key="${currentKey}"]`);
+						traveled += rowElement?.clientHeight ?? 40;
+						currentKey = prev;
+					}
+					if (currentKey != null) if (isCell(focusedItem)) {
+						const cellIndex = focusedItem.index;
+						nextKey = getCellAtIndex(collection, currentKey, cellIndex)?.key ?? currentKey;
+					} else nextKey = currentKey;
+				} else {
+					let count = 10;
+					let current = isCell(focusedItem) && focusedItem.parentKey != null ? focusedItem.parentKey : focusedKey;
+					while (count > 0 && current != null) {
+						const prev = collection.getKeyBefore(current);
+						if (prev == null) break;
+						current = prev;
+						count--;
+					}
+					if (current != null && isCell(focusedItem)) nextKey = getCellAtIndex(collection, current, focusedItem.index)?.key ?? current;
+					else nextKey = current;
+				}
+				break;
+			}
+			case "Escape":
+				if (p.escapeKeyBehavior !== "none") s.clearSelection();
+				return;
+			case "a":
+				if (e.ctrlKey || e.metaKey) {
+					e.preventDefault();
+					if (s.selectionMode === "multiple") s.selectAll();
+				}
+				return;
+			default:
+				if (runTypeahead(focusedKey, focusedItem)) return;
+				return;
+		}
+		if (nextKey != null) {
+			setFocusedKey(nextKey);
+			if (e.shiftKey && s.selectionMode === "multiple") {
+				const focusedNode = collection.getItem(nextKey);
+				const keyToSelect = focusedNode && isCell(focusedNode) && focusedNode.parentKey != null ? focusedNode.parentKey : nextKey;
+				s.extendSelection(keyToSelect);
+			}
+		}
+	};
+	const onFocus = (e) => {
+		const s = state();
+		if (!ref()?.contains(e.target)) return;
+		if (!s.isFocused) {
+			s.setFocused(true);
+			if (s.focusedKey == null) {
+				const firstKey = s.collection.getFirstKey();
+				if (firstKey != null) s.setFocusedKey(firstKey);
+			}
+		}
+	};
+	const onBlur = (e) => {
+		const s = state();
+		const el = ref();
+		if (el && !el.contains(e.relatedTarget)) s.setFocused(false);
+	};
+	createEffect(() => {
+		const key = state().focusedKey;
+		const el = ref();
+		if (!el || key == null) return;
+		const active = document.activeElement;
+		if (!active || active !== el && !el.contains(active)) return;
+		const target = el.querySelector(`[data-key="${key}"]`);
+		if (target && target !== active) {
+			target.focus();
+			if (getInteractionModality() !== "pointer") scrollIntoViewport(target, { containingElement: el });
+		}
+	});
+	createMemo(() => {
+		const p = props();
+		if (!p["aria-label"] && !p["aria-labelledby"]) console.warn("Table: An aria-label or aria-labelledby prop is required for accessibility.");
+	});
+	const sortDescription = () => {
+		const s = state();
+		const descriptor = s.sortDescriptor;
+		const column = descriptor?.column;
+		const direction = descriptor?.direction;
+		if (!direction || column == null) return;
+		return `sorted by column ${s.collection.columns.find((c) => c.key === column)?.textValue ?? ""} in ${direction} order`;
+	};
+	const sortDescriptionProps = createDescription(sortDescription);
+	const gridProps = createMemo(() => {
+		const p = props();
+		const s = state();
+		const describedBy = [sortDescriptionProps["aria-describedby"], p["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+		const baseProps = {
+			role: "grid",
+			id,
+			"aria-label": p["aria-label"],
+			"aria-labelledby": p["aria-labelledby"],
+			"aria-describedby": describedBy,
+			"aria-multiselectable": s.selectionMode === "multiple" ? "true" : void 0,
+			tabIndex: 0,
+			onKeyDown,
+			onFocus,
+			onBlur
+		};
+		if (p.isVirtualized) {
+			baseProps["aria-rowcount"] = s.collection.rowCount;
+			baseProps["aria-colcount"] = s.collection.columnCount;
+		}
+		return baseProps;
+	});
+	return { get gridProps() {
+		return gridProps();
+	} };
+}
+//#endregion
+//#region src/table/createTableHeaderRow.ts
+/**
+* createTableHeaderRow - Provides accessibility for a table header row.
+* Based on @react-aria/table/useTableHeaderRow.
+*/
+/**
+* Creates accessibility props for a table header row.
+*/
+function createTableHeaderRow(props, _state, _ref) {
+	const rowProps = createMemo(() => {
+		const p = props();
+		const node = p.node;
+		const baseProps = { role: "row" };
+		if (p.isVirtualized && node.rowIndex != null) baseProps["aria-rowindex"] = node.rowIndex + 1;
+		return baseProps;
+	});
+	return { get rowProps() {
+		return rowProps();
+	} };
+}
+//#endregion
+//#region src/table/createTableColumnHeader.ts
+/**
+* createTableColumnHeader - Provides accessibility for a table column header.
+* Based on @react-aria/table/useTableColumnHeader.
+*/
+/**
+* Creates accessibility props for a table column header.
+*/
+function createTableColumnHeader(props, state, _ref) {
+	const [isPressed, setIsPressed] = createSignal(false);
+	let ignoreNextClick = false;
+	let ignoreNextClickTimeout;
+	const isFocused = createMemo(() => {
+		const s = state();
+		const p = props();
+		return s.focusedKey === p.node.key;
+	});
+	const sortDescriptionProps = createDescription(() => props().allowsSorting ? "sortable column" : void 0);
+	const sortColumn = () => {
+		const s = state();
+		const p = props();
+		if (p.allowsSorting) s.sort(p.node.key);
+	};
+	const clearPendingClickIgnore = () => {
+		if (ignoreNextClickTimeout != null) {
+			clearTimeout(ignoreNextClickTimeout);
+			ignoreNextClickTimeout = void 0;
+		}
+	};
+	const ignorePointerGeneratedClick = () => {
+		clearPendingClickIgnore();
+		ignoreNextClick = true;
+		ignoreNextClickTimeout = setTimeout(() => {
+			ignoreNextClick = false;
+			ignoreNextClickTimeout = void 0;
+		}, 0);
+	};
+	const onClick = () => {
+		if (ignoreNextClick) {
+			ignoreNextClick = false;
+			clearPendingClickIgnore();
+			return;
+		}
+		sortColumn();
+	};
+	const onKeyDown = (e) => {
+		if (props().allowsSorting && (e.key === "Enter" || e.key === " " || e.key === "Space" || e.key === "Spacebar")) {
+			e.preventDefault();
+			sortColumn();
+		}
+	};
+	const onFocus = () => {
+		const s = state();
+		const p = props();
+		s.setFocusedKey(p.node.key);
+	};
+	const onPointerDown = (e) => {
+		if (e.button !== 0) return;
+		setIsPressed(true);
+	};
+	const onPointerUp = () => {
+		if (isPressed()) {
+			ignorePointerGeneratedClick();
+			sortColumn();
+		}
+		setIsPressed(false);
+	};
+	const onPointerCancel = () => {
+		setIsPressed(false);
+	};
+	const columnHeaderProps = createMemo(() => {
+		const s = state();
+		const p = props();
+		const node = p.node;
+		const tableData = getTableData(s);
+		let ariaSort = void 0;
+		if (p.allowsSorting) {
+			const sortDescriptor = s.sortDescriptor;
+			if (sortDescriptor?.column === node.key) ariaSort = sortDescriptor.direction;
+			else ariaSort = "none";
+		}
+		const baseProps = {
+			role: "columnheader",
+			id: tableData ? `${tableData.tableId}-${node.key}` : void 0,
+			"aria-sort": ariaSort,
+			"aria-describedby": sortDescriptionProps["aria-describedby"],
+			tabIndex: isFocused() ? 0 : -1,
+			onFocus
+		};
+		if (p.allowsSorting) {
+			baseProps.onClick = onClick;
+			baseProps.onKeyDown = onKeyDown;
+			baseProps.onPointerDown = onPointerDown;
+			baseProps.onPointerUp = onPointerUp;
+			baseProps.onPointerCancel = onPointerCancel;
+			baseProps.onPointerLeave = onPointerCancel;
+			baseProps.style = { cursor: "pointer" };
+		}
+		if (p.isVirtualized && node.column != null) baseProps["aria-colindex"] = node.column + 1;
+		if (node.colspan != null && node.colspan > 1) {
+			baseProps["aria-colspan"] = node.colspan;
+			baseProps.colSpan = node.colspan;
+		}
+		return baseProps;
+	});
+	return { get columnHeaderProps() {
+		return columnHeaderProps();
+	} };
+}
+//#endregion
+//#region src/table/utils.ts
+/**
+* A row is labelled by its row-header cells. Mirrors `@react-aria/table`'s
+* `getRowLabelledBy`, which joins `getCellId(state, rowKey, columnKey)` across
+* `collection.rowHeaderColumnKeys`. We resolve the actual rowheader cell node
+* and rebuild the exact id string `createTableCell` puts on the element
+* (`${tableId}-${parentKey}-${cellKey}`) so the reference always matches a real
+* element, regardless of the cell-key scheme.
+*/
+function getRowLabelledBy(state, rowKey) {
+	const tableId = getTableData(state)?.tableId ?? "table";
+	const collection = state.collection;
+	return [...collection.rowHeaderColumnKeys].map((columnKey) => {
+		const cell = collection.getCell?.(rowKey, columnKey);
+		return cell?.parentKey != null ? `${tableId}-${String(cell.parentKey)}-${String(cell.key)}` : null;
+	}).filter((id) => id != null).join(" ");
+}
+//#endregion
+//#region src/table/createTableRow.ts
+/**
+* createTableRow - Provides accessibility for a table row.
+* Based on @react-aria/table/useTableRow.
+*/
+/**
+* Arrow keys that expand/collapse a tree-grid row, mirroring `@react-aria/table`.
+* Direction is flipped under RTL.
+*/
+const EXPANSION_KEYS = {
+	expand: {
+		ltr: "ArrowRight",
+		rtl: "ArrowLeft"
+	},
+	collapse: {
+		ltr: "ArrowLeft",
+		rtl: "ArrowRight"
+	}
+};
+/**
+* Creates accessibility props for a table row.
+*/
+function createTableRow(props, state, ref) {
+	const locale = useLocale();
+	createMemo(() => state().treeColumn != null);
+	const hasChildRows = createMemo(() => props().node.isExpandable ?? false);
+	const isExpanded = createMemo(() => {
+		const s = state();
+		if (s.treeColumn == null) return false;
+		return s.expandedKeys === "all" || s.expandedKeys.has(props().node.key);
+	});
+	const siblingInfo = createMemo(() => {
+		const s = state();
+		const node = props().node;
+		if (node.parentKey != null) {
+			const parent = s.collection.getItem(node.parentKey);
+			if (parent) {
+				const siblings = parent.childNodes.filter((n) => n.type === "item");
+				return {
+					posinset: node.index + 1,
+					setsize: siblings.length
+				};
+			}
+		}
+		const rootRows = s.collection.body.childNodes.filter((n) => n.type === "item");
+		const rootIndex = rootRows.findIndex((n) => n.key === node.key);
+		return {
+			posinset: rootIndex >= 0 ? rootIndex + 1 : node.index + 1,
+			setsize: rootRows.length
+		};
+	});
+	const isSelected = createMemo(() => {
+		const s = state();
+		const p = props();
+		return s.isSelected(p.node.key);
+	});
+	const selectableItem = createSelectableItem(() => {
+		const s = state();
+		const p = props();
+		const tableData = getTableData(s);
+		const onRowAction = tableData?.actions.onRowAction;
+		const hasAction = !!p.onAction || !!onRowAction || !!p.href;
+		return {
+			key: p.node.key,
+			id: `${tableData?.tableId ?? "table"}-row-${String(p.node.key)}`,
+			isVirtualized: p.isVirtualized,
+			shouldSelectOnPressUp: tableData?.shouldSelectOnPressUp ?? false,
+			isDisabled: !!p.isDisabled || s.collection.size === 0,
+			onAction: hasAction ? (event) => {
+				p.onAction?.();
+				onRowAction?.(p.node.key);
+				if (p.href) p.onLinkAction?.(event);
+			} : void 0
+		};
+	}, {
+		collection: () => state().collection,
+		isFocused: () => state().isFocused,
+		setFocused: (focused) => state().setFocused(focused),
+		focusedKey: () => state().focusedKey,
+		childFocusStrategy: () => state().childFocusStrategy,
+		setFocusedKey: (key, strategy) => state().setFocusedKey(key, strategy),
+		selectionMode: () => state().selectionMode,
+		selectionBehavior: () => state().selectionBehavior,
+		disallowEmptySelection: () => state().disallowEmptySelection,
+		selectedKeys: () => state().selectedKeys,
+		disabledKeys: () => state().disabledKeys,
+		disabledBehavior: () => state().disabledBehavior,
+		isEmpty: () => {
+			const keys = state().selectedKeys;
+			return keys !== "all" && keys.size === 0;
+		},
+		isSelectAll: () => state().selectedKeys === "all",
+		isSelected: (key) => state().isSelected(key),
+		isDisabled: (key) => {
+			const s = state();
+			const item = s.collection.getItem(key);
+			return s.disabledBehavior === "all" && s.isDisabled(key) && item?.props?.disabledBehavior !== "selection";
+		},
+		canSelectItem: (key) => {
+			const s = state();
+			return s.selectionMode !== "none" && !s.isDisabled(key);
+		},
+		setSelectionBehavior: (behavior) => state().setSelectionBehavior(behavior),
+		toggleSelection: (key) => state().toggleSelection(key),
+		replaceSelection: (key) => state().replaceSelection(key),
+		setSelectedKeys: (keys) => state().setSelectedKeys(keys),
+		selectAll: () => state().selectAll(),
+		clearSelection: () => state().clearSelection(),
+		toggleSelectAll: () => state().toggleSelectAll(),
+		extendSelection: (toKey, _collection) => state().extendSelection(toKey)
+	}, ref);
+	const isDisabled = () => selectableItem.isDisabled();
+	const onTreeGridKeyDown = (e) => {
+		const s = state();
+		const p = props();
+		if (isDisabled()) return;
+		if (s.treeColumn != null) {
+			const direction = locale().direction === "rtl" ? "rtl" : "ltr";
+			const key = p.node.key;
+			const expanded = s.expandedKeys;
+			if (e.key === EXPANSION_KEYS.expand[direction] && s.focusedKey === key && hasChildRows() && expanded !== "all" && !expanded.has(key)) {
+				s.toggleKey(key);
+				e.stopPropagation();
+				return;
+			} else if (e.key === EXPANSION_KEYS.collapse[direction] && s.focusedKey === key) if (expanded !== "all") {
+				if (hasChildRows() && expanded.has(key)) {
+					s.toggleKey(key);
+					e.stopPropagation();
+					return;
+				} else if (!expanded.has(key) && p.node.parentKey != null && p.node.level > 0) {
+					s.setFocusedKey(p.node.parentKey);
+					e.stopPropagation();
+					return;
+				}
+			} else {
+				s.toggleKey(key);
+				e.stopPropagation();
+				return;
+			}
+		}
+	};
+	const rowProps = createMemo(() => {
+		const s = state();
+		const p = props();
+		const node = p.node;
+		const baseProps = {
+			role: "row",
+			"aria-selected": s.selectionMode !== "none" ? isSelected() : void 0,
+			"aria-disabled": isDisabled() || void 0
+		};
+		const labelledBy = getRowLabelledBy(s, node.key);
+		if (labelledBy) baseProps["aria-labelledby"] = labelledBy;
+		if (s.treeColumn != null) {
+			const { posinset, setsize } = siblingInfo();
+			baseProps["aria-expanded"] = hasChildRows() ? isExpanded() : void 0;
+			baseProps["aria-level"] = node.level + 1;
+			baseProps["aria-posinset"] = posinset;
+			baseProps["aria-setsize"] = setsize;
+			baseProps.onKeyDown = onTreeGridKeyDown;
+		}
+		if (p.isVirtualized && s.treeColumn == null && node.rowIndex != null) baseProps["aria-rowindex"] = node.rowIndex + 1;
+		return mergeProps$1(selectableItem.itemProps, baseProps);
+	});
+	const onExpandPress = () => {
+		const s = state();
+		const p = props();
+		if (isDisabled()) return;
+		s.toggleKey(p.node.key);
+		s.setFocused(true);
+		s.setFocusedKey(p.node.key);
+	};
+	const expandButtonProps = createMemo(() => ({
+		isDisabled: isDisabled(),
+		onPress: onExpandPress,
+		excludeFromTabOrder: true,
+		preventFocusOnPress: true,
+		"data-react-aria-prevent-focus": true,
+		"aria-label": isExpanded() ? "Collapse" : "Expand"
+	}));
+	return {
+		get rowProps() {
+			return rowProps();
+		},
+		get expandButtonProps() {
+			return expandButtonProps();
+		},
+		get isSelected() {
+			return isSelected();
+		},
+		get isDisabled() {
+			return isDisabled();
+		},
+		get isPressed() {
+			return selectableItem.isPressed();
+		},
+		get isExpanded() {
+			return isExpanded();
+		},
+		get hasChildRows() {
+			return hasChildRows();
+		}
+	};
+}
+//#endregion
+//#region src/table/createTableCell.ts
+/**
+* createTableCell - Provides accessibility for a table cell.
+* Based on @react-aria/table/useTableCell.
+*/
+/**
+* Creates accessibility props for a table cell.
+*/
+function createTableCell(props, state, _ref) {
+	const [isPressed, setIsPressed] = createSignal(false);
+	const isDisabled = createMemo(() => {
+		const s = state();
+		const node = props().node;
+		if (node.parentKey != null) return s.isDisabled(node.parentKey);
+		return false;
+	});
+	const isFocused = createMemo(() => {
+		const s = state();
+		const p = props();
+		return s.focusedKey === p.node.key;
+	});
+	const onClick = () => {
+		const s = state();
+		const p = props();
+		if (isDisabled()) return;
+		const onCellAction = getTableData(s)?.actions.onCellAction;
+		if (onCellAction) onCellAction(p.node.key);
+		if (p.onAction) p.onAction();
+	};
+	const onKeyDown = (e) => {
+		const s = state();
+		const p = props();
+		if (isDisabled()) return;
+		if (e.key === "Enter") {
+			const onCellAction = getTableData(s)?.actions.onCellAction;
+			if (onCellAction || p.onAction) {
+				e.preventDefault();
+				if (onCellAction) onCellAction(p.node.key);
+				if (p.onAction) p.onAction();
+			}
+		}
+	};
+	const onFocus = () => {
+		const s = state();
+		const p = props();
+		s.setFocusedKey(p.node.key);
+	};
+	const onPointerDown = () => {
+		setIsPressed(true);
+	};
+	const onPointerUp = () => {
+		setIsPressed(false);
+	};
+	const gridCellProps = createMemo(() => {
+		const s = state();
+		const p = props();
+		const node = p.node;
+		const tableData = getTableData(s);
+		let role = "gridcell";
+		if (node.type === "rowheader") role = "rowheader";
+		const baseProps = {
+			role,
+			id: tableData && node.parentKey != null ? `${tableData.tableId}-${node.parentKey}-${node.key}` : void 0,
+			"aria-disabled": isDisabled() || void 0,
+			tabIndex: isFocused() ? 0 : -1,
+			onClick,
+			onKeyDown,
+			onFocus,
+			onPointerDown,
+			onPointerUp
+		};
+		if (p.isVirtualized && node.column != null) baseProps["aria-colindex"] = node.column + 1;
+		if (node.colspan != null && node.colspan > 1) {
+			baseProps["aria-colspan"] = node.colspan;
+			baseProps.colSpan = node.colspan;
+		}
+		return baseProps;
+	});
+	return {
+		get gridCellProps() {
+			return gridCellProps();
+		},
+		get isPressed() {
+			return isPressed();
+		}
+	};
+}
+//#endregion
+//#region src/table/createTableRowGroup.ts
+/**
+* createTableRowGroup - Provides accessibility for a table row group.
+* Based on @react-aria/grid/useTableRowGroup.
+*/
+/**
+* Creates accessibility props for a table row group (thead, tbody, tfoot).
+*/
+function createTableRowGroup(props) {
+	const rowGroupProps = createMemo(() => {
+		props();
+		return { role: "rowgroup" };
+	});
+	return { get rowGroupProps() {
+		return rowGroupProps();
+	} };
+}
+//#endregion
+//#region src/table/createTableSelectionCheckbox.ts
+/**
+* createTableSelectionCheckbox - Provides accessibility for a table row selection checkbox.
+* Based on @react-aria/table/useTableSelectionCheckbox.
+*/
+/**
+* Creates accessibility props for a table row selection checkbox.
+*/
+function createTableSelectionCheckbox(props, state) {
+	const checkboxId = createId();
+	const isSelected = createMemo(() => {
+		const s = state();
+		const p = props();
+		return s.isSelected(p.key);
+	});
+	const isDisabled = createMemo(() => {
+		const s = state();
+		const p = props();
+		if (s.selectionMode === "none" || s.disabledKeys.has(p.key) || p.isRowDisabled) return true;
+		const item = s.collection.getItem(p.key);
+		return !item || !!item.isDisabled || !!item.props?.isDisabled;
+	});
+	const onChange = () => {
+		const s = state();
+		const p = props();
+		if (!isDisabled()) s.toggleSelection(p.key);
+	};
+	const checkboxProps = createMemo(() => {
+		const s = state();
+		const p = props();
+		return {
+			id: checkboxId,
+			type: "checkbox",
+			checked: isSelected(),
+			disabled: isDisabled(),
+			onChange,
+			"aria-label": "Select",
+			"aria-labelledby": `${checkboxId} ${getRowLabelledBy(s, p.key)}`
+		};
+	});
+	return { get checkboxProps() {
+		return checkboxProps();
+	} };
+}
+//#endregion
+//#region src/table/createTableSelectAllCheckbox.ts
+/**
+* createTableSelectAllCheckbox - Provides accessibility for a table select-all checkbox.
+* Based on @react-aria/table/useTableSelectAllCheckbox.
+*/
+/**
+* Creates accessibility props for a table select-all checkbox.
+*/
+function createTableSelectAllCheckbox(state) {
+	const isSelectAll = createMemo(() => {
+		return state().selectedKeys === "all";
+	});
+	const isEmpty = createMemo(() => {
+		return state().collection.size === 0;
+	});
+	const isIndeterminate = createMemo(() => {
+		const s = state();
+		const selectedKeys = s.selectedKeys;
+		if (selectedKeys === "all") return false;
+		if (selectedKeys.size === 0) return false;
+		return selectedKeys.size < s.collection.size;
+	});
+	const isDisabled = createMemo(() => {
+		return state().selectionMode !== "multiple" || isEmpty();
+	});
+	const onChange = () => {
+		const s = state();
+		if (!isDisabled()) s.toggleSelectAll();
+	};
+	const checkboxProps = createMemo(() => {
+		const s = state();
+		const baseProps = {
+			type: "checkbox",
+			checked: isSelectAll(),
+			disabled: isDisabled(),
+			onChange,
+			"aria-label": s.selectionMode === "single" ? "Select" : "Select All"
+		};
+		if (isIndeterminate()) baseProps["data-indeterminate"] = "true";
+		return baseProps;
+	});
+	return {
+		get checkboxProps() {
+			return checkboxProps();
+		},
+		get isIndeterminate() {
+			return isIndeterminate();
+		}
+	};
+}
+//#endregion
+//#region src/table/createTableColumnResize.ts
+/**
+* ARIA hook for table column resize interactions.
+* Based on @react-aria/table/useTableColumnResize.
+*
+* Provides pointer-drag and keyboard-based column resizing with
+* correct ARIA attributes for screen readers.
+*/
+const KEYBOARD_STEP = 10;
+/**
+* Creates ARIA-compliant column resize behavior.
+*
+* Returns props for a visible drag handle (div) and a visually-hidden
+* range input that allows keyboard and screen-reader users to resize columns.
+*/
+function createTableColumnResize(props, state) {
+	const getProps = () => props();
+	const getState = () => state();
+	const locale = useLocale();
+	const [isPointerDragging, setIsPointerDragging] = createSignal(false);
+	const [isKeyboardResizing, setIsKeyboardResizing] = createSignal(false);
+	const isResizing = createMemo(() => getState().resizingColumn() === getProps().column.key);
+	const isRtl = createMemo(() => {
+		return locale()?.direction === "rtl";
+	});
+	let startX = 0;
+	let startWidth = 0;
+	const onPointerDown = (e) => {
+		if (getProps().isDisabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		const key = getProps().column.key;
+		startX = e.clientX;
+		startWidth = getState().getColumnWidth(key);
+		getState().startResize(key);
+		getProps().onResizeStart?.(getState().columnWidths());
+		setIsPointerDragging(true);
+		e.currentTarget.setPointerCapture(e.pointerId);
+	};
+	const onPointerMove = (e) => {
+		if (!isPointerDragging()) return;
+		e.preventDefault();
+		const deltaX = e.clientX - startX;
+		const direction = isRtl() ? -1 : 1;
+		const newWidth = startWidth + deltaX * direction;
+		const key = getProps().column.key;
+		const widths = getState().updateResizedColumns(key, newWidth);
+		getProps().onResize?.(widths);
+	};
+	const onPointerUp = (e) => {
+		if (!isPointerDragging()) return;
+		e.preventDefault();
+		setIsPointerDragging(false);
+		getState().endResize();
+		getProps().onResizeEnd?.(getState().columnWidths());
+	};
+	const onKeyDown = (e) => {
+		if (getProps().isDisabled) return;
+		const key = getProps().column.key;
+		const rtlMul = isRtl() ? -1 : 1;
+		switch (e.key) {
+			case "Enter":
+				if (isKeyboardResizing()) {
+					setIsKeyboardResizing(false);
+					getState().endResize();
+					getProps().onResizeEnd?.(getState().columnWidths());
+				} else {
+					setIsKeyboardResizing(true);
+					getState().startResize(key);
+					getProps().onResizeStart?.(getState().columnWidths());
+				}
+				e.preventDefault();
+				break;
+			case "Escape":
+				if (isKeyboardResizing()) {
+					setIsKeyboardResizing(false);
+					getState().endResize();
+					getProps().onResizeEnd?.(getState().columnWidths());
+					e.preventDefault();
+				}
+				break;
+			case "Tab":
+				if (isKeyboardResizing()) {
+					setIsKeyboardResizing(false);
+					getState().endResize();
+					getProps().onResizeEnd?.(getState().columnWidths());
+				}
+				break;
+			case "ArrowRight":
+				if (isKeyboardResizing()) {
+					const currentWidth = getState().getColumnWidth(key);
+					const widths = getState().updateResizedColumns(key, currentWidth + KEYBOARD_STEP * rtlMul);
+					getProps().onResize?.(widths);
+					e.preventDefault();
+				}
+				break;
+			case "ArrowLeft":
+				if (isKeyboardResizing()) {
+					const currentWidth = getState().getColumnWidth(key);
+					const widths = getState().updateResizedColumns(key, currentWidth - KEYBOARD_STEP * rtlMul);
+					getProps().onResize?.(widths);
+					e.preventDefault();
+				}
+				break;
+		}
+	};
+	const onInputChange = (e) => {
+		const input = e.target;
+		const newWidth = parseFloat(input.value);
+		if (isNaN(newWidth)) return;
+		const key = getProps().column.key;
+		if (!isResizing()) {
+			getState().startResize(key);
+			getProps().onResizeStart?.(getState().columnWidths());
+		}
+		const widths = getState().updateResizedColumns(key, newWidth);
+		getProps().onResize?.(widths);
+		getState().endResize();
+		getProps().onResizeEnd?.(getState().columnWidths());
+	};
+	return {
+		resizerProps: {
+			role: "presentation",
+			tabIndex: -1,
+			style: {
+				"touch-action": "none",
+				cursor: "col-resize"
+			},
+			onPointerDown,
+			onPointerMove,
+			onPointerUp
+		},
+		inputProps: {
+			get type() {
+				return "range";
+			},
+			get tabIndex() {
+				return getProps().isDisabled ? -1 : 0;
+			},
+			get disabled() {
+				return getProps().isDisabled;
+			},
+			get "aria-label"() {
+				return getProps()["aria-label"];
+			},
+			get "aria-orientation"() {
+				return "horizontal";
+			},
+			get min() {
+				return getState().getColumnMinWidth(getProps().column.key);
+			},
+			get max() {
+				const maxW = getState().getColumnMaxWidth(getProps().column.key);
+				return maxW === Infinity ? 9999 : maxW;
+			},
+			get value() {
+				return getState().getColumnWidth(getProps().column.key);
+			},
+			style: {
+				position: "absolute",
+				width: "1px",
+				height: "1px",
+				padding: "0",
+				margin: "-1px",
+				overflow: "hidden",
+				clip: "rect(0, 0, 0, 0)",
+				"white-space": "nowrap",
+				"border-width": "0"
+			},
+			onKeyDown,
+			onChange: onInputChange
+		},
+		isResizing
+	};
+}
+//#endregion
+export { createTableCell as a, createTableHeaderRow as c, createTableRowGroup as i, createTable as l, createTableSelectAllCheckbox as n, createTableRow as o, createTableSelectionCheckbox as r, createTableColumnHeader as s, createTableColumnResize as t, getTableData as u };
+
+//# sourceMappingURL=table.jsx.map