npm - @sveltia/ui - Versions diffs - 0.67.0 → 0.67.1 - Mend

@sveltia/ui 0.67.0 → 0.67.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/components/text-editor/shiki/generated.d.ts +1 -1
package/dist/components/text-editor/shiki/generated.js +1 -1
package/dist/components/text-editor/toolbar/insert-link-button.svelte +4 -0
package/dist/components/util/modal.svelte +32 -9
package/dist/typedefs.d.ts +7 -0
package/dist/typedefs.js +4 -0
package/package.json +4 -4

package/dist/components/text-editor/shiki/generated.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@ export const SHIKI_VERSION: "4.4.3";
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION: "0.67.0";
+export const UI_VERSION: "0.67.1";
 /**
  * Available syntax highlighting languages, sorted by display name.
  * @type {{ id: string, name: string, aliases?: string[] }[]}

package/dist/components/text-editor/shiki/generated.js CHANGED Viewed

@@ -10,7 +10,7 @@ export const SHIKI_VERSION = "4.4.3";
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION = "0.67.0";
+export const UI_VERSION = "0.67.1";
 /**
  * Available syntax highlighting languages, sorted by display name.

package/dist/components/text-editor/toolbar/insert-link-button.svelte CHANGED Viewed

@@ -148,6 +148,9 @@
       await focusEditor(editorStore.editor);
       editorStore.editor.dispatchCommand(TOGGLE_LINK_COMMAND, anchorURL);
+    } else if (editorStore.editor) {
+      // The dialog leaves the focus alone (see `restoreFocus` below), so bring it back here
+      await focusEditor(editorStore.editor);
     }
     anchorURL = '';
@@ -202,6 +205,7 @@
   bind:value={anchorURL}
   okDisabled={!anchorURL}
   okLabel={dialogMode === 'create' ? _('_sui.insert') : _('_sui.update')}
+  restoreFocus={false}
   onClose={(event) => {
     onDialogClose(event);
   }}

package/dist/components/util/modal.svelte CHANGED Viewed

@@ -40,6 +40,7 @@
     lightDismiss = false,
     escapeDismiss = true,
     keepContent = false,
+    restoreFocus = true,
     children,
     extraContent,
     onOpening,
@@ -152,26 +153,44 @@
    */
   let lastActiveElement;
+  /**
+   * Timer used to defer the focus restoration in {@link moveFocusBack}.
+   * @type {number | undefined}
+   */
+  let restoreFocusTimer;
   /**
    * Move the focus back to the element that had it before the modal was opened. This is done
    * manually rather than relying on the browser’s own focus restoration, because the modal is
    * closed while `<body>` is `inert`, which prevents the focus from being restored.
    */
-  const restoreFocus = () => {
-    const { activeElement } = document;
+  const moveFocusBack = () => {
     const element = lastActiveElement;
     lastActiveElement = undefined;
-    if (!element?.isConnected) {
+    if (!restoreFocus || !element) {
       return;
     }
-    // Only take the focus back if it’s still inside the modal, or nowhere because the modal took it
-    // down with itself. If it has already moved on, pulling it back would undo what happened.
-    if (!activeElement || activeElement === document.body || dialog?.contains(activeElement)) {
-      element.focus();
-    }
+    // Wait for the current task to finish before moving the focus. The modal is typically closed
+    // from within an event handler, and the event that triggered it is still being processed:
+    // Firefox dispatches `keypress` to whatever holds the focus at that point, so restoring it
+    // synchronously would let the Enter key that submitted the modal activate the button that
+    // opened it, immediately reopening the modal.
+    restoreFocusTimer = window.setTimeout(() => {
+      const { activeElement } = document;
+      if (!element.isConnected) {
+        return;
+      }
+      // Only take the focus back if it’s still inside the modal, or nowhere because the modal took
+      // it down with itself. If it has already moved on, pulling it back would undo what happened.
+      if (!activeElement || activeElement === document.body || dialog?.contains(activeElement)) {
+        element.focus();
+      }
+    });
   };
   /**
@@ -235,6 +254,9 @@
     const gen = generation;
     const { activeElement } = document;
+    // Cancel a pending restoration from a previous close, which would otherwise pull the focus out
+    // of the modal that’s being opened right now
+    window.clearTimeout(restoreFocusTimer);
     lastActiveElement = activeElement instanceof HTMLElement ? activeElement : undefined;
     onOpening?.(new CustomEvent('Opening'));
@@ -291,7 +313,7 @@
       document.body.inert = false;
     }
-    restoreFocus();
+    moveFocusBack();
     setActiveClass = false;
     setOpenClass = false;
@@ -340,6 +362,7 @@
     // onUnmount
     return () => {
+      window.clearTimeout(restoreFocusTimer);
       dialog?.close();
       unmount(placeholder);
     };

package/dist/typedefs.d.ts CHANGED Viewed

@@ -153,6 +153,13 @@ export type ModalProps = {
      * open, and unmounted once the closing transition is complete.
      */
     keepContent?: boolean | undefined;
+    /**
+     * Whether to move the focus back to the element that had it
+     * before the modal was opened. Default: `true`. Disable this if the consumer takes care of the
+     * focus itself once the modal is closed, such as when the modal is opened from a rich text editor,
+     * where refocusing the element would reset the caret and discard the user’s selection.
+     */
+    restoreFocus?: boolean | undefined;
     /**
      * A reference to the `<dialog>` element.
      */

package/dist/typedefs.js CHANGED Viewed

@@ -57,6 +57,10 @@
  * @property {boolean} [keepContent] Whether to keep the `<dialog>` element and its content in the
  * DOM tree while the modal is not displayed. By default, these are mounted only while the modal is
  * open, and unmounted once the closing transition is complete.
+ * @property {boolean} [restoreFocus] Whether to move the focus back to the element that had it
+ * before the modal was opened. Default: `true`. Disable this if the consumer takes care of the
+ * focus itself once the modal is closed, such as when the modal is opened from a rich text editor,
+ * where refocusing the element would reset the caret and discard the user’s selection.
  * @property {HTMLDialogElement} [dialog] A reference to the `<dialog>` element.
  * @property {Snippet} [children] Primary slot content.
  * @property {Snippet} [extraContent] Extra slot content.

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.67.0",
+  "version": "0.67.1",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -66,14 +66,14 @@
     "eslint-plugin-package-json": "^1.7.1",
     "eslint-plugin-svelte": "^3.23.0",
     "globals": "^17.11.0",
-    "happy-dom": "^20.11.2",
+    "happy-dom": "^20.11.6",
     "oxlint": "^1.79.0",
     "postcss": "^8.5.26",
     "postcss-html": "^2.0.0",
     "prettier": "^3.9.6",
     "prettier-plugin-svelte": "^4.1.1",
-    "rolldown": "^1.2.4",
-    "sass": "^1.102.0",
+    "rolldown": "^1.2.5",
+    "sass": "^1.103.0",
     "shiki": "^4.4.3",
     "stylelint": "^17.14.1",
     "stylelint-config-recommended-scss": "^17.0.1",