@fctc/sme-widget-ui 2.2.9 → 2.3.0

package/dist/widgets.js

@@ -10120,346 +10120,65 @@ var TableBody = (props) => {
 };
 
 // src/widgets/advanced/table/table-filter.tsx
-var import_react15 = require("react");
-var import_react_dom = require("react-dom");
-
-// src/hooks/use-click-outside.ts
-var import_react13 = require("react");
-var DEFAULT_EVENTS = ["mousedown", "touchstart"];
-var useClickOutside = ({
-  handler,
-  events = DEFAULT_EVENTS,
-  nodes = [],
-  // Default to empty array to avoid undefined errors
-  refs
-}) => {
-  const ref = (0, import_react13.useRef)(null);
-  (0, import_react13.useEffect)(() => {
-    const listener = (event) => {
-      const { target } = event;
-      if (refs && refs?.length > 0 && refs?.some((r4) => r4.current?.contains(target))) {
-        return;
-      }
-      if (!(target instanceof HTMLElement)) return;
-      const shouldIgnore = target.hasAttribute("data-ignore-outside-clicks") || !document.body.contains(target) && target.tagName !== "HTML";
-      const shouldTrigger = nodes.length > 0 ? nodes.every((node2) => node2 && !event.composedPath().includes(node2)) : ref.current && !ref.current.contains(target);
-      if (shouldTrigger && !shouldIgnore) {
-        handler(event);
-      }
-    };
-    events.forEach((event) => document.addEventListener(event, listener));
-    return () => {
-      events.forEach((event) => document.removeEventListener(event, listener));
-    };
-  }, [handler, nodes, events]);
-  return ref;
-};
-
-// src/hooks/use-get-file-infor.ts
-var import_react14 = require("react");
-function getFileName(source, mime) {
-  if (source instanceof File) return source.name;
-  if (typeof source === "string") {
-    if (source.startsWith("data:")) {
-      const ext2 = mime?.split("/")[1] || "bin";
-      return `file.${ext2}`;
-    }
-    try {
-      const pathname = new URL(source).pathname;
-      const filename = decodeURIComponent(pathname.split("/").pop() || "");
-      if (filename) return filename;
-    } catch {
-    }
-    return "file.bin";
-  }
-  const ext = mime?.split("/")[1] || "bin";
-  return `file.${ext}`;
-}
-function useFileInfo(source, options2) {
-  const { readAs = "all" } = options2 ?? {};
-  const [info, setInfo] = (0, import_react14.useState)(null);
-  const [loading, setLoading] = (0, import_react14.useState)(false);
-  const [error2, setError] = (0, import_react14.useState)(null);
-  const abortRef = (0, import_react14.useRef)({ aborted: false });
-  (0, import_react14.useEffect)(() => {
-    abortRef.current.aborted = false;
-    if (!source) {
-      setInfo(null);
-      setLoading(false);
-      setError(null);
-      return;
-    }
-    let localUrl = null;
-    let fr = null;
-    let mediaEl = null;
-    const makeExtension = (name2, type) => {
-      if (name2) {
-        const idx = name2.lastIndexOf(".");
-        if (idx > -1) return name2.slice(idx + 1).toLowerCase();
-      }
-      if (type) {
-        const match3 = /\/([a-z0-9.+-]+)$/.exec(type);
-        return match3 ? match3[1] : null;
-      }
-      return null;
-    };
-    const toBlobFromSource = async (src) => {
-      if (src instanceof Blob) return src;
-      if (typeof src === "string") {
-        const s4 = src.trim();
-        if (s4.startsWith("data:")) {
-          const parts = s4.split(",");
-          const meta = parts[0];
-          const isBase64 = meta.includes(";base64");
-          const mimeMatch = meta.match(/data:([^;]+)/);
-          const mime = mimeMatch ? mimeMatch[1] : "application/octet-stream";
-          const dataPart = parts.slice(1).join(",");
-          if (isBase64) {
-            const binary = atob(dataPart);
-            const len = binary.length;
-            const arr = new Uint8Array(len);
-            for (let i3 = 0; i3 < len; i3++) arr[i3] = binary.charCodeAt(i3);
-            return new Blob([arr], { type: mime });
-          } else {
-            const decoded = decodeURIComponent(dataPart);
-            return new Blob([decoded], { type: mime });
-          }
-        }
-        const resp = await fetch(s4);
-        if (!resp.ok) throw new Error(`Fetch failed with status ${resp.status}`);
-        const blob = await resp.blob();
-        return blob;
-      }
-      throw new Error("Unsupported source type");
-    };
-    const run = async () => {
-      setLoading(true);
-      setError(null);
-      setInfo(null);
-      try {
-        const blob = await toBlobFromSource(source);
-        if (abortRef.current.aborted) return;
-        const fileInfo = {
-          rawBlob: blob,
-          size: blob.size,
-          type: blob.type || "application/octet-stream",
-          dataUrl: null,
-          text: null,
-          arrayBuffer: null,
-          image: null,
-          video: null,
-          audio: null
-        };
-        if (source instanceof File || source instanceof Blob || typeof source === "string" && !source.startsWith("data:")) {
-          fileInfo.name = getFileName(source, fileInfo.type);
-        }
-        fileInfo.extension = makeExtension(fileInfo.name, fileInfo.type);
-        localUrl = URL.createObjectURL(blob);
-        const readPromises = [];
-        if (readAs === "dataUrl" || readAs === "all") {
-          fr = new FileReader();
-          const p = new Promise((resolve, reject) => {
-            fr.onload = () => {
-              if (abortRef.current.aborted) return resolve();
-              fileInfo.dataUrl = fr.result;
-              resolve();
-            };
-            fr.onerror = () => reject(fr.error);
-            fr.readAsDataURL(blob);
-          });
-          readPromises.push(p);
-        }
-        if (readAs === "text" || readAs === "all") {
-          const frText = new FileReader();
-          const p = new Promise((resolve, reject) => {
-            frText.onload = () => {
-              if (abortRef.current.aborted) return resolve();
-              fileInfo.text = frText.result;
-              resolve();
-            };
-            frText.onerror = () => reject(frText.error);
-            frText.readAsText(blob);
-          });
-          readPromises.push(p);
-        }
-        if (readAs === "arrayBuffer" || readAs === "all") {
-          const frBuf = new FileReader();
-          const p = new Promise((resolve, reject) => {
-            frBuf.onload = () => {
-              if (abortRef.current.aborted) return resolve();
-              fileInfo.arrayBuffer = frBuf.result;
-              resolve();
-            };
-            frBuf.onerror = () => reject(frBuf.error);
-            frBuf.readAsArrayBuffer(blob);
-          });
-          readPromises.push(p);
-        }
-        if (fileInfo?.type?.startsWith("image/")) {
-          const p = new Promise((resolve, reject) => {
-            const img = new Image();
-            img.onload = () => {
-              if (abortRef.current.aborted) return resolve();
-              fileInfo.image = {
-                width: img.naturalWidth,
-                height: img.naturalHeight
-              };
-              resolve();
-            };
-            img.onerror = () => resolve();
-            img.src = localUrl;
-          });
-          readPromises.push(p);
-        }
-        if (fileInfo && fileInfo?.type?.startsWith("video/") || fileInfo?.type?.startsWith("audio/")) {
-          const p = new Promise((resolve) => {
-            const el = document.createElement(
-              fileInfo?.type?.startsWith("video/") ? "video" : "audio"
-            );
-            mediaEl = el;
-            mediaEl.preload = "metadata";
-            mediaEl.onloadedmetadata = () => {
-              if (abortRef.current.aborted) return resolve();
-              const duration = isFinite(mediaEl.duration) ? mediaEl.duration : void 0;
-              if (fileInfo?.type?.startsWith("video/")) {
-                fileInfo.video = {
-                  width: mediaEl.videoWidth || void 0,
-                  height: mediaEl.videoHeight || void 0,
-                  duration
-                };
-              } else {
-                fileInfo.audio = { duration };
-              }
-              resolve();
-            };
-            mediaEl.onerror = () => resolve();
-            mediaEl.src = localUrl;
-          });
-          readPromises.push(p);
-        }
-        await Promise.all(readPromises);
-        if (abortRef.current.aborted) return;
-        setInfo(fileInfo);
-      } catch (err) {
-        if (!abortRef.current.aborted) setError(err?.message ?? String(err));
-      } finally {
-        if (!abortRef.current.aborted) setLoading(false);
-      }
-    };
-    run();
-    return () => {
-      abortRef.current.aborted = true;
-      if (fr && fr.readyState === 1) {
-        try {
-          fr.abort();
-        } catch {
-        }
-      }
-      if (mediaEl) {
-        try {
-          mediaEl.src = "";
-          mediaEl.load();
-        } catch {
-        }
-      }
-      if (localUrl) URL.revokeObjectURL(localUrl);
-    };
-  }, [source, readAs]);
-  return { info, loading, error: error2, reload: () => {
-  } };
-}
-
-// src/widgets/advanced/table/table-filter.tsx
+var import_react13 = require("@headlessui/react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var TableFilter = ({ columns, onToggleColumnOptional }) => {
-  const [openTableFilter, setOpenTableFilter] = (0, import_react15.useState)();
-  const [filterPosition, setFilterPosition] = (0, import_react15.useState)(null);
-  const filterPopupRef = (0, import_react15.useRef)(null);
-  const filterRef = useClickOutside({
-    handler: () => {
-      if (openTableFilter) {
-        setOpenTableFilter(false);
-      }
-    },
-    refs: [filterPopupRef]
-  });
-  (0, import_react15.useEffect)(() => {
-    const updatePosition = () => {
-      if (filterRef.current && openTableFilter) {
-        const rect = filterRef.current.getBoundingClientRect();
-        setFilterPosition({
-          top: rect.bottom + window.scrollY,
-          left: rect.left + window.scrollX,
-          right: window.innerWidth - rect.right
-        });
-      }
-    };
-    updatePosition();
-    window.addEventListener("scroll", updatePosition);
-    window.addEventListener("resize", updatePosition);
-    return () => {
-      window.removeEventListener("scroll", updatePosition);
-      window.removeEventListener("resize", updatePosition);
-    };
-  }, [filterRef, openTableFilter]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     "div",
     {
-      ref: filterRef,
       style: {
         transform: "translateY(-50%)"
       },
-      className: "w-fit absolute top-[50%] translate-y-[-50%] right-[10px] ms-auto z-[32] bg-white",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      className: "w-fit absolute top-[50%] translate-y-[-50%] right-[0px] ms-auto z-[32] ",
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react13.Popover, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react13.PopoverButton, { className: "p-2 rounded-lg cursor-pointer outline-none", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           "button",
           {
             type: "button",
             className: "bg-white size-8 p-1 rounded-lg cursor-pointer flex items-center justify-center",
-            onClick: () => {
-              setOpenTableFilter(!openTableFilter);
-            },
             children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(FilterColumnIcon, {})
           }
-        ),
-        filterPosition && openTableFilter && (0, import_react_dom.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            "div",
-            {
-              ref: filterPopupRef,
-              style: {
-                top: filterPosition?.top,
-                right: filterPosition?.right,
-                zIndex: 9999
-              },
-              className: "absolute z-[9999] flex w-[250px] h-auto max-h-[800%] overflow-auto flex-col gap-[16px] rounded-[8px] bg-[#fff] px-[24px] py-[16px] shadow-md",
-              children: columns?.filter((val) => val?.optional !== void 0)?.map((item) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                    "input",
-                    {
-                      type: "checkbox",
-                      id: `${item.name}`,
-                      onChange: () => onToggleColumnOptional(item),
-                      checked: item.optional !== "hide",
-                      className: "cursor-pointer"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                    "label",
-                    {
-                      htmlFor: `${item.name}`,
-                      className: "flex items-center gap-[8px]",
-                      children: item.field.string
-                    }
-                  )
-                ] }, item.name);
-              })
-            }
-          ),
-          document.body
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          import_react13.PopoverPanel,
+          {
+            transition: true,
+            anchor: "bottom end",
+            className: "shadow-lg z-[99] gap-2 bg-white rounded-lg transition duration-200 ease-in-out border border-stroke-disabled",
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              "div",
+              {
+                style: {
+                  zIndex: 9999
+                },
+                className: "flex w-[250px] h-auto overflow-auto flex-col gap-[16px] rounded-[8px] bg-[#fff] px-[24px] py-[16px] shadow-md",
+                children: columns?.filter((val) => val?.optional !== void 0)?.map((item) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                      "input",
+                      {
+                        type: "checkbox",
+                        id: `${item.name}`,
+                        onChange: () => onToggleColumnOptional(item),
+                        checked: item.optional !== "hide",
+                        className: "cursor-pointer"
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                      "label",
+                      {
+                        htmlFor: `${item.name}`,
+                        className: "flex items-center gap-[8px]",
+                        children: item.field.string
+                      }
+                    )
+                  ] }, item.name);
+                })
+              }
+            )
+          }
         )
