layerpro 3.1.5 → 3.3.0

package/react.js

@@ -1,18 +1,400 @@
-import { createRoot as e } from "react-dom/client";
+import e, { isValidElement as t } from "react";
 
-var o = (o, n, r) => {
-    const t = String(o.id);
-    try {
-        if (r) {
-            const e = r.get(t);
-            if (e) return void e.render(o.body);
+import { createRoot as n } from "react-dom/client";
+
+import { createPortal as o } from "react-dom";
+
+var r = Object.defineProperty, i = (e, t, n) => {
+    return s = n, (i = "symbol" != typeof t ? t + "" : t) in (o = e) ? r(o, i, {
+        enumerable: !0,
+        configurable: !0,
+        writable: !0,
+        value: s
+    }) : o[i] = s;
+    var o, i, s;
+}, s = class extends Error {
+    constructor(e, t, n) {
+        super(`[reattach:${t}] ${e}`), i(this, "code"), i(this, "details"), this.name = "ReattachError", 
+        this.code = t, void 0 !== n && (this.details = n);
+    }
+}, l = new WeakMap, a = new Set;
+
+function c() {
+    if ("undefined" == typeof document || "undefined" == typeof window) throw new s("reattach requires a browser environment (document is not available)", "ENVIRONMENT_ERROR");
+}
+
+function d(e) {
+    if (c(), "string" != typeof e || 0 === e.length) throw new s("Invalid selector received: " + typeof e, "INVALID_SELECTOR");
+    const t = document.querySelector(e);
+    if (!t) throw new s(`No element found matching selector "${e}"`, "PARENT_NOT_FOUND");
+    return t;
+}
+
+function u(e, t) {
+    if (t) {
+        const n = Array.from(e.children).filter(e => e.id === t);
+        if (n.length, n.length > 0) return {
+            element: n[0],
+            created: !1
+        };
+    }
+    const n = document.createElement("div");
+    return t && (n.id = t), e.appendChild(n), a.add(n), {
+        element: n,
+        created: !0
+    };
+}
+
+function f(e, t) {
+    if (!t) return e;
+    const n = document.createElement("div");
+    return n.className = "reattach-overlay", t.zIndex ? n.style.zIndex = String(t.zIndex) : t.stackingOrder && (n.style.zIndex = String("top" === t.stackingOrder ? 9999 : "bottom" === t.stackingOrder ? 0 : 5e3)), 
+    n.style.position = "fixed", n.style.top = "0", n.style.left = "0", n.style.width = "100vw", 
+    n.style.height = "100vh", n.style.display = "flex", n.style.alignItems = "center", 
+    n.style.justifyContent = "center", n.style.pointerEvents = "auto", e.appendChild(n), 
+    n;
+}
+
+function m(e, t) {
+    const n = g.get(e) ?? {
+        zIndex: 0,
+        scrollLocked: !1
+    };
+    n.scrollLocked = !0, n.originalOverflow = document.body.style.overflow, document.body.style.overflow = "hidden", 
+    g.set(e, n);
+}
+
+function h(e) {
+    const t = g.get(e);
+    t && (t.scrollLocked && (document.body.style.overflow = t.originalOverflow ?? ""), 
+    t.focusTrapCleanup && t.focusTrapCleanup(), t.scrollLocked = !1, t.originalOverflow = void 0, 
+    t.focusTrapCleanup = void 0, g.set(e, t));
+}
+
+function y(e, t) {
+    const n = [ "a[href]", "button:not([disabled])", "input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])", '[tabindex]:not([tabindex="-1"])' ].join(", "), o = Array.from(e.querySelectorAll(n));
+    if (0 === o.length) return;
+    const r = o[0], i = o[o.length - 1], s = e => {
+        "Tab" === e.key && (e.shiftKey && document.activeElement === r ? (e.preventDefault(), 
+        i.focus()) : e.shiftKey || document.activeElement !== i || (e.preventDefault(), 
+        r.focus()));
+    }, c = t => {
+        if ("Escape" === t.key && e.parentElement) {
+            e.parentElement.removeChild(e);
+            const t = l.get(e);
+            t && (t.unmount(), l.delete(e)), a.delete(e), g.delete(e), h(e);
         }
-        const a = e(n);
-        a.render(o.body), r && r.set(t, a);
+    };
+    return e.addEventListener("keydown", s), document.addEventListener("keydown", c), 
+    () => {
+        e.removeEventListener("keydown", s), document.removeEventListener("keydown", c);
+    };
+}
+
+function p(o, r, i) {
+    let s = i ?? l.get(o);
+    return s || (s = n(o), l.set(o, s)), s.render(t(r) ? r : e.createElement(e.Fragment, null, r)), 
+    s;
+}
+
+function v(e) {
+    const t = w.get(e);
+    t && t.destroy();
+    const n = l.get(e);
+    return n && (n.unmount(), l.delete(e)), a.delete(e), T(e), h(e), g.delete(e), e.remove(), 
+    !0;
+}
+
+function b(e, t) {
+    if (!t) return;
+    t.id && (e.id = t.id), t.class && (e.className = t.class), t.name && (e.name = t.name), 
+    t.dataset && Object.entries(t.dataset).forEach(([t, n]) => {
+        e.dataset[t] = n;
+    }), t.style && ("string" == typeof t.style ? e.setAttribute("style", t.style) : Object.assign(e.style, t.style));
+    const n = new Set([ "id", "class", "name", "dataset", "style", "root", "inheritContext", "resilient", "overlay", "bubbleEvents", "isolateNativeEvents", "layout", "hydrate" ]);
+    Object.entries(t).forEach(([t, o]) => {
+        n.has(t) || "string" != typeof o && "number" != typeof o && "boolean" != typeof o || e.setAttribute(t, String(o));
+    });
+}
+
+var E = new Map, g = new Map, w = new WeakMap, L = new WeakMap;
+
+function C(t = null) {
+    let n = t;
+    for (const [t, o] of E) n = e.createElement(t.Provider, {
+        value: o
+    }, n);
+    return n ? e.isValidElement(n) ? n : e.createElement(e.Fragment, null, n) : e.createElement(e.Fragment, null);
+}
+
+function x(t, n) {
+    const o = new MutationObserver(r => {
+        if (!document.contains(t)) {
+            o.disconnect();
+            let r = null;
+            try {
+                r = n();
+            } catch {
+                return;
+            }
+            if (r && r !== t) {
+                const o = l.get(t);
+                o && (o.unmount(), l.delete(t)), a.delete(t);
+                const r = n();
+                p(r, t.innerHTML ? e.createElement("div", {
+                    dangerouslySetInnerHTML: {
+                        __html: t.innerHTML
+                    }
+                }) : null), x(r, n);
+            }
+        }
+    });
+    o.observe(document.documentElement, {
+        childList: !0,
+        subtree: !0
+    });
+}
+
+function I(e, t, n) {
+    const o = new Map;
+    L.set(e, o), n && (e.addEventListener("click", e => e.stopPropagation(), {
+        capture: !0
+    }), e.addEventListener("keydown", e => e.stopPropagation(), {
+        capture: !0
+    }), e.addEventListener("keyup", e => e.stopPropagation(), {
+        capture: !0
+    }));
+    const r = e.parentElement;
+    r && t.forEach(t => {
+        const n = t.slice(2).toLowerCase(), i = e => {
+            if (e.target === r) return;
+            const t = new CustomEvent(e.type, {
+                detail: {
+                    originalEvent: e
+                },
+                bubbles: !0
+            });
+            r.dispatchEvent(t);
+        };
+        o.set(t, i), e.addEventListener(n, i, !0);
+    });
+}
+
+function T(e) {
+    const t = L.get(e);
+    t && (t.forEach((t, n) => {
+        const o = n.slice(2).toLowerCase();
+        e.removeEventListener(o, t, !0);
+    }), L.delete(e));
+}
+
+function k(t, n) {
+    const o = w.get(t);
+    if (o) return o;
+    const r = {
+        updateProps: t => {
+            const o = e.createElement("div", t);
+            n.render(o);
+        },
+        getContainer: () => t,
+        destroy: () => {
+            n.unmount(), l.delete(t), a.delete(t), T(t), h(t), g.delete(t), w.delete(t);
+        }
+    };
+    return w.set(t, r), r;
+}
+
+function N(e, t) {
+    if (!t.anchor) return;
+    const n = () => {
+        const n = document.querySelector(t.anchor);
+        if (!n || !e.parentElement) return;
+        const o = n.getBoundingClientRect(), r = e.getBoundingClientRect(), i = t.placement || "bottom", s = t.offset || 0;
+        let l = 0, a = 0;
+        const c = window.innerWidth, d = window.innerHeight;
+        i.startsWith("top") || i.startsWith("bottom") ? (l = i.startsWith("top") ? o.top - r.height - s : o.bottom + s, 
+        a = i.endsWith("-start") ? o.left : i.endsWith("-end") ? o.right - r.width : o.left + (o.width - r.width) / 2) : (a = i.startsWith("left") ? o.left - r.width - s : o.right + s, 
+        l = i.endsWith("-start") ? o.top : i.endsWith("-end") ? o.bottom - r.height : o.top + (o.height - r.height) / 2), 
+        i.startsWith("bottom") && l + r.height > d && (l = o.top - r.height - s), i.startsWith("top") && l < 0 && (l = o.bottom + s), 
+        i.startsWith("left") && a < 0 && (a = o.right + s), i.startsWith("right") && a + r.width > c && (a = o.left - r.width - s), 
+        e.style.position = "fixed", e.style.top = `${Math.max(0, l)}px`, e.style.left = `${Math.max(0, a)}px`;
+    };
+    n();
+    const o = () => n(), r = () => n();
+    return window.addEventListener("resize", o), window.addEventListener("scroll", r, !0), 
+    () => {
+        window.removeEventListener("resize", o), window.removeEventListener("scroll", r, !0);
+    };
+}
+
+var O = function(e, ...n) {
+    if (0 === n.length) {
+        if (c(), "string" != typeof e || 0 === e.length) throw new s("Invalid id argument", "INVALID_ID");
+        return document.getElementById(e) ?? null;
+    }
+    let o, r, i, l = {};
+    const [a, h, v] = n;
+    if ("string" == typeof a) {
+        if (o = a, r = h, v && "object" == typeof v && !Array.isArray(v)) {
+            const e = v;
+            l.inheritContext = !0 === e.inheritContext, l.resilient = !0 === e.resilient, i = e;
+        }
+    } else if (t(a)) {
+        if (r = a, h && "object" == typeof h && !Array.isArray(h)) {
+            const e = h;
+            l.inheritContext = !0 === e.inheritContext, l.resilient = !0 === e.resilient, i = e;
+        }
+    } else if (a && "object" == typeof a && !Array.isArray(a)) {
+        if (l = a, o = l.id, r = h, v && "object" == typeof v && !Array.isArray(v)) {
+            const e = v;
+            l.inheritContext = !0 === e.inheritContext, l.resilient = !0 === e.resilient, i = e;
+        }
+    } else null != a && (r = a);
+    if (null == r) throw new s("children is required", "CHILDREN_REQUIRED");
+    const E = d(e), w = u(E, o).element;
+    b(w, {
+        id: o,
+        class: l.class,
+        name: l.name,
+        dataset: l.dataset,
+        style: l.style,
+        ...Object.fromEntries(Object.entries(l).filter(([e]) => ![ "id", "class", "name", "dataset", "style", "inheritContext", "resilient" ].includes(e)))
+    });
+    let L = r;
+    if ((i?.inheritContext || l.inheritContext) && (L = C(r)), (i?.resilient || l.resilient) && x(w, () => u(E, o).element), 
+    (i?.bubbleEvents || i?.isolateNativeEvents) && I(w, i.bubbleEvents || [], !0 === i.isolateNativeEvents), 
+    i?.layout && N(w, i.layout), i?.overlay) {
+        const e = f(w, i.overlay);
+        if (i.overlay.lockScroll && m(w), i.overlay.trapFocus) {
+            const t = y(e);
+            if (t) {
+                const e = g.get(w) ?? {
+                    zIndex: 0,
+                    scrollLocked: !1
+                };
+                e.focusTrapCleanup = t, g.set(w, e);
+            }
+        }
+        k(w, p(e, L));
+    } else k(w, p(w, L));
+    return w;
+};
+
+O.mount = function(e, t, r) {
+    if (c(), !(e instanceof HTMLElement)) throw new s("container must be an HTMLElement", "INVALID_CONTAINER");
+    if (null == t) throw new s("children is required for mount()", "CHILDREN_REQUIRED");
+    b(e, r);
+    let i, d = e;
+    if (r?.overlay && (d = f(e, r.overlay)), r?.overlay?.lockScroll && m(e), r?.overlay?.trapFocus) {
+        const e = y(d);
+        if (e) {
+            const t = g.get(d) ?? {
+                zIndex: 0,
+                scrollLocked: !1
+            };
+            t.focusTrapCleanup = e, g.set(d, t);
+        }
+    }
+    if (r?.bubbleEvents || r?.isolateNativeEvents) {
+        let t = [];
+        r?.bubbleEvents && (t = r.bubbleEvents), I(e, t, !0 === r?.isolateNativeEvents);
+    }
+    if (r?.layout && N(e, r.layout), r?.root) {
+        let n = t;
+        r.inheritContext && (n = C(t)), r.root.render(o(n, d)), a.add(e), i = r.root;
+    } else {
+        a.add(e);
+        let o = t;
+        r?.inheritContext && (o = C(t)), i = r?.hydrate ? function(e) {
+            if (e.innerHTML && e.innerHTML.trim() === "".trim()) {
+                const t = n(e);
+                return l.set(e, t), t;
+            }
+            e.innerHTML = "";
+            const t = n(e);
+            return l.set(e, t), t;
+        }(d) : p(d, o);
+    }
+    return i && k(e, i), r?.resilient && x(e, () => e), e;
+}, O.unmount = function(e, t) {
+    if (c(), void 0 === e && void 0 === t) {
+        if (0 === a.size) return !1;
+        const e = Array.from(a);
+        for (const t of e) v(t);
+        return !0;
+    }
+    if (e && !t) {
+        const t = document.getElementById(e);
+        return !(!t || !a.has(t)) && v(t);
+    }
+    const n = d(e), o = t ? Array.from(n.children).find(e => e.id === t) : void 0;
+    return !(!o || !a.has(o)) && v(o);
+}, O.clear = function(e) {
+    if (c(), !e) {
+        const e = a.size, t = Array.from(a);
+        for (const e of t) v(e);
+        return e;
+    }
+    const t = d(e);
+    let n = 0;
+    const o = Array.from(a);
+    for (const e of o) t.contains(e) && (v(e), n++);
+    return n;
+}, O.has = function(e, t) {
+    if (e && t) {
+        const n = document.querySelector(e);
+        return !!n && Array.from(n.children).some(e => e.id === t && l.has(e));
+    }
+    if (e && !t) {
+        const t = document.getElementById(e);
+        return !!t && l.has(t);
+    }
+    return a.size > 0;
+}, O.when = function(e, t = 0) {
+    if ("undefined" == typeof document) return Promise.reject(new s("reattach requires a browser environment", "ENVIRONMENT_ERROR"));
+    const n = document.querySelector(e);
+    return n ? Promise.resolve(n) : new Promise((n, o) => {
+        let r;
+        const i = new MutationObserver(() => {
+            const t = document.querySelector(e);
+            t && (r && clearTimeout(r), i.disconnect(), n(t));
+        });
+        i.observe(document.documentElement, {
+            childList: !0,
+            subtree: !0
+        }), t > 0 && (r = setTimeout(() => {
+            i.disconnect(), o(new s(`Timeout: "${e}" not found within ${t}ms`, "TIMEOUT"));
+        }, t));
+    });
+}, O.global = function() {
+    c();
+    const e = globalThis;
+    return e.reattach || Object.defineProperty(e, "reattach", {
+        value: O,
+        configurable: !0,
+        enumerable: !1,
+        writable: !1
+    }), O;
+};
+
+var R = (e, t) => {
+    const n = String(e.id);
+    try {
+        O.mount(t, e.body, {
+            id: `layerpro_body_${n}`,
+            inheritContext: e.inheritContext ?? !1,
+            resilient: e.resilient ?? !1
+        });
     } catch (e) {
-        const o = e instanceof Error ? e.message : String(e);
-        o.includes("Invalid hook call") || o.includes("hooks") ? console.error("LayerPro Error: React hooks error detected. This usually happens when:\n1. Multiple copies of React are loaded on the page\n2. The component is called as a function instead of being passed as JSX\n3. React version mismatch between the app and LayerPro\n\nMake sure body is passed as <Component /> not <Component />()") : console.error("Error rendering React component:", e);
+        const t = e instanceof Error ? e.message : String(e);
+        t.includes("Invalid hook call") || t.includes("hooks") ? console.error("LayerPro Error: React hooks error detected. This usually happens when:\n1. Multiple copies of React are loaded on the page\n2. The component is called as a function instead of being passed as JSX\n3. React version mismatch between the app and LayerPro\n\nMake sure body is passed as <Component /> not <Component />()") : console.error("Error rendering React component:", e);
     }
 };
 
-export { o as default };
+R.unmount = e => {
+    O.unmount(`layerpro_body_${e}`);
+};
+
+var A = R;
+
+export { A as default };

package/types/layerpro.d.ts

@@ -70,6 +70,8 @@ interface GenLayerProps {
 
   source?: string
   store?: unknown
+  inheritContext?: boolean
+  resilient?: boolean
 }
 
 /**
@@ -106,10 +108,9 @@ interface _layerpro {
     store: (element: unknown) => void
     index: (id: string | number | GenLayerProps) => void
     zIndex: (props?: GenLayerProps) => number
-    close: (id: string | number | GenLayerProps | null | undefined) => void
-    unmount: (id: string) => void
-    getReactRoots: () => Map<string, { unmount: () => void }> | null
-    cleanupEvents: (id: string) => void
+     close: (id: string | number | GenLayerProps | null | undefined) => void
+     unmount: (id: string) => void
+     cleanupEvents: (id: string) => void
     abortSource: (id: string) => void
     useReactAdapter?: (props: GenLayerProps, container: HTMLElement) => void
   }