fluentui-svelte 0.5.0 → 0.7.0

package/dist/components/list-view/list-view-item-branch.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+	import ChevronDownRegular from 'fluentui-icons-svelte/ChevronDownRegular.svelte';
+	import { getTabspotAttributes, type TabspotNavigationEvent, type TabspotNodeOptions } from 'tabspot';
+	import { getGlobalFSContext } from '../../providers/fluentui-svelte/fluentui-svelte.js';
+	import { invokeHandlers, RenderSoC } from '../../internal/index.js';
+	import {
+		attachTabspot,
+		getListViewContext,
+		getListViewItemContext,
+		LIST_VIEW_SKIP,
+		setListViewItemContext
+	} from './utils.js';
+	import type { ListViewItemBranchProps } from './types.js';
+
+	const ID = $props.id();
+	const REGION_ID = `fs-list-view-branch-${ID}`;
+	const parent = getListViewContext();
+	const owner = getListViewItemContext();
+	const globalContext = getGlobalFSContext();
+	if (!parent) throw new Error('ListViewItemBranch must be used within a ListView');
+	const context = parent;
+
+	let {
+		label,
+		icon,
+		expanded = $bindable(false),
+		disabled = false,
+		shape,
+		ref = $bindable(null),
+		wrapperRef = $bindable(null),
+		wrapperAttributes,
+		class: classes,
+		onclick,
+		onkeydown,
+		onExpandedChange,
+		children,
+		...attributes
+	}: ListViewItemBranchProps = $props();
+
+	let regionRef: HTMLDivElement | undefined;
+
+	const wrapperTag = $derived.by(() => {
+		if (context.config.role !== undefined && context.config.role !== 'list') {
+			throw new Error('ListViewItemBranch requires a native list. Set role="list" on selectable navigation lists.');
+		}
+		if (owner?.as === 'a' || owner?.as === 'button') {
+			throw new Error('ListViewItemBranch must be outside links and buttons.');
+		}
+		return context.config.as === 'div' ? 'div' : 'li';
+	});
+
+	setListViewItemContext({
+		get as() {
+			return wrapperTag;
+		}
+	});
+
+	const tabspotConfig: TabspotNodeOptions | undefined = $derived(
+		context.config.disableTabspot
+			? undefined
+			: {
+					mover: {
+						axis: 'vertical',
+						items: '.fs-list-view-item-branch-trigger',
+						visibilityAware: 'Visible',
+						skip: LIST_VIEW_SKIP,
+						ignoreKeys: expanded ? ['ArrowLeft'] : ['ArrowRight']
+					}
+				}
+	);
+
+	const tabspotAttributes = $derived(tabspotConfig && getTabspotAttributes(tabspotConfig));
+
+	const canceledKeys = new WeakSet<KeyboardEvent>();
+
+	function changeExpanded(event: Event, next: boolean) {
+		if (disabled || expanded === next) return;
+		expanded = next;
+		onExpandedChange?.(event, expanded);
+	}
+
+	// Tabspot prevents Escape before native handlers. Record further cancellation by the consumer.
+	function trackCancellation(event: KeyboardEvent, run: () => void) {
+		const preventDefault = event.preventDefault;
+		event.preventDefault = () => {
+			canceledKeys.add(event);
+			preventDefault.call(event);
+		};
+		try {
+			run();
+		} finally {
+			event.preventDefault = preventDefault;
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (onkeydown) trackCancellation(event, () => invokeHandlers(event, disabled, [onkeydown]));
+		if (event.defaultPrevented || disabled) return;
+		if (context.config.disableTabspot && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) return;
+		if ((event.key === 'ArrowRight' && !expanded) || (event.key === 'ArrowLeft' && expanded)) {
+			event.preventDefault();
+			changeExpanded(event, !expanded);
+		}
+	}
+
+	function handleEscape(event: KeyboardEvent) {
+		if (
+			!expanded ||
+			event.key !== 'Escape' ||
+			(event.target as Element).closest('.fs-list-view-item-branch') !== wrapperRef
+		)
+			return;
+		if (disabled || canceledKeys.has(event) || (context.config.disableTabspot && event.defaultPrevented)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		changeExpanded(event, false);
+		ref?.focus();
+	}
+
+	function guardEscape(event: TabspotNavigationEvent) {
+		if (expanded && event.direction === 'escape' && event.from?.closest('.fs-list-view-item-branch') === wrapperRef)
+			event.preventDefault();
+	}
+
+	function restoreFocusBeforeCollapse() {
+		if (!expanded && regionRef?.contains(document.activeElement)) ref?.focus();
+	}
+
+	$effect.pre(restoreFocusBeforeCollapse);
+</script>
+
+<svelte:element
+	this={wrapperTag}
+	role={wrapperTag === 'div' ? 'listitem' : undefined}
+	{...wrapperAttributes}
+	bind:this={wrapperRef}
+	class={['fs-list-view-item-branch', wrapperAttributes?.class]}
+	onkeydown={(event: KeyboardEvent) => {
+		const wrapperKeydown = wrapperAttributes?.onkeydown;
+		if (typeof wrapperKeydown === 'function')
+			trackCancellation(event, () => invokeHandlers(event, [], [wrapperKeydown]));
+		handleEscape(event);
+	}}
+	{...tabspotAttributes}
+	{@attach attachTabspot(tabspotConfig, guardEscape, globalContext?.state.tabspotInstance)}
+>
+	<button
+		{...attributes}
+		class={['fs-list-view-item-branch-trigger', shape ?? context.config.shape, classes]}
+		{@attach (element) => {
+			ref = element;
+			return () => {
+				ref = null;
+			};
+		}}
+		type="button"
+		role={undefined}
+		{disabled}
+		aria-expanded={expanded}
+		aria-controls={REGION_ID}
+		onclick={(event) => {
+			invokeHandlers(event, disabled, [onclick]);
+			if (!event.defaultPrevented) changeExpanded(event, !expanded);
+		}}
+		onkeydown={handleKeydown}
+	>
+		{#if icon}
+			<span class="branch-icon" aria-hidden="true">
+				<RenderSoC SoC={icon} />
+			</span>
+		{/if}
+		<span class="fs-list-view-branch-label">{label}</span>
+		<ChevronDownRegular aria-hidden="true" width="1rem" height="1rem" class={['branch-chevron', { expanded }]} />
+	</button>
+	<div
+		id={REGION_ID}
+		{@attach (element) => {
+			regionRef = element;
+			return () => {
+				regionRef = undefined;
+			};
+		}}
+		class="fs-list-view-item-branch-region"
+		hidden={!expanded}
+	>
+		{@render children?.()}
+	</div>
+</svelte:element>
+
+<style>
+	.fs-list-view-item-branch {
+		list-style: none;
+	}
+	.fs-list-view-item-branch-trigger {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		margin: 0.3rem 0;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 0.275rem 0.713rem 0.4rem;
+		border: none;
+		border-radius: var(--fs-control-border-radius);
+		font: inherit;
+		font-size: var(--fs-body2-font-size);
+		text-align: start;
+		color: var(--fs-text-primary);
+		background: var(--fs-subtle-fill-transparent);
+		cursor: pointer;
+		&:hover:not(:disabled) {
+			background: var(--fs-subtle-fill-secondary);
+		}
+		&:active:not(:disabled) {
+			background: var(--fs-subtle-fill-tertiary);
+		}
+		&:focus-visible {
+			outline: 0.125rem solid var(--fs-focus-stroke-outer);
+			outline-offset: 0.063rem;
+		}
+		&:disabled {
+			color: var(--fs-text-disabled);
+			cursor: not-allowed;
+		}
+		&.square {
+			border-radius: 0;
+		}
+		&.circular {
+			border-radius: 50vw;
+		}
+		& :global(.branch-chevron) {
+			flex-shrink: 0;
+			margin-inline-start: auto;
+			font-size: 1rem;
+		}
+		& :global(.branch-chevron.expanded) {
+			rotate: 180deg;
+		}
+	}
+	.branch-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: none;
+		inline-size: 1rem;
+		/* As tall as a line of text, so a branch is as tall with its label as without it. */
+		block-size: 1lh;
+		& :global(svg) {
+			inline-size: 1rem;
+			block-size: 1rem;
+		}
+	}
+	.fs-list-view-item-branch-region > :global(.fs-list-view) {
+		padding-inline-start: 1rem;
+		box-sizing: border-box;
+	}
+</style>

package/dist/components/list-view/list-view-item-branch.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ListViewItemBranchProps } from './types.ts';
+declare const ListViewItemBranch: import("svelte").Component<ListViewItemBranchProps, {}, "ref" | "wrapperRef" | "expanded">;
+type ListViewItemBranch = ReturnType<typeof ListViewItemBranch>;
+export default ListViewItemBranch;

package/dist/components/list-view/list-view-item.svelte

@@ -1,16 +1,23 @@
-<script lang="ts" generics="T extends 'li' | 'a' | 'div' = 'li'">
+<script lang="ts" generics="T extends 'li' | 'a' | 'button' | 'div' = 'li'">
 	import { onMount } from 'svelte';
-	import { COMPONENT_NAME, getListViewContext, ITEM_TAG } from './utils.js';
+	import {
+		attachTabspot,
+		COMPONENT_NAME,
+		getListViewContext,
+		ITEM_TAG,
+		LIST_VIEW_SKIP,
+		setListViewItemContext
+	} from './utils.js';
 	import Checkbox from '../checkbox/checkbox.svelte';
 	import { invokeHandlers, isObjectEmpty } from '../../internal/index.js';
 	import type { ListViewItemProps, ListViewItemDOM } from './types.js';
-	import { getTabspotAttributes } from 'tabspot';
+	import { getTabspotAttributes, type TabspotNodeOptions } from 'tabspot';
 
 	const ID = $props.id();
 
 	let {
 		as = 'li' as T,
-		ref = $bindable(),
+		ref = $bindable(null),
 		shape,
 		disabled,
 		active: _active,
@@ -20,6 +27,8 @@
 		class: classes,
 		onAction,
 		onfocus,
+		onclick,
+		onkeydown,
 		children,
 		...attributes
 	}: ListViewItemProps<T> = $props();
@@ -30,6 +39,9 @@
 	 */
 	const _as = $derived.by(() => {
 		if (!ITEM_TAG.includes(as)) throw new Error(`Invalid tag: ${as}. Must be one of ${ITEM_TAG.join(', ')}`);
+		if (as === 'button' && (checkmark || role === 'row')) {
+			throw new Error('ListViewItem buttons cannot contain checkmarks or composite row controls. Use li or div.');
+		}
 		return as;
 	});
 
@@ -41,75 +53,176 @@
 	const { state: _state } = CONTEXT;
 	const { handleSelection, registerItem, unregisterItem, getChildrenRole } = CONTEXT.methods;
 	const role = $derived(_role || getChildrenRole(as));
+	const wrapped = $derived((as === 'a' || as === 'button') && CONTEXT.config.as !== 'div');
+	const nativeAction = $derived(as === 'a' || as === 'button');
+	const interactive = $derived(
+		nativeAction || !!_role || CONTEXT.config.selectionMode !== 'none' || !!onAction || !!onclick
+	);
+	const tabspotDisabled = $derived(CONTEXT.config.disableTabspot);
+	setListViewItemContext({
+		get as() {
+			return as;
+		}
+	});
 
 	let active = $derived(_state.selectedItems.includes(value));
-	let checkmarkRef = $state<HTMLDivElement>();
+	let checkmarkRef = $state<HTMLDivElement | null>(null);
 
-	// A row is a level of its own: right enters the cells, left comes back out. Anything
-	// that is not a row navigates as a plain item of the list above it.
-	const tabspotAttrs = $derived(
-		(role === 'row'
-			? getTabspotAttributes({
+	// A grid cell contains the secondary controls, independently of the primary row action.
+	const cellConfig: TabspotNodeOptions | undefined = $derived(
+		role === 'row' && !tabspotDisabled
+			? {
+					// Checkbox inputs are transparent while their visible wrappers supply the focus ring.
 					mover: {
-						axis: 'vertical'
+						axis: 'horizontal',
+						skip: LIST_VIEW_SKIP
 					},
 					grouper: { enterDirection: 'right', exitDirection: 'left' }
-				})
-			: null) ?? {}
+				}
+			: undefined
+	);
+	const cellAttrs = $derived(cellConfig && getTabspotAttributes(cellConfig));
+	// A roving list has one tab stop. Tabspot sets it on mount, so the server HTML gives it to the first item, as Tabspot will.
+	// svelte-ignore state_referenced_locally
+	const holdsTabStop = !CONTEXT.config.roving || (interactive && !disabled && CONTEXT.methods.claimTabStop(ID));
+	const focusAttributes = $derived(
+		nativeAction
+			? disabled && as === 'a'
+				? { tabindex: -1 }
+				: {}
+			: interactive && !tabspotDisabled
+				? { tabindex: disabled || !holdsTabStop ? -1 : 0 }
+				: {}
 	);
 
+	function handleClick(e: MouseEvent) {
+		const target = e.target instanceof Element ? e.target : null;
+		if (target?.closest('.fs-list-view-item') !== e.currentTarget) return;
+		const fromCheckmark = !!checkmarkRef?.contains(target);
+		const control = target?.closest(
+			'a, button, input, select, textarea, [contenteditable="true"], [role="button"], [role="link"]'
+		);
+		if (!fromCheckmark && control && control !== e.currentTarget) return;
+		invokeHandlers(e, disabled, [
+			onclick,
+			(role !== 'row' || fromCheckmark) && ((event: MouseEvent) => handleSelection(event, value, fromCheckmark)),
+			!fromCheckmark && ((event: MouseEvent) => onAction?.(event, value))
+		]);
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		invokeHandlers(e, disabled, [onkeydown]);
+		if (e.defaultPrevented || nativeAction || e.target !== e.currentTarget || !['Enter', ' '].includes(e.key)) return;
+		e.preventDefault();
+		(e.currentTarget as HTMLElement).dispatchEvent(
+			new MouseEvent('click', {
+				bubbles: true,
+				ctrlKey: e.ctrlKey,
+				metaKey: e.metaKey,
+				shiftKey: e.shiftKey
+			})
+		);
+	}
+
 	onMount(() => {
-		registerItem?.(ID, value as string, !!disabled);
-		return () => unregisterItem?.(ID);
+		registerItem(ID, () => ({ value, disabled: !!disabled, element: ref ?? null }));
+		return () => unregisterItem(ID);
 	});
 </script>
 
-<svelte:element
-	this={_as}
-	{role}
-	data-value={value}
-	aria-selected={role === 'option' ? active : undefined}
-	aria-disabled={disabled || undefined}
-	bind:this={ref as ListViewItemDOM[T]}
-	class={[
-		'fs-list-view-item',
-		shape ? shape : _shape,
-		classes,
-		{ disabled },
-		role !== 'row' && 'indicator',
-		(_active || active) && 'active',
-		!disabled && role && 'interactive'
-	]}
-	{...tabspotAttrs}
-	onfocus={(e: FocusEvent) => invokeHandlers(e, disabled, [(event: FocusEvent) => onfocus?.(event, value || '')])}
-	onclick={(e: MouseEvent) => {
-		// The checkmark only toggles the selection, even on a row. The primary action is for the rest of the item.
-		const fromCheckmark = !!checkmarkRef?.contains(e.target as Node);
-		invokeHandlers(e, disabled, [
-			(role !== 'row' || fromCheckmark) && ((event: MouseEvent) => handleSelection?.(event, value, fromCheckmark)),
-			!fromCheckmark && ((event: MouseEvent) => onAction?.(event, value || ''))
-		]);
-	}}
-	{...attributes}
->
+{#snippet content()}
 	{#if checkmark}
 		<Checkbox
+			{...!isObjectEmpty(checkmark) ? checkmark : {}}
 			{disabled}
 			bind:checked={active}
 			bind:wrapperRef={checkmarkRef}
-			tabindex={-1}
-			{...!isObjectEmpty(checkmark) ? checkmark : {}}
+			tabindex={tabspotDisabled ? undefined : -1}
+			aria-label={checkmark?.['aria-label'] ?? attributes['aria-label'] ?? value}
+			inert={role === 'option' || undefined}
 		/>
 	{/if}
 	{@render children?.()}
-</svelte:element>
+{/snippet}
+
+{#snippet item()}
+	<svelte:element
+		this={_as}
+		{...attributes}
+		role={wrapped || (nativeAction && role === 'listitem') ? undefined : role}
+		type={as === 'button' ? 'button' : undefined}
+		disabled={as === 'button' ? disabled : undefined}
+		data-value={value}
+		data-list-view-interactive={interactive || undefined}
+		aria-selected={!wrapped && (role === 'option' || role === 'row') ? active : undefined}
+		aria-current={role !== 'option' && role !== 'row' && (_active || active) ? 'true' : undefined}
+		aria-disabled={disabled || undefined}
+		bind:this={ref as ListViewItemDOM[T]}
+		class={[
+			'fs-list-view-item',
+			shape ? shape : _shape,
+			classes,
+			{ disabled },
+			role !== 'row' && 'indicator',
+			(_active || active) && 'active',
+			!disabled && interactive && 'interactive'
+		]}
+		{...focusAttributes}
+		onfocus={(e: FocusEvent) => {
+			if (e.target === e.currentTarget) invokeHandlers(e, disabled, [() => onfocus?.(e, value)]);
+		}}
+		onclick={handleClick}
+		onkeydown={handleKeydown}
+	>
+		{#if role === 'row'}
+			<div role="gridcell" {...cellAttrs} {@attach attachTabspot(cellConfig)}>
+				{@render content()}
+			</div>
+		{:else}
+			{@render content()}
+		{/if}
+	</svelte:element>
+{/snippet}
+
+{#if wrapped}
+	<li {role} aria-selected={role === 'option' || role === 'row' ? active : undefined} class="fs-list-view-item-wrapper">
+		{@render item()}
+	</li>
+{:else}
+	{@render item()}
+{/if}
 
 <style>
+	.fs-list-view-item-wrapper {
+		list-style: none;
+		& > :global(.fs-list-view-item) {
+			width: 100%;
+			box-sizing: border-box;
+			text-align: start;
+		}
+	}
+	.fs-list-view-item-wrapper,
+	.fs-list-view-item:has(> :global(.fs-list-view)) {
+		& > :global(.fs-list-view) {
+			padding-inline-start: 1rem;
+			box-sizing: border-box;
+		}
+	}
+	.fs-list-view-item:has(> :global(.fs-list-view)) {
+		display: block;
+	}
+	[role='gridcell'] {
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+		width: 100%;
+	}
 	.fs-list-view-item {
 		border-radius: var(--fs-control-border-radius);
 		font-size: var(--fs-body2-font-size);
 		color: var(--fs-text-primary);
 		border: none;
+		background: var(--fs-subtle-fill-transparent);
 		padding: 0.275rem 0.713rem 0.4rem 0.713rem;
 		position: relative;
 		outline: none;
@@ -174,4 +287,9 @@
 			border-radius: 50vw;
 		}
 	}
+	@media (prefers-reduced-motion: reduce) {
+		.fs-list-view-item.interactive.indicator.active::after {
+			transition: none;
+		}
+	}
 </style>

package/dist/components/list-view/list-view-item.svelte.d.ts

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