-      ]
+      ] })
     }
   );
 };
@@ -10521,7 +10240,7 @@ var TableFooter = ({ onAddRow, rows }) => {
 };
 
 // node_modules/react-tooltip/dist/react-tooltip.min.mjs
-var import_react16 = __toESM(require("react"), 1);
+var import_react14 = __toESM(require("react"), 1);
 
 // node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var min = Math.min;
@@ -11984,7 +11703,7 @@ var L = (e3) => {
   }
   return document.scrollingElement || document.documentElement;
 };
-var C = "undefined" != typeof window ? import_react16.useLayoutEffect : import_react16.useEffect;
+var C = "undefined" != typeof window ? import_react14.useLayoutEffect : import_react14.useEffect;
 var R = (e3) => {
   e3.current && (clearTimeout(e3.current), e3.current = null);
 };
@@ -11993,15 +11712,15 @@ var N = { anchorRefs: /* @__PURE__ */ new Set(), activeAnchor: { current: null }
 }, detach: () => {
 }, setActiveAnchor: () => {
 } };
-var $ = (0, import_react16.createContext)({ getTooltipData: () => N });
+var $ = (0, import_react14.createContext)({ getTooltipData: () => N });
 function z(e3 = x) {
-  return (0, import_react16.useContext)($).getTooltipData(e3);
+  return (0, import_react14.useContext)($).getTooltipData(e3);
 }
 var B = { tooltip: "core-styles-module_tooltip__3vRRp", fixed: "core-styles-module_fixed__pcSol", arrow: "core-styles-module_arrow__cvMwQ", noArrow: "core-styles-module_noArrow__xock6", clickable: "core-styles-module_clickable__ZuTTB", show: "core-styles-module_show__Nt9eE", closing: "core-styles-module_closing__sGnxF" };
 var D = { tooltip: "styles-module_tooltip__mnnfp", arrow: "styles-module_arrow__K0L3T", dark: "styles-module_dark__xNqje", light: "styles-module_light__Z6W-X", success: "styles-module_success__A2AKt", warning: "styles-module_warning__SCK0X", error: "styles-module_error__JvumD", info: "styles-module_info__BWdHW" };
 var q = ({ forwardRef: t3, id: l2, className: i3, classNameArrow: c2, variant: u = "dark", anchorId: d, anchorSelect: p, place: v = "top", offset: m = 10, events: h2 = ["hover"], openOnClick: w3 = false, positionStrategy: b2 = "absolute", middlewares: S2, wrapper: g, delayShow: A2 = 0, delayHide: O3 = 0, float: T2 = false, hidden: x2 = false, noArrow: N3 = false, clickable: $3 = false, closeOnEsc: I2 = false, closeOnScroll: j = false, closeOnResize: q3 = false, openEvents: H2, closeEvents: M2, globalCloseEvents: W, imperativeModeOnly: P2, style: V2, position: F2, afterShow: K2, afterHide: U2, disableTooltip: X2, content: Y, contentWrapperRef: G, isOpen: Z2, defaultIsOpen: J = false, setIsOpen: Q2, activeAnchor: ee, setActiveAnchor: te, border: oe, opacity: le, arrowColor: re, arrowSize: ne = 8, role: ie = "tooltip" }) => {
   var ce;
-  const se = (0, import_react16.useRef)(null), ae = (0, import_react16.useRef)(null), ue = (0, import_react16.useRef)(null), de = (0, import_react16.useRef)(null), pe = (0, import_react16.useRef)(null), [ve, me] = (0, import_react16.useState)({ tooltipStyles: {}, tooltipArrowStyles: {}, place: v }), [fe, ye] = (0, import_react16.useState)(false), [he, we] = (0, import_react16.useState)(false), [be, Se] = (0, import_react16.useState)(null), ge = (0, import_react16.useRef)(false), Ee = (0, import_react16.useRef)(null), { anchorRefs: Ae, setActiveAnchor: _e } = z(l2), Oe = (0, import_react16.useRef)(false), [ke, Te] = (0, import_react16.useState)([]), Le = (0, import_react16.useRef)(false), Ce = w3 || h2.includes("click"), Re = Ce || (null == H2 ? void 0 : H2.click) || (null == H2 ? void 0 : H2.dblclick) || (null == H2 ? void 0 : H2.mousedown), xe = H2 ? { ...H2 } : { mouseover: true, focus: true, mouseenter: false, click: false, dblclick: false, mousedown: false };
+  const se = (0, import_react14.useRef)(null), ae = (0, import_react14.useRef)(null), ue = (0, import_react14.useRef)(null), de = (0, import_react14.useRef)(null), pe = (0, import_react14.useRef)(null), [ve, me] = (0, import_react14.useState)({ tooltipStyles: {}, tooltipArrowStyles: {}, place: v }), [fe, ye] = (0, import_react14.useState)(false), [he, we] = (0, import_react14.useState)(false), [be, Se] = (0, import_react14.useState)(null), ge = (0, import_react14.useRef)(false), Ee = (0, import_react14.useRef)(null), { anchorRefs: Ae, setActiveAnchor: _e } = z(l2), Oe = (0, import_react14.useRef)(false), [ke, Te] = (0, import_react14.useState)([]), Le = (0, import_react14.useRef)(false), Ce = w3 || h2.includes("click"), Re = Ce || (null == H2 ? void 0 : H2.click) || (null == H2 ? void 0 : H2.dblclick) || (null == H2 ? void 0 : H2.mousedown), xe = H2 ? { ...H2 } : { mouseover: true, focus: true, mouseenter: false, click: false, dblclick: false, mousedown: false };
   !H2 && Ce && Object.assign(xe, { mouseenter: false, focus: false, mouseover: false, click: true });
   const Ne = M2 ? { ...M2 } : { mouseout: true, blur: true, mouseleave: false, click: false, dblclick: false, mouseup: false };
   !M2 && Ce && Object.assign(Ne, { mouseleave: false, blur: false, mouseout: false });
@@ -12014,7 +11733,7 @@ var q = ({ forwardRef: t3, id: l2, className: i3, classNameArrow: c2, variant: u
       Le.current && (null == Q2 || Q2(e3), void 0 === Z2 && ye(e3));
     }, 10));
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (void 0 === Z2) return () => null;
     Z2 && we(true);
     const e3 = setTimeout(() => {
@@ -12023,7 +11742,7 @@ var q = ({ forwardRef: t3, id: l2, className: i3, classNameArrow: c2, variant: u
     return () => {
       clearTimeout(e3);
     };
-  }, [Z2]), (0, import_react16.useEffect)(() => {
+  }, [Z2]), (0, import_react14.useEffect)(() => {
     if (fe !== ge.current) if (R(pe), ge.current = fe, fe) null == K2 || K2();
     else {
       const e3 = ((e4) => {
@@ -12076,14 +11795,14 @@ var q = ({ forwardRef: t3, id: l2, className: i3, classNameArrow: c2, variant: u
     Ve.cancel(), Pe(e3);
   }, Ke = () => {
     Pe.cancel(), Ve();
-  }, Ue = (0, import_react16.useCallback)(() => {
+  }, Ue = (0, import_react14.useCallback)(() => {
     var e3, t4;
     const o3 = null !== (e3 = null == be ? void 0 : be.position) && void 0 !== e3 ? e3 : F2;
     o3 ? He(o3) : T2 ? Ee.current && He(Ee.current) : (null == ee ? void 0 : ee.isConnected) && E({ place: null !== (t4 = null == be ? void 0 : be.place) && void 0 !== t4 ? t4 : v, offset: m, elementReference: ee, tooltipReference: se.current, tooltipArrowReference: ae.current, strategy: b2, middlewares: S2, border: oe, arrowSize: ne }).then((e4) => {
       Le.current && ze(e4);
     });
   }, [fe, ee, Y, V2, v, null == be ? void 0 : be.place, m, b2, F2, null == be ? void 0 : be.position, T2, ne]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     var e3, t4;
     const o3 = new Set(Ae);
     ke.forEach((e4) => {
@@ -12130,7 +11849,7 @@ var q = ({ forwardRef: t3, id: l2, className: i3, classNameArrow: c2, variant: u
         });
       });
     };
-  }, [ee, Ue, he, Ae, ke, H2, M2, W, Ce, A2, O3]), (0, import_react16.useEffect)(() => {
+  }, [ee, Ue, he, Ae, ke, H2, M2, W, Ce, A2, O3]), (0, import_react14.useEffect)(() => {
     var e3, t4;
     let o3 = null !== (t4 = null !== (e3 = null == be ? void 0 : be.anchorSelect) && void 0 !== e3 ? e3 : p) && void 0 !== t4 ? t4 : "";
     !o3 && l2 && (o3 = `[data-tooltip-id='${l2.replace(/'/g, "\\'")}']`);
@@ -12163,9 +11882,9 @@ var q = ({ forwardRef: t3, id: l2, className: i3, classNameArrow: c2, variant: u
     return r4.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-tooltip-id"], attributeOldValue: true }), () => {
       r4.disconnect();
     };
-  }, [l2, p, null == be ? void 0 : be.anchorSelect, ee]), (0, import_react16.useEffect)(() => {
+  }, [l2, p, null == be ? void 0 : be.anchorSelect, ee]), (0, import_react14.useEffect)(() => {
     Ue();
-  }, [Ue]), (0, import_react16.useEffect)(() => {
+  }, [Ue]), (0, import_react14.useEffect)(() => {
     if (!(null == G ? void 0 : G.current)) return () => null;
     const e3 = new ResizeObserver(() => {
       setTimeout(() => Ue());
@@ -12173,13 +11892,13 @@ var q = ({ forwardRef: t3, id: l2, className: i3, classNameArrow: c2, variant: u
     return e3.observe(G.current), () => {
       e3.disconnect();
     };
-  }, [Y, null == G ? void 0 : G.current]), (0, import_react16.useEffect)(() => {
+  }, [Y, null == G ? void 0 : G.current]), (0, import_react14.useEffect)(() => {
     var e3;
     const t4 = document.querySelector(`[id='${d}']`), o3 = [...ke, t4];
     ee && o3.includes(ee) || te(null !== (e3 = ke[0]) && void 0 !== e3 ? e3 : t4);
-  }, [d, ke, ee]), (0, import_react16.useEffect)(() => (J && Ie(true), () => {
+  }, [d, ke, ee]), (0, import_react14.useEffect)(() => (J && Ie(true), () => {
     R(ue), R(de);
-  }), []), (0, import_react16.useEffect)(() => {
+  }), []), (0, import_react14.useEffect)(() => {
     var e3;
     let t4 = null !== (e3 = null == be ? void 0 : be.anchorSelect) && void 0 !== e3 ? e3 : p;
     if (!t4 && l2 && (t4 = `[data-tooltip-id='${l2.replace(/'/g, "\\'")}']`), t4) try {
@@ -12188,11 +11907,11 @@ var q = ({ forwardRef: t3, id: l2, className: i3, classNameArrow: c2, variant: u
     } catch (e4) {
       Te([]);
     }
-  }, [l2, p, null == be ? void 0 : be.anchorSelect]), (0, import_react16.useEffect)(() => {
+  }, [l2, p, null == be ? void 0 : be.anchorSelect]), (0, import_react14.useEffect)(() => {
     ue.current && (R(ue), je(A2));
   }, [A2]);
   const Xe = null !== (ce = null == be ? void 0 : be.content) && void 0 !== ce ? ce : Y, Ye = fe && Object.keys(ve.tooltipStyles).length > 0;
-  return (0, import_react16.useImperativeHandle)(t3, () => ({ open: (e3) => {
+  return (0, import_react14.useImperativeHandle)(t3, () => ({ open: (e3) => {
     if (null == e3 ? void 0 : e3.anchorSelect) try {
       document.querySelector(e3.anchorSelect);
     } catch (t4) {
@@ -12201,13 +11920,13 @@ var q = ({ forwardRef: t3, id: l2, className: i3, classNameArrow: c2, variant: u
     Se(null != e3 ? e3 : null), (null == e3 ? void 0 : e3.delay) ? je(e3.delay) : Ie(true);
   }, close: (e3) => {
     (null == e3 ? void 0 : e3.delay) ? Be(e3.delay) : Ie(false);
-  }, activeAnchor: ee, place: ve.place, isOpen: Boolean(he && !x2 && Xe && Ye) })), he && !x2 && Xe ? import_react16.default.createElement(g, { id: l2, role: ie, className: (0, import_classnames.default)("react-tooltip", B.tooltip, D.tooltip, D[u], i3, `react-tooltip__place-${ve.place}`, B[Ye ? "show" : "closing"], Ye ? "react-tooltip__show" : "react-tooltip__closing", "fixed" === b2 && B.fixed, $3 && B.clickable), onTransitionEnd: (e3) => {
+  }, activeAnchor: ee, place: ve.place, isOpen: Boolean(he && !x2 && Xe && Ye) })), he && !x2 && Xe ? import_react14.default.createElement(g, { id: l2, role: ie, className: (0, import_classnames.default)("react-tooltip", B.tooltip, D.tooltip, D[u], i3, `react-tooltip__place-${ve.place}`, B[Ye ? "show" : "closing"], Ye ? "react-tooltip__show" : "react-tooltip__closing", "fixed" === b2 && B.fixed, $3 && B.clickable), onTransitionEnd: (e3) => {
     R(pe), fe || "opacity" !== e3.propertyName || (we(false), Se(null), null == U2 || U2());
-  }, style: { ...V2, ...ve.tooltipStyles, opacity: void 0 !== le && Ye ? le : void 0 }, ref: se }, Xe, import_react16.default.createElement(g, { className: (0, import_classnames.default)("react-tooltip-arrow", B.arrow, D.arrow, c2, N3 && B.noArrow), style: { ...ve.tooltipArrowStyles, background: re ? `linear-gradient(to right bottom, transparent 50%, ${re} 50%)` : void 0, "--rt-arrow-size": `${ne}px` }, ref: ae })) : null;
+  }, style: { ...V2, ...ve.tooltipStyles, opacity: void 0 !== le && Ye ? le : void 0 }, ref: se }, Xe, import_react14.default.createElement(g, { className: (0, import_classnames.default)("react-tooltip-arrow", B.arrow, D.arrow, c2, N3 && B.noArrow), style: { ...ve.tooltipArrowStyles, background: re ? `linear-gradient(to right bottom, transparent 50%, ${re} 50%)` : void 0, "--rt-arrow-size": `${ne}px` }, ref: ae })) : null;
 };
-var H = ({ content: t3 }) => import_react16.default.createElement("span", { dangerouslySetInnerHTML: { __html: t3 } });
-var M = import_react16.default.forwardRef(({ id: t3, anchorId: l2, anchorSelect: n4, content: i3, html: c2, render: a2, className: u, classNameArrow: d, variant: p = "dark", place: v = "top", offset: m = 10, wrapper: f = "div", children: h2 = null, events: w3 = ["hover"], openOnClick: b2 = false, positionStrategy: S2 = "absolute", middlewares: g, delayShow: E2 = 0, delayHide: _2 = 0, float: O3 = false, hidden: k2 = false, noArrow: T2 = false, clickable: L3 = false, closeOnEsc: C2 = false, closeOnScroll: R2 = false, closeOnResize: x2 = false, openEvents: N3, closeEvents: $3, globalCloseEvents: I2, imperativeModeOnly: j = false, style: B2, position: D2, isOpen: M2, defaultIsOpen: W = false, disableStyleInjection: P2 = false, border: V2, opacity: F2, arrowColor: K2, arrowSize: U2, setIsOpen: X2, afterShow: Y, afterHide: G, disableTooltip: Z2, role: J = "tooltip" }, Q2) => {
-  const [ee, te] = (0, import_react16.useState)(i3), [oe, le] = (0, import_react16.useState)(c2), [re, ne] = (0, import_react16.useState)(v), [ie, ce] = (0, import_react16.useState)(p), [se, ae] = (0, import_react16.useState)(m), [ue, de] = (0, import_react16.useState)(E2), [pe, ve] = (0, import_react16.useState)(_2), [me, fe] = (0, import_react16.useState)(O3), [ye, he] = (0, import_react16.useState)(k2), [we, be] = (0, import_react16.useState)(f), [Se, ge] = (0, import_react16.useState)(w3), [Ee, Ae] = (0, import_react16.useState)(S2), [_e, Oe] = (0, import_react16.useState)(null), [ke, Te] = (0, import_react16.useState)(null), Le = (0, import_react16.useRef)(P2), { anchorRefs: Ce, activeAnchor: Re } = z(t3), xe = (e3) => null == e3 ? void 0 : e3.getAttributeNames().reduce((t4, o3) => {
+var H = ({ content: t3 }) => import_react14.default.createElement("span", { dangerouslySetInnerHTML: { __html: t3 } });
+var M = import_react14.default.forwardRef(({ id: t3, anchorId: l2, anchorSelect: n4, content: i3, html: c2, render: a2, className: u, classNameArrow: d, variant: p = "dark", place: v = "top", offset: m = 10, wrapper: f = "div", children: h2 = null, events: w3 = ["hover"], openOnClick: b2 = false, positionStrategy: S2 = "absolute", middlewares: g, delayShow: E2 = 0, delayHide: _2 = 0, float: O3 = false, hidden: k2 = false, noArrow: T2 = false, clickable: L3 = false, closeOnEsc: C2 = false, closeOnScroll: R2 = false, closeOnResize: x2 = false, openEvents: N3, closeEvents: $3, globalCloseEvents: I2, imperativeModeOnly: j = false, style: B2, position: D2, isOpen: M2, defaultIsOpen: W = false, disableStyleInjection: P2 = false, border: V2, opacity: F2, arrowColor: K2, arrowSize: U2, setIsOpen: X2, afterShow: Y, afterHide: G, disableTooltip: Z2, role: J = "tooltip" }, Q2) => {
+  const [ee, te] = (0, import_react14.useState)(i3), [oe, le] = (0, import_react14.useState)(c2), [re, ne] = (0, import_react14.useState)(v), [ie, ce] = (0, import_react14.useState)(p), [se, ae] = (0, import_react14.useState)(m), [ue, de] = (0, import_react14.useState)(E2), [pe, ve] = (0, import_react14.useState)(_2), [me, fe] = (0, import_react14.useState)(O3), [ye, he] = (0, import_react14.useState)(k2), [we, be] = (0, import_react14.useState)(f), [Se, ge] = (0, import_react14.useState)(w3), [Ee, Ae] = (0, import_react14.useState)(S2), [_e, Oe] = (0, import_react14.useState)(null), [ke, Te] = (0, import_react14.useState)(null), Le = (0, import_react14.useRef)(P2), { anchorRefs: Ce, activeAnchor: Re } = z(t3), xe = (e3) => null == e3 ? void 0 : e3.getAttributeNames().reduce((t4, o3) => {
     var l3;
     if (o3.startsWith("data-tooltip-")) {
       t4[o3.replace(/^data-tooltip-/, "")] = null !== (l3 = null == e3 ? void 0 : e3.getAttribute(o3)) && void 0 !== l3 ? l3 : null;
@@ -12251,31 +11970,31 @@ var M = import_react16.default.forwardRef(({ id: t3, anchorId: l2, anchorSelect:
       null === (l3 = t4[e4]) || void 0 === l3 || l3.call(t4, o3);
     });
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     te(i3);
-  }, [i3]), (0, import_react16.useEffect)(() => {
+  }, [i3]), (0, import_react14.useEffect)(() => {
     le(c2);
-  }, [c2]), (0, import_react16.useEffect)(() => {
+  }, [c2]), (0, import_react14.useEffect)(() => {
     ne(v);
-  }, [v]), (0, import_react16.useEffect)(() => {
+  }, [v]), (0, import_react14.useEffect)(() => {
     ce(p);
-  }, [p]), (0, import_react16.useEffect)(() => {
+  }, [p]), (0, import_react14.useEffect)(() => {
     ae(m);
-  }, [m]), (0, import_react16.useEffect)(() => {
+  }, [m]), (0, import_react14.useEffect)(() => {
     de(E2);
-  }, [E2]), (0, import_react16.useEffect)(() => {
+  }, [E2]), (0, import_react14.useEffect)(() => {
     ve(_2);
-  }, [_2]), (0, import_react16.useEffect)(() => {
+  }, [_2]), (0, import_react14.useEffect)(() => {
     fe(O3);
-  }, [O3]), (0, import_react16.useEffect)(() => {
+  }, [O3]), (0, import_react14.useEffect)(() => {
     he(k2);
-  }, [k2]), (0, import_react16.useEffect)(() => {
+  }, [k2]), (0, import_react14.useEffect)(() => {
     Ae(S2);
-  }, [S2]), (0, import_react16.useEffect)(() => {
+  }, [S2]), (0, import_react14.useEffect)(() => {
     Le.current !== P2 && console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");
-  }, [P2]), (0, import_react16.useEffect)(() => {
+  }, [P2]), (0, import_react14.useEffect)(() => {
     "undefined" != typeof window && window.dispatchEvent(new CustomEvent("react-tooltip-inject-styles", { detail: { disableCore: "core" === P2, disableBase: P2 } }));
-  }, []), (0, import_react16.useEffect)(() => {
+  }, []), (0, import_react14.useEffect)(() => {
     var e3;
     const o3 = new Set(Ce);
     let r4 = n4;
@@ -12303,18 +12022,18 @@ var M = import_react16.default.forwardRef(({ id: t3, anchorId: l2, anchorSelect:
     return () => {
       s4.disconnect();
     };
-  }, [Ce, Re, ke, l2, n4]), (0, import_react16.useEffect)(() => {
+  }, [Ce, Re, ke, l2, n4]), (0, import_react14.useEffect)(() => {
     (null == B2 ? void 0 : B2.border) && console.warn("[react-tooltip] Do not set `style.border`. Use `border` prop instead."), V2 && !A("border", `${V2}`) && console.warn(`[react-tooltip] "${V2}" is not a valid \`border\`.`), (null == B2 ? void 0 : B2.opacity) && console.warn("[react-tooltip] Do not set `style.opacity`. Use `opacity` prop instead."), F2 && !A("opacity", `${F2}`) && console.warn(`[react-tooltip] "${F2}" is not a valid \`opacity\`.`);
   }, []);
   let $e = h2;
-  const Ie = (0, import_react16.useRef)(null);
+  const Ie = (0, import_react14.useRef)(null);
   if (a2) {
     const t4 = a2({ content: (null == ke ? void 0 : ke.getAttribute("data-tooltip-content")) || ee || null, activeAnchor: ke });
-    $e = t4 ? import_react16.default.createElement("div", { ref: Ie, className: "react-tooltip-content-wrapper" }, t4) : null;
+    $e = t4 ? import_react14.default.createElement("div", { ref: Ie, className: "react-tooltip-content-wrapper" }, t4) : null;
   } else ee && ($e = ee);
-  oe && ($e = import_react16.default.createElement(H, { content: oe }));
+  oe && ($e = import_react14.default.createElement(H, { content: oe }));
   const ze = { forwardRef: Q2, id: t3, anchorId: l2, anchorSelect: n4, className: (0, import_classnames.default)(u, _e), classNameArrow: d, content: $e, contentWrapperRef: Ie, place: re, variant: ie, offset: se, wrapper: we, events: Se, openOnClick: b2, positionStrategy: Ee, middlewares: g, delayShow: ue, delayHide: pe, float: me, hidden: ye, noArrow: T2, clickable: L3, closeOnEsc: C2, closeOnScroll: R2, closeOnResize: x2, openEvents: N3, closeEvents: $3, globalCloseEvents: I2, imperativeModeOnly: j, style: B2, position: D2, isOpen: M2, defaultIsOpen: W, border: V2, opacity: F2, arrowColor: K2, arrowSize: U2, setIsOpen: X2, afterShow: Y, afterHide: G, disableTooltip: Z2, activeAnchor: ke, setActiveAnchor: (e3) => Te(e3), role: J };
-  return import_react16.default.createElement(q, { ...ze });
+  return import_react14.default.createElement(q, { ...ze });
 });
 "undefined" != typeof window && window.addEventListener("react-tooltip-inject-styles", (e3) => {
   e3.detail.disableCore || S({ css: `:root{--rt-color-white:#fff;--rt-color-dark:#222;--rt-color-success:#8dc572;--rt-color-error:#be6464;--rt-color-warning:#f0ad4e;--rt-color-info:#337ab7;--rt-opacity:0.9;--rt-transition-show-delay:0.15s;--rt-transition-closing-delay:0.15s;--rt-arrow-size:8px}.core-styles-module_tooltip__3vRRp{position:absolute;top:0;left:0;pointer-events:none;opacity:0;will-change:opacity}.core-styles-module_fixed__pcSol{position:fixed}.core-styles-module_arrow__cvMwQ{position:absolute;background:inherit;z-index:-1}.core-styles-module_noArrow__xock6{display:none}.core-styles-module_clickable__ZuTTB{pointer-events:auto}.core-styles-module_show__Nt9eE{opacity:var(--rt-opacity);transition:opacity var(--rt-transition-show-delay)ease-out}.core-styles-module_closing__sGnxF{opacity:0;transition:opacity var(--rt-transition-closing-delay)ease-in}`, type: "core" }), e3.detail.disableBase || S({ css: `
@@ -12322,7 +12041,7 @@ var M = import_react16.default.forwardRef(({ id: t3, anchorId: l2, anchorSelect:
 });
 
 // src/widgets/advanced/table/table-head.tsx
-var import_react_dom2 = require("react-dom");
+var import_react_dom = require("react-dom");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var TableHead = (props) => {
   const {
@@ -12370,7 +12089,7 @@ var TableHead = (props) => {
               children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "cursor-pointer flex items-center gap-[4px] w-full group relative", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "truncate line-clamp-1 w-fit", children: col.title }),
                 col?.field?.help && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-                  (0, import_react_dom2.createPortal)(
+                  (0, import_react_dom.createPortal)(
                     /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                       M,
                       {
@@ -12798,7 +12517,7 @@ var EmptyTable = () => {
 };
 
 // node_modules/react-hook-form/dist/index.esm.mjs
-var import_react17 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 var isCheckBoxInput = (element) => element.type === "checkbox";
 var isDateObject = (value) => value instanceof Date;
 var isNullOrUndefined = (value) => value == null;
@@ -12886,9 +12605,9 @@ var INPUT_VALIDATION_RULES = {
   required: "required",
   validate: "validate"
 };
-var HookFormContext = import_react17.default.createContext(null);
+var HookFormContext = import_react15.default.createContext(null);
 HookFormContext.displayName = "HookFormContext";
-var useFormContext = () => import_react17.default.useContext(HookFormContext);
+var useFormContext = () => import_react15.default.useContext(HookFormContext);
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
   const result = {
     defaultValues: control._defaultValues
@@ -12907,12 +12626,12 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
   }
   return result;
 };
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react17.default.useLayoutEffect : import_react17.default.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react15.default.useLayoutEffect : import_react15.default.useEffect;
 function useFormState(props) {
   const methods = useFormContext();
   const { control = methods.control, disabled, name: name2, exact } = props || {};
-  const [formState, updateFormState] = import_react17.default.useState(control._formState);
-  const _localProxyFormState = import_react17.default.useRef({
+  const [formState, updateFormState] = import_react15.default.useState(control._formState);
+  const _localProxyFormState = import_react15.default.useRef({
     isDirty: false,
     isLoading: false,
     dirtyFields: false,
@@ -12933,10 +12652,10 @@ function useFormState(props) {
       });
     }
   }), [name2, disabled, exact]);
-  import_react17.default.useEffect(() => {
+  import_react15.default.useEffect(() => {
     _localProxyFormState.current.isValid && control._setValid(true);
   }, [control]);
-  return import_react17.default.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
+  return import_react15.default.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
 }
 var isString3 = (value) => typeof value === "string";
 var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
@@ -12985,12 +12704,12 @@ function deepEqual(object1, object2, _internal_visited = /* @__PURE__ */ new Wea
 function useWatch(props) {
   const methods = useFormContext();
   const { control = methods.control, name: name2, defaultValue, disabled, exact, compute } = props || {};
-  const _defaultValue = import_react17.default.useRef(defaultValue);
-  const _compute = import_react17.default.useRef(compute);
-  const _computeFormValues = import_react17.default.useRef(void 0);
+  const _defaultValue = import_react15.default.useRef(defaultValue);
+  const _compute = import_react15.default.useRef(compute);
+  const _computeFormValues = import_react15.default.useRef(void 0);
   _compute.current = compute;
-  const defaultValueMemo = import_react17.default.useMemo(() => control._getWatch(name2, _defaultValue.current), [control, name2]);
-  const [value, updateValue] = import_react17.default.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
+  const defaultValueMemo = import_react15.default.useMemo(() => control._getWatch(name2, _defaultValue.current), [control, name2]);
+  const [value, updateValue] = import_react15.default.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
   useIsomorphicLayoutEffect(() => control._subscribe({
     name: name2,
     formState: {
@@ -13012,14 +12731,14 @@ function useWatch(props) {
       }
     }
   }), [control, disabled, name2, exact]);
-  import_react17.default.useEffect(() => control._removeUnmounted());
+  import_react15.default.useEffect(() => control._removeUnmounted());
   return value;
 }
 function useController(props) {
   const methods = useFormContext();
   const { name: name2, disabled, control = methods.control, shouldUnregister, defaultValue } = props;
   const isArrayField = isNameInFieldArray(control._names.array, name2);
-  const defaultValueMemo = import_react17.default.useMemo(() => get2(control._formValues, name2, get2(control._defaultValues, name2, defaultValue)), [control, name2, defaultValue]);
+  const defaultValueMemo = import_react15.default.useMemo(() => get2(control._formValues, name2, get2(control._defaultValues, name2, defaultValue)), [control, name2, defaultValue]);
   const value = useWatch({
     control,
     name: name2,
@@ -13031,14 +12750,14 @@ function useController(props) {
     name: name2,
     exact: true
   });
-  const _props = import_react17.default.useRef(props);
-  const _registerProps = import_react17.default.useRef(control.register(name2, {
+  const _props = import_react15.default.useRef(props);
+  const _registerProps = import_react15.default.useRef(control.register(name2, {
     ...props.rules,
     value,
     ...isBoolean(props.disabled) ? { disabled: props.disabled } : {}
   }));
   _props.current = props;
-  const fieldState = import_react17.default.useMemo(() => Object.defineProperties({}, {
+  const fieldState = import_react15.default.useMemo(() => Object.defineProperties({}, {
     invalid: {
       enumerable: true,
       get: () => !!get2(formState.errors, name2)
@@ -13060,21 +12779,21 @@ function useController(props) {
       get: () => get2(formState.errors, name2)
     }
   }), [formState, name2]);
-  const onChange2 = import_react17.default.useCallback((event) => _registerProps.current.onChange({
+  const onChange2 = import_react15.default.useCallback((event) => _registerProps.current.onChange({
     target: {
       value: getEventValue(event),
       name: name2
     },
     type: EVENTS.CHANGE
   }), [name2]);
-  const onBlur = import_react17.default.useCallback(() => _registerProps.current.onBlur({
+  const onBlur = import_react15.default.useCallback(() => _registerProps.current.onBlur({
     target: {
       value: get2(control._formValues, name2),
       name: name2
     },
     type: EVENTS.BLUR
   }), [name2, control._formValues]);
-  const ref = import_react17.default.useCallback((elm) => {
+  const ref = import_react15.default.useCallback((elm) => {
     const field2 = get2(control._fields, name2);
     if (field2 && elm) {
       field2._f.ref = {
@@ -13085,7 +12804,7 @@ function useController(props) {
       };
     }
   }, [control._fields, name2]);
-  const field = import_react17.default.useMemo(() => ({
+  const field = import_react15.default.useMemo(() => ({
     name: name2,
     value,
     ...isBoolean(disabled) || formState.disabled ? { disabled: formState.disabled || disabled } : {},
@@ -13093,7 +12812,7 @@ function useController(props) {
     onBlur,
     ref
   }), [name2, disabled, formState.disabled, onChange2, onBlur, ref, value]);
-  import_react17.default.useEffect(() => {
+  import_react15.default.useEffect(() => {
     const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
     control.register(name2, {
       ..._props.current.rules,
@@ -13118,13 +12837,13 @@ function useController(props) {
       (isArrayField ? _shouldUnregisterField && !control._state.action : _shouldUnregisterField) ? control.unregister(name2) : updateMounted(name2, false);
     };
   }, [name2, control, isArrayField, shouldUnregister]);
-  import_react17.default.useEffect(() => {
+  import_react15.default.useEffect(() => {
     control._setDisabledField({
       disabled,
       name: name2
     });
   }, [disabled, name2, control]);
-  return import_react17.default.useMemo(() => ({
+  return import_react15.default.useMemo(() => ({
     field,
     formState,
     fieldState
@@ -14424,9 +14143,9 @@ function createFormControl(props = {}) {
   };
 }
 function useForm(props = {}) {
-  const _formControl = import_react17.default.useRef(void 0);
-  const _values = import_react17.default.useRef(void 0);
-  const [formState, updateFormState] = import_react17.default.useState({
+  const _formControl = import_react15.default.useRef(void 0);
+  const _values = import_react15.default.useRef(void 0);
+  const [formState, updateFormState] = import_react15.default.useState({
     isDirty: false,
     isValidating: false,
     isLoading: isFunction(props.defaultValues),
@@ -14475,8 +14194,8 @@ function useForm(props = {}) {
     control._formState.isReady = true;
     return sub;
   }, [control]);
-  import_react17.default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
-  import_react17.default.useEffect(() => {
+  import_react15.default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
+  import_react15.default.useEffect(() => {
     if (props.mode) {
       control._options.mode = props.mode;
     }
@@ -14484,18 +14203,18 @@ function useForm(props = {}) {
       control._options.reValidateMode = props.reValidateMode;
     }
   }, [control, props.mode, props.reValidateMode]);
-  import_react17.default.useEffect(() => {
+  import_react15.default.useEffect(() => {
     if (props.errors) {
       control._setErrors(props.errors);
       control._focusError();
     }
   }, [control, props.errors]);
-  import_react17.default.useEffect(() => {
+  import_react15.default.useEffect(() => {
     props.shouldUnregister && control._subjects.state.next({
       values: control._getWatch()
     });
   }, [control, props.shouldUnregister]);
-  import_react17.default.useEffect(() => {
+  import_react15.default.useEffect(() => {
     if (control._proxyFormState.isDirty) {
       const isDirty = control._getDirty();
       if (isDirty !== formState.isDirty) {
@@ -14505,7 +14224,7 @@ function useForm(props = {}) {
       }
     }
   }, [control, formState.isDirty]);
-  import_react17.default.useEffect(() => {
+  import_react15.default.useEffect(() => {
     if (props.values && !deepEqual(props.values, _values.current)) {
       control._reset(props.values, {
         keepFieldsRef: true,
@@ -14517,7 +14236,7 @@ function useForm(props = {}) {
       control._resetDefaultValues();
     }
   }, [control, props.values]);
-  import_react17.default.useEffect(() => {
+  import_react15.default.useEffect(() => {
     if (!control._state.mount) {
       control._setValid();
       control._state.mount = true;
@@ -14632,7 +14351,7 @@ var Button = React2.forwardRef(
 Button.displayName = "Button";
 
 // src/widgets/advanced/login/shared/text-input.tsx
-var import_react18 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 function TextInput(props) {
   const {
@@ -14646,7 +14365,7 @@ function TextInput(props) {
     errors,
     required
   } = props;
-  const [showPassword, setShowPassword] = (0, import_react18.useState)(false);
+  const [showPassword, setShowPassword] = (0, import_react16.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: `flex justify-center gap-2 flex-col ${className}`, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("label", { className: "text-[#262626] text-sm leading-5 font-semibold", children: [
       label,
@@ -14688,7 +14407,7 @@ function TextInput(props) {
 }
 
 // src/widgets/advanced/login/provider/credential/form-options/index.tsx
-var import_react19 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var STAY_LOGIN_IN = "stayLoginIn";
 function FormOptions({
@@ -14712,7 +14431,7 @@ function FormOptions({
       }
     }
   }
-  (0, import_react19.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     localStorage.setItem(STAY_LOGIN_IN, "false");
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex justify-between items-center text-[#005aa9] text-sm leading-5 font-medium select-none", children: [
@@ -15019,6 +14738,252 @@ var PopupFilter = ({
 // src/widgets/advanced/search/search-item/index.tsx
 var import_react21 = require("react");
 
+// src/hooks/use-click-outside.ts
+var import_react18 = require("react");
+var DEFAULT_EVENTS = ["mousedown", "touchstart"];
+var useClickOutside = ({
+  handler,
+  events = DEFAULT_EVENTS,
+  nodes = [],
+  // Default to empty array to avoid undefined errors
+  refs
+}) => {
+  const ref = (0, import_react18.useRef)(null);
+  (0, import_react18.useEffect)(() => {
+    const listener = (event) => {
+      const { target } = event;
+      if (refs && refs?.length > 0 && refs?.some((r4) => r4.current?.contains(target))) {
+        return;
+      }
+      if (!(target instanceof HTMLElement)) return;
+      const shouldIgnore = target.hasAttribute("data-ignore-outside-clicks") || !document.body.contains(target) && target.tagName !== "HTML";
+      const shouldTrigger = nodes.length > 0 ? nodes.every((node2) => node2 && !event.composedPath().includes(node2)) : ref.current && !ref.current.contains(target);
+      if (shouldTrigger && !shouldIgnore) {
+        handler(event);
+      }
+    };
+    events.forEach((event) => document.addEventListener(event, listener));
+    return () => {
+      events.forEach((event) => document.removeEventListener(event, listener));
+    };
+  }, [handler, nodes, events]);
+  return ref;
+};
+
+// src/hooks/use-get-file-infor.ts
+var import_react19 = require("react");
+function getFileName(source, mime) {
+  if (source instanceof File) return source.name;
+  if (typeof source === "string") {
+    if (source.startsWith("data:")) {
+      const ext2 = mime?.split("/")[1] || "bin";
+      return `file.${ext2}`;
+    }
+    try {
+      const pathname = new URL(source).pathname;
+      const filename = decodeURIComponent(pathname.split("/").pop() || "");
+      if (filename) return filename;
+    } catch {
+    }
+    return "file.bin";
+  }
+  const ext = mime?.split("/")[1] || "bin";
+  return `file.${ext}`;
+}
+function useFileInfo(source, options2) {
+  const { readAs = "all" } = options2 ?? {};
+  const [info, setInfo] = (0, import_react19.useState)(null);
+  const [loading, setLoading] = (0, import_react19.useState)(false);
+  const [error2, setError] = (0, import_react19.useState)(null);
+  const abortRef = (0, import_react19.useRef)({ aborted: false });
+  (0, import_react19.useEffect)(() => {
+    abortRef.current.aborted = false;
+    if (!source) {
+      setInfo(null);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    let localUrl = null;
+    let fr = null;
+    let mediaEl = null;
+    const makeExtension = (name2, type) => {
+      if (name2) {
+        const idx = name2.lastIndexOf(".");
+        if (idx > -1) return name2.slice(idx + 1).toLowerCase();
+      }
+      if (type) {
+        const match3 = /\/([a-z0-9.+-]+)$/.exec(type);
+        return match3 ? match3[1] : null;
+      }
+      return null;
+    };
+    const toBlobFromSource = async (src) => {
+      if (src instanceof Blob) return src;
+      if (typeof src === "string") {
+        const s4 = src.trim();
+        if (s4.startsWith("data:")) {
+          const parts = s4.split(",");
+          const meta = parts[0];
+          const isBase64 = meta.includes(";base64");
+          const mimeMatch = meta.match(/data:([^;]+)/);
+          const mime = mimeMatch ? mimeMatch[1] : "application/octet-stream";
+          const dataPart = parts.slice(1).join(",");
+          if (isBase64) {
+            const binary = atob(dataPart);
+            const len = binary.length;
+            const arr = new Uint8Array(len);
+            for (let i3 = 0; i3 < len; i3++) arr[i3] = binary.charCodeAt(i3);
+            return new Blob([arr], { type: mime });
+          } else {
+            const decoded = decodeURIComponent(dataPart);
+            return new Blob([decoded], { type: mime });
+          }
+        }
+        const resp = await fetch(s4);
+        if (!resp.ok) throw new Error(`Fetch failed with status ${resp.status}`);
+        const blob = await resp.blob();
+        return blob;
+      }
+      throw new Error("Unsupported source type");
+    };
+    const run = async () => {
+      setLoading(true);
+      setError(null);
+      setInfo(null);
+      try {
+        const blob = await toBlobFromSource(source);
+        if (abortRef.current.aborted) return;
+        const fileInfo = {
+          rawBlob: blob,
+          size: blob.size,
+          type: blob.type || "application/octet-stream",
+          dataUrl: null,
+          text: null,
+          arrayBuffer: null,
+          image: null,
+          video: null,
+          audio: null
+        };
+        if (source instanceof File || source instanceof Blob || typeof source === "string" && !source.startsWith("data:")) {
+          fileInfo.name = getFileName(source, fileInfo.type);
+        }
+        fileInfo.extension = makeExtension(fileInfo.name, fileInfo.type);
+        localUrl = URL.createObjectURL(blob);
+        const readPromises = [];
+        if (readAs === "dataUrl" || readAs === "all") {
+          fr = new FileReader();
+          const p = new Promise((resolve, reject) => {
+            fr.onload = () => {
+              if (abortRef.current.aborted) return resolve();
+              fileInfo.dataUrl = fr.result;
+              resolve();
+            };
+            fr.onerror = () => reject(fr.error);
+            fr.readAsDataURL(blob);
+          });
+          readPromises.push(p);
+        }
+        if (readAs === "text" || readAs === "all") {
+          const frText = new FileReader();
+          const p = new Promise((resolve, reject) => {
+            frText.onload = () => {
+              if (abortRef.current.aborted) return resolve();
+              fileInfo.text = frText.result;
+              resolve();
+            };
+            frText.onerror = () => reject(frText.error);
+            frText.readAsText(blob);
+          });
+          readPromises.push(p);
+        }
+        if (readAs === "arrayBuffer" || readAs === "all") {
+          const frBuf = new FileReader();
+          const p = new Promise((resolve, reject) => {
+            frBuf.onload = () => {
+              if (abortRef.current.aborted) return resolve();
+              fileInfo.arrayBuffer = frBuf.result;
+              resolve();
+            };
+            frBuf.onerror = () => reject(frBuf.error);
+            frBuf.readAsArrayBuffer(blob);
+          });
+          readPromises.push(p);
+        }
+        if (fileInfo?.type?.startsWith("image/")) {
+          const p = new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+              if (abortRef.current.aborted) return resolve();
+              fileInfo.image = {
+                width: img.naturalWidth,
+                height: img.naturalHeight
+              };
+              resolve();
+            };
+            img.onerror = () => resolve();
+            img.src = localUrl;
+          });
+          readPromises.push(p);
+        }
+        if (fileInfo && fileInfo?.type?.startsWith("video/") || fileInfo?.type?.startsWith("audio/")) {
+          const p = new Promise((resolve) => {
+            const el = document.createElement(
+              fileInfo?.type?.startsWith("video/") ? "video" : "audio"
+            );
+            mediaEl = el;
+            mediaEl.preload = "metadata";
+            mediaEl.onloadedmetadata = () => {
+              if (abortRef.current.aborted) return resolve();
+              const duration = isFinite(mediaEl.duration) ? mediaEl.duration : void 0;
+              if (fileInfo?.type?.startsWith("video/")) {
+                fileInfo.video = {
+                  width: mediaEl.videoWidth || void 0,
+                  height: mediaEl.videoHeight || void 0,
+                  duration
+                };
+              } else {
+                fileInfo.audio = { duration };
+              }
+              resolve();
+            };
+            mediaEl.onerror = () => resolve();
+            mediaEl.src = localUrl;
+          });
+          readPromises.push(p);
+        }
+        await Promise.all(readPromises);
+        if (abortRef.current.aborted) return;
+        setInfo(fileInfo);
+      } catch (err) {
+        if (!abortRef.current.aborted) setError(err?.message ?? String(err));
+      } finally {
+        if (!abortRef.current.aborted) setLoading(false);
+      }
+    };
+    run();
+    return () => {
+      abortRef.current.aborted = true;
+      if (fr && fr.readyState === 1) {
+        try {
+          fr.abort();
+        } catch {
+        }
+      }
+      if (mediaEl) {
+        try {
+          mediaEl.src = "";
+          mediaEl.load();
+        } catch {
+        }
+      }
+      if (localUrl) URL.revokeObjectURL(localUrl);
+    };
+  }, [source, readAs]);
+  return { info, loading, error: error2, reload: () => {
+  } };
+}
+
 // src/widgets/advanced/search/tag-search/index.tsx
 var import_react20 = require("react");
 var import_jsx_runtime63 = require("react/jsx-runtime");
@@ -15547,7 +15512,7 @@ var ModalConfirm = ({
 
 // src/widgets/common/modal-detail.tsx
 var import_react24 = require("react");
-var import_react_dom3 = require("react-dom");
+var import_react_dom2 = require("react-dom");
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var ModalDetail = ({
   idToolTip,
@@ -15570,7 +15535,7 @@ var ModalDetail = ({
     sessionStorage.setItem("actionData", JSON.stringify(actionData));
     window.location.href = `/form/menu?model=${model}&id=${idForm}`;
   };
-  return (0, import_react_dom3.createPortal)(
+  return (0, import_react_dom2.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_jsx_runtime69.Fragment, { children: showModalDetail && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "fixed bottom-0 left-0 right-0 top-0 z-[100]", children: [
       /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "absolute inset-0 bg-[rgba(27,27,27,0.48)]" }),
       /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "absolute inset-0 overflow-auto flex flex-col justify-center items-center px-5", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "relative z-[1] max-w-full p-4 flex flex-col gap-4 w-[1000px] transform rounded-3xl bg-[#FFF] h-[90%]", children: [
@@ -21465,7 +21430,7 @@ function useFloating2(options2) {
 }
 
 // node_modules/react-datepicker/dist/index.es.js
-var import_react_dom6 = __toESM(require("react-dom"));
+var import_react_dom5 = __toESM(require("react-dom"));
 var _extendStatics = function extendStatics(d, b2) {
   _extendStatics = Object.setPrototypeOf || {
     __proto__: []
@@ -24708,7 +24673,7 @@ var Portal = (
       }
     };
     Portal2.prototype.render = function() {
-      return import_react_dom6.default.createPortal(this.props.children, this.el);
+      return import_react_dom5.default.createPortal(this.props.children, this.el);
     };
     return Portal2;
   }(import_react45.Component)
@@ -27276,7 +27241,7 @@ function _taggedTemplateLiteral(e3, t3) {
 
 // node_modules/react-select/dist/index-641ee5b8.esm.js
 var import_react51 = require("react");
-var import_react_dom7 = require("react-dom");
+var import_react_dom6 = require("react-dom");
 
 // node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
 var import_react49 = require("react");
@@ -27779,7 +27744,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), innerProps), children);
   return jsx84(PortalPlacementContext.Provider, {
     value: portalPlacementContext
-  }, appendTo ? /* @__PURE__ */ (0, import_react_dom7.createPortal)(menuWrapper, appendTo) : menuWrapper);
+  }, appendTo ? /* @__PURE__ */ (0, import_react_dom6.createPortal)(menuWrapper, appendTo) : menuWrapper);
 };
 var containerCSS = function containerCSS2(_ref3) {
   var isDisabled = _ref3.isDisabled, isRtl = _ref3.isRtl;
@@ -30672,7 +30637,7 @@ var import_toConsumableArray2 = __toESM(require_toConsumableArray());
 var import_typeof5 = __toESM(require_typeof());
 var import_taggedTemplateLiteral2 = __toESM(require_taggedTemplateLiteral());
 var import_defineProperty3 = __toESM(require_defineProperty());
-var import_react_dom8 = require("react-dom");
+var import_react_dom7 = require("react-dom");
 var StateManagedSelect = /* @__PURE__ */ (0, import_react54.forwardRef)(function(props, ref) {
   var baseSelectProps = useStateManager(props);
   return /* @__PURE__ */ React14.createElement(Select, _extends({
@@ -32625,7 +32590,7 @@ var StatusDropdownField = (props) => {
 };
 
 // src/widgets/basic/many2many-field/many2many.tsx
-var import_react_dom9 = require("react-dom");
+var import_react_dom8 = require("react-dom");
 var import_react66 = require("react");
 var import_jsx_runtime107 = require("react/jsx-runtime");
 var Many2ManyField = (props) => {
@@ -32700,7 +32665,7 @@ var Many2ManyField = (props) => {
       typeof setGroupByList === "function" && setGroupByList(null);
     };
   }, [selectedTags]);
-  return (0, import_react_dom9.createPortal)(
+  return (0, import_react_dom8.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
       "div",
       {