@human-kit/svelte-components 1.0.0-alpha.16 → 1.0.0-alpha.18

package/dist/table/root/table-root.svelte

@@ -21,6 +21,7 @@
 	import {
 		createTableContext,
 		setTableContext,
+		type TableColumnWidth,
 		type TableSelectionKey,
 		type TableSortDescriptor
 	} from './context';
@@ -60,7 +61,7 @@
 	let focusVisible = $state(false);
 	let pendingControlledHiddenColumns = $state<string[] | null>(null);
 	let pendingControlledSelection = $state<Set<TableSelectionKey> | null>(null);
-	let pendingControlledColumnWidths = $state<Map<string, number> | null>(null);
+	let pendingControlledColumnWidths = $state<Map<string, TableColumnWidth> | null>(null);
 	let sortAnnouncement = $state('');
 	let hasObservedSortState = $state(false);
 	let hasInitializedSortSync = $state(false);
@@ -137,7 +138,10 @@
 		return true;
 	}
 
-	function hasSameColumnWidths(left: Map<string, number>, right: Map<string, number>) {
+	function hasSameColumnWidths(
+		left: Map<string, TableColumnWidth>,
+		right: Map<string, TableColumnWidth>
+	) {
 		if (left.size !== right.size) return false;
 		for (const [key, value] of left) {
 			if (right.get(key) !== value) return false;
@@ -164,7 +168,52 @@
 		return ctx.hasResizableColumns();
 	});
 
+	const hasDefinedColumnWidths = $derived.by(() => {
+		void $layoutVersion;
+		for (let index = 0; index < ctx.getColumnCount(); index += 1) {
+			const column = ctx.getColumnAt(index);
+			if (!column || ctx.isColumnHidden(column.id)) continue;
+			if (column.width !== undefined || column.defaultWidth !== undefined) {
+				return true;
+			}
+		}
+		return false;
+	});
+
+	const layoutColumns = $derived.by(() => {
+		void $layoutVersion;
+		void $widthVersion;
+
+		const columns: Array<{
+			id: string;
+			width: number | undefined;
+			widthStyle: string | undefined;
+			implicitWidth: boolean;
+			minWidth: number | undefined;
+			maxWidth: number | undefined;
+		}> = [];
+
+		for (let index = 0; index < ctx.getColumnCount(); index += 1) {
+			const column = ctx.getColumnAt(index);
+			if (!column || ctx.isColumnHidden(column.id)) continue;
+
+			columns.push({
+				id: column.id,
+				width: ctx.getColumnWidth(column.id),
+				widthStyle: ctx.getColumnWidthStyle(column.id),
+				implicitWidth: !ctx.hasAuthoredColumnWidthSpec(column.id),
+				minWidth: ctx.getColumnMinWidth(column.id),
+				maxWidth: ctx.getColumnMaxWidth(column.id)
+			});
+		}
+
+		return columns;
+	});
+
 	const explicitManagedTableWidth = $derived.by(() => {
+		void $layoutVersion;
+		if (ctx.hasRelativeVisibleColumnWidths()) return undefined;
+
 		const widths = columnWidths ?? defaultColumnWidths;
 		if (!widths) return undefined;
 
@@ -172,8 +221,10 @@
 		let hasAnyWidth = false;
 		for (const [columnId, width] of widths) {
 			if (ctx.isColumnHidden(columnId)) continue;
-			if (!Number.isFinite(width)) continue;
-			total += width;
+			if (typeof width === 'string' && !width.trim().endsWith('px')) return undefined;
+			const numericWidth = typeof width === 'number' ? width : Number.parseFloat(width);
+			if (!Number.isFinite(numericWidth)) return undefined;
+			total += numericWidth;
 			hasAnyWidth = true;
 		}
 
@@ -183,16 +234,37 @@
 	const managedTableWidth = $derived.by(() => {
 		void $widthVersion;
 		void $layoutVersion;
-		if (!hasResizable) return undefined;
-		const widths = ctx.getVisibleColumnWidths();
+		const widths = ctx.getResolvedVisibleColumnWidths();
+		const columnCount = ctx.getVisibleColumnCount();
+		if (widths.size === 0 || widths.size < columnCount) return undefined;
+		if (ctx.hasRelativeVisibleColumnWidths()) return undefined;
+		let total = 0;
+		for (const w of widths.values()) total += w;
+		return total;
+	});
+
+	const relativeResolvedTableWidth = $derived.by(() => {
+		void $widthVersion;
+		void $layoutVersion;
+		if (!ctx.hasRelativeVisibleColumnWidths()) return undefined;
+
+		const widths = ctx.getResolvedVisibleColumnWidths();
 		const columnCount = ctx.getVisibleColumnCount();
 		if (widths.size === 0 || widths.size < columnCount) return undefined;
+
 		let total = 0;
 		for (const w of widths.values()) total += w;
 		return total;
 	});
 
-	const resolvedTableWidth = $derived(managedTableWidth ?? explicitManagedTableWidth);
+	const fallbackRelativeTableWidth = $derived.by(() => {
+		void $layoutVersion;
+		return ctx.hasRelativeVisibleColumnWidths() ? '100%' : undefined;
+	});
+
+	const resolvedTableWidth = $derived(
+		managedTableWidth ?? explicitManagedTableWidth ?? relativeResolvedTableWidth
+	);
 
 	context = ctx;
 
@@ -223,6 +295,33 @@
 		element = tableElement;
 	});
 
+	$effect(() => {
+		if (!tableElement) return;
+
+		const resizeTarget = tableElement.parentElement ?? tableElement;
+		const refreshMeasuredLayout = () => {
+			ctx.refreshMeasuredLayout();
+		};
+
+		window.addEventListener('resize', refreshMeasuredLayout);
+		window.visualViewport?.addEventListener('resize', refreshMeasuredLayout);
+
+		const resizeObserver =
+			typeof ResizeObserver !== 'undefined'
+				? new ResizeObserver(() => {
+						refreshMeasuredLayout();
+					})
+				: null;
+
+		resizeObserver?.observe(resizeTarget);
+
+		return () => {
+			window.removeEventListener('resize', refreshMeasuredLayout);
+			window.visualViewport?.removeEventListener('resize', refreshMeasuredLayout);
+			resizeObserver?.disconnect();
+		};
+	});
+
 	$effect(() => {
 		ctx.setSelectionMode(selectionMode);
 	});
@@ -369,8 +468,13 @@
 	bind:this={tableElement}
 	role="grid"
 	class={className}
-	style:table-layout={hasResizable || resolvedTableWidth !== undefined ? 'fixed' : undefined}
-	style:width={resolvedTableWidth !== undefined ? `${resolvedTableWidth}px` : undefined}
+	style:--table-visible-column-count={ariaColCount ? `${ariaColCount}` : undefined}
+	style:table-layout={hasResizable || hasDefinedColumnWidths || resolvedTableWidth !== undefined
+		? 'fixed'
+		: undefined}
+	style:width={resolvedTableWidth !== undefined
+		? `${resolvedTableWidth}px`
+		: fallbackRelativeTableWidth}
 	style:min-width={resolvedTableWidth !== undefined ? '0' : undefined}
 	aria-label={ariaLabel}
 	aria-labelledby={ariaLabelledby}
@@ -388,6 +492,19 @@
 	onkeydown={handleKeyDown}
 	{...restProps}
 >
+	{#if layoutColumns.length > 0}
+		<colgroup>
+			{#each layoutColumns as column (column.id)}
+				<col
+					data-table-implicit-width={column.implicitWidth ? 'true' : undefined}
+					style:width={column.widthStyle}
+					style:min-width={column.minWidth !== undefined ? `${column.minWidth}px` : undefined}
+					style:max-width={column.maxWidth !== undefined ? `${column.maxWidth}px` : undefined}
+				/>
+			{/each}
+		</colgroup>
+	{/if}
+
 	{#if children}
 		{@render children()}
 	{/if}
@@ -400,3 +517,17 @@
 <span id={ctx.selectionUnavailableDescriptionId} style={visuallyHiddenStyle}
 	>Selection unavailable for this row.</span
 >
+
+<style>
+	:global(table[role='grid']:has([data-table-column-resizer='true'])) {
+		table-layout: fixed;
+		width: 100%;
+		min-width: 0;
+	}
+
+	:global(
+		table[role='grid']:has([data-table-column-resizer='true']) col[data-table-implicit-width='true']
+	) {
+		width: calc(100% / var(--table-visible-column-count, 1));
+	}
+</style>

package/dist/table/row/table-row.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { SvelteMap } from 'svelte/reactivity';
 	import { writable } from 'svelte/store';
 	import { setTableRowContext, useTableContext, useTableSectionContext } from '../root/context';
 	import type { TableRowProps } from '../types.js';
@@ -22,14 +21,12 @@
 	const section = useTableSectionContext();
 	const rowToken = table.createInstanceToken('row');
 	const cellOrder: string[] = [];
-	const cellElements = new SvelteMap<string, () => HTMLElement | undefined>();
+	const cellElements: Record<string, () => HTMLElement | undefined> = {};
 	const cellOrderVersion = writable(0);
 
 	let rowElement = $state<HTMLTableRowElement | undefined>(undefined);
-	let childListObserver: MutationObserver | null = null;
 
 	function notifyCellOrderChange() {
-		cellIndexCache = null;
 		cellOrderVersion.update((value) => value + 1);
 	}
 
@@ -39,12 +36,12 @@
 			notifyCellOrderChange();
 		}
 		if (getElement) {
-			cellElements.set(token, getElement);
+			cellElements[token] = getElement;
 		}
 	}
 
 	function unregisterCellToken(token: string) {
-		cellElements.delete(token);
+		delete cellElements[token];
 		const index = cellOrder.indexOf(token);
 		if (index >= 0) {
 			cellOrder.splice(index, 1);
@@ -52,40 +49,12 @@
 		}
 	}
 
-	let cellIndexCache: Map<string, number> | null = null;
-
-	function buildCellIndexCache(): Map<string, number> {
-		if (cellIndexCache) return cellIndexCache;
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- plain cache, not reactive state
-		const cache = new Map<string, number>();
-		if (rowElement) {
-			const directCells = rowElement.children;
-			// eslint-disable-next-line svelte/prefer-svelte-reactivity -- plain cache, not reactive state
-			const elementToIndex = new Map<HTMLElement, number>();
-			for (let i = 0; i < directCells.length; i += 1) {
-				const child = directCells[i];
-				if (child instanceof HTMLElement) {
-					elementToIndex.set(child, i);
-				}
-			}
-			for (const registeredToken of cellOrder) {
-				const element = cellElements.get(registeredToken)?.();
-				if (element) {
-					const idx = elementToIndex.get(element);
-					if (idx !== undefined) {
-						cache.set(registeredToken, idx);
-					}
-				}
-			}
-		}
-		cellIndexCache = cache;
-		return cache;
-	}
-
 	function getCellIndex(token: string) {
-		const cache = buildCellIndexCache();
-		const cached = cache.get(token);
-		if (cached !== undefined) return cached;
+		const element = cellElements[token]?.();
+		if (rowElement && element) {
+			const index = Array.from(rowElement.children).indexOf(element);
+			if (index >= 0) return index;
+		}
 		return cellOrder.indexOf(token);
 	}
 
@@ -120,23 +89,7 @@
 		syncRowRegistration();
 	});
 
