@y14e/portal 0.0.2 → 0.0.3

package/README.md

@@ -18,7 +18,7 @@ import { createPortal } from '@y14e/portal';
 // CDNs
 import { createPortal } from 'https://esm.sh/@y14e/portal'
 // or
-import { createPortal } from 'https://cdn.jsdelivr.net/npm/@y14e/portal/dist/index.js';
+import { createPortal } from 'https://cdn.jsdelivr.net/npm/@y14e/portal/+esm';
 // or
 import { createPortal } from 'https://unpkg.com/@y14e/portal/dist/index.js';
 ```

package/dist/index.cjs

@@ -273,6 +273,7 @@ var Portal = class {
   #portal;
   #entranceSentinel;
   #exitSentinel;
+  #focusables = [];
   #tabIndexes = /* @__PURE__ */ new WeakMap();
   #controller = null;
   #isDestroyed = false;
@@ -284,6 +285,7 @@ var Portal = class {
     this.#portal.setAttribute("tabindex", "-1");
     this.#entranceSentinel = this.#createSentinel();
     this.#exitSentinel = this.#createSentinel();
+    this.#focusables = getFocusables(this.#source, { composed: true });
     this.#initialize();
   }
   destroy() {
@@ -293,7 +295,7 @@ var Portal = class {
     this.#isDestroyed = true;
     this.#controller?.abort();
     this.#controller = null;
-    this.#getFocusables().forEach((focusable) => {
+    this.#focusables.forEach((focusable) => {
       const index = this.#tabIndexes.get(focusable);
       if (index === null) {
         focusable.removeAttribute("tabindex");
@@ -301,6 +303,7 @@ var Portal = class {
         focusable.setAttribute("tabindex", String(index));
       }
     });
+    this.#focusables.length = 0;
     this.#exitSentinel.after(this.#source);
     this.#portal.remove();
     this.#entranceSentinel.remove();
@@ -314,13 +317,11 @@ var Portal = class {
     this.#entranceSentinel.after(this.#exitSentinel);
     this.#portal.append(this.#source);
     this.#container.append(this.#portal);
-    getFocusables(this.#source, { composed: true }).forEach(
-      (focusable) => {
-        const index = focusable.getAttribute("tabindex")?.trim();
-        this.#tabIndexes.set(focusable, index === null ? null : Number(index));
-        focusable.setAttribute("tabindex", "-1");
-      }
-    );
+    this.#focusables.forEach((focusable) => {
+      const index = focusable.getAttribute("tabindex")?.trim();
+      this.#tabIndexes.set(focusable, index === null ? null : Number(index));
+      focusable.setAttribute("tabindex", "-1");
+    });
     this.#controller = new AbortController();
     const { signal } = this.#controller;
     document.addEventListener("focusin", this.#onFocusIn, {
@@ -338,19 +339,18 @@ var Portal = class {
     if (!(before instanceof Element)) {
       return;
     }
-    const focusables = this.#getFocusables();
     if (current === this.#entranceSentinel) {
       if (this.#source.contains(before)) {
         this.#focusOutside("backward");
       } else {
-        const first = focusables[0];
+        const first = this.#focusables[0];
         first && focus(first);
       }
     } else if (current === this.#exitSentinel) {
       if (this.#source.contains(before)) {
         this.#focusOutside("forward");
       } else {
-        const last = focusables.at(-1);
+        const last = this.#focusables.at(-1);
         last && focus(last);
       }
     }
@@ -366,17 +366,16 @@ var Portal = class {
     if (!this.#source.contains(active)) {
       return;
     }
-    const focusables = this.#getFocusables();
-    if (!focusables.length) {
+    if (!this.#focusables.length) {
       event.preventDefault();
       (event.shiftKey ? this.#entranceSentinel : this.#exitSentinel).focus();
     }
-    const index = focusables.indexOf(active);
+    const index = this.#focusables.indexOf(active);
     if (index === -1) {
       return;
     }
     event.preventDefault();
-    const focusable = focusables[index + (event.shiftKey ? -1 : 1)];
+    const focusable = this.#focusables[index + (event.shiftKey ? -1 : 1)];
     if (focusable) {
       focus(focusable);
     } else {
@@ -398,9 +397,6 @@ var Portal = class {
     const focusable = direction === "backward" ? getPreviousFocusable(document.body, options) : getNextFocusable(document.body, options);
     focusable && focus(focusable);
   }
-  #getFocusables() {
-    return getFocusables(this.#source, { composed: true });
-  }
 };
 function focus(element) {
   "focus" in element && typeof element.focus === "function" && element.focus();
@@ -417,7 +413,7 @@ function getActiveElement2() {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers, and etc.
  *
- * @version 0.0.2
+ * @version 0.0.3
  * @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, and etc.
  *
- * @version 0.0.2
+ * @version 0.0.3
  * @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, and etc.
  *
- * @version 0.0.2
+ * @version 0.0.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -271,6 +271,7 @@ var Portal = class {
   #portal;
   #entranceSentinel;
   #exitSentinel;
+  #focusables = [];
   #tabIndexes = /* @__PURE__ */ new WeakMap();
   #controller = null;
   #isDestroyed = false;
@@ -282,6 +283,7 @@ var Portal = class {
     this.#portal.setAttribute("tabindex", "-1");
     this.#entranceSentinel = this.#createSentinel();
     this.#exitSentinel = this.#createSentinel();
+    this.#focusables = getFocusables(this.#source, { composed: true });
     this.#initialize();
   }
   destroy() {
@@ -291,7 +293,7 @@ var Portal = class {
     this.#isDestroyed = true;
     this.#controller?.abort();
     this.#controller = null;
-    this.#getFocusables().forEach((focusable) => {
+    this.#focusables.forEach((focusable) => {
       const index = this.#tabIndexes.get(focusable);
       if (index === null) {
         focusable.removeAttribute("tabindex");
@@ -299,6 +301,7 @@ var Portal = class {
         focusable.setAttribute("tabindex", String(index));
       }
     });
+    this.#focusables.length = 0;
     this.#exitSentinel.after(this.#source);
     this.#portal.remove();
     this.#entranceSentinel.remove();
@@ -312,13 +315,11 @@ var Portal = class {
     this.#entranceSentinel.after(this.#exitSentinel);
     this.#portal.append(this.#source);
     this.#container.append(this.#portal);
-    getFocusables(this.#source, { composed: true }).forEach(
-      (focusable) => {
-        const index = focusable.getAttribute("tabindex")?.trim();
-        this.#tabIndexes.set(focusable, index === null ? null : Number(index));
-        focusable.setAttribute("tabindex", "-1");
-      }
-    );
+    this.#focusables.forEach((focusable) => {
+      const index = focusable.getAttribute("tabindex")?.trim();
+      this.#tabIndexes.set(focusable, index === null ? null : Number(index));
+      focusable.setAttribute("tabindex", "-1");
+    });
     this.#controller = new AbortController();
     const { signal } = this.#controller;
     document.addEventListener("focusin", this.#onFocusIn, {
@@ -336,19 +337,18 @@ var Portal = class {
     if (!(before instanceof Element)) {
       return;
     }
-    const focusables = this.#getFocusables();
     if (current === this.#entranceSentinel) {
       if (this.#source.contains(before)) {
         this.#focusOutside("backward");
       } else {
-        const first = focusables[0];
+        const first = this.#focusables[0];
         first && focus(first);
       }
     } else if (current === this.#exitSentinel) {
       if (this.#source.contains(before)) {
         this.#focusOutside("forward");
       } else {
-        const last = focusables.at(-1);
+        const last = this.#focusables.at(-1);
         last && focus(last);
       }
     }
@@ -364,17 +364,16 @@ var Portal = class {
     if (!this.#source.contains(active)) {
       return;
     }
-    const focusables = this.#getFocusables();
-    if (!focusables.length) {
+    if (!this.#focusables.length) {
       event.preventDefault();
       (event.shiftKey ? this.#entranceSentinel : this.#exitSentinel).focus();
     }
-    const index = focusables.indexOf(active);
+    const index = this.#focusables.indexOf(active);
     if (index === -1) {
       return;
     }
     event.preventDefault();
-    const focusable = focusables[index + (event.shiftKey ? -1 : 1)];
+    const focusable = this.#focusables[index + (event.shiftKey ? -1 : 1)];
     if (focusable) {
       focus(focusable);
     } else {
@@ -396,9 +395,6 @@ var Portal = class {
     const focusable = direction === "backward" ? getPreviousFocusable(document.body, options) : getNextFocusable(document.body, options);
     focusable && focus(focusable);
   }
-  #getFocusables() {
-    return getFocusables(this.#source, { composed: true });
-  }
 };
 function focus(element) {
   "focus" in element && typeof element.focus === "function" && element.focus();
@@ -415,7 +411,7 @@ function getActiveElement2() {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers, and etc.
  *
- * @version 0.0.2
+ * @version 0.0.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

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