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

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;

package/dist/table/row/README.md

@@ -9,6 +9,8 @@
 Name: `Table.Row`
 Description: Semantic table row part used in the header, body, or footer. In body scope it reflects row focus, selection, and disabled state.
 
+Public prop type: `TableRowProps`
+
 | Prop         | Type               | Default     | Description                                                     |
 | ------------ | ------------------ | ----------- | --------------------------------------------------------------- |
 | `id`         | `string \| number` | `undefined` | Stable row identifier used for selection state in `Table.Body`. |

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

@@ -2,26 +2,13 @@
 	import { onDestroy } from 'svelte';
 	import { SvelteMap } from 'svelte/reactivity';
 	import { writable } from 'svelte/store';
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import {
-		setTableRowContext,
-		useTableContext,
-		useTableSectionContext,
-		type TableSelectionKey
-	} from '../root/context';
+	import { setTableRowContext, useTableContext, useTableSectionContext } from '../root/context';
+	import type { TableRowProps } from '../types.js';
 	import {
 		shouldShowFocusVisible,
 		trackInteractionModality
 	} from '../../primitives/input-modality';
-
-	type TableRowProps = Omit<HTMLAttributes<HTMLTableRowElement>, 'children' | 'id'> & {
-		id?: TableSelectionKey;
-		isDisabled?: boolean;
-		textValue?: string;
-		children?: Snippet;
-		class?: string;
-	};
+	import { handleTableBodyKeydown } from '../utils/handle-body-keydown';
 
 	let {
 		id,
@@ -199,6 +186,14 @@
 		void $selectionVersion;
 		return section.section === 'body' ? table.isRowDisabled(id, isDisabled) : isDisabled;
 	});
+	const isSelectionDisabled = $derived.by(() => {
+		void $selectionVersion;
+		return section.section === 'body' ? table.isRowSelectionDisabled(id, isDisabled) : isDisabled;
+	});
+	const isActionable = $derived.by(() => {
+		void $selectionVersion;
+		return section.section === 'body' ? table.isRowActionable(id, isDisabled) : false;
+	});
 
 	function handleFocus() {
 		if (section.section !== 'body') return;
@@ -216,77 +211,38 @@
 	function handleKeyDown(event: KeyboardEvent) {
 		if (section.section !== 'body') return;
 		if (event.target !== rowElement) return;
-		trackInteractionModality(event, rowElement ?? 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.moveToBodyRowStart();
-				return;
-			case 'End':
-				event.preventDefault();
-				table.moveToBodyRowEnd();
-				return;
-			case 'Enter':
-			case ' ':
-				event.preventDefault();
-				if (event.repeat) return;
-				if (!isAriaDisabled) {
-					table.pressRow(id, {
+		handleTableBodyKeydown({
+			event,
+			table,
+			focusTarget: rowElement,
+			isDisabled: isAriaDisabled,
+			onHome: () => table.moveToBodyRowStart(),
+			onEnd: () => table.moveToBodyRowEnd(),
+			onEnter: () =>
+				table.pressRow(
+					id,
+					'keyboard-enter',
+					{
 						shiftKey: event.shiftKey,
 						ctrlKey: event.ctrlKey,
 						metaKey: event.metaKey,
 						altKey: event.altKey
-					});
-				}
-				return;
-		}
+					},
+					isDisabled
+				),
+			onSpace: () =>
+				table.pressRow(
+					id,
+					'keyboard-space',
+					{
+						shiftKey: event.shiftKey,
+						ctrlKey: event.ctrlKey,
+						metaKey: event.metaKey,
+						altKey: event.altKey
+					},
+					isDisabled
+				)
+		});
 	}
 </script>
 
@@ -304,7 +260,14 @@
 	data-focus-visible={isFocusVisible ? 'true' : undefined}
 	data-focus-within={isFocusWithin ? 'true' : undefined}
 	data-focus-visible-within={isFocusVisibleWithin ? 'true' : undefined}
+	data-actionable={isActionable ? 'true' : undefined}
 	data-selected={isSelected ? 'true' : undefined}
+	data-selection-disabled={section.section === 'body' &&
+	table.selectionMode !== 'none' &&
+	!isAriaDisabled &&
+	isSelectionDisabled
+		? 'true'
+		: undefined}
 	data-disabled={isAriaDisabled || undefined}
 	aria-selected={section.section === 'body' && table.selectionMode !== 'none'
 		? isSelected

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

@@ -1,13 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import { type TableSelectionKey } from '../root/context';
-type TableRowProps = Omit<HTMLAttributes<HTMLTableRowElement>, 'children' | 'id'> & {
-    id?: TableSelectionKey;
-    isDisabled?: boolean;
-    textValue?: string;
-    children?: Snippet;
-    class?: string;
-};
+import type { TableRowProps } from '../types.js';
 declare const TableRow: import("svelte").Component<TableRowProps, {}, "">;
 type TableRow = ReturnType<typeof TableRow>;
 export default TableRow;

package/dist/table/types.d.ts

@@ -0,0 +1,90 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TableColumnWidth, TableContext, TableDisabledBehavior, TableRowActionHandler, TableSelectionBehavior, TableSelectionKey, TableSelectionMode, TableSortDescriptor } from './root/context.js';
+export type TableColumnProps = {
+    id: string;
+    allowsSorting?: boolean;
+    isRowHeader?: boolean;
+    textValue?: string;
+    width?: TableColumnWidth;
+    defaultWidth?: TableColumnWidth;
+    minWidth?: number;
+    maxWidth?: number;
+    children?: Snippet;
+};
+export type TableHeaderProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
+    children?: Snippet;
+    class?: string;
+};
+export type TableBodyProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
+    children?: Snippet;
+    class?: string;
+};
+export type TableFooterProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
+    children?: Snippet;
+    class?: string;
+};
+export type TableRootProps = Omit<HTMLAttributes<HTMLTableElement>, 'children'> & {
+    selectionMode?: TableSelectionMode;
+    selectionBehavior?: TableSelectionBehavior;
+    disabledBehavior?: TableDisabledBehavior;
+    disallowEmptySelection?: boolean;
+    hiddenColumns?: Iterable<string>;
+    defaultHiddenColumns?: Iterable<string>;
+    selectedKeys?: Iterable<TableSelectionKey>;
+    defaultSelectedKeys?: Iterable<TableSelectionKey>;
+    sortDescriptor?: TableSortDescriptor;
+    defaultSortDescriptor?: TableSortDescriptor;
+    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;
+    onHiddenColumnsChange?: (columnIds: string[]) => void;
+    onColumnResizeStart?: (columnId: string) => void;
+    onColumnResizeEnd?: (widths: Map<string, number>) => void;
+    children?: Snippet;
+    class?: string;
+    context?: TableContext;
+    element?: HTMLTableElement;
+};
+export type TableRowProps = Omit<HTMLAttributes<HTMLTableRowElement>, 'children' | 'id'> & {
+    id?: TableSelectionKey;
+    isDisabled?: boolean;
+    textValue?: string;
+    children?: Snippet;
+    class?: string;
+};
+export type TableColumnHeaderCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
+    children?: Snippet;
+    class?: string;
+};
+export type TableColumnResizerProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    step?: number;
+    shiftStep?: number;
+    children?: Snippet;
+    class?: string;
+};
+export type TableCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
+    children?: Snippet;
+    class?: string;
+};
+export type TableEmptyStateProps = {
+    children?: Snippet;
+    class?: string;
+};
+export type TableCheckboxProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class' | 'id' | 'role' | 'tabindex' | 'aria-checked' | 'aria-disabled' | 'onclick' | 'onkeydown'> & {
+    id?: string;
+    title?: string;
+    children?: Snippet;
+    class?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+};
+export type TableCheckboxIndicatorProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class'> & {
+    keepMounted?: boolean;
+    children?: Snippet;
+    class?: string;
+};

