@y14e/portal 1.2.25 → 1.2.27

package/README.md

@@ -13,11 +13,11 @@ npm i @y14e/portal
 import { createPortal } from '@y14e/portal';
 
 // CDNs
-import { createPortal } from 'https://esm.sh/@y14e/portal@1.2.25';
+import { createPortal } from 'https://esm.sh/@y14e/portal@1.2.27';
 // or
-import { createPortal } from 'https://cdn.jsdelivr.net/npm/@y14e/portal@1.2.25/+esm';
+import { createPortal } from 'https://cdn.jsdelivr.net/npm/@y14e/portal@1.2.27/+esm';
 // or
-import { createPortal } from 'https://esm.unpkg.com/@y14e/portal@1.2.25';
+import { createPortal } from 'https://esm.unpkg.com/@y14e/portal@1.2.27';
 ```
 
 ## 📦 APIs

package/dist/index.bundle.cjs

@@ -426,17 +426,22 @@ var Portal = class {
     this.#update();
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    document.addEventListener("focusin", this.#onFocusIn, { signal });
-    document.addEventListener("keydown", this.#onKeyDown, { signal });
+    [this.#entranceSentinel, this.#exitSentinel].forEach((sentinel) => {
+      sentinel.addEventListener("focus", this.#onFocus, { signal });
+    });
+    if (!(this.#host instanceof HTMLElement)) {
+      return;
+    }
+    this.#host.addEventListener("keydown", this.#onKeyDown, { signal });
     this.#host.setAttribute("data-portaled", "");
   }
-  #onFocusIn = (event) => {
-    const current = event.target;
+  #onFocus = (event) => {
+    const sentinel = event.target;
     const previous = event.relatedTarget;
     if (!(previous instanceof Element)) {
       return;
     }
-    if (current === this.#entranceSentinel) {
+    if (sentinel === this.#entranceSentinel) {
       if (this.#host.contains(previous)) {
         this.#moveFocus("previous");
         return;
@@ -452,7 +457,7 @@ var Portal = class {
         });
         next && focusElement(next);
       }
-    } else if (current === this.#exitSentinel) {
+    } else {
       if (this.#host.contains(previous)) {
         this.#moveFocus("next");
         return;
@@ -479,9 +484,6 @@ var Portal = class {
     if (!(active instanceof Element)) {
       return;
     }
-    if (!this.#host.contains(active)) {
-      return;
-    }
     this.#update();
     const focusables = this.#getFocusables();
     if (focusables.length) {
@@ -524,10 +526,13 @@ var Portal = class {
     return sentinel;
   }
   #focusSentinel(isPrevious) {
-    this.#timer && cancelAnimationFrame(this.#timer);
-    this.#timer = requestAnimationFrame(
-      () => (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus()
-    );
+    const sentinel = isPrevious ? this.#entranceSentinel : this.#exitSentinel;
+    if (isPrevious) {
+      sentinel.focus();
+    } else {
+      this.#timer && cancelAnimationFrame(this.#timer);
+      this.#timer = requestAnimationFrame(() => sentinel.focus());
+    }
   }
   #getFocusables() {
     return getFocusables(this.#host, {
@@ -559,7 +564,7 @@ function containsComposed2(container, element) {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.25
+ * @version 1.2.27
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -584,7 +589,7 @@ power-focusable/dist/index.js:
    * High-precision focus management utility with full composed tree support.
    * Handles complex focus rules including tabindex ordering, radio groups, inert.
    *
-   * @version 4.3.3
+   * @version 4.3.6
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.bundle.js

@@ -424,17 +424,22 @@ var Portal = class {
     this.#update();
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    document.addEventListener("focusin", this.#onFocusIn, { signal });
-    document.addEventListener("keydown", this.#onKeyDown, { signal });
+    [this.#entranceSentinel, this.#exitSentinel].forEach((sentinel) => {
+      sentinel.addEventListener("focus", this.#onFocus, { signal });
+    });
+    if (!(this.#host instanceof HTMLElement)) {
+      return;
+    }
+    this.#host.addEventListener("keydown", this.#onKeyDown, { signal });
     this.#host.setAttribute("data-portaled", "");
   }
-  #onFocusIn = (event) => {
-    const current = event.target;
+  #onFocus = (event) => {
+    const sentinel = event.target;
     const previous = event.relatedTarget;
     if (!(previous instanceof Element)) {
       return;
     }
-    if (current === this.#entranceSentinel) {
+    if (sentinel === this.#entranceSentinel) {
       if (this.#host.contains(previous)) {
         this.#moveFocus("previous");
         return;
@@ -450,7 +455,7 @@ var Portal = class {
         });
         next && focusElement(next);
       }
-    } else if (current === this.#exitSentinel) {
+    } else {
       if (this.#host.contains(previous)) {
         this.#moveFocus("next");
         return;
@@ -477,9 +482,6 @@ var Portal = class {
     if (!(active instanceof Element)) {
       return;
     }
-    if (!this.#host.contains(active)) {
-      return;
-    }
     this.#update();
     const focusables = this.#getFocusables();
     if (focusables.length) {
@@ -522,10 +524,13 @@ var Portal = class {
     return sentinel;
   }
   #focusSentinel(isPrevious) {
-    this.#timer && cancelAnimationFrame(this.#timer);
-    this.#timer = requestAnimationFrame(
-      () => (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus()
-    );
+    const sentinel = isPrevious ? this.#entranceSentinel : this.#exitSentinel;
+    if (isPrevious) {
+      sentinel.focus();
+    } else {
+      this.#timer && cancelAnimationFrame(this.#timer);
+      this.#timer = requestAnimationFrame(() => sentinel.focus());
+    }
   }
   #getFocusables() {
     return getFocusables(this.#host, {
@@ -557,7 +562,7 @@ function containsComposed2(container, element) {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.25
+ * @version 1.2.27
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -582,7 +587,7 @@ power-focusable/dist/index.js:
    * High-precision focus management utility with full composed tree support.
    * Handles complex focus rules including tabindex ordering, radio groups, inert.
    *
-   * @version 4.3.3
+   * @version 4.3.6
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.cjs

@@ -69,17 +69,22 @@ var Portal = class {
     this.#update();
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    document.addEventListener("focusin", this.#onFocusIn, { signal });
-    document.addEventListener("keydown", this.#onKeyDown, { signal });
+    [this.#entranceSentinel, this.#exitSentinel].forEach((sentinel) => {
+      sentinel.addEventListener("focus", this.#onFocus, { signal });
+    });
+    if (!(this.#host instanceof HTMLElement)) {
+      return;
+    }
+    this.#host.addEventListener("keydown", this.#onKeyDown, { signal });
     this.#host.setAttribute("data-portaled", "");
   }
-  #onFocusIn = (event) => {
-    const current = event.target;
+  #onFocus = (event) => {
+    const sentinel = event.target;
     const previous = event.relatedTarget;
     if (!(previous instanceof Element)) {
       return;
     }
-    if (current === this.#entranceSentinel) {
+    if (sentinel === this.#entranceSentinel) {
       if (this.#host.contains(previous)) {
         this.#moveFocus("previous");
         return;
@@ -95,7 +100,7 @@ var Portal = class {
         });
         next && powerFocusable.focusElement(next);
       }
-    } else if (current === this.#exitSentinel) {
+    } else {
       if (this.#host.contains(previous)) {
         this.#moveFocus("next");
         return;
@@ -122,9 +127,6 @@ var Portal = class {
     if (!(active instanceof Element)) {
       return;
     }
-    if (!this.#host.contains(active)) {
-      return;
-    }
     this.#update();
     const focusables = this.#getFocusables();
     if (focusables.length) {
@@ -167,10 +169,13 @@ var Portal = class {
     return sentinel;
   }
   #focusSentinel(isPrevious) {
-    this.#timer && cancelAnimationFrame(this.#timer);
-    this.#timer = requestAnimationFrame(
-      () => (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus()
-    );
+    const sentinel = isPrevious ? this.#entranceSentinel : this.#exitSentinel;
+    if (isPrevious) {
+      sentinel.focus();
+    } else {
+      this.#timer && cancelAnimationFrame(this.#timer);
+      this.#timer = requestAnimationFrame(() => sentinel.focus());
+    }
   }
   #getFocusables() {
     return powerFocusable.getFocusables(this.#host, {
@@ -202,7 +207,7 @@ function containsComposed(container, element) {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.25
+ * @version 1.2.27
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts

@@ -3,7 +3,7 @@
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.25
+ * @version 1.2.27
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.ts

@@ -3,7 +3,7 @@
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.25
+ * @version 1.2.27
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -67,17 +67,22 @@ var Portal = class {
     this.#update();
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    document.addEventListener("focusin", this.#onFocusIn, { signal });
-    document.addEventListener("keydown", this.#onKeyDown, { signal });
+    [this.#entranceSentinel, this.#exitSentinel].forEach((sentinel) => {
+      sentinel.addEventListener("focus", this.#onFocus, { signal });
+    });
+    if (!(this.#host instanceof HTMLElement)) {
+      return;
+    }
+    this.#host.addEventListener("keydown", this.#onKeyDown, { signal });
     this.#host.setAttribute("data-portaled", "");
   }
-  #onFocusIn = (event) => {
-    const current = event.target;
+  #onFocus = (event) => {
+    const sentinel = event.target;
     const previous = event.relatedTarget;
     if (!(previous instanceof Element)) {
       return;
     }
-    if (current === this.#entranceSentinel) {
+    if (sentinel === this.#entranceSentinel) {
       if (this.#host.contains(previous)) {
         this.#moveFocus("previous");
         return;
@@ -93,7 +98,7 @@ var Portal = class {
         });
         next && focusElement(next);
       }
-    } else if (current === this.#exitSentinel) {
+    } else {
       if (this.#host.contains(previous)) {
         this.#moveFocus("next");
         return;
@@ -120,9 +125,6 @@ var Portal = class {
     if (!(active instanceof Element)) {
       return;
     }
-    if (!this.#host.contains(active)) {
-      return;
-    }
     this.#update();
     const focusables = this.#getFocusables();
     if (focusables.length) {
@@ -165,10 +167,13 @@ var Portal = class {
     return sentinel;
   }
   #focusSentinel(isPrevious) {
-    this.#timer && cancelAnimationFrame(this.#timer);
-    this.#timer = requestAnimationFrame(
-      () => (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus()
-    );
+    const sentinel = isPrevious ? this.#entranceSentinel : this.#exitSentinel;
+    if (isPrevious) {
+      sentinel.focus();
+    } else {
+      this.#timer && cancelAnimationFrame(this.#timer);
+      this.#timer = requestAnimationFrame(() => sentinel.focus());
+    }
   }
   #getFocusables() {
     return getFocusables(this.#host, {
@@ -200,7 +205,7 @@ function containsComposed(container, element) {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.25
+ * @version 1.2.27
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/portal",
-  "version": "1.2.25",
+  "version": "1.2.27",
   "description": "Lightweight DOM portal (teleport) utility with fully focus management",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -56,6 +56,6 @@
   },
   "dependencies": {
     "@y14e/attributes-utils": "^1.1.2",
-    "power-focusable": "^4.3.4"
+    "power-focusable": "^4.3.6"
   }
 }