@berenjena/react-dev-panel 2.1.0 → 2.3.0

package/dist/components/Select/index.js

@@ -1,10 +1,10 @@
-import { jsxs as y, Fragment as M, jsx as a } from "react/jsx-runtime";
-import { useRef as x, useState as H, useCallback as q, useEffect as P } from "react";
+import { jsxs as y, Fragment as q, jsx as a } from "react/jsx-runtime";
+import { useRef as x, useState as C, useCallback as z, useEffect as P } from "react";
 import { createPortal as T } from "react-dom";
 import { Icon as j } from "../Icon/index.js";
 import { useDevPanelPosition as B } from "../../store/UIStore.js";
 import { className as F } from "../../utils/className/className.js";
-import '../../assets/index6.css';const W = "_select_1hbiz_217", U = "_trigger_1hbiz_222", G = "_open_1hbiz_271", J = "_value_1hbiz_275", K = "_placeholder_1hbiz_284", Q = "_arrow_1hbiz_288", X = "_dropdownPortal_1hbiz_303", Y = "_dropdown_1hbiz_303", Z = "_option_1hbiz_342", ee = "_selected_1hbiz_360", te = "_checkbox_1hbiz_369", ne = "_label_1hbiz_390", r = {
+import '../../assets/index7.css';const W = "_select_ug510_217", U = "_trigger_ug510_222", G = "_open_ug510_271", J = "_value_ug510_275", K = "_placeholder_ug510_284", Q = "_arrow_ug510_288", X = "_dropdownPortal_ug510_303", Y = "_dropdown_ug510_303", Z = "_option_ug510_342", ee = "_selected_ug510_361", te = "_checkbox_ug510_370", ne = "_label_ug510_391", r = {
   select: W,
   trigger: U,
   open: G,
@@ -18,66 +18,66 @@ import '../../assets/index6.css';const W = "_select_1hbiz_217", U = "_trigger_1h
   checkbox: te,
   label: ne
 };
-function ae({ value: p, options: _, onChange: z, disabled: f = !1, multiple: u = !1, placeholder: L = "Select..." }) {
-  const w = B(), g = x(null), h = x(null), k = x(null), [c, m] = H(!1), [b, E] = H({
+function ae({ value: f, options: v, onChange: L, disabled: h = !1, multiple: u = !1, placeholder: k = "Select..." }) {
+  const g = B(), w = x(null), p = x(null), E = x(null), [i, m] = C(!1), [_, N] = C({
     top: 0,
     left: 0,
     width: 0,
     maxHeight: 200
-  }), d = u ? Array.isArray(p) ? p : [] : typeof p == "string" ? p : "", C = S(), D = u ? d.length === 0 : !d, s = q(() => {
-    c && E(N());
-  }, [c]);
-  function N() {
-    if (!h.current)
+  }), d = u ? Array.isArray(f) ? f : [] : typeof f == "string" ? f : "", D = A(), S = u ? d.length === 0 : !d, c = z(() => {
+    i && N(O());
+  }, [i]);
+  function O() {
+    if (!p.current)
       return {
         top: 0,
         left: 0,
         width: 0,
         maxHeight: 200
       };
-    const e = h.current.getBoundingClientRect(), t = window.innerHeight, n = window.innerWidth, o = 200, l = 4, i = t - e.bottom - l, v = e.top - l, R = i < o && v > i, V = R ? e.top - Math.min(o, v) : e.bottom + l, $ = Math.max(8, Math.min(e.left, n - e.width - 8)), I = R ? Math.min(o, v) : Math.min(o, i);
+    const e = p.current.getBoundingClientRect(), t = window.innerHeight, n = window.innerWidth, o = 200, l = 4, s = t - e.bottom - l, b = e.top - l, H = s < o && b > s, $ = H ? e.top - Math.min(o, b) : e.bottom + l, I = Math.max(8, Math.min(e.left, n - e.width - 8)), M = H ? Math.min(o, b) : Math.min(o, s);
     return {
-      top: V,
-      left: $,
+      top: $,
+      left: I,
       width: e.width,
-      maxHeight: I
+      maxHeight: M
     };
   }
-  function O(e) {
+  function R(e) {
     if (u) {
       const t = d, n = t.includes(e) ? t.filter((o) => o !== e) : [...t, e];
-      z(n);
+      L(n);
     } else
-      z(e), m(!1);
+      L(e), m(!1);
   }
-  function S() {
+  function A() {
     if (u) {
       const e = d;
       if (e.length === 0)
-        return L;
+        return k;
       if (e.length === 1) {
-        const t = _.find((o) => (typeof o == "string" ? o : o.value) === e[0]);
+        const t = v.find((o) => (typeof o == "string" ? o : o.value) === e[0]);
         return (typeof t == "string" ? t : t?.label) || e[0];
       }
       return `${e.length} selected`;
     } else {
       const e = d;
       if (!e)
-        return L;
-      const t = _.find((o) => (typeof o == "string" ? o : o.value) === e);
+        return k;
+      const t = v.find((o) => (typeof o == "string" ? o : o.value) === e);
       return (typeof t == "string" ? t : t?.label) || e;
     }
   }
-  function A() {
-    f || (c ? m(!1) : (E(N()), m(!0)));
+  function V() {
+    h || (i ? m(!1) : (N(O()), m(!0)));
   }
   return P(() => {
-    if (!c) return;
-    s(), window.addEventListener("resize", s), window.addEventListener("scroll", s, !0);
-    const e = g.current?.closest("[data-dev-panel]") || document.querySelector("[data-dev-panel]");
-    e && e.addEventListener("scroll", s, !0);
+    if (!i) return;
+    c(), window.addEventListener("resize", c), window.addEventListener("scroll", c, !0);
+    const e = w.current?.closest("[data-dev-panel]") || document.querySelector("[data-dev-panel]");
+    e && e.addEventListener("scroll", c, !0);
     let t = null;
-    if (h.current && "IntersectionObserver" in window) {
+    if (p.current && "IntersectionObserver" in window) {
       const n = {
         top: 0,
         left: 0,
@@ -87,25 +87,25 @@ function ae({ value: p, options: _, onChange: z, disabled: f = !1, multiple: u =
       t = new IntersectionObserver(
         (o) => {
           const l = o[0];
-          if (l && l.target === h.current) {
-            const i = l.boundingClientRect;
-            (i.top !== n.top || i.left !== n.left || i.width !== n.width || i.height !== n.height) && (n.top = i.top, n.left = i.left, n.width = i.width, n.height = i.height, s());
+          if (l && l.target === p.current) {
+            const s = l.boundingClientRect;
+            (s.top !== n.top || s.left !== n.left || s.width !== n.width || s.height !== n.height) && (n.top = s.top, n.left = s.left, n.width = s.width, n.height = s.height, c());
           }
         },
         {
           threshold: [0, 0.1, 0.5, 1]
         }
-      ), t.observe(h.current);
+      ), t.observe(p.current);
     }
     return () => {
-      window.removeEventListener("resize", s), window.removeEventListener("scroll", s, !0), e && e.removeEventListener("scroll", s, !0), t && t.disconnect();
+      window.removeEventListener("resize", c), window.removeEventListener("scroll", c, !0), e && e.removeEventListener("scroll", c, !0), t && t.disconnect();
     };
-  }, [c, s]), P(() => {
-    const e = k.current;
-    (!e || e.x !== w.x || e.y !== w.y) && (k.current = w, c && requestAnimationFrame(s));
-  }, [c, w, s]), P(() => {
+  }, [i, c]), P(() => {
+    const e = E.current;
+    (!e || e.x !== g.x || e.y !== g.y) && (E.current = g, i && requestAnimationFrame(c));
+  }, [i, g, c]), P(() => {
     function e(t) {
-      if (g.current && !g.current.contains(t.target)) {
+      if (w.current && !w.current.contains(t.target)) {
         const n = document.querySelector(`.${r.dropdownPortal}`);
         if (n && n.contains(t.target))
           return;
@@ -115,35 +115,35 @@ function ae({ value: p, options: _, onChange: z, disabled: f = !1, multiple: u =
     return document.addEventListener("mousedown", e), () => {
       document.removeEventListener("mousedown", e);
     };
-  }, []), /* @__PURE__ */ y(M, { children: [
+  }, []), /* @__PURE__ */ y(q, { children: [
     /* @__PURE__ */ a(
       "div",
       {
-        ref: g,
+        ref: w,
         ...F(r.select, {
-          [r.disabled]: f,
-          [r.open]: c
+          [r.disabled]: h,
+          [r.open]: i
         }),
-        children: /* @__PURE__ */ y("button", { ref: h, type: "button", className: r.trigger, onClick: A, disabled: f, children: [
-          /* @__PURE__ */ a("span", { className: `${r.value} ${D ? r.placeholder : ""}`, children: C }),
+        children: /* @__PURE__ */ y("button", { ref: p, type: "button", className: r.trigger, onClick: V, disabled: h, children: [
+          /* @__PURE__ */ a("span", { className: `${r.value} ${S ? r.placeholder : ""}`, children: D }),
           /* @__PURE__ */ a(j, { name: "ArrowDown", className: r.arrow })
         ] })
       }
     ),
     typeof window < "u" && T(
-      c && !f && /* @__PURE__ */ a(
+      i && !h && /* @__PURE__ */ a(
         "div",
         {
           className: r.dropdownPortal,
           style: {
             position: "fixed",
-            top: b.top,
-            left: b.left,
-            width: b.width,
-            maxHeight: b.maxHeight,
+            top: _.top,
+            left: _.left,
+            width: _.width,
+            maxHeight: _.maxHeight,
             zIndex: 9999
           },
-          children: /* @__PURE__ */ a("div", { className: r.dropdown, children: _.map((e) => {
+          children: /* @__PURE__ */ a("div", { className: r.dropdown, children: v.map((e) => {
             const t = typeof e == "string" ? e : e.value, n = typeof e == "string" ? e : e.label, o = u ? d.includes(t) : d === t;
             return u ? /* @__PURE__ */ y("label", { className: r.option, children: [
               /* @__PURE__ */ a(
@@ -151,7 +151,7 @@ function ae({ value: p, options: _, onChange: z, disabled: f = !1, multiple: u =
                 {
                   type: "checkbox",
                   checked: o,
-                  onChange: () => O(t),
+                  onChange: () => R(t),
                   className: r.checkbox
                 }
               ),
@@ -161,7 +161,7 @@ function ae({ value: p, options: _, onChange: z, disabled: f = !1, multiple: u =
               {
                 type: "button",
                 className: `${r.option} ${o ? r.selected : ""}`,
-                onClick: () => O(t),
+                onClick: () => R(t),
                 children: n
               },
               t

package/dist/components/Textarea/index.d.ts

@@ -0,0 +1,5 @@
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    disableAutoExpand?: boolean;
+}
+export declare function Textarea(props: TextareaProps): React.ReactNode;
+export {};

package/dist/components/Textarea/index.js

@@ -0,0 +1,18 @@
+import { jsx as c } from "react/jsx-runtime";
+import '../../assets/index6.css';const h = "_textarea_83ckv_217", x = {
+  textarea: h
+}, a = 240;
+function g(r) {
+  const { disableAutoExpand: o, onChange: n, ...s } = r;
+  function l(e) {
+    if (!o && e.currentTarget) {
+      const t = e.currentTarget;
+      t.style.height = "auto", t.style.height = `${t.scrollHeight}px`, t.scrollHeight > a ? t.style.overflowY = "auto" : t.style.overflowY = "hidden";
+    }
+    n?.(e);
+  }
+  return /* @__PURE__ */ c("textarea", { ...s, className: x.textarea, onChange: l, style: { maxHeight: `${a}px` } });
+}
+export {
+  g as Textarea
+};

package/dist/hooks/useDevPanel/index.js

@@ -1,24 +1,52 @@
-import { useRef as f, useEffect as i, createElement as l } from "react";
-import { createRoot as m } from "react-dom/client";
-import { DevPanelPortal as p } from "../../components/DevPanelPortal/index.js";
-import { DevPanelManager as v } from "../../managers/DevPanelManager.js";
-import { useDevPanelSections as g, useDevPanelSectionActions as S } from "../../store/SectionsStore.js";
-import { hasControlsChanged as D } from "../../utils/hasControlChanged/hasControlChanged.js";
-function y(t, n, r) {
-  const c = g(), { registerSection: u, unregisterSection: a } = S(), s = f(void 0), o = f(null);
-  o.current || (o.current = v.getInstance()), i(() => {
-    const e = o.current, d = c[t] !== void 0;
-    D(n, s.current) || !d ? (u(t, n), s.current = n, e.addSection(t, r)) : r && e.updateProps(r);
-  }, [t, n, r, c, u]), i(() => () => {
-    const e = o.current;
-    a(t), e.removeSection(t);
-  }, [t, a]), i(() => {
+import { useRef as d, useEffect as s, createElement as v } from "react";
+import { createRoot as S } from "react-dom/client";
+import { DevPanelPortal as E } from "../../components/DevPanelPortal/index.js";
+import { DevPanelManager as P } from "../../managers/DevPanelManager.js";
+import { controlPersistenceService as m } from "../../store/ControlPersistenceService.js";
+import { useDevPanelSections as w, useDevPanelSectionActions as D } from "../../store/SectionsStore.js";
+import { hasControlsChanged as R } from "../../utils/hasControlChanged/hasControlChanged.js";
+function j(t, o, i) {
+  const p = w(), { registerSection: g, unregisterSection: h } = D(), C = d(void 0), c = d(null), f = d(/* @__PURE__ */ new Set());
+  c.current || (c.current = P.getInstance()), s(() => {
+    Object.entries(o).forEach(([e, n]) => {
+      const r = `${t}-${e}`;
+      if (n.persist && !f.current.has(r)) {
+        const a = m.getPersistedValue(t, e);
+        a !== void 0 && "onChange" in n && typeof n.onChange == "function" && n.onChange(a), f.current.add(r);
+      }
+    });
+  }, [t, o]);
+  const u = d({});
+  s(() => {
+    const e = {};
+    Object.entries(o).forEach(([n, r]) => {
+      if (r.persist && "onChange" in r && typeof r.onChange == "function") {
+        const a = r.onChange;
+        e[n] = {
+          ...r,
+          onChange: (l) => {
+            m.setPersistedValue(t, n, l), a(l);
+          }
+        };
+      } else
+        e[n] = r;
+    }), u.current = e;
+  }, [t, o]), s(() => {
+    const e = c.current, n = p[t] !== void 0;
+    R(u.current, C.current) || !n ? (g(t, u.current), C.current = u.current, e.addSection(t, i)) : i && e.updateProps(i);
+  }, [t, o, i, p, g]), s(() => {
+    const e = f.current;
+    return () => {
+      const n = c.current;
+      h(t), n.removeSection(t), e.clear();
+    };
+  }, [t, h]), s(() => {
     if (window.__devPanelAutoMounted) return;
     window.__devPanelAutoMounted = !0;
     const e = document.createElement("div");
-    e.id = "dev-panel-portal-container", e.style.display = "none", document.body.appendChild(e), m(e).render(l(p));
+    e.id = "dev-panel-portal-container", e.style.display = "none", document.body.appendChild(e), S(e).render(v(E));
   }, []);
 }
 export {
-  y as useDevPanel
+  j as useDevPanel
 };

package/dist/store/ControlPersistenceService.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Service for persisting individual control values
+ */
+declare class ControlPersistenceService {
+    private readonly storageKey;
+    /**
+     * Gets persisted value for a control
+     * @param sectionName - Name of the section
+     * @param controlKey - Key of the control within the section
+     * @returns Persisted value or undefined if not found
+     */
+    getPersistedValue(sectionName: string, controlKey: string): unknown;
+    /**
+     * Sets persisted value for a control
+     * @param sectionName - Name of the section
+     * @param controlKey - Key of the control within the section
+     * @param value - Value to persist
+     */
+    setPersistedValue(sectionName: string, controlKey: string, value: unknown): void;
+    /**
+     * Removes persisted value for a control
+     * @param sectionName - Name of the section
+     * @param controlKey - Key of the control within the section
+     */
+    removePersistedValue(sectionName: string, controlKey: string): void;
+    /**
+     * Removes all persisted values for a section
+     * @param sectionName - Name of the section
+     */
+    removeSection(sectionName: string): void;
+}
+export declare const controlPersistenceService: ControlPersistenceService;
+export {};

package/dist/store/ControlPersistenceService.js

@@ -0,0 +1,61 @@
+class a {
+  storageKey = "dev-panel-controls-persistence";
+  /**
+   * Gets persisted value for a control
+   * @param sectionName - Name of the section
+   * @param controlKey - Key of the control within the section
+   * @returns Persisted value or undefined if not found
+   */
+  getPersistedValue(e, s) {
+    try {
+      const t = localStorage.getItem(this.storageKey);
+      return t ? JSON.parse(t)[e]?.[s] : void 0;
+    } catch {
+      return;
+    }
+  }
+  /**
+   * Sets persisted value for a control
+   * @param sectionName - Name of the section
+   * @param controlKey - Key of the control within the section
+   * @param value - Value to persist
+   */
+  setPersistedValue(e, s, t) {
+    try {
+      const r = localStorage.getItem(this.storageKey), o = r ? JSON.parse(r) : {};
+      o[e] || (o[e] = {}), o[e][s] = t, localStorage.setItem(this.storageKey, JSON.stringify(o));
+    } catch {
+    }
+  }
+  /**
+   * Removes persisted value for a control
+   * @param sectionName - Name of the section
+   * @param controlKey - Key of the control within the section
+   */
+  removePersistedValue(e, s) {
+    try {
+      const t = localStorage.getItem(this.storageKey);
+      if (!t) return;
+      const r = JSON.parse(t);
+      r[e] && (delete r[e][s], Object.keys(r[e]).length === 0 && delete r[e], localStorage.setItem(this.storageKey, JSON.stringify(r)));
+    } catch {
+    }
+  }
+  /**
+   * Removes all persisted values for a section
+   * @param sectionName - Name of the section
+   */
+  removeSection(e) {
+    try {
+      const s = localStorage.getItem(this.storageKey);
+      if (!s) return;
+      const t = JSON.parse(s);
+      delete t[e], localStorage.setItem(this.storageKey, JSON.stringify(t));
+    } catch {
+    }
+  }
+}
+const l = new a();
+export {
+  l as controlPersistenceService
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"private": false,
-	"version": "2.1.0",
+	"version": "2.3.0",
 	"license": "MIT",
 	"name": "@berenjena/react-dev-panel",
 	"description": "A React development panel with various tools and utilities.",