@berenjena/react-dev-panel 2.1.0 → 2.3.0

package/dist/components/ControlRenderer/controls/ButtonControl/index.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import '../../../../assets/index12.css';const o = "_button_1h30c_217", s = {
+import '../../../../assets/index14.css';const o = "_button_1h30c_217", s = {
   button: o
 };
 function e({ control: t }) {

package/dist/components/ControlRenderer/controls/ButtonGroupControl/index.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { ButtonControl as e } from "../ButtonControl/index.js";
-import '../../../../assets/index11.css';const i = "_buttonGroupContainer_1irhu_217", l = {
+import '../../../../assets/index13.css';const i = "_buttonGroupContainer_1irhu_217", l = {
   buttonGroupContainer: i
 };
 function p({ control: n }) {

package/dist/components/ControlRenderer/controls/ColorControl/index.js

@@ -2,7 +2,7 @@ import { jsxs as m, jsx as l } from "react/jsx-runtime";
 import { useState as v, useEffect as C } from "react";
 import { Input as p } from "../../../Input/index.js";
 import { useDebouncedCallback as b } from "../../../../hooks/useDebounceCallback/index.js";
-import '../../../../assets/index10.css';const y = "_container_1oo6z_1", x = "_colorPreview_1oo6z_7", V = "_errorMessage_1oo6z_52", c = {
+import '../../../../assets/index12.css';const y = "_container_1oo6z_1", x = "_colorPreview_1oo6z_7", V = "_errorMessage_1oo6z_52", c = {
   container: y,
   colorPreview: x,
   errorMessage: V

package/dist/components/ControlRenderer/controls/DragAndDropControl/index.d.ts

@@ -0,0 +1,2 @@
+import { DragAndDropControlProps } from './types';
+export declare function DragAndDropControl({ control }: DragAndDropControlProps): React.ReactNode;

package/dist/components/ControlRenderer/controls/DragAndDropControl/index.js

@@ -0,0 +1,117 @@
+import { jsxs as u, Fragment as k, jsx as r } from "react/jsx-runtime";
+import { useState as n, useRef as R, useCallback as t } from "react";
+import { className as M } from "../../../../utils/className/className.js";
+import '../../../../assets/index11.css';const I = "_dropZone_p0d3i_9", Z = "_disabled_p0d3i_26", j = "_active_p0d3i_45", A = "_supportedFormats_p0d3i_60", P = "_dropText_p0d3i_66", N = "_droppedFile_p0d3i_71", E = "_droppedText_p0d3i_79", L = "_errorMessage_p0d3i_86", d = {
+  dropZone: I,
+  disabled: Z,
+  active: j,
+  supportedFormats: A,
+  dropText: P,
+  droppedFile: N,
+  droppedText: E,
+  errorMessage: L
+};
+function V({ control: s }) {
+  const [D, i] = n(!1), [o, f] = n(null), [v, b] = n(!0), [g, l] = n(""), c = R(null), _ = t(
+    (e) => {
+      if (!s.allowedFileTypes)
+        return !0;
+      const a = e.toLowerCase().substring(e.lastIndexOf("."));
+      return s.allowedFileTypes.some((m) => m.toLowerCase() === a);
+    },
+    [s.allowedFileTypes]
+  ), p = t(
+    (e) => {
+      if (s.allowedFileTypes && !_(e.name)) {
+        l(`File type not allowed. 
+ Supported formats: ${s.allowedFileTypes.join(", ")}`), i(!1);
+        return;
+      }
+      l("");
+      const a = new FileReader();
+      a.onload = () => {
+        i(!1);
+        const F = {
+          base64: a.result,
+          file: e,
+          name: e.name,
+          size: e.size,
+          type: e.type,
+          lastModified: e.lastModified,
+          webkitRelativePath: e.webkitRelativePath
+        };
+        f(F), b(!1), s.onDrop(F);
+      }, a.readAsDataURL(e);
+    },
+    [s, _, l, f, b, i]
+  ), h = t(() => {
+    !o && c.current && !s.disabled && c.current.click();
+  }, [o, s.disabled]), T = t(
+    (e) => {
+      const a = e.target.files;
+      a && a.length > 0 && p(a[0]), e.target.value = "";
+    },
+    [p]
+  ), w = t(
+    (e) => {
+      s.disabled || (e.preventDefault(), e.stopPropagation(), i(!0), l(""));
+    },
+    [s.disabled]
+  ), y = t(
+    (e) => {
+      if (s.disabled) return;
+      e.preventDefault(), e.stopPropagation();
+      const a = e.dataTransfer.files;
+      a.length > 0 && p(a[0]);
+    },
+    [p, s.disabled]
+  ), x = t(
+    (e) => {
+      s.disabled || (e.preventDefault(), e.stopPropagation(), i(!0), l(""));
+    },
+    [s.disabled]
+  ), C = t(
+    (e) => {
+      s.disabled || (e.preventDefault(), e.stopPropagation(), i(!1));
+    },
+    [s.disabled]
+  );
+  return /* @__PURE__ */ u(k, { children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        ref: c,
+        type: "file",
+        style: { display: "none" },
+        accept: s.allowedFileTypes?.join(","),
+        onChange: T,
+        disabled: s.disabled
+      }
+    ),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        ...M(d.dropZone, {
+          [d.active]: D,
+          [d.disabled]: !!s.disabled
+        }),
+        onDragEnter: w,
+        onDragOver: x,
+        onDragLeave: C,
+        onDrop: y,
+        onClick: h,
+        children: g ? /* @__PURE__ */ r("div", { className: d.errorMessage, children: /* @__PURE__ */ r("p", { children: g }) }) : o ? /* @__PURE__ */ r("div", { className: d.droppedFile, children: /* @__PURE__ */ u("p", { className: d.droppedText, children: [
+          "Dropped '",
+          o.name,
+          "'"
+        ] }) }) : v ? /* @__PURE__ */ u("div", { children: [
+          /* @__PURE__ */ r("p", { className: d.dropText, children: "Drag & Drop a file here or click to browse" }),
+          /* @__PURE__ */ r("p", { className: d.supportedFormats, children: s.allowedFileTypes ? `Supported formats: ${s.allowedFileTypes.join(", ")}` : "All file types are supported" })
+        ] }) : null
+      }
+    )
+  ] });
+}
+export {
+  V as DragAndDropControl
+};

package/dist/components/ControlRenderer/controls/DragAndDropControl/types.d.ts

@@ -0,0 +1,20 @@
+import { BaseControl } from '../types';
+export type FileInfo = {
+	name: string;
+	size: number;
+	type: string;
+	file: File;
+	base64: string;
+	lastModified: number;
+	webkitRelativePath: string;
+};
+
+export interface DragAndDropControl extends BaseControl {
+	type: "dragAndDrop";
+	onDrop: (value: FileInfo) => void;
+	allowedFileTypes?: string[];
+}
+
+export interface DragAndDropControlProps {
+	control: DragAndDropControl;
+}

package/dist/components/ControlRenderer/controls/RangeControl/index.js

@@ -1,6 +1,6 @@
 import { jsxs as g, jsx as i } from "react/jsx-runtime";
 import { useState as o, useEffect as m } from "react";
-import '../../../../assets/index9.css';const v = "_container_1a1cs_1", h = "_range_1a1cs_9", d = "_value_1a1cs_115", u = {
+import '../../../../assets/index10.css';const v = "_container_1a1cs_1", h = "_range_1a1cs_9", d = "_value_1a1cs_115", u = {
   container: v,
   range: h,
   value: d

package/dist/components/ControlRenderer/controls/SeparatorControl/index.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import '../../../../assets/index8.css';const s = "_line_174q4_1", t = "_space_174q4_9", i = "_labelContainer_174q4_14", c = "_label_174q4_14", l = {
+import '../../../../assets/index9.css';const s = "_line_174q4_1", t = "_space_174q4_9", i = "_labelContainer_174q4_14", c = "_label_174q4_14", l = {
   line: s,
   space: t,
   labelContainer: i,

package/dist/components/ControlRenderer/controls/TextControl/index.js

@@ -1,27 +1,27 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useState as h, useEffect as i } from "react";
-import { Input as s } from "../../../Input/index.js";
+import { jsx as i } from "react/jsx-runtime";
+import { useState as s, useEffect as r } from "react";
+import { Textarea as f } from "../../../Textarea/index.js";
 function v({ control: e }) {
-  const n = e.event || "onChange", [l, u] = h(e.value);
-  function o(t) {
-    const a = t.target.value;
-    u(a), n === "onChange" && e.onChange(a);
+  const n = e.event || "onChange", [t, l] = s(e.value);
+  function o(u) {
+    const a = u.target.value;
+    l(a), n === "onChange" && e.onChange(a);
   }
-  function r(t) {
-    const a = t.target.value;
+  function d(u) {
+    const a = u.target.value;
     n === "onBlur" && e.onChange(a);
   }
-  return i(() => {
-    u(e.value);
-  }, [e.value]), /* @__PURE__ */ f(
-    s,
+  return r(() => {
+    l(e.value);
+  }, [e.value]), /* @__PURE__ */ i(
+    f,
     {
-      type: "text",
-      value: l,
+      value: t,
       placeholder: e.placeholder,
       disabled: e.disabled,
       onChange: o,
-      ...n === "onBlur" && { onBlur: r }
+      disableAutoExpand: e.disableAutoExpand,
+      ...n === "onBlur" && { onBlur: d }
     }
   );
 }

package/dist/components/ControlRenderer/controls/TextControl/types.d.ts

@@ -3,6 +3,7 @@ export interface TextControl extends BaseInputControl {
 	type: "text";
 	value: string;
 	placeholder?: string;
+	disableAutoExpand?: boolean;
 }
 
 export interface TextControlProps {

package/dist/components/ControlRenderer/controls/index.d.ts

@@ -15,4 +15,5 @@ export declare const controls: Readonly<{
     separator: import('react').LazyExoticComponent<typeof import('./SeparatorControl').SeparatorControl>;
     text: import('react').LazyExoticComponent<typeof import('./TextControl').TextControl>;
     buttonGroup: import('react').LazyExoticComponent<typeof import('./ButtonGroupControl').ButtonGroupControl>;
+    dragAndDrop: import('react').LazyExoticComponent<typeof import('./DragAndDropControl').DragAndDropControl>;
 }>;

package/dist/components/ControlRenderer/controls/index.js

@@ -10,7 +10,8 @@ const r = Object.freeze({
   multiselect: o(() => import("./MultiSelectControl/index.js").then((t) => ({ default: t.MultiSelectControl }))),
   separator: o(() => import("./SeparatorControl/index.js").then((t) => ({ default: t.SeparatorControl }))),
   text: o(() => import("./TextControl/index.js").then((t) => ({ default: t.TextControl }))),
-  buttonGroup: o(() => import("./ButtonGroupControl/index.js").then((t) => ({ default: t.ButtonGroupControl })))
+  buttonGroup: o(() => import("./ButtonGroupControl/index.js").then((t) => ({ default: t.ButtonGroupControl }))),
+  dragAndDrop: o(() => import("./DragAndDropControl/index.js").then((t) => ({ default: t.DragAndDropControl })))
 });
 export {
   r as controls

package/dist/components/ControlRenderer/controls/types.d.ts

@@ -3,6 +3,7 @@ import { ButtonControl } from './ButtonControl/types';
 import { ButtonGroupControl } from './ButtonGroupControl/types';
 import { ColorControl } from './ColorControl/types';
 import { DateControl } from './DateControl/types';
+import { DragAndDropControl } from './DragAndDropControl/types';
 import { MultiSelectControl } from './MultiSelectControl/types';
 import { NumberControl } from './NumberControl/types';
 import { RangeControl } from './RangeControl/types';
@@ -13,6 +14,7 @@ export interface BaseControl {
 	label?: string;
 	description?: string;
 	disabled?: boolean;
+	persist?: boolean;
 }
 
 export interface BaseInputControl extends BaseControl {
@@ -32,6 +34,7 @@ export type Controls = {
 	date: DateControl;
 	separator: SeparatorControl;
 	buttonGroup: ButtonGroupControl;
+	dragAndDrop: DragAndDropControl;
 };
 
 export type ControlsNames = keyof Controls;

package/dist/components/ControlRenderer/index.js

@@ -1,52 +1,52 @@
 import { jsxs as t, jsx as n } from "react/jsx-runtime";
 import { Suspense as c } from "react";
-import { className as s } from "../../utils/className/className.js";
+import { className as l } from "../../utils/className/className.js";
 import { controls as d } from "./controls/index.js";
-import '../../assets/index5.css';const p = "_controlRendererContainer_1s60v_1", _ = "_controlContainer_1s60v_4", u = "_hoverable_1s60v_13", v = "_fullWidth_1s60v_16", f = "_label_1s60v_19", h = "_controlWrapper_1s60v_22", b = "_justifyStart_1s60v_26", C = "_description_1s60v_42", m = "_loading_1s60v_51", y = "_error_1s60v_70", r = {
+import '../../assets/index5.css';const p = "_controlRendererContainer_jru2l_1", u = "_controlContainer_jru2l_5", _ = "_hoverable_jru2l_15", f = "_fullWidth_jru2l_18", h = "_label_jru2l_21", b = "_controlWrapper_jru2l_24", j = "_justifyStart_jru2l_30", C = "_description_jru2l_46", m = "_loading_jru2l_55", y = "_error_jru2l_74", e = {
   controlRendererContainer: p,
-  controlContainer: _,
-  hoverable: u,
-  fullWidth: v,
-  label: f,
-  controlWrapper: h,
-  justifyStart: b,
+  controlContainer: u,
+  hoverable: _,
+  fullWidth: f,
+  label: h,
+  controlWrapper: b,
+  justifyStart: j,
   description: C,
   loading: m,
   error: y
-}, W = ["button", "buttonGroup", "separator"], j = ["separator"], N = ["button", "separator"];
-function L({ name: l, control: e }) {
-  const i = e?.label || l;
-  function a() {
-    if (!e || !e.type)
-      return /* @__PURE__ */ n("div", { className: r.error, children: "Control type is not defined" });
-    const o = d[e.type];
-    return o ? /* @__PURE__ */ n(c, { fallback: /* @__PURE__ */ n("div", { className: r.loading, children: "Loading control..." }), children: /* @__PURE__ */ n(o, { control: e }) }) : /* @__PURE__ */ n("div", { children: "Unknown control type" });
+}, v = ["button", "buttonGroup", "separator", "dragAndDrop"], g = ["separator", "dragAndDrop"], W = ["button", "separator", "dragAndDrop"];
+function A({ name: i, control: r }) {
+  const a = r?.label || i;
+  function s() {
+    if (!r || !r.type)
+      return /* @__PURE__ */ n("div", { className: e.error, children: "Control type is not defined" });
+    const o = d[r.type];
+    return o ? /* @__PURE__ */ n(c, { fallback: /* @__PURE__ */ n("div", { className: e.loading, children: "Loading control..." }), children: /* @__PURE__ */ n(o, { control: r }) }) : /* @__PURE__ */ n("div", { children: "Unknown control type" });
   }
-  return /* @__PURE__ */ t("div", { className: r.controlRendererContainer, children: [
+  return /* @__PURE__ */ t("div", { className: e.controlRendererContainer, children: [
     /* @__PURE__ */ t(
       "div",
       {
-        ...s(r.controlContainer, {
-          [r.fullWidth]: W.includes(e.type),
-          [r.hoverable]: !j.includes(e.type)
+        ...l(e.controlContainer, {
+          [e.fullWidth]: v.includes(r.type),
+          [e.hoverable]: !g.includes(r.type)
         }),
         children: [
-          !N.includes(e.type) && /* @__PURE__ */ n("label", { className: r.label, children: i }),
+          !W.includes(r.type) && /* @__PURE__ */ n("label", { className: e.label, children: a }),
           /* @__PURE__ */ n(
             "div",
             {
-              ...s(r.controlWrapper, {
-                [r.justifyStart]: e.type === "separator"
+              ...l(e.controlWrapper, {
+                [e.justifyStart]: r.type === "separator"
               }),
-              children: a()
+              children: s()
             }
           )
         ]
       }
     ),
-    e?.description && /* @__PURE__ */ n("span", { className: r.description, children: e.description })
+    r?.description && /* @__PURE__ */ n("span", { className: e.description, children: r.description })
   ] });
 }
 export {
-  L as ControlRenderer
+  A as ControlRenderer
 };

package/dist/components/DevPanel/index.js

@@ -1,71 +1,69 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { useCallback as D, useEffect as y } from "react";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { useCallback as y, useEffect as D } from "react";
 import { useDragAndDrop as b } from "../../hooks/useDragAndDrop/index.js";
-import { useHotkey as w } from "../../hooks/useHotKey/index.js";
-import { useDevPanelSections as K } from "../../store/SectionsStore.js";
-import { useDevPanelUI as N, useDevPanelThemeActions as k } from "../../store/UIStore.js";
-import { className as x } from "../../utils/className/className.js";
-import { EmptyContent as E } from "../EmptyContent/index.js";
+import { useHotkey as g } from "../../hooks/useHotKey/index.js";
+import { useDevPanelSections as w } from "../../store/SectionsStore.js";
+import { useDevPanelUI as K, useDevPanelThemeActions as N } from "../../store/UIStore.js";
+import { className as k } from "../../utils/className/className.js";
+import { EmptyContent as x } from "../EmptyContent/index.js";
 import { Icon as f } from "../Icon/index.js";
-import { Section as j } from "../Section/index.js";
-import '../../assets/index2.css';const A = "_devPanelContainer_1089m_217", S = "_header_1089m_256", H = "_title_1089m_271", I = "_button_1089m_282", T = "_collapsed_1089m_318", V = "_content_1089m_325", t = {
-  devPanelContainer: A,
-  header: S,
-  title: H,
-  button: I,
-  collapsed: T,
-  content: V
-}, O = {
+import { Section as E } from "../Section/index.js";
+import '../../assets/index2.css';const j = "_devPanelContainer_11dce_217", A = "_header_11dce_256", S = "_title_11dce_271", H = "_button_11dce_283", I = "_collapsed_11dce_319", T = "_content_11dce_326", t = {
+  devPanelContainer: j,
+  header: A,
+  title: S,
+  button: H,
+  collapsed: I,
+  content: T
+}, V = {
   ctrlKey: !0,
   shiftKey: !0,
   key: "a",
   altKey: !1,
   metaKey: !1
 };
-function M({ panelTitle: h = "Dev panel", ...o }) {
-  const { isVisible: i, isCollapsed: n, position: l, setVisible: a, setCollapsed: u, setPosition: r } = N(), { setTheme: c } = k(), p = K(), _ = D(
+function L({ panelTitle: h = "Dev panel", ...o }) {
+  const { isVisible: i, isCollapsed: n, position: l, setVisible: a, setCollapsed: u, setPosition: c } = K(), { setTheme: r } = N(), p = w(), _ = y(
     (s) => {
-      r(s);
+      c(s);
     },
-    [r]
-  ), { isDragging: v, elementRef: C, handlePointerDown: g } = b({
+    [c]
+  ), { elementRef: v, handlePointerDown: C } = b({
     onPositionChange: _
   });
-  if (w({
+  if (g({
     description: "Show Dev Panel",
     preventDefault: !0,
     action: () => a(!i),
-    ...O,
+    ...V,
     ...o.hotKeyConfig,
     target: window
-  }), y(() => {
-    o.theme && c(o.theme);
-  }, [o.theme, c]), !i)
+  }), D(() => {
+    o.theme && r(o.theme);
+  }, [o.theme, r]), !i)
     return null;
-  const m = Object.entries(p);
-  return /* @__PURE__ */ d(
+  const d = Object.entries(p);
+  return /* @__PURE__ */ m(
     "div",
     {
-      ref: C,
-      ...x(t.devPanelContainer, {
-        [t.dragging]: v
-      }),
+      ref: v,
+      ...k(t.devPanelContainer),
       style: {
         left: l.x,
         top: l.y,
         height: n ? "auto" : void 0
       },
       children: [
-        /* @__PURE__ */ d("div", { className: t.header, onPointerDown: g, children: [
+        /* @__PURE__ */ m("div", { className: t.header, onPointerDown: C, children: [
           /* @__PURE__ */ e("button", { className: t.button, onClick: () => u(!n), title: n ? "Expand" : "Collapse", children: /* @__PURE__ */ e(f, { name: "ArrowDown", className: n ? t.collapsed : void 0 }) }),
           /* @__PURE__ */ e("div", { className: t.title, children: h }),
           /* @__PURE__ */ e("button", { className: t.button, onClick: () => a(!1), title: "Close", children: /* @__PURE__ */ e(f, { name: "Close" }) })
         ] }),
-        !n && /* @__PURE__ */ e("div", { className: t.content, children: m.length ? m.map(([s, P]) => /* @__PURE__ */ e(j, { sectionName: s, section: P }, `section-${s}`)) : /* @__PURE__ */ e(E, {}) })
+        !n && /* @__PURE__ */ e("div", { className: t.content, children: d.length ? d.map(([s, P]) => /* @__PURE__ */ e(E, { sectionName: s, section: P }, `section-${s}`)) : /* @__PURE__ */ e(x, {}) })
       ]
     }
   );
 }
 export {
-  M as DevPanel
+  L as DevPanel
 };

package/dist/components/Input/index.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import '../../assets/index7.css';const u = "_input_icuc6_217", i = {
+import '../../assets/index8.css';const u = "_input_icuc6_217", i = {
   input: u
 };
 function s(t) {