@human-kit/svelte-components 1.0.0-alpha.15 → 1.0.0-alpha.17

package/dist/table/column-resizer/table-column-resizer.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import { getTableCellContext, useTableColumnContext, useTableContext } from '../root/context';
+	import {
+		DEFAULT_TABLE_COLUMN_MIN_WIDTH,
+		getTableCellContext,
+		useTableColumnContext,
+		useTableContext
+	} from '../root/context';
 	import type { TableColumnResizerProps } from '../types.js';
+	import { visuallyHiddenStyle } from '../utils/visually-hidden-style';
 	import {
 		shouldShowFocusVisible,
 		trackInteractionModality
@@ -59,7 +65,7 @@
 	});
 	const minWidth = $derived.by(() => {
 		void $widthVersion;
-		return table.getColumnMinWidth(column.id) ?? 75;
+		return table.getColumnMinWidth(column.id) ?? DEFAULT_TABLE_COLUMN_MIN_WIDTH;
 	});
 	const maxWidth = $derived.by(() => {
 		void $widthVersion;
@@ -267,16 +273,16 @@
 		suppressNextDoubleClickAutofit = false;
 
 		stopKeyboardResizeMode();
-		table.startColumnResize(column.id);
 
-		const th = element?.closest('th') as HTMLElement | null;
-		const tableEl = th?.closest('table') as HTMLTableElement | null;
-		const startX = event.clientX;
 		const startWidth = table.getColumnWidth(column.id) ?? getHeaderWidth();
 		const pointerId = event.pointerId;
 		const isRTL = isRightToLeft();
+		const pointerStartClientX = event.clientX;
 		let didDrag = false;
-		let latestClientX = startX;
+		let didStartResize = false;
+		let latestClientX = event.clientX;
+		let previousClientX = event.clientX;
+		let dragWidth = startWidth;
 		let animationFrameId: number | null = null;
 
 		// Capture the pointer so we receive move/up events even if the cursor
@@ -298,30 +304,27 @@
 			return clamped;
 		}
 
-		function applyTemporaryWidthToDOM(width: number) {
-			if (th) th.style.width = `${width}px`;
-			if (tableEl) {
-				const allThs = tableEl.querySelectorAll<HTMLElement>('thead th[style*="width"]');
-				let total = 0;
-				for (const cell of allThs) {
-					total += parseFloat(cell.style.width) || 0;
-				}
-				if (total > 0) {
-					tableEl.style.width = `${total}px`;
-					tableEl.style.minWidth = '0';
-				}
-			}
-		}
-
 		function flushPendingPointerMove() {
 			if (animationFrameId !== null) {
 				cancelAnimationFrame(animationFrameId);
 				animationFrameId = null;
 			}
 
-			const direction = isRTL ? -1 : 1;
-			const delta = (latestClientX - startX) * positionScale * direction;
-			const nextWidth = clampWidth(startWidth + delta);
+			if (!didStartResize && latestClientX === pointerStartClientX) {
+				return;
+			}
+
+			if (!didStartResize) {
+				table.startColumnResize(column.id);
+				didStartResize = true;
+				previousClientX = pointerStartClientX;
+			}
+
+			const pointerDelta = latestClientX - previousClientX;
+			previousClientX = latestClientX;
+			const widthDelta = isRTL ? -pointerDelta : pointerDelta;
+			dragWidth = clampWidth(dragWidth + widthDelta);
+			const nextWidth = dragWidth;
 			updateWidth(nextWidth);
 		}
 
@@ -333,30 +336,14 @@
 			});
 		}
 
