@y14e/portal 1.1.0 → 1.1.1

package/dist/index.cjs

@@ -295,8 +295,7 @@ var Portal = class {
   #container;
   #entranceSentinel;
   #exitSentinel;
-  #focusables = /* @__PURE__ */ new Set();
-  #tabIndexes = /* @__PURE__ */ new Map();
+  #tabIndexes = /* @__PURE__ */ new WeakMap();
   #controller = null;
   #isDestroyed = false;
   constructor(host, container) {
@@ -313,7 +312,10 @@ var Portal = class {
     this.#isDestroyed = true;
     this.#controller?.abort();
     this.#controller = null;
-    this.#focusables.forEach((focusable) => {
+    this.#getFocusables().forEach((focusable) => {
+      if (!this.#tabIndexes.has(focusable)) {
+        return;
+      }
       const index = this.#tabIndexes.get(focusable);
       if (index == null) {
         focusable.removeAttribute("tabindex");
@@ -321,8 +323,6 @@ var Portal = class {
         focusable.setAttribute("tabindex", index);
       }
     });
-    this.#focusables.clear();
-    this.#tabIndexes.clear();
     this.#exitSentinel.after(this.#host);
     this.#entranceSentinel.remove();
     this.#exitSentinel.remove();
@@ -332,7 +332,10 @@ var Portal = class {
     this.#host.before(this.#entranceSentinel);
     this.#entranceSentinel.after(this.#exitSentinel);
     this.#container.append(this.#host);
-    this.#update();
+    this.#getFocusables().forEach((focusable) => {
+      this.#tabIndexes.set(focusable, focusable.getAttribute("tabindex"));
+      focusable.setAttribute("tabindex", "-1");
+    });
     this.#controller = new AbortController();
     const { signal } = this.#controller;
     document.addEventListener("focusin", this.#onFocusIn, {
@@ -355,16 +358,14 @@ var Portal = class {
       if (this.#host.contains(before)) {
         this.#moveFocus("previous");
       } else {
-        this.#update();
-        const first = [...this.#focusables][0];
+        const first = this.#getFocusables()[0];
         first && focusElement(first);
       }
     } else if (current === this.#exitSentinel) {
       if (this.#host.contains(before)) {
         this.#moveFocus("next");
       } else {
-        this.#update();
-        const last = [...this.#focusables].at(-1);
+        const last = this.#getFocusables().at(-1);
         last && focusElement(last);
       }
     }
@@ -380,53 +381,22 @@ var Portal = class {
     if (!this.#host.contains(active)) {
       return;
     }
-    this.#update();
-    const focusables = [...this.#focusables];
-    if (!focusables.length) {
+    if (!this.#getFocusables().length) {
       event.preventDefault();
       (event.shiftKey ? this.#entranceSentinel : this.#exitSentinel).focus();
-      return;
     }
-    const index = focusables.indexOf(active);
+    const index = this.#getFocusables().indexOf(active);
     if (index === -1) {
       return;
     }
     event.preventDefault();
-    const focusable = focusables[index + (event.shiftKey ? -1 : 1)];
+    const focusable = this.#getFocusables()[index + (event.shiftKey ? -1 : 1)];
     if (focusable) {
       focusElement(focusable);
     } else {
       (event.shiftKey ? this.#entranceSentinel : this.#exitSentinel).focus();
     }
   };
-  #update() {
-    const current = new Set(
-      getFocusables(this.#host, { composed: true })
-    );
-    this.#focusables.forEach((focusable) => {
-      if (current.has(focusable)) {
-        return;
-      }
-      if (focusable.isConnected) {
-        const index = this.#tabIndexes.get(focusable);
-        if (index == null) {
-          focusable.removeAttribute("tabindex");
-        } else {
-          focusable.setAttribute("tabindex", index);
-        }
-      }
-      this.#focusables.delete(focusable);
-      this.#tabIndexes.delete(focusable);
-    });
-    const active = getActiveElement2();
-    current.forEach((c) => {
-      if (!this.#tabIndexes.has(c)) {
-        this.#tabIndexes.set(c, c.getAttribute("tabindex"));
-      }
-      c.setAttribute("tabindex", c === active ? "0" : "-1");
-      this.#focusables.add(c);
-    });
-  }
   #createSentinel() {
     const sentinel = document.createElement("span");
     sentinel.setAttribute("aria-hidden", "true");
@@ -435,6 +405,12 @@ var Portal = class {
     sentinel.style.cssText += VISUALLY_HIDDEN_CSS;
     return sentinel;
   }
+  #getFocusables() {
+    return getFocusables(this.#host, {
+      composed: true,
+      include: (element) => this.#tabIndexes.has(element)
+    });
+  }
   #moveFocus(direction) {
     const options = {
       anchor: direction === "previous" ? this.#entranceSentinel : this.#exitSentinel,
@@ -469,7 +445,7 @@ function getActiveElement2() {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.1.0
+ * @version 1.1.1
  * @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.1.0
+ * @version 1.1.1
  * @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.1.0
+ * @version 1.1.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -293,8 +293,7 @@ var Portal = class {
   #container;
   #entranceSentinel;
   #exitSentinel;
-  #focusables = /* @__PURE__ */ new Set();
-  #tabIndexes = /* @__PURE__ */ new Map();
+  #tabIndexes = /* @__PURE__ */ new WeakMap();
   #controller = null;
   #isDestroyed = false;
   constructor(host, container) {
@@ -311,7 +310,10 @@ var Portal = class {
     this.#isDestroyed = true;
     this.#controller?.abort();
     this.#controller = null;
-    this.#focusables.forEach((focusable) => {
+    this.#getFocusables().forEach((focusable) => {
+      if (!this.#tabIndexes.has(focusable)) {
+        return;
+      }
       const index = this.#tabIndexes.get(focusable);
       if (index == null) {
         focusable.removeAttribute("tabindex");
@@ -319,8 +321,6 @@ var Portal = class {
         focusable.setAttribute("tabindex", index);
       }
     });
-    this.#focusables.clear();
-    this.#tabIndexes.clear();
     this.#exitSentinel.after(this.#host);
     this.#entranceSentinel.remove();
     this.#exitSentinel.remove();
@@ -330,7 +330,10 @@ var Portal = class {
     this.#host.before(this.#entranceSentinel);
     this.#entranceSentinel.after(this.#exitSentinel);
     this.#container.append(this.#host);
-    this.#update();
+    this.#getFocusables().forEach((focusable) => {
+      this.#tabIndexes.set(focusable, focusable.getAttribute("tabindex"));
+      focusable.setAttribute("tabindex", "-1");
+    });
     this.#controller = new AbortController();
     const { signal } = this.#controller;
     document.addEventListener("focusin", this.#onFocusIn, {
@@ -353,16 +356,14 @@ var Portal = class {
       if (this.#host.contains(before)) {
         this.#moveFocus("previous");
       } else {
-        this.#update();
-        const first = [...this.#focusables][0];
+        const first = this.#getFocusables()[0];
         first && focusElement(first);
       }
     } else if (current === this.#exitSentinel) {
       if (this.#host.contains(before)) {
         this.#moveFocus("next");
       } else {
-        this.#update();
-        const last = [...this.#focusables].at(-1);
+        const last = this.#getFocusables().at(-1);
         last && focusElement(last);
       }
     }
@@ -378,53 +379,22 @@ var Portal = class {
     if (!this.#host.contains(active)) {
       return;
     }
-    this.#update();
-    const focusables = [...this.#focusables];
-    if (!focusables.length) {
+    if (!this.#getFocusables().length) {
       event.preventDefault();
       (event.shiftKey ? this.#entranceSentinel : this.#exitSentinel).focus();
-      return;
     }
-    const index = focusables.indexOf(active);
+    const index = this.#getFocusables().indexOf(active);
     if (index === -1) {
       return;
     }
     event.preventDefault();
-    const focusable = focusables[index + (event.shiftKey ? -1 : 1)];
+    const focusable = this.#getFocusables()[index + (event.shiftKey ? -1 : 1)];
     if (focusable) {
       focusElement(focusable);
     } else {
       (event.shiftKey ? this.#entranceSentinel : this.#exitSentinel).focus();
     }
   };
-  #update() {
-    const current = new Set(
-      getFocusables(this.#host, { composed: true })
-    );
-    this.#focusables.forEach((focusable) => {
-      if (current.has(focusable)) {
-        return;
-      }
-      if (focusable.isConnected) {
-        const index = this.#tabIndexes.get(focusable);
-        if (index == null) {
-          focusable.removeAttribute("tabindex");
-        } else {
-          focusable.setAttribute("tabindex", index);
-        }
-      }
-      this.#focusables.delete(focusable);
-      this.#tabIndexes.delete(focusable);
-    });
-    const active = getActiveElement2();
-    current.forEach((c) => {
-      if (!this.#tabIndexes.has(c)) {
-        this.#tabIndexes.set(c, c.getAttribute("tabindex"));
-      }
-      c.setAttribute("tabindex", c === active ? "0" : "-1");
-      this.#focusables.add(c);
-    });
-  }
   #createSentinel() {
     const sentinel = document.createElement("span");
     sentinel.setAttribute("aria-hidden", "true");
@@ -433,6 +403,12 @@ var Portal = class {
     sentinel.style.cssText += VISUALLY_HIDDEN_CSS;
     return sentinel;
   }
+  #getFocusables() {
+    return getFocusables(this.#host, {
+      composed: true,
+      include: (element) => this.#tabIndexes.has(element)
+    });
+  }
   #moveFocus(direction) {
     const options = {
       anchor: direction === "previous" ? this.#entranceSentinel : this.#exitSentinel,
@@ -467,7 +443,7 @@ function getActiveElement2() {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.1.0
+ * @version 1.1.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

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