fluentui-svelte 0.2.0 → 0.3.0

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

@@ -0,0 +1,89 @@
+<script lang="ts" generics="Tag extends 'td' | 'div' = 'td'">
+	import Checkbox from '../checkbox/checkbox.svelte';
+	import RadioButton from '../radio-button/radio-button.svelte';
+	import { colIndex, getTag, requireTableContext, selectOnSpace } from './table.svelte.js';
+	import type { TableDOM, TableSelectionCellProps } from './types.js';
+
+	let {
+		as,
+		ref = $bindable(),
+		type = 'checkbox',
+		checked = false,
+		subtle = false,
+		invisible = false,
+		checkboxIndicator,
+		radioIndicator,
+		class: classes,
+		onclick,
+		...attributes
+	}: TableSelectionCellProps<Tag> = $props();
+
+	const context = requireTableContext();
+
+	const noNativeElements = $derived(context.config.noNativeElements);
+
+	const _as = $derived(getTag(as, 'td', noNativeElements));
+
+	/** A `grid` has no `cell`, only `gridcell`, so arrow navigation renames what the cell reports. */
+	const enableTabspot = $derived(context.config.enableTabspot);
+</script>
+
+<svelte:element
+	this={_as}
+	bind:this={ref as TableDOM[Tag]}
+	role={enableTabspot ? 'gridcell' : _as === 'div' ? 'cell' : undefined}
+	class={['fs-table-selection-cell', { flex: _as === 'div', subtle, invisible, checked: !!checked }, classes]}
+	{@attach enableTabspot ? colIndex() : undefined}
+	{@attach onclick ? selectOnSpace : undefined}
+	{onclick}
+	{...attributes}
+>
+	<!--
+		The indicator answers the pointer itself, and the click still reaches the row underneath, so
+		hitting it selects the row rather than only ticking a box the consumer never hears about.
+	-->
+	{#if type === 'radio'}
+		<RadioButton checked={checked === true} {...radioIndicator} />
+	{:else}
+		<Checkbox wrapperAs="div" checked={checked === true} indeterminate={checked === 'mixed'} {...checkboxIndicator} />
+	{/if}
+</svelte:element>
+
+<style>
+	.fs-table-selection-cell {
+		height: var(--fs-table-row-height);
+		padding: 0 var(--fs-table-cell-padding);
+		vertical-align: middle;
+		/* Shrink to the indicator: a native table hands the leftover width to the data columns. */
+		width: 1%;
+		white-space: nowrap;
+		& :global(.fs-checkbox),
+		& :global(.fs-radio-button) {
+			display: flex;
+			align-items: center;
+		}
+		&.subtle :global(.fs-checkbox),
+		&.subtle :global(.fs-radio-button) {
+			/* Set by the row, so the indicator surfaces on hover and while the focus is inside. */
+			opacity: var(--fs-table-row-active, 0);
+			transition: opacity var(--fs-fast-duration) var(--fs-point-to-point);
+			@media (prefers-reduced-motion: reduce) {
+				transition: none;
+			}
+		}
+		&.subtle.checked :global(.fs-checkbox),
+		&.subtle.checked :global(.fs-radio-button) {
+			opacity: 1;
+		}
+		&.invisible :global(.fs-checkbox),
+		&.invisible :global(.fs-radio-button) {
+			visibility: hidden;
+		}
+		&.flex {
+			display: flex;
+			align-items: center;
+			flex: 0 0 auto;
+			width: auto;
+		}
+	}
+</style>

package/dist/components/table/table-selection-cell.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { TableSelectionCellProps } from './types.ts';
+declare function $$render<Tag extends 'td' | 'div' = 'td'>(): {
+    props: TableSelectionCellProps<Tag>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Tag extends 'td' | 'div' = 'td'> {
+    props(): ReturnType<typeof $$render<Tag>>['props'];
+    events(): ReturnType<typeof $$render<Tag>>['events'];
+    slots(): ReturnType<typeof $$render<Tag>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Tag extends 'td' | 'div' = 'td'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Tag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Tag>['props']>, ReturnType<__sveltets_Render<Tag>['events']>, ReturnType<__sveltets_Render<Tag>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Tag>['bindings']>;
+    } & ReturnType<__sveltets_Render<Tag>['exports']>;
+    <Tag extends 'td' | 'div' = 'td'>(internal: unknown, props: ReturnType<__sveltets_Render<Tag>['props']> & {}): ReturnType<__sveltets_Render<Tag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableSelectionCell: $$IsomorphicComponent;
+type TableSelectionCell<Tag extends 'td' | 'div' = 'td'> = InstanceType<typeof TableSelectionCell<Tag>>;
+export default TableSelectionCell;

package/dist/components/table/table.svelte

@@ -0,0 +1,189 @@
+<script lang="ts" generics="Tag extends 'table' | 'div' = 'table'">
+	import { tick } from 'svelte';
+	import { getTabspotAttributes, tabspotVirtual } from 'tabspot';
+	import { getTag, setTableContext, TABSPOT_ITEMS, TABSPOT_SKIP } from './table.svelte.js';
+	import type { TableContext, TableDOM, TableProps } from './types.js';
+
+	let {
+		as,
+		ref = $bindable(),
+		size = 'medium',
+		noNativeElements = false,
+		sortable = false,
+		noRowBorders = false,
+		enableTabspot = false,
+		virtualizer,
+		resizableColumns = false,
+		columnWidths = $bindable([]),
+		columnSizing,
+		onColumnResize,
+		class: classes,
+		children,
+		...attributes
+	}: TableProps<Tag> = $props();
+
+	/** Narrow enough that a column never collapses to nothing, wide enough to stay grabbable. */
+	const MIN_COLUMN_WIDTH = 40;
+
+	const context: TableContext = $state({
+		config: {
+			get size() {
+				return size;
+			},
+			get noNativeElements() {
+				return noNativeElements;
+			},
+			get sortable() {
+				return sortable;
+			},
+			get enableTabspot() {
+				return enableTabspot;
+			},
+			get resizableColumns() {
+				return resizableColumns;
+			}
+		},
+		state: {
+			get columnWidths() {
+				return columnWidths;
+			},
+			set columnWidths(v) {
+				columnWidths = v;
+			}
+		},
+		events: null,
+		methods: {
+			getColumnWidth: (index: number) => context.state.columnWidths[index] ?? columnSizing?.[index]?.defaultWidth,
+			resizeColumn: (e: Event, index: number, width: number) => {
+				const { state } = context;
+				const min = columnSizing?.[index]?.minWidth ?? MIN_COLUMN_WIDTH;
+				const next = Math.round(Math.max(min, width));
+				if (state.columnWidths[index] === next) return;
+
+				// A fresh array, so a consumer binding to it sees the change however they store it.
+				const widths = [...state.columnWidths];
+				widths[index] = next;
+				state.columnWidths = widths;
+				onColumnResize?.(e, { index, width: next });
+			}
+		}
+	});
+
+	setTableContext(context);
+
+	/**
+	 * The tag the invariant rules over. The markup renders it through here, so it is checked during
+	 * SSR and on every prop update rather than only once on mount.
+	 */
+	const _as = $derived(getTag(as, 'table', noNativeElements));
+
+	/**
+	 * A grid mover: the arrows walk the cells, rows are read off the DOM parent of each cell, and
+	 * the whole table takes a single tab stop. `Escape` is left alone, a grid has nothing to exit to.
+	 */
+	const tabspotAttributes = $derived(
+		enableTabspot &&
+			getTabspotAttributes({
+				root: { manageSpecialKeys: { Home: true, End: true, PageUp: true, PageDown: true } },
+				mover: { layout: 'grid', rows: { by: 'parent' }, items: TABSPOT_ITEMS, skip: TABSPOT_SKIP }
+			})
+	);
+
+	/**
+	 * Tabspot navigates the DOM, and a windowed list only renders a slice of it. The adapter is what
+	 * lets a move aim at a row that is not there yet: it scrolls the row in, then waits for Svelte to
+	 * flush before looking for it.
+	 */
+	$effect(() => {
+		if (!enableTabspot || !virtualizer || !ref) return;
+		return tabspotVirtual(ref as HTMLElement, {
+			scrollToIndex: (index) => virtualizer.scrollToIndex?.(index),
+			count: () => virtualizer.size,
+			tick
+		});
+	});
+</script>
+
+<!--
+	@component
+	A table displays sets of two dimensional data. Every part is a primitive, so sorting and
+	selection stay the responsibility of the consumer.
+
+	- Usage:
+	```tsx
+	<script>
+		import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from 'fluentui-svelte';
+	</script>
+
+	<Table aria-label="Files">
+		<TableHeader>
+			<TableRow>
+				<TableHeaderCell>File</TableHeaderCell>
+			</TableRow>
+		</TableHeader>
+		<TableBody>
+			<TableRow>
+				<TableCell>Meeting notes</TableCell>
+			</TableRow>
+		</TableBody>
+	</Table>
+	```
+-->
+<svelte:element
+	this={_as}
+	bind:this={ref as TableDOM[Tag]}
+	role={enableTabspot ? 'grid' : _as === 'div' ? 'table' : undefined}
+	class={[
+		'fs-table',
+		size,
+		{ flex: _as === 'div', 'no-row-borders': noRowBorders, resizable: resizableColumns },
+		classes
+	]}
+	{...tabspotAttributes}
+	{...attributes}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.fs-table {
+		width: 100%;
+		border-collapse: collapse;
+		text-align: left;
+		color: var(--fs-text-primary);
+		font-family: var(--fs-font-family-base);
+		font-size: var(--fs-body2-font-size);
+		line-height: var(--fs-body2-line-height);
+		/* Every part reads these, so a size change ripples out of the root alone. */
+		--fs-table-row-height: 2.75rem;
+		--fs-table-cell-padding: 0.5rem;
+		--fs-table-row-border: 1px solid var(--fs-divider-stroke-default);
+		&.no-row-borders {
+			--fs-table-row-border: none;
+		}
+		/*
+		 * The auto algorithm re-measures every column from its content, which undoes a drag. A fixed
+		 * table also has to size to the sum of its columns: a percentage width inside a shrink-to-fit
+		 * container is circular, and the browser resolves that circle into a runaway width.
+		 */
+		&.resizable {
+			table-layout: fixed;
+			width: max-content;
+			max-width: 100%;
+		}
+		&.small {
+			--fs-table-row-height: 2.125rem;
+		}
+		&.extra-small {
+			--fs-table-row-height: 1.5rem;
+			--fs-table-cell-padding: 0.375rem;
+			font-size: var(--fs-caption-font-size);
+			line-height: var(--fs-caption-line-height);
+		}
+		/* A `div` table has no table layout to lean on, so the rows stack and the cells flex. */
+		&.flex {
+			display: flex;
+			flex-direction: column;
+		}
+	}
+</style>

package/dist/components/table/table.svelte.d.ts

@@ -0,0 +1,49 @@
+import type { TableProps } from './types.ts';
+declare function $$render<Tag extends 'table' | 'div' = 'table'>(): {
+    props: TableProps<Tag>;
+    exports: {};
+    bindings: "ref" | "columnWidths";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Tag extends 'table' | 'div' = 'table'> {
+    props(): ReturnType<typeof $$render<Tag>>['props'];
+    events(): ReturnType<typeof $$render<Tag>>['events'];
+    slots(): ReturnType<typeof $$render<Tag>>['slots'];
+    bindings(): "ref" | "columnWidths";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Tag extends 'table' | 'div' = 'table'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Tag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Tag>['props']>, ReturnType<__sveltets_Render<Tag>['events']>, ReturnType<__sveltets_Render<Tag>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Tag>['bindings']>;
+    } & ReturnType<__sveltets_Render<Tag>['exports']>;
+    <Tag extends 'table' | 'div' = 'table'>(internal: unknown, props: ReturnType<__sveltets_Render<Tag>['props']> & {}): ReturnType<__sveltets_Render<Tag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A table displays sets of two dimensional data. Every part is a primitive, so sorting and
+ * selection stay the responsibility of the consumer.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ * 	import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from 'fluentui-svelte';
+ * </script>
+ *
+ * <Table aria-label="Files">
+ * 	<TableHeader>
+ * 		<TableRow>
+ * 			<TableHeaderCell>File</TableHeaderCell>
+ * 		</TableRow>
+ * 	</TableHeader>
+ * 	<TableBody>
+ * 		<TableRow>
+ * 			<TableCell>Meeting notes</TableCell>
+ * 		</TableRow>
+ * 	</TableBody>
+ * </Table>
+ * ```
+ */
+declare const Table: $$IsomorphicComponent;
+type Table<Tag extends 'table' | 'div' = 'table'> = InstanceType<typeof Table<Tag>>;
+export default Table;

package/dist/components/table/table.svelte.js

@@ -0,0 +1,138 @@
+import { PREFIX } from '../../internal/constants.js';
+import { createFSContext } from '../../internal/index.js';
+import { on } from 'svelte/events';
+export const COMPONENT_NAME = `${PREFIX}-table-`;
+export const [getTableContext, setTableContext] = createFSContext();
+/** The cells a grid mover lands on. Every kind of cell takes a turn, header and selection included. */
+export const TABSPOT_ITEMS = '.fs-table-header-cell, .fs-table-cell, .fs-table-selection-cell';
+/** Cells the cursor passes over instead of landing on, which is what `focusMode: 'none'` asks for. */
+export const TABSPOT_SKIP = '[data-fs-focus-mode="none"]';
+/**
+ * Everything that would answer the Tab key on its own. A disabled control takes no focus, so
+ * holding it would be pointless and entering the cell would land on something that cannot be left.
+ */
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex], [contenteditable="true"]';
+/** Controls that spend `Space` themselves, so a row must not take it from under them. */
+const SPACE_CONSUMERS = 'a[href], button, input, select, textarea, [contenteditable="true"]';
+/**
+ * `Space` activates a row or a cell the consumer wired, the same way a pointer click does. The grid
+ * pattern asks for it: the arrow keys park the focus on a cell, and a cell answers no key by itself.
+ *
+ * Only a wired element claims the key — anywhere else `Space` stays the page scroll it always was.
+ */
+export const selectOnSpace = (node) => {
+    const onkeydown = (e) => {
+        if (e.key !== ' ' || e.defaultPrevented)
+            return;
+        if (e.target.closest(SPACE_CONSUMERS))
+            return;
+        e.preventDefault();
+        node.click();
+    };
+    return on(node, 'keydown', onkeydown);
+};
+/**
+ * Resolves which column a cell sits in. A cell is always a direct child of its row, so its position
+ * among its siblings is the column — nothing else in the markup knows it.
+ *
+ * Tabspot reads the attribute to find a cell again once a virtualized row has remounted, and the
+ * reported index is what lets a cell look its own width up.
+ */
+export const colIndex = (report) => (node) => {
+    const parent = node.parentElement;
+    if (!parent)
+        return;
+    const index = [...parent.children].indexOf(node);
+    node.dataset.colindex = String(index);
+    report?.(index);
+};
+/**
+ * `focusMode: 'group'`. The focusable content of a cell is held out of the tab order until the user
+ * asks for it: `Enter` steps in, `Escape` steps back out to the cell itself.
+ *
+ * Without it every button in every row is its own tab stop, which is exactly what the single tab
+ * stop of a grid exists to avoid. Tabspot cannot express this on its own — its grouper is driven by
+ * a direction, and a grid has already spent all four arrows — so the two keys are handled here.
+ */
+export const focusGroup = (node) => {
+    /**
+     * The tabindex a held element carried before is parked on the element itself, so releasing
+     * restores it rather than guessing, and a row that remounts takes its own bookkeeping with it.
+     */
+    const hold = () => {
+        for (const el of node.querySelectorAll(FOCUSABLE)) {
+            if (el.dataset.fsHeldTabindex !== undefined)
+                continue;
+            el.dataset.fsHeldTabindex = el.getAttribute('tabindex') ?? '';
+            el.setAttribute('tabindex', '-1');
+        }
+    };
+    const release = () => {
+        for (const el of node.querySelectorAll('[data-fs-held-tabindex]')) {
+            const previous = el.dataset.fsHeldTabindex;
+            if (previous)
+                el.setAttribute('tabindex', previous);
+            else
+                el.removeAttribute('tabindex');
+            delete el.dataset.fsHeldTabindex;
+        }
+    };
+    const onkeydown = (e) => {
+        if (e.key === 'Enter' && e.target === node) {
+            release();
+            const first = node.querySelector(FOCUSABLE);
+            if (!first)
+                return hold();
+            e.preventDefault();
+            first.focus();
+        }
+        else if (e.key === 'Escape' && e.target !== node) {
+            // The root would otherwise read the same Escape as "leave the table".
+            e.preventDefault();
+            e.stopPropagation();
+            hold();
+            node.focus();
+        }
+    };
+    /** Focus moving out of the cell ends the visit, however it left. */
+    const onfocusout = (e) => {
+        if (!node.contains(e.relatedTarget))
+            hold();
+    };
+    hold();
+    // Content that arrives later — a menu opening, a row re-rendering — has to be held too.
+    const observer = new MutationObserver(() => {
+        // The node's own document, so a table inside an iframe reads the focus that belongs to it.
+        if (!node.contains(node.ownerDocument.activeElement))
+            hold();
+    });
+    observer.observe(node, { childList: true, subtree: true });
+    const offKeydown = on(node, 'keydown', onkeydown);
+    const offFocusout = on(node, 'focusout', onfocusout);
+    return () => {
+        observer.disconnect();
+        offKeydown();
+        offFocusout();
+        release();
+    };
+};
+/**
+ * The element a table part renders. An explicit `as` wins, otherwise the part falls back to its
+ * semantic tag, or to a `div` when the table opted out of native elements.
+ *
+ * Every part accepts exactly its semantic tag or a `div`, so the invariant is checked here rather
+ * than against a list each caller would have to carry.
+ */
+export const getTag = (as, native, noNativeElements) => {
+    const tag = as ?? (noNativeElements ? 'div' : native);
+    if (tag !== native && tag !== 'div')
+        throw new Error(`Invalid tag: ${tag}. Must be one of ${native}, div`);
+    return tag;
+};
+/** Reads the table context, or fails loudly when a part is rendered outside a `Table`. */
+export const requireTableContext = () => {
+    const context = getTableContext();
+    if (!context)
+        throw new Error(`No TableContext found for ${COMPONENT_NAME}.`);
+    return context;
+};