@y14e/portal 1.2.13 → 1.2.15

package/README.md

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

package/dist/index.cjs

@@ -68,21 +68,16 @@ function getFocusables(container = document.body, options = {}) {
   const elements = [];
   if (composed || include) {
     let traverse2 = function(node) {
-      if (node instanceof Element) {
-        if (isFocusable(node, {
-          skipNegativeTabIndexCheck,
-          skipVisibilityCheck
-        }) || include?.(node)) {
-          elements[elements.length] = node;
-        }
+      if (!(node instanceof Element)) {
+        return;
+      }
+      if (isFocusable(node, { skipNegativeTabIndexCheck, skipVisibilityCheck }) || include?.(node)) {
+        elements[elements.length] = node;
       }
       const children = getComposedChildren(node);
       for (let i = 0, l = children.length; i < l; i++) {
         const child = children[i];
-        if (!child) {
-          continue;
-        }
-        traverse2(child);
+        child && traverse2(child);
       }
     };
     traverse2(container);
@@ -90,10 +85,7 @@ function getFocusables(container = document.body, options = {}) {
     const candidates = container.querySelectorAll(FOCUSABLE_SELECTOR);
     for (let i = 0, l = candidates.length; i < l; i++) {
       const candidate = candidates[i];
-      if (!(candidate instanceof Element)) {
-        continue;
-      }
-      if (isFocusable(candidate, {
+      if (candidate && isFocusable(candidate, {
         skipNegativeTabIndexCheck,
         skipVisibilityCheck
       })) {
@@ -280,23 +272,19 @@ function normalizeRadioGroup(elements) {
   for (const group of map.values()) {
     placeholder.add(group.find((radio) => radio.checked) ?? group[0]);
   }
-  return elements.filter((element) => {
-    if (isUngroupedRadio(element)) {
-      return placeholder.has(element);
-    }
-    return true;
-  });
+  return elements.filter(
+    (element) => isUngroupedRadio(element) ? placeholder.has(element) : true
+  );
 }
 function sortByTabIndex(elements) {
   const ordered = [];
   const natural = [];
   for (let i = 0, l = elements.length; i < l; i++) {
     const element = elements[i];
-    if (!element) {
-      continue;
+    if (element) {
+      const target = getTabIndex(element) > 0 ? ordered : natural;
+      target[target.length] = element;
     }
-    const target = getTabIndex(element) > 0 ? ordered : natural;
-    target[target.length] = element;
   }
   ordered.sort((a, b) => getTabIndex(a) - getTabIndex(b));
   let count = 0;
@@ -314,8 +302,9 @@ function containsComposed(container, element) {
   while (current) {
     if (current === container) {
       return true;
+    } else {
+      current = current instanceof ShadowRoot ? current.mode === "open" ? current.host : null : current.parentNode;
     }
-    current = current instanceof ShadowRoot ? current.mode === "open" ? current.host : null : current.parentNode;
   }
   return false;
 }
@@ -457,7 +446,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) {
@@ -467,7 +464,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;
     }
   };
@@ -485,18 +490,17 @@ var Portal = class {
     }
     this.#update();
     const focusables = this.#getFocusables();
-    if (!focusables.length) {
+    if (focusables.length) {
+      const index = focusables.indexOf(active);
+      if (index !== -1) {
+        event.preventDefault();
+        const focusable = focusables[index + (shiftKey ? -1 : 1)];
+        focusable ? focusElement(focusable) : this.#focusSentinel(shiftKey);
+      }
+    } else {
       event.preventDefault();
       this.#moveFocus(shiftKey ? "previous" : "next");
-      return;
-    }
-    const index = focusables.indexOf(active);
-    if (index === -1) {
-      return;
     }
-    event.preventDefault();
-    const focusable = focusables[index + (shiftKey ? -1 : 1)];
-    focusable ? focusElement(focusable) : this.#focusSentinel(shiftKey);
   };
   #update() {
     const current = /* @__PURE__ */ new Set([
@@ -504,19 +508,17 @@ var Portal = class {
       ...getFocusables(this.#host, { composed: true })
     ]);
     for (const focusable of this.#focusables) {
-      if (current.has(focusable)) {
-        continue;
+      if (!current.has(focusable)) {
+        focusable.isConnected && restoreAttributes([focusable]);
+        this.#focusables.delete(focusable);
       }
-      focusable.isConnected && restoreAttributes([focusable]);
-      this.#focusables.delete(focusable);
     }
     for (const focusable of current) {
-      if (this.#focusables.has(focusable)) {
-        continue;
+      if (!this.#focusables.has(focusable)) {
+        this.#focusables.add(focusable);
+        saveAttributes([focusable], ["tabindex"]);
+        focusable.setAttribute("tabindex", "-1");
       }
-      this.#focusables.add(focusable);
-      saveAttributes([focusable], ["tabindex"]);
-      focusable.setAttribute("tabindex", "-1");
     }
   }
   #createSentinel() {
@@ -573,7 +575,7 @@ function getActiveElement2() {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.13
+ * @version 1.2.15
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -585,7 +587,7 @@ function getActiveElement2() {
   (**
    * Attributes Utils
    *
-   * @version 1.1.1
+   * @version 1.1.2
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -598,7 +600,7 @@ power-focusable/dist/index.js:
    * High-precision focus management utility with full composed tree support.
    * Handles complex focus rules including tabindex ordering, radio groups, inert.
    *
-   * @version 4.3.2
+   * @version 4.3.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.
  *
- * @version 1.2.13
+ * @version 1.2.15
  * @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.13
+ * @version 1.2.15
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -66,21 +66,16 @@ function getFocusables(container = document.body, options = {}) {
   const elements = [];
   if (composed || include) {
     let traverse2 = function(node) {
-      if (node instanceof Element) {
-        if (isFocusable(node, {
-          skipNegativeTabIndexCheck,
-          skipVisibilityCheck
-        }) || include?.(node)) {
-          elements[elements.length] = node;
-        }
+      if (!(node instanceof Element)) {
+        return;
+      }
+      if (isFocusable(node, { skipNegativeTabIndexCheck, skipVisibilityCheck }) || include?.(node)) {
+        elements[elements.length] = node;
       }
       const children = getComposedChildren(node);
       for (let i = 0, l = children.length; i < l; i++) {
         const child = children[i];
-        if (!child) {
-          continue;
-        }
-        traverse2(child);
+        child && traverse2(child);
       }
     };
     traverse2(container);
@@ -88,10 +83,7 @@ function getFocusables(container = document.body, options = {}) {
     const candidates = container.querySelectorAll(FOCUSABLE_SELECTOR);
     for (let i = 0, l = candidates.length; i < l; i++) {
       const candidate = candidates[i];
-      if (!(candidate instanceof Element)) {
-        continue;
-      }
-      if (isFocusable(candidate, {
+      if (candidate && isFocusable(candidate, {
         skipNegativeTabIndexCheck,
         skipVisibilityCheck
       })) {
@@ -278,23 +270,19 @@ function normalizeRadioGroup(elements) {
   for (const group of map.values()) {
     placeholder.add(group.find((radio) => radio.checked) ?? group[0]);
   }
-  return elements.filter((element) => {
-    if (isUngroupedRadio(element)) {
-      return placeholder.has(element);
-    }
-    return true;
-  });
+  return elements.filter(
+    (element) => isUngroupedRadio(element) ? placeholder.has(element) : true
+  );
 }
 function sortByTabIndex(elements) {
   const ordered = [];
   const natural = [];
   for (let i = 0, l = elements.length; i < l; i++) {
     const element = elements[i];
-    if (!element) {
-      continue;
+    if (element) {
+      const target = getTabIndex(element) > 0 ? ordered : natural;
+      target[target.length] = element;
     }
-    const target = getTabIndex(element) > 0 ? ordered : natural;
-    target[target.length] = element;
   }
   ordered.sort((a, b) => getTabIndex(a) - getTabIndex(b));
   let count = 0;
@@ -312,8 +300,9 @@ function containsComposed(container, element) {
   while (current) {
     if (current === container) {
       return true;
+    } else {
+      current = current instanceof ShadowRoot ? current.mode === "open" ? current.host : null : current.parentNode;
     }
-    current = current instanceof ShadowRoot ? current.mode === "open" ? current.host : null : current.parentNode;
   }
   return false;
 }
@@ -455,7 +444,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) {
@@ -465,7 +462,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;
     }
   };
@@ -483,18 +488,17 @@ var Portal = class {
     }
     this.#update();
     const focusables = this.#getFocusables();
-    if (!focusables.length) {
+    if (focusables.length) {
+      const index = focusables.indexOf(active);
+      if (index !== -1) {
+        event.preventDefault();
+        const focusable = focusables[index + (shiftKey ? -1 : 1)];
+        focusable ? focusElement(focusable) : this.#focusSentinel(shiftKey);
+      }
+    } else {
       event.preventDefault();
       this.#moveFocus(shiftKey ? "previous" : "next");
-      return;
-    }
-    const index = focusables.indexOf(active);
-    if (index === -1) {
-      return;
     }
-    event.preventDefault();
-    const focusable = focusables[index + (shiftKey ? -1 : 1)];
-    focusable ? focusElement(focusable) : this.#focusSentinel(shiftKey);
   };
   #update() {
     const current = /* @__PURE__ */ new Set([
@@ -502,19 +506,17 @@ var Portal = class {
       ...getFocusables(this.#host, { composed: true })
     ]);
     for (const focusable of this.#focusables) {
-      if (current.has(focusable)) {
-        continue;
+      if (!current.has(focusable)) {
+        focusable.isConnected && restoreAttributes([focusable]);
+        this.#focusables.delete(focusable);
       }
-      focusable.isConnected && restoreAttributes([focusable]);
-      this.#focusables.delete(focusable);
     }
     for (const focusable of current) {
-      if (this.#focusables.has(focusable)) {
-        continue;
+      if (!this.#focusables.has(focusable)) {
+        this.#focusables.add(focusable);
+        saveAttributes([focusable], ["tabindex"]);
+        focusable.setAttribute("tabindex", "-1");
       }
-      this.#focusables.add(focusable);
-      saveAttributes([focusable], ["tabindex"]);
-      focusable.setAttribute("tabindex", "-1");
     }
   }
   #createSentinel() {
@@ -571,7 +573,7 @@ function getActiveElement2() {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.13
+ * @version 1.2.15
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -583,7 +585,7 @@ function getActiveElement2() {
   (**
    * Attributes Utils
    *
-   * @version 1.1.1
+   * @version 1.1.2
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -596,7 +598,7 @@ power-focusable/dist/index.js:
    * High-precision focus management utility with full composed tree support.
    * Handles complex focus rules including tabindex ordering, radio groups, inert.
    *
-   * @version 4.3.2
+   * @version 4.3.3
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/portal",
-  "version": "1.2.13",
+  "version": "1.2.15",
   "description": "Lightweight DOM portal (teleport) utility with fully focus management",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -47,9 +47,9 @@
   },
   "homepage": "https://github.com/y14e/portal#readme",
   "devDependencies": {
-    "@y14e/attributes-utils": "^1.1.1",
+    "@y14e/attributes-utils": "^1.1.2",
     "bun-types": "latest",
-    "power-focusable": "^4.3.2",
+    "power-focusable": "^4.3.3",
     "tsup": "^8.0.0",
     "typescript": "^5.6.0"
   },