@sustaina/shared-ui 1.3.0 → 1.4.1

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React3 = require('react');
+var React4 = require('react');
 var reactHookForm = require('react-hook-form');
 var jsxRuntime = require('react/jsx-runtime');
 var clsx3 = require('clsx');
@@ -41,7 +41,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 var clsx3__default = /*#__PURE__*/_interopDefault(clsx3);
 var LabelPrimitive2__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive2);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
@@ -50,20 +50,20 @@ var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitiv
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 
 // src/components/form/form-controls/use-form-field.ts
-var FormFieldContext = React3.createContext({});
+var FormFieldContext = React4.createContext({});
 function FormField(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 }
-var FormItemContext = React3.createContext({});
+var FormItemContext = React4.createContext({});
 function FormItem({ children, ...props }) {
-  const formItemId = React3.useId();
+  const formItemId = React4.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext, { value: { id: formItemId }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, children }) });
 }
 
 // src/components/form/form-controls/use-form-field.ts
 function useFormField(options) {
-  const { name: formFieldName } = React3.useContext(FormFieldContext);
-  const { id: formItemId } = React3.useContext(FormItemContext);
+  const { name: formFieldName } = React4.useContext(FormFieldContext);
+  const { id: formItemId } = React4.useContext(FormItemContext);
   const formContext = reactHookForm.useFormContext();
   if ((!formFieldName || !formItemId || !formContext) && options?.skipValidationIfNoContext) {
     return {
@@ -245,11 +245,11 @@ function renderContentSlot(slot, defaultWrapperProps) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ...mergedProps, children: content });
 }
 var useHover = () => {
-  const [hovering, setHovering] = React3.useState(false);
-  const prevRef = React3.useRef(null);
-  const onMouseEnter = React3.useCallback(() => setHovering(true), []);
-  const onMouseLeave = React3.useCallback(() => setHovering(false), []);
-  const nodeRefCallback = React3.useCallback(
+  const [hovering, setHovering] = React4.useState(false);
+  const prevRef = React4.useRef(null);
+  const onMouseEnter = React4.useCallback(() => setHovering(true), []);
+  const onMouseLeave = React4.useCallback(() => setHovering(false), []);
+  const nodeRefCallback = React4.useCallback(
     (node) => {
       if (prevRef.current) {
         prevRef.current.removeEventListener("mouseenter", onMouseEnter);
@@ -277,15 +277,15 @@ var useIntersectionObserver = ({
   initialIsIntersecting = false,
   onChange
 } = {}) => {
-  const [ref, setRef] = React3.useState(null);
-  const [state, setState] = React3.useState(() => ({
+  const [ref, setRef] = React4.useState(null);
+  const [state, setState] = React4.useState(() => ({
     isIntersecting: initialIsIntersecting,
     entry: void 0
   }));
-  const callbackRef = React3.useRef(null);
+  const callbackRef = React4.useRef(null);
   callbackRef.current = onChange;
   const frozen = state.entry?.isIntersecting && freezeOnceVisible;
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!ref) return;
     if (!("IntersectionObserver" in window)) return;
     if (frozen) return;
@@ -315,8 +315,8 @@ var useIntersectionObserver = ({
     frozen,
     freezeOnceVisible
   ]);
-  const prevRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const prevRef = React4.useRef(null);
+  React4.useEffect(() => {
     if (!ref && state.entry?.target && !freezeOnceVisible && !frozen && prevRef.current !== state.entry.target) {
       prevRef.current = state.entry.target;
       setState({ isIntersecting: initialIsIntersecting, entry: void 0 });
@@ -333,8 +333,8 @@ var isValidMediaQueryString = (query) => {
   return query !== "not all";
 };
 var useMediaQuery = ({ query }) => {
-  const [matches, setMatches] = React3.useState(false);
-  React3.useEffect(() => {
+  const [matches, setMatches] = React4.useState(false);
+  React4.useEffect(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -582,9 +582,9 @@ var modelOptions = [
   "getCenterVisibleLeafColumns"
 ];
 var DataTableDevTool = ({ table }) => {
-  const [open, setOpen] = React3.useState(false);
-  const [visibleStates, setVisibleStates] = React3.useState([]);
-  const [visibleModels, setVisibleModels] = React3.useState([]);
+  const [open, setOpen] = React4.useState(false);
+  const [visibleStates, setVisibleStates] = React4.useState([]);
+  const [visibleModels, setVisibleModels] = React4.useState([]);
   const tableState = table.getState();
   const toggleValue = (arr, value) => arr.includes(value) ? arr.filter((v) => v !== value) : [...arr, value];
   const getCircularReplacer = () => {
@@ -826,14 +826,14 @@ var DataTable = ({
   if (isDefined(tableRef) && !isDefined(tableRef?.current)) {
     tableRef.current = table;
   }
-  const tableContainerRef = React3.useRef(null);
+  const tableContainerRef = React4.useRef(null);
   const isTableEmpty = table.getCoreRowModel().rows.length === 0;
   const isTableEmptyAfterFiltering = table.getRowModel().rows.length === 0;
   const isFiltering = table.getState().columnFilters.length > 0 || !!table.getState().globalFilter;
   const leftVisibleLeftColumns = table.getLeftVisibleLeafColumns();
   const centerVisibleLeafColumns = table.getCenterVisibleLeafColumns();
   const rightVisibleLeafColumns = table.getRightVisibleLeafColumns();
-  const { isSomeColumnsFilterable, filterableColumns } = React3.useMemo(() => {
+  const { isSomeColumnsFilterable, filterableColumns } = React4.useMemo(() => {
     const mergedColumns = [
       ...leftVisibleLeftColumns,
       ...centerVisibleLeafColumns,
@@ -844,7 +844,7 @@ var DataTable = ({
     );
     return { isSomeColumnsFilterable: isSomeColumnsFilterable2, filterableColumns: mergedColumns };
   }, [centerVisibleLeafColumns, leftVisibleLeftColumns, rightVisibleLeafColumns]);
-  const fetchMoreOnScrollReached = React3.useCallback(
+  const fetchMoreOnScrollReached = React4.useCallback(
     (containerRefElement) => {
       if (!scrollFetch?.enabled) {
         return;
@@ -860,7 +860,7 @@ var DataTable = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [scrollFetch?.enabled, scrollFetch?.isFetchingMore, scrollFetch?.hasMore, scrollFetch?.fetchMore]
   );
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     fetchMoreOnScrollReached(tableContainerRef.current);
   }, [fetchMoreOnScrollReached]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -945,7 +945,7 @@ var DataTable = ({
             ),
             /* @__PURE__ */ jsxRuntime.jsx(TableBody, { ...components?.tableBodyProps, children: table.getRowModel().rows.map((row) => {
               const tableDataRowProps = typeof components?.tableDataRowProps === "function" ? components.tableDataRowProps({ row, table }) || {} : components?.tableDataRowProps || {};
-              return /* @__PURE__ */ React3.createElement(
+              return /* @__PURE__ */ React4.createElement(
                 TableRow,
                 {
                   ...tableDataRowProps,
@@ -1009,6 +1009,38 @@ var DataTable = ({
   );
 };
 var DataTable_default = DataTable;
+var usePreventPageLeaveStore = zustand.create((set) => ({
+  isPreventing: false,
+  setPreventing: (value) => set({ isPreventing: value })
+}));
+var usePreventPageLeaveStore_default = usePreventPageLeaveStore;
+
+// src/components/prevent-page-leave/PreventPageLeave.tsx
+var PreventPageLeave = ({ children }) => {
+  const { isPreventing } = usePreventPageLeaveStore();
+  React4.useEffect(() => {
+    if (!isPreventing || typeof window === "undefined") {
+      return;
+    }
+    function beforeUnload(event) {
+      event.preventDefault();
+      event.returnValue = true;
+    }
+    window.addEventListener("beforeunload", beforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", beforeUnload);
+    };
+  }, [isPreventing]);
+  return children;
+};
+var PreventPageLeave_default = PreventPageLeave;
+var usePreventPageLeave = ({ isPrevening }) => {
+  const setPreventing = usePreventPageLeaveStore_default((state) => state.setPreventing);
+  React4.useEffect(() => {
+    setPreventing(isPrevening);
+  }, [isPrevening, setPreventing]);
+};
+var usePreventPageLeave_default = usePreventPageLeave;
 var buttonVariants = classVarianceAuthority.cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
   {
@@ -1132,15 +1164,15 @@ var t2 = function(o3, t3, s2) {
   };
 };
 var Form = reactHookForm.FormProvider;
-var FormFieldContext2 = React3__namespace.createContext({});
+var FormFieldContext2 = React4__namespace.createContext({});
 var FormField2 = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext2.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 };
 var useFormField2 = () => {
-  const fieldContext = React3__namespace.useContext(FormFieldContext2);
-  const itemContext = React3__namespace.useContext(FormItemContext2);
+  const fieldContext = React4__namespace.useContext(FormFieldContext2);
+  const itemContext = React4__namespace.useContext(FormItemContext2);
   const { getFieldState } = reactHookForm.useFormContext();
   const formState = reactHookForm.useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1157,9 +1189,9 @@ var useFormField2 = () => {
     ...fieldState
   };
 };
-var FormItemContext2 = React3__namespace.createContext({});
+var FormItemContext2 = React4__namespace.createContext({});
 function FormItem2({ className, ...props }) {
-  const id = React3__namespace.useId();
+  const id = React4__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext2.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
 }
 function FormControl({ ...props }) {
@@ -1450,7 +1482,6 @@ function TooltipContent({
 }
 function SortableRow({
   availableColumns,
-  currentColumns,
   control,
   name,
   value,
@@ -1466,88 +1497,86 @@ function SortableRow({
     transition
   };
   const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-  const options = availableColumns.map((col) => ({
-    id: col.id,
-    label: capitalize(col.id)
-  }));
+  const currentFormColumns = reactHookForm.useWatch({ control, name: "columns" });
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setNodeRef, style, className: "flex items-center rounded-md bg-white", children: /* @__PURE__ */ jsxRuntime.jsx(
     FormField2,
     {
       control,
       name,
-      render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem2, { className: "flex-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            lucideReact.GripVertical,
-            {
-              ...attributes,
-              ...listeners,
-              className: cn(
-                "h-5 w-5 text-[#B9B9B9] focus:outline-none cursor-grab",
-                name == "columns.0.id" && "opacity-0 pointer-events-none"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            Select,
-            {
-              value: field.value,
-              onValueChange: field.onChange,
-              disabled: name == "columns.0.id",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                  SelectTrigger,
-                  {
-                    className: cn(
-                      "w-full border-[#DDDDDD] data-[disabled]:opacity-100 aria-invalid:border-[#BB0B0E]",
-                      name == "columns.0.id" ? "text-[#8B8B8B] bg-[#EAEAEA] cursor-not-allowed" : ""
-                    ),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Choose column..." })
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.filter(
-                  (i2) => i2.id === field.value || !currentColumns?.some((c, idx) => c.id === i2.id && idx !== index)
-                ).sort(
-                  (a, b) => a.id === field.value ? -1 : b.id === field.value ? 1 : 0
-                ).map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
-                  SelectItem,
-                  {
-                    value: opt.id,
-                    className: cn(
-                      "focus:bg-[#e8edea]",
-                      opt.id === field.value ? "font-bold bg-[#dae5de] focus:bg-[#dae5de]" : ""
-                    ),
-                    children: opt.label
-                  },
-                  opt.id
-                )) })
-              ]
-            }
-          ),
-          name == "columns.0.id" ? /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "h-5 w-5", stroke: "white", fill: "#8B8B8B" }) }),
+      render: ({ field }) => {
+        const options = availableColumns.filter((col) => col.id === field.value || !currentFormColumns?.some((c) => c.id === col.id)).map((col) => ({ id: col.id, label: capitalize(col.id) }));
+        return /* @__PURE__ */ jsxRuntime.jsxs(FormItem2, { className: "flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              TooltipContent,
+              lucideReact.GripVertical,
               {
-                align: "start",
-                alignOffset: 10,
-                className: "bg-[#8B8B8B] rounded-none",
-                arrowClassName: "!hidden",
-                children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Column cannot be removed." })
+                ...attributes,
+                ...listeners,
+                className: cn(
+                  "h-5 w-5 text-[#B9B9B9] focus:outline-none cursor-grab",
+                  name == "columns.0.id" && "opacity-0 pointer-events-none"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Select,
+              {
+                value: field.value,
+                onValueChange: field.onChange,
+                disabled: name == "columns.0.id",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                    SelectTrigger,
+                    {
+                      className: cn(
+                        "w-full border-[#DDDDDD] data-[disabled]:opacity-100 aria-invalid:border-[#BB0B0E]",
+                        name == "columns.0.id" ? "text-[#8B8B8B] bg-[#EAEAEA] cursor-not-allowed" : ""
+                      ),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Choose column..." })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.sort(
+                    (a, b) => a.id === field.value ? -1 : b.id === field.value ? 1 : 0
+                  ).map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+                    SelectItem,
+                    {
+                      value: opt.id,
+                      className: cn(
+                        "focus:bg-[#e8edea]",
+                        opt.id === field.value ? "font-bold bg-[#dae5de] focus:bg-[#dae5de]" : ""
+                      ),
+                      children: opt.label
+                    },
+                    opt.id
+                  )) })
+                ]
+              }
+            ),
+            name == "columns.0.id" ? /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "h-5 w-5", stroke: "white", fill: "#8B8B8B" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                TooltipContent,
+                {
+                  align: "start",
+                  alignOffset: 10,
+                  className: "bg-[#8B8B8B] rounded-none",
+                  arrowClassName: "!hidden",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Column cannot be removed." })
+                }
+              )
+            ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.CircleMinus,
+              {
+                onClick: onRemove,
+                className: "h-5 w-5 cursor-pointer",
+                stroke: "white",
+                fill: "#C32A2C"
               }
             )
-          ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(
-            lucideReact.CircleMinus,
-            {
-              onClick: onRemove,
-              className: "h-5 w-5 cursor-pointer",
-              stroke: "white",
-              fill: "#C32A2C"
-            }
-          )
-        ] }),
-        !isDragging && /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: cn("pl-6 text-[#BB0B0E]") })
-      ] })
+          ] }),
+          !isDragging && /* @__PURE__ */ jsxRuntime.jsx(FormMessage, { className: cn("pl-6 text-[#BB0B0E]") })
+        ] });
+      }
     }
   ) });
 }
@@ -1621,7 +1650,7 @@ var GridSettingsModal = ({
   onClose,
   onSaveColumns
 }) => {
-  const [isDragging, setIsDragging] = React3.useState(false);
+  const [isDragging, setIsDragging] = React4.useState(false);
   const form = reactHookForm.useForm({
     resolver: t2(GridSettingsSchema),
     defaultValues: { columns: currentColumns },
@@ -1633,7 +1662,7 @@ var GridSettingsModal = ({
     name: "columns",
     keyName: "fieldId"
   });
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (isOpen) {
       form.reset({ columns: currentColumns });
     }
@@ -1701,8 +1730,7 @@ var GridSettingsModal = ({
             control,
             name: `columns.0.id`,
             isDragging,
-            availableColumns,
-            currentColumns: fields
+            availableColumns
           },
           fields[0]?.fieldId
         ),
@@ -1721,16 +1749,15 @@ var GridSettingsModal = ({
               {
                 items: fields?.slice(1).map((c) => c?.fieldId),
                 strategy: sortable.verticalListSortingStrategy,
-                children: fields?.slice(1).map((col, index2) => /* @__PURE__ */ jsxRuntime.jsx(
+                children: fields?.slice(1).map((col, index) => /* @__PURE__ */ jsxRuntime.jsx(
                   SortableRow,
                   {
                     value: col?.fieldId,
                     control,
-                    name: `columns.${index2 + 1}.id`,
+                    name: `columns.${index + 1}.id`,
                     isDragging,
                     availableColumns,
-                    currentColumns: fields,
-                    onRemove: () => remove(index2 + 1)
+                    onRemove: () => remove(index + 1)
                   },
                   col?.fieldId
                 ))
@@ -1799,7 +1826,7 @@ var InfoIcon = (props) => {
     }
   );
 };
-var InfoIcon_default = React3__namespace.default.memo(InfoIcon);
+var InfoIcon_default = React4__namespace.default.memo(InfoIcon);
 function TooltipProvider2({
   delayDuration = 0,
   ...props
@@ -1868,7 +1895,7 @@ var Navbar = ({
 }) => {
   const { isMobile, isTablet, isDesktop } = useScreenSize_default();
   const Icon3 = lucideReact.CircleHelp;
-  const shouldShowSeparator = !separatorDisable && React3.isValidElement(searchButton);
+  const shouldShowSeparator = !separatorDisable && React4.isValidElement(searchButton);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "nav",
     {
@@ -1879,8 +1906,8 @@ var Navbar = ({
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
           headImageURL !== "" ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: headImageURL, alt: "", className: cn("w-full h-full", headImageURLClassName) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-            React3.isValidElement(title) ? title : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-4xl font-bold", children: title }),
-            React3.isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-xl font-bold", children: subTitle })
+            React4.isValidElement(title) ? title : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-4xl font-bold", children: title }),
+            React4.isValidElement(subTitle) ? subTitle : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-white text-xl font-bold", children: subTitle })
           ] }),
           tooltipTitle && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip2, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "text-white hover:opacity-80 ", children: /* @__PURE__ */ jsxRuntime.jsx(InfoIcon_default, { className: "w-4" }) }) }),
@@ -1908,10 +1935,10 @@ var Navbar = ({
                       className: cn("flex flex-col gap-4 max-w-sm text-sm text-gray-700", className),
                       children: [
                         tooltipTitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                          React3.isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon3, { size: 32, "aria-hidden": "true" }),
+                          React4.isValidElement(tooltipIcon) ? tooltipIcon : /* @__PURE__ */ jsxRuntime.jsx(Icon3, { size: 32, "aria-hidden": "true" }),
                           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold", children: tooltipTitle })
                         ] }),
-                        React3.isValidElement(tooltipdescription) ? tooltipdescription : ""
+                        React4.isValidElement(tooltipdescription) ? tooltipdescription : ""
                       ]
                     }
                   ),
@@ -1965,15 +1992,15 @@ var Navbar = ({
             }
           ),
           shouldShowSeparator && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", className: "ml-1 w-[1px] h-10 bg-white" }),
-          React3.isValidElement(searchButton) ? searchButton : ""
+          React4.isValidElement(searchButton) ? searchButton : ""
         ] })
       ]
     }
   );
 };
-var navbar_default = React3__namespace.default.memo(Navbar);
+var navbar_default = React4__namespace.default.memo(Navbar);
 var ExpandCollapse = ({ title, children, portalId }) => {
-  const [isOpen, setIsOpen] = React3.useState(false);
+  const [isOpen, setIsOpen] = React4.useState(false);
   const Panel = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -2054,30 +2081,30 @@ function makeNewRow(fields) {
   return { id: crypto.randomUUID(), fieldName: first.name, operator: op, value: "" };
 }
 function useAdvanceSearch({ fields, limitRows }) {
-  const [rows, setRows] = React3.useState([makeNewRow(fields)]);
-  const updateRows = React3.useCallback((next) => {
+  const [rows, setRows] = React4.useState([makeNewRow(fields)]);
+  const updateRows = React4.useCallback((next) => {
     setRows(next);
   }, []);
-  const operatorsForField = React3.useCallback(
+  const operatorsForField = React4.useCallback(
     (fieldName) => {
       const t3 = getFieldType(fields, fieldName);
       return OPERATOR_MAP[t3];
     },
     [fields]
   );
-  const addRow = React3.useCallback(() => {
+  const addRow = React4.useCallback(() => {
     if (!limitRows || rows.length < limitRows) {
       updateRows([...rows, makeNewRow(fields)]);
     }
   }, [rows, fields, updateRows, limitRows]);
-  const removeRow = React3.useCallback(
+  const removeRow = React4.useCallback(
     (id) => {
       if (rows.length === 1) return;
       updateRows(rows.filter((r2) => r2.id !== id));
     },
     [rows, updateRows]
   );
-  const clearRow = React3.useCallback(
+  const clearRow = React4.useCallback(
     (id) => {
       updateRows(
         rows.map((r2) => {
@@ -2089,10 +2116,10 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, fields, updateRows]
   );
-  const clearAllRow = React3.useCallback(() => {
+  const clearAllRow = React4.useCallback(() => {
     updateRows([makeNewRow(fields)]);
   }, [fields, updateRows]);
-  const changeField = React3.useCallback(
+  const changeField = React4.useCallback(
     (id, fieldName) => {
       const nextOp = firstOperatorFor(fields, fieldName);
       updateRows(
@@ -2104,7 +2131,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, fields, updateRows]
   );
-  const changeOperator = React3.useCallback(
+  const changeOperator = React4.useCallback(
     (id, operator) => {
       updateRows(
         rows.map((r2) => {
@@ -2118,7 +2145,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, updateRows]
   );
-  const changeValue = React3.useCallback(
+  const changeValue = React4.useCallback(
     (id, which, val) => {
       updateRows(
         rows.map((r2) => {
@@ -2130,7 +2157,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, updateRows]
   );
-  const fieldOptions = React3.useMemo(
+  const fieldOptions = React4.useMemo(
     () => fields.map((f) => ({
       value: f.name,
       label: f.label ?? f.name
@@ -2182,7 +2209,7 @@ function useAdvanceSearch({ fields, limitRows }) {
         return { [row.fieldName]: row.value };
     }
   };
-  const buildParam = React3.useMemo(() => {
+  const buildParam = React4.useMemo(() => {
     const andConditions = rows.map((r2) => r2.value ? rowToFilter(r2) : null).filter(Boolean);
     return { AND: andConditions };
   }, [rows]);
@@ -2506,13 +2533,13 @@ function DatePicker({
   className,
   ...props
 }) {
-  const today = React3__namespace.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const [displayed, setDisplayed] = React3__namespace.useState(
+  const today = React4__namespace.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const [displayed, setDisplayed] = React4__namespace.useState(
     selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date()
   );
   minDate = clampToDay(minDate);
   maxDate = clampToDay(maxDate);
-  const disabledSet = React3__namespace.useMemo(() => {
+  const disabledSet = React4__namespace.useMemo(() => {
     const s2 = /* @__PURE__ */ new Set();
     disabledDates?.forEach((d) => s2.add(startOfDay(d).toISOString()));
     return s2;
@@ -2521,7 +2548,7 @@ function DatePicker({
   const displayMonth = displayed.getMonth();
   const monthLabel = callbacks?.monthLabel?.(displayYear, displayMonth) ?? new Intl.DateTimeFormat(void 0, { month: "short" }).format(displayed);
   const yearLabel = callbacks?.yearLabel?.(displayYear) ?? String(displayYear);
-  const weekdays = React3__namespace.useMemo(() => {
+  const weekdays = React4__namespace.useMemo(() => {
     const labels = [];
     for (let i2 = 0; i2 < 7; i2++) {
       const idx = i2;
@@ -2530,7 +2557,7 @@ function DatePicker({
     }
     return labels;
   }, [callbacks]);
-  const grid = React3__namespace.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
+  const grid = React4__namespace.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
   const isDateDisabled = (date) => {
     const d = startOfDay(date);
     if (minDate && d < minDate) return true;
@@ -2609,7 +2636,7 @@ function DatePicker({
   ] });
 }
 var TagsInput = ({ value = [], onChange, onClear, error }) => {
-  const [inputValue, setInputValue] = React3.useState("");
+  const [inputValue, setInputValue] = React4.useState("");
   const addTag = (val) => {
     const trimmed = val.trim();
     if (!trimmed) return;
@@ -2617,8 +2644,8 @@ var TagsInput = ({ value = [], onChange, onClear, error }) => {
     onChange([...value, trimmed]);
     setInputValue("");
   };
-  const removeTag = (index2) => {
-    const newTags = value.filter((_, i2) => i2 !== index2);
+  const removeTag = (index) => {
+    const newTags = value.filter((_, i2) => i2 !== index);
     onChange(newTags);
   };
   const handleKeyDown = (e2) => {
@@ -2957,8 +2984,8 @@ function buildLocalizeFn(args) {
       const width = options?.width ? String(options.width) : args.defaultWidth;
       valuesArray = args.values[width] || args.values[defaultWidth];
     }
-    const index2 = args.argumentCallback ? args.argumentCallback(value) : value;
-    return valuesArray[index2];
+    const index = args.argumentCallback ? args.argumentCallback(value) : value;
+    return valuesArray[index];
   };
 }
 
@@ -3278,7 +3305,7 @@ var match = {
     defaultMatchWidth: "wide",
     parsePatterns: parseQuarterPatterns,
     defaultParseWidth: "any",
-    valueCallback: (index2) => index2 + 1
+    valueCallback: (index) => index + 1
   }),
   month: buildMatchFn({
     matchPatterns: matchMonthPatterns,
@@ -4413,15 +4440,15 @@ function Label4({ className, ...props }) {
   );
 }
 var Form2 = reactHookForm.FormProvider;
-var FormFieldContext3 = React3__namespace.createContext({});
+var FormFieldContext3 = React4__namespace.createContext({});
 var FormField3 = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext3.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 };
 var useFormField3 = () => {
-  const fieldContext = React3__namespace.useContext(FormFieldContext3);
-  const itemContext = React3__namespace.useContext(FormItemContext3);
+  const fieldContext = React4__namespace.useContext(FormFieldContext3);
+  const itemContext = React4__namespace.useContext(FormItemContext3);
   const { getFieldState } = reactHookForm.useFormContext();
   const formState = reactHookForm.useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -4438,9 +4465,9 @@ var useFormField3 = () => {
     ...fieldState
   };
 };
-var FormItemContext3 = React3__namespace.createContext({});
+var FormItemContext3 = React4__namespace.createContext({});
 function FormItem3({ className, ...props }) {
-  const id = React3__namespace.useId();
+  const id = React4__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext3.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "form-item", className: cn2("grid gap-2", className), ...props }) });
 }
 function FormControl2({ ...props }) {
@@ -4472,7 +4499,7 @@ var AdvanceSearchRow = ({
   const { control } = form;
   const fieldSchema = fields.find((f) => f.name === row.fieldName);
   const fieldType = fieldSchema?.type ?? "text";
-  React3__namespace.default.useEffect(() => {
+  React4__namespace.default.useEffect(() => {
     if (operators && operators.length > 0 && !operators.includes(row.operator)) {
       onChangeOperator(operators[0]);
     }
@@ -4483,8 +4510,8 @@ var AdvanceSearchRow = ({
   const isLookup = fieldType === "lookup";
   const isNumber = fieldType === "number";
   const isDate2 = fieldType === "date" || fieldType === "datetime";
-  const [openDateValue1, setOpenDateValue1] = React3__namespace.default.useState(false);
-  const [openDateValue2, setOpenDateValue2] = React3__namespace.default.useState(false);
+  const [openDateValue1, setOpenDateValue1] = React4__namespace.default.useState(false);
+  const [openDateValue2, setOpenDateValue2] = React4__namespace.default.useState(false);
   const toDateFromISO = (v) => {
     if (!v) return void 0;
     try {
@@ -4723,7 +4750,7 @@ var AdvanceSearch = ({
   onSearch,
   onClear
 }) => {
-  const fieldsData = React3.useMemo(() => fields || [], [fields]);
+  const fieldsData = React4.useMemo(() => fields || [], [fields]);
   const {
     rows,
     addRow,
@@ -4741,7 +4768,7 @@ var AdvanceSearch = ({
     defaultValues: {}
   });
   const { handleSubmit, unregister, resetField, getValues, setValue } = form;
-  const onSubmit = React3.useCallback(() => {
+  const onSubmit = React4.useCallback(() => {
     const currentValues = getValues();
     const param = {
       AND: rows.map((r2) => {
@@ -5057,6 +5084,7 @@ exports.GridSettingsModal = GridSettingsModal_default;
 exports.HeaderCell = HeaderCell_default;
 exports.Navbar = navbar_default;
 exports.NumberInput = NumberInput;
+exports.PreventPageLeave = PreventPageLeave_default;
 exports.TextInput = TextInput;
 exports.booleanToSelectValue = booleanToSelectValue;
 exports.buttonVariants = buttonVariants;
@@ -5070,6 +5098,8 @@ exports.useGridSettingsStore = useGridSettingsStore;
 exports.useHover = useHover_default;
 exports.useIntersectionObserver = useIntersectionObserver_default;
 exports.useMediaQuery = useMediaQuery_default;
+exports.usePreventPageLeave = usePreventPageLeave_default;
+exports.usePreventPageLeaveStore = usePreventPageLeaveStore_default;
 exports.useScreenSize = useScreenSize_default;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map