-		// Measure position compensation factor.
-		// In centered/flex layouts, growing a column shifts the table's left edge,
-		// so the handle moves less than the mouse delta. We detect this by applying
-		// a 1px test change and measuring how much the <th> left edge drifts.
-		// NOTE: applyTemporaryWidthToDOM intentionally mutates the DOM synchronously
-		// outside Svelte's reactive cycle. The mutation is immediately reverted
-		// within the same microtask, so no observer or $effect will see it.
-		let positionScale = 1;
-		if (th) {
-			const leftBefore = th.getBoundingClientRect().left;
-			applyTemporaryWidthToDOM(startWidth + 1);
-			const leftAfter = th.getBoundingClientRect().left;
-			applyTemporaryWidthToDOM(startWidth);
-			const drift = leftBefore - leftAfter;
-			if (drift > 0.01 && drift < 0.99) {
-				positionScale = 1 / (1 - drift);
-			}
-		}
-
 		const handlePointerMove = (moveEvent: PointerEvent) => {
 			if (moveEvent.pointerId !== pointerId) return;
 			moveEvent.preventDefault();
-			didDrag = true;
 			latestClientX = moveEvent.clientX;
+			if (!didStartResize && latestClientX === pointerStartClientX) {
+				return;
+			}
+			didDrag = true;
 			schedulePointerMove();
 		};
 
@@ -385,7 +372,9 @@
 			}
 			// Treat system-initiated cancellation the same as Escape:
 			// restore the width the column had before the drag started.
-			updateWidth(startWidth);
+			if (didStartResize) {
+				updateWidth(startWidth);
+			}
 			cleanupPointerListeners();
 		};
 
@@ -398,7 +387,9 @@
 				cancelAnimationFrame(animationFrameId);
 				animationFrameId = null;
 			}
-			updateWidth(startWidth);
+			if (didStartResize) {
+				updateWidth(startWidth);
+			}
 			cleanupPointerListeners();
 		};
 
@@ -428,6 +419,7 @@
 	}
 
 	function handleClick(event: MouseEvent) {
+		if (!isResizable) return;
 		event.preventDefault();
 		event.stopPropagation();
 	}
@@ -554,18 +546,19 @@
 	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 	<div
 		bind:this={element}
-		role="separator"
+		role={isResizable ? 'separator' : undefined}
 		tabindex={isResizable ? 0 : undefined}
 		class={className}
-		aria-label={accessibleLabel}
-		aria-orientation="vertical"
-		aria-valuenow={currentWidth ?? undefined}
-		aria-valuemin={minWidth}
-		aria-valuemax={maxWidth}
-		aria-valuetext={accessibleValueText}
+		aria-label={isResizable ? accessibleLabel : undefined}
+		aria-orientation={isResizable ? 'vertical' : undefined}
+		aria-valuenow={isResizable ? (currentWidth ?? undefined) : undefined}
+		aria-valuemin={isResizable ? minWidth : undefined}
+		aria-valuemax={isResizable ? maxWidth : undefined}
+		aria-valuetext={isResizable ? accessibleValueText : undefined}
 		data-focused={isFocused ? 'true' : undefined}
 		data-focus-visible={isFocusVisible ? 'true' : undefined}
 		data-resizing={isResizing ? 'true' : undefined}
+		data-resizable={isResizable ? 'true' : undefined}
 		data-table-column-resizer="true"
 		data-resizable-direction="right"
 		style:position="absolute"
@@ -579,6 +572,7 @@
 		style:align-items="center"
 		style:justify-content="center"
 		style:user-select="none"
+		style:pointer-events={isResizable ? 'auto' : 'none'}
 		style:touch-action="none"
 		onpointerdown={handlePointerDown}
 		ondblclick={handleDoubleClick}
@@ -601,8 +595,7 @@
 			role="status"
 			aria-live="polite"
 			aria-atomic="true"
-			style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"
-			>{resizeAnnouncement}</span
+			style={visuallyHiddenStyle}>{resizeAnnouncement}</span
 		>
 	</div>
 {/if}

package/dist/table/root/README.md

@@ -23,16 +23,16 @@ Public prop type: `TableRootProps`
 | `defaultSelectedKeys`    | `Iterable<string \| number>`                                 | `undefined` | Initial selected row ids for uncontrolled usage. When `selectionMode` later becomes `none`, the internal selection is cleared.                       |
 | `sortDescriptor`         | `{ column: string; direction: 'ascending' \| 'descending' }` | `undefined` | Controlled sort state. Supports `bind:sortDescriptor`. Setting it back to `undefined` clears the sort.                                               |
 | `defaultSortDescriptor`  | `{ column: string; direction: 'ascending' \| 'descending' }` | `undefined` | Initial sort state for uncontrolled usage.                                                                                                           |
