npm - @y14e/portal - Versions diffs - 0.0.4 → 1.0.0 - Mend

@y14e/portal 0.0.4 → 1.0.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 (6) hide show

package/README.md CHANGED Viewed

@@ -30,15 +30,9 @@ import { createPortal } from 'https://unpkg.com/@y14e/portal/dist/index.js';
 Creates a portal and preserves keyboard focus order between the original DOM and the portal.
 ```ts
-const portal = createPortal(source, container);
-// => { element: Element; cleanup: () => void }
+const cleanup = createPortal(host, container);
+// => () => void
 //
-// source: Element
+// host: Element
 // container (optional): Element (default: <body>)
-// Element
-console.log(portal.element);
-// Cleanup
-portal.cleanup();
 ```

package/dist/index.cjs CHANGED Viewed

@@ -254,35 +254,28 @@ function isUngroupedRadio(element) {
 // 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(source, container = document.body) {
-  if (!(source instanceof Element)) {
-    throw new Error("Invalid source element");
+function createPortal(host, container = document.body) {
+  if (!(host instanceof Element)) {
+    throw new Error("Invalid host element");
   }
   if (!(container instanceof Element)) {
     console.warn("Invalid container element. Fallback: <body> element.");
     container = document.body;
   }
-  const portal = new Portal(source, container);
-  return {
-    element: portal.getElement(),
-    cleanup: () => portal.destroy()
-  };
+  const portal = new Portal(host, container);
+  return () => portal.destroy();
 }
 var Portal = class {
-  #source;
+  #host;
   #container;
-  #target;
   #entranceSentinel;
   #exitSentinel;
   #tabIndexes = /* @__PURE__ */ new WeakMap();
   #controller = null;
   #isDestroyed = false;
-  constructor(source, container) {
-    this.#source = source;
+  constructor(host, container) {
+    this.#host = host;
     this.#container = container;
-    this.#target = document.createElement("div");
-    this.#target.setAttribute("data-portal", "");
-    this.#target.setAttribute("tabindex", "-1");
     this.#entranceSentinel = this.#createSentinel();
     this.#exitSentinel = this.#createSentinel();
     this.#initialize();
@@ -299,28 +292,23 @@ var Portal = class {
         return;
       }
       const index = this.#tabIndexes.get(focusable);
-      if (index === null) {
+      if (index == null) {
         focusable.removeAttribute("tabindex");
       } else {
-        focusable.setAttribute("tabindex", String(index));
+        focusable.setAttribute("tabindex", index);
       }
     });
-    this.#exitSentinel.after(this.#source);
-    this.#target.remove();
+    this.#exitSentinel.after(this.#host);
     this.#entranceSentinel.remove();
     this.#exitSentinel.remove();
-  }
-  getElement() {
-    return this.#target;
+    this.#host.removeAttribute("data-portal");
   }
   #initialize() {
-    this.#source.before(this.#entranceSentinel);
+    this.#host.before(this.#entranceSentinel);
     this.#entranceSentinel.after(this.#exitSentinel);
-    this.#target.append(this.#source);
-    this.#container.append(this.#target);
+    this.#container.append(this.#host);
     this.#getFocusables().forEach((focusable) => {
-      const index = focusable.getAttribute("tabindex")?.trim();
-      this.#tabIndexes.set(focusable, index === null ? null : Number(index));
+      this.#tabIndexes.set(focusable, focusable.getAttribute("tabindex"));
       focusable.setAttribute("tabindex", "-1");
     });
     this.#controller = new AbortController();
@@ -333,6 +321,7 @@ var Portal = class {
       capture: true,
       signal
     });
+    this.#host.setAttribute("data-portal", "");
   }
   #onFocusIn = (event) => {
     const current = event.target;
