@y14e/portal 1.0.6 → 1.1.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,53 @@ var Portal = class {
     if (!this.#host.contains(active)) {
       return;
     }
-    if (!this.#getFocusables().length) {
+    this.#update();
+    const focusables = [...this.#focusables];
+    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 = 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");
@@ -405,12 +435,6 @@ 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,
@@ -445,7 +469,7 @@ function getActiveElement2() {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.0.6
+ * @version 1.1.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -467,5 +491,4 @@ power-focusable/dist/index.js:
    *)
 */
 
-exports.Portal = Portal;
 exports.createPortal = createPortal;

package/dist/index.d.cts

@@ -3,17 +3,12 @@
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.0.6
+ * @version 1.1.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
  * @see {@link https://github.com/y14e/portal}
  */
 declare function createPortal(host: Element, container?: HTMLElement): () => void;
-declare class Portal {
-    #private;
-    constructor(host: Element, container: Element);
-    destroy(): void;
-}
 
-export { Portal, createPortal };
+export { createPortal };

package/dist/index.d.ts

@@ -3,17 +3,12 @@
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.0.6
+ * @version 1.1.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
  * @see {@link https://github.com/y14e/portal}
  */
 declare function createPortal(host: Element, container?: HTMLElement): () => void;
-declare class Portal {
-    #private;
-    constructor(host: Element, container: Element);
-    destroy(): void;
-}
 
-export { Portal, createPortal };
+export { createPortal };

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,53 @@ var Portal = class {
     if (!this.#host.contains(active)) {
       return;
     }
-    if (!this.#getFocusables().length) {
+    this.#update();
+    const focusables = [...this.#focusables];
+    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 = 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");
@@ -403,12 +433,6 @@ 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,
@@ -443,7 +467,7 @@ function getActiveElement2() {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.0.6
+ * @version 1.1.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -465,4 +489,4 @@ power-focusable/dist/index.js:
    *)
 */
 
-export { Portal, createPortal };
+export { createPortal };

package/package.json

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