@bluemarble/bm-components 1.4.2 → 1.6.0

package/dist/index.mjs

@@ -255,7 +255,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment2 = REACT_FRAGMENT_TYPE;
+        var Fragment3 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -314,7 +314,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment2;
+        exports.Fragment = Fragment3;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -2404,7 +2404,7 @@ function createBox(options = {}) {
   const BoxRoot = styled("div", {
     shouldForwardProp: (prop) => prop !== "theme" && prop !== "sx" && prop !== "as"
   })(styleFunctionSx_default);
-  const Box6 = /* @__PURE__ */ React3.forwardRef(function Box7(inProps, ref) {
+  const Box7 = /* @__PURE__ */ React3.forwardRef(function Box8(inProps, ref) {
     const theme = useTheme_default(defaultTheme);
     const _extendSxProp = extendSxProp(inProps), {
       className,
@@ -2417,7 +2417,7 @@ function createBox(options = {}) {
       theme: themeId ? theme[themeId] || theme : theme
     }, other));
   });
-  return Box6;
+  return Box7;
 }
 
 // node_modules/@mui/utils/generateUtilityClass/generateUtilityClass.js
@@ -3702,6 +3702,7 @@ var TabPanel = (props) => {
 // src/components/BaseGrid/index.tsx
 import React20 from "react";
 import {
+  Box as Box4,
   LinearProgress as LinearProgress2,
   Paper as Paper2,
   Table as Table2,
@@ -3817,7 +3818,6 @@ function BaseGrid({
   tableBodyProps,
   tableHeadProps,
   tableProps,
-  sortedDirection,
   sortedBy,
   onSortBy,
   dense = true,
@@ -3825,6 +3825,8 @@ function BaseGrid({
   bordered,
   currentPage,
   totalNumberOfPages,
+  tableSortLabelProps,
+  boxContainerProps,
   onPageChange,
   rowsPerPage,
   setRowsPerPage,
@@ -3832,6 +3834,7 @@ function BaseGrid({
   hideFooter,
   prependColumn,
   appendColumn,
+  loadingColSpan,
   isLoading
 }) {
   return /* @__PURE__ */ React20.createElement(
@@ -3840,34 +3843,52 @@ function BaseGrid({
       sx: __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, styles.rowGap(dense)), styles.bordered(bordered)), styles.striped(striped)), styles.lastRowBorder(hideFooter)), paperProps == null ? void 0 : paperProps.sx)
     }),
     /* @__PURE__ */ React20.createElement(
-      Table2,
-      __spreadProps(__spreadValues({
-        size: "small",
-        stickyHeader: true
-      }, tableProps), {
-        sx: __spreadValues({}, tableProps == null ? void 0 : tableProps.sx)
+      Box4,
+      __spreadProps(__spreadValues({}, boxContainerProps), {
+        sx: __spreadValues({ overflowX: "auto" }, boxContainerProps == null ? void 0 : boxContainerProps.sx)
       }),
-      /* @__PURE__ */ React20.createElement(TableHead2, __spreadValues({}, tableHeadProps), /* @__PURE__ */ React20.createElement(TableRow3, null, prependColumn, columns.map((column) => /* @__PURE__ */ React20.createElement(
-        TableCell4,
-        {
-          key: column.name,
-          padding: dense ? "none" : "normal",
-          sx: __spreadValues({
-            pl: 2
-          }, column == null ? void 0 : column.sx)
-        },
-        column.children ? column.children : /* @__PURE__ */ React20.createElement(
-          TableSortLabel2,
+      /* @__PURE__ */ React20.createElement(
+        Table2,
+        __spreadProps(__spreadValues({
+          size: "small",
+          stickyHeader: true
+        }, tableProps), {
+          sx: __spreadValues({}, tableProps == null ? void 0 : tableProps.sx)
+        }),
+        /* @__PURE__ */ React20.createElement(TableHead2, __spreadValues({}, tableHeadProps), /* @__PURE__ */ React20.createElement(TableRow3, null, prependColumn, columns.map((column) => {
+          var _a;
+          return /* @__PURE__ */ React20.createElement(
+            TableCell4,
+            {
+              key: column.name,
+              padding: dense ? "none" : "normal",
+              sx: __spreadValues({
+                pl: 2
+              }, column == null ? void 0 : column.sx)
+            },
+            column.children ? column.children : /* @__PURE__ */ React20.createElement(
+              TableSortLabel2,
+              __spreadProps(__spreadValues({
+                active: sortedBy.some((p) => p.prop === column.name),
+                direction: ((_a = sortedBy.find((p) => p.prop === column.name)) == null ? void 0 : _a.direction) || "desc",
+                onClick: () => onSortBy(column.name),
+                disabled: column.canSort === false
+              }, tableSortLabelProps), {
+                sx: __spreadValues({}, tableSortLabelProps == null ? void 0 : tableSortLabelProps.sx)
+              }),
+              column.label
+            )
+          );
+        }), appendColumn), isLoading && /* @__PURE__ */ React20.createElement(TableRow3, null, /* @__PURE__ */ React20.createElement(
+          TableCell4,
           {
-            active: sortedBy === column.name,
-            direction: sortedDirection,
-            onClick: () => onSortBy(column.name),
-            disabled: column.canSort === false
+            colSpan: loadingColSpan || columns.length,
+            sx: { p: 0, border: "none" }
           },
-          column.label
-        )
-      )), appendColumn), isLoading && /* @__PURE__ */ React20.createElement(TableRow3, null, /* @__PURE__ */ React20.createElement(TableCell4, { colSpan: columns.length, sx: { p: 0, border: "none" } }, /* @__PURE__ */ React20.createElement(LinearProgress2, null)))),
-      /* @__PURE__ */ React20.createElement(TableBody2, __spreadValues({}, tableBodyProps), children)
+          /* @__PURE__ */ React20.createElement(LinearProgress2, null)
+        ))),
+        /* @__PURE__ */ React20.createElement(TableBody2, __spreadValues({}, tableBodyProps), children)
+      )
     ),
     !hideFooter && /* @__PURE__ */ React20.createElement(
       GridPagination,
@@ -3884,16 +3905,28 @@ function BaseGrid({
   );
 }
 
-// src/components/Modal/index.tsx
+// src/components/BaseGrid/BaseGridAutoRows.tsx
 import React21 from "react";
+import { Fragment as Fragment2 } from "react";
+import { TableCell as TableCell5, TableRow as TableRow4 } from "@mui/material";
+function BaseGridAutoRows({
+  data,
+  columns,
+  rowKey
+}) {
+  return /* @__PURE__ */ React21.createElement(Fragment2, null, data.map((row) => /* @__PURE__ */ React21.createElement(TableRow4, { key: row[rowKey] }, columns.map((column) => /* @__PURE__ */ React21.createElement(TableCell5, { key: column.name }, row[column.name])))));
+}
+
+// src/components/Modal/index.tsx
+import React22 from "react";
 import {
-  Box as Box4,
+  Box as Box5,
   Modal as MuiModal
 } from "@mui/material";
 var Modal = (_a) => {
   var _b = _a, { open, onClose } = _b, rest = __objRest(_b, ["open", "onClose"]);
-  return /* @__PURE__ */ React21.createElement(MuiModal, __spreadValues({ open, onClose }, rest), /* @__PURE__ */ React21.createElement(
-    Box4,
+  return /* @__PURE__ */ React22.createElement(MuiModal, __spreadValues({ open, onClose }, rest), /* @__PURE__ */ React22.createElement(
+    Box5,
     {
       sx: {
         outline: "none",
@@ -3905,7 +3938,7 @@ var Modal = (_a) => {
         borderRadius: 1
       }
     },
-    /* @__PURE__ */ React21.createElement(React21.Fragment, null, rest.children)
+    /* @__PURE__ */ React22.createElement(React22.Fragment, null, rest.children)
   ));
 };
 
@@ -3918,9 +3951,9 @@ function GetInputLabel(columns) {
 }
 
 // src/components/Dialog/index.tsx
-import React22 from "react";
+import React23 from "react";
 import {
-  Box as Box5,
+  Box as Box6,
   Dialog as DefaultDialog,
   DialogContentText,
   DialogActions,
@@ -3942,8 +3975,8 @@ var Dialog = (_a) => {
     "body",
     "options"
   ]);
-  return /* @__PURE__ */ React22.createElement(DefaultDialog, __spreadValues({ open }, rest), /* @__PURE__ */ React22.createElement(Box5, { sx: { p: 2 } }, /* @__PURE__ */ React22.createElement(DialogTitle, { sx: { fontWeight: "bold" } }, title), /* @__PURE__ */ React22.createElement(DialogContentText, { sx: { px: "10px", textAlign: "center", mb: 2 } }, body), /* @__PURE__ */ React22.createElement(DialogActions, null, options.map((option, index) => {
-    return /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React23.createElement(DefaultDialog, __spreadValues({ open }, rest), /* @__PURE__ */ React23.createElement(Box6, { sx: { p: 2 } }, /* @__PURE__ */ React23.createElement(DialogTitle, { sx: { fontWeight: "bold" } }, title), /* @__PURE__ */ React23.createElement(DialogContentText, { sx: { px: "10px", textAlign: "center", mb: 2 } }, body), /* @__PURE__ */ React23.createElement(DialogActions, null, options.map((option, index) => {
+    return /* @__PURE__ */ React23.createElement(
       Button3,
       {
         key: index,
@@ -3956,7 +3989,7 @@ var Dialog = (_a) => {
         disableElevation: true,
         disabled: loading
       },
-      loading && option.focus ? /* @__PURE__ */ React22.createElement(CircularProgress3, { size: 25, color: "inherit" }) : /* @__PURE__ */ React22.createElement(React22.Fragment, null, option.label)
+      loading && option.focus ? /* @__PURE__ */ React23.createElement(CircularProgress3, { size: 25, color: "inherit" }) : /* @__PURE__ */ React23.createElement(React23.Fragment, null, option.label)
     );
   }))));
 };
@@ -4063,21 +4096,21 @@ var ApiHelper = class _ApiHelper {
 };
 
 // src/hooks/useFormHelper.ts
-import { useContext as useContext3, useEffect as useEffect4, useRef as useRef3 } from "react";
+import { useCallback as useCallback3, useContext as useContext3, useEffect as useEffect4, useRef as useRef3 } from "react";
 
 // src/hooks/useAlert.ts
 import { useContext as useContext2 } from "react";
 
 // src/contexts/AlertContext.tsx
-import React24 from "react";
+import React25, { useCallback } from "react";
 import { createContext, useState as useState3 } from "react";
 
 // src/components/Toast/index.tsx
-import React23 from "react";
+import React24 from "react";
 import { Alert, IconButton as IconButton4, Snackbar } from "@mui/material";
 import { MdClose as MdClose2 } from "react-icons/md";
 var Toast = ({ open, onClose, severity, message }) => {
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(
     Snackbar,
     {
       open,
@@ -4086,12 +4119,12 @@ var Toast = ({ open, onClose, severity, message }) => {
       anchorOrigin: { vertical: "top", horizontal: "right" },
       sx: { zIndex: 99999999 }
     },
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(
       Alert,
       {
         severity,
         elevation: 2,
-        action: /* @__PURE__ */ React23.createElement(
+        action: /* @__PURE__ */ React24.createElement(
           IconButton4,
           {
             "aria-label": "close",
@@ -4099,7 +4132,7 @@ var Toast = ({ open, onClose, severity, message }) => {
             size: "small",
             onClick: onClose
           },
-          /* @__PURE__ */ React23.createElement(MdClose2, { fontSize: "inherit" })
+          /* @__PURE__ */ React24.createElement(MdClose2, { fontSize: "inherit" })
         )
       },
       message
@@ -4113,15 +4146,18 @@ var AlertProvider = ({ children }) => {
   const [severity, setSeverity] = useState3("info");
   const [message, setMessage] = useState3("");
   const [isVisible, setIsVisible] = useState3(false);
-  const createAlert = (newMessage, severity2) => {
-    setMessage(newMessage);
-    setSeverity(severity2);
-    setIsVisible(true);
-  };
-  function onCloseToast() {
+  const createAlert = useCallback(
+    (newMessage, severity2) => {
+      setMessage(newMessage);
+      setSeverity(severity2);
+      setIsVisible(true);
+    },
+    []
+  );
+  const onCloseToast = useCallback(() => {
     setIsVisible(false);
-  }
-  return /* @__PURE__ */ React24.createElement(AlertContext.Provider, { value: { createAlert } }, children, /* @__PURE__ */ React24.createElement(
+  }, []);
+  return /* @__PURE__ */ React25.createElement(AlertContext.Provider, { value: { createAlert } }, children, /* @__PURE__ */ React25.createElement(
     Toast,
     {
       open: isVisible,
@@ -4138,25 +4174,25 @@ var useAlert = () => {
 };
 
 // src/hooks/useLoading.ts
-import { useState as useState4 } from "react";
+import { useCallback as useCallback2, useState as useState4 } from "react";
 function useLoading() {
   const [state, setState] = useState4([]);
-  const isLoading = (prop) => state.includes(prop);
-  const setLoading = (prop, remove) => {
+  const isLoading = useCallback2((prop) => state.includes(prop), [state]);
+  const setLoading = useCallback2((prop, remove) => {
     if (remove)
       setState((prevState) => prevState.filter((state2) => state2 !== prop));
     else
       setState((prevState) => [...prevState, prop]);
-  };
+  }, []);
   return { isLoading, setLoading };
 }
 
 // src/contexts/FormHelperProvider.tsx
-import React25 from "react";
+import React26 from "react";
 import { createContext as createContext2 } from "react";
 var FormHelperContext = createContext2({});
 var FormHelperProvider = ({ formatErrorMessage, api, children }) => {
-  return /* @__PURE__ */ React25.createElement(FormHelperContext.Provider, { value: { formatErrorMessage, api } }, children);
+  return /* @__PURE__ */ React26.createElement(FormHelperContext.Provider, { value: { formatErrorMessage, api } }, children);
 };
 
 // src/hooks/useFormHelper.ts
@@ -4167,59 +4203,68 @@ function useFormHelper() {
   const { createAlert } = alertProps;
   const { setLoading } = loadingProps;
   const sourceRef = useRef3(new AbortController());
-  function onSubmitWrapper(fn, { name }) {
-    return (fields, methods) => __async(this, null, function* () {
-      const LOADING_NAME = name;
-      setLoading(LOADING_NAME);
-      try {
-        yield fn(fields, methods);
-      } catch (error) {
-        errorHandler(error, methods.setErrors);
-      } finally {
-        setLoading(LOADING_NAME, true);
-      }
-    });
-  }
-  function onRequestWrapper(fn, { name }) {
-    return (...params) => __async(this, null, function* () {
-      const LOADING_NAME = name;
-      setLoading(LOADING_NAME);
-      api.interceptors.request.use(
-        (config) => {
-          if (!config.signal && sourceRef.current && config.method === "get") {
-            config.signal = sourceRef.current.signal;
+  const onSubmitWrapper = useCallback3(
+    (fn, { name }) => {
+      return (fields, methods) => __async(this, null, function* () {
+        const LOADING_NAME = name;
+        setLoading(LOADING_NAME);
+        try {
+          yield fn(fields, methods);
+        } catch (error) {
+          errorHandler(error, methods.setErrors);
+        } finally {
+          setLoading(LOADING_NAME, true);
+        }
+      });
+    },
+    [setLoading]
+  );
+  const onRequestWrapper = useCallback3(
+    (fn, { name }) => {
+      return (...params) => __async(this, null, function* () {
+        const LOADING_NAME = name;
+        setLoading(LOADING_NAME);
+        api.interceptors.request.use(
+          (config) => {
+            if (!config.signal && sourceRef.current && config.method === "get") {
+              config.signal = sourceRef.current.signal;
+            }
+            return config;
+          },
+          (error) => {
+            return Promise.reject(error);
           }
-          return config;
-        },
-        (error) => {
-          return Promise.reject(error);
+        );
+        try {
+          const response = yield fn(...params);
+          return response;
+        } catch (error) {
+          errorHandler(error);
+        } finally {
+          setLoading(LOADING_NAME, true);
+        }
+      });
+    },
+    [setLoading, api]
+  );
+  const errorHandler = useCallback3(
+    (error, callback) => {
+      if ((error == null ? void 0 : error.message) === "cancel.navigation")
+        return;
+      if (callback) {
+        if (error.response.data.code === "invalid.body") {
+          const errors = error.response.data.details.issues;
+          const currentErrors = errors.reduce((acc, item) => {
+            acc[item.path.join(".")] = item.message;
+            return acc;
+          }, {});
+          callback(currentErrors);
         }
-      );
-      try {
-        const response = yield fn(...params);
-        return response;
-      } catch (error) {
-        errorHandler(error);
-      } finally {
-        setLoading(LOADING_NAME, true);
-      }
-    });
-  }
-  function errorHandler(error, callback) {
-    if ((error == null ? void 0 : error.message) === "cancel.navigation")
-      return;
-    if (callback) {
-      if (error.response.data.code === "invalid.body") {
-        const errors = error.response.data.details.issues;
-        const currentErrors = errors.reduce((acc, item) => {
-          acc[item.path.join(".")] = item.message;
-          return acc;
-        }, {});
-        callback(currentErrors);
       }
-    }
-    createAlert(formatErrorMessage(error), "error");
-  }
+      createAlert(formatErrorMessage(error), "error");
+    },
+    [formatErrorMessage, createAlert]
+  );
   useEffect4(() => {
     return () => {
       sourceRef.current.abort();
@@ -4547,11 +4592,11 @@ var AuthHelper = class {
 };
 
 // src/hooks/useGrid.ts
-import { useMemo as useMemo3, useState as useState6 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo3, useState as useState6 } from "react";
 
 // src/hooks/useFilter.ts
 import moment2 from "moment";
-import { useState as useState5 } from "react";
+import { useCallback as useCallback4, useState as useState5 } from "react";
 
 // src/components/utils/getObjectValue.ts
 function getObjectValue(obj) {
@@ -4567,7 +4612,7 @@ function getObjectValue(obj) {
 // src/hooks/useFilter.ts
 function useFilter() {
   const [selectedFilters, setSelectedFilters] = useState5([]);
-  const filterBy = (newFilter) => {
+  const filterBy = useCallback4((newFilter) => {
     const propToCompare = (newFilter == null ? void 0 : newFilter.id) ? "id" : "prop";
     function removeRepeatedFilters(filter) {
       return filter[propToCompare] !== newFilter[propToCompare];
@@ -4576,13 +4621,16 @@ function useFilter() {
       ...filters.filter(removeRepeatedFilters),
       newFilter
     ]);
-  };
-  const removeFilter = (prop, isId) => {
-    const propToCompare = isId ? "id" : "prop";
-    setSelectedFilters(
-      selectedFilters.filter((filter) => filter[propToCompare] !== prop)
-    );
-  };
+  }, []);
+  const removeFilter = useCallback4(
+    (prop, isId) => {
+      const propToCompare = isId ? "id" : "prop";
+      setSelectedFilters(
+        selectedFilters.filter((filter) => filter[propToCompare] !== prop)
+      );
+    },
+    [selectedFilters]
+  );
   function clearAllFilters() {
     setSelectedFilters([]);
   }
@@ -4637,70 +4685,96 @@ function createFilter(filters) {
 }
 
 // src/hooks/useGrid.ts
+import sortBy from "sort-by";
 function useGrid({
   columns,
   filters = [],
   search,
-  rowsPerPageOptions = [30, 60, 100]
+  rowsPerPageOptions = [30, 60, 100],
+  defaultData: externalDefaultData,
+  defaultCurrentPage,
+  defaultSortedBy
 }) {
-  const [defaultData, setDefaultData] = useState6([]);
-  const [sortedBy, setSortedBy] = useState6("");
-  const [sortedDirection, setSortedDirection] = useState6("desc");
-  const [currentPage, setCurrentPage] = useState6(0);
+  const [defaultData, setDefaultData] = useState6(externalDefaultData || []);
+  const [sortedBy, setSortedBy] = useState6(
+    defaultSortedBy || []
+  );
+  const [currentPage, setCurrentPage] = useState6(defaultCurrentPage || 0);
   const [rowsPerPage, setRowsPerPage] = useState6(rowsPerPageOptions[0]);
-  const toggleSortedDirection = () => {
-    if (sortedDirection === "desc")
-      setSortedDirection("asc");
-    if (sortedDirection === "asc")
-      setSortedDirection("desc");
-  };
-  function setSort(prop, direction) {
-    setSortedBy(prop);
-    setSortedDirection(direction);
-  }
-  const onSortBy = (prop) => {
-    if (!prop)
-      return;
-    if (prop === sortedBy) {
-      if (sortedDirection === "asc") {
-        toggleSortedDirection();
-        setSortedBy("");
-      } else
-        toggleSortedDirection();
-    } else {
-      setSortedDirection("desc");
-      setSortedBy(prop);
-    }
-  };
-  const set = (data) => {
+  const toggleSortedDirection = useCallback5(
+    (direction) => {
+      if (direction === "asc")
+        return "desc";
+      return "asc";
+    },
+    []
+  );
+  const setSort = useCallback5((prop, direction) => {
+    setSortedBy((prev) => [...prev, { prop, direction }]);
+  }, []);
+  const onSortBy = useCallback5(
+    (prop) => {
+      if (!prop)
+        return;
+      const currentSorted = sortedBy.find((p) => p.prop === prop);
+      if (currentSorted) {
+        if (currentSorted.direction === "asc") {
+          setSortedBy((prev) => prev.filter((p) => p.prop !== prop));
+        } else {
+          setSortedBy((prev) => {
+            const newArr = prev.map((p) => {
+              if (p.prop !== prop)
+                return p;
+              return {
+                prop: p.prop,
+                direction: toggleSortedDirection(p.direction)
+              };
+            });
+            return [...newArr].slice(0);
+          });
+        }
+      } else {
+        setSortedBy((prev) => [...prev, { prop, direction: "desc" }]);
+      }
+    },
+    [toggleSortedDirection, sortedBy]
+  );
+  const set = useCallback5((data) => {
     setDefaultData(data);
-  };
-  function sortData(data) {
-    if (sortedBy) {
-      return data.sort((a, b) => {
-        const rowValue = (row) => getObjectValue(row)(sortedBy);
-        const compare = rowValue(b) > rowValue(a);
-        if (sortedDirection === "desc")
-          return compare ? 1 : -1;
-        return compare ? -1 : 1;
-      });
-    } else
-      return data;
-  }
-  const onPageChange = (pageNumber) => {
+  }, []);
+  const sortData = useCallback5(
+    (data) => {
+      if (sortedBy.length > 0) {
+        const symbolDir = {
+          asc: "",
+          desc: "-"
+        };
+        const formattedKeys = sortedBy.map(
+          ({ prop, direction }) => `${symbolDir[direction]}${prop}`
+        );
+        return data.sort(sortBy(...formattedKeys));
+      } else
+        return data;
+    },
+    [sortedBy]
+  );
+  const onPageChange = useCallback5((pageNumber) => {
     if (pageNumber < 0)
       return;
     if (pageNumber > totalNumberOfPages)
       return;
     setCurrentPage(pageNumber);
-  };
-  const onChangeRowsPerPage = (rows) => {
-    let totalNumberOfPages2 = Math.round(filteredData.length / rows) - 1;
-    totalNumberOfPages2 = totalNumberOfPages2 <= 0 ? 0 : 1;
-    if (currentPage > totalNumberOfPages2)
-      setCurrentPage(totalNumberOfPages2);
-    setRowsPerPage(rows);
-  };
+  }, []);
+  const onChangeRowsPerPage = useCallback5(
+    (rows) => {
+      let totalNumberOfPages2 = Math.round(filteredData.length / rows) - 1;
+      totalNumberOfPages2 = totalNumberOfPages2 <= 0 ? 0 : 1;
+      if (currentPage > totalNumberOfPages2)
+        setCurrentPage(totalNumberOfPages2);
+      setRowsPerPage(rows);
+    },
+    [currentPage]
+  );
   const filteredData = useMemo3(() => {
     let newData = defaultData.slice(0);
     if (search && search.value !== "") {
@@ -4715,7 +4789,7 @@ function useGrid({
     const startPage = currentPage * rowsPerPage;
     const endPage = startPage + rowsPerPage;
     return sortedData.slice(startPage, endPage);
-  }, [sortedBy, sortedDirection, filteredData, currentPage, rowsPerPage]);
+  }, [filteredData, currentPage, rowsPerPage, sortData]);
   const totalNumberOfPages = Math.ceil(filteredData.length / rowsPerPage) - 1;
   return {
     data: displayData,
@@ -4723,7 +4797,6 @@ function useGrid({
     onSortBy,
     sortedBy,
     defaultData,
-    sortedDirection,
     columns,
     currentPage,
     totalNumberOfPages: totalNumberOfPages < 0 ? 0 : totalNumberOfPages,
@@ -4769,10 +4842,184 @@ function createSearch(options) {
   };
 }
 
+// src/hooks/useAsyncGrid.ts
+import { useCallback as useCallback6, useEffect as useEffect5, useState as useState7 } from "react";
+function useAsyncGrid({
+  columns,
+  filters = [],
+  search,
+  rowsPerPageOptions = [30, 60, 100],
+  onRequest,
+  axiosInstance,
+  url,
+  defaultData: externalDefaultData,
+  defaultCurrentPage,
+  defaultSortedBy
+}) {
+  const [defaultData, setDefaultData] = useState7(externalDefaultData || []);
+  const [sortedBy, setSortedBy] = useState7(
+    defaultSortedBy || []
+  );
+  const [totalNumberOfItems, setTotalNumberOfItems] = useState7(0);
+  const [isLoading, setIsLoading] = useState7(false);
+  const [currentPage, setCurrentPage] = useState7(defaultCurrentPage || 0);
+  const [rowsPerPage, setRowsPerPage] = useState7(rowsPerPageOptions[0]);
+  const totalNumberOfPages = Math.ceil(totalNumberOfItems / rowsPerPage) - 1;
+  const toggleSortedDirection = useCallback6(
+    (direction) => {
+      if (direction === "asc")
+        return "desc";
+      return "asc";
+    },
+    []
+  );
+  const setSort = useCallback6((prop, direction) => {
+    setSortedBy((prev) => [...prev, { prop, direction }]);
+  }, []);
+  const onSortBy = useCallback6(
+    (prop) => __async(this, null, function* () {
+      if (!prop)
+        return;
+      let finalArr = [];
+      const currentSorted = sortedBy.find((p) => p.prop === prop);
+      if (currentSorted) {
+        if (currentSorted.direction === "asc") {
+          finalArr = sortedBy.filter((p) => p.prop !== prop);
+        } else {
+          finalArr = sortedBy.map((p) => {
+            if (p.prop !== prop)
+              return p;
+            return {
+              prop: p.prop,
+              direction: toggleSortedDirection(p.direction)
+            };
+          });
+        }
+      } else {
+        finalArr = [...sortedBy, { prop, direction: "desc" }];
+      }
+      yield updateGridContent({
+        page: currentPage,
+        sortedBy: finalArr,
+        rowsPerPage
+      });
+    }),
+    [sortedBy, toggleSortedDirection, rowsPerPage, currentPage]
+  );
+  const set = useCallback6((data) => {
+    setDefaultData(data);
+  }, []);
+  const baseRequest = useCallback6(
+    (_0) => __async(this, [_0], function* ({
+      page,
+      search: search2,
+      filters: filters2,
+      sortedBy: sortedBy2,
+      rowsPerPage: rowsPerPage2
+    }) {
+      if (!axiosInstance)
+        throw new Error("Axios instance not provided");
+      try {
+        const params = new URLSearchParams({
+          page: String(page),
+          rowsPerPage: String(rowsPerPage2),
+          searchText: (search2 == null ? void 0 : search2.value) || "",
+          sort: sortedBy2.map(({ prop, direction }) => `${prop}:${direction}`).join(","),
+          filters: filters2.map(
+            (filter) => `${filter.prop}:${filter.compareType}:${filter.value}`
+          ).join(",")
+        });
+        const pathWithParams = `${url}?${params.toString()}`;
+        const { data } = yield axiosInstance.get(pathWithParams);
+        setTotalNumberOfItems(data.totalNumberOfItems);
+        return data.rows;
+      } catch (_) {
+        return [];
+      }
+    }),
+    [axiosInstance, url]
+  );
+  const updateGridContent = useCallback6(
+    (_0) => __async(this, [_0], function* ({
+      page,
+      sortedBy: sortedBy2,
+      rowsPerPage: rowsPerPage2
+    }) {
+      setIsLoading(true);
+      try {
+        const props = {
+          page,
+          rowsPerPage: rowsPerPage2,
+          sortedBy: sortedBy2,
+          search,
+          filters
+        };
+        const result = !onRequest ? yield baseRequest(props) : yield onRequest(props);
+        setSortedBy(sortedBy2);
+        setRowsPerPage(rowsPerPage2);
+        set(result);
+        setCurrentPage(page);
+      } finally {
+        setIsLoading(false);
+      }
+    }),
+    [set, search, filters, onRequest, baseRequest]
+  );
+  const onPageChange = useCallback6(
+    (pageNumber) => {
+      if (pageNumber < 0)
+        return;
+      if (pageNumber > totalNumberOfPages)
+        return;
+      updateGridContent({ page: pageNumber, sortedBy, rowsPerPage });
+    },
+    [updateGridContent, totalNumberOfPages, sortedBy, rowsPerPage]
+  );
+  const onChangeRowsPerPage = useCallback6(
+    (rows) => {
+      let totalNumberOfPages2 = Math.round(totalNumberOfItems / rows) - 1;
+      totalNumberOfPages2 = totalNumberOfPages2 <= 0 ? 0 : 1;
+      if (currentPage > totalNumberOfPages2)
+        updateGridContent({
+          page: totalNumberOfPages2,
+          sortedBy,
+          rowsPerPage: rows
+        });
+      updateGridContent({
+        page: currentPage,
+        sortedBy,
+        rowsPerPage: rows
+      });
+    },
+    [updateGridContent, totalNumberOfItems, sortedBy, currentPage]
+  );
+  const displayData = defaultData;
+  useEffect5(() => {
+    updateGridContent({ page: 0, sortedBy: [], rowsPerPage });
+  }, [updateGridContent, rowsPerPage]);
+  return {
+    data: displayData,
+    set,
+    onSortBy,
+    sortedBy,
+    defaultData,
+    columns,
+    currentPage,
+    totalNumberOfPages: totalNumberOfPages < 0 ? 0 : totalNumberOfPages,
+    onPageChange,
+    setRowsPerPage: onChangeRowsPerPage,
+    rowsPerPageOptions,
+    rowsPerPage,
+    setSort,
+    isLoading,
+    setIsLoading
+  };
+}
+
 // src/hooks/useEvent.ts
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 function useEvent(event, handler, passive = false) {
-  useEffect5(() => {
+  useEffect6(() => {
     window.addEventListener(event, handler, passive);
     return function cleanup() {
       window.removeEventListener(event, handler);
@@ -4781,11 +5028,11 @@ function useEvent(event, handler, passive = false) {
 }
 
 // src/contexts/AuthContext.tsx
-import React27 from "react";
+import React27, { useCallback as useCallback7 } from "react";
 import {
   createContext as createContext3,
-  useEffect as useEffect6,
-  useState as useState7
+  useEffect as useEffect7,
+  useState as useState8
 } from "react";
 import { parseCookies as parseCookies2 } from "nookies";
 function createAuthContext() {
@@ -4797,35 +5044,36 @@ function CreateAuthProvider({
   sessionTokenName,
   Provider
 }) {
-  const [user, setUser] = useState7();
-  const [status, setStatus] = useState7("unauthenticated");
+  const [user, setUser] = useState8();
+  const [status, setStatus] = useState8("unauthenticated");
   const { createAlert } = useAlert();
-  const signIn = (_0) => __async(this, [_0], function* ({ email, password }) {
-    setStatus("loading");
-    try {
-      const response = yield api.post("/auth/login", {
-        email,
-        password
-      });
-      const { token } = response.data;
-      api.defaults.headers.common.Authorization = `Bearer ${token}`;
-      const { data } = yield api.get("/auth/me");
-      setUser(data);
-      setStatus("autenticated");
-      return true;
-    } catch (error) {
-      createAlert(error.response.data.error, "error");
-      setStatus("unauthenticated");
-      throw error;
-    }
-  });
-  function ClientSignOut() {
-    return __async(this, null, function* () {
-      yield api.get("/auth/logout");
-      setUser(void 0);
-    });
-  }
-  useEffect6(() => {
+  const signIn = useCallback7(
+    (_0) => __async(this, [_0], function* ({ email, password }) {
+      setStatus("loading");
+      try {
+        const response = yield api.post("/auth/login", {
+          email,
+          password
+        });
+        const { token } = response.data;
+        api.defaults.headers.common.Authorization = `Bearer ${token}`;
+        const { data } = yield api.get("/auth/me");
+        setUser(data);
+        setStatus("autenticated");
+        return true;
+      } catch (error) {
+        createAlert(error.response.data.error, "error");
+        setStatus("unauthenticated");
+        throw error;
+      }
+    }),
+    [createAlert, api]
+  );
+  const ClientSignOut = useCallback7(() => __async(this, null, function* () {
+    yield api.get("/auth/logout");
+    setUser(void 0);
+  }), [api]);
+  useEffect7(() => {
     const token = parseCookies2()[sessionTokenName];
     if (token) {
       setStatus("loading");
@@ -4857,6 +5105,7 @@ export {
   AuthHelper,
   Autocomplete2 as Autocomplete,
   BaseGrid,
+  BaseGridAutoRows,
   Checkbox,
   CreateAuthProvider,
   Dialog,
@@ -4881,6 +5130,7 @@ export {
   filterData,
   getTabProps,
   useAlert,
+  useAsyncGrid,
   useEvent,
   useFilter,
   useFormHelper,