@ibobbyts/svelte-ui-utils 0.4.3 → 0.4.5

package/dist/dialog/Dialog.svelte

@@ -1,5 +1,14 @@
 <svelte:options runes={false} />
 
+<script context="module" lang="ts">
+  // Mount order mirrors the native top layer: the last registered element is
+  // the topmost dialog, and only it reacts to Escape, Tab, and backdrop clicks.
+  const openDialogElements: HTMLDialogElement[] = [];
+
+  const focusableSelector =
+    'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+</script>
+
 <script lang="ts">
   import { tick } from 'svelte';
   import type { DialogSize } from './types.js';
@@ -23,44 +32,91 @@
   export let countdownLabel = 'Dialog countdown';
   export let labelledBy: string | undefined = undefined;
   export let describedBy: string | undefined = undefined;
+  export let restoreFocusSelector: string | undefined = undefined;
   export let onClose: (() => void) | undefined = undefined;
 
-  let dialogElement: HTMLElement | undefined;
+  let dialogElement: HTMLDialogElement | undefined;
   let titleId = `suu-dialog-title-${Math.random().toString(36).slice(2)}`;
   let descriptionId = `suu-dialog-description-${Math.random().toString(36).slice(2)}`;
   let wasOpen = false;
   let previouslyFocusedElement: HTMLElement | null = null;
+  let restoreFocusSelectorAtOpen: string | undefined;
+
+  // The dialog element is the full-viewport top layer surface; the visual
+  // backdrop and panel stay on their existing inner elements.
+  const dialogResetStyle =
+    'width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: none; background: transparent;';
 
   $: resolvedLabelledBy = labelledBy ?? (title ? titleId : undefined);
   $: resolvedDescribedBy =
     describedBy ?? (description ? descriptionId : undefined);
   $: backdropStyle =
     `--suu-dialog-backdrop-opacity: ${backdropOpacity}; --suu-dialog-backdrop-blur: ${backdropBlur};`;
-  $: dialogStyle = padding ? `--suu-dialog-padding: ${padding};` : '';
   $: countdownStyle = `--suu-dialog-countdown-duration: ${Math.max(0, countdownDurationMs)}ms;`;
   $: if (open && !wasOpen) {
     wasOpen = true;
-    void focusDialog();
-  } else if (!open && wasOpen) {
-    wasOpen = false;
-    restoreFocus();
-  }
-
-  async function focusDialog() {
     if (typeof document !== 'undefined') {
       previouslyFocusedElement =
         document.activeElement instanceof HTMLElement
           ? document.activeElement
           : null;
+      restoreFocusSelectorAtOpen = restoreFocusSelector;
+    }
+    void focusDialog();
+  } else if (!open && wasOpen) {
+    wasOpen = false;
+    void restoreFocus();
+  }
+
+  function presentDialog(element: HTMLDialogElement) {
+    if (!openDialogElements.includes(element)) {
+      openDialogElements.push(element);
+    }
+    if (typeof element.showModal === 'function') {
+      if (!element.open) {
+        element.showModal();
+      }
+    } else if (!element.hasAttribute('open')) {
+      // jsdom does not implement showModal; the attribute keeps the element
+      // rendered as an open dialog there.
+      element.setAttribute('open', '');
     }
 
+    return {
+      destroy() {
+        const index = openDialogElements.indexOf(element);
+        if (index !== -1) {
+          openDialogElements.splice(index, 1);
+        }
+      },
+    };
+  }
+
+  async function focusDialog() {
     await tick();
     dialogElement?.focus();
   }
 
