@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/Table.jsx

@@ -2,11 +2,14 @@ import { dataAttr, filterDOMProps, useRenderProps } from "./utils.jsx";
 import { ButtonContext } from "./Button.jsx";
 import { SharedElementTransition } from "./SharedElementTransition.jsx";
 import { useLinkProps, useRouter } from "./RouterProvider.jsx";
-import { CollectionRendererContext, useCollectionRenderer } from "./Collection.jsx";
-import { r as useVirtualizerContext } from "./Virtualizer2.jsx";
-import { getNormalizedDropTargetKey, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.jsx";
-import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, splitProps, untrack, useContext } from "solid-js";
-import { createFocusRing, createHover, createTable, createTableCell, createTableColumnHeader, createTableColumnResize, createTableRow, createTableRowGroup, createTableSelectAllCheckbox, createTableSelectionCheckbox, getTableData, isFocusVisible, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { t as racIntlStrings } from "./intl.jsx";
+import { CollectionRendererContext, renderCollectionDropSlots, useCollectionRenderer, useCollectionRoot } from "./Collection.jsx";
+import { o as useVirtualizerContext, t as PersistedVirtualItem } from "./Virtualizer2.jsx";
+import { getNormalizedDropTargetKey, indexesOutsideRange, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.jsx";
+import { createTreeDropTargetDelegate } from "./Tree.jsx";
+import { For, Show, createContext, createEffect, createMemo, createRenderEffect, createSignal, createTrackedEffect, createUniqueId, untrack, useContext } from "solid-js";
+import { createFocusRing, createHover, createStringFormatter, createTable, createTableCell, createTableColumnHeader, createTableColumnResize, createTableRow, createTableRowGroup, createTableSelectAllCheckbox, createTableSelectionCheckbox, getTableData, isFocusVisible, mergeProps, useLocale } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createTableCollection, createTableColumnResizeState, createTableState, createTreeGridState } from "@proyecto-viviana/solid-stately";
 //#region src/Table.tsx
 /**
@@ -15,7 +18,7 @@ import { createTableCollection, createTableColumnResizeState, createTableState,
 * A pre-wired headless table that combines state + aria hooks.
 * Based on react-aria-components/src/Table.tsx
 */
-function assignRef(ref, el) {
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -38,6 +41,24 @@ function resolveItemKey(item, getKey, index) {
 	const record = item;
 	return record.id ?? record.key ?? index;
 }
+/** RAC Table.tsx TableElementType / THead / TBody / row / cell: div when virtualized. */
+function TableHost(props) {
+	const [local, rest] = splitProps(props, [
+		"hostTag",
+		"virtualized",
+		"children"
+	]);
+	if (local.virtualized) return <div {...rest}>{local.children}</div>;
+	switch (local.hostTag) {
+		case "table": return <table {...rest}>{local.children}</table>;
+		case "thead": return <thead {...rest}>{local.children}</thead>;
+		case "tbody": return <tbody {...rest}>{local.children}</tbody>;
+		case "tfoot": return <tfoot {...rest}>{local.children}</tfoot>;
+		case "tr": return <tr {...rest}>{local.children}</tr>;
+		case "th": return <th {...rest}>{local.children}</th>;
+		default: return <td {...rest}>{local.children}</td>;
+	}
+}
 /**
 * Turns the flat `items` into nested {@link RowDefinition}s by recursively expanding each
 * item's children via `getChildItems`. The result feeds the tree-grid collection.
@@ -100,6 +121,7 @@ function Table(props) {
 		"UNSTABLE_defaultExpandedKeys",
 		"UNSTABLE_onExpandedChange"
 	]);
+	const locale = useLocale();
 	const [ref, setRef] = createSignal(null);
 	const normalizedColumns = createMemo(() => normalizeColumnDefinitions(stateProps.columns));
 	const rowHeaderColumnKeys = createMemo(() => getRowHeaderColumnKeys(normalizedColumns()));
@@ -195,43 +217,38 @@ function Table(props) {
 		const hooks = local.dragAndDropHooks;
 		return Boolean(hooks?.useDroppableCollectionState && hooks.useDroppableCollection && (hooks.dropTargetDelegate || parentCollectionRenderer?.dropTargetDelegate || hooks.ListDropTargetDelegate));
 	});
-	const hasDraggableDnd = createMemo(() => {
+	const dragStateValue = createMemo(() => {
 		const hooks = local.dragAndDropHooks;
 		return Boolean(hooks?.useDraggableCollectionState && hooks.useDraggableCollection);
-	});
-	const dragState = createMemo(() => {
-		if (!hasDraggableDnd()) return void 0;
-		return local.dragAndDropHooks?.useDraggableCollectionState?.({ items: stateProps.items });
-	});
-	const dropState = createMemo(() => {
+	})() ? local.dragAndDropHooks?.useDraggableCollectionState?.({
+		items: stateProps.items,
+		collection: state.collection,
+		selectedKeys: state.selectedKeys,
+		isSelected: (key) => state.isSelected(key)
+	}) : void 0;
+	const dragState = () => dragStateValue;
+	const dropStateValue = hasDroppableDnd() ? local.dragAndDropHooks?.useDroppableCollectionState?.({ get collection() {
+		return state.collection;
+	} }) : void 0;
+	const dropState = () => dropStateValue;
+	if (local.dragAndDropHooks?.useDraggableCollection && dragStateValue) local.dragAndDropHooks.useDraggableCollection({}, dragStateValue, () => ref());
+	const droppableCollectionValue = (() => {
 		if (!hasDroppableDnd()) return void 0;
-		return local.dragAndDropHooks?.useDroppableCollectionState?.({});
-	});
-	createEffect(() => {
-		if (!hasDraggableDnd()) return;
 		const hooks = local.dragAndDropHooks;
-		const activeDragState = dragState();
-		if (!hooks?.useDraggableCollection || !activeDragState) return;
-		hooks.useDraggableCollection({}, activeDragState, () => ref());
-	});
-	const droppableCollection = createMemo(() => {
-		if (!hasDroppableDnd()) return void 0;
-		const hooks = local.dragAndDropHooks;
-		const activeDropState = dropState();
+		const activeDropState = dropStateValue;
 		if (!hooks?.useDroppableCollection || !activeDropState) return void 0;
-		const resolveDirection = () => {
-			const el = ref();
-			if (el && typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
-				if (window.getComputedStyle(el).direction === "rtl") return "rtl";
-			}
-			return typeof document !== "undefined" && document.dir === "rtl" ? "rtl" : "ltr";
-		};
-		const dropTargetDelegate = hooks.dropTargetDelegate ?? parentCollectionRenderer?.dropTargetDelegate ?? (hooks.ListDropTargetDelegate ? new hooks.ListDropTargetDelegate(() => state.collection, () => ref(), {
+		const resolveDirection = () => locale().direction;
+		const baseDropTargetDelegate = hooks.dropTargetDelegate ?? parentCollectionRenderer?.dropTargetDelegate ?? (hooks.ListDropTargetDelegate ? new hooks.ListDropTargetDelegate(() => state.collection, () => ref(), {
 			layout: "grid",
 			orientation: "vertical",
 			direction: resolveDirection()
 		}) : void 0);
-		if (!dropTargetDelegate) return void 0;
+		if (!baseDropTargetDelegate) return void 0;
+		const expandedKeys = state.expandedKeys;
+		const dropTargetDelegate = createTreeDropTargetDelegate(baseDropTargetDelegate, {
+			collection: state.collection,
+			expandedKeys: expandedKeys === "all" ? new Set(Array.from(state.collection, (node) => node.key)) : expandedKeys ?? /* @__PURE__ */ new Set()
+		}, resolveDirection());
 		return hooks.useDroppableCollection({
 			dropTargetDelegate,
 			keyboardDelegate: {
@@ -257,7 +274,8 @@ function Table(props) {
 			},
 			setFocusedKey: (key) => state.setFocusedKey(key)
 		}, activeDropState, () => ref());
-	});
+	})();
+	const droppableCollection = () => droppableCollectionValue;
 	const isRootDropTarget = createMemo(() => {
 		return Boolean(dropState()?.target?.type === "root");
 	});
