@y14e/portal 1.1.1 → 1.2.0

package/dist/index.cjs

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

package/dist/index.js

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

package/package.json

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