1.1.1

- stacked/nested dialogs work properly
- dialog api expanded to include `hasError` and `focus`
- `onopenchange` prop added, `onopen` and `onclose` deprecated
- improve accessibility with additional aria props

package.json

@@ -4,7 +4,7 @@
 		"type": "git",
 		"url": "https://gitea.auvem.com/svelte-toolkit/sui.git"
 	},
-	"version": "1.0.4",
+	"version": "1.1.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run prepack",

src/lib/Combobox.svelte

@@ -52,6 +52,7 @@
 	import { Tween } from 'svelte/motion';
 	import { cubicOut } from 'svelte/easing';
 	import type { Attachment } from 'svelte/attachments';
+	import { Popover } from './floating.svelte';
 
 	interface Props {
 		/**
@@ -217,6 +218,38 @@
 	const id = $derived(generateIdentifier('combobox', name));
 	const searchKeySet = $derived(new Set(searchKeys));
 	const conditionalUse = $derived(use ? use : () => {});
+	const popover = new Popover({
+		interaction: 'manual',
+		placement: 'bottom-start',
+		offset: 0,
+		ontoggle: async (isOpen) => {
+			open = isOpen;
+
+			if (isOpen) {
+				scrollToHighlighted();
+
+				// focus & select search input after 100ms
+				setTimeout(() => {
+					searchInput?.focus();
+					searchInput?.select();
+				}, 100);
+
+				// handle lazy loading behaviour
+				if (lazy === 'always' || (lazy === true && !lazyApplied)) {
+					lazyApplied = true;
+					loading = true;
+					await onlazy?.();
+					loading = false;
+				}
+			} else {
+				searchValue = ''; // clear search value for next time picker opens
+				searching = false; // reset searching state
+				highlighted = value; // reset highlighted item to current value
+			}
+
+			onopenchange?.(isOpen);
+		}
+	});
 
 	let valid = $state(true);
 	let searchValue = $state('');
@@ -227,8 +260,6 @@
 	let searchContainer = $state<HTMLDivElement | null>(null);
 	let pickerContainer = $state<HTMLDivElement | null>(null);
 
-	// TODO: there's something weird with dropdown placement on narrow screens
-
 	/** options filtered by search value and searchKeys */
 	const filteredItems = $derived.by(() => {
 		let keys: KeyOption<ComboboxOption>[] = [];
@@ -327,35 +358,11 @@
 	};
 
 	let lazyApplied = false;
-	/** opens combobox picker and propagates any necessary events */
-	const openPicker = async () => {
-		open = true;
-
-		updatePickerRect(); // update picker position
-		scrollToHighlighted(); // scroll to highlighted item
-		onopenchange?.(true); // trigger onopenchange event if defined
-
-		// handle lazy loading behaviour
-		if (lazy === 'always' || (lazy === true && !lazyApplied)) {
-			lazyApplied = true;
-			loading = true;
-			await onlazy?.();
-			loading = false;
-		}
-	};
-	/** closes combobox picker and propagates any necessary events */
-	const closePicker = () => {
-		open = false;
-		searchValue = ''; // clear search value for next time picker opens
-		searching = false; // reset searching state
-		highlighted = value; // reset highlighted item to current value
-		onopenchange?.(false); // trigger onopenchange event if defined
-	};
 
 	/** updates the value of the combobox and triggers any callbacks, including closing the picker */
 	const updateValue = (newValue: ComboboxOption) => {
 		if (!stateless) value = newValue;
-		closePicker();
+		popover.setOpen(false);
 		onchange?.(newValue);
 	};
 
@@ -397,7 +404,6 @@
 			if ((opts.mode === 'match' || opts.options.length === 0) && opts.matchElem) {
 				// match width if explicitly enabled, or no options to average
 				elem.style.width = opts.matchElem.offsetWidth + 'px';
-				console.log('matched', elem.style.width, 'to', opts.matchElem.offsetWidth);
 			} else {
 				// otherwise, set width based on average content width
 				let val = '10ch';
@@ -410,53 +416,10 @@
 					}
 				}
 				elem.style.width = val;
-				console.log('averaged', val);
 			}
 		};
 	};
 
