@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/browser/table.js

@@ -0,0 +1,1268 @@
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/Table.tsx.
+ * Modified for Solid Aria: preserve table collection, sorting and sizing algorithms with Solid contexts, collection descriptors and reactive accessibility primitives; uses Solid class props.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { DEFAULT_SLOT, assignRef, createContextProps, createRenderProps, dom } from "./utils.js";
+import { CollectionRendererContext, DefaultCollectionRenderer } from "./collection.js";
+import { ButtonContext } from "./button.js";
+import { SelectionIndicatorContext } from "./selection-indicator.js";
+import { CheckboxContext, CheckboxFieldContext } from "./checkbox.js";
+import { DragAndDropContext, DropIndicatorContext, createDndPersistedKeys, createRenderDropIndicator } from "./drag-and-drop.js";
+import { CollectionDropIndicator, createCollectionDragAndDrop } from "./collection-dnd.js";
+import intl_default from "./intl/index.js";
+import { RootDropIndicator } from "./grid-list.js";
+import { TreeDropTargetDelegate } from "./tree-drop-target-delegate.js";
+import { Portal, applyRef, createComponent, dynamic, effect, getNextElement, memo, mergeProps, ref, runHydrationEvents, setAttribute, setStyleProperty, spread, template } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { createContext, createMemo, createSignal, merge, omit, onSettled, untrack, useContext } from "solid-js";
+import { requireValue } from "@solid2-aria/core/utils/require-value";
+import { BaseCollection, CollectionNode, FilterableNode, LoaderNode } from "@solid2-aria/core/collections/base-collection";
+import { Collection, CollectionBuilder, createBranchComponent, createLeafComponent } from "@solid2-aria/core/collections/collection-builder";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createCachedChildren } from "@solid2-aria/core/collections/create-cached-children";
+import { createFocusRing } from "@solid2-aria/core/focus/create-focus-ring";
+import { createHover } from "@solid2-aria/core/interactions/create-hover";
+import { isTruthy } from "@solid2-aria/core/utils/truthy";
+import { createLocale } from "@solid2-aria/core/i18n/i18n-provider";
+import { isPresent } from "@solid2-aria/core/utils/is-present";
+import { createLocalizedStringFormatter } from "@solid2-aria/core/i18n/create-localized-string-formatter";
+import { createLoadMoreSentinel } from "@solid2-aria/core/utils/create-load-more-sentinel";
+import { createTable } from "@solid2-aria/core/table/create-table";
+import { createTableCell } from "@solid2-aria/core/table/create-table-cell";
+import { createTableColumnHeader } from "@solid2-aria/core/table/create-table-column-header";
+import { createTableColumnResize } from "@solid2-aria/core/table/create-table-column-resize";
+import { createTableHeaderRow } from "@solid2-aria/core/table/create-table-header-row";
+import { createTableRow } from "@solid2-aria/core/table/create-table-row";
+import { createTableRowGroup } from "@solid2-aria/core/table/create-table-row-group";
+import { createTableSelectAllCheckbox, createTableSelectionCheckbox } from "@solid2-aria/core/table/create-table-selection-checkbox";
+import { createTableColumnResizeState } from "@solid2-aria/stately/table/create-table-column-resize-state";
+import { createTableState } from "@solid2-aria/stately/table/create-table-state";
+import { buildHeaderRows } from "@solid2-aria/stately/table/table-collection";
+import { createControlledSignal } from "@solid2-aria/stately/utils/create-controlled-signal";
+import { getNodeProps } from "@solid2-aria/stately/utils/get-node-props";
+// src/table.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<input>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-testid=cursor-overlay style=bottom:0;left:0;position:fixed;right:0;top:0>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<tr inert style=height:0><td style=height:0;padding:0><div style=height:1px;width:1px>`);
+var TableHeaderNode = class extends CollectionNode {
+	static type = "tableheader";
+};
+var TableColumnNode = class extends CollectionNode {
+	static type = "column";
+};
+var TableBodyNode = class extends FilterableNode {
+	static type = "tablebody";
+};
+var TableFooterNode = class extends FilterableNode {
+	static type = "tablefooter";
+};
+var TableRowNode = class extends CollectionNode {
+	static type = "item";
+	filter(collection, newCollection, filterFn) {
+		for (const cell of collection.getChildren(this.key)) if (filterFn(cell.textValue, cell)) {
+			const clone = this.clone();
+			newCollection.addDescendants(clone, collection);
+			return clone;
+		}
+		return null;
+	}
+};
+var TableCellNode = class extends CollectionNode {
+	static type = "cell";
+};
+var TableCollection = class extends BaseCollection {
+	headerRows = [];
+	columns = [];
+	rows = [];
+	rowHeaderColumnKeys = /* @__PURE__ */ new Set();
+	head = new TableHeaderNode(-1);
+	columnsDirty = true;
+	expandedKeys = /* @__PURE__ */ new Set();
+	withExpandedKeys(expandedKeys) {
+		const collection = this.clone();
+		collection.expandedKeys = expandedKeys;
+		collection.frozen = this.frozen;
+		collection.rows = [...collection.getRows()];
+		return collection;
+	}
+	addNode(node) {
+		super.addNode(node);
+		this.columnsDirty ||= node.type === "column";
+		if (node.type === "tableheader") this.head = node;
+	}
+	getRows() {
+		const rows = [];
+		for (const child of this) if (child.type === "tablebody" || child.type === "tablefooter") rows.push(...this.getChildren(child.key));
+		return rows;
+	}
+	get body() {
+		for (const child of this) if (child.type === "tablebody") return child;
+		return new TableBodyNode(-2);
+	}
+	commit(firstKey, lastKey, isSSR = false) {
+		this.updateColumns(isSSR);
+		this.firstKey = firstKey;
+		this.lastKey = lastKey;
+		this.rows = [];
+		for (const row of this.getRows()) {
+			const { lastChildKey } = row;
+			if (isPresent(lastChildKey)) {
+				let lastCell = this.getItem(lastChildKey);
+				while (lastCell && lastCell.type !== "cell") lastCell = isPresent(lastCell.prevKey) ? this.getItem(lastCell.prevKey) : null;
+				if (lastCell) {
+					const numberOfCellsInRow = (lastCell.colIndex ?? lastCell.index) + (lastCell.colSpan ?? 1);
+					if (numberOfCellsInRow !== this.columns.length && !isSSR) throw new Error(`Cell count must match column count. Found ${numberOfCellsInRow} cells and ${this.columns.length} columns.`);
+				}
+			}
+			this.rows.push(row);
+		}
+		super.commit(firstKey, lastKey, isSSR);
+	}
+	updateColumns(isSSR) {
+		if (!this.columnsDirty) return;
+		this.rowHeaderColumnKeys = /* @__PURE__ */ new Set();
+		this.columns = [];
+		const columnKeyMap = /* @__PURE__ */ new Map();
+		const visit = (node) => {
+			switch (node.type) {
+				case "column":
+					columnKeyMap.set(node.key, node);
+					if (!node.hasChildNodes) {
+						node.index = this.columns.length;
+						this.columns.push(node);
+						if (isTruthy(getNodeProps(node).isRowHeader)) this.rowHeaderColumnKeys.add(node.key);
+					}
+			}
+			for (const child of this.getChildren(node.key)) visit(child);
+		};
+		for (const node of this.getChildren(this.head.key)) visit(node);
+		this.headerRows = buildHeaderRows(columnKeyMap, this.columns);
+		this.columnsDirty = false;
+		if (this.rowHeaderColumnKeys.size === 0 && this.columns.length > 0 && !isSSR) throw new Error("A table must have at least one Column with the isRowHeader prop set to true");
+	}
+	get columnCount() {
+		return this.columns.length;
+	}
+	*[Symbol.iterator]() {
+		let key = this.firstKey;
+		while (isPresent(key)) {
+			const node = this.getItem(key);
+			if (node) yield node;
+			key = node?.nextKey ?? null;
+		}
+	}
+	getFirstKey() {
+		for (const child of this) if (child.type === "tablebody") return child.firstChildKey ?? null;
+		return null;
+	}
+	getLastKey() {
+		const key = this.lastKey;
+		if (!isPresent(key)) return null;
+		let node = requireValue(this.getItem(key), "Expected this.getItem(key)");
+		while (isPresent(node?.lastChildKey) && (node.type !== "item" || this.expandedKeys.has(node.key))) node = requireValue(this.getItem(node.lastChildKey), "Expected this.getItem(node.lastChildKey)");
+		return node?.key;
+	}
+	getKeyAfter(key) {
+		const node = requireValue(this.getItem(key), "Expected this.getItem(key)");
+		if (node?.type === "column") return node.nextKey ?? null;
+		if (!isTruthy(node)) return null;
+		if (node.type === "item" && isPresent(node.firstChildKey) && this.expandedKeys.has(node.key)) {
+			let child = this.getItem(node.firstChildKey);
+			while (child) {
+				if (child.type === "item") return child.key;
+				child = isPresent(child.nextKey) ? this.getItem(child.nextKey) : null;
+			}
+		}
+		return super.getKeyAfter(key);
+	}
+	getKeyBefore(key) {
+		let node = requireValue(this.getItem(key), "Expected this.getItem(key)");
+		if (node?.type === "column") return node.prevKey ?? null;
+		if (!isTruthy(node)) return null;
+		let k = null;
+		if (isPresent(node.prevKey)) {
+			node = requireValue(this.getItem(node.prevKey), "Expected this.getItem(node.prevKey)");
+			while (Boolean(node) && (node.type !== "item" || this.expandedKeys.has(node.key)) && isPresent(node.lastChildKey)) node = requireValue(this.getItem(node.lastChildKey), "Expected this.getItem(node.lastChildKey)");
+			k = node?.key ?? null;
+		}
+		k ??= node.parentKey;
+		if (isPresent(k) && this.getItem(k)?.type === "tableheader") return null;
+		return k;
+	}
+	*headerChildren(key) {
+		const header = this.headerRows.find((row) => row.key === key);
+		if (!header) return;
+		for (const child of header.childNodes) yield child instanceof CollectionNode ? child : Object.assign(new CollectionNode(child.key), child);
+	}
+	*getChildren(key) {
+		const parent = this.getItem(key);
+		if (!parent) {
+			yield* this.headerChildren(key);
+			return;
+		}
+		let node = isPresent(parent?.firstChildKey) ? this.getItem(parent.firstChildKey) : null;
+		const flattenRows = parent?.type === "tablebody" || parent?.type === "tablefooter";
+		while (node) {
+			yield node;
+			const nextKey = flattenRows ? this.getKeyAfter(node.key) : node.nextKey;
+			node = isPresent(nextKey) ? this.getItem(nextKey) : null;
+			if (flattenRows && node?.parentKey === parent?.parentKey) break;
+			if (!flattenRows && parent?.type === "item" && node?.type !== "cell") break;
+		}
+	}
+	clone() {
+		const collection = super.clone();
+		collection.headerRows = this.headerRows;
+		collection.columns = this.columns;
+		collection.rows = this.rows;
+		collection.rowHeaderColumnKeys = this.rowHeaderColumnKeys;
+		collection.head = this.head;
+		return collection;
+	}
+	getTextValue(key) {
+		const row = this.getItem(key);
+		if (!row) return "";
+		if (row.textValue) return row.textValue;
+		const { rowHeaderColumnKeys } = this;
+		const text = [];
+		for (const cell of this.getChildren(key)) {
+			const column = this.columns[cell.index];
+			if (column && rowHeaderColumnKeys.has(column.key) && cell.textValue) text.push(cell.textValue);
+			if (text.length === rowHeaderColumnKeys.size) break;
+		}
+		return text.join(" ");
+	}
+};
+const TableContext = createContext(null);
+const TableStateContext = createContext(null);
+const TableColumnResizeStateContext = createContext(null);
+const RowFocusContext = createContext({ isFocusVisibleWithinRow: false });
+const TableOptionsContext = createContext(null);
+const ResizableTableContainerContext = createContext(null);
+const ColumnResizerContext = createContext(null);
+function createTableOptions() {
+	const options = useContext(TableOptionsContext);
+	if (!options) throw new Error("Table options require a Table.");
+	return options;
+}
+function ResizableTableContainer(props) {
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	const [tableRef, setTableRef] = createSignal(null, { ownedWrite: true });
+	const [width, setWidth] = createSignal(0);
+	onSettled(() => {
+		let measured = tableRef();
+		while (measured && measured !== ref() && measured.scrollWidth <= measured.clientWidth) measured = measured.parentElement;
+		measured ??= ref();
+		if (!measured) return;
+		const element = measured;
+		setWidth(element.clientWidth);
+		const observer = new ResizeObserver(() => {
+			setWidth(element.clientWidth);
+		});
+		observer.observe(element, { box: "border-box" });
+		return () => {
+			observer.disconnect();
+		};
+	});
+	const context = mergeProps$1(props, {
+		setTableRef: (element) => {
+			setTableRef(element);
+		},
+		tableRef,
+		get tableWidth() {
+			return width();
+		}
+	});
+	return createComponent(dom.div, mergeProps(() => {
+		return filterDOMProps(props, { global: true });
+	}, {
+		get render() {
+			return props.render;
+		},
+		get "class"() {
+			return props.class ?? "solid2-aria-ResizableTableContainer";
+		},
+		get style() {
+			return props.style;
+		},
+		ref: [(element) => {
+			setRef(element);
+		}, (element) => {
+			assignRef(untrack(() => props.ref), element);
+		}],
+		get children() {
+			return createComponent(ResizableTableContainerContext, {
+				value: context,
+				get children() {
+					return props.children;
+				}
+			});
+		}
+	}));
+}
+function Table(input) {
+	const [props, ref, setRef] = createContextProps(input, untrack(() => input.ref), TableContext);
+	return createComponent(CollectionBuilder, {
+		createCollection: () => new TableCollection(),
+		get content() {
+			return createComponent(Collection, { get children() {
+				return props.children;
+			} });
+		},
+		children: (collection) => createComponent(TableInner, {
+			props,
+			collection,
+			elementRef: ref,
+			setElementRef: (element) => {
+				setRef(element);
+			}
+		})
+	});
+}
+function TableInner(outer) {
+	const { props } = untrack(() => outer);
+	const renderer = useContext(CollectionRendererContext);
+	const container = useContext(ResizableTableContainerContext);
+	const [expanded, setExpanded] = createControlledSignal(() => props.expandedKeys ? new Set(props.expandedKeys) : void 0, new Set(props.defaultExpandedKeys), (keys) => {
+		props.onExpandedChange?.(keys);
+	});
+	const collection = createMemo(() => outer.collection.withExpandedKeys(expanded()));
+	const state = createTableState(mergeProps$1(props, {
+		children: void 0,
+		get collection() {
+			return collection();
+		},
+		get expandedKeys() {
+			return expanded();
+		},
+		onExpandedChange: setExpanded
+	}));
+	const aria = createTable(mergeProps$1(props, {
+		get isVirtualized() {
+			return renderer.isVirtualized;
+		},
+		get layoutDelegate() {
+			return renderer.layoutDelegate;
+		}
+	}), state, untrack(() => outer.elementRef));
+	const resize = container ? createTableColumnResizeState({ get tableWidth() {
+		return container.tableWidth;
+	} }, state) : null;
+	const locale = createLocale();
+	const treeDelegate = new TreeDropTargetDelegate();
+	if (props.dragAndDropHooks?.createDroppableCollectionState) {
+		const hooks = props.dragAndDropHooks;
+		treeDelegate.setup(hooks.dropTargetDelegate ?? renderer.dropTargetDelegate ?? new hooks.ListDropTargetDelegate({ [Symbol.iterator]() {
+			return state.collection.rows[Symbol.iterator]();
+		} }, untrack(() => outer.elementRef)), state, locale.direction);
+	}
+	const dnd = createCollectionDragAndDrop({
+		get collection() {
+			return state.collection;
+		},
+		get dropTargetCollection() {
+			return state.collection.rows;
+		},
+		dropTargetDelegate: treeDelegate,
+		get hooks() {
+			return props.dragAndDropHooks;
+		},
+		get ref() {
+			return outer.elementRef;
+		},
+		get selectionManager() {
+			return state.selectionManager;
+		}
+	});
+	const focus = createFocusRing();
+	const values = {
+		get isDropTarget() {
+			return dnd.dropState?.isDropTarget({ type: "root" }) === true;
+		},
+		get isFocusVisible() {
+			return focus.isFocusVisible;
+		},
+		get isFocused() {
+			return focus.isFocused;
+		},
+		state
+	};
+	const render = createRenderProps(mergeProps$1(props, {
+		children: void 0,
+		defaultClass: "solid2-aria-Table",
+		values
+	}));
+	const Root = renderer.CollectionRoot;
+	const Tag = dynamic(() => renderer.isVirtualized === true ? dom.div : dom.table);
+	const options = {
+		get allowsDragging() {
+			return !!dnd.dragState;
+		},
+		get disallowEmptySelection() {
+			return props.disallowEmptySelection === true;
+		},
+		get selectionBehavior() {
+			return state.selectionManager.selectionMode === "none" ? null : state.selectionManager.selectionBehavior;
+		},
+		get selectionMode() {
+			return state.selectionManager.selectionMode;
+		}
+	};
+	return createComponent(Tag, mergeProps(() => {
+		return mergeProps$1(filterDOMProps(props, { global: true }), render, merge(() => aria.gridProps ?? {}), merge(() => focus.focusProps ?? {}), merge(() => dnd.collectionProps ?? {}));
+	}, {
+		ref: (element) => {
+			outer.setElementRef(element);
+			if (container) container.setTableRef(element);
+		},
+		get slot() {
+			return props.slot ?? void 0;
+		},
+		get "data-focused"() {
+			return focus.isFocused || void 0;
+		},
+		get "data-focus-visible"() {
+			return focus.isFocusVisible || void 0;
+		},
+		get "data-drop-target"() {
+			return values.isDropTarget || void 0;
+		},
+		get children() {
+			return [createComponent(TableStateContext, {
+				value: state,
+				get children() {
+					return createComponent(TableColumnResizeStateContext, {
+						value: resize,
+						get children() {
+							return createComponent(TableOptionsContext, {
+								value: options,
+								get children() {
+									return createComponent(DragAndDropContext, {
+										value: dnd,
+										get children() {
+											return createComponent(DropIndicatorContext, {
+												value: { render: (indicatorProps, ref) => createComponent(CollectionDropIndicator, mergeProps(indicatorProps, {
+													ref(r$) {
+														var _ref$ = ref;
+														typeof _ref$ === "function" || Array.isArray(_ref$) ? applyRef(_ref$, r$) : ref = r$;
+													},
+													get table() {
+														return !(renderer.isVirtualized === true);
+													},
+													get columnCount() {
+														return state.collection.columnCount;
+													}
+												})) },
+												get children() {
+													return createComponent(Root, {
+														get collection() {
+															return state.collection;
+														},
+														get scrollRef() {
+															return outer.elementRef;
+														},
+														get persistedKeys() {
+															return createDndPersistedKeys(state.selectionManager, props.dragAndDropHooks, dnd.dropState);
+														}
+													});
+												}
+											});
+										}
+									});
+								}
+							});
+						}
+					});
+				}
+			}), memo(() => {
+				return dnd.preview;
+			})];
+		}
+	}));
+}
+const TableHeader = createBranchComponent(TableHeaderNode, (props, ref, _node) => {
+	const state = requireValue(useContext(TableStateContext), "Expected useContext(TableStateContext)");
+	const renderer = useContext(CollectionRendererContext);
+	const Tag = dynamic(() => renderer.isVirtualized === true ? dom.div : dom.thead);
+	const hover = createHover(props);
+	const group = createTableRowGroup();
+	const render = createRenderProps(mergeProps$1(props, {
+		children: void 0,
+		defaultClass: "solid2-aria-TableHeader",
+		values: { get isHovered() {
+			return hover.isHovered;
+		} }
+	}));
+	const rows = createCachedChildren({
+		children: (item) => createComponent(TableHeaderRow, { item }),
+		get items() {
+			return state.collection.headerRows;
+		}
+	});
+	return createComponent(Tag, mergeProps(() => {
+		return mergeProps$1(filterDOMProps(props, { global: true }), merge(() => group.rowGroupProps ?? {}), merge(() => hover.hoverProps ?? {}), render);
+	}, {
+		ref(r$) {
+			var _ref$2 = ref;
+			typeof _ref$2 === "function" || Array.isArray(_ref$2) ? applyRef(_ref$2, r$) : ref = r$;
+		},
+		get "data-hovered"() {
+			return hover.isHovered || void 0;
+		},
+		get children() {
+			return rows();
+		}
+	}));
+}, (props) => createComponent(Collection, {
+	get items() {
+		return props.columns;
+	},
+	get dependencies() {
+		return props.dependencies;
+	},
+	get children() {
+		return props.children;
+	}
+}));
+function TableHeaderRow(props) {
+	const state = requireValue(useContext(TableStateContext), "Expected useContext(TableStateContext)");
+	const renderer = useContext(CollectionRendererContext);
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	const Tag = dynamic(() => renderer.isVirtualized === true ? dom.div : dom.tr);
+	const Branch = renderer.CollectionBranch;
+	const aria = createTableHeaderRow({
+		isVirtualized: renderer.isVirtualized,
+		get node() {
+			return props.item;
+		}
+	}, state, ref);
+	const checkbox = createTableSelectAllCheckbox(state);
+	return createComponent(Tag, mergeProps(() => {
+		return aria.rowProps;
+	}, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get children() {
+			return createComponent(CheckboxContext, {
+				value: { slots: { get selection() {
+					return checkbox.checkboxProps;
+				} } },
+				get children() {
+					return createComponent(CheckboxFieldContext, {
+						value: { slots: { get selection() {
+							return checkbox.checkboxProps;
+						} } },
+						get children() {
+							return createComponent(Branch, {
+								get collection() {
+									return state.collection;
+								},
+								get parent() {
+									return props.item;
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	}));
+}
+const Column = createLeafComponent(TableColumnNode, (props, forwardedRef, column) => {
+	const state = requireValue(useContext(TableStateContext), "Expected useContext(TableStateContext)");
+	const renderer = useContext(CollectionRendererContext);
+	const resize = useContext(TableColumnResizeStateContext);
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	const Tag = dynamic(() => renderer.isVirtualized === true ? dom.div : dom.th);
+	const aria = createTableColumnHeader({
+		get allowsArrowNavigation() {
+			return props.allowsArrowNavigation;
+		},
+		get focusMode() {
+			return props.focusMode;
+		},
+		isVirtualized: renderer.isVirtualized,
+		node: column
+	}, state, ref);
+	const focus = createFocusRing();
+	const hover = createHover({ get isDisabled() {
+		return !(props.allowsSorting === true);
+	} });
+	const values = {
+		get allowsSorting() {
+			return isTruthy(getNodeProps(column).allowsSorting);
+		},
+		get isFocusVisible() {
+			return focus.isFocusVisible;
+		},
+		get isFocused() {
+			return focus.isFocused;
+		},
+		get isHovered() {
+			return hover.isHovered;
+		},
+		get isPressed() {
+			return aria.isPressed;
+		},
+		get isResizing() {
+			return resize?.resizingColumn === column.key;
+		},
+		sort: (direction) => {
+			state.sort(column.key, direction);
+		},
+		get sortDirection() {
+			return state.sortDescriptor?.column === column.key ? state.sortDescriptor.direction : void 0;
+		},
+		startResize: () => {
+			if (!resize) throw new Error("Wrap Table in ResizableTableContainer to enable resizing.");
+			resize.startResize(column.key);
+			state.setKeyboardNavigationDisabled(true);
+		}
+	};
+	const render = createRenderProps(mergeProps$1(props, {
+		get children() {
+			return column.rendered;
+		},
+		defaultClass: "solid2-aria-Column",
+		id: void 0,
+		values
+	}));
+	return createComponent(Tag, mergeProps(() => {
+		return mergeProps$1(omit(filterDOMProps(props, { global: true }), "id"), merge(() => aria.columnHeaderProps ?? {}), merge(() => focus.focusProps ?? {}), merge(() => hover.hoverProps ?? {}), render);
+	}, {
+		get style() {
+			return resize ? mergeProps$1(typeof render.style === "object" ? render.style : {}, { width: resize.getColumnWidth(column.key) }) : render.style;
+		},
+		ref: (element) => {
+			setRef(element);
+		},
+		get "data-hovered"() {
+			return hover.isHovered || void 0;
+		},
+		get "data-pressed"() {
+			return aria.isPressed || void 0;
+		},
+		get "data-focused"() {
+			return focus.isFocused || void 0;
+		},
+		get "data-focus-visible"() {
+			return focus.isFocusVisible || void 0;
+		},
+		get "data-resizing"() {
+			return values.isResizing || void 0;
+		},
+		get "data-allows-sorting"() {
+			return values.allowsSorting || void 0;
+		},
+		get "data-sort-direction"() {
+			return values.sortDirection;
+		},
+		get children() {
+			return createComponent(ColumnResizerContext, {
+				value: {
+					column,
+					triggerRef: ref
+				},
+				get children() {
+					return createComponent(CollectionRendererContext, {
+						value: DefaultCollectionRenderer,
+						get children() {
+							return render.children;
+						}
+					});
+				}
+			});
+		}
+	}));
+});
+function ColumnResizer(props) {
+	const resize = useContext(TableColumnResizeStateContext);
+	const column = useContext(ColumnResizerContext);
+	const container = useContext(ResizableTableContainerContext);
+	if (!resize || !column) throw new Error("ColumnResizer requires a column in ResizableTableContainer.");
+	const formatter = createLocalizedStringFormatter(intl_default, "@solid2-aria/components");
+	const [input, setInput] = createSignal(null, { ownedWrite: true });
+	const [ref$1, setRef] = createSignal(null, { ownedWrite: true });
+	const locale = createLocale();
+	const aria = createTableColumnResize(mergeProps$1(container ?? {}, {
+		get "aria-label"() {
+			return props["aria-label"] ?? formatter.format("tableResizer");
+		},
+		get column() {
+			return column.column;
+		},
+		get triggerRef() {
+			return column.triggerRef;
+		}
+	}), resize, input);
+	const focus = createFocusRing();
+	const hover = createHover(props);
+	const values = {
+		get isFocusVisible() {
+			return focus.isFocusVisible;
+		},
+		get isFocused() {
+			return focus.isFocused;
+		},
+		get isHovered() {
+			return hover.isHovered;
+		},
+		get isResizing() {
+			return aria.isResizing;
+		},
+		get resizableDirection() {
+			if (resize.getColumnMinWidth(column.column.key) >= resize.getColumnWidth(column.column.key)) return locale.direction === "rtl" ? "right" : "left";
+			if (resize.getColumnMaxWidth(column.column.key) <= resize.getColumnWidth(column.column.key)) return locale.direction === "rtl" ? "left" : "right";
+			return "both";
+		}
+	};
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-ColumnResizer",
+		values
+	}));
+	return createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(filterDOMProps(props, { global: true }), render, merge(() => aria.resizerProps ?? {}), merge(() => hover.hoverProps ?? {}));
+	}, {
+		role: "presentation",
+		ref: (element) => {
+			setRef(element);
+		},
+		get "data-hovered"() {
+			return hover.isHovered || void 0;
+		},
+		get "data-focused"() {
+			return focus.isFocused || void 0;
+		},
+		get "data-focus-visible"() {
+			return focus.isFocusVisible || void 0;
+		},
+		get "data-resizing"() {
+			return aria.isResizing || void 0;
+		},
+		get "data-resizable-direction"() {
+			return values.resizableDirection;
+		},
+		get children() {
+			return [
+				memo(() => {
+					return render.children;
+				}),
+				(() => {
+					var _el$ = getNextElement(_tmpl$);
+					spread(_el$, () => {
+						return mergeProps$1(merge(() => aria.inputProps ?? {}), merge(() => focus.focusProps ?? {}));
+					}, false);
+					ref(() => {
+						return (element) => {
+							setInput(element);
+						};
+					}, _el$);
+					runHydrationEvents();
+					return _el$;
+				})(),
+				memo(() => {
+					return memo(() => {
+						return !!aria.isMouseResizing;
+					})() ? createComponent(Portal, {
+						get mount() {
+							return document.body;
+						},
+						get children() {
+							var _el$2 = getNextElement(_tmpl$2);
+							setStyleProperty(_el$2, "cursor", function() {
+								const element = ref$1();
+								return element ? getComputedStyle(element).cursor : void 0;
+							});
+							return _el$2;
+						}
+					}) : aria.isMouseResizing;
+				})
+			];
+		}
+	}));
+}
+const TableBody = createBranchComponent(TableBodyNode, (props, ref, node) => {
+	const state = requireValue(useContext(TableStateContext), "Expected useContext(TableStateContext)");
+	const renderer = useContext(CollectionRendererContext);
+	const dnd = useContext(DragAndDropContext);
+	const Branch = renderer.CollectionBranch;
+	const Tag = dynamic(() => renderer.isVirtualized === true ? dom.div : dom.tbody);
+	const RowTag = dynamic(() => renderer.isVirtualized === true ? dom.div : dom.tr);
+	const CellTag = dynamic(() => renderer.isVirtualized === true ? dom.div : dom.td);
+	const group = createTableRowGroup();
+	const values = {
+		get isDropTarget() {
+			return dnd.dropState?.isDropTarget({ type: "root" }) === true;
+		},
+		get isEmpty() {
+			return !state.collection.rows.some((row) => row.type === "item");
+		}
+	};
+	const render = createRenderProps(mergeProps$1(props, {
+		children: void 0,
+		defaultClass: "solid2-aria-TableBody",
+		values
+	}));
+	return createComponent(Tag, mergeProps(() => {
+		return mergeProps$1(filterDOMProps(props, { global: true }), render, merge(() => group.rowGroupProps ?? {}));
+	}, {
+		ref(r$) {
+			var _ref$3 = ref;
+			typeof _ref$3 === "function" || Array.isArray(_ref$3) ? applyRef(_ref$3, r$) : ref = r$;
+		},
+		get "data-empty"() {
+			return values.isEmpty || void 0;
+		},
+		get children() {
+			return [
+				memo(() => {
+					return memo(() => {
+						return !!dnd.dropState;
+					})() ? createComponent(RootDropIndicator, {
+						get table() {
+							return !(renderer.isVirtualized === true);
+						},
+						get columnCount() {
+							return state.collection.columnCount;
+						}
+					}) : dnd.dropState;
+				}),
+				createComponent(Branch, {
+					get collection() {
+						return state.collection;
+					},
+					parent: node,
+					get renderDropIndicator() {
+						return createRenderDropIndicator(dnd.dragAndDropHooks, dnd.dropState);
+					}
+				}),
+				memo(() => {
+					return memo(() => {
+						return !!(values.isEmpty && props.renderEmptyState);
+					})() ? createComponent(RowTag, {
+						role: "row",
+						get children() {
+							return createComponent(CellTag, {
+								role: "rowheader",
+								get colspan() {
+									return state.collection.columnCount;
+								},
+								get children() {
+									return props.renderEmptyState(values);
+								}
+							});
+						}
+					}) : values.isEmpty && props.renderEmptyState;
+				})
+			];
+		}
+	}));
+});
+const TableFooter = createBranchComponent(TableFooterNode, (props, ref, node) => {
+	const state = requireValue(useContext(TableStateContext), "Expected useContext(TableStateContext)");
+	const renderer = useContext(CollectionRendererContext);
+	const dnd = useContext(DragAndDropContext);
+	const Branch = renderer.CollectionBranch;
+	const Tag = dynamic(() => renderer.isVirtualized === true ? dom.div : dom.tfoot);
+	const group = createTableRowGroup();
+	return createComponent(Tag, mergeProps(() => {
+		return mergeProps$1(filterDOMProps(props, { global: true }), merge(() => group.rowGroupProps ?? {}));
+	}, {
+		get "class"() {
+			return props.class ?? "solid2-aria-TableFooter";
+		},
+		get style() {
+			return props.style;
+		},
+		ref(r$) {
+			var _ref$4 = ref;
+			typeof _ref$4 === "function" || Array.isArray(_ref$4) ? applyRef(_ref$4, r$) : ref = r$;
+		},
+		get children() {
+			return createComponent(Branch, {
+				get collection() {
+					return state.collection;
+				},
+				parent: node,
+				get renderDropIndicator() {
+					return createRenderDropIndicator(dnd.dragAndDropHooks, dnd.dropState);
+				}
+			});
+		}
+	}));
+});
+function Row(ownProps) {
+	return createBranchComponent(TableRowNode, (props, forwardedRef, item) => {
+		const state = requireValue(useContext(TableStateContext), "Expected useContext(TableStateContext)");
+		const renderer = useContext(CollectionRendererContext);
+		const dnd = useContext(DragAndDropContext);
+		const Branch = renderer.CollectionBranch;
+		const Tag = dynamic(() => renderer.isVirtualized === true ? dom.div : dom.tr);
+		const [ref, setRef] = createSignal(null, { ownedWrite: true });
+		const aria = createTableRow({
+			isVirtualized: renderer.isVirtualized,
+			node: item,
+			shouldSelectOnPressUp: !!dnd.dragState
+		}, state, ref);
+		const focus = createFocusRing();
+		const within = createFocusRing({ within: true });
+		const hover = createHover(mergeProps$1(props, { get isDisabled() {
+			return !aria.allowsSelection && !aria.hasAction && !dnd.dragState;
+		} }));
+		const checkbox = createTableSelectionCheckbox({ key: item.key }, state);
+		const drag = dnd.dragState ? dnd.dragAndDropHooks?.createDraggableItem?.({
+			hasDragButton: true,
+			key: item.key
+		}, dnd.dragState) : void 0;
+		const values = {
+			get allowsDragging() {
+				return !!dnd.dragState;
+			},
+			get hasChildItems() {
+				return props.hasChildItems === true || isPresent(item.lastChildKey) && state.collection.getItem(item.lastChildKey)?.type !== "cell";
+			},
+			id: item.key,
+			get isDisabled() {
+				return aria.isDisabled;
+			},
+			get isDragging() {
+				return dnd.dragState?.isDragging(item.key) === true;
+			},
+			get isDropTarget() {
+				return dnd.dropState?.isDropTarget({
+					dropPosition: "on",
+					key: item.key,
+					type: "item"
+				}) === true;
+			},
+			get isExpanded() {
+				return state.expandedKeys.has(item.key);
+			},
+			get isFocusVisible() {
+				return focus.isFocusVisible;
+			},
+			get isFocusVisibleWithin() {
+				return within.isFocusVisible;
+			},
+			get isFocused() {
+				return focus.isFocused;
+			},
+			get isHovered() {
+				return hover.isHovered;
+			},
+			get isPressed() {
+				return aria.isPressed;
+			},
+			get isSelected() {
+				return aria.isSelected;
+			},
+			level: item.level + 1,
+			get selectionBehavior() {
+				return state.selectionManager.selectionBehavior;
+			},
+			get selectionMode() {
+				return state.selectionManager.selectionMode;
+			},
+			state
+		};
+		const render = createRenderProps(mergeProps$1(props, {
+			children: void 0,
+			defaultClass: "solid2-aria-Row",
+			values
+		}));
+		return createComponent(Tag, mergeProps(() => {
+			return mergeProps$1(omit(filterDOMProps(props, { global: true }), "id", "onClick"), render, merge(() => aria.rowProps ?? {}), merge(() => focus.focusProps ?? {}), merge(() => within.focusProps ?? {}), merge(() => hover.hoverProps ?? {}), merge(() => drag?.dragProps ?? {}));
+		}, {
+			ref: (element) => {
+				setRef(element);
+			},
+			get "data-selected"() {
+				return aria.isSelected || void 0;
+			},
+			get "data-disabled"() {
+				return aria.isDisabled || void 0;
+			},
+			get "data-hovered"() {
+				return hover.isHovered || void 0;
+			},
+			get "data-focused"() {
+				return focus.isFocused || void 0;
+			},
+			get "data-focus-visible"() {
+				return focus.isFocusVisible || void 0;
+			},
+			get "data-focus-visible-within"() {
+				return within.isFocusVisible || void 0;
+			},
+			get "data-pressed"() {
+				return aria.isPressed || void 0;
+			},
+			get "data-expanded"() {
+				return (memo(() => {
+					return !!values.hasChildItems;
+				})() ? values.isExpanded : values.hasChildItems) || void 0;
+			},
+			get "data-has-child-items"() {
+				return values.hasChildItems || void 0;
+			},
+			get "data-level"() {
+				return values.level;
+			},
+			get "data-allows-dragging"() {
+				return !!dnd.dragState || void 0;
+			},
+			get "data-dragging"() {
+				return values.isDragging ?? void 0;
+			},
+			get "data-drop-target"() {
+				return values.isDropTarget ?? void 0;
+			},
+			get "data-selection-mode"() {
+				return memo(() => {
+					return state.selectionManager.selectionMode === "none";
+				})() ? void 0 : state.selectionManager.selectionMode;
+			},
+			get children() {
+				return createComponent(CheckboxContext, {
+					value: { slots: {
+						[DEFAULT_SLOT]: {},
+						get selection() {
+							return checkbox.checkboxProps;
+						}
+					} },
+					get children() {
+						return createComponent(CheckboxFieldContext, {
+							value: { slots: {
+								[DEFAULT_SLOT]: {},
+								get selection() {
+									return checkbox.checkboxProps;
+								}
+							} },
+							get children() {
+								return createComponent(ButtonContext, {
+									get value() {
+										return { slots: {
+											[DEFAULT_SLOT]: {},
+											get chevron() {
+												return aria.expandButtonProps;
+											},
+											drag: mergeProps$1(merge(() => drag?.dragButtonProps ?? {}), { style: { "pointer-events": "none" } })
+										} };
+									},
+									get children() {
+										return createComponent(RowFocusContext, {
+											value: { get isFocusVisibleWithinRow() {
+												return within.isFocusVisible;
+											} },
+											get children() {
+												return createComponent(SelectionIndicatorContext, {
+													value: { get isSelected() {
+														return aria.isSelected;
+													} },
+													get children() {
+														return createComponent(Branch, {
+															get collection() {
+																return state.collection;
+															},
+															parent: item
+														});
+													}
+												});
+											}
+										});
+									}
+								});
+							}
+						});
+					}
+				});
+			}
+		}));
+	}, (props) => createComponent(Collection, {
+		get items() {
+			return props.columns;
+		},
+		get dependencies() {
+			return props.dependencies;
+		},
+		get children() {
+			return props.children;
+		}
+	}))(ownProps);
+}
+const Cell = createLeafComponent(TableCellNode, (props, forwardedRef, cell) => {
+	const state = requireValue(useContext(TableStateContext), "Expected useContext(TableStateContext)");
+	const renderer = useContext(CollectionRendererContext);
+	const dnd = useContext(DragAndDropContext);
+	const within = useContext(RowFocusContext);
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	const Tag = dynamic(() => renderer.isVirtualized === true ? dom.div : dom.td);
+	cell.column = state.collection.columns[cell.index];
+	const aria = createTableCell({
+		get allowsArrowNavigation() {
+			return props.allowsArrowNavigation;
+		},
+		get focusMode() {
+			return props.focusMode;
+		},
+		isVirtualized: renderer.isVirtualized,
+		node: cell,
+		shouldSelectOnPressUp: !!dnd.dragState
+	}, state, ref);
+	const focus = createFocusRing();
+	const hover = createHover({});
+	const row = () => isPresent(cell.parentKey) ? state.collection.getItem(cell.parentKey) : null;
+	const values = {
+		columnIndex: cell.colIndex ?? cell.index,
+		get hasChildItems() {
+			const node = row();
+			return isTruthy(getNodeProps(node).hasChildItems) || isPresent(node?.lastChildKey) && state.collection.getItem(node.lastChildKey)?.type !== "cell";
+		},
+		id: cell.key,
+		get isDisabled() {
+			return isPresent(cell.parentKey) && state.selectionManager.isDisabled(cell.parentKey);
+		},
+		get isExpanded() {
+			return isPresent(cell.parentKey) && state.expandedKeys.has(cell.parentKey);
+		},
+		get isFocusVisible() {
+			return focus.isFocusVisible;
+		},
+		get isFocusVisibleWithinRow() {
+			return within.isFocusVisibleWithinRow;
+		},
+		get isFocused() {
+			return focus.isFocused;
+		},
+		get isHovered() {
+			return hover.isHovered;
+		},
+		get isPressed() {
+			return aria.isPressed;
+		},
+		get isSelected() {
+			return isPresent(cell.parentKey) && state.selectionManager.isSelected(cell.parentKey);
+		},
+		get isTreeColumn() {
+			return cell.column?.key === state.treeColumn;
+		},
+		get level() {
+			return (row()?.level ?? 0) + 1;
+		}
+	};
+	const render = createRenderProps(mergeProps$1(props, {
+		get children() {
+			return cell.rendered;
+		},
+		defaultClass: "solid2-aria-Cell",
+		values
+	}));
+	return createComponent(Tag, mergeProps(() => {
+		return mergeProps$1(omit(filterDOMProps(props, { global: true }), "id"), render, merge(() => aria.gridCellProps ?? {}), merge(() => focus.focusProps ?? {}), merge(() => hover.hoverProps ?? {}));
+	}, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get "data-focused"() {
+			return focus.isFocused || void 0;
+		},
+		get "data-focus-visible"() {
+			return focus.isFocusVisible || void 0;
+		},
+		get "data-focus-visible-within-row"() {
+			return within.isFocusVisibleWithinRow || void 0;
+		},
+		get "data-hovered"() {
+			return hover.isHovered || void 0;
+		},
+		get "data-pressed"() {
+			return aria.isPressed || void 0;
+		},
+		get "data-selected"() {
+			return values.isSelected || void 0;
+		},
+		get "data-column-index"() {
+			return values.columnIndex;
+		},
+		get "data-tree-column"() {
+			return values.isTreeColumn || void 0;
+		},
+		get "data-expanded"() {
+			return values.isExpanded || void 0;
+		},
+		get "data-has-child-items"() {
+			return values.hasChildItems || void 0;
+		},
+		get "data-level"() {
+			return values.level;
+		},
+		get "data-disabled"() {
+			return values.isDisabled || void 0;
+		},
+		get children() {
+			return createComponent(CollectionRendererContext, {
+				value: DefaultCollectionRenderer,
+				get children() {
+					return render.children;
+				}
+			});
+		}
+	}));
+});
+const TableLoadMoreItem = createLeafComponent(LoaderNode, (props, ref$2, item) => {
+	const state = requireValue(useContext(TableStateContext), "Expected useContext(TableStateContext)");
+	const renderer = useContext(CollectionRendererContext);
+	const Tag = dynamic(() => renderer.isVirtualized === true ? dom.div : dom.tr);
+	const CellTag = dynamic(() => renderer.isVirtualized === true ? dom.div : dom.td);
+	const [sentinel, setSentinel] = createSignal(null, { ownedWrite: true });
+	createLoadMoreSentinel(mergeProps$1(props, { get collection() {
+		return state.collection;
+	} }), sentinel);
+	return [(() => {
+		var _el$3 = getNextElement(_tmpl$3);
+		var _el$4 = _el$3.firstChild;
+		var _el$5 = _el$4.firstChild;
+		ref(() => {
+			return (element) => {
+				setSentinel(element);
+			};
+		}, _el$5);
+		effect(() => state.collection.columnCount, (_v$) => {
+			setAttribute(_el$4, "colspan", _v$);
+		});
+		return _el$3;
+	})(), memo(() => {
+		return memo(() => {
+			return props.isLoading === true;
+		})() && createComponent(Tag, mergeProps(() => {
+			return filterDOMProps(props, { global: true });
+		}, {
+			ref(r$) {
+				var _ref$5 = ref$2;
+				typeof _ref$5 === "function" || Array.isArray(_ref$5) ? applyRef(_ref$5, r$) : ref$2 = r$;
+			},
+			get render() {
+				return props.render;
+			},
+			get "class"() {
+				return props.class ?? "solid2-aria-TableLoadingIndicator";
+			},
+			get children() {
+				return createComponent(CellTag, {
+					role: "gridcell",
+					get colspan() {
+						return state.collection.columnCount;
+					},
+					get children() {
+						return item.rendered;
+					}
+				});
+			}
+		}));
+	})];
+});
+export { Cell, Column, ColumnResizer, ResizableTableContainer, Row, RowFocusContext, Table, TableBody, TableColumnResizeStateContext, TableContext, TableFooter, TableHeader, TableLoadMoreItem, TableStateContext, createTableOptions };
+
+//# sourceMappingURL=table.js.map