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

package/dist/table/cell/table-cell.svelte

@@ -12,6 +12,7 @@
 		shouldShowFocusVisible,
 		trackInteractionModality
 	} from '../../primitives/input-modality';
+	import { handleTableBodyKeydown } from '../utils/handle-body-keydown';
 
 	type TableCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
 		children?: Snippet;
@@ -109,6 +110,27 @@
 		void $selectionVersion;
 		return row.section === 'body' ? table.isRowDisabled(row.rowId, row.isDisabled) : row.isDisabled;
 	});
+	const isRowSelectionDisabled = $derived.by(() => {
+		void $selectionVersion;
+		return row.section === 'body'
+			? table.isRowSelectionDisabled(row.rowId, row.isDisabled)
+			: row.isDisabled;
+	});
+	const isRowActionable = $derived.by(() => {
+		void $selectionVersion;
+		return row.section === 'body' ? table.isRowActionable(row.rowId, row.isDisabled) : false;
+	});
+	const selectionUnavailableDescription = $derived.by(() => {
+		return row.section === 'body' &&
+			table.selectionMode !== 'none' &&
+			!isRowDisabled &&
+			isRowSelectionDisabled
+			? 'Selection unavailable for this row.'
+			: undefined;
+	});
+	const selectionUnavailableDescriptionId = $derived(
+		selectionUnavailableDescription ? table.selectionUnavailableDescriptionId : undefined
+	);
 	const isCellFocusable = $derived(row.section !== 'body' || !isRowDisabled);
 	const cellTabIndex = $derived.by(() => {
 		if (row.section !== 'body') return undefined;
@@ -128,12 +150,29 @@
 		if (row.section !== 'body') return;
 		if (isRowDisabled) return;
 		table.focusCellByKey(key);
-		table.pressRow(row.rowId as TableSelectionKey | undefined, {
-			shiftKey: event.shiftKey,
-			ctrlKey: event.ctrlKey,
-			metaKey: event.metaKey,
-			altKey: event.altKey
-		});
+		table.pressRow(
+			row.rowId as TableSelectionKey | undefined,
+			'pointer',
+			{
+				shiftKey: event.shiftKey,
+				ctrlKey: event.ctrlKey,
+				metaKey: event.metaKey,
+				altKey: event.altKey
+			},
+			row.isDisabled
+		);
+	}
+
+	function handleDoubleClick() {
+		if (row.section !== 'body') return;
+		if (isRowDisabled) return;
+		table.focusCellByKey(key);
+		table.pressRow(
+			row.rowId as TableSelectionKey | undefined,
+			'pointer-double',
+			{},
+			row.isDisabled
+		);
 	}
 
 	function handleMouseDown(event: MouseEvent) {
@@ -143,79 +182,38 @@
 
 	function handleKeyDown(event: KeyboardEvent) {
 		if (row.section !== 'body') return;
-		trackInteractionModality(event, element ?? null);
-
-		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'a') {
-			if (table.selectionMode === 'multiple') {
-				event.preventDefault();
-				table.selectAllRows();
-			}
-			return;
-		}
-
-		if ((event.ctrlKey || event.metaKey) && event.key === 'Home') {
-			event.preventDefault();
-			table.moveToGridStart();
-			return;
-		}
-
-		if ((event.ctrlKey || event.metaKey) && event.key === 'End') {
-			event.preventDefault();
-			table.moveToGridEnd();
-			return;
-		}
-
-		switch (event.key) {
-			case 'ArrowUp':
-				event.preventDefault();
-				table.moveFocus('up', {
-					shiftKey: event.shiftKey,
-					ctrlKey: event.ctrlKey,
-					metaKey: event.metaKey,
-					altKey: event.altKey
-				});
-				return;
-			case 'ArrowDown':
-				event.preventDefault();
-				table.moveFocus('down', {
-					shiftKey: event.shiftKey,
-					ctrlKey: event.ctrlKey,
-					metaKey: event.metaKey,
-					altKey: event.altKey
-				});
-				return;
-			case 'ArrowLeft':
-				event.preventDefault();
-				table.moveFocus('left');
-				return;
-			case 'ArrowRight':
-				event.preventDefault();
-				table.moveFocus('right');
-				return;
-			case 'Home':
-				event.preventDefault();
-				table.moveToRowStart();
-				return;
-			case 'End':
-				event.preventDefault();
-				table.moveToRowEnd();
-				return;
-			case 'Enter':
-			case ' ':
-				event.preventDefault();
-				if (event.repeat) {
-					return;
-				}
-				if (!isRowDisabled) {
-					table.pressRow(row.rowId as TableSelectionKey | undefined, {
+		handleTableBodyKeydown({
+			event,
+			table,
+			focusTarget: element,
+			isDisabled: isRowDisabled,
+			onHome: () => table.moveToRowStart(),
+			onEnd: () => table.moveToRowEnd(),
+			onEnter: () =>
+				table.pressRow(
+					row.rowId as TableSelectionKey | undefined,
+					'keyboard-enter',
+					{
 						shiftKey: event.shiftKey,
 						ctrlKey: event.ctrlKey,
 						metaKey: event.metaKey,
 						altKey: event.altKey
-					});
-				}
-				return;
-		}
+					},
+					row.isDisabled
+				),
+			onSpace: () =>
+				table.pressRow(
+					row.rowId as TableSelectionKey | undefined,
+					'keyboard-space',
+					{
+						shiftKey: event.shiftKey,
+						ctrlKey: event.ctrlKey,
+						metaKey: event.metaKey,
+						altKey: event.altKey
+					},
+					row.isDisabled
+				)
+		});
 	}
 </script>
 
@@ -228,17 +226,26 @@
 	scope={row.section === 'body' && column?.isRowHeader ? 'row' : undefined}
 	aria-colindex={!isColumnHidden && visibleColumnIndex >= 0 ? visibleColumnIndex + 1 : undefined}
 	aria-hidden={isColumnHidden ? true : undefined}
+	aria-describedby={selectionUnavailableDescriptionId}
 	aria-disabled={row.section === 'body' && isRowDisabled ? true : undefined}
 	data-focused={isFocused ? 'true' : undefined}
 	data-focus-visible={isFocusVisible ? 'true' : undefined}
+	data-actionable={isRowActionable ? 'true' : undefined}
 	data-row-selected={isRowSelected ? 'true' : undefined}
+	data-selection-disabled={row.section === 'body' &&
+	table.selectionMode !== 'none' &&
+	!isRowDisabled &&
+	isRowSelectionDisabled
+		? 'true'
+		: undefined}
 	data-disabled={isRowDisabled || undefined}
 	data-column-index={visibleColumnIndex >= 0 ? visibleColumnIndex : undefined}
 	style:display={isColumnHidden ? 'none' : undefined}
-	onfocus={handleFocus}
-	onclick={handleClick}
-	onmousedown={handleMouseDown}
-	onkeydown={handleKeyDown}
+	onfocus={row.section === 'body' ? handleFocus : undefined}
+	onclick={row.section === 'body' ? handleClick : undefined}
+	ondblclick={row.section === 'body' ? handleDoubleClick : undefined}
+	onmousedown={row.section === 'body' ? handleMouseDown : undefined}
+	onkeydown={row.section === 'body' ? handleKeyDown : undefined}
 	{...restProps}
 >
 	{#if children}

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Table } from '../index';
 	import type {
+		TableDisabledBehavior,
 		TableSelectionBehavior,
 		TableSelectionKey,
 		TableSelectionMode
@@ -27,6 +28,8 @@
 		rows?: DemoRow[];
 		selectionMode?: TableSelectionMode;
 		selectionBehavior?: TableSelectionBehavior;
+		disabledBehavior?: TableDisabledBehavior;
+		disallowEmptySelection?: boolean;
 		disabledKeys?: Iterable<TableSelectionKey>;
 		initialSelectedKeys?: Iterable<TableSelectionKey>;
 	};
@@ -35,6 +38,8 @@
 		rows = defaultRows,
 		selectionMode = 'multiple',
 		selectionBehavior = 'toggle',
+		disabledBehavior = 'all',
+		disallowEmptySelection = false,
 		disabledKeys,
 		initialSelectedKeys
 	}: CheckboxTestProps = $props();
