layerpro 3.1.1 → 3.2.0

package/react.js

@@ -0,0 +1,400 @@
+import e, { isValidElement as t } from "react";
+
+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);
+        }
+    };
+    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 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);
+    }
+};
+
+R.unmount = e => {
+    O.unmount(`layerpro_body_${e}`);
+};
+
+var A = R;
+
+export { A as default };

package/types/layerpro.d.ts

@@ -1,132 +1,133 @@
-
-
-
-/// <reference types="react" />
-
-/** Generate custom alert using alert([text]) */
-declare function alert(f1?: string): void
-
-/** Generate custom confirm using confirm([text],[callback for YES],[optional callback for NO])
- *  WARNING: This overrides the native confirm(). The return value is NOT a usable
- *  boolean — callbacks are invoked asynchronously instead. Never rely on the
- *  return value; use the yes/no callbacks. */
-declare function confirm(message: string, func1: (yes: boolean) => void, func2?: (no: boolean) => void): void
-
-/** Generate custom message using message([text],[callback]) and option callback */
-declare function message(f1?: string, func1?: () => void): void
-
-/** Generate custom prompt using prompt([text],[callback]) and option callback
- *  WARNING: This overrides the native prompt(). The return value is NOT a usable
- *  string — use the callback to receive the input. */
-declare function prompt(f1?: string, func1?: (input: string) => void): void
-
-///
-
-interface GenLayerProps {
-
-  id: string | number
-  body?: React.ReactElement | string | HTMLElement
-  name?: string
-  style?: any
-  class?: string
-  icon?: string
-
-  buttons?: {
-    confirm?: {
-      text: string
-      cb?: () => void
-    }
-    cancel?: {
-      text: string
-      cb?: () => void
-    }
-  }
-
-  top?: number | string
-  left?: number | string
-  right?: number | string
-  bottom?: number | string
-
-  width?: number | string
-  height?: number | string
-
-  minWidth?: number
-  minHeight?: number
-  maxWidth?: number
-  maxHeight?: number
-
-  fadeIn?: number
-  fadeOut?: number
-  timer?: number
-
-  maximize?: boolean
-  isMaximize?: boolean
-  dockable?: boolean
-  movable?: boolean
-
-  resizable?: boolean
-  close?: boolean
-  raised?: boolean
-  modal?: boolean
-  iconize?: boolean
-  center?: boolean
-
-  source?: string
-  store?: any
-
-}
-
-/**
- * Interface for the layerpro object
- */
-interface _layerpro {
-
-  [key: string]: any
-
-  readonly alert: (txt: string) => void
-  readonly prompt: (txt: string, callback: (input: string) => void) => void
-  readonly message: (txt: string, callback: () => void) => void
-  readonly confirm: (txt: string, yesCallback: () => void, noCallback?: () => void) => void
-  readonly credits: (txt: string) => void
-
-  setProps: (obj: Record<string, unknown>, options?: { enumerable?: boolean, writable?: boolean }) => void
-
-  /** Remove the global alert/confirm/prompt/message overrides and restore
-   *  the native browser implementations. Call this right after importing
-   *  LayerPro if your codebase depends on synchronous native globals. */
-  readonly noGlobals: () => void
-
-  readonly popup: {
-    open: (props: GenLayerProps) => GenLayerProps
-    center: (id: string | number | GenLayerProps, offset?: number) => void
-    maximize: (props: GenLayerProps) => void
-    iconize: (id: string | number | GenLayerProps) => void
-    movable: (props: GenLayerProps) => void
-    resizable: (props: GenLayerProps) => void
-    store: (element: unknown) => void
-    index: (id: string | number | GenLayerProps) => void
-    zIndex: (props?: GenLayerProps) => number
-    close: (id: string | number | GenLayerProps) => void
-    // React root management for memory cleanup
-    unmount: (id: string) => void
-    getReactRoot: (id: string) => any
-    // Event listener cleanup
-    cleanupEvents: (id: string) => void
-  }
-
-}
-
-/**
- * LayerPro overrides the native alert/confirm/prompt globals and adds a
- * `message` global. They are callback-based and do NOT return native values.
- * Call `layerpro.noGlobals()` to restore the synchronous natives.
- */
-interface Window {
-  layerpro: _layerpro
-}
-
-declare var layerpro: _layerpro
-type layerpro = _layerpro
-
-declare var popup: layerpro
-type popup = layerpro
+/// <reference types="react" />
+
+/** Generate custom alert using alert([text]) */
+declare function alert(f1?: string): void
+
+/** Generate custom confirm using confirm([text],[callback for YES],[optional callback for NO])
+ *  WARNING: This overrides the native confirm(). The return value is NOT a usable
+ *  boolean — callbacks are invoked asynchronously instead. Never rely on the
+ *  return value; use the yes/no callbacks. */
+declare function confirm(message: string, func1: (yes: boolean) => void, func2?: (no: boolean) => void): void
+
+/** Generate custom message using message([text],[callback]) and option callback */
+declare function message(f1?: string, func1?: () => void): void
+
+/** Generate custom prompt using prompt([text],[callback]) and option callback
+ *  WARNING: This overrides the native prompt(). The return value is NOT a usable
+ *  string — use the callback to receive the input. */
+declare function prompt(f1?: string, func1?: (input: string) => void): void
+
+///
+
+interface LayerButtonConfig {
+  text: string
+  cb?: () => void
+}
+
+interface LayerButtonsConfig {
+  confirm?: LayerButtonConfig
+  cancel?: LayerButtonConfig
+}
+
+interface GenLayerProps {
+  id: string | number
+  body?: React.ReactElement | string | HTMLElement
+  name?: string
+  style?: Record<string, string | number>
+  class?: string
+  icon?: string
+
+  buttons?: LayerButtonsConfig
+
+  top?: number | string
+  left?: number | string
+  right?: number | string
+  bottom?: number | string
+
+  width?: number | string
+  height?: number | string
+
+  minWidth?: number
+  minHeight?: number
+  maxWidth?: number
+  maxHeight?: number
+
+  fadeIn?: number
+  fadeOut?: number
+  timer?: number
+
+  maximize?: boolean
+  isMaximize?: boolean
+  dockable?: boolean
+  movable?: boolean
+
+  resizable?: boolean
+  close?: boolean
+  raised?: boolean
+  modal?: boolean
+  iconize?: boolean
+  center?: boolean
+
+  source?: string
+  store?: unknown
+  inheritContext?: boolean
+  resilient?: boolean
+}
+
+/**
+ * Interface for the layerpro object
+ */
+interface _layerpro {
+
+  readonly alert: (txt: string) => void
+  readonly prompt: (txt: string, callback: (input: string) => void) => void
+  readonly message: (txt: string, callback: () => void) => void
+  readonly confirm: (txt: string, yesCallback: () => void, noCallback?: () => void) => void
+  readonly credits: (props: { name: string, version: string, description: string, license: string, author: { name: string, email: string } }) => void
+
+  setProps: (obj: Record<string, unknown>, options?: { enumerable?: boolean, writable?: boolean }) => void
+
+  /** Remove the global alert/confirm/prompt/message overrides and restore
+   *  the native browser implementations. Call this right after importing
+   *  LayerPro if your codebase depends on synchronous native globals. */
+  readonly noGlobals: () => void
+
+  /** Opt-in to override the browser's native alert/confirm/prompt/message
+   *  globals with LayerPro's callback-based versions. This is opt-in so
+   *  libraries embedded in other applications do not silently change
+   *  global behavior. */
+   readonly installGlobals: () => void
+
+   readonly popup: {
+    open: (props: GenLayerProps) => GenLayerProps
+    center: (id: string | number | GenLayerProps, offset?: number) => void
+    maximize: (props: GenLayerProps) => void
+    iconize: (id: string | number | GenLayerProps) => void
+    movable: (props: GenLayerProps) => void
+    resizable: (props: GenLayerProps) => void
+    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
+     cleanupEvents: (id: string) => void
+    abortSource: (id: string) => void
+    useReactAdapter?: (props: GenLayerProps, container: HTMLElement) => void
+  }
+
+}
+
+/**
+ * LayerPro overrides the native alert/confirm/prompt globals and adds a
+ * `message` global. They are callback-based and do NOT return native values.
+ * Call `layerpro.noGlobals()` to restore the synchronous natives.
+ */
+interface Window {
+  layerpro: _layerpro
+}
+
+declare var layerpro: _layerpro
+type layerpro = _layerpro
+
+declare var popup: layerpro
+type popup = layerpro