@sveltia/ui 0.78.4 → 0.79.0

package/dist/services/popup.svelte.js

@@ -2,8 +2,11 @@ import { isRTL } from '@sveltia/i18n';
 import { generateElementId } from '@sveltia/utils/element';
 import { sleep } from '@sveltia/utils/misc';
 import { on } from 'svelte/events';
+import { calculatePopupStyle, isShallowEqual, mirrorPosition } from './popup-position.js';
+
 /**
- * @import { PopupPosition } from '../typedefs';
+ * @import { PopupPosition } from '../typedefs.js';
+ * @import { PopupStyle } from './popup-position.js';
  */
 
 /**
@@ -51,10 +54,7 @@ class Popup {
   }
 
   style = $state(
-    /**
-     * @type {{ inset: string | undefined, zIndex: number | undefined, minWidth: string | undefined,
-     * maxWidth: string | undefined, height: string | undefined }}
-     */
+    /** @type {PopupStyle} */
     ({
       inset: undefined,
       zIndex: undefined,
@@ -93,11 +93,17 @@ class Popup {
    */
   #removeAnchorListeners = [];
 
+  /**
+   * ID of the animation frame requested to recalculate the position after a resize.
+   * @type {number}
+   */
+  _rafId = 0;
+
   /**
    * Initialize a new `Popup` instance. Note that the `popupElement` is optional, because the
    * element is typically mounted only while the popup is open. Use {@link attachPopupElement} to
    * provide it later.
-   * @param {HTMLButtonElement} anchorElement `<button>` element that triggers the popup.
+   * @param {HTMLElement} anchorElement Element that triggers the popup, typically a `<button>`.
    * @param {HTMLDialogElement | undefined} popupElement `<dialog>` element to be used for the
    * popup, if it’s already in the DOM tree.
    * @param {PopupPosition} position Where to show the popup content.
@@ -260,9 +266,8 @@ class Popup {
   }
 
   /**
-   * Detach the `<dialog>` element, typically because it’s being unmounted. The `aria-controls`
-   * attribute on the anchor is left to the {@link open} setter, which removes it once the closing
-   * animation is complete.
+   * Detach the `<dialog>` element, typically because it’s being unmounted. The anchor’s
+   * `aria-controls` attribute is removed as well, since the content is leaving the DOM tree.
    */
   detachPopupElement() {
     this.#removeEventListeners?.();
@@ -325,23 +330,6 @@ class Popup {
       return;
     }
 
-    const anchorRect = this.positionBaseElement.getBoundingClientRect();
-    const rootBounds = { width: window.innerWidth, height: window.innerHeight };
-
-    // Clip the anchor’s rect to the viewport, mirroring what `IntersectionObserver` used to report
-    // as `intersectionRect`
-    const intersectionRect = {
-      top: Math.max(anchorRect.top, 0),
-      left: Math.max(anchorRect.left, 0),
-      right: Math.min(anchorRect.right, rootBounds.width),
-      bottom: Math.min(anchorRect.bottom, rootBounds.height),
-      width: 0,
-      height: 0,
-    };
-
-    intersectionRect.width = Math.max(0, intersectionRect.right - intersectionRect.left);
-    intersectionRect.height = Math.max(0, intersectionRect.bottom - intersectionRect.top);
-
     // Measure the content at its natural size, with any limit previously applied here taken off
     // first. A popup that delegates its scrolling to a child — the combobox hands it to the option
     // list, so the filter stays put — reports a `scrollHeight` no larger than the `max-height` it’s
@@ -349,6 +337,7 @@ class Popup {
     // clipped values would make the cap stick: once the popup had shrunk to fit a small viewport,
     // it could never grow back when the viewport did. The properties are put back synchronously,
     // before the browser can paint, so nothing flickers.
+    const anchorRect = this.positionBaseElement.getBoundingClientRect();
     const { maxHeight: appliedMaxHeight, maxWidth: appliedMaxWidth } = content.style;
 
     content.style.maxHeight = '';
@@ -359,148 +348,16 @@ class Popup {
     content.style.maxHeight = appliedMaxHeight;
     content.style.maxWidth = appliedMaxWidth;
 
-    const topMargin = intersectionRect.top - 8;
-    const bottomMargin = rootBounds.height - intersectionRect.bottom - 8;
-    // A popup that opens beside its anchor is aligned with one of the anchor’s edges and extends
-    // across it, so its room is measured from that edge, not from the opposite one a dropdown
-    // hangs off
-    const leftMargin = intersectionRect.left - 8;
-    const rightMargin = rootBounds.width - intersectionRect.right - 8;
-    const downwardMargin = rootBounds.height - intersectionRect.top - 8;
-    const upwardMargin = intersectionRect.bottom - 8;
-    let { position } = this;
-    let height;
-
-    // Normalize RTL-friendly positions to LTR for LTR documents
-    // @todo Rename `PopupPosition` enums to be direction-agnostic
-    if (isRTL()) {
-      if (position.endsWith('-left')) {
-        position = /** @type {PopupPosition} */ (position.replace('-left', '-right'));
-      } else if (position.endsWith('-right')) {
-        position = /** @type {PopupPosition} */ (position.replace('-right', '-left'));
-      }
-
-      if (position.startsWith('left-')) {
-        position = /** @type {PopupPosition} */ (position.replace('left-', 'right-'));
-      } else if (position.startsWith('right-')) {
-        position = /** @type {PopupPosition} */ (position.replace('right-', 'left-'));
-      }
-    }
-
-    // Alter the position if the space is limited
-    if (position.startsWith('bottom-')) {
-      if (contentHeight > bottomMargin) {
-        if (topMargin > bottomMargin) {
-          position = /** @type {PopupPosition} */ (position.replace('bottom-', 'top-'));
-          height = topMargin;
-        } else {
-          height = bottomMargin;
-        }
-      }
-    }
-
-    // Only a popup that opens beside its anchor carries a `-top`/`-bottom` suffix, and it grows
-    // away from the edge it’s aligned with: down from the anchor’s top, or up from its bottom. It
-    // gets the same treatment as the dropdown above — align with the other edge when the content
-    // doesn’t fit and that edge has more room, and cap it either way, so a long submenu scrolls
-    // instead of running past the viewport
-    if (position.endsWith('-top')) {
-      if (contentHeight > downwardMargin) {
-        if (upwardMargin > downwardMargin) {
-          position = /** @type {PopupPosition} */ (position.replace('-top', '-bottom'));
-          height = upwardMargin;
-        } else {
-          height = downwardMargin;
-        }
-      }
-    } else if (position.endsWith('-bottom')) {
-      if (contentHeight > upwardMargin) {
-        if (downwardMargin > upwardMargin) {
-          position = /** @type {PopupPosition} */ (position.replace('-bottom', '-top'));
-          height = downwardMargin;
-        } else {
-          height = upwardMargin;
-        }
-      }
-    }
-
-    // If the popup overflows the viewport, change the position
-    if (position.endsWith('-left')) {
-      if (intersectionRect.left + contentWidth > rootBounds.width - 8) {
-        position = /** @type {PopupPosition} */ (position.replace('-left', '-right'));
-      }
-    }
-
-    if (position.endsWith('-right')) {
-      if (intersectionRect.right - contentWidth < 8) {
-        position = /** @type {PopupPosition} */ (position.replace('-right', '-left'));
-      }
-    }
-
-    // The two checks above align a dropdown that opens below or above its anchor, so neither
-    // covers a popup that opens beside one — a submenu — running off the edge it opens towards.
-    // That gets the same treatment as the vertical flip above: switch to the other side, but only
-    // when it has more room, so a submenu with nowhere to go stays where the caller put it
-    if (position.startsWith('right-')) {
-      if (contentWidth > rightMargin && leftMargin > rightMargin) {
-        position = /** @type {PopupPosition} */ (position.replace('right-', 'left-'));
-      }
-    } else if (position.startsWith('left-')) {
-      if (contentWidth > leftMargin && rightMargin > leftMargin) {
-        position = /** @type {PopupPosition} */ (position.replace('left-', 'right-'));
-      }
-    }
-
-    const top = position.startsWith('bottom-')
-      ? `${Math.round(intersectionRect.bottom)}px`
-      : position.endsWith('-top')
-        ? `${Math.round(intersectionRect.top)}px`
-        : 'auto';
-
-    const right = position.startsWith('left-')
-      ? `${Math.round(rootBounds.width - intersectionRect.left)}px`
-      : position.endsWith('-right')
-        ? `${Math.round(rootBounds.width - intersectionRect.right)}px`
-        : 'auto';
-
-    const bottom = position.startsWith('top-')
-      ? `${Math.round(rootBounds.height - intersectionRect.top)}px`
-      : position.endsWith('-bottom')
-        ? `${Math.round(rootBounds.height - intersectionRect.bottom)}px`
-        : 'auto';
-
-    const left = position.startsWith('right-')
-      ? `${Math.round(intersectionRect.right)}px`
-      : position.endsWith('-left')
-        ? `${Math.round(intersectionRect.left)}px`
-        : 'auto';
-
-    const style = {
-      inset: [top, right, bottom, left].join(' '),
-      zIndex: 1000,
-      minWidth: `${Math.round(intersectionRect.width)}px`,
-      // A popup opening beside the anchor is capped by the room on that side, not by the width the
-      // anchor’s own edges leave, which is what the two dropdown cases below measure
-      maxWidth: position.startsWith('right-')
-        ? `${Math.round(rightMargin)}px`
-        : position.startsWith('left-')
-          ? `${Math.round(leftMargin)}px`
-          : position.endsWith('-left')
-            ? `${Math.round(rootBounds.width - intersectionRect.left - 8)}px`
-            : `${Math.round(intersectionRect.right - 8)}px`,
-      // `undefined` removes the `max-height` the popup is given, letting it take its natural size
-      // again. `auto` would look equivalent but isn’t a valid `max-height`, so the browser would
-      // drop it and leave whatever limit was applied last in place.
-      height: height ? `${Math.round(height)}px` : undefined,
-    };
+    const style = calculatePopupStyle({
+      // Normalize RTL-friendly positions to LTR for LTR documents
+      position: isRTL() ? mirrorPosition(this.position) : this.position,
+      anchorRect,
+      viewport: { width: window.innerWidth, height: window.innerHeight },
+      contentWidth,
+      contentHeight,
+    });
 
-    if (
-      style.inset !== this.style.inset ||
-      style.zIndex !== this.style.zIndex ||
-      style.minWidth !== this.style.minWidth ||
-      style.maxWidth !== this.style.maxWidth ||
-      style.height !== this.style.height
-    ) {
+    if (!isShallowEqual(style, this.style)) {
       this.style = style;
     }
   }
@@ -541,8 +398,7 @@ class Popup {
 
 /**
  * Activate a new popup.
- * @param {...any} args Arguments.
+ * @param {ConstructorParameters<typeof Popup>} args Arguments passed to the `Popup` constructor.
  * @returns {Popup} New popup.
  */
-// @ts-ignore
 export const activatePopup = (...args) => new Popup(...args);

package/dist/services/scroll.d.ts

@@ -0,0 +1 @@
+export function scrollIntoViewIfNeeded(element: HTMLElement): void;

package/dist/services/scroll.js

@@ -0,0 +1,17 @@
+/**
+ * Scrolling helpers shared by the composite widgets.
+ */
+
+/**
+ * Scroll the given element into view if needed, by as little as possible. Falls back to the legacy
+ * boolean argument on a browser that rejects the options object.
+ * @internal
+ * @param {HTMLElement} element Element to be scrolled into view.
+ */
+export const scrollIntoViewIfNeeded = (element) => {
+  try {
+    element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
+  } catch {
+    element.scrollIntoView(true);
+  }
+};

package/dist/services/select.svelte.d.ts

@@ -52,5 +52,5 @@ export class OptionRegistry {
 export function createOptionRegistry(): OptionRegistry;
 export function getOptionRegistry(): OptionRegistry | undefined;
 export function getSelectedItemDetail(target: HTMLElement): SelectedItemDetail;
-import type { OptionEntry } from '../typedefs';
-import type { SelectedItemDetail } from '../typedefs';
+import type { OptionEntry } from '../typedefs.js';
+import type { SelectedItemDetail } from '../typedefs.js';

package/dist/services/select.svelte.js

@@ -2,7 +2,7 @@ import { getContext, setContext } from 'svelte';
 import { castValue } from './value.js';
 
 /**
- * @import { OptionEntry, SelectedItemDetail } from '../typedefs';
+ * @import { OptionEntry, SelectedItemDetail } from '../typedefs.js';
  */
 
 /**

package/dist/services/text.d.ts

@@ -0,0 +1,2 @@
+export function fold(value: string): string;
+export function normalize(value: string): string;

package/dist/services/text.js

@@ -0,0 +1,28 @@
+/**
+ * Text normalization shared by search filtering and type-ahead.
+ */
+
+/**
+ * Diacritic characters regex for normalization. We use a regex instead of `Intl` APIs for better
+ * performance, since `transliterate` is slow and we only need basic normalization.
+ */
+const DIACRITIC_RE = /\p{Diacritic}/gu;
+
+/**
+ * Fold the given string for comparison: strip diacritics and convert to lower case, keeping
+ * whitespace as is.
+ * @internal
+ * @param {string} value Original value.
+ * @returns {string} Folded value.
+ */
+export const fold = (value) => value.normalize('NFD').replace(DIACRITIC_RE, '').toLocaleLowerCase();
+
+/**
+ * Normalize the given string for search value comparison. Since `transliterate` is slow, we only
+ * apply basic normalization.
+ * @internal
+ * @param {string} value Original value.
+ * @returns {string} Normalized value.
+ * @todo Move this to `@sveltia/utils`.
+ */
+export const normalize = (value) => fold(value.trim());

package/dist/services/tree.svelte.d.ts

@@ -35,16 +35,6 @@ export class Tree {
      * @type {HTMLElement | undefined}
      */
     anchor: HTMLElement | undefined;
-    /**
-     * Currently accumulated type-ahead search terms.
-     * @type {string}
-     */
-    typeAheadTerms: string;
-    /**
-     * Timer used to reset the type-ahead search terms.
-     * @type {ReturnType<typeof globalThis.setTimeout> | undefined}
-     */
-    typeAheadTimer: ReturnType<typeof globalThis.setTimeout> | undefined;
     /**
      * Whether {@link activate} has run.
      * @type {boolean}
@@ -217,7 +207,8 @@ export class Tree {
      */
     expandSiblings(item: HTMLElement): void;
     /**
-     * Move focus to the next item that matches the accumulated type-ahead search terms.
+     * Move focus to the next item that matches the accumulated type-ahead search terms. Typing the
+     * same character repeatedly cycles through the items starting with it.
      * @param {string} char Typed character.
      * @param {HTMLElement} currentItem Currently focused item.
      */
@@ -242,6 +233,7 @@ export class Tree {
      * Clean up event listeners.
      */
     destroy(): void;
+    #private;
 }
 export function activateTree(params?: object): Attachment;
 import type { Attachment } from 'svelte/attachments';

package/dist/services/tree.svelte.js

@@ -1,17 +1,16 @@
 import { isRTL } from '@sveltia/i18n';
 import { generateElementId } from '@sveltia/utils/element';
-import { sleep } from '@sveltia/utils/misc';
-import { normalize } from './group.svelte.js';
+import { getArrowKeys } from './navigation.js';
+import { scrollIntoViewIfNeeded } from './scroll.js';
+import { normalize } from './text.js';
 import { getSelectedItemDetail } from './select.svelte.js';
+import { findTypeAheadMatch, TypeAhead } from './type-ahead.js';
+import { activateBefore, activateLater } from './widget.js';
 
 /**
  * @import { Attachment } from 'svelte/attachments';
  */
 
-/**
- * How long to wait, in milliseconds, before the type-ahead search terms are reset.
- */
-const TYPE_AHEAD_TIMEOUT = 500;
 /**
  * CSS selector to retrieve the tree items.
  */
@@ -25,6 +24,12 @@ const ITEM_SELECTOR = '[role="treeitem"]';
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
  */
 export class Tree {
+  /**
+   * Keystroke buffer for type-ahead.
+   * @type {TypeAhead}
+   */
+  #typeAhead = new TypeAhead();
+
   /**
    * Initialize a new `Tree` instance.
    * @param {HTMLElement} parent Parent element.
@@ -55,18 +60,6 @@ export class Tree {
      */
     this.anchor = undefined;
 
-    /**
-     * Currently accumulated type-ahead search terms.
-     * @type {string}
-     */
-    this.typeAheadTerms = '';
-
-    /**
-     * Timer used to reset the type-ahead search terms.
-     * @type {ReturnType<typeof globalThis.setTimeout> | undefined}
-     */
-    this.typeAheadTimer = undefined;
-
     /**
      * Whether {@link activate} has run.
      * @type {boolean}
@@ -79,26 +72,12 @@ export class Tree {
      */
     this.destroyed = false;
 
-    // eslint-disable-next-line jsdoc/require-description
     /** @type {(event: MouseEvent) => void} */
-    this._onClick = (event) => {
-      this.activate();
-      this.onClick(event);
-    };
-
-    // eslint-disable-next-line jsdoc/require-description
+    this._onClick = activateBefore(this, (event) => this.onClick(event));
     /** @type {(event: KeyboardEvent) => void} */
-    this._onKeyDown = (event) => {
-      this.activate();
-      this.onKeyDown(event);
-    };
-
-    // eslint-disable-next-line jsdoc/require-description
+    this._onKeyDown = activateBefore(this, (event) => this.onKeyDown(event));
     /** @type {(event: FocusEvent) => void} */
-    this._onFocusIn = (event) => {
-      this.activate();
-      this.onFocusIn(event);
-    };
+    this._onFocusIn = activateBefore(this, (event) => this.onFocusIn(event));
 
     // The items can be added or removed at any time, e.g. when a subtree is lazily rendered
     this.observer = new globalThis.MutationObserver(() => {
@@ -114,16 +93,9 @@ export class Tree {
     parent.addEventListener('keydown', this._onKeyDown);
     parent.addEventListener('focusin', this._onFocusIn);
 
-    // Wait a bit before the child components are mounted
-    (async () => {
-      await sleep(100);
-
-      // The widget may have been unmounted in the meantime, and the observer set up by
-      // `activate()` would then never be disconnected
-      if (!this.destroyed) {
-        this.activate();
-      }
-    })();
+    // Wait a bit before the child components are mounted. If the widget is unmounted in the
+    // meantime, the observer set up by `activate()` would never be disconnected.
+    activateLater(this, () => this.destroyed);
   }
 
   /**
@@ -394,11 +366,7 @@ export class Tree {
    * @param {HTMLElement} element Element to be scrolled into view.
    */
   scrollIntoView(element) {
-    try {
-      element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
-    } catch {
-      element.scrollIntoView(true);
-    }
+    scrollIntoViewIfNeeded(element);
   }
 
   /**
@@ -473,10 +441,13 @@ export class Tree {
     }
 
     const { multi, anchor } = this;
+    const items = multi && range && anchor && anchor !== item ? this.visibleItems : [];
+    const anchorIndex = items.indexOf(/** @type {HTMLElement} */ (anchor));
 
-    if (multi && range && anchor && anchor !== item) {
-      const items = this.visibleItems;
-      const indexes = [items.indexOf(anchor), items.indexOf(item)].sort((a, b) => a - b);
+    // An anchor that has been hidden in a collapsed parent, or removed, can’t start a range, so
+    // the item is selected on its own instead, becoming the new anchor
+    if (anchorIndex !== -1) {
+      const indexes = [anchorIndex, items.indexOf(item)].sort((a, b) => a - b);
 
       items.forEach((element, index) => {
         this.setSelected(
@@ -560,34 +531,22 @@ export class Tree {
   }
 
   /**
-   * Move focus to the next item that matches the accumulated type-ahead search terms.
+   * Move focus to the next item that matches the accumulated type-ahead search terms. Typing the
+   * same character repeatedly cycles through the items starting with it.
    * @param {string} char Typed character.
    * @param {HTMLElement} currentItem Currently focused item.
    */
   typeAhead(char, currentItem) {
-    globalThis.clearTimeout(this.typeAheadTimer);
-
-    this.typeAheadTerms += char;
-    this.typeAheadTimer = globalThis.setTimeout(() => {
-      this.typeAheadTerms = '';
-    }, TYPE_AHEAD_TIMEOUT);
-
-    const terms = normalize(this.typeAheadTerms);
     const items = this.activeItems;
-    const index = items.indexOf(currentItem);
 
-    // Start the search right after the current item, so repeatedly typing the same character
-    // cycles through the matches. Keep the current item first while the terms are being extended.
-    const orderedItems = [
-      ...(terms.length > 1 ? [currentItem] : []),
-      ...items.slice(index + 1),
-      ...items.slice(0, index + 1),
-    ];
-
-    const match = orderedItems.find((item) => normalize(this.getLabel(item)).startsWith(terms));
+    const index = findTypeAheadMatch(
+      items.map((item) => normalize(this.getLabel(item))),
+      this.#typeAhead.push(char),
+      items.indexOf(currentItem),
+    );
 
-    if (match && match !== currentItem) {
-      this.focusItem(match);
+    if (index !== -1 && items[index] !== currentItem) {
+      this.focusItem(items[index]);
     }
   }
 
@@ -668,8 +627,7 @@ export class Tree {
     const currentItem = target ?? this.currentItem ?? activeItems[0];
     const index = activeItems.indexOf(currentItem);
     // In RTL, the Left and Right arrow keys are swapped
-    const forwardKey = isRTL() ? 'ArrowLeft' : 'ArrowRight';
-    const backwardKey = isRTL() ? 'ArrowRight' : 'ArrowLeft';
+    const { prevKey: backwardKey, nextKey: forwardKey } = getArrowKeys('horizontal', isRTL());
 
     if (key === 'a' && (ctrlKey || metaKey)) {
       if (multi) {
@@ -787,7 +745,7 @@ export class Tree {
    */
   destroy() {
     this.destroyed = true;
-    globalThis.clearTimeout(this.typeAheadTimer);
+    this.#typeAhead.reset();
     this.observer.disconnect();
     this.parent.removeEventListener('click', this._onClick);
     this.parent.removeEventListener('keydown', this._onKeyDown);

package/dist/services/type-ahead.d.ts

@@ -1,7 +1,3 @@
-/**
- * Type-ahead support shared by the composite widgets: the collapsed select-only combobox, and the
- * listbox and menu groups.
- */
 /**
  * How long, in milliseconds, successive keystrokes keep adding up to one type-ahead prefix.
  */

package/dist/services/type-ahead.js

@@ -3,6 +3,8 @@
  * listbox and menu groups.
  */
 
+import { fold } from './text.js';
+
 /**
  * How long, in milliseconds, successive keystrokes keep adding up to one type-ahead prefix.
  */
@@ -26,7 +28,7 @@ export class TypeAhead {
    */
   push(key) {
     globalThis.clearTimeout(this.#timer);
-    this.#prefix += key.toLocaleLowerCase();
+    this.#prefix += fold(key);
     this.#timer = /** @type {number} */ (
       /** @type {unknown} */ (
         globalThis.setTimeout(() => {

package/dist/services/widget.d.ts

@@ -0,0 +1,8 @@
+export function activateBefore<E extends Event>(widget: ActivatableWidget, handler: (event: E) => void): (event: E) => void;
+export function activateLater(widget: ActivatableWidget, isDestroyed: () => boolean): Promise<void>;
+export type ActivatableWidget = {
+    /**
+     * Set up the members, unless they already are.
+     */
+    activate: () => void;
+};

package/dist/services/widget.js

@@ -0,0 +1,39 @@
+/**
+ * Activation scaffolding shared by the composite widgets, `Group` and `Tree`, which set up their
+ * members only once the child components have had a chance to mount.
+ */
+
+import { sleep } from '@sveltia/utils/misc';
+
+/**
+ * @typedef {object} ActivatableWidget
+ * @property {() => void} activate Set up the members, unless they already are.
+ */
+
+/**
+ * Create an event listener that activates the widget before handing the event on, so an event
+ * that comes before the delayed activation is not lost.
+ * @template {Event} E
+ * @param {ActivatableWidget} widget Widget.
+ * @param {(event: E) => void} handler Function that handles the event.
+ * @returns {(event: E) => void} Event listener.
+ */
+export const activateBefore = (widget, handler) => (event) => {
+  widget.activate();
+  handler(event);
+};
+
+/**
+ * Activate the widget after a short delay, giving the relevant components time to mount, unless
+ * the widget has been destroyed in the meantime.
+ * @param {ActivatableWidget} widget Widget.
+ * @param {() => boolean} isDestroyed Function that tells whether the widget has been destroyed.
+ */
+export const activateLater = async (widget, isDestroyed) => {
+  await sleep(100);
+
+  // The widget may have been unmounted in the meantime
+  if (!isDestroyed()) {
+    widget.activate();
+  }
+};