@@ -48,6 +53,8 @@
 	aria-label="Users table"
 	{selectionMode}
 	{selectionBehavior}
+	{disabledBehavior}
+	{disallowEmptySelection}
 	bind:selectedKeys={currentSelectedKeys}
 	{disabledKeys}
 >

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

@@ -1,4 +1,4 @@
-import type { TableSelectionBehavior, TableSelectionKey, TableSelectionMode } from '../root/context';
+import type { TableDisabledBehavior, TableSelectionBehavior, TableSelectionKey, TableSelectionMode } from '../root/context';
 type DemoRow = {
     id: string;
     email: string;
@@ -8,6 +8,8 @@ type CheckboxTestProps = {
     rows?: DemoRow[];
     selectionMode?: TableSelectionMode;
     selectionBehavior?: TableSelectionBehavior;
+    disabledBehavior?: TableDisabledBehavior;
+    disallowEmptySelection?: boolean;
     disabledKeys?: Iterable<TableSelectionKey>;
     initialSelectedKeys?: Iterable<TableSelectionKey>;
 };

package/dist/table/checkbox/table-checkbox.svelte

@@ -50,7 +50,9 @@
 	const selectionVersion = table.selectionVersion;
 	const layoutVersion = table.layoutVersion;
 
-	let wrapperElement = $state<HTMLElement | undefined>(undefined);
+	let checkboxElement = $state<HTMLSpanElement | null>(null);
+	let checkboxChecked = $state(false);
+	let checkboxIndeterminate = $state(false);
 
 	const isVisible = $derived.by(() => {
 		if (table.selectionMode === 'none') return false;
@@ -83,7 +85,7 @@
 			return !table.hasSelectableRows();
 		}
 		if (section.section === 'body') {
-			return table.isRowDisabled(row.rowId, row.isDisabled) || row.rowId === undefined;
+			return table.isRowSelectionDisabled(row.rowId, row.isDisabled) || row.rowId === undefined;
 		}
 		return true;
 	});