@@ -293,7 +311,8 @@ function Table(props) {
 		},
 		get isVirtualized() {
 			return ariaProps.isVirtualized ?? parentCollectionRenderer?.isVirtualized ?? false;
-		}
+		},
+		getScrollElement: () => ref()
 	};
 	const collectionRenderer = createMemo(() => ({
 		...parentCollectionRenderer,
@@ -304,27 +323,29 @@ function Table(props) {
 	const tableProps = () => ({
 		ref: (el) => {
 			setRef(el);
-			assignRef(local.ref, el);
+			assignRef$1(local.ref, el);
 		},
-		...mergeProps$1(domProps(), cleanGridProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {}),
+		...mergeProps(domProps(), cleanGridProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {}),
 		class: renderProps.class(),
 		style: renderProps.style(),
-		"data-focused": state.isFocused || void 0,
-		"data-focus-visible": isFocusVisible() || void 0,
-		"data-empty": stateProps.items.length === 0 || void 0,
-		"data-drop-target": isRootDropTarget() || void 0,
+		"data-focused": dataAttr(state.isFocused),
+		"data-focus-visible": dataAttr(isFocusVisible()),
+		"data-empty": dataAttr(stateProps.items.length === 0),
+		"data-drop-target": dataAttr(isRootDropTarget()),
 		slot: local.slot
 	});
-	return <TableContext.Provider value={contextValue}>
-      <TableStateContext.Provider value={state}>
-        <CollectionRendererContext.Provider value={collectionRenderer()}>
+	return <TableContext value={contextValue}>
+      <TableStateContext value={state}>
+        <CollectionRendererContext value={collectionRenderer()}>
           {local.render ? local.render({
 		...tableProps(),
 		children: tableChildren()
-	}, renderValues()) : <table {...tableProps()}>{tableChildren()}</table>}
-        </CollectionRendererContext.Provider>
-      </TableStateContext.Provider>
-    </TableContext.Provider>;
+	}, renderValues()) : <TableHost hostTag="table" virtualized={contextValue.isVirtualized} {...tableProps()}>
+              {tableChildren()}
+            </TableHost>}
+        </CollectionRendererContext>
+      </TableStateContext>
+    </TableContext>;
 }
 /**
 * A header row in a table containing column headers.
@@ -338,7 +359,8 @@ function TableHeader(props) {
 		"children",
 		"ref"
 	]);
-	if (!useContext(TableContext)) throw new Error("TableHeader must be used within a Table");
+	const context = useContext(TableContext);
+	if (!context) throw new Error("TableHeader must be used within a Table");
 	const { rowGroupProps } = createTableRowGroup(() => ({ type: "thead" }));
 	const { isHovered, hoverProps } = createHover({
 		isDisabled: false,
@@ -370,19 +392,24 @@ function TableHeader(props) {
 		return rest;
 	};
 	const headerProps = () => ({
-		ref: (el) => assignRef(local.ref, el),
+		ref: (el) => assignRef$1(local.ref, el),
 		...domProps,
 		...cleanRowGroupProps(),
 		...cleanHoverProps(),
 		class: renderProps.class(),
 		style: renderProps.style(),
 		"data-hovered": isHovered() || void 0,
-		children: <tr role="row">{local.children}</tr>
+		children: <TableHost hostTag="tr" virtualized={context.isVirtualized} role="row">
+          {local.children}
+        </TableHost>
 	});
-	return local.render ? local.render(headerProps(), renderValues()) : <thead ref={(el) => assignRef(local.ref, el)} {...domProps} {...cleanRowGroupProps()} {...cleanHoverProps()} class={renderProps.class()} style={renderProps.style()} data-hovered={isHovered() || void 0}>
-      <tr role="row">{local.children}</tr>
-    </thead>;
+	return local.render ? local.render(headerProps(), renderValues()) : <TableHost hostTag="thead" virtualized={context.isVirtualized} ref={(el) => assignRef$1(local.ref, el)} {...domProps} {...cleanRowGroupProps()} {...cleanHoverProps()} class={renderProps.class()} style={renderProps.style()} data-hovered={dataAttr(isHovered())}>
+      <TableHost hostTag="tr" virtualized={context.isVirtualized} role="row">
+        {local.children}
+      </TableHost>
+    </TableHost>;
 }
+const TableColumnDefinitionContext = createContext(null);
 /**
 * A column header in a table.
 */
