svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dialog: support nesting/stacking & improve ergonomics

Browse Source 
- 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
This commit is contained in:
Elijah Duffy
2026-03-12 23:15:08 -07:00
parent 69ed04b499
commit 7c9a6398d4
2 changed files with 87 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/lib/Dialog.svelte
View File

@@ -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
$effect(() => {
if (open) {
document.body.style.overflow = 'hidden';
untrack(() => onopen?.(dialogAPI));
/** handles open change */
const handleOpenChange = (localOpen: boolean) => {
if (localOpen) {
document.body.style.overflow = 'hidden'; // prevent scrolling
// 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 = '';
untrack(() => onclose?.(dialogAPI));
// update stack
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) {
open = false;
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}