@y14e/portal 1.2.12 → 1.2.14

package/README.md

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

package/dist/index.cjs

@@ -400,6 +400,7 @@ var Portal = class {
   #exitSentinel;
   #focusables = /* @__PURE__ */ new Set();
   #controller = null;
+  #timer;
   #isDestroyed = false;
   constructor(host, container) {
     this.#host = host;
@@ -415,6 +416,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);
@@ -452,7 +457,15 @@ var Portal = class {
       }
       this.#update();
       const first = [...this.#focusables][0];
-      first && focusElement(first);
+      if (first) {
+        focusElement(first);
+      } else {
+        const next = getNextFocusable(document.body, {
+          anchor: this.#exitSentinel,
+          composed: true
+        });
+        next && focusElement(next);
+      }
       return;
     }
     if (current === this.#exitSentinel) {
@@ -462,7 +475,15 @@ var Portal = class {
       }
       this.#update();
       const last = [...this.#focusables].at(-1);
-      last && focusElement(last);
+      if (last) {
+        focusElement(last);
+      } else {
+        const previous = getPreviousFocusable(document.body, {
+          anchor: this.#entranceSentinel,
+          composed: true
+        });
+        previous && focusElement(previous);
+      }
       return;
     }
   };
@@ -523,7 +544,8 @@ var Portal = class {
     return sentinel;
   }
   #focusSentinel(isPrevious) {
-    requestAnimationFrame(
+    this.#timer && cancelAnimationFrame(this.#timer);
+    this.#timer = requestAnimationFrame(
       () => (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus()
     );
   }
@@ -567,7 +589,7 @@ function getActiveElement2() {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.12
+ * @version 1.2.14
  * @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.12
+ * @version 1.2.14
  * @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.12
+ * @version 1.2.14
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -398,6 +398,7 @@ var Portal = class {
   #exitSentinel;
   #focusables = /* @__PURE__ */ new Set();
   #controller = null;
+  #timer;
   #isDestroyed = false;
   constructor(host, container) {
     this.#host = host;
@@ -413,6 +414,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);
@@ -450,7 +455,15 @@ var Portal = class {
       }
       this.#update();
       const first = [...this.#focusables][0];
-      first && focusElement(first);
+      if (first) {
+        focusElement(first);
+      } else {
+        const next = getNextFocusable(document.body, {
+          anchor: this.#exitSentinel,
+          composed: true
+        });
+        next && focusElement(next);
+      }
       return;
     }
     if (current === this.#exitSentinel) {
@@ -460,7 +473,15 @@ var Portal = class {
       }
       this.#update();
       const last = [...this.#focusables].at(-1);
-      last && focusElement(last);
+      if (last) {
+        focusElement(last);
+      } else {
+        const previous = getPreviousFocusable(document.body, {
+          anchor: this.#entranceSentinel,
+          composed: true
+        });
+        previous && focusElement(previous);
+      }
       return;
     }
   };
@@ -521,7 +542,8 @@ var Portal = class {
     return sentinel;
   }
   #focusSentinel(isPrevious) {
-    requestAnimationFrame(
+    this.#timer && cancelAnimationFrame(this.#timer);
+    this.#timer = requestAnimationFrame(
       () => (isPrevious ? this.#entranceSentinel : this.#exitSentinel).focus()
     );
   }
@@ -565,7 +587,7 @@ function getActiveElement2() {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.12
+ * @version 1.2.14
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

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