@y14e/portal 1.2.22 → 1.2.24

package/README.md

@@ -10,14 +10,14 @@ npm i @y14e/portal
 
 ```ts
 // npm
-import { createPortal } from '@y14e/portal@1.2.22';
+import { createPortal } from '@y14e/portal@1.2.24';
 
 // CDNs
-import { createPortal } from 'https://esm.sh/@y14e/portal@1.2.22';
+import { createPortal } from 'https://esm.sh/@y14e/portal@1.2.24';
 // or
-import { createPortal } from 'https://cdn.jsdelivr.net/npm/@y14e/portal@1.2.22/+esm';
+import { createPortal } from 'https://cdn.jsdelivr.net/npm/@y14e/portal@1.2.24/+esm';
 // or
-import { createPortal } from 'https://esm.unpkg.com/@y14e/portal@1.2.22';
+import { createPortal } from 'https://esm.unpkg.com/@y14e/portal@1.2.24';
 ```
 
 ## 📦 APIs

package/dist/index.bundle.cjs

@@ -388,6 +388,7 @@ var Portal = class {
   #exitSentinel;
   #focusables = /* @__PURE__ */ new Set();
   #controller = null;
+  #timer;
   #isDestroyed = false;
   constructor(host, container) {
     this.#host = host;
@@ -407,6 +408,10 @@ 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);
@@ -421,14 +426,8 @@ var Portal = class {
     this.#update();
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    document.addEventListener("focusin", this.#onFocusIn, {
-      capture: true,
-      signal
-    });
-    document.addEventListener("keydown", this.#onKeyDown, {
-      capture: true,
-      signal
-    });
+    document.addEventListener("focusin", this.#onFocusIn, { signal });
+    document.addEventListener("keydown", this.#onKeyDown, { signal });
     this.#host.setAttribute("data-portaled", "");
   }
   #onFocusIn = (event) => {
@@ -525,7 +524,10 @@ var Portal = class {
     return sentinel;
   }
   #focusSentinel(isPrevious) {
-    (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus();
+    this.#timer && cancelAnimationFrame(this.#timer);
+    this.#timer = requestAnimationFrame(
+      () => (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus()
+    );
   }
   #getFocusables() {
     return getFocusables(this.#host, {
@@ -557,7 +559,7 @@ function containsComposed2(container, element) {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.22
+ * @version 1.2.24
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.bundle.js

@@ -386,6 +386,7 @@ var Portal = class {
   #exitSentinel;
   #focusables = /* @__PURE__ */ new Set();
   #controller = null;
+  #timer;
   #isDestroyed = false;
   constructor(host, container) {
     this.#host = host;
@@ -405,6 +406,10 @@ 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);
@@ -419,14 +424,8 @@ var Portal = class {
     this.#update();
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    document.addEventListener("focusin", this.#onFocusIn, {
-      capture: true,
-      signal
-    });
-    document.addEventListener("keydown", this.#onKeyDown, {
-      capture: true,
-      signal
-    });
+    document.addEventListener("focusin", this.#onFocusIn, { signal });
+    document.addEventListener("keydown", this.#onKeyDown, { signal });
     this.#host.setAttribute("data-portaled", "");
   }
   #onFocusIn = (event) => {
@@ -523,7 +522,10 @@ var Portal = class {
     return sentinel;
   }
   #focusSentinel(isPrevious) {
-    (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus();
+    this.#timer && cancelAnimationFrame(this.#timer);
+    this.#timer = requestAnimationFrame(
+      () => (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus()
+    );
   }
   #getFocusables() {
     return getFocusables(this.#host, {
@@ -555,7 +557,7 @@ function containsComposed2(container, element) {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.22
+ * @version 1.2.24
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.cjs

@@ -31,6 +31,7 @@ var Portal = class {
   #exitSentinel;
   #focusables = /* @__PURE__ */ new Set();
   #controller = null;
+  #timer;
   #isDestroyed = false;
   constructor(host, container) {
     this.#host = host;
@@ -50,6 +51,10 @@ 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);
@@ -64,14 +69,8 @@ var Portal = class {
     this.#update();
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    document.addEventListener("focusin", this.#onFocusIn, {
-      capture: true,
-      signal
-    });
-    document.addEventListener("keydown", this.#onKeyDown, {
-      capture: true,
-      signal
-    });
+    document.addEventListener("focusin", this.#onFocusIn, { signal });
+    document.addEventListener("keydown", this.#onKeyDown, { signal });
     this.#host.setAttribute("data-portaled", "");
   }
   #onFocusIn = (event) => {
@@ -168,7 +167,10 @@ var Portal = class {
     return sentinel;
   }
   #focusSentinel(isPrevious) {
-    (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus();
+    this.#timer && cancelAnimationFrame(this.#timer);
+    this.#timer = requestAnimationFrame(
+      () => (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus()
+    );
   }
   #getFocusables() {
     return powerFocusable.getFocusables(this.#host, {
@@ -200,7 +202,7 @@ function containsComposed(container, element) {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.22
+ * @version 1.2.24
  * @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.22
+ * @version 1.2.24
  * @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.22
+ * @version 1.2.24
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -29,6 +29,7 @@ var Portal = class {
   #exitSentinel;
   #focusables = /* @__PURE__ */ new Set();
   #controller = null;
+  #timer;
   #isDestroyed = false;
   constructor(host, container) {
     this.#host = host;
@@ -48,6 +49,10 @@ 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);
@@ -62,14 +67,8 @@ var Portal = class {
     this.#update();
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    document.addEventListener("focusin", this.#onFocusIn, {
-      capture: true,
-      signal
-    });
-    document.addEventListener("keydown", this.#onKeyDown, {
-      capture: true,
-      signal
-    });
+    document.addEventListener("focusin", this.#onFocusIn, { signal });
+    document.addEventListener("keydown", this.#onKeyDown, { signal });
     this.#host.setAttribute("data-portaled", "");
   }
   #onFocusIn = (event) => {
@@ -166,7 +165,10 @@ var Portal = class {
     return sentinel;
   }
   #focusSentinel(isPrevious) {
-    (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus();
+    this.#timer && cancelAnimationFrame(this.#timer);
+    this.#timer = requestAnimationFrame(
+      () => (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus()
+    );
   }
   #getFocusables() {
     return getFocusables(this.#host, {
@@ -198,7 +200,7 @@ function containsComposed(container, element) {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.22
+ * @version 1.2.24
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

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