package/dist/table/types.js

@@ -0,0 +1 @@
+export {};

package/dist/table/utils/handle-body-keydown.d.ts

@@ -0,0 +1,13 @@
+import type { TableContext } from '../root/context';
+type TableBodyKeydownOptions = {
+    event: KeyboardEvent;
+    table: Pick<TableContext, 'selectionMode' | 'selectAllRows' | 'moveToGridStart' | 'moveToGridEnd' | 'moveFocus'>;
+    focusTarget: HTMLElement | null | undefined;
+    isDisabled: boolean;
+    onHome: () => void;
+    onEnd: () => void;
+    onEnter: () => void;
+    onSpace: () => void;
+};
+export declare function handleTableBodyKeydown({ event, table, focusTarget, isDisabled, onHome, onEnd, onEnter, onSpace }: TableBodyKeydownOptions): void;
+export {};

package/dist/table/utils/handle-body-keydown.js

@@ -0,0 +1,67 @@
+import { trackInteractionModality } from '../../primitives/input-modality';
+function getInteraction(event) {
+    return {
+        shiftKey: event.shiftKey,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        altKey: event.altKey
+    };
+}
+export function handleTableBodyKeydown({ event, table, focusTarget, isDisabled, onHome, onEnd, onEnter, onSpace }) {
+    trackInteractionModality(event, focusTarget ?? 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', getInteraction(event));
+            return;
+        case 'ArrowDown':
+            event.preventDefault();
+            table.moveFocus('down', getInteraction(event));
+            return;
+        case 'ArrowLeft':
+            event.preventDefault();
+            table.moveFocus('left');
+            return;
+        case 'ArrowRight':
+            event.preventDefault();
+            table.moveFocus('right');
+            return;
+        case 'Home':
+            event.preventDefault();
+            onHome();
+            return;
+        case 'End':
+            event.preventDefault();
+            onEnd();
+            return;
+        case 'Enter':
+            event.preventDefault();
+            if (event.repeat || isDisabled)
+                return;
+            onEnter();
+            return;
+        case ' ':
+            event.preventDefault();
+            if (event.repeat || isDisabled)
+                return;
+            onSpace();
+            return;
+    }
+}

package/package.json

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