-| `columnWidths`           | `Map<string, number>`                                        | `undefined` | Controlled column width state in px. Supports `bind:columnWidths`.                                                                                   |
-| `defaultColumnWidths`    | `Iterable<[string, number]>`                                 | `undefined` | Initial uncontrolled column widths in px.                                                                                                            |
+| `columnWidths`           | `Map<string, TableColumnWidth>`                              | `undefined` | Controlled column width state. Supports px, `%`, and `fr` specs via `bind:columnWidths`.                                                             |
+| `defaultColumnWidths`    | `Iterable<[string, TableColumnWidth]>`                       | `undefined` | Initial uncontrolled column widths using px, `%`, or `fr` specs.                                                                                     |
 | `disabledKeys`           | `Iterable<string \| number>`                                 | `undefined` | Row ids that should be non-selectable.                                                                                                               |
 | `onRowAction`            | `(id: string \| number) => void`                             | `undefined` | Called when a row action is triggered for an actionable row.                                                                                         |
 | `onSelectionChange`      | `(keys: Set<string \| number>) => void`                      | `undefined` | Called when row selection changes.                                                                                                                   |
 | `onSortChange`           | `(descriptor) => void`                                       | `undefined` | Called when sortable header state changes.                                                                                                           |
-| `onColumnWidthsChange`   | `(widths: Map<string, number>) => void`                      | `undefined` | Called when resize interactions update column widths.                                                                                                |
+| `onColumnWidthsChange`   | `(widths: Map<string, TableColumnWidth>) => void`            | `undefined` | Called when resize interactions update managed column widths.                                                                                        |
 | `onHiddenColumnsChange`  | `(columnIds: string[]) => void`                              | `undefined` | Called when hidden column state changes.                                                                                                             |
 | `onColumnResizeStart`    | `(columnId: string) => void`                                 | `undefined` | Called when a column resize drag starts.                                                                                                             |
-| `onColumnResizeEnd`      | `(widths: Map<string, number>) => void`                      | `undefined` | Called when a column resize drag ends.                                                                                                               |
+| `onColumnResizeEnd`      | `(widths: Map<string, TableColumnWidth>) => void`            | `undefined` | Called when a column resize drag ends.                                                                                                               |
 | `aria-label`             | `string`                                                     | `undefined` | Accessible name when no external label is present.                                                                                                   |
 | `aria-labelledby`        | `string`                                                     | `undefined` | Id reference for an external label.                                                                                                                  |
 | `class`                  | `string`                                                     | `''`        | Class names for the root table element.                                                                                                              |
@@ -45,14 +45,14 @@ Public prop type: `TableRootProps`
 Name: Selection and sorting notes
 Description: Current v1 interaction constraints that affect consumer expectations.
 
-| Topic                   | Behavior                                                                                                                                                                                                                                                                                                                                                          |
-| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `selectionMode="none"`  | Clears existing row selection internally and prevents further row selection until another mode is set.                                                                                                                                                                                                                                                            |
-| Text selection and copy | Browser-native text selection and `Ctrl+C` behavior are preserved; the component does not implement custom clipboard logic.                                                                                                                                                                                                                                       |
-| `replace` mode blur     | Clicking or tabbing outside the table clears focus state but does not clear row selection.                                                                                                                                                                                                                                                                        |
-| Sort announcements      | Sort changes are mirrored into a polite live region. Use `Table.Column.textValue` when the announced label should differ from the column `id`.                                                                                                                                                                                                                    |
-| Column resizing         | Width state is normalized to px values and a `Table.ColumnResizer` only affects the `Table.Column` it is composed within.                                                                                                                                                                                                                                         |
-| Row edge focus          | In body rows, `ArrowLeft` before the first cell and `ArrowRight` after the last cell move focus onto the row itself; `ArrowUp` / `ArrowDown` keep that row-edge focus aligned across rows, repeating the same horizontal arrow loops back into the opposite edge cell, and `Home` / `End` jump to the first or last focusable body row while row focus is active. |
+| Topic                   | Behavior                                                                                                                                                                                                                                                                                                                                                                                       |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `selectionMode="none"`  | Clears existing row selection internally and prevents further row selection until another mode is set.                                                                                                                                                                                                                                                                                         |
+| Text selection and copy | Browser-native text selection and `Ctrl+C` behavior are preserved; the component does not implement custom clipboard logic.                                                                                                                                                                                                                                                                    |
+| `replace` mode blur     | Clicking or tabbing outside the table clears focus state but does not clear row selection.                                                                                                                                                                                                                                                                                                     |
+| Sort announcements      | Sort changes are mirrored into a polite live region. Use `Table.Column.textValue` when the announced label should differ from the column `id`.                                                                                                                                                                                                                                                 |
+| Column resizing         | Width state accepts px, `%`, and `fr` specs. Before interaction, unspecified columns behave like implicit flexible space. On the first real resize, visible columns are converted to px; the trailing column absorbs the delta until its minimum width, and additional growth overflows the table horizontally. A `Table.ColumnResizer` only affects the `Table.Column` it is composed within. |
+| Row edge focus          | In body rows, `ArrowLeft` before the first cell and `ArrowRight` after the last cell move focus onto the row itself; `ArrowUp` / `ArrowDown` keep that row-edge focus aligned across rows, repeating the same horizontal arrow loops back into the opposite edge cell, and `Home` / `End` jump to the first or last focusable body row while row focus is active.                              |
 
 ### Context utilities
 