@@ -497,31 +524,45 @@ function TableColumn(props) {
 			...widthStyle
 		};
 	});
-	const columnChildren = () => typeof local.children === "function" ? local.children(renderValues()) : local.children;
-	const columnProps = () => ({
+	const columnChildren = () => {
+		const rawChildren = local.children;
+		return typeof rawChildren === "function" ? rawChildren(renderValues()) : rawChildren;
+	};
+	const columnAttrs = () => ({
 		ref: (el) => {
 			setRef(el);
-			assignRef(local.ref, el);
+			assignRef$1(local.ref, el);
 		},
 		...domProps,
-		...mergeProps$1(cleanColumnHeaderProps(), cleanHoverProps(), cleanFocusProps()),
+		...mergeProps(cleanColumnHeaderProps(), cleanHoverProps(), cleanFocusProps()),
 		class: renderProps.class(),
 		style: columnStyle(),
-		"data-sortable": local.allowsSorting || void 0,
+		"data-sortable": dataAttr(!!local.allowsSorting),
 		"data-sort-direction": sortDirection() || void 0,
-		"data-resizable": local.allowsResizing || void 0,
-		"data-resizing": isResizing() || void 0,
-		"data-hovered": isHovered() || void 0,
-		"data-focused": state.focusedKey === local.id || void 0,
-		"data-focus-visible": isFocusVisible() && state.focusedKey === local.id || void 0,
-		children: columnChildren()
+		"data-resizable": dataAttr(!!local.allowsResizing),
+		"data-resizing": dataAttr(isResizing()),
+		"data-hovered": dataAttr(isHovered()),
+		"data-focused": dataAttr(state.focusedKey === local.id),
+		"data-focus-visible": dataAttr(isFocusVisible() && state.focusedKey === local.id),
+		"data-key": local.id
 	});
-	return local.render ? local.render(columnProps(), renderValues()) : <th ref={(el) => {
-		setRef(el);
-		assignRef(local.ref, el);
-	}} {...domProps} {...mergeProps$1(cleanColumnHeaderProps(), cleanHoverProps(), cleanFocusProps())} class={renderProps.class()} style={columnStyle()} data-sortable={local.allowsSorting || void 0} data-sort-direction={sortDirection() || void 0} data-resizable={local.allowsResizing || void 0} data-resizing={isResizing() || void 0} data-hovered={isHovered() || void 0} data-focused={state.focusedKey === local.id || void 0} data-focus-visible={isFocusVisible() && state.focusedKey === local.id || void 0}>
-      {columnChildren()}
-    </th>;
+	const columnDefinition = {
+		key: local.id,
+		width: local.width ?? local.defaultWidth,
+		minWidth: local.minWidth,
+		maxWidth: local.maxWidth
+	};
+	if (local.render) return <TableColumnDefinitionContext value={columnDefinition}>
+        {local.render({
+		...columnAttrs(),
+		children: columnChildren()
+	}, renderValues())}
+      </TableColumnDefinitionContext>;
+	return <TableColumnDefinitionContext value={columnDefinition}>
+      <TableHost hostTag="th" virtualized={context.isVirtualized} {...columnAttrs()}>
+        {columnChildren()}
+      </TableHost>
+    </TableColumnDefinitionContext>;
 }
 /**
 * The body of a table containing data rows.
@@ -564,21 +605,22 @@ function TableBody(props) {
 		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return null;
 		const rowCount = items().length;
 		const baseRange = virtualizer.getVisibleRange(rowCount);
-		const persistedIndexes = Array.from(persistedKeys()).map((key) => rowNodes().findIndex((node) => node.key === key)).filter((index) => index >= 0);
 		const dropTarget = context.dropState?.target;
 		const normalizedDropKey = getNormalizedDropTargetKey(dropTarget, context.collection);
-		const focusedKey = context.state.focusedKey;
-		const focusedIndex = focusedKey != null ? rowNodes().findIndex((node) => node.key === focusedKey) : -1;
-		return mergePersistedKeysIntoVirtualRange(baseRange, persistedIndexes, rowCount, virtualizer, 80, {
-			forceIncludeIndexes: [
-				dropTarget?.type === "item" ? rowNodes().findIndex((node) => node.key === dropTarget.key) : -1,
-				normalizedDropKey != null ? rowNodes().findIndex((node) => node.key === normalizedDropKey) : -1,
-				dropTarget?.type === "item" ? -1 : focusedIndex
-			].filter((index) => index >= 0),
+		const forceIncludeIndexes = [dropTarget?.type === "item" ? rowNodes().findIndex((node) => node.key === dropTarget.key) : -1, normalizedDropKey != null ? rowNodes().findIndex((node) => node.key === normalizedDropKey) : -1].filter((index) => index >= 0);
+		return mergePersistedKeysIntoVirtualRange(baseRange, [], rowCount, virtualizer, 80, {
+			forceIncludeIndexes,
 			forceIncludeMaxSpan: 320
 		});
 	});
-	createEffect(() => {
+	const persistedOutsideIndexes = createMemo(() => {
+		const range = virtualRange();
+		if (!range) return [];
+		const persistedIndexes = Array.from(persistedKeys()).map((key) => rowNodes().findIndex((node) => node.key === key)).filter((index) => index >= 0);
+		return indexesOutsideRange(range, persistedIndexes);
+	});
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return;
 		virtualizer.setDropTargetItemCountResolver(() => items().length);
 		virtualizer.setDropTargetIndexResolver((key) => {
@@ -593,11 +635,14 @@ function TableBody(props) {
 				key: typeof node.key === "string" || typeof node.key === "number" ? node.key : void 0
 			};
 		});
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			virtualizer.setDropTargetIndexResolver(void 0);
 			virtualizer.setDropTargetItemCountResolver(void 0);
 			virtualizer.setDropTargetResolver(void 0);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	const visibleItems = createMemo(() => {
 		if (context.state.treeColumn != null) return rowNodes().map((node) => node.value);
@@ -606,43 +651,42 @@ function TableBody(props) {
 		return items().slice(range.start, range.end);
 	});
 	const spacerColSpan = () => context.columns.length + (context.showSelectionCheckboxes ? 1 : 0);
+	const CollectionRoot = useCollectionRoot();
+	const collectionRows = () => {
+		const rows = <For each={visibleItems()}>
+        {(item, index) => {
+			const itemIndex = () => (virtualRange()?.start ?? 0) + index();
+			return renderCollectionDropSlots({
+				index: itemIndex(),
+				lastIndex: rowNodes().length - 1,
+				renderDropIndicator: (i, position) => parentCollectionRenderer?.renderDropIndicator?.(i, position),
+				children: local.children?.(item)
+			});
+		}}
+      </For>;
+		if (!context.isVirtualized) return rows;
+		return <CollectionRoot collection={virtualRange() ? items() : []} scrollRef={() => context.getScrollElement()} persistedKeys={persistedKeys()}>
+        {rows}
+        <For each={persistedOutsideIndexes()}>
+          {(index) => <PersistedVirtualItem index={index}>
+              {renderCollectionDropSlots({
+			index,
+			lastIndex: rowNodes().length - 1,
+			renderDropIndicator: (i, position) => parentCollectionRenderer?.renderDropIndicator?.(i, position),
+			children: local.children?.(items()[index])
+		})}
+            </PersistedVirtualItem>}
+        </For>
+      </CollectionRoot>;
+	};
 	const bodyChildren = () => <>
       <SharedElementTransition>
-        <Show when={isEmpty() && local.renderEmptyState && !local.isLoading} fallback={<>
-              {virtualRange()?.offsetTop ? <tr role="presentation" aria-hidden="true" data-virtualizer-spacer="top">
-                  <td colSpan={spacerColSpan()} style={{
-		height: `${virtualRange().offsetTop}px`,
-		padding: "0",
-		border: "0"
-	}} />
-                </tr> : null}
-              <For each={visibleItems()}>
-                {(item, index) => {
-		const itemIndex = () => (virtualRange()?.start ?? 0) + index();
-		const beforeIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "before");
-		const onIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "on");
-		const afterIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "after");
-		return <>
-                      {beforeIndicator()}
-                      {onIndicator()}
-                      {local.children?.(item)}
-                      {afterIndicator()}
-                    </>;
-	}}
-              </For>
-              {virtualRange()?.offsetBottom ? <tr role="presentation" aria-hidden="true" data-virtualizer-spacer="bottom">
-                  <td colSpan={spacerColSpan()} style={{
-		height: `${virtualRange().offsetBottom}px`,
-		padding: "0",
-		border: "0"
-	}} />
-                </tr> : null}
-            </>}>
-          <tr role="row" data-empty-state>
-            <th role="rowheader" colSpan={spacerColSpan()}>
+        <Show when={isEmpty() && local.renderEmptyState && !local.isLoading} fallback={collectionRows()}>
+          <TableHost hostTag="tr" virtualized={context.isVirtualized} role="row" data-empty-state>
+            <TableHost hostTag="th" virtualized={context.isVirtualized} role="rowheader" colSpan={spacerColSpan()}>
               {local.renderEmptyState?.()}
-            </th>
-          </tr>
+            </TableHost>
+          </TableHost>
         </Show>
       </SharedElementTransition>
       <Show when={local.hasMore && local.onLoadMore}>
@@ -650,57 +694,17 @@ function TableBody(props) {
       </Show>
     </>;
 	const bodyProps = () => ({
-		ref: (el) => assignRef(local.ref, el),
+		ref: (el) => assignRef$1(local.ref, el),
 		...domProps,
 		...cleanRowGroupProps(),
 		class: renderProps.class(),
 		style: renderProps.style(),
-		"data-empty": isEmpty() || void 0,
+		"data-empty": dataAttr(isEmpty()),
 		children: bodyChildren()
 	});
-	return local.render ? local.render(bodyProps(), renderValues()) : <tbody ref={(el) => assignRef(local.ref, el)} {...domProps} {...cleanRowGroupProps()} class={renderProps.class()} style={renderProps.style()} data-empty={isEmpty() || void 0}>
-      <SharedElementTransition>
-        <Show when={isEmpty() && local.renderEmptyState && !local.isLoading} fallback={<>
-              {virtualRange()?.offsetTop ? <tr role="presentation" aria-hidden="true" data-virtualizer-spacer="top">
-                  <td colSpan={spacerColSpan()} style={{
-		height: `${virtualRange().offsetTop}px`,
-		padding: "0",
-		border: "0"
-	}} />
-                </tr> : null}
-              <For each={visibleItems()}>
-                {(item, index) => {
-		const itemIndex = () => (virtualRange()?.start ?? 0) + index();
-		const beforeIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "before");
-		const onIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "on");
-		const afterIndicator = () => parentCollectionRenderer?.renderDropIndicator?.(itemIndex(), "after");
-		return <>
-                      {beforeIndicator()}
-                      {onIndicator()}
-                      {local.children?.(item)}
-                      {afterIndicator()}
-                    </>;
-	}}
-              </For>
-              {virtualRange()?.offsetBottom ? <tr role="presentation" aria-hidden="true" data-virtualizer-spacer="bottom">
-                  <td colSpan={spacerColSpan()} style={{
-		height: `${virtualRange().offsetBottom}px`,
-		padding: "0",
-		border: "0"
-	}} />
-                </tr> : null}
-            </>}>
-          <tr role="row" data-empty-state>
-            <th role="rowheader" colSpan={spacerColSpan()}>
-              {local.renderEmptyState?.()}
-            </th>
-          </tr>
-        </Show>
-      </SharedElementTransition>
-      <Show when={local.hasMore && local.onLoadMore}>
-        <TableLoadMoreItem onLoadMore={local.onLoadMore} isLoading={local.isLoading} colSpan={spacerColSpan()} />
-      </Show>
-    </tbody>;
+	return local.render ? local.render(bodyProps(), renderValues()) : <TableHost hostTag="tbody" virtualized={context.isVirtualized} ref={(el) => assignRef$1(local.ref, el)} {...domProps} {...cleanRowGroupProps()} class={renderProps.class()} style={renderProps.style()} data-empty={dataAttr(isEmpty())}>
+      {bodyChildren()}
+    </TableHost>;
 }
 /**
 * The footer of a table containing summary rows.
@@ -713,7 +717,8 @@ function TableFooter(props) {
 		"slot",
 		"children"
 	]);
-	if (!useContext(TableContext)) throw new Error("TableFooter must be used within a Table");
+	const context = useContext(TableContext);
+	if (!context) throw new Error("TableFooter must be used within a Table");
 	const { rowGroupProps } = createTableRowGroup(() => ({ type: "tfoot" }));
 	const items = createMemo(() => local.items ?? []);
 	const renderValues = createMemo(() => ({ isEmpty: items().length === 0 }));
@@ -726,16 +731,18 @@ function TableFooter(props) {
 		const { ref: _ref, ...rest } = rowGroupProps;
 		return rest;
 	};
-	return <tfoot {...domProps} {...cleanRowGroupProps()} class={renderProps.class()} style={renderProps.style()}>
+	return <TableHost hostTag="tfoot" virtualized={context.isVirtualized} {...domProps} {...cleanRowGroupProps()} class={renderProps.class()} style={renderProps.style()}>
       <Show when={local.items && typeof local.children === "function"} fallback={local.children}>
         <For each={items()}>{(item) => local.children(item)}</For>
       </Show>
-    </tfoot>;
+    </TableHost>;
 }
 function TableLoadMoreItem(props) {
-	let sentinelRef;
+	const [sentinel, setSentinel] = createSignal();
 	const [isPending, setIsPending] = createSignal(false);
+	const scrollOffsetValue = createMemo(() => props.scrollOffset ?? 1);
 	const isLoading = () => !!props.isLoading || isPending();
+	const tableContext = useContext(TableContext);
 	const triggerLoadMore = async () => {
 		if (isPending()) return;
 		setIsPending(true);
@@ -745,7 +752,18 @@ function TableLoadMoreItem(props) {
 			setIsPending(false);
 		}
 	};
-	createEffect(() => {});
+	createEffect(() => ({
+		current: sentinel(),
+		scrollOffset: scrollOffsetValue()
+	}), ({ current, scrollOffset }) => {
+		if (!current || typeof IntersectionObserver !== "function") return;
+		const margin = `0px 0px ${100 * scrollOffset}% 0px`;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries[0]?.isIntersecting) triggerLoadMore();
+		}, { rootMargin: margin });
+		observer.observe(current);
+		return () => observer.disconnect();
+	});
 	const renderProps = useRenderProps({
 		children: props.children ?? (() => isLoading() ? <div role="progressbar" aria-label="loading" /> : null),
 		class: props.class,
@@ -753,28 +771,54 @@ function TableLoadMoreItem(props) {
 		defaultClassName: "solidaria-Table-loadMore"
 	}, () => ({ isLoading: isLoading() }));
 	return <>
-      <tr style={{
+      <Show when={tableContext?.isVirtualized} fallback={<>
+            <tr style={{
+		position: "relative",
+		width: 0,
+		height: 0,
+		overflow: "hidden"
+	}} inert>
+              <td>
+                <div ref={setSentinel} data-testid="loadMoreSentinel" style={{
+		position: "absolute",
+		height: "1px",
+		width: "1px"
+	}} />
+              </td>
+            </tr>
+            <Show when={isLoading()}>
+              <tr role="row" tabindex={0} onFocus={() => {
+		triggerLoadMore();
+	}} class={renderProps.class()} style={renderProps.style()} data-loading>
+                <td role="rowheader" colspan={props.colSpan ?? 1}>
+                  {renderProps.renderChildren()}
+                </td>
+              </tr>
+            </Show>
+          </>}>
+        <TableHost hostTag="tr" virtualized style={{
 		position: "relative",
 		width: 0,
 		height: 0,
 		overflow: "hidden"
 	}} inert>
-        <td>
-          <div ref={sentinelRef} data-testid="loadMoreSentinel" style={{
+          <TableHost hostTag="td" virtualized>
+            <div ref={setSentinel} data-testid="loadMoreSentinel" style={{
 		position: "absolute",
 		height: "1px",
 		width: "1px"
 	}} />
-        </td>
-      </tr>
-      <Show when={isLoading()}>
-        <tr role="row" tabIndex={0} onFocus={() => {
+          </TableHost>
+        </TableHost>
+        <Show when={isLoading()}>
+          <TableHost hostTag="tr" virtualized role="row" tabindex={0} onFocus={() => {
 		triggerLoadMore();
 	}} class={renderProps.class()} style={renderProps.style()} data-loading>
-          <td role="rowheader" colSpan={props.colSpan ?? 1}>
-            {renderProps.renderChildren()}
-          </td>
-        </tr>
+            <TableHost hostTag="td" virtualized role="rowheader" colSpan={props.colSpan ?? 1}>
+              {renderProps.renderChildren()}
+            </TableHost>
+          </TableHost>
+        </Show>
       </Show>
     </>;
 }
@@ -923,8 +967,12 @@ function TableRow(props) {
 		return rest;
 	};
 	const rowContextValue = {
-		rowKey: rowKey(),
-		rowNode: rowNode(),
+		get rowKey() {
+			return rowKey();
+		},
+		get rowNode() {
+			return rowNode();
+		},
 		get isRowDisabled() {
 			return isDisabled();
 		},
@@ -935,7 +983,8 @@ function TableRow(props) {
 				index = registeredCellIds.length;
 				registeredCellIds.push(cellId);
 			}
-			return explicitId ?? tableContext.columns[index]?.key;
+			const dataColumns = tableContext.columns.filter((column) => column.key !== "__selection__");
+			return explicitId ?? dataColumns[index]?.key;
 		}
 	};
 	const dragButtonProps = createMemo(() => {
@@ -996,8 +1045,8 @@ function TableRow(props) {
 			"--table-row-level": rowLevel()
 		};
 	};
-	return <TableRowContext.Provider value={rowContextValue}>
-      <ButtonContext.Provider value={buttonContextValue}>
+	return <TableRowContext value={rowContextValue}>
+      <ButtonContext value={buttonContextValue}>
         {(() => {
 		registeredCellIds.length = 0;
 		const rowChildrenContent = typeof local.children === "function" ? local.columns ? <For each={local.columns}>
@@ -1006,44 +1055,41 @@ function TableRow(props) {
 		const tableRowProps = () => ({
 			ref: (el) => {
 				setRef(el);
-				assignRef(local.ref, el);
+				assignRef$1(local.ref, el);
+				const dragRef = (draggableItem()?.dragProps)?.ref;
+				if (typeof dragRef === "function") dragRef(el);
 			},
 			...domProps,
-			...mergeProps$1(cleanRowProps(), cleanHoverProps(), cleanFocusProps(), focusWithinProps, draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}),
+			...mergeProps(cleanRowProps(), cleanHoverProps(), cleanFocusProps(), focusWithinProps, draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}),
 			class: renderProps.class(),
 			style: rowStyle(),
 			"data-key": rowKey(),
-			"data-selected": isSelected() || void 0,
-			"data-focused": isFocused() || void 0,
-			"data-focus-visible": isFocusVisible$1() && isFocused() || void 0,
+			"data-selected": dataAttr(isSelected()),
+			"data-focused": dataAttr(isFocused()),
+			"data-focus-visible": dataAttr(isFocusVisible$1() && isFocused()),
 			"data-focus-visible-within": dataAttr(isFocusWithin() && isFocusVisible()),
-			"data-pressed": isPressed() || void 0,
-			"data-hovered": isHovered() || void 0,
-			"data-disabled": isDisabled() || void 0,
+			"data-pressed": dataAttr(isPressed()),
+			"data-hovered": dataAttr(isHovered()),
+			"data-disabled": dataAttr(isDisabled()),
 			"data-href": linkProps().href,
 			"data-target": linkProps().target,
 			"data-rel": linkProps().rel,
 			"data-download": typeof linkProps().download === "string" ? linkProps().download : linkProps().download ? "" : void 0,
 			"data-ping": linkProps().ping,
 			"data-referrer-policy": linkProps().referrerPolicy,
-			"data-dragging": draggableItem()?.isDragging || void 0,
-			"data-drop-target": droppableItem()?.isDropTarget || void 0,
-			"data-expanded": isTreeRow() && isExpanded() || void 0,
-			"data-has-child-items": isTreeRow() && hasChildItems() || void 0,
+			"data-dragging": dataAttr(!!draggableItem()?.isDragging),
+			"data-drop-target": dataAttr(!!droppableItem()?.isDropTarget),
+			"data-expanded": dataAttr(isTreeRow() && isExpanded()),
+			"data-has-child-items": dataAttr(isTreeRow() && hasChildItems()),
 			"data-level": isTreeRow() ? rowLevel() : void 0,
 			children: rowChildrenContent
 		});
-		return <Show when={local.render} fallback={<tr ref={(el) => {
-			setRef(el);
-			assignRef(local.ref, el);
-		}} {...domProps} {...mergeProps$1(cleanRowProps(), cleanHoverProps(), cleanFocusProps(), focusWithinProps, draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {})} class={renderProps.class()} style={rowStyle()} data-key={rowKey()} data-selected={isSelected() || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible$1() && isFocused() || void 0} data-focus-visible-within={dataAttr(isFocusWithin() && isFocusVisible())} data-pressed={isPressed() || void 0} data-hovered={isHovered() || void 0} data-disabled={isDisabled() || void 0} data-href={linkProps().href} data-target={linkProps().target} data-rel={linkProps().rel} data-download={typeof linkProps().download === "string" ? linkProps().download : linkProps().download ? "" : void 0} data-ping={linkProps().ping} data-referrer-policy={linkProps().referrerPolicy} data-dragging={draggableItem()?.isDragging || void 0} data-drop-target={droppableItem()?.isDropTarget || void 0} data-expanded={isTreeRow() && isExpanded() || void 0} data-has-child-items={isTreeRow() && hasChildItems() || void 0} data-level={isTreeRow() ? rowLevel() : void 0}>
-                  {rowChildrenContent}
-                </tr>}>
+		return <Show when={local.render} fallback={tableContext.isVirtualized ? <div {...tableRowProps()} /> : <tr {...tableRowProps()} />}>
               {local.render(tableRowProps(), renderValues())}
             </Show>;
 	})()}
-      </ButtonContext.Provider>
-    </TableRowContext.Provider>;
+      </ButtonContext>
+    </TableRowContext>;
 }
 /**
 * A cell in a table row.
@@ -1070,14 +1116,26 @@ function TableCell(props) {
 	const columnKey = createMemo(() => rowContext.getCellColumnKey(cellId, local.id));
 	const cellNode = createMemo(() => {
 		const key = columnKey();
+		const collection = state.collection;
 		if (key != null) {
 			const cellKey = `${rowKey}-${key}`;
-			const node = state.collection.getItem(cellKey);
+			const node = collection.getItem(cellKey);
 			if (node) return node;
+			return {
+				type: collection.rowHeaderColumnKeys.has(key) ? "rowheader" : "cell",
+				key: cellKey,
+				value: rowNode.value,
+				textValue: "",
+				level: 1,
+				index: 0,
+				parentKey: rowKey,
+				hasChildNodes: false,
+				childNodes: []
+			};
 		}
 		return {
 			type: "cell",
-			key: key ?? `${rowKey}-cell`,
+			key: `${rowKey}-cell`,
 			value: rowNode.value,
 			textValue: "",
 			level: 1,
@@ -1135,35 +1193,38 @@ function TableCell(props) {
 		const { ref: _ref3, ...rest } = focusProps;
 		return rest;
 	};
-	const cellChildren = () => typeof local.children === "function" ? local.children(renderValues()) : local.children;
-	const tableCellProps = () => ({
+	const cellChildren = () => {
+		const rawChildren = local.children;
+		return typeof rawChildren === "function" ? rawChildren(renderValues()) : rawChildren;
+	};
+	const cellAttrs = () => ({
 		ref: (el) => {
 			setRef(el);
-			assignRef(local.ref, el);
+			assignRef$1(local.ref, el);
 		},
 		...domProps,
-		...mergeProps$1(cleanCellProps(), cleanHoverProps(), cleanFocusProps()),
+		...mergeProps(cleanCellProps(), cleanHoverProps(), cleanFocusProps()),
 		colSpan: local.colSpan,
 		class: renderProps.class(),
 		style: renderProps.style(),
 		"data-key": cellNode().key,
-		"data-focused": isFocused() || void 0,
-		"data-focus-visible": isFocusVisible() && isFocused() || void 0,
+		"data-focused": dataAttr(isFocused()),
+		"data-focus-visible": dataAttr(isFocusVisible() && isFocused()),
 		"data-column-index": cellColumnIndex(),
-		"data-pressed": isPressed() || void 0,
-		"data-hovered": isHovered() || void 0,
-		"data-tree-column": isTreeColumn() || void 0,
-		"data-expanded": isTreeGridCell() && cellIsExpanded() || void 0,
-		"data-has-child-items": isTreeGridCell() && cellHasChildItems() || void 0,
-		"data-level": isTreeGridCell() ? cellLevel() : void 0,
-		children: cellChildren()
+		"data-pressed": dataAttr(isPressed()),
+		"data-hovered": dataAttr(isHovered()),
+		"data-tree-column": dataAttr(isTreeColumn()),
+		"data-expanded": dataAttr(isTreeGridCell() && cellIsExpanded()),
+		"data-has-child-items": dataAttr(isTreeGridCell() && cellHasChildItems()),
+		"data-level": isTreeGridCell() ? cellLevel() : void 0
 	});
-	return local.render ? local.render(tableCellProps(), renderValues()) : <td ref={(el) => {
-		setRef(el);
-		assignRef(local.ref, el);
-	}} {...domProps} {...mergeProps$1(cleanCellProps(), cleanHoverProps(), cleanFocusProps())} colSpan={local.colSpan} class={renderProps.class()} style={renderProps.style()} data-key={cellNode().key} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() && isFocused() || void 0} data-column-index={cellColumnIndex()} data-pressed={isPressed() || void 0} data-hovered={isHovered() || void 0} data-tree-column={isTreeColumn() || void 0} data-expanded={isTreeGridCell() && cellIsExpanded() || void 0} data-has-child-items={isTreeGridCell() && cellHasChildItems() || void 0} data-level={isTreeGridCell() ? cellLevel() : void 0}>
+	if (local.render) return local.render({
+		...cellAttrs(),
+		children: cellChildren()
+	}, renderValues());
+	return <TableHost hostTag="td" virtualized={tableContext.isVirtualized} {...cellAttrs()}>
       {cellChildren()}
-    </td>;
+    </TableHost>;
 }
 /**
 * A checkbox cell for row selection.
@@ -1177,7 +1238,7 @@ function TableSelectionCheckbox(props) {
 		key: props.rowKey,
 		isRowDisabled: rowContext?.isRowDisabled
 	}), () => state);
-	return <input {...selectionCheckboxAria.checkboxProps} class={props.class} style={props.style} tabIndex={props.excludeFromTabOrder ? -1 : selectionCheckboxAria.checkboxProps.tabIndex} aria-label={props["aria-label"] ?? selectionCheckboxAria.checkboxProps["aria-label"]} onClick={(event) => event.stopPropagation()} onKeyDown={(event) => event.stopPropagation()} onKeyUp={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()} onPointerUp={(event) => event.stopPropagation()} />;
+	return <input {...selectionCheckboxAria.checkboxProps} class={props.class} style={props.style} tabindex={-1} aria-label={props["aria-label"] ?? selectionCheckboxAria.checkboxProps["aria-label"]} onClick={(event) => event.stopPropagation()} onKeyDown={(event) => event.stopPropagation()} onKeyUp={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()} onPointerUp={(event) => event.stopPropagation()} />;
 }
 /**
 * A checkbox for select-all functionality.
@@ -1187,9 +1248,17 @@ function TableSelectAllCheckbox(props = {}) {
 	if (!context) throw new Error("TableSelectAllCheckbox must be used within a Table");
 	const { state } = context;
 	const selectAllCheckboxAria = createTableSelectAllCheckbox(() => state);
-	let inputRef;
-	createEffect(() => {});
-	return <input ref={inputRef} {...selectAllCheckboxAria.checkboxProps} class={props.class} style={props.style} aria-label={props["aria-label"] ?? selectAllCheckboxAria.checkboxProps["aria-label"]} />;
+	const [inputEl, setInputEl] = createSignal(null);
+	const applyIndeterminate = (input) => {
+		if (input) input.indeterminate = selectAllCheckboxAria.isIndeterminate;
+	};
+	createRenderEffect(() => [selectAllCheckboxAria.checkboxProps.checked, inputEl()], ([, input]) => {
+		applyIndeterminate(input);
+	});
+	return <input ref={(el) => {
+		setInputEl(el);
+		applyIndeterminate(el);
+	}} {...selectAllCheckboxAria.checkboxProps} class={props.class} style={props.style} aria-label={props["aria-label"] ?? selectAllCheckboxAria.checkboxProps["aria-label"]} />;
 }
 Table.Header = TableHeader;
 Table.Column = TableColumn;
@@ -1212,8 +1281,15 @@ function ColumnResizer(props) {
 		"slot",
 		"children"
 	]);
+	const stringFormatter = createStringFormatter(racIntlStrings, "react-aria-components");
 	const registerColumn = useContext(ResizableTableRegisterContext);
-	if (registerColumn) registerColumn(local.column.key, { key: local.column.key });
+	const columnDef = useContext(TableColumnDefinitionContext);
+	if (registerColumn) registerColumn(local.column.key, {
+		key: local.column.key,
+		width: columnDef?.width,
+		minWidth: columnDef?.minWidth,
+		maxWidth: columnDef?.maxWidth
+	});
 	const resizeCtx = useContext(TableColumnResizeStateContext);
 	const hasResizeContext = !!resizeCtx;
 	const noopResizeState = {
@@ -1238,7 +1314,7 @@ function ColumnResizer(props) {
 	const [isFocused, setIsFocused] = createSignal(false);
 	const columnResize = createTableColumnResize(() => ({
 		column: local.column,
-		"aria-label": local["aria-label"] ?? "Resizer",
+		"aria-label": local["aria-label"] ?? stringFormatter().format("tableResizer"),
 		isDisabled: local.isDisabled,
 		onResizeStart: (widths) => {
 			resizeCtx?.getCallbacks?.().onResizeStart?.(widths);
@@ -1268,7 +1344,7 @@ function ColumnResizer(props) {
 		const { ref: _ref, ...rest } = hoverProps;
 		return rest;
 	};
-	return <div {...domProps} {...columnResize.resizerProps} {...cleanHoverProps()} class={renderProps.class()} style={renderProps.style()} data-hovered={isHovered() || void 0} data-resizing={columnResize.isResizing() || void 0}>
+	return <div {...domProps} {...columnResize.resizerProps} {...cleanHoverProps()} class={renderProps.class()} style={renderProps.style()} data-hovered={dataAttr(isHovered())} data-resizing={dataAttr(columnResize.isResizing())}>
       <Show when={hasResizeContext}>
         <input {...columnResize.inputProps} onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)} />
       </Show>
@@ -1288,7 +1364,8 @@ function ResizableTableContainer(props) {
 	]);
 	const [containerRef, setContainerRef] = createSignal(null);
 	const [tableWidth, setTableWidth] = createSignal(0);
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		const el = containerRef();
 		if (!el) return;
 		setTableWidth(el.clientWidth);
@@ -1297,10 +1374,13 @@ function ResizableTableContainer(props) {
 				for (const entry of entries) setTableWidth(entry.contentRect.width);
 			});
 			observer.observe(el);
-			onCleanup(() => observer.disconnect());
+			_s2Cleanups.push(() => observer.disconnect());
 		}
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
-	const [autoColumns, setAutoColumns] = createSignal(/* @__PURE__ */ new Map());
+	const [autoColumns, setAutoColumns] = createSignal(/* @__PURE__ */ new Map(), { ownedWrite: true });
 	const registerColumn = (key, def) => {
 		setAutoColumns((prev) => {
 			const next = new Map(prev);
@@ -1332,8 +1412,8 @@ function ResizableTableContainer(props) {
 			onResizeEnd: local.onResizeEnd
 		})
 	};
-	return <ResizableTableRegisterContext.Provider value={registerColumn}>
-      <TableColumnResizeStateContext.Provider value={contextValue}>
+	return <ResizableTableRegisterContext value={registerColumn}>
+      <TableColumnResizeStateContext value={contextValue}>
         <div ref={setContainerRef} {...domProps} class={local.class ?? "solidaria-ResizableTableContainer"} style={{
 		position: "relative",
 		overflow: "auto",
@@ -1341,8 +1421,8 @@ function ResizableTableContainer(props) {
 	}}>
           {local.children}
         </div>
-      </TableColumnResizeStateContext.Provider>
-    </ResizableTableRegisterContext.Provider>;
+      </TableColumnResizeStateContext>
+    </ResizableTableRegisterContext>;
 }
 /** Internal context for ColumnResizer to register itself with ResizableTableContainer */
 const ResizableTableRegisterContext = createContext(null);