-	/** updates the position of the picker */
-	const updatePickerRect = async () => {
-		if (!searchContainer || !pickerContainer) {
-			await tick();
-			if (!searchContainer || !pickerContainer) {
-				return;
-			}
-		}
-
-		const overlay = pickerContainer;
-		const target = searchContainer;
-		const targetRect = target.getBoundingClientRect();
-
-		if (!open) {
-			return;
-		}
-
-		// choose whether the overlay should be above or below the target
-		const availableSpaceBelow = window.innerHeight - targetRect.bottom;
-		const availableSpaceAbove = targetRect.top;
-		const outerMargin = 24;
-
-		if (availableSpaceBelow < availableSpaceAbove) {
-			// overlay should be above the target
-			overlay.style.bottom = `${window.innerHeight - targetRect.top - window.scrollY}px`;
-			overlay.style.top = 'auto';
-			overlay.style.maxHeight = `${availableSpaceAbove - outerMargin}px`;
-			pickerPosition = 'top';
-			overlay.dataset.side = 'top';
-		} else {
-			// overlay should be below the target
-			overlay.style.top = `${targetRect.bottom + window.scrollY}px`;
-			overlay.style.bottom = 'auto';
-			overlay.style.maxHeight = `${availableSpaceBelow - outerMargin}px`;
-			pickerPosition = 'bottom';
-			overlay.dataset.side = 'bottom';
-		}
-
-		// set overlay left position
-		overlay.style.left = `${targetRect.left}px`;
-	};
-
 	/** scrolls the picker to the highlighted item */
 	const scrollToHighlighted = () => {
 		if (!pickerContainer || !highlighted) return;
@@ -524,30 +487,19 @@
 
 	// close picker if clicked outside
 	const handleWindowClick: MouseEventHandler<Window> = (e) => {
-		if (!searchContainer || !pickerContainer) {
+		if (!open || !searchContainer || !pickerContainer) return;
-			return;
-		}
 
 		if (
-			!open ||
+			e.target instanceof Node &&
-			searchContainer.contains(e.target as Node) ||
+			!searchContainer.contains(e.target) &&
-			pickerContainer.contains(e.target as Node)
+			!pickerContainer.contains(e.target)
 		) {
-			return;
+			popover.setOpen(false);
 		}
-
-		closePicker();
 	};
-
-	onMount(() => {
-		// set initial picker position after load
-		setTimeout(() => {
-			updatePickerRect();
-		}, 500);
-	});
 </script>
 
-<svelte:window onresize={updatePickerRect} onclick={handleWindowClick} />
+<svelte:window onclick={handleWindowClick} />
 
 <!-- Combobox picker -->
 <Portal target="body">
@@ -567,7 +519,7 @@
 			role="listbox"
 			onkeydown={(e) => {
 				if (e.key === 'Escape') {
-					closePicker();
+					popover.setOpen(false);
 					searchInput?.focus();
 				}
 			}}
@@ -583,6 +535,7 @@
 			}}
 			tabindex="0"
 			{@attach minWidth({ options, mode: pickerWidth, matchElem: searchInput })}
