npm - @y14e/portal - Versions diffs - 1.0.1 → 1.0.3 - Mend

@y14e/portal 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.cjs CHANGED Viewed

@@ -91,22 +91,25 @@ function isFocusable(element) {
   return true;
 }
 function getRelativeFocusable(container, offset, options) {
-  const {
-    anchor = getActiveElement(),
-    composed = false,
-    filter,
-    include,
-    wrap = false
-  } = options;
-  const focusables = getFocusables(container, { composed, filter, include });
-  const { length } = focusables;
-  if (!length) {
-    return null;
+  let anchor = options.anchor ?? getActiveElement();
+  const { composed = false, filter, include, wrap = false } = options;
+  if (!(anchor instanceof Element)) {
+    const active = getActiveElement();
+    if (active instanceof Element) {
+      console.warn("Invalid anchor element. Fallback: active element.");
+      anchor = active;
+    } else {
+      console.warn("Invalid anchor element");
+      return null;
+    }
   }
-  if (!anchor || !containsComposed(container, anchor)) {
+  if (!containsComposed(container, anchor)) {
+    console.warn("Mismatch elements");
     return null;
   }
-  if (!(anchor instanceof Element)) {
+  const focusables = getFocusables(container, { composed, filter, include });
+  const { length } = focusables;
+  if (!length) {
     return null;
   }
   const currentIndex = focusables.indexOf(anchor);
@@ -272,6 +275,9 @@ function createPortal(host, container = document.body) {
     console.warn("Invalid container element. Fallback: <body> element.");
     container = document.body;
   }
+  if (containsComposed2(host, container)) {
+    throw new Error("Host element cannot contain container");
+  }
   const portal = new Portal(host, container);
   return () => portal.destroy();
 }
@@ -284,6 +290,10 @@ var Portal = class {
   #controller = null;
   #isDestroyed = false;
   constructor(host, container) {
+    if (host.hasAttribute("data-portaled")) {
+      console.warn("Already portaled");
+      return;
+    }
     this.#host = host;
     this.#container = container;
     this.#entranceSentinel = this.#createSentinel();
@@ -311,7 +321,7 @@ var Portal = class {
     this.#exitSentinel.after(this.#host);
     this.#entranceSentinel.remove();
     this.#exitSentinel.remove();
-    this.#host.removeAttribute("data-portal");
+    this.#host.removeAttribute("data-portaled");
   }
   #initialize() {
     this.#host.before(this.#entranceSentinel);
@@ -331,7 +341,7 @@ var Portal = class {
       capture: true,
       signal
     });
-    this.#host.setAttribute("data-portal", "");
+    this.#host.setAttribute("data-portaled", "");
   }
   #onFocusIn = (event) => {
     const current = event.target;
@@ -385,6 +395,7 @@ var Portal = class {
   #createSentinel() {
     const sentinel = document.createElement("span");
     sentinel.setAttribute("aria-hidden", "true");
+    sentinel.setAttribute("data-portal-sentinel", "");
     sentinel.setAttribute("tabindex", "0");
     sentinel.style.cssText += VISUALLY_HIDDEN_CSS;
     return sentinel;
@@ -404,6 +415,16 @@ var Portal = class {
     focusable && focus(focusable);
   }
 };
+function containsComposed2(container, element) {
+  let current = element;
+  while (current) {
+    if (current === container) {
+      return true;
+    }
+    current = current instanceof ShadowRoot ? current.mode === "open" ? current.host : null : current.parentNode;
+  }
+  return false;
+}
 function focus(element) {
   "focus" in element && typeof element.focus === "function" && element.focus();
 }
@@ -419,7 +440,7 @@ function getActiveElement2() {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.0.1
+ * @version 1.0.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -433,7 +454,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.1.2
+   * @version 4.1.3
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts CHANGED Viewed

@@ -3,7 +3,7 @@
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.0.1
+ * @version 1.0.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.0.1
+ * @version 1.0.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js CHANGED Viewed

@@ -89,22 +89,25 @@ function isFocusable(element) {
   return true;
 }
 function getRelativeFocusable(container, offset, options) {
-  const {
-    anchor = getActiveElement(),
-    composed = false,
-    filter,
-    include,
-    wrap = false
-  } = options;
-  const focusables = getFocusables(container, { composed, filter, include });
-  const { length } = focusables;
-  if (!length) {
-    return null;
+  let anchor = options.anchor ?? getActiveElement();
+  const { composed = false, filter, include, wrap = false } = options;
+  if (!(anchor instanceof Element)) {
+    const active = getActiveElement();
+    if (active instanceof Element) {
+      console.warn("Invalid anchor element. Fallback: active element.");
+      anchor = active;
+    } else {
+      console.warn("Invalid anchor element");
+      return null;
+    }
   }
-  if (!anchor || !containsComposed(container, anchor)) {
+  if (!containsComposed(container, anchor)) {
+    console.warn("Mismatch elements");
     return null;
   }
-  if (!(anchor instanceof Element)) {
+  const focusables = getFocusables(container, { composed, filter, include });
+  const { length } = focusables;
+  if (!length) {
     return null;
   }
   const currentIndex = focusables.indexOf(anchor);
@@ -270,6 +273,9 @@ function createPortal(host, container = document.body) {
     console.warn("Invalid container element. Fallback: <body> element.");
     container = document.body;
   }
+  if (containsComposed2(host, container)) {
+    throw new Error("Host element cannot contain container");
+  }
   const portal = new Portal(host, container);
   return () => portal.destroy();
 }
@@ -282,6 +288,10 @@ var Portal = class {
   #controller = null;
   #isDestroyed = false;
   constructor(host, container) {
+    if (host.hasAttribute("data-portaled")) {
+      console.warn("Already portaled");
+      return;
+    }
     this.#host = host;
     this.#container = container;
     this.#entranceSentinel = this.#createSentinel();
@@ -309,7 +319,7 @@ var Portal = class {
     this.#exitSentinel.after(this.#host);
     this.#entranceSentinel.remove();
     this.#exitSentinel.remove();
-    this.#host.removeAttribute("data-portal");
+    this.#host.removeAttribute("data-portaled");
   }
   #initialize() {
     this.#host.before(this.#entranceSentinel);
@@ -329,7 +339,7 @@ var Portal = class {
       capture: true,
       signal
     });
-    this.#host.setAttribute("data-portal", "");
+    this.#host.setAttribute("data-portaled", "");
   }
   #onFocusIn = (event) => {
     const current = event.target;
@@ -383,6 +393,7 @@ var Portal = class {
   #createSentinel() {
     const sentinel = document.createElement("span");
     sentinel.setAttribute("aria-hidden", "true");
+    sentinel.setAttribute("data-portal-sentinel", "");
     sentinel.setAttribute("tabindex", "0");
     sentinel.style.cssText += VISUALLY_HIDDEN_CSS;
     return sentinel;
@@ -402,6 +413,16 @@ var Portal = class {
     focusable && focus(focusable);
   }
 };
+function containsComposed2(container, element) {
+  let current = element;
+  while (current) {
+    if (current === container) {
+      return true;
+    }
+    current = current instanceof ShadowRoot ? current.mode === "open" ? current.host : null : current.parentNode;
+  }
+  return false;
+}
 function focus(element) {
   "focus" in element && typeof element.focus === "function" && element.focus();
 }
@@ -417,7 +438,7 @@ function getActiveElement2() {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.0.1
+ * @version 1.0.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -431,7 +452,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.1.2
+   * @version 4.1.3
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/portal",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Lightweight DOM portal (teleport) utility with fully focus management",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -48,7 +48,7 @@
   "homepage": "https://github.com/y14e/portal#readme",
   "devDependencies": {
     "bun-types": "latest",
-    "power-focusable": "^4.1.2",
+    "power-focusable": "^4.1.3",
     "tsup": "^8.0.0",
     "typescript": "^5.6.0"
   },