-  function restoreFocus() {
-    previouslyFocusedElement?.focus();
+  async function restoreFocus() {
+    const previousTarget = previouslyFocusedElement;
+    const selectorAtOpen = restoreFocusSelectorAtOpen;
     previouslyFocusedElement = null;
+    restoreFocusSelectorAtOpen = undefined;
+    if (!previousTarget && !selectorAtOpen) {
+      return;
+    }
+
+    await tick();
+    const replacementTarget = selectorAtOpen
+      ? document.querySelector(selectorAtOpen)
+      : null;
+    const target =
+      replacementTarget instanceof HTMLElement
+        ? replacementTarget
+        : previousTarget?.isConnected
+          ? previousTarget
+          : null;
+    target?.focus();
   }
 
   function requestClose() {
@@ -79,78 +135,115 @@
     requestClose();
   }
 
-  function handleKeydown(event: KeyboardEvent) {
-    if (open && event.key === 'Escape' && closeOnEscape) {
-      event.preventDefault();
+  function handleCancel(event: Event) {
+    // Prevent the browser's own Escape close so the open prop stays the only
+    // source of truth; only the topmost dialog receives this event natively.
+    event.preventDefault();
+    if (closeOnEscape) {
       requestClose();
     }
   }
-</script>
 
-<svelte:window on:keydown={handleKeydown} />
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key !== 'Tab' || !dialogElement) {
+      return;
+    }
+    if (openDialogElements[openDialogElements.length - 1] !== dialogElement) {
+      return;
+    }
+
+    event.preventDefault();
+    const focusables = Array.from(
+      dialogElement.querySelectorAll<HTMLElement>(focusableSelector),
+    );
+    if (focusables.length === 0) {
+      dialogElement.focus();
+      return;
+    }
+
+    const activeElement =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : undefined;
+    const currentIndex = activeElement
+      ? focusables.indexOf(activeElement)
+      : -1;
+    const nextIndex = event.shiftKey
+      ? currentIndex <= 0
+        ? focusables.length - 1
+        : currentIndex - 1
+      : currentIndex === -1 || currentIndex === focusables.length - 1
+        ? 0
+        : currentIndex + 1;
+    focusables[nextIndex].focus();
+  }
+</script>
 
 {#if open}
-  <div
-    class="suu-dialog-backdrop"
-    data-dimmed={dimBackdrop ? 'true' : 'false'}
-    data-blurred={blurBackdrop ? 'true' : 'false'}
-    style={backdropStyle}
-    role="presentation"
-    on:mousedown={handleBackdropMouseDown}
+  <dialog
+    bind:this={dialogElement}
+    class="suu-dialog-root"
+    style={dialogResetStyle}
+    aria-labelledby={resolvedLabelledBy}
+    aria-describedby={resolvedDescribedBy}
+    tabindex="-1"
+    use:presentDialog
+    on:cancel={handleCancel}
+    on:keydown={handleKeydown}
   >
     <div
-      bind:this={dialogElement}
-      class={`suu-dialog suu-dialog--${size}`}
-      style={dialogStyle}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby={resolvedLabelledBy}
-      aria-describedby={resolvedDescribedBy}
-      tabindex="-1"
+      class="suu-dialog-backdrop"
+      data-dimmed={dimBackdrop ? 'true' : 'false'}
+      data-blurred={blurBackdrop ? 'true' : 'false'}
+      style={backdropStyle}
+      role="presentation"
+      on:mousedown={handleBackdropMouseDown}
     >
-      {#if showCountdown && countdownDurationMs > 0}
-        <div
-          class="suu-dialog__countdown"
-          style={countdownStyle}
-          role="timer"
-          aria-label={countdownLabel}
-        ></div>
-      {/if}
-      <header class="suu-dialog__header">
-        <div class="suu-dialog__heading">
-          {#if title}
-            <h2 class="suu-dialog__title" id={titleId}>{title}</h2>
-          {/if}
-          {#if description}
-            <p class="suu-dialog__description" id={descriptionId}>
-              {description}
-            </p>
+      <div class={`suu-dialog suu-dialog--${size}`} style:--suu-dialog-padding={padding}>
+        {#if showCountdown && countdownDurationMs > 0}
+          <div
+            class="suu-dialog__countdown"
+            style={countdownStyle}
+            role="timer"
+            aria-label={countdownLabel}
+          ></div>
+        {/if}
+        <header class="suu-dialog__header">
+          <div class="suu-dialog__heading">
+            {#if title}
+              <h2 class="suu-dialog__title" id={titleId}>{title}</h2>
+            {/if}
+            {#if description}
+              <p class="suu-dialog__description" id={descriptionId}>
+                {description}
+              </p>
+            {/if}
+          </div>
+          {#if showCloseButton && dismissible}
+            <button
+              type="button"
+              class="suu-dialog__close"
+              aria-label={closeLabel}
+              title={closeLabel}
+              on:click={requestClose}
+            >
+              <svg viewBox="0 0 20 20" aria-hidden="true">
+                <path d="m6 6 8 8M14 6l-8 8"></path>
+              </svg>
+            </button>
           {/if}
+        </header>
+
+        <div class="suu-dialog__body">
+          <slot />
         </div>
-        {#if showCloseButton && dismissible}
-          <button
-            type="button"
-            class="suu-dialog__close"
-            aria-label={closeLabel}
-            title={closeLabel}
-            on:click={requestClose}
-          >
-            <svg viewBox="0 0 20 20" aria-hidden="true">
-              <path d="m6 6 8 8M14 6l-8 8"></path>
-            </svg>
-          </button>
-        {/if}
-      </header>
 
-      <div class="suu-dialog__body">
-        <slot />
+        {#if $$slots.footer}
+          <footer class="suu-dialog__footer">
+            <slot name="footer" />
+          </footer>
+        {/if}
       </div>
-
-      {#if $$slots.footer}
-        <footer class="suu-dialog__footer">
-          <slot name="footer" />
-        </footer>
-      {/if}
     </div>
-  </div>
+  </dialog>
 {/if}

package/dist/dialog/Dialog.svelte.d.ts

@@ -37,6 +37,7 @@ declare const Dialog: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
     countdownLabel?: string;
     labelledBy?: string | undefined;
     describedBy?: string | undefined;
+    restoreFocusSelector?: string | undefined;
     onClose?: (() => void) | undefined;
 }, {
     default: {};

package/dist/dialog/Dialog.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/Dialog.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAsI7C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,MAAM;;;;;WAfqpB,UAAU;cAAY,MAAM,GAAG,SAAS;;;;;;;sBAAsP,MAAM,GAAG,MAAM;;;;;iBAAmL,MAAM,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;;;;;;;cAexnC,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dialog/Dialog.svelte.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AA2N7C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,MAAM;;;;;WAfksB,UAAU;cAAY,MAAM,GAAG,SAAS;;;;;;;sBAAsP,MAAM,GAAG,MAAM;;;;;iBAAmL,MAAM,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;2BAAyB,MAAM,GAAG,SAAS;cAAY,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;;;;;;;;;cAehtC,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}