@y14e/portal 1.2.26 → 1.2.28

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.26';
+import { createPortal } from 'https://esm.sh/@y14e/portal@1.2.28';
 // or
-import { createPortal } from 'https://cdn.jsdelivr.net/npm/@y14e/portal@1.2.26/+esm';
+import { createPortal } from 'https://cdn.jsdelivr.net/npm/@y14e/portal@1.2.28/+esm';
 // or
-import { createPortal } from 'https://esm.unpkg.com/@y14e/portal@1.2.26';
+import { createPortal } from 'https://esm.unpkg.com/@y14e/portal@1.2.28';
 ```
 
 ## 📦 APIs

package/dist/index.bundle.cjs

@@ -388,7 +388,6 @@ var Portal = class {
   #exitSentinel;
   #focusables = /* @__PURE__ */ new Set();
   #controller = null;
-  #timer;
   #isDestroyed = false;
   constructor(host, container) {
     this.#host = host;
@@ -408,10 +407,6 @@ var Portal = class {
     this.#isDestroyed = true;
     this.#controller?.abort();
     this.#controller = null;
-    if (this.#timer !== void 0) {
-      cancelAnimationFrame(this.#timer);
-      this.#timer = void 0;
-    }
     restoreAttributes([...this.#focusables]);
     this.#focusables.clear();
     this.#exitSentinel.after(this.#host);
@@ -426,48 +421,37 @@ 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;
       }
       this.#update();
       const first = [...this.#focusables][0];
-      if (first) {
-        focusElement(first);
-      } else {
-        const next = getNextFocusable(document.body, {
-          anchor: this.#exitSentinel,
-          composed: true
-        });
-        next && focusElement(next);
-      }
-    } else if (current === this.#exitSentinel) {
+      first ? focusElement(first) : this.#moveFocus("next");
+    } else {
       if (this.#host.contains(previous)) {
         this.#moveFocus("next");
         return;
       }
       this.#update();
       const last = [...this.#focusables].at(-1);
-      if (last) {
-        focusElement(last);
-      } else {
-        const previous2 = getPreviousFocusable(document.body, {
-          anchor: this.#entranceSentinel,
-          composed: true
-        });
-        previous2 && focusElement(previous2);
-      }
+      last ? focusElement(last) : this.#moveFocus("previous");
     }
   };
   #onKeyDown = (event) => {
@@ -479,9 +463,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,13 +505,7 @@ var Portal = class {
     return sentinel;
   }
   #focusSentinel(isPrevious) {
-    const sentinel = isPrevious ? this.#entranceSentinel : this.#exitSentinel;
-    if (isPrevious) {
-      sentinel.focus();
-    } else {
-      this.#timer && cancelAnimationFrame(this.#timer);
-      this.#timer = requestAnimationFrame(() => sentinel.focus());
-    }
+    (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus();
   }
   #getFocusables() {
     return getFocusables(this.#host, {
@@ -562,7 +537,7 @@ function containsComposed2(container, element) {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.26
+ * @version 1.2.28
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.bundle.js

@@ -386,7 +386,6 @@ var Portal = class {
   #exitSentinel;
   #focusables = /* @__PURE__ */ new Set();
   #controller = null;
-  #timer;
   #isDestroyed = false;
   constructor(host, container) {
     this.#host = host;
@@ -406,10 +405,6 @@ var Portal = class {
     this.#isDestroyed = true;
     this.#controller?.abort();
     this.#controller = null;
-    if (this.#timer !== void 0) {
-      cancelAnimationFrame(this.#timer);
-      this.#timer = void 0;
-    }
     restoreAttributes([...this.#focusables]);
     this.#focusables.clear();
     this.#exitSentinel.after(this.#host);
@@ -424,48 +419,37 @@ 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;
       }
       this.#update();
       const first = [...this.#focusables][0];
-      if (first) {
-        focusElement(first);
-      } else {
-        const next = getNextFocusable(document.body, {
-          anchor: this.#exitSentinel,
-          composed: true
-        });
-        next && focusElement(next);
-      }
-    } else if (current === this.#exitSentinel) {
+      first ? focusElement(first) : this.#moveFocus("next");
+    } else {
       if (this.#host.contains(previous)) {
         this.#moveFocus("next");
         return;
       }
       this.#update();
       const last = [...this.#focusables].at(-1);
-      if (last) {
-        focusElement(last);
-      } else {
-        const previous2 = getPreviousFocusable(document.body, {
-          anchor: this.#entranceSentinel,
-          composed: true
-        });
-        previous2 && focusElement(previous2);
-      }
+      last ? focusElement(last) : this.#moveFocus("previous");
     }
   };
   #onKeyDown = (event) => {
@@ -477,9 +461,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,13 +503,7 @@ var Portal = class {
     return sentinel;
   }
   #focusSentinel(isPrevious) {
-    const sentinel = isPrevious ? this.#entranceSentinel : this.#exitSentinel;
-    if (isPrevious) {
-      sentinel.focus();
-    } else {
-      this.#timer && cancelAnimationFrame(this.#timer);
-      this.#timer = requestAnimationFrame(() => sentinel.focus());
-    }
+    (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus();
   }
   #getFocusables() {
     return getFocusables(this.#host, {
@@ -560,7 +535,7 @@ function containsComposed2(container, element) {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.26
+ * @version 1.2.28
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.cjs

@@ -31,7 +31,6 @@ var Portal = class {
   #exitSentinel;
   #focusables = /* @__PURE__ */ new Set();
   #controller = null;
-  #timer;
   #isDestroyed = false;
   constructor(host, container) {
     this.#host = host;
@@ -51,10 +50,6 @@ var Portal = class {
     this.#isDestroyed = true;
     this.#controller?.abort();
     this.#controller = null;
-    if (this.#timer !== void 0) {
-      cancelAnimationFrame(this.#timer);
-      this.#timer = void 0;
-    }
     attributesUtils.restoreAttributes([...this.#focusables]);
     this.#focusables.clear();
     this.#exitSentinel.after(this.#host);
@@ -69,48 +64,37 @@ 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;
       }
       this.#update();
       const first = [...this.#focusables][0];
-      if (first) {
-        powerFocusable.focusElement(first);
-      } else {
-        const next = powerFocusable.getNextFocusable(document.body, {
-          anchor: this.#exitSentinel,
-          composed: true
-        });
-        next && powerFocusable.focusElement(next);
-      }
-    } else if (current === this.#exitSentinel) {
+      first ? powerFocusable.focusElement(first) : this.#moveFocus("next");
+    } else {
       if (this.#host.contains(previous)) {
         this.#moveFocus("next");
         return;
       }
       this.#update();
       const last = [...this.#focusables].at(-1);
-      if (last) {
-        powerFocusable.focusElement(last);
-      } else {
-        const previous2 = powerFocusable.getPreviousFocusable(document.body, {
-          anchor: this.#entranceSentinel,
-          composed: true
-        });
-        previous2 && powerFocusable.focusElement(previous2);
-      }
+      last ? powerFocusable.focusElement(last) : this.#moveFocus("previous");
     }
   };
   #onKeyDown = (event) => {
@@ -122,9 +106,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,13 +148,7 @@ var Portal = class {
     return sentinel;
   }
   #focusSentinel(isPrevious) {
-    const sentinel = isPrevious ? this.#entranceSentinel : this.#exitSentinel;
-    if (isPrevious) {
-      sentinel.focus();
-    } else {
-      this.#timer && cancelAnimationFrame(this.#timer);
-      this.#timer = requestAnimationFrame(() => sentinel.focus());
-    }
+    (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus();
   }
   #getFocusables() {
     return powerFocusable.getFocusables(this.#host, {
@@ -205,7 +180,7 @@ function containsComposed(container, element) {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.26
+ * @version 1.2.28
  * @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.26
+ * @version 1.2.28
  * @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.26
+ * @version 1.2.28
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -1,5 +1,5 @@
 import { restoreAttributes, saveAttributes } from '@y14e/attributes-utils';
-import { focusElement, getNextFocusable, getPreviousFocusable, getActiveElement, getFocusables } from 'power-focusable';
+import { focusElement, getActiveElement, getFocusables, getPreviousFocusable, getNextFocusable } from 'power-focusable';
 
 // src/index.ts
 var VISUALLY_HIDDEN_CSS = `border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; user-select: none; white-space: nowrap; width: 1px;`;
@@ -29,7 +29,6 @@ var Portal = class {
   #exitSentinel;
   #focusables = /* @__PURE__ */ new Set();
   #controller = null;
-  #timer;
   #isDestroyed = false;
   constructor(host, container) {
     this.#host = host;
@@ -49,10 +48,6 @@ var Portal = class {
     this.#isDestroyed = true;
     this.#controller?.abort();
     this.#controller = null;
-    if (this.#timer !== void 0) {
-      cancelAnimationFrame(this.#timer);
-      this.#timer = void 0;
-    }
     restoreAttributes([...this.#focusables]);
     this.#focusables.clear();
     this.#exitSentinel.after(this.#host);
@@ -67,48 +62,37 @@ 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;
       }
       this.#update();
       const first = [...this.#focusables][0];
-      if (first) {
-        focusElement(first);
-      } else {
-        const next = getNextFocusable(document.body, {
-          anchor: this.#exitSentinel,
-          composed: true
-        });
-        next && focusElement(next);
-      }
-    } else if (current === this.#exitSentinel) {
+      first ? focusElement(first) : this.#moveFocus("next");
+    } else {
       if (this.#host.contains(previous)) {
         this.#moveFocus("next");
         return;
       }
       this.#update();
       const last = [...this.#focusables].at(-1);
-      if (last) {
-        focusElement(last);
-      } else {
-        const previous2 = getPreviousFocusable(document.body, {
-          anchor: this.#entranceSentinel,
-          composed: true
-        });
-        previous2 && focusElement(previous2);
-      }
+      last ? focusElement(last) : this.#moveFocus("previous");
     }
   };
   #onKeyDown = (event) => {
@@ -120,9 +104,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,13 +146,7 @@ var Portal = class {
     return sentinel;
   }
   #focusSentinel(isPrevious) {
-    const sentinel = isPrevious ? this.#entranceSentinel : this.#exitSentinel;
-    if (isPrevious) {
-      sentinel.focus();
-    } else {
-      this.#timer && cancelAnimationFrame(this.#timer);
-      this.#timer = requestAnimationFrame(() => sentinel.focus());
-    }
+    (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus();
   }
   #getFocusables() {
     return getFocusables(this.#host, {
@@ -203,7 +178,7 @@ function containsComposed(container, element) {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.26
+ * @version 1.2.28
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/portal",
-  "version": "1.2.26",
+  "version": "1.2.28",
   "description": "Lightweight DOM portal (teleport) utility with fully focus management",
   "type": "module",
   "main": "./dist/index.cjs",