-	let pendingCellOrderNotify = false;
-
-	function scheduleCellOrderNotify() {
-		if (!pendingCellOrderNotify) {
-			pendingCellOrderNotify = true;
-			queueMicrotask(() => {
-				pendingCellOrderNotify = false;
-				cellIndexCache = null;
-				notifyCellOrderChange();
-			});
-		}
-	}
-
 	$effect(() => {
-		childListObserver?.disconnect();
-		childListObserver = null;
-
 		if (!rowElement) {
 			return;
 		}
@@ -145,18 +98,25 @@
 			scheduleCellOrderNotify();
 		});
 		observer.observe(rowElement, { childList: true });
-		childListObserver = observer;
 
 		return () => {
 			observer.disconnect();
-			if (childListObserver === observer) {
-				childListObserver = null;
-			}
 		};
 	});
 
+	let pendingCellOrderNotify = false;
+
+	function scheduleCellOrderNotify() {
+		if (!pendingCellOrderNotify) {
+			pendingCellOrderNotify = true;
+			queueMicrotask(() => {
+				pendingCellOrderNotify = false;
+				notifyCellOrderChange();
+			});
+		}
+	}
+
 	onDestroy(() => {
-		childListObserver?.disconnect();
 		table.unregisterRow(rowToken);
 	});
 

