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

@y14e/portal 0.0.4 → 0.1.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(source, target);
+// => () => void
 //
 // source: Element
-// container (optional): Element (default: <body>)
-// Element
-console.log(portal.element);
-// Cleanup
-portal.cleanup();
+// target (optional): Element (default: <body>)
 ```

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) {
+function createPortal(source, target = document.body) {
   if (!(source instanceof Element)) {
     throw new Error("Invalid source element");
   }
-  if (!(container instanceof Element)) {
-    console.warn("Invalid container element. Fallback: <body> element.");
-    container = document.body;
+  if (!(target instanceof Element)) {
+    console.warn("Invalid target element. Fallback: <body> element.");
+    target = document.body;
   }
-  const portal = new Portal(source, container);
-  return {
-    element: portal.getElement(),
-    cleanup: () => portal.destroy()
-  };
+  const portal = new Portal(source, target);
+  return () => portal.destroy();
 }
 var Portal = class {
   #source;
-  #container;
   #target;
   #entranceSentinel;
   #exitSentinel;
   #tabIndexes = /* @__PURE__ */ new WeakMap();
   #controller = null;
   #isDestroyed = false;
-  constructor(source, container) {
+  constructor(source, target) {
     this.#source = source;
-    this.#container = container;
-    this.#target = document.createElement("div");
-    this.#target.setAttribute("data-portal", "");
-    this.#target.setAttribute("tabindex", "-1");
+    this.#target = target;
     this.#entranceSentinel = this.#createSentinel();
     this.#exitSentinel = this.#createSentinel();
     this.#initialize();
@@ -306,18 +299,14 @@ var Portal = class {
       }
     });
     this.#exitSentinel.after(this.#source);
-    this.#target.remove();
     this.#entranceSentinel.remove();
     this.#exitSentinel.remove();
-  }
-  getElement() {
-    return this.#target;
+    this.#source.removeAttribute("data-portal");
   }
   #initialize() {
     this.#source.before(this.#entranceSentinel);
     this.#entranceSentinel.after(this.#exitSentinel);
     this.#target.append(this.#source);
-    this.#container.append(this.#target);
     this.#getFocusables().forEach((focusable) => {
       const index = focusable.getAttribute("tabindex")?.trim();
       this.#tabIndexes.set(focusable, index === null ? null : Number(index));
@@ -333,6 +322,7 @@ var Portal = class {
       capture: true,
       signal
     });
+    this.#source.setAttribute("data-portal", "");
   }
   #onFocusIn = (event) => {
     const current = event.target;
@@ -420,7 +410,7 @@ function getActiveElement2() {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 0.0.4
+ * @version 0.1.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 0.1.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(source: Element, target?: HTMLElement): () => void;
 declare class Portal {
     #private;
-    constructor(source: Element, container: Element);
+    constructor(source: Element, target: 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 0.1.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(source: Element, target?: HTMLElement): () => void;
 declare class Portal {
     #private;
-    constructor(source: Element, container: Element);
+    constructor(source: Element, target: 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) {
+function createPortal(source, target = document.body) {
   if (!(source instanceof Element)) {
     throw new Error("Invalid source element");
   }
-  if (!(container instanceof Element)) {
-    console.warn("Invalid container element. Fallback: <body> element.");
-    container = document.body;
+  if (!(target instanceof Element)) {
+    console.warn("Invalid target element. Fallback: <body> element.");
+    target = document.body;
   }
-  const portal = new Portal(source, container);
-  return {
-    element: portal.getElement(),
-    cleanup: () => portal.destroy()
-  };
+  const portal = new Portal(source, target);
+  return () => portal.destroy();
 }
 var Portal = class {
   #source;
-  #container;
   #target;
   #entranceSentinel;
   #exitSentinel;
   #tabIndexes = /* @__PURE__ */ new WeakMap();
   #controller = null;
   #isDestroyed = false;
-  constructor(source, container) {
+  constructor(source, target) {
     this.#source = source;
-    this.#container = container;
-    this.#target = document.createElement("div");
-    this.#target.setAttribute("data-portal", "");
-    this.#target.setAttribute("tabindex", "-1");
+    this.#target = target;
     this.#entranceSentinel = this.#createSentinel();
     this.#exitSentinel = this.#createSentinel();
     this.#initialize();
@@ -304,18 +297,14 @@ var Portal = class {
       }
     });
     this.#exitSentinel.after(this.#source);
-    this.#target.remove();
     this.#entranceSentinel.remove();
     this.#exitSentinel.remove();
-  }
-  getElement() {
-    return this.#target;
+    this.#source.removeAttribute("data-portal");
   }
   #initialize() {
     this.#source.before(this.#entranceSentinel);
     this.#entranceSentinel.after(this.#exitSentinel);
     this.#target.append(this.#source);
-    this.#container.append(this.#target);
     this.#getFocusables().forEach((focusable) => {
       const index = focusable.getAttribute("tabindex")?.trim();
       this.#tabIndexes.set(focusable, index === null ? null : Number(index));
@@ -331,6 +320,7 @@ var Portal = class {
       capture: true,
       signal
     });
+    this.#source.setAttribute("data-portal", "");
   }
   #onFocusIn = (event) => {
     const current = event.target;
@@ -418,7 +408,7 @@ function getActiveElement2() {
  * Lightweight DOM portal (teleport) utility with fully focus management.
  * Designed for accessible dialogs, menus, overlays, popovers.
  *
- * @version 0.0.4
+ * @version 0.1.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": "0.1.0",
   "description": "Lightweight DOM portal (teleport) utility with fully focus management",
   "type": "module",
   "main": "./dist/index.cjs",