@human-kit/svelte-components 1.0.0-alpha.13 → 1.0.0-alpha.14

package/dist/table/root/context.js

@@ -8,6 +8,9 @@ const TABLE_CELL_KEY = Symbol('table-cell');
 export function createTableContext(options = {}) {
     let selectionMode = options.selectionMode ?? 'none';
     let selectionBehavior = options.selectionBehavior ?? 'toggle';
+    let disabledBehavior = options.disabledBehavior ?? 'all';
+    let disallowEmptySelection = options.disallowEmptySelection ?? false;
+    let onRowAction = options.onRowAction;
     let sortDescriptor = options.initialSortDescriptor;
     let focusedCellKey = null;
     let focusedRowTarget = null;
@@ -35,6 +38,7 @@ export function createTableContext(options = {}) {
     let orderedColumnTokensCache = null;
     let visibleOrderedColumnTokensCache = null;
     let columnWidthsCache = null;
+    let visibleColumnWidthsCache = null;
     let navigableCellsCache = null;
     let rowsWithCellsCache = null;
     const layoutVersion = writable(0);
@@ -44,6 +48,7 @@ export function createTableContext(options = {}) {
     const widthVersion = writable(0);
     const resizeVersion = writable(0);
     const instanceCounters = new Map();
+    const selectionUnavailableDescriptionId = createInstanceToken('selection-unavailable');
     function createInstanceToken(prefix) {
         const nextCount = (instanceCounters.get(prefix) ?? 0) + 1;
         instanceCounters.set(prefix, nextCount);
@@ -54,6 +59,7 @@ export function createTableContext(options = {}) {
         orderedColumnTokensCache = null;
         visibleOrderedColumnTokensCache = null;
         columnWidthsCache = null;
+        visibleColumnWidthsCache = null;
         navigableCellsCache = null;
         rowsWithCellsCache = null;
     }
@@ -81,6 +87,7 @@ export function createTableContext(options = {}) {
     }
     function notifyWidth() {
         columnWidthsCache = null;
+        visibleColumnWidthsCache = null;
         if (!widthNotifyScheduled) {
             widthNotifyScheduled = true;
             queueMicrotask(() => {
@@ -300,12 +307,15 @@ export function createTableContext(options = {}) {
         return widths;
     }
     function getVisibleColumnWidths() {
+        if (visibleColumnWidthsCache)
+            return visibleColumnWidthsCache;
         const widths = new Map();
         for (const [columnId, width] of getColumnWidths()) {
             if (isColumnHidden(columnId))
                 continue;
             widths.set(columnId, width);
         }
+        visibleColumnWidthsCache = widths;
         return widths;
     }
     function getMeasuredHeaderWidth(columnToken) {
@@ -444,6 +454,33 @@ export function createTableContext(options = {}) {
         focusedRowTarget = null;
         notifyFocus();
     }
+    function reconcileFocusAfterDisabledStateChange() {
+        if (focusedCellKey) {
+            const focusedCell = cells.get(focusedCellKey);
+            if (focusedCell &&
+                focusedCell.section === 'body' &&
+                isRowDisabled(rows.get(focusedCell.rowToken)?.id, rows.get(focusedCell.rowToken)?.disabled)) {
+                moveFocus('down');
+                const nextFocusedCell = cells.get(focusedCellKey ?? '');
+                if (nextFocusedCell?.section === 'body' &&
+                    isRowDisabled(rows.get(nextFocusedCell.rowToken)?.id, rows.get(nextFocusedCell.rowToken)?.disabled)) {
+                    moveFocus('up');
+                }
+            }
+        }
+        if (focusedRowTarget) {
+            const focusedRow = rows.get(focusedRowTarget.rowToken);
+            if (focusedRow && isRowDisabled(focusedRow.id, focusedRow.disabled)) {
+                const nextToken = getFocusableBodyRowToken('start');
+                if (nextToken) {
+                    setFocusedRow(nextToken, focusedRowTarget.edge);
+                }
+                else {
+                    setFocusedRow(null);
+                }
+            }
+        }
+    }
     function setHiddenColumns(columnIds) {
         const next = new Set(columnIds ?? []);
         let changed = next.size !== hiddenColumnIds.size;
@@ -635,19 +672,28 @@ export function createTableContext(options = {}) {
             const row = rows.get(token);
             if (!row?.id)
                 continue;
-            if (disabledKeys.has(row.id) || row.disabled)
+            if (isRowSelectionDisabled(row.id, row.disabled))
                 continue;
             rowIds.push(row.id);
         }
         return rowIds;
     }
-    function isRowDisabled(id, localDisabled = false) {
+    function isRowSelectionDisabled(id, localDisabled = false) {
         if (localDisabled)
             return true;
         if (id === undefined)
             return false;
         return disabledKeys.has(id);
     }
+    function isRowDisabled(id, localDisabled = false) {
+        return disabledBehavior === 'all' && isRowSelectionDisabled(id, localDisabled);
+    }
+    function isRowActionDisabled(id, localDisabled = false) {
+        return disabledBehavior === 'all' && isRowSelectionDisabled(id, localDisabled);
+    }
+    function isRowActionable(id, localDisabled = false) {
+        return Boolean(onRowAction) && id !== undefined && !isRowActionDisabled(id, localDisabled);
+    }
     function isRowSelected(id) {
         if (id === undefined)
             return false;
@@ -919,12 +965,25 @@ export function createTableContext(options = {}) {
         return true;
     }
     function setSelectedKeys(next, anchor) {
+        const previousSelectedKeys = new Set(selectedKeys);
         selectedKeys =
             selectionMode === 'none'
                 ? new Set()
                 : selectionMode === 'single' && next.size > 1
                     ? new Set([next.values().next().value])
                     : next;
+        if (selectionMode !== 'none' && disallowEmptySelection && selectedKeys.size === 0) {
+            const fallbackKey = (anchor !== undefined && anchor !== null && !isRowSelectionDisabled(anchor)
+                ? anchor
+                : previousSelectedKeys.values().next().value) ??
+                getFocusedRowId() ??
+                getOrderedSelectableRowIds()[0];
+            if (fallbackKey !== undefined &&
+                fallbackKey !== null &&
+                !isRowSelectionDisabled(fallbackKey)) {
+                selectedKeys = new Set([fallbackKey]);
+            }
+        }
         const fallbackAnchor = selectedKeys.values().next().value ?? null;
         if (anchor === undefined) {
             selectionAnchorKey = fallbackAnchor;
@@ -933,18 +992,35 @@ export function createTableContext(options = {}) {
         selectionAnchorKey = anchor === null || selectedKeys.has(anchor) ? anchor : fallbackAnchor;
     }
     function replaceSelectionWithRow(id) {
-        if (id === undefined || disabledKeys.has(id))
+        if (id === undefined || isRowSelectionDisabled(id))
+            return;
+        const next = new Set([id]);
+        if (hasSameSelection(selectedKeys, next)) {
+            setSelectedKeys(next, id);
+            notifySelection();
             return;
-        setSelectedKeys(new Set([id]), id);
+        }
+        setSelectedKeys(next, id);
         emitSelectionChange();
     }
+    function applySelectionChange(next, anchor) {
+        const previousSelection = new Set(selectedKeys);
+        const previousAnchor = selectionAnchorKey;
+        setSelectedKeys(next, anchor);
+        if (!hasSameSelection(previousSelection, selectedKeys)) {
+            emitSelectionChange();
+            return;
+        }
+        if (!hasSameSelection(next, selectedKeys) || previousAnchor !== selectionAnchorKey) {
+            notifySelection();
+        }
+    }
     function toggleSelectionForRow(id) {
-        if (id === undefined || disabledKeys.has(id))
+        if (id === undefined || isRowSelectionDisabled(id))
             return;
         if (selectionMode === 'single') {
             const wasSelected = selectedKeys.has(id);
-            setSelectedKeys(selectionBehavior === 'toggle' && wasSelected ? new Set() : new Set([id]), selectionBehavior === 'toggle' && wasSelected ? null : id);
-            emitSelectionChange();
+            applySelectionChange(selectionBehavior === 'toggle' && wasSelected ? new Set() : new Set([id]), selectionBehavior === 'toggle' && wasSelected ? null : id);
             return;
         }
         const next = new Set(selectedKeys);
@@ -954,11 +1030,10 @@ export function createTableContext(options = {}) {
         else {
             next.add(id);
         }
-        setSelectedKeys(next, id);
-        emitSelectionChange();
+        applySelectionChange(next, id);
     }
     function extendSelectionToRow(id, anchorOverride) {
-        if (id === undefined || disabledKeys.has(id))
+        if (id === undefined || isRowSelectionDisabled(id))
             return;
         if (selectionMode !== 'multiple') {
             replaceSelectionWithRow(id);
@@ -979,11 +1054,18 @@ export function createTableContext(options = {}) {
         }
         const start = Math.min(anchorIndex, targetIndex);
         const end = Math.max(anchorIndex, targetIndex);
-        setSelectedKeys(new Set(orderedIds.slice(start, end + 1)), anchor);
-        emitSelectionChange();
+        applySelectionChange(new Set(orderedIds.slice(start, end + 1)), anchor);
     }
-    function pressRow(id, interaction = {}) {
-        if (selectionMode === 'none' || id === undefined || disabledKeys.has(id))
+    function performRowAction(id) {
+        if (!onRowAction || id === undefined || isRowActionDisabled(id))
+            return;
+        onRowAction(id);
+    }
+    function hasActiveSelection() {
+        return selectedKeys.size > 0;
+    }
+    function pressRowSelection(id, interaction = {}) {
+        if (selectionMode === 'none' || id === undefined || isRowSelectionDisabled(id))
             return;
         if (selectionBehavior === 'replace' && selectionMode === 'multiple') {
             if (interaction.shiftKey) {
@@ -999,6 +1081,55 @@ export function createTableContext(options = {}) {
         }
         toggleSelectionForRow(id);
     }
+    function pressRow(id, source, interaction = {}, localDisabled = false) {
+        if (id === undefined)
+            return;
+        if (isRowDisabled(id, localDisabled))
+            return;
+        if (source === 'keyboard-enter') {
+            if (onRowAction) {
+                performRowAction(id);
+                return;
+            }
+            pressRowSelection(id, interaction);
+            return;
+        }
+        if (source === 'keyboard-space') {
+            if (interaction.shiftKey) {
+                extendSelectionToRow(id);
+                return;
+            }
+            if (interaction.ctrlKey || interaction.metaKey) {
+                toggleSelectionForRow(id);
+                return;
+            }
+            toggleRowSelection(id);
+            return;
+        }
+        if (source === 'pointer-double') {
+            if (onRowAction && selectionMode !== 'none' && selectionBehavior === 'replace') {
+                performRowAction(id);
+            }
+            return;
+        }
+        if (!onRowAction) {
+            pressRowSelection(id, interaction);
+            return;
+        }
+        if (selectionMode === 'none') {
+            performRowAction(id);
+            return;
+        }
+        if (selectionBehavior === 'replace') {
+            pressRowSelection(id, interaction);
+            return;
+        }
+        if (hasActiveSelection()) {
+            pressRowSelection(id, interaction);
+            return;
+        }
+        performRowAction(id);
+    }
     function moveFocus(direction, interaction = {}) {
         const rowMap = getRowsWithCells();
         const currentCoord = getFocusedCoord();
@@ -1166,12 +1297,11 @@ export function createTableContext(options = {}) {
         notifySelection();
     }
     function toggleRowSelection(id) {
-        if (selectionMode === 'none' || id === undefined || disabledKeys.has(id))
+        if (selectionMode === 'none' || id === undefined || isRowSelectionDisabled(id))
             return;
         if (selectionMode === 'single') {
             const wasSelected = selectedKeys.has(id);
-            setSelectedKeys(wasSelected ? new Set() : new Set([id]), wasSelected ? null : id);
-            emitSelectionChange();
+            applySelectionChange(wasSelected ? new Set() : new Set([id]), wasSelected ? null : id);
             return;
         }
         const next = new Set(selectedKeys);
@@ -1181,8 +1311,7 @@ export function createTableContext(options = {}) {
         else {
             next.add(id);
         }
-        setSelectedKeys(next, id);
-        emitSelectionChange();
+        applySelectionChange(next, id);
     }
     function selectAllRows() {
         if (selectionMode !== 'multiple')
@@ -1190,7 +1319,7 @@ export function createTableContext(options = {}) {
         const next = new Set();
         for (const token of getOrderedRowTokens('body')) {
             const row = rows.get(token);
-            if (!row?.id || disabledKeys.has(row.id) || row.disabled)
+            if (!row?.id || isRowSelectionDisabled(row.id, row.disabled))
                 continue;
             next.add(row.id);
         }
@@ -1200,14 +1329,21 @@ export function createTableContext(options = {}) {
     function deselectAllRows() {
         if (selectedKeys.size === 0)
             return;
-        setSelectedKeys(new Set(), null);
-        emitSelectionChange();
+        applySelectionChange(new Set(), null);
     }
     function setSelection(keys) {
+        const previousSelection = new Set(selectedKeys);
+        const previousAnchor = selectionAnchorKey;
         const next = new Set(keys);
         const preservedAnchor = selectionAnchorKey !== null && next.has(selectionAnchorKey) ? selectionAnchorKey : undefined;
         setSelectedKeys(next, preservedAnchor);
-        notifySelection();
+        if (!hasSameSelection(previousSelection, selectedKeys)) {
+            emitSelectionChange();
+            return;
+        }
+        if (previousAnchor !== selectionAnchorKey) {
+            notifySelection();
+        }
     }
     function setSelectionMode(mode) {
         const previousSelectedKeys = new Set(selectedKeys);
@@ -1225,6 +1361,23 @@ export function createTableContext(options = {}) {
         selectionBehavior = behavior;
         notifySelection();
     }
+    function setDisabledBehavior(behavior) {
+        disabledBehavior = behavior;
+        invalidateLayoutCaches();
+        reconcileFocusAfterDisabledStateChange();
+        notifyLayout();
+        notifySelection();
+    }
+    function setDisallowEmptySelection(disallow) {
+        disallowEmptySelection = disallow;
+        const previousSelection = new Set(selectedKeys);
+        setSelectedKeys(new Set(selectedKeys), selectionAnchorKey);
+        if (!hasSameSelection(previousSelection, selectedKeys)) {
+            emitSelectionChange();
+            return;
+        }
+        notifySelection();
+    }
     function setDisabledKeys(keys) {
         disabledKeys.clear();
         if (keys) {
@@ -1232,6 +1385,13 @@ export function createTableContext(options = {}) {
                 disabledKeys.add(key);
             }
         }
+        invalidateLayoutCaches();
+        reconcileFocusAfterDisabledStateChange();
+        notifyLayout();
+        notifySelection();
+    }
+    function setRowActionHandler(handler) {
+        onRowAction = handler;
         notifySelection();
     }
     function setSortDescriptor(descriptor) {
@@ -1240,7 +1400,7 @@ export function createTableContext(options = {}) {
         notifySort();
     }
     function isColumnSortable(columnId) {
-        return Array.from(columns.values()).some((column) => column.id === columnId && column.allowsSorting);
+        return getColumnRegistrationById(columnId)?.allowsSorting ?? false;
     }
     function toggleSort(columnId) {
         if (!isColumnSortable(columnId))
@@ -1273,6 +1433,15 @@ export function createTableContext(options = {}) {
         get selectionBehavior() {
             return selectionBehavior;
         },
+        get disabledBehavior() {
+            return disabledBehavior;
+        },
+        get disallowEmptySelection() {
+            return disallowEmptySelection;
+        },
+        get selectionUnavailableDescriptionId() {
+            return selectionUnavailableDescriptionId;
+        },
         disabledKeys,
         get focusedCellKey() {
             return focusedCellKey;
@@ -1321,6 +1490,9 @@ export function createTableContext(options = {}) {
         isRowFocusTarget,
         getRowFocusEdge,
         isRowDisabled,
+        isRowSelectionDisabled,
+        isRowActionDisabled,
+        isRowActionable,
         hasSelectableRows,
         getSelectionCheckboxState,
         registerCell,
@@ -1347,7 +1519,10 @@ export function createTableContext(options = {}) {
         setSelection,
         setSelectionMode,
         setSelectionBehavior,
+        setDisabledBehavior,
+        setDisallowEmptySelection,
         setDisabledKeys,
+        setRowActionHandler,
         setSortDescriptor,
         toggleSort,
         isColumnSortable,

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

@@ -17,6 +17,8 @@
 	import {
 		createTableContext,
 		setTableContext,
+		type TableDisabledBehavior,
+		type TableRowActionHandler,
 		type TableContext,
 		type TableSelectionBehavior,
 		type TableSelectionKey,
@@ -31,6 +33,8 @@
 	type TableRootProps = Omit<HTMLAttributes<HTMLTableElement>, 'children'> & {
 		selectionMode?: TableSelectionMode;
 		selectionBehavior?: TableSelectionBehavior;
+		disabledBehavior?: TableDisabledBehavior;
+		disallowEmptySelection?: boolean;
 		hiddenColumns?: Iterable<string>;
 		defaultHiddenColumns?: Iterable<string>;
 		selectedKeys?: Iterable<TableSelectionKey>;
@@ -40,6 +44,7 @@
 		columnWidths?: Map<string, number>;
 		defaultColumnWidths?: Iterable<readonly [string, number]>;
 		disabledKeys?: Iterable<TableSelectionKey>;
+		onRowAction?: TableRowActionHandler;
 		onSelectionChange?: (keys: Set<TableSelectionKey>) => void;
 		onSortChange?: (descriptor: TableSortDescriptor | undefined) => void;
 		onColumnWidthsChange?: (widths: Map<string, number>) => void;
@@ -55,6 +60,8 @@
 	let {
 		selectionMode = 'none',
 		selectionBehavior = 'toggle',
+		disabledBehavior = 'all',
+		disallowEmptySelection = false,
 		hiddenColumns = $bindable(),
 		defaultHiddenColumns,
 		selectedKeys = $bindable(),
@@ -66,6 +73,7 @@
 		'aria-label': ariaLabel,
 		'aria-labelledby': ariaLabelledby,
 		disabledKeys,
+		onRowAction,
 		onSelectionChange,
 		onSortChange,
 		onColumnWidthsChange,
@@ -94,11 +102,14 @@
 		createTableContext({
 			selectionMode: (() => selectionMode)(),
 			selectionBehavior: (() => selectionBehavior)(),
+			disabledBehavior: (() => disabledBehavior)(),
+			disallowEmptySelection: (() => disallowEmptySelection)(),
 			initialHiddenColumns: (() => hiddenColumns ?? defaultHiddenColumns)(),
 			initialSelectedKeys: (() => selectedKeys ?? defaultSelectedKeys)(),
 			initialSortDescriptor: (() => sortDescriptor ?? defaultSortDescriptor)(),
 			initialColumnWidths: (() => columnWidths ?? defaultColumnWidths)(),
 			disabledKeys: (() => disabledKeys)(),
+			onRowAction: (() => onRowAction)(),
 			onHiddenColumnsChange: (columnIds) => {
 				pendingControlledHiddenColumns = [...columnIds];
 				hiddenColumns = [...columnIds];
@@ -270,10 +281,22 @@
 		ctx.setSelectionBehavior(selectionBehavior);
 	});
 
+	$effect(() => {
+		ctx.setDisabledBehavior(disabledBehavior);
+	});
+
+	$effect(() => {
+		ctx.setDisallowEmptySelection(disallowEmptySelection);
+	});
+
 	$effect(() => {
 		ctx.setDisabledKeys(disabledKeys);
 	});
 
+	$effect(() => {
+		ctx.setRowActionHandler(onRowAction);
+	});
+
 	$effect(() => {
 		if (selectedKeys !== undefined) {
 			const nextSelection = parseSelection(selectedKeys);
@@ -388,6 +411,7 @@
 	aria-multiselectable={selectionMode === 'multiple' ? true : undefined}
 	data-selection-mode={selectionMode}
 	data-selection-behavior={selectionBehavior}
+	data-disabled-behavior={disabledBehavior}
 	data-focus-within={focusWithin || undefined}
 	data-focus-visible={focusVisible || undefined}
 	onfocusin={handleFocusIn}
@@ -408,3 +432,9 @@
 	style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"
 	>{sortAnnouncement}</span
 >
+
+<span
+	id={ctx.selectionUnavailableDescriptionId}
+	style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"
+	>Selection unavailable for this row.</span
+>

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

@@ -1,9 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type TableContext, type TableSelectionBehavior, type TableSelectionKey, type TableSelectionMode, type TableSortDescriptor } from './context';
+import { type TableDisabledBehavior, type TableRowActionHandler, type TableContext, type TableSelectionBehavior, type TableSelectionKey, type TableSelectionMode, type TableSortDescriptor } from './context';
 type TableRootProps = Omit<HTMLAttributes<HTMLTableElement>, 'children'> & {
     selectionMode?: TableSelectionMode;
     selectionBehavior?: TableSelectionBehavior;
+    disabledBehavior?: TableDisabledBehavior;
+    disallowEmptySelection?: boolean;
     hiddenColumns?: Iterable<string>;
     defaultHiddenColumns?: Iterable<string>;
     selectedKeys?: Iterable<TableSelectionKey>;
@@ -13,6 +15,7 @@ type TableRootProps = Omit<HTMLAttributes<HTMLTableElement>, 'children'> & {
     columnWidths?: Map<string, number>;
     defaultColumnWidths?: Iterable<readonly [string, number]>;
     disabledKeys?: Iterable<TableSelectionKey>;
+    onRowAction?: TableRowActionHandler;
     onSelectionChange?: (keys: Set<TableSelectionKey>) => void;
     onSortChange?: (descriptor: TableSortDescriptor | undefined) => void;
     onColumnWidthsChange?: (widths: Map<string, number>) => void;

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Table } from '../index';
 	import type {
+		TableDisabledBehavior,
 		TableSelectionBehavior,
 		TableSelectionKey,
 		TableSelectionMode,
@@ -25,11 +26,15 @@
 		ariaLabelledby?: string;
 		selectionMode?: TableSelectionMode;
 		selectionBehavior?: TableSelectionBehavior;
+		disabledBehavior?: TableDisabledBehavior;
+		disallowEmptySelection?: boolean;
 		hiddenColumns?: string[];
 		defaultHiddenColumns?: string[];
 		disabledKeys?: Iterable<TableSelectionKey>;
 		initialSelectedKeys?: Iterable<TableSelectionKey>;
 		initialSortDescriptor?: TableSortDescriptor;
+		onRowAction?: (id: TableSelectionKey) => void;
+		onSelectionChange?: (keys: Set<TableSelectionKey>) => void;
 		showSelectionModeToggle?: boolean;
 		showSingleSelectionModeToggle?: boolean;
 		showSortClearButton?: boolean;
@@ -42,11 +47,15 @@
 		ariaLabelledby,
 		selectionMode = $bindable<TableSelectionMode>('multiple'),
 		selectionBehavior = 'toggle',
+		disabledBehavior = 'all',
+		disallowEmptySelection = false,
 		hiddenColumns = $bindable<string[] | undefined>(),
 		defaultHiddenColumns,
 		disabledKeys,
 		initialSelectedKeys,
 		initialSortDescriptor,
+		onRowAction,
+		onSelectionChange,
 		showSelectionModeToggle = false,
 		showSingleSelectionModeToggle = false,
 		showSortClearButton = false,
@@ -59,6 +68,8 @@
 	let currentSortDescriptor = $state<TableSortDescriptor | undefined>(
 		(() => initialSortDescriptor)()
 	);
+	let rowActionLog = $state<string[]>([]);
+	let eventLog = $state<string[]>([]);
 
 	const renderedRows = $derived.by(() => {
 		const nextRows = [...rows];
@@ -71,6 +82,18 @@
 			return String(left).localeCompare(String(right)) * direction;
 		});
 	});
+
+	function handleSelectionChange(keys: Set<TableSelectionKey>) {
+		currentSelectedKeys = new Set(keys);
+		eventLog = [...eventLog, `selection:${JSON.stringify([...keys])}`];
+		onSelectionChange?.(new Set(keys));
+	}
+
+	function handleRowAction(id: TableSelectionKey) {
+		rowActionLog = [...rowActionLog, String(id)];
+		eventLog = [...eventLog, `action:${String(id)}`];
+		onRowAction?.(id);
+	}
 </script>
 
 <Table.Root
@@ -78,11 +101,15 @@
 	aria-labelledby={ariaLabelledby}
 	{selectionMode}
 	{selectionBehavior}
+	{disabledBehavior}
+	{disallowEmptySelection}
 	bind:hiddenColumns
 	{defaultHiddenColumns}
 	bind:selectedKeys={currentSelectedKeys}
 	bind:sortDescriptor={currentSortDescriptor}
 	{disabledKeys}
+	onRowAction={handleRowAction}
+	onSelectionChange={handleSelectionChange}
 	class="table-root"
 >
 	<Table.Header>
@@ -157,6 +184,8 @@
 {/if}
 
 <output data-testid="selected-keys">{JSON.stringify([...currentSelectedKeys])}</output>
+<output data-testid="row-action-log">{JSON.stringify(rowActionLog)}</output>
+<output data-testid="event-log">{JSON.stringify(eventLog)}</output>
 <output data-testid="sort-descriptor"
 	>{currentSortDescriptor
 		? `${currentSortDescriptor.column}:${currentSortDescriptor.direction}`

package/dist/table/root/table-test.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TableSelectionBehavior, TableSelectionKey, TableSelectionMode, TableSortDescriptor } from './context';
+import type { TableDisabledBehavior, TableSelectionBehavior, TableSelectionKey, TableSelectionMode, TableSortDescriptor } from './context';
 type DemoRow = {
     id: string;
     email: string;
@@ -10,11 +10,15 @@ type TableTestProps = {
     ariaLabelledby?: string;
     selectionMode?: TableSelectionMode;
     selectionBehavior?: TableSelectionBehavior;
+    disabledBehavior?: TableDisabledBehavior;
+    disallowEmptySelection?: boolean;
     hiddenColumns?: string[];
     defaultHiddenColumns?: string[];
     disabledKeys?: Iterable<TableSelectionKey>;
     initialSelectedKeys?: Iterable<TableSelectionKey>;
     initialSortDescriptor?: TableSortDescriptor;
+    onRowAction?: (id: TableSelectionKey) => void;
+    onSelectionChange?: (keys: Set<TableSelectionKey>) => void;
     showSelectionModeToggle?: boolean;
     showSingleSelectionModeToggle?: boolean;
     showSortClearButton?: boolean;