package/dist/table/types.d.ts

@@ -35,16 +35,16 @@ export type TableRootProps = Omit<HTMLAttributes<HTMLTableElement>, 'children'>
     defaultSelectedKeys?: Iterable<TableSelectionKey>;
     sortDescriptor?: TableSortDescriptor;
     defaultSortDescriptor?: TableSortDescriptor;
-    columnWidths?: Map<string, number>;
-    defaultColumnWidths?: Iterable<readonly [string, number]>;
+    columnWidths?: Map<string, TableColumnWidth>;
+    defaultColumnWidths?: Iterable<readonly [string, TableColumnWidth]>;
     disabledKeys?: Iterable<TableSelectionKey>;
     onRowAction?: TableRowActionHandler;
     onSelectionChange?: (keys: Set<TableSelectionKey>) => void;
     onSortChange?: (descriptor: TableSortDescriptor | undefined) => void;
-    onColumnWidthsChange?: (widths: Map<string, number>) => void;
+    onColumnWidthsChange?: (widths: Map<string, TableColumnWidth>) => void;
     onHiddenColumnsChange?: (columnIds: string[]) => void;
     onColumnResizeStart?: (columnId: string) => void;
-    onColumnResizeEnd?: (widths: Map<string, number>) => void;
+    onColumnResizeEnd?: (widths: Map<string, TableColumnWidth>) => void;
     children?: Snippet;
     class?: string;
     context?: TableContext;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@human-kit/svelte-components",
-	"version": "1.0.0-alpha.16",
+	"version": "1.0.0-alpha.18",
 	"license": "MIT",
 	"type": "module",
 	"svelte": "./dist/index.js",