npm - @y14e/portal - Versions diffs - 1.2.31 → 1.3.0 - Mend

@y14e/portal 1.2.31 → 1.3.0

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 (8) hide show

package/README.md CHANGED Viewed

@@ -13,11 +13,11 @@ npm i @y14e/portal
 import { createPortal } from '@y14e/portal';
 // CDNs
-import { createPortal } from 'https://esm.sh/@y14e/portal@1.2.31';
+import { createPortal } from 'https://esm.sh/@y14e/portal@1.3.0';
 // or
-import { createPortal } from 'https://cdn.jsdelivr.net/npm/@y14e/portal@1.2.31/+esm';
+import { createPortal } from 'https://cdn.jsdelivr.net/npm/@y14e/portal@1.3.0/+esm';
 // or
-import { createPortal } from 'https://esm.unpkg.com/@y14e/portal@1.2.31';
+import { createPortal } from 'https://esm.unpkg.com/@y14e/portal@1.3.0';
 ```
 ## 📦 APIs
@@ -27,11 +27,20 @@ import { createPortal } from 'https://esm.unpkg.com/@y14e/portal@1.2.31';
 Creates a portal and preserves keyboard focus order between the original DOM and the portal.
 ```ts
-const cleanup = createPortal(host, container);
+const cleanup = createPortal(host, container, options);
 // => () => void
 //
 // host: Element
 // container (optional): Element (default: <body>)