+			{...popover.floating()}
 		>
 			{#each filteredItems as opt (opt.value)}
 				{@render option(opt)}
@@ -691,7 +644,7 @@
 
 <!-- Search input box -->
 {#snippet searchInputBox(caret: boolean = true)}
-	<div class="relative">
+	<div class="relative" {...popover.reference()}>
 		<!-- Persistant OR selected option icon, if visible -->
 		{#if iconVisible}
 			<div
@@ -731,13 +684,7 @@
 			autocomplete="off"
 			bind:ref={searchInput}
 			onclick={() => {
-				if (!open) {
+				popover.setOpen(true);
-					setTimeout(() => {
-						searchInput?.select();
-					}, 100);
-				}
-
-				openPicker();
 			}}
 			onkeydown={(e) => {
 				if (!searchInput) return;
@@ -747,17 +694,17 @@
 						updateValue(highlighted);
 					}
 					if (e.key === 'Enter') {
-						closePicker();
+						popover.setOpen(false);
 						e.preventDefault();
 					}
 					return;
 				} else if (e.key === 'Escape') {
-					closePicker();
+					popover.setOpen(false);
 					return;
 				}
 
 				// open the picker
-				openPicker();
+				popover.setOpen(true);
 
 				if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
 					searching = false;
@@ -804,8 +751,7 @@
 			<CaretUpDown
 				class="absolute end-2.5 top-1/2 size-6 -translate-y-1/2"
 				onclick={() => {
-					open = !open;
+					popover.setOpen(!open);
-					if (open) searchInput?.focus();
 				}}
 			/>
 		{/if}

src/lib/Dialog.svelte

@@ -5,6 +5,8 @@
 	export interface DialogAPI {
 		/** shows an error message at the top of the dialog */
 		error: (message: RawError | null) => void;
+		/** Returns if the dialog is displaying an error */
+		hasError: () => boolean;
 		/** closes the dialog */
 		close: () => void;
 		/** opens the dialog */
@@ -39,6 +41,8 @@
 		 * changes made via this API will NOT propagate to consuming components.
 		 */
 		title: (title: string) => void;
+		/** Focuses the dialog */
+		focus: () => void;
 	}
 
 	type DialogControlButton = {
@@ -79,6 +83,9 @@
 	};
 
 	export { dialogCancelButton, dialogOkButton, dialogCloseButton };
+
+	/** stack of currently open dialogs by identifier */
+	let dialogStack: DialogAPI[] = $state([]);
 </script>
 
 <script lang="ts">
@@ -91,7 +98,7 @@
 	import { X } from 'phosphor-svelte';
 	import { ErrorMessage, type RawError } from './error';
 	import ErrorBox from './ErrorBox.svelte';
-	import { mergeOverrideObject } from './util';
+	import { generateIdentifier, mergeOverrideObject } from './util';
 
 	interface Props {
 		/** Bindable open state of the dialog */
@@ -112,10 +119,18 @@
 		controlsAlign?: 'start' | 'center' | 'end';
 		/** Top-right close control */
 		close?: Snippet | Omit<DialogControlButton, 'label'> | null;
-		/** Callback when the dialog is opened */
+		/**
+		 * Callback when the dialog is opened
+		 * @deprecated use onopenchange instead and check the open parameter
+		 */
 		onopen?: (dialog: DialogAPI) => void;
-		/** Callback when the dialog is closed */
+		/**
+		 * Callback when the dialog is closed
+		 * @deprecated use onopenchange instead and check the open parameter
+		 */
 		onclose?: (dialog: DialogAPI) => void;
+		/** Callback when the dialog open state changes */
+		onopenchange?: ({ open, dialog }: { open: boolean; dialog: DialogAPI }) => void;
 		/** If default controls are used, controls loading state of submit button */
 		loading?: boolean;
 		/** If default controls are used, freezes all interactions */
@@ -136,34 +151,68 @@
 		close = {},
 		onopen,
 		onclose,
+		onopenchange,
 		loading = $bindable(false),
 		frozen = $bindable(false),
 		disabled = $bindable(false)
 	}: Props = $props();
 
-	let controls = $derived(
+	const controls = $derived(
 		typeof rawControls === 'function'
 			? rawControls
 			: mergeOverrideObject(defaultDialogControls, rawControls)
 	);
 
+	const identifier = generateIdentifier('dialog');
+
+	let lastOpen = $state(open);
+	let dialogPage = $state<HTMLDivElement | null>(null);
 	let dialogContainer = $state<HTMLDivElement | null>(null);
 	let error = $state<ErrorMessage | null>(null);
+	let stackIndex = $state(-1);
 
-	// disable window scroll when dialog is open
+	/** handles open change */
-	$effect(() => {
+	const handleOpenChange = (localOpen: boolean) => {
-		if (open) {
+		if (localOpen) {
-			document.body.style.overflow = 'hidden';
+			document.body.style.overflow = 'hidden'; // prevent scrolling
-			untrack(() => onopen?.(dialogAPI));
+			// focus the dialog BEFORE callbacks for accessibility & flexibility
+			dialogPage?.focus();
+			// run callbacks
+			onopen?.(dialogAPI);
+			onopenchange?.({ open: true, dialog: dialogAPI });
+			//update stack
+			dialogStack.push(dialogAPI); // add to stack of open dialogs
+			stackIndex = dialogStack.length - 1; // track index in stack for this dialog
 		} else {
-			document.body.style.overflow = '';
+			// update stack
-			untrack(() => onclose?.(dialogAPI));
+			dialogStack.pop(); // remove from stack of open dialogs
+			stackIndex = -1; // reset stack index for this dialog
+			// update focus & handle scroll locking for accessibility
+			if (dialogStack.length > 0) {
+				dialogStack[dialogStack.length - 1].focus();
+			} else {
+				document.body.style.overflow = ''; // re-enable scrolling since no dialogs are open
+			}
+			// run callbacks
+			onclose?.(dialogAPI);
+			onopenchange?.({ open: false, dialog: dialogAPI });
+		}
+	};
+
+	// deduplicate open changes
+	$effect(() => {
+		if (open !== untrack(() => lastOpen)) {
+			lastOpen = open;
+			untrack(() => {
+				handleOpenChange(open);
+			});
 		}
 	});
 
 	/** DialogAPI instance to control this dialog */
 	export const dialogAPI: DialogAPI = {
 		error: (message) => (error = ErrorMessage.from(message)),
+		hasError: () => error !== null,
 		close: () => (open = false),
 		open: () => (open = true),
 		isOpen: () => open,
@@ -177,7 +226,8 @@
 		unfreeze: () => (frozen = false),
 		isFrozen: () => frozen,
 		canContinue: () => !loading && !disabled && !frozen,
-		title: (newTitle) => (title = newTitle)
+		title: (newTitle) => (title = newTitle),
+		focus: () => dialogPage?.focus()
 	};
 
 	/** Returns the current state of the dialog */
@@ -199,11 +249,14 @@
 
 {#snippet dialog()}
 	<div
+		bind:this={dialogPage}
 		class={[
-			'fixed inset-0 z-50 flex items-center-safe justify-center bg-black/50 backdrop-blur-sm',
+			'fixed inset-0 flex items-center-safe justify-center bg-black/50 backdrop-blur-sm',
 			'overflow-auto p-8',
 			classValue
 		]}
+		style={// increase z-index and decrease opacity for each nested dialog
+		`z-index: ${1000 + stackIndex}`}
 		transition:fade={{ duration: 150 }}
 		onclick={(e) => {
 			const target = e.target as HTMLElement;
@@ -212,10 +265,15 @@
 		}}
 		onkeydown={(e) => {
 			if (e.key === 'Escape' && !frozen) {
+				if (stackIndex === dialogStack.length - 1) {
+					// only close if this dialog is the topmost dialog
 					open = false;
 				}
+			}
 		}}
 		role="dialog"
+		aria-labelledby="{identifier}-title"
+		aria-describedby="{identifier}-description"
 		tabindex="-1"
 	>
 		<div
@@ -235,7 +293,10 @@
 		>
 			<div class="flex items-center justify-between">
 				<!-- Dialog title -->
-				<h2 class="pointer-events-none mb-2 text-lg font-medium text-black select-none">
+				<h2
+					class="pointer-events-none mb-2 text-lg font-medium text-black select-none"
+					id="{identifier}-title"
+				>
 					{@render stringOrSnippet(title)}
 				</h2>
 
@@ -254,7 +315,7 @@
 			{/if}
 
 			{#if description}
-				<p class="mb-3 leading-normal text-zinc-600">
+				<p class="mb-3 leading-normal text-zinc-600" id="{identifier}-description">
 					{@render stringOrSnippet(description)}
 				</p>
 			{/if}

src/routes/+page.svelte

@@ -35,8 +35,7 @@
 	import { createLazyComponent, type ComboboxOption, type Option } from '$lib';
 	import Tabs from '$lib/Tabs.svelte';
 	import { Time } from '@internationalized/date';
-	import { onMount, type Component } from 'svelte';
+	import { onMount } from 'svelte';
-	import ErrorBox from '$lib/ErrorBox.svelte';
 	import TextareaInput from '$lib/TextareaInput.svelte';
 	import DurationInput, { formatDuration } from '$lib/DurationInput.svelte';
 	import Banner from '$lib/Banner.svelte';
@@ -60,6 +59,7 @@
 	let dateInputValue = $state<CalendarDate | null>(null);
 	let checkboxValue = $state<CheckboxState>('indeterminate');
 	let dialogOpen = $state(false);
+	let nestedDialogOpen = $state(false);
 	let scrollableDialogOpen = $state(false);
 	let toggleOptions: Option[] = $state([
 		'item one',
@@ -184,7 +184,7 @@
 			]}
 			onchange={(e) => console.log('Selected:', e.value)}
 			onvalidate={(e) => console.log('Validation:', e.detail)}
-			pickerWidth="max-match"
+			pickerWidth="longest"
 		>
 			{#snippet labelRender(opt: ComboboxOption)}
 				Processed {opt.label}
@@ -218,7 +218,7 @@
 			label="Lazy combobox"
 			placeholder="Choose..."
 			options={lazyOptions}
-			lazy={'always'}
+			lazy="always"
 			onlazy={async () => {
 				await new Promise((resolve) => setTimeout(resolve, 2500));
 				lazyOptions = [
@@ -555,6 +555,13 @@
 	}}
 >
 	<p>This is a dialog content area.</p>
+
+	<Button onclick={() => (nestedDialogOpen = true)}>Open Nested Dialog</Button>
+</Dialog>
+
+<!-- Nested Dialog Demo -->
+<Dialog bind:open={nestedDialogOpen} title="Nested Dialog" size="sm">
+	<p>This is a nested dialog content area.</p>
 </Dialog>
 
 <!-- Scrollable Dialog Demo -->