package/dist/table/root/context.d.ts

@@ -17,7 +17,8 @@ export type TableSortDescriptor = {
     column: string;
     direction: TableSortDirection;
 };
-export type TableColumnWidth = number | `${number}px`;
+export type TableColumnWidth = number | `${number}px` | `${number}%` | `${number}fr`;
+export declare const DEFAULT_TABLE_COLUMN_MIN_WIDTH = 60;
 export type TableGridCoord = {
     row: number;
     col: number;
@@ -58,16 +59,16 @@ export type CreateTableContextOptions = {
     disallowEmptySelection?: boolean;
     initialSelectedKeys?: Iterable<TableSelectionKey>;
     initialSortDescriptor?: TableSortDescriptor;
-    initialColumnWidths?: Iterable<readonly [string, number]>;
+    initialColumnWidths?: Iterable<readonly [string, TableColumnWidth]>;
     initialHiddenColumns?: Iterable<string>;
     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;
 };
 export type TableContext = {
     layoutVersion: Readable<number>;
@@ -98,13 +99,17 @@ export type TableContext = {
     getVisibleColumnIndexByToken: (token: string) => number;
     getColumnTextValue: (columnId: string) => string | undefined;
     getColumnWidth: (columnId: string) => number | undefined;
+    getColumnWidthStyle: (columnId: string) => string | undefined;
+    hasAuthoredColumnWidthSpec: (columnId: string) => boolean;
     getColumnMinWidth: (columnId: string) => number | undefined;
     getColumnMaxWidth: (columnId: string) => number | undefined;
     isColumnHidden: (columnId: string) => boolean;
     isColumnResizable: (columnId: string) => boolean;
-    getColumnWidths: () => Map<string, number>;
-    getVisibleColumnWidths: () => Map<string, number>;
-    setColumnWidths: (widths?: Iterable<readonly [string, number]>) => void;
+    getColumnWidths: () => Map<string, TableColumnWidth>;
+    getVisibleColumnWidths: () => Map<string, TableColumnWidth>;
+    getResolvedVisibleColumnWidths: () => Map<string, number>;
+    hasRelativeVisibleColumnWidths: () => boolean;
+    setColumnWidths: (widths?: Iterable<readonly [string, TableColumnWidth]>) => void;
     setColumnWidth: (columnId: string, width: number) => void;
     setHiddenColumns: (columnIds?: Iterable<string>) => void;
     measureColumnContentWidth: (columnId: string) => number | undefined;
@@ -115,6 +120,7 @@ export type TableContext = {
     hasResizableColumns: () => boolean;
     registerRow: (row: TableRowRegistration) => void;
     unregisterRow: (token: string) => void;
+    markBodyRowsInitialized: () => void;
     getHeaderRowCount: () => number;
     getBodyRowCount: () => number;
     isRowSelected: (id: TableSelectionKey | undefined) => boolean;