@@ -341,15 +330,15 @@ var Portal = class {
       return;
     }
     if (current === this.#entranceSentinel) {
-      if (this.#source.contains(before)) {
-        this.#focusOutside("backward");
+      if (this.#host.contains(before)) {
+        this.#moveFocusOutside("previous");
       } else {
         const first = this.#getFocusables()[0];
         first && focus(first);
       }
     } else if (current === this.#exitSentinel) {
-      if (this.#source.contains(before)) {
-        this.#focusOutside("forward");
+      if (this.#host.contains(before)) {
+        this.#moveFocusOutside("next");
       } else {
         const last = this.#getFocusables().at(-1);
         last && focus(last);
@@ -364,7 +353,7 @@ var Portal = class {
     if (!(active instanceof Element)) {
       return;
     }
-    if (!this.#source.contains(active)) {
+    if (!this.#host.contains(active)) {
       return;
     }
     if (!this.#getFocusables().length) {
@@ -390,20 +379,20 @@ var Portal = class {
     sentinel.style.cssText += VISUALLY_HIDDEN_CSS;
     return sentinel;
   }
-  #focusOutside(direction) {
-    const options = {
-      anchor: direction === "backward" ? this.#entranceSentinel : this.#exitSentinel,
-      composed: true
-    };
-    const focusable = direction === "backward" ? getPreviousFocusable(document.body, options) : getNextFocusable(document.body, options);
-    focusable && focus(focusable);
-  }
   #getFocusables() {
-    return getFocusables(this.#source, {
+    return getFocusables(this.#host, {
       composed: true,
       include: (element) => this.#tabIndexes.has(element)
     });
   }
+  #moveFocusOutside(direction) {
+    const options = {
+      anchor: direction === "previous" ? this.#entranceSentinel : this.#exitSentinel,
+      composed: true
+    };
+    const focusable = direction === "previous" ? getPreviousFocusable(document.body, options) : getNextFocusable(document.body, options);
+    focusable && focus(focusable);
+  }
 };
 function focus(element) {
   "focus" in element && typeof element.focus === "function" && element.focus();
@@ -420,7 +409,7 @@ function getActiveElement2() {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 0.0.4
+ * @version 1.0.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts CHANGED Viewed

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

package/dist/index.d.ts CHANGED Viewed

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

package/dist/index.js CHANGED Viewed

@@ -252,35 +252,28 @@ function isUngroupedRadio(element) {
 // 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(source, container = document.body) {
-  if (!(source instanceof Element)) {
-    throw new Error("Invalid source element");
+function createPortal(host, container = document.body) {
+  if (!(host instanceof Element)) {
+    throw new Error("Invalid host element");
   }
   if (!(container instanceof Element)) {
     console.warn("Invalid container element. Fallback: <body> element.");
     container = document.body;
   }
-  const portal = new Portal(source, container);
-  return {
-    element: portal.getElement(),
-    cleanup: () => portal.destroy()
-  };
+  const portal = new Portal(host, container);
+  return () => portal.destroy();
 }
 var Portal = class {
-  #source;
+  #host;
   #container;
-  #target;
   #entranceSentinel;
   #exitSentinel;
   #tabIndexes = /* @__PURE__ */ new WeakMap();
   #controller = null;
   #isDestroyed = false;
-  constructor(source, container) {
-    this.#source = source;
+  constructor(host, container) {
+    this.#host = host;
     this.#container = container;
-    this.#target = document.createElement("div");
-    this.#target.setAttribute("data-portal", "");
-    this.#target.setAttribute("tabindex", "-1");
     this.#entranceSentinel = this.#createSentinel();
     this.#exitSentinel = this.#createSentinel();
     this.#initialize();
@@ -297,28 +290,23 @@ var Portal = class {
         return;
       }
       const index = this.#tabIndexes.get(focusable);
-      if (index === null) {
+      if (index == null) {
         focusable.removeAttribute("tabindex");
       } else {
-        focusable.setAttribute("tabindex", String(index));
+        focusable.setAttribute("tabindex", index);
       }
     });
-    this.#exitSentinel.after(this.#source);
-    this.#target.remove();
+    this.#exitSentinel.after(this.#host);
     this.#entranceSentinel.remove();
     this.#exitSentinel.remove();
-  }
-  getElement() {
-    return this.#target;
+    this.#host.removeAttribute("data-portal");
   }
   #initialize() {
-    this.#source.before(this.#entranceSentinel);
+    this.#host.before(this.#entranceSentinel);
     this.#entranceSentinel.after(this.#exitSentinel);
-    this.#target.append(this.#source);
-    this.#container.append(this.#target);
+    this.#container.append(this.#host);
     this.#getFocusables().forEach((focusable) => {
-      const index = focusable.getAttribute("tabindex")?.trim();
-      this.#tabIndexes.set(focusable, index === null ? null : Number(index));
+      this.#tabIndexes.set(focusable, focusable.getAttribute("tabindex"));
       focusable.setAttribute("tabindex", "-1");
     });
     this.#controller = new AbortController();
@@ -331,6 +319,7 @@ var Portal = class {
       capture: true,
       signal
     });
+    this.#host.setAttribute("data-portal", "");
   }
   #onFocusIn = (event) => {
     const current = event.target;
@@ -339,15 +328,15 @@ var Portal = class {
       return;
     }
     if (current === this.#entranceSentinel) {
-      if (this.#source.contains(before)) {
-        this.#focusOutside("backward");
+      if (this.#host.contains(before)) {
+        this.#moveFocusOutside("previous");
       } else {
         const first = this.#getFocusables()[0];
         first && focus(first);
       }
     } else if (current === this.#exitSentinel) {
-      if (this.#source.contains(before)) {
-        this.#focusOutside("forward");
+      if (this.#host.contains(before)) {
+        this.#moveFocusOutside("next");
       } else {
         const last = this.#getFocusables().at(-1);
         last && focus(last);
@@ -362,7 +351,7 @@ var Portal = class {
     if (!(active instanceof Element)) {
       return;
     }
-    if (!this.#source.contains(active)) {
+    if (!this.#host.contains(active)) {
       return;
     }
     if (!this.#getFocusables().length) {
@@ -388,20 +377,20 @@ var Portal = class {
     sentinel.style.cssText += VISUALLY_HIDDEN_CSS;
     return sentinel;
   }
-  #focusOutside(direction) {
-    const options = {
-      anchor: direction === "backward" ? this.#entranceSentinel : this.#exitSentinel,
-      composed: true
-    };
-    const focusable = direction === "backward" ? getPreviousFocusable(document.body, options) : getNextFocusable(document.body, options);
-    focusable && focus(focusable);
-  }
   #getFocusables() {
-    return getFocusables(this.#source, {
+    return getFocusables(this.#host, {
       composed: true,
       include: (element) => this.#tabIndexes.has(element)
     });
   }
+  #moveFocusOutside(direction) {
+    const options = {
+      anchor: direction === "previous" ? this.#entranceSentinel : this.#exitSentinel,
+      composed: true
+    };
+    const focusable = direction === "previous" ? getPreviousFocusable(document.body, options) : getNextFocusable(document.body, options);
+    focusable && focus(focusable);
+  }
 };
 function focus(element) {
   "focus" in element && typeof element.focus === "function" && element.focus();
@@ -418,7 +407,7 @@ function getActiveElement2() {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 0.0.4
+ * @version 1.0.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json CHANGED Viewed

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