@@ -101,9 +103,20 @@
 	});
 
 	function getCheckboxRootElement() {
-		return wrapperElement?.querySelector<HTMLElement>('[data-checkbox-root="true"]') ?? undefined;
+		return checkboxElement ?? undefined;
 	}
 
+	$effect(() => {
+		void $selectionVersion;
+		checkboxChecked = isChecked;
+	});
+
+	$effect(() => {
+		void $selectionVersion;
+		void $layoutVersion;
+		checkboxIndeterminate = isIndeterminate;
+	});
+
 	$effect(() => {
 		if (!isVisible || isDisabled) {
 			cell.unregisterFocusDelegate();
@@ -129,6 +142,27 @@
 		checkboxElement.tabIndex = tabIndex;
 	});
 
+	$effect(() => {
+		const checkboxElement = getCheckboxRootElement();
+		if (!checkboxElement) return;
+
+		const handleElementFocus = (event: FocusEvent) => {
+			handleFocusIn(event);
+		};
+
+		const handleElementMouseDown = (event: MouseEvent) => {
+			handleMouseDown(event);
+		};
+
+		checkboxElement.addEventListener('focus', handleElementFocus);
+		checkboxElement.addEventListener('mousedown', handleElementMouseDown);
+
+		return () => {
+			checkboxElement.removeEventListener('focus', handleElementFocus);
+			checkboxElement.removeEventListener('mousedown', handleElementMouseDown);
+		};
+	});
+
 	function applySelection(nextChecked: boolean) {
 		if (isDisabled) return;
 
@@ -152,11 +186,6 @@
 		table.setFocusVisible(shouldShowFocusVisible(target ?? null));
 	}
 
-	function handleFocusOut(event: FocusEvent) {
-		const nextFocused = event.relatedTarget;
-		if (nextFocused instanceof Node && wrapperElement?.contains(nextFocused)) return;
-	}
-
 	function handleMouseDown(event: MouseEvent) {
 		trackInteractionModality(event, getCheckboxRootElement() ?? null);
 		table.setFocusVisible(false);
@@ -166,6 +195,9 @@
 	function handleClick(event: MouseEvent) {
 		event.stopPropagation();
 		if (!isVisible || isDisabled) return;
+		event.preventDefault();
+		const nextChecked = section.section === 'header' ? checkboxState !== 'all' : !isChecked;
+		applySelection(nextChecked);
 		table.focusCellByKey(cell.cellKey);
 	}
 
@@ -246,29 +278,22 @@
 </script>
 
 {#if isVisible}
-	<div
-		bind:this={wrapperElement}
-		role="presentation"
-		onfocusin={handleFocusIn}
-		onfocusout={handleFocusOut}
-		onmousedown={handleMouseDown}
+	<Checkbox.Root
+		{id}
+		bind:element={checkboxElement}
+		bind:isChecked={checkboxChecked}
+		bind:isIndeterminate={checkboxIndeterminate}
+		{isDisabled}
+		onCheckedChange={applySelection}
+		{title}
+		aria-label={accessibleLabel}
+		aria-labelledby={ariaLabelledby}
+		data-table-checkbox="true"
 		onclick={handleClick}
 		onkeydown={handleKeyDown}
+		class={className}
+		{...restProps}
 	>
-		<Checkbox.Root
-			{id}
-			{isChecked}
-			{isIndeterminate}
-			{isDisabled}
-			onCheckedChange={applySelection}
-			{title}
-			aria-label={accessibleLabel}
-			aria-labelledby={ariaLabelledby}
-			data-table-checkbox="true"
-			class={className}
-			{...restProps}
-		>
-			{@render children?.()}
-		</Checkbox.Root>
-	</div>
+		{@render children?.()}
+	</Checkbox.Root>
 {/if}

package/dist/table/index.d.ts

@@ -11,6 +11,6 @@ export { default as TableColumnResizer } from './column-resizer/table-column-res
 export { default as TableCheckbox } from './checkbox/table-checkbox.svelte';
 export { default as TableCheckboxIndicator } from './checkbox-indicator/table-checkbox-indicator.svelte';
 export { default as TableCell } from './cell/table-cell.svelte';
-export { createTableContext, getTableContext, setTableContext, useTableContext, getTableSectionContext, setTableSectionContext, useTableSectionContext, getTableRowContext, setTableRowContext, useTableRowContext, getTableColumnContext, setTableColumnContext, useTableColumnContext, type TableContext, type TableSelectionBehavior, type TableSelectionCheckboxState, type TableSelectionKey, type TableSelectionMode, type TableSortDirection, type TableSortDescriptor, type TableColumnWidth, type TableGridCoord, type TableColumnRegistration, type TableSectionKind, type TableSectionContext, type TableRowContext, type TableColumnContext, type CreateTableContextOptions } from './root/context.js';
+export { createTableContext, getTableContext, setTableContext, useTableContext, getTableSectionContext, setTableSectionContext, useTableSectionContext, getTableRowContext, setTableRowContext, useTableRowContext, getTableColumnContext, setTableColumnContext, useTableColumnContext, type TableContext, type TableDisabledBehavior, type TableSelectionBehavior, type TableSelectionCheckboxState, type TableSelectionKey, type TableSelectionMode, type TableRowActionHandler, type TableSortDirection, type TableSortDescriptor, type TableColumnWidth, type TableGridCoord, type TableColumnRegistration, type TableSectionKind, type TableSectionContext, type TableRowContext, type TableColumnContext, type CreateTableContextOptions } from './root/context.js';
 import * as TableParts from './index.parts.js';
 export default TableParts;

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

@@ -2,14 +2,17 @@ import { type Readable } from 'svelte/store';
 export type TableSelectionKey = string | number;
 export type TableSelectionMode = 'none' | 'single' | 'multiple';
 export type TableSelectionBehavior = 'toggle' | 'replace';
+export type TableDisabledBehavior = 'selection' | 'all';
 export type TableSortDirection = 'ascending' | 'descending';
 export type TableSectionKind = 'header' | 'body' | 'footer';
+export type TableRowActionHandler = (id: TableSelectionKey) => void;
 type TableSelectionInteraction = {
     shiftKey?: boolean;
     ctrlKey?: boolean;
     metaKey?: boolean;
     altKey?: boolean;
 };
+type TableRowPressSource = 'pointer' | 'pointer-double' | 'keyboard-enter' | 'keyboard-space';
 export type TableSortDescriptor = {
     column: string;
     direction: TableSortDirection;
@@ -52,11 +55,14 @@ type TableCellRegistration = {
 export type CreateTableContextOptions = {
     selectionMode?: TableSelectionMode;
     selectionBehavior?: TableSelectionBehavior;
+    disabledBehavior?: TableDisabledBehavior;
+    disallowEmptySelection?: boolean;
     initialSelectedKeys?: Iterable<TableSelectionKey>;
     initialSortDescriptor?: TableSortDescriptor;
     initialColumnWidths?: Iterable<readonly [string, number]>;
     initialHiddenColumns?: Iterable<string>;
     disabledKeys?: Iterable<TableSelectionKey>;
+    onRowAction?: TableRowActionHandler;
     onSelectionChange?: (keys: Set<TableSelectionKey>) => void;
     onSortChange?: (descriptor: TableSortDescriptor | undefined) => void;
     onColumnWidthsChange?: (widths: Map<string, number>) => void;
@@ -74,6 +80,9 @@ export type TableContext = {
     createInstanceToken: (prefix: string) => string;
     selectionMode: TableSelectionMode;
     selectionBehavior: TableSelectionBehavior;
+    disabledBehavior: TableDisabledBehavior;
+    disallowEmptySelection: boolean;
+    selectionUnavailableDescriptionId: string;
     disabledKeys: Set<TableSelectionKey>;
     focusedCellKey: string | null;
     focusVisible: boolean;
@@ -114,6 +123,9 @@ export type TableContext = {
     isRowFocusTarget: (token: string) => boolean;
     getRowFocusEdge: (token: string) => TableRowFocusEdge | null;
     isRowDisabled: (id: TableSelectionKey | undefined, localDisabled?: boolean) => boolean;
+    isRowSelectionDisabled: (id: TableSelectionKey | undefined, localDisabled?: boolean) => boolean;
+    isRowActionDisabled: (id: TableSelectionKey | undefined, localDisabled?: boolean) => boolean;
+    isRowActionable: (id: TableSelectionKey | undefined, localDisabled?: boolean) => boolean;
     hasSelectableRows: () => boolean;
     getSelectionCheckboxState: () => TableSelectionCheckboxState;
     registerCell: (cell: TableCellRegistration) => void;
@@ -123,7 +135,7 @@ export type TableContext = {
     isRowTabStop: (token: string) => boolean;
     focusCellByKey: (key: string | null) => void;
     focusRowByToken: (token: string, edge: TableRowFocusEdge) => void;
-    pressRow: (id: TableSelectionKey | undefined, interaction?: TableSelectionInteraction) => void;
+    pressRow: (id: TableSelectionKey | undefined, source: TableRowPressSource, interaction?: TableSelectionInteraction, localDisabled?: boolean) => void;
     setFocusedCell: (key: string | null) => void;
     setFocusedRow: (token: string | null, edge?: TableRowFocusEdge) => void;
     setFocusVisible: (visible: boolean) => void;
@@ -140,7 +152,10 @@ export type TableContext = {
     setSelection: (keys: Iterable<TableSelectionKey>) => void;
     setSelectionMode: (mode: TableSelectionMode) => void;
     setSelectionBehavior: (behavior: TableSelectionBehavior) => void;
+    setDisabledBehavior: (behavior: TableDisabledBehavior) => void;
+    setDisallowEmptySelection: (disallow: boolean) => void;
     setDisabledKeys: (keys?: Iterable<TableSelectionKey>) => void;
+    setRowActionHandler: (handler?: TableRowActionHandler) => void;
     setSortDescriptor: (descriptor: TableSortDescriptor | undefined) => void;
     toggleSort: (columnId: string) => void;
     isColumnSortable: (columnId: string) => boolean;