+// options (optional): PortalOptions
+```
+## 🪄 Options
+```ts
+interface PortalOptions {
+  noInlineStyle: boolean; // default: false
+}
 ```
 ## Demo

package/dist/index.bundle.cjs CHANGED Viewed

@@ -2,8 +2,8 @@
 // node_modules/@y14e/attributes-utils/dist/index.js
 var snapshots = /* @__PURE__ */ new WeakMap();
-function restoreAttributes(elements) {
-  for (const element of elements) {
+function restoreAttributes(element_or_elements) {
+  for (const element of Array.isArray(element_or_elements) ? element_or_elements : [element_or_elements]) {
     const snapshot = snapshots.get(element);
     if (!snapshot) {
       continue;
@@ -14,8 +14,9 @@ function restoreAttributes(elements) {
     snapshots.delete(element);
   }
 }
-function saveAttributes(elements, attributes) {
-  elements.forEach((element) => {
+function saveAttributes(element_or_elements, attribute_or_attributes) {
+  const attributes = Array.isArray(attribute_or_attributes) ? attribute_or_attributes : [attribute_or_attributes];
+  (Array.isArray(element_or_elements) ? element_or_elements : [element_or_elements]).forEach((element) => {
     let snapshot = snapshots.get(element);
     if (!snapshot) {
       snapshot = /* @__PURE__ */ new Map();
@@ -29,6 +30,10 @@ function saveAttributes(elements, attributes) {
 // node_modules/power-focusable/dist/index.js
 var FOCUSABLE_SELECTOR = `:is(a[href], area[href], button, embed, iframe, input:not([type="hidden" i]), object, select, details > summary:first-of-type, textarea, [contenteditable]:not([contenteditable="false" i]), [controls], [tabindex]):not(:disabled, [hidden], [inert], [tabindex="-1"])`;
+var FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX = FOCUSABLE_SELECTOR.replace(
+  /(,\s*)?\[tabindex="-1"\]/g,
+  ""
+);
 function getFocusables(container = document.body, options = {}) {
   if (!(container instanceof Element)) {
     console.warn("Invalid container element. Fallback: <body> element.");
@@ -65,36 +70,43 @@ function getFocusables(container = document.body, options = {}) {
     console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
     skipVisibilityCheck = false;
   }
-  const elements = [];
+  const candidates = [];
   if (composed || include) {
     let traverse2 = function(node) {
-      if (!(node instanceof Element)) {
-        return;
-      }
-      if (isFocusable(node, { skipNegativeTabIndexCheck, skipVisibilityCheck }) || include?.(node)) {
-        elements[elements.length] = node;
+      if (isFocusable(node, {
+        skipNegativeTabIndexCheck,
+        skipVisibilityCheck
+      }) || include?.(node)) {
+        candidates[candidates.length] = node;
       }
-      const children = getComposedChildren(node);
-      for (let i = 0, l = children.length; i < l; i++) {
-        const child = children[i];
+      const children2 = composed ? getComposedChildren(node) : getChildren(node);
+      for (let i = 0, l = children2.length; i < l; i++) {
+        const child = children2[i];
         child && traverse2(child);
       }
     };
-    traverse2(container);
+    const children = composed ? getComposedChildren(container) : getChildren(container);
+    for (let i = 0, l = children.length; i < l; i++) {
+      const child = children[i];
+      child && traverse2(child);
+    }
   } else {
-    const candidates = container.querySelectorAll(FOCUSABLE_SELECTOR);
-    for (let i = 0, l = candidates.length; i < l; i++) {
-      const candidate = candidates[i];
-      if (candidate && isFocusable(candidate, {
+    const matches = container.querySelectorAll(
+      skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX : FOCUSABLE_SELECTOR
+    );
+    for (let i = 0, l = matches.length; i < l; i++) {
+      const matched = matches[i];
+      if (matched && isFocusable(matched, {
         skipNegativeTabIndexCheck,
         skipVisibilityCheck
       })) {
-        elements[elements.length] = candidate;
+        candidates[candidates.length] = matched;
       }
     }
   }
-  const unfiltered = normalizeRadioGroup(sortByTabIndex(elements));
-  return filter ? unfiltered.filter(filter) : unfiltered;
+  return normalizeRadioGroup(
+    sortByTabIndex(filter ? candidates.filter(filter) : candidates)
+  );
 }
 function getNextFocusable(container = document.body, options = {}) {
   return getRelativeFocusable(container, 1, options);
@@ -123,7 +135,7 @@ function isFocusable(element, options = {}) {
     return false;
   }
   if (!element.matches(
-    skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR.replace(/(,\s*)?\[tabindex="-1"\]/g, "") : FOCUSABLE_SELECTOR
+    skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX : FOCUSABLE_SELECTOR
   )) {
     return false;
   }
@@ -195,23 +207,23 @@ function getRelativeFocusable(container, offset, options) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { composed, skipNegativeTabIndexCheck, skipVisibilityCheck };
-  if (filter !== void 0) {
-    Object.assign(settings, { filter });
-  }
-  if (include !== void 0) {
-    Object.assign(settings, { include });
-  }
+  const settings = {
+    composed,
+    filter,
+    include,
+    skipNegativeTabIndexCheck,
+    skipVisibilityCheck
+  };
   const focusables = getFocusables(container, settings);
   const { length } = focusables;
   if (!length) {
     return null;
   }
-  const currentIndex = focusables.indexOf(anchor);
-  if (currentIndex === -1) {
+  const anchorIndex = focusables.indexOf(anchor);
+  if (anchorIndex === -1) {
     return null;
   }
-  const offsetIndex = currentIndex + offset;
+  const offsetIndex = anchorIndex + offset;
   if ((offsetIndex < 0 || offsetIndex >= length) && !wrap) {
     return null;
   }
@@ -259,22 +271,42 @@ function normalizeRadioGroup(elements) {
     if (!map) {
       map = /* @__PURE__ */ new Map();
     }
-    const key = `${element.form?.id ?? "no-form"}::${element.name}`;
-    const group = map.get(key) ?? map.set(key, []).get(key);
-    if (group) {
-      group[group.length] = element;
+    const root = element.getRootNode();
+    let value = map.get(root);
+    if (!value) {
+      value = /* @__PURE__ */ new Map();
+      map.set(root, value);
+    }
+    let v = value.get(element.form);
+    if (!v) {
+      v = /* @__PURE__ */ new Map();
+      value.set(element.form, v);
+    }
+    let vv = v.get(element.name);
+    if (!vv) {
+      vv = [];
+      v.set(element.name, vv);
     }
+    vv[vv.length] = element;
   }
   if (!map) {
     return elements;
   }
   const placeholder = /* @__PURE__ */ new Set();
-  for (const group of map.values()) {
-    placeholder.add(group.find((radio) => radio.checked) ?? group[0]);
+  for (const value of map.values()) {
+    for (const v of value.values()) {
+      for (const vv of v.values()) {
+        const radio = vv.find((element) => element.checked) ?? vv[0];
+        radio && placeholder.add(radio);
+      }
+    }
   }
-  return elements.filter(
-    (element) => isUngroupedRadio(element) ? placeholder.has(element) : true
-  );
+  return elements.filter((element) => {
+    if (!(element instanceof HTMLInputElement)) {
+      return true;
+    }
+    return !isUngroupedRadio(element) || placeholder.has(element);
+  });
 }
 function sortByTabIndex(elements) {
   const ordered = [];
@@ -357,12 +389,12 @@ function isInert(element) {
   return "inert" in element && !!element.inert;
 }
 function isUngroupedRadio(element) {
-  return element instanceof HTMLInputElement && element.type === "radio" && !!element.name;
+  return element.type === "radio" && !!element.name;
 }
 // src/index.ts
 var VISUALLY_HIDDEN_CSS = `border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; user-select: none; white-space: nowrap; width: 1px;`;
-function createPortal(host, container = document.body) {
+function createPortal(host, container = document.body, options = {}) {
   if (!(host instanceof Element)) {
     console.warn("Invalid host element");
     return () => {
@@ -378,24 +410,31 @@ function createPortal(host, container = document.body) {
     return () => {
     };
   }
-  const portal = new Portal(host, container);
+  const portal = new Portal(host, container, options);
   return () => portal.destroy();
 }
 var Portal = class {
   #host;
   #container;
+  #settings;
   #entranceSentinel;
   #exitSentinel;
   #focusables = /* @__PURE__ */ new Set();
   #controller = null;
   #isDestroyed = false;
-  constructor(host, container) {
+  constructor(host, container, options = {}) {
     this.#host = host;
     if (!(container instanceof Element)) {
       console.warn("Invalid container element. Fallback: <body> element.");
       container = document.body;
     }
     this.#container = container;
+    let { noInlineStyle = false } = options;
+    if (typeof noInlineStyle !== "boolean") {
+      console.warn("Invalid noInlineStyle option. Fallback: false.");
+      noInlineStyle = false;
+    }
+    this.#settings = { noInlineStyle };
     this.#entranceSentinel = this.#createSentinel();
     this.#exitSentinel = this.#createSentinel();
     this.#initialize();
@@ -483,14 +522,14 @@ var Portal = class {
     ]);
     for (const focusable of this.#focusables) {
       if (!current.has(focusable)) {
-        focusable.isConnected && restoreAttributes([focusable]);
+        restoreAttributes(focusable);
         this.#focusables.delete(focusable);
       }
     }
     for (const focusable of current) {
       if (!this.#focusables.has(focusable)) {
         this.#focusables.add(focusable);
-        saveAttributes([focusable], ["tabindex"]);
+        saveAttributes(focusable, "tabindex");
         focusable.setAttribute("tabindex", "-1");
       }
     }
@@ -500,7 +539,9 @@ var Portal = class {
     sentinel.setAttribute("aria-hidden", "true");
     sentinel.setAttribute("data-portal-sentinel", "");
     sentinel.setAttribute("tabindex", "0");
-    sentinel.style.cssText += VISUALLY_HIDDEN_CSS;
+    if (!this.#settings.noInlineStyle) {
+      sentinel.style.cssText += VISUALLY_HIDDEN_CSS;
+    }
     return sentinel;
   }
   #focusSentinel(isPrevious) {
@@ -536,7 +577,7 @@ function containsComposed2(container, element) {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.31
+ * @version 1.3.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -548,7 +589,7 @@ function containsComposed2(container, element) {
   (**
    * Attributes Utils
    *
-   * @version 1.1.3
+   * @version 1.1.4
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -561,7 +602,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.8
+   * @version 4.3.21
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.bundle.js CHANGED Viewed

@@ -1,7 +1,7 @@
 // node_modules/@y14e/attributes-utils/dist/index.js
 var snapshots = /* @__PURE__ */ new WeakMap();
-function restoreAttributes(elements) {
-  for (const element of elements) {
+function restoreAttributes(element_or_elements) {
+  for (const element of Array.isArray(element_or_elements) ? element_or_elements : [element_or_elements]) {
     const snapshot = snapshots.get(element);
     if (!snapshot) {
       continue;
@@ -12,8 +12,9 @@ function restoreAttributes(elements) {
     snapshots.delete(element);
   }
 }
-function saveAttributes(elements, attributes) {
-  elements.forEach((element) => {
+function saveAttributes(element_or_elements, attribute_or_attributes) {
+  const attributes = Array.isArray(attribute_or_attributes) ? attribute_or_attributes : [attribute_or_attributes];
+  (Array.isArray(element_or_elements) ? element_or_elements : [element_or_elements]).forEach((element) => {
     let snapshot = snapshots.get(element);
     if (!snapshot) {
       snapshot = /* @__PURE__ */ new Map();
@@ -27,6 +28,10 @@ function saveAttributes(elements, attributes) {
 // node_modules/power-focusable/dist/index.js
 var FOCUSABLE_SELECTOR = `:is(a[href], area[href], button, embed, iframe, input:not([type="hidden" i]), object, select, details > summary:first-of-type, textarea, [contenteditable]:not([contenteditable="false" i]), [controls], [tabindex]):not(:disabled, [hidden], [inert], [tabindex="-1"])`;
+var FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX = FOCUSABLE_SELECTOR.replace(
+  /(,\s*)?\[tabindex="-1"\]/g,
+  ""
+);
 function getFocusables(container = document.body, options = {}) {
   if (!(container instanceof Element)) {
     console.warn("Invalid container element. Fallback: <body> element.");
@@ -63,36 +68,43 @@ function getFocusables(container = document.body, options = {}) {
     console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
     skipVisibilityCheck = false;
   }
-  const elements = [];
+  const candidates = [];
   if (composed || include) {
     let traverse2 = function(node) {
-      if (!(node instanceof Element)) {
-        return;
-      }
-      if (isFocusable(node, { skipNegativeTabIndexCheck, skipVisibilityCheck }) || include?.(node)) {
-        elements[elements.length] = node;
+      if (isFocusable(node, {
+        skipNegativeTabIndexCheck,
+        skipVisibilityCheck
+      }) || include?.(node)) {
+        candidates[candidates.length] = node;
       }
-      const children = getComposedChildren(node);
-      for (let i = 0, l = children.length; i < l; i++) {
-        const child = children[i];
+      const children2 = composed ? getComposedChildren(node) : getChildren(node);
+      for (let i = 0, l = children2.length; i < l; i++) {
+        const child = children2[i];
         child && traverse2(child);
       }
     };
-    traverse2(container);
+    const children = composed ? getComposedChildren(container) : getChildren(container);
+    for (let i = 0, l = children.length; i < l; i++) {
+      const child = children[i];
+      child && traverse2(child);
+    }
   } else {
-    const candidates = container.querySelectorAll(FOCUSABLE_SELECTOR);
-    for (let i = 0, l = candidates.length; i < l; i++) {
-      const candidate = candidates[i];
-      if (candidate && isFocusable(candidate, {
+    const matches = container.querySelectorAll(
+      skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX : FOCUSABLE_SELECTOR
+    );
+    for (let i = 0, l = matches.length; i < l; i++) {
+      const matched = matches[i];
+      if (matched && isFocusable(matched, {
         skipNegativeTabIndexCheck,
         skipVisibilityCheck
       })) {
-        elements[elements.length] = candidate;
+        candidates[candidates.length] = matched;
       }
     }
   }
-  const unfiltered = normalizeRadioGroup(sortByTabIndex(elements));
-  return filter ? unfiltered.filter(filter) : unfiltered;
+  return normalizeRadioGroup(
+    sortByTabIndex(filter ? candidates.filter(filter) : candidates)
+  );
 }
 function getNextFocusable(container = document.body, options = {}) {
   return getRelativeFocusable(container, 1, options);
@@ -121,7 +133,7 @@ function isFocusable(element, options = {}) {
     return false;
   }
   if (!element.matches(
-    skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR.replace(/(,\s*)?\[tabindex="-1"\]/g, "") : FOCUSABLE_SELECTOR
+    skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR_WITH_NEGATIVE_TABINDEX : FOCUSABLE_SELECTOR
   )) {
     return false;
   }
@@ -193,23 +205,23 @@ function getRelativeFocusable(container, offset, options) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { composed, skipNegativeTabIndexCheck, skipVisibilityCheck };
-  if (filter !== void 0) {
-    Object.assign(settings, { filter });
-  }
-  if (include !== void 0) {
-    Object.assign(settings, { include });
-  }
+  const settings = {
+    composed,
+    filter,
+    include,
+    skipNegativeTabIndexCheck,
+    skipVisibilityCheck
+  };
   const focusables = getFocusables(container, settings);
   const { length } = focusables;
   if (!length) {
     return null;
   }
-  const currentIndex = focusables.indexOf(anchor);
-  if (currentIndex === -1) {
+  const anchorIndex = focusables.indexOf(anchor);
+  if (anchorIndex === -1) {
     return null;
   }
-  const offsetIndex = currentIndex + offset;
+  const offsetIndex = anchorIndex + offset;
   if ((offsetIndex < 0 || offsetIndex >= length) && !wrap) {
     return null;
   }
@@ -257,22 +269,42 @@ function normalizeRadioGroup(elements) {
     if (!map) {
       map = /* @__PURE__ */ new Map();
     }
-    const key = `${element.form?.id ?? "no-form"}::${element.name}`;
-    const group = map.get(key) ?? map.set(key, []).get(key);
-    if (group) {
-      group[group.length] = element;
+    const root = element.getRootNode();
+    let value = map.get(root);
+    if (!value) {
+      value = /* @__PURE__ */ new Map();
+      map.set(root, value);
+    }
+    let v = value.get(element.form);
+    if (!v) {
+      v = /* @__PURE__ */ new Map();
+      value.set(element.form, v);
+    }
+    let vv = v.get(element.name);
+    if (!vv) {
+      vv = [];
+      v.set(element.name, vv);
     }
+    vv[vv.length] = element;
   }
   if (!map) {
     return elements;
   }
   const placeholder = /* @__PURE__ */ new Set();
-  for (const group of map.values()) {
-    placeholder.add(group.find((radio) => radio.checked) ?? group[0]);
+  for (const value of map.values()) {
+    for (const v of value.values()) {
+      for (const vv of v.values()) {
+        const radio = vv.find((element) => element.checked) ?? vv[0];
+        radio && placeholder.add(radio);
+      }
+    }
   }
-  return elements.filter(
-    (element) => isUngroupedRadio(element) ? placeholder.has(element) : true
-  );
+  return elements.filter((element) => {
+    if (!(element instanceof HTMLInputElement)) {
+      return true;
+    }
+    return !isUngroupedRadio(element) || placeholder.has(element);
+  });
 }
 function sortByTabIndex(elements) {
   const ordered = [];
@@ -355,12 +387,12 @@ function isInert(element) {
   return "inert" in element && !!element.inert;
 }
 function isUngroupedRadio(element) {
-  return element instanceof HTMLInputElement && element.type === "radio" && !!element.name;
+  return element.type === "radio" && !!element.name;
 }
 // src/index.ts
 var VISUALLY_HIDDEN_CSS = `border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; user-select: none; white-space: nowrap; width: 1px;`;
-function createPortal(host, container = document.body) {
+function createPortal(host, container = document.body, options = {}) {
   if (!(host instanceof Element)) {
     console.warn("Invalid host element");
     return () => {
@@ -376,24 +408,31 @@ function createPortal(host, container = document.body) {
     return () => {
     };
   }
-  const portal = new Portal(host, container);
+  const portal = new Portal(host, container, options);
   return () => portal.destroy();
 }
 var Portal = class {
   #host;
   #container;
+  #settings;
   #entranceSentinel;
   #exitSentinel;
   #focusables = /* @__PURE__ */ new Set();
   #controller = null;
   #isDestroyed = false;
-  constructor(host, container) {
+  constructor(host, container, options = {}) {
     this.#host = host;
     if (!(container instanceof Element)) {
       console.warn("Invalid container element. Fallback: <body> element.");
       container = document.body;
     }
     this.#container = container;
+    let { noInlineStyle = false } = options;
+    if (typeof noInlineStyle !== "boolean") {
+      console.warn("Invalid noInlineStyle option. Fallback: false.");
+      noInlineStyle = false;
+    }
+    this.#settings = { noInlineStyle };
     this.#entranceSentinel = this.#createSentinel();
     this.#exitSentinel = this.#createSentinel();
     this.#initialize();
@@ -481,14 +520,14 @@ var Portal = class {
     ]);
     for (const focusable of this.#focusables) {
       if (!current.has(focusable)) {
-        focusable.isConnected && restoreAttributes([focusable]);
+        restoreAttributes(focusable);
         this.#focusables.delete(focusable);
       }
     }
     for (const focusable of current) {
       if (!this.#focusables.has(focusable)) {
         this.#focusables.add(focusable);
-        saveAttributes([focusable], ["tabindex"]);
+        saveAttributes(focusable, "tabindex");
         focusable.setAttribute("tabindex", "-1");
       }
     }
@@ -498,7 +537,9 @@ var Portal = class {
     sentinel.setAttribute("aria-hidden", "true");
     sentinel.setAttribute("data-portal-sentinel", "");
     sentinel.setAttribute("tabindex", "0");
-    sentinel.style.cssText += VISUALLY_HIDDEN_CSS;
+    if (!this.#settings.noInlineStyle) {
+      sentinel.style.cssText += VISUALLY_HIDDEN_CSS;
+    }
     return sentinel;
   }
   #focusSentinel(isPrevious) {
@@ -534,7 +575,7 @@ function containsComposed2(container, element) {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.31
+ * @version 1.3.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -546,7 +587,7 @@ function containsComposed2(container, element) {
   (**
    * Attributes Utils
    *
-   * @version 1.1.3
+   * @version 1.1.4
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -559,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.8
+   * @version 4.3.21
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.cjs CHANGED Viewed

@@ -5,7 +5,7 @@ var powerFocusable = require('power-focusable');
 // src/index.ts
 var VISUALLY_HIDDEN_CSS = `border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; user-select: none; white-space: nowrap; width: 1px;`;
-function createPortal(host, container = document.body) {
+function createPortal(host, container = document.body, options = {}) {
   if (!(host instanceof Element)) {
     console.warn("Invalid host element");
     return () => {
@@ -21,24 +21,31 @@ function createPortal(host, container = document.body) {
     return () => {
     };
   }
-  const portal = new Portal(host, container);
+  const portal = new Portal(host, container, options);
   return () => portal.destroy();
 }
 var Portal = class {
   #host;
   #container;
+  #settings;
   #entranceSentinel;
   #exitSentinel;
   #focusables = /* @__PURE__ */ new Set();
   #controller = null;
   #isDestroyed = false;
-  constructor(host, container) {
+  constructor(host, container, options = {}) {
     this.#host = host;
     if (!(container instanceof Element)) {
       console.warn("Invalid container element. Fallback: <body> element.");
       container = document.body;
     }
     this.#container = container;
+    let { noInlineStyle = false } = options;
+    if (typeof noInlineStyle !== "boolean") {
+      console.warn("Invalid noInlineStyle option. Fallback: false.");
+      noInlineStyle = false;
+    }
+    this.#settings = { noInlineStyle };
     this.#entranceSentinel = this.#createSentinel();
     this.#exitSentinel = this.#createSentinel();
     this.#initialize();
@@ -126,14 +133,14 @@ var Portal = class {
     ]);
     for (const focusable of this.#focusables) {
       if (!current.has(focusable)) {
-        focusable.isConnected && attributesUtils.restoreAttributes([focusable]);
+        attributesUtils.restoreAttributes(focusable);
         this.#focusables.delete(focusable);
       }
     }
     for (const focusable of current) {
       if (!this.#focusables.has(focusable)) {
         this.#focusables.add(focusable);
-        attributesUtils.saveAttributes([focusable], ["tabindex"]);
+        attributesUtils.saveAttributes(focusable, "tabindex");
         focusable.setAttribute("tabindex", "-1");
       }
     }
@@ -143,7 +150,9 @@ var Portal = class {
     sentinel.setAttribute("aria-hidden", "true");
     sentinel.setAttribute("data-portal-sentinel", "");
     sentinel.setAttribute("tabindex", "0");
-    sentinel.style.cssText += VISUALLY_HIDDEN_CSS;
+    if (!this.#settings.noInlineStyle) {
+      sentinel.style.cssText += VISUALLY_HIDDEN_CSS;
+    }
     return sentinel;
   }
   #focusSentinel(isPrevious) {
@@ -179,7 +188,7 @@ function containsComposed(container, element) {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.31
+ * @version 1.3.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts CHANGED Viewed

@@ -3,12 +3,15 @@
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.31
+ * @version 1.3.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;
+interface PortalOptions {
+    noInlineStyle: boolean;
+}
+declare function createPortal(host: Element, container?: HTMLElement, options?: Partial<PortalOptions>): () => void;
-export { createPortal };
+export { type PortalOptions, createPortal };

package/dist/index.d.ts CHANGED Viewed

@@ -3,12 +3,15 @@
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.31
+ * @version 1.3.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;
+interface PortalOptions {
+    noInlineStyle: boolean;
+}
+declare function createPortal(host: Element, container?: HTMLElement, options?: Partial<PortalOptions>): () => void;
-export { createPortal };
+export { type PortalOptions, createPortal };

package/dist/index.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { focusElement, getActiveElement, getFocusables, getPreviousFocusable, ge
 // src/index.ts
 var VISUALLY_HIDDEN_CSS = `border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; user-select: none; white-space: nowrap; width: 1px;`;
-function createPortal(host, container = document.body) {
+function createPortal(host, container = document.body, options = {}) {
   if (!(host instanceof Element)) {
     console.warn("Invalid host element");
     return () => {
@@ -19,24 +19,31 @@ function createPortal(host, container = document.body) {
     return () => {
     };
   }
-  const portal = new Portal(host, container);
+  const portal = new Portal(host, container, options);
   return () => portal.destroy();
 }
 var Portal = class {
   #host;
   #container;
+  #settings;
   #entranceSentinel;
   #exitSentinel;
   #focusables = /* @__PURE__ */ new Set();
   #controller = null;
   #isDestroyed = false;
-  constructor(host, container) {
+  constructor(host, container, options = {}) {
     this.#host = host;
     if (!(container instanceof Element)) {
       console.warn("Invalid container element. Fallback: <body> element.");
       container = document.body;
     }
     this.#container = container;
+    let { noInlineStyle = false } = options;
+    if (typeof noInlineStyle !== "boolean") {
+      console.warn("Invalid noInlineStyle option. Fallback: false.");
+      noInlineStyle = false;
+    }
+    this.#settings = { noInlineStyle };
     this.#entranceSentinel = this.#createSentinel();
     this.#exitSentinel = this.#createSentinel();
     this.#initialize();
@@ -124,14 +131,14 @@ var Portal = class {
     ]);
     for (const focusable of this.#focusables) {
       if (!current.has(focusable)) {
-        focusable.isConnected && restoreAttributes([focusable]);
+        restoreAttributes(focusable);
         this.#focusables.delete(focusable);
       }
     }
     for (const focusable of current) {
       if (!this.#focusables.has(focusable)) {
         this.#focusables.add(focusable);
-        saveAttributes([focusable], ["tabindex"]);
+        saveAttributes(focusable, "tabindex");
         focusable.setAttribute("tabindex", "-1");
       }
     }
@@ -141,7 +148,9 @@ var Portal = class {
     sentinel.setAttribute("aria-hidden", "true");
     sentinel.setAttribute("data-portal-sentinel", "");
     sentinel.setAttribute("tabindex", "0");
-    sentinel.style.cssText += VISUALLY_HIDDEN_CSS;
+    if (!this.#settings.noInlineStyle) {
+      sentinel.style.cssText += VISUALLY_HIDDEN_CSS;
+    }
     return sentinel;
   }
   #focusSentinel(isPrevious) {
@@ -177,7 +186,7 @@ function containsComposed(container, element) {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 1.2.31
+ * @version 1.3.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/portal",
-  "version": "1.2.31",
+  "version": "1.3.0",
   "description": "Lightweight DOM portal (teleport) utility with fully focus management",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -55,7 +55,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@y14e/attributes-utils": "^1.1.3",
-    "power-focusable": "^4.3.8"
+    "@y14e/attributes-utils": "^1.1.4",
+    "power-focusable": "^4.3.21"
   }
 }