@sustaina/shared-ui 1.2.0 → 1.4.0

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 }) {
@@ -1505,7 +1537,9 @@ function SortableRow({
                     children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Choose column..." })
                   }
                 ) }),
-                /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: options.filter((i2) => i2.id === field.value || !currentColumns?.some((c) => c.id === i2.id)).sort(
+                /* @__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,
@@ -1619,7 +1653,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 },
@@ -1631,7 +1665,7 @@ var GridSettingsModal = ({
     name: "columns",
     keyName: "fieldId"
   });
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (isOpen) {
       form.reset({ columns: currentColumns });
     }
@@ -1719,16 +1753,16 @@ var GridSettingsModal = ({
               {
                 items: fields?.slice(1).map((c) => c?.fieldId),
                 strategy: sortable.verticalListSortingStrategy,
-                children: fields?.slice(1).map((col, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                children: fields?.slice(1).map((col, index2) => /* @__PURE__ */ jsxRuntime.jsx(
                   SortableRow,
                   {
                     value: col?.fieldId,
                     control,
-                    name: `columns.${index + 1}.id`,
+                    name: `columns.${index2 + 1}.id`,
                     isDragging,
                     availableColumns,
                     currentColumns: fields,
-                    onRemove: () => remove(index + 1)
+                    onRemove: () => remove(index2 + 1)
                   },
                   col?.fieldId
                 ))
@@ -1797,7 +1831,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
@@ -1861,10 +1895,12 @@ var Navbar = ({
   subButtonDisable = false,
   onMainButtonClick,
   onSubButtonClick,
+  separatorDisable = false,
   searchButton
 }) => {
   const { isMobile, isTablet, isDesktop } = useScreenSize_default();
   const Icon3 = lucideReact.CircleHelp;
+  const shouldShowSeparator = !separatorDisable && React4.isValidElement(searchButton);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "nav",
     {
@@ -1875,8 +1911,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" }) }) }),
@@ -1904,10 +1940,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 : ""
                       ]
                     }
                   ),
@@ -1960,16 +1996,16 @@ var Navbar = ({
               children: subButtonText
             }
           ),
-          React3.isValidElement(searchButton) ? /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", className: "ml-1 w-[1px] h-10 bg-white" }) : "",
-          React3.isValidElement(searchButton) ? searchButton : ""
+          shouldShowSeparator && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", className: "ml-1 w-[1px] h-10 bg-white" }),
+          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",
     {
@@ -2050,30 +2086,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) => {
@@ -2085,10 +2121,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(
@@ -2100,7 +2136,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, fields, updateRows]
   );
-  const changeOperator = React3.useCallback(
+  const changeOperator = React4.useCallback(
     (id, operator) => {
       updateRows(
         rows.map((r2) => {
@@ -2114,7 +2150,7 @@ function useAdvanceSearch({ fields, limitRows }) {
     },
     [rows, updateRows]
   );
-  const changeValue = React3.useCallback(
+  const changeValue = React4.useCallback(
     (id, which, val) => {
       updateRows(
         rows.map((r2) => {
@@ -2126,7 +2162,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
@@ -2178,7 +2214,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]);
@@ -2502,13 +2538,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;
@@ -2517,7 +2553,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;
@@ -2526,7 +2562,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;
@@ -2605,7 +2641,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;
@@ -2613,8 +2649,8 @@ var TagsInput = ({ value = [], onChange, onClear, error }) => {
     onChange([...value, trimmed]);
     setInputValue("");
   };
-  const removeTag = (index) => {
-    const newTags = value.filter((_, i2) => i2 !== index);
+  const removeTag = (index2) => {
+    const newTags = value.filter((_, i2) => i2 !== index2);
     onChange(newTags);
   };
   const handleKeyDown = (e2) => {
@@ -2953,8 +2989,8 @@ function buildLocalizeFn(args) {
       const width = options?.width ? String(options.width) : args.defaultWidth;
       valuesArray = args.values[width] || args.values[defaultWidth];
     }
-    const index = args.argumentCallback ? args.argumentCallback(value) : value;
-    return valuesArray[index];
+    const index2 = args.argumentCallback ? args.argumentCallback(value) : value;
+    return valuesArray[index2];
   };
 }
 
@@ -3274,7 +3310,7 @@ var match = {
     defaultMatchWidth: "wide",
     parsePatterns: parseQuarterPatterns,
     defaultParseWidth: "any",
-    valueCallback: (index) => index + 1
+    valueCallback: (index2) => index2 + 1
   }),
   month: buildMatchFn({
     matchPatterns: matchMonthPatterns,
@@ -4409,15 +4445,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);
@@ -4434,9 +4470,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 }) {
@@ -4468,7 +4504,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]);
     }
@@ -4479,8 +4515,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 {
@@ -4716,9 +4752,10 @@ var AdvanceSearch = ({
   portalId,
   iconColor = "#ffffff",
   limitRows = 4,
-  onSearch
+  onSearch,
+  onClear
 }) => {
-  const fieldsData = React3.useMemo(() => fields || [], [fields]);
+  const fieldsData = React4.useMemo(() => fields || [], [fields]);
   const {
     rows,
     addRow,
@@ -4736,7 +4773,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) => {
@@ -4759,6 +4796,8 @@ var AdvanceSearch = ({
             return { [r2.fieldName]: { startsWith: val1 } };
           case "endsWith":
             return { [r2.fieldName]: { endsWith: val1 } };
+          case "equals":
+            return { [r2.fieldName]: { equals: val1 } };
           case "notEquals":
             return { [r2.fieldName]: { not: val1 } };
           case "gt":
@@ -4785,8 +4824,12 @@ var AdvanceSearch = ({
             return { [r2.fieldName]: { hasEvery: String(val1).split(",") } };
           case "containsOnly":
             return { [r2.fieldName]: { equals: String(val1).split(",") } };
-          default:
-            return { [r2.fieldName]: val1 };
+          case "on":
+            return { [r2.fieldName]: { on: val1 } };
+          case "after":
+            return { [r2.fieldName]: { after: val1 } };
+          case "before":
+            return { [r2.fieldName]: { before: val1 } };
         }
       }).filter(Boolean)
     };
@@ -4842,7 +4885,7 @@ var AdvanceSearch = ({
               onClick: () => {
                 clearAllRow();
                 Object.keys(getValues()).forEach((k) => resetField(k));
-                onSubmit();
+                if (onClear) onClear();
               },
               children: "Clear Search"
             }
@@ -5046,6 +5089,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;
@@ -5059,6 +5103,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