@bluemarble/bm-components 1.17.0 → 1.18.0

package/dist/index.mjs

@@ -2404,7 +2404,7 @@ function createBox(options = {}) {
   const BoxRoot = styled("div", {
     shouldForwardProp: (prop) => prop !== "theme" && prop !== "sx" && prop !== "as"
   })(styleFunctionSx_default);
-  const Box8 = /* @__PURE__ */ React3.forwardRef(function Box9(inProps, ref) {
+  const Box9 = /* @__PURE__ */ React3.forwardRef(function Box10(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 Box8;
+  return Box9;
 }
 
 // node_modules/@mui/utils/generateUtilityClass/generateUtilityClass.js
@@ -4157,6 +4157,176 @@ var DialogConfirm = (props) => {
   ))))));
 };
 
+// src/components/BaseDialog/BaseDialog.tsx
+import React28 from "react";
+
+// src/components/BaseDialog/BaseDialogHook.ts
+import { useContext as useContext2 } from "react";
+
+// src/components/BaseDialog/BaseDialogContext.tsx
+import React25 from "react";
+import { createContext, useCallback, useState as useState5 } from "react";
+var BaseDialogContext = createContext({});
+var BaseDialogProvider = (props) => {
+  const [openedDialogs, setOpenedDialogs] = useState5([]);
+  const isOpened = useCallback(
+    (dialog) => {
+      return openedDialogs.includes(dialog);
+    },
+    [openedDialogs]
+  );
+  const toggleDialog = useCallback(
+    (dialog) => {
+      return openedDialogs.includes(dialog);
+    },
+    [openedDialogs]
+  );
+  const openDialog = useCallback((dialog) => {
+    return setOpenedDialogs((prev) => {
+      const filteredArr = prev.filter((item) => item !== dialog);
+      return [...filteredArr, dialog];
+    });
+  }, []);
+  const closeDialog = useCallback((dialog) => {
+    return setOpenedDialogs((prev) => prev.filter((item) => item !== dialog));
+  }, []);
+  const closeAllDialogs = useCallback(() => {
+    return setOpenedDialogs([]);
+  }, [openedDialogs]);
+  return /* @__PURE__ */ React25.createElement(
+    BaseDialogContext.Provider,
+    {
+      value: {
+        opened: openedDialogs,
+        isOpened,
+        toggle: toggleDialog,
+        open: openDialog,
+        closeAll: closeAllDialogs,
+        close: closeDialog
+      }
+    },
+    props.children
+  );
+};
+
+// src/components/BaseDialog/BaseDialogInstanceContext.tsx
+import React26 from "react";
+import { createContext as createContext2 } from "react";
+var BaseDialogInstanceContext = createContext2(
+  {}
+);
+var BaseDialogInstanceProvider = (props) => {
+  const actions = useBaseDialog();
+  return /* @__PURE__ */ React26.createElement(BaseDialogInstanceContext.Provider, { value: { name: props.name, actions } }, props.children);
+};
+
+// src/components/BaseDialog/BaseDialogHook.ts
+function useBaseDialog() {
+  return useContext2(BaseDialogContext);
+}
+function useBaseDialogInstance() {
+  return useContext2(BaseDialogInstanceContext);
+}
+
+// src/components/BaseDialog/BaseDialog.tsx
+import { Box as Box8, Button as Button4 } from "@mui/material";
+
+// src/components/BaseDialog/BaseDialogHeader.tsx
+import React27 from "react";
+import {
+  IconButton as IconButton4,
+  Stack as Stack3,
+  Typography as Typography4
+} from "@mui/material";
+import { MdClose as MdClose2 } from "react-icons/md";
+var BaseDialogHeader = (_a) => {
+  var _b = _a, {
+    title,
+    onClose,
+    IconButtonProps,
+    TypographyProps: TypographyProps2
+  } = _b, props = __objRest(_b, [
+    "title",
+    "onClose",
+    "IconButtonProps",
+    "TypographyProps"
+  ]);
+  const { name } = useBaseDialogInstance();
+  const { close: closeDialog } = useBaseDialog();
+  function handleClose() {
+    if (onClose)
+      return onClose();
+    closeDialog(name);
+  }
+  return /* @__PURE__ */ React27.createElement(
+    Stack3,
+    __spreadValues({
+      direction: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      px: 2,
+      my: 1
+    }, props),
+    /* @__PURE__ */ React27.createElement(Typography4, __spreadValues({ variant: "h6", fontWeight: "bold" }, TypographyProps2), title),
+    /* @__PURE__ */ React27.createElement(IconButton4, __spreadProps(__spreadValues({}, IconButtonProps), { onClick: handleClose }), /* @__PURE__ */ React27.createElement(MdClose2, null))
+  );
+};
+
+// src/components/BaseDialog/BaseDialog.tsx
+var BaseDialogContainer = (_a) => {
+  var _b = _a, {
+    children
+  } = _b, rest = __objRest(_b, [
+    "children"
+  ]);
+  const { name } = useBaseDialogInstance();
+  const { isOpened, close: closeDialog } = useBaseDialog();
+  return /* @__PURE__ */ React28.createElement(Modal, __spreadValues({ open: isOpened(name), onClose: () => closeDialog(name) }, rest), children instanceof Function ? children({ close: () => closeDialog(name) }) : children);
+};
+var BaseDialogBody = (props) => {
+  return /* @__PURE__ */ React28.createElement(Box8, __spreadValues({ px: 2, pb: 2, width: "100vw", maxWidth: 650 }, props), props.children);
+};
+var BaseDialogTrigger = (_a) => {
+  var _b = _a, {
+    name,
+    onClick
+  } = _b, props = __objRest(_b, [
+    "name",
+    "onClick"
+  ]);
+  const { open } = useBaseDialog();
+  return /* @__PURE__ */ React28.createElement(
+    Button4,
+    __spreadProps(__spreadValues({}, props), {
+      onClick: (...params) => {
+        if (onClick)
+          onClick(...params);
+        open(name);
+      }
+    }),
+    props.children
+  );
+};
+var BaseDialogCreate = (name = Symbol()) => {
+  return {
+    name,
+    Trigger: (props) => /* @__PURE__ */ React28.createElement(BaseDialogTrigger, __spreadValues({ name }, props)),
+    Root: (props) => /* @__PURE__ */ React28.createElement(BaseDialogInstanceProvider, __spreadValues({ name }, props)),
+    Container: BaseDialogContainer,
+    Header: BaseDialogHeader,
+    Body: BaseDialogBody
+  };
+};
+var BaseDialog = {
+  Create: BaseDialogCreate,
+  Trigger: BaseDialogTrigger,
+  Provider: BaseDialogProvider,
+  Root: BaseDialogInstanceProvider,
+  Container: BaseDialogContainer,
+  Header: BaseDialogHeader,
+  Body: BaseDialogBody
+};
+
 // src/errors/HttpError.ts
 var HttpError = class extends Error {
   constructor(status, message) {
@@ -4270,21 +4440,21 @@ var ApiHelper = class _ApiHelper {
 };
 
 // src/hooks/useFormHelper.ts
-import { useCallback as useCallback3, useContext as useContext3, useEffect as useEffect4, useRef as useRef4 } from "react";
+import { useCallback as useCallback4, useContext as useContext4, useEffect as useEffect4, useRef as useRef4 } from "react";
 
 // src/hooks/useAlert.ts
-import { useContext as useContext2 } from "react";
+import { useContext as useContext3 } from "react";
 
 // src/contexts/AlertContext.tsx
-import React26, { useCallback } from "react";
-import { createContext, useState as useState5 } from "react";
+import React30, { useCallback as useCallback2 } from "react";
+import { createContext as createContext3, useState as useState6 } from "react";
 
 // src/components/Toast/index.tsx
-import React25 from "react";
-import { Alert, IconButton as IconButton4, Snackbar } from "@mui/material";
-import { MdClose as MdClose2 } from "react-icons/md";
+import React29 from "react";
+import { Alert, IconButton as IconButton5, Snackbar } from "@mui/material";
+import { MdClose as MdClose3 } from "react-icons/md";
 var Toast = ({ open, onClose, severity, message }) => {
-  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement(
     Snackbar,
     {
       open,
@@ -4293,20 +4463,20 @@ var Toast = ({ open, onClose, severity, message }) => {
       anchorOrigin: { vertical: "top", horizontal: "right" },
       sx: { zIndex: 99999999 }
     },
-    /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React29.createElement(
       Alert,
       {
         severity,
         elevation: 2,
-        action: /* @__PURE__ */ React25.createElement(
-          IconButton4,
+        action: /* @__PURE__ */ React29.createElement(
+          IconButton5,
           {
             "aria-label": "close",
             color: "inherit",
             size: "small",
             onClick: onClose
           },
-          /* @__PURE__ */ React25.createElement(MdClose2, { fontSize: "inherit" })
+          /* @__PURE__ */ React29.createElement(MdClose3, { fontSize: "inherit" })
         )
       },
       message
@@ -4315,12 +4485,12 @@ var Toast = ({ open, onClose, severity, message }) => {
 };
 
 // src/contexts/AlertContext.tsx
-var AlertContext = createContext({});
+var AlertContext = createContext3({});
 var AlertProvider = ({ children }) => {
-  const [severity, setSeverity] = useState5("info");
-  const [message, setMessage] = useState5("");
-  const [isVisible, setIsVisible] = useState5(false);
-  const createAlert = useCallback(
+  const [severity, setSeverity] = useState6("info");
+  const [message, setMessage] = useState6("");
+  const [isVisible, setIsVisible] = useState6(false);
+  const createAlert = useCallback2(
     (newMessage, severity2) => {
       setMessage(newMessage);
       setSeverity(severity2);
@@ -4328,10 +4498,10 @@ var AlertProvider = ({ children }) => {
     },
     []
   );
-  const onCloseToast = useCallback(() => {
+  const onCloseToast = useCallback2(() => {
     setIsVisible(false);
   }, []);
-  return /* @__PURE__ */ React26.createElement(AlertContext.Provider, { value: { createAlert } }, children, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React30.createElement(AlertContext.Provider, { value: { createAlert } }, children, /* @__PURE__ */ React30.createElement(
     Toast,
     {
       open: isVisible,
@@ -4344,15 +4514,15 @@ var AlertProvider = ({ children }) => {
 
 // src/hooks/useAlert.ts
 var useAlert = () => {
-  return useContext2(AlertContext);
+  return useContext3(AlertContext);
 };
 
 // src/hooks/useLoading.ts
-import { useCallback as useCallback2, useState as useState6 } from "react";
+import { useCallback as useCallback3, useState as useState7 } from "react";
 function useLoading() {
-  const [state, setState] = useState6([]);
-  const isLoading = useCallback2((prop) => state.includes(prop), [state]);
-  const setLoading = useCallback2((prop, remove) => {
+  const [state, setState] = useState7([]);
+  const isLoading = useCallback3((prop) => state.includes(prop), [state]);
+  const setLoading = useCallback3((prop, remove) => {
     if (remove)
       setState((prevState) => prevState.filter((state2) => state2 !== prop));
     else
@@ -4362,22 +4532,22 @@ function useLoading() {
 }
 
 // src/contexts/FormHelperProvider.tsx
-import React27 from "react";
-import { createContext as createContext2 } from "react";
-var FormHelperContext = createContext2({});
+import React31 from "react";
+import { createContext as createContext4 } from "react";
+var FormHelperContext = createContext4({});
 var FormHelperProvider = ({ formatErrorMessage, api, children }) => {
-  return /* @__PURE__ */ React27.createElement(FormHelperContext.Provider, { value: { formatErrorMessage, api } }, children);
+  return /* @__PURE__ */ React31.createElement(FormHelperContext.Provider, { value: { formatErrorMessage, api } }, children);
 };
 
 // src/hooks/useFormHelper.ts
 function useFormHelper() {
   const alertProps = useAlert();
   const loadingProps = useLoading();
-  const { api, formatErrorMessage } = useContext3(FormHelperContext);
+  const { api, formatErrorMessage } = useContext4(FormHelperContext);
   const { createAlert } = alertProps;
   const { setLoading } = loadingProps;
   const sourceRef = useRef4(new AbortController());
-  const onSubmitWrapper = useCallback3(
+  const onSubmitWrapper = useCallback4(
     (fn, { name }) => {
       return (fields, methods) => __async(this, null, function* () {
         const LOADING_NAME = name;
@@ -4393,7 +4563,7 @@ function useFormHelper() {
     },
     [setLoading]
   );
-  const onRequestWrapper = useCallback3(
+  const onRequestWrapper = useCallback4(
     (fn, { name }) => {
       return (...params) => __async(this, null, function* () {
         const LOADING_NAME = name;
@@ -4421,7 +4591,7 @@ function useFormHelper() {
     },
     [setLoading, api]
   );
-  const errorHandler = useCallback3(
+  const errorHandler = useCallback4(
     (error, callback) => {
       if ((error == null ? void 0 : error.message) === "cancel.navigation")
         return;
@@ -4727,11 +4897,11 @@ var AuthHelper = class {
 };
 
 // src/hooks/useGrid.ts
-import { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo3, useState as useState8 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo3, useState as useState9 } from "react";
 
 // src/hooks/useFilter.ts
 import moment2 from "moment";
-import { useCallback as useCallback4, useState as useState7 } from "react";
+import { useCallback as useCallback5, useState as useState8 } from "react";
 
 // src/components/utils/getObjectValue.ts
 function getObjectValue(obj) {
@@ -4746,11 +4916,11 @@ function getObjectValue(obj) {
 
 // src/hooks/useFilter.ts
 function useFilter(props = { defaultFilters: [] }) {
-  const [selectedFilters, setSelectedFilters] = useState7(() => {
+  const [selectedFilters, setSelectedFilters] = useState8(() => {
     const { defaultFilters } = props;
     return defaultFilters || [];
   });
-  const filterBy = useCallback4((newFilter) => {
+  const filterBy = useCallback5((newFilter) => {
     const propToCompare = (newFilter == null ? void 0 : newFilter.id) ? "id" : "prop";
     function removeRepeatedFilters(filter) {
       return filter[propToCompare] !== newFilter[propToCompare];
@@ -4760,7 +4930,7 @@ function useFilter(props = { defaultFilters: [] }) {
       newFilter
     ]);
   }, []);
-  const removeFilter = useCallback4(
+  const removeFilter = useCallback5(
     (prop, isId) => {
       const propToCompare = isId ? "id" : "prop";
       setSelectedFilters(
@@ -4837,13 +5007,13 @@ function useGrid({
   defaultCurrentPage,
   defaultSortedBy
 }) {
-  const [defaultData, setDefaultData] = useState8(externalDefaultData || []);
-  const [sortedBy, setSortedBy] = useState8(
+  const [defaultData, setDefaultData] = useState9(externalDefaultData || []);
+  const [sortedBy, setSortedBy] = useState9(
     defaultSortedBy || []
   );
-  const [currentPage, setCurrentPage] = useState8(defaultCurrentPage || 0);
-  const [rowsPerPage, setRowsPerPage] = useState8(rowsPerPageOptions[0]);
-  const toggleSortedDirection = useCallback5(
+  const [currentPage, setCurrentPage] = useState9(defaultCurrentPage || 0);
+  const [rowsPerPage, setRowsPerPage] = useState9(rowsPerPageOptions[0]);
+  const toggleSortedDirection = useCallback6(
     (direction) => {
       if (direction === "asc")
         return "desc";
@@ -4851,16 +5021,16 @@ function useGrid({
     },
     []
   );
-  const clearSort = useCallback5(() => {
+  const clearSort = useCallback6(() => {
     setSortedBy([]);
   }, []);
-  const appendSort = useCallback5((prop, direction) => {
+  const appendSort = useCallback6((prop, direction) => {
     setSortedBy((prev) => [...prev, { prop, direction }]);
   }, []);
-  const setSort = useCallback5((prop, direction) => {
+  const setSort = useCallback6((prop, direction) => {
     setSortedBy([{ prop, direction }]);
   }, []);
-  const onSortBy = useCallback5(
+  const onSortBy = useCallback6(
     (prop) => {
       if (!prop)
         return;
@@ -4887,10 +5057,10 @@ function useGrid({
     },
     [toggleSortedDirection, sortedBy]
   );
-  const set = useCallback5((data) => {
+  const set = useCallback6((data) => {
     setDefaultData(data);
   }, []);
-  const sortData = useCallback5(
+  const sortData = useCallback6(
     (data) => {
       if (sortedBy.length > 0) {
         const symbolDir = {
@@ -4913,7 +5083,7 @@ function useGrid({
       return;
     setCurrentPage(pageNumber);
   };
-  const onChangeRowsPerPage = useCallback5(
+  const onChangeRowsPerPage = useCallback6(
     (rows) => {
       let totalNumberOfPages2 = Math.round(filteredData.length / rows) - 1;
       totalNumberOfPages2 = totalNumberOfPages2 <= 0 ? 0 : 1;
@@ -5009,7 +5179,7 @@ function createSearch(options) {
 }
 
 // src/hooks/useAsyncGrid.ts
-import { useCallback as useCallback6, useEffect as useEffect6, useState as useState9 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect6, useState as useState10 } from "react";
 function useAsyncGrid({
   columns,
   filters = [],
@@ -5022,16 +5192,16 @@ function useAsyncGrid({
   defaultCurrentPage,
   defaultSortedBy
 }) {
-  const [defaultData, setDefaultData] = useState9(externalDefaultData || []);
-  const [sortedBy, setSortedBy] = useState9(
+  const [defaultData, setDefaultData] = useState10(externalDefaultData || []);
+  const [sortedBy, setSortedBy] = useState10(
     defaultSortedBy || []
   );
-  const [totalNumberOfItems, setTotalNumberOfItems] = useState9(0);
-  const [isLoading, setIsLoading] = useState9(false);
-  const [currentPage, setCurrentPage] = useState9(defaultCurrentPage || 0);
-  const [rowsPerPage, setRowsPerPage] = useState9(rowsPerPageOptions[0]);
+  const [totalNumberOfItems, setTotalNumberOfItems] = useState10(0);
+  const [isLoading, setIsLoading] = useState10(false);
+  const [currentPage, setCurrentPage] = useState10(defaultCurrentPage || 0);
+  const [rowsPerPage, setRowsPerPage] = useState10(rowsPerPageOptions[0]);
   const totalNumberOfPages = Math.ceil(totalNumberOfItems / rowsPerPage) - 1;
-  const toggleSortedDirection = useCallback6(
+  const toggleSortedDirection = useCallback7(
     (direction) => {
       if (direction === "asc")
         return "desc";
@@ -5039,10 +5209,10 @@ function useAsyncGrid({
     },
     []
   );
-  const setSort = useCallback6((prop, direction) => {
+  const setSort = useCallback7((prop, direction) => {
     setSortedBy((prev) => [...prev, { prop, direction }]);
   }, []);
-  const onSortBy = useCallback6(
+  const onSortBy = useCallback7(
     (prop) => __async(this, null, function* () {
       if (!prop)
         return;
@@ -5072,10 +5242,10 @@ function useAsyncGrid({
     }),
     [sortedBy, toggleSortedDirection, rowsPerPage, currentPage]
   );
-  const set = useCallback6((data) => {
+  const set = useCallback7((data) => {
     setDefaultData(data);
   }, []);
-  const baseRequest = useCallback6(
+  const baseRequest = useCallback7(
     (_0) => __async(this, [_0], function* ({
       page,
       search: search2,
@@ -5105,7 +5275,7 @@ function useAsyncGrid({
     }),
     [axiosInstance, url]
   );
-  const updateGridContent = useCallback6(
+  const updateGridContent = useCallback7(
     (_0) => __async(this, [_0], function* ({
       page,
       sortedBy: sortedBy2,
@@ -5131,7 +5301,7 @@ function useAsyncGrid({
     }),
     [set, search, filters, onRequest, baseRequest]
   );
-  const onPageChange = useCallback6(
+  const onPageChange = useCallback7(
     (pageNumber) => {
       if (pageNumber < 0)
         return;
@@ -5141,7 +5311,7 @@ function useAsyncGrid({
     },
     [updateGridContent, totalNumberOfPages, sortedBy, rowsPerPage]
   );
-  const onChangeRowsPerPage = useCallback6(
+  const onChangeRowsPerPage = useCallback7(
     (rows) => {
       let totalNumberOfPages2 = Math.round(totalNumberOfItems / rows) - 1;
       totalNumberOfPages2 = totalNumberOfPages2 <= 0 ? 0 : 1;
@@ -5194,15 +5364,15 @@ function useEvent(event, handler, passive = false) {
 }
 
 // src/contexts/AuthContext.tsx
-import React28, { useCallback as useCallback7 } from "react";
+import React32, { useCallback as useCallback8 } from "react";
 import {
-  createContext as createContext3,
+  createContext as createContext5,
   useEffect as useEffect8,
-  useState as useState10
+  useState as useState11
 } from "react";
 import { parseCookies as parseCookies2 } from "nookies";
 function createAuthContext() {
-  return createContext3({});
+  return createContext5({});
 }
 function CreateAuthProvider({
   api,
@@ -5210,10 +5380,10 @@ function CreateAuthProvider({
   sessionTokenName,
   Provider
 }) {
-  const [user, setUser] = useState10();
-  const [status, setStatus] = useState10("unauthenticated");
+  const [user, setUser] = useState11();
+  const [status, setStatus] = useState11("unauthenticated");
   const { createAlert } = useAlert();
-  const signIn = useCallback7(
+  const signIn = useCallback8(
     (_0) => __async(this, [_0], function* ({ email, password }) {
       var _a, _b;
       setStatus("loading");
@@ -5236,7 +5406,7 @@ function CreateAuthProvider({
     }),
     [createAlert, api]
   );
-  const ClientSignOut = useCallback7(() => __async(this, null, function* () {
+  const ClientSignOut = useCallback8(() => __async(this, null, function* () {
     yield api.get("/auth/logout");
     setUser(void 0);
   }), [api]);
@@ -5252,7 +5422,7 @@ function CreateAuthProvider({
       });
     }
   }, [api, sessionTokenName]);
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React32.createElement(
     Provider,
     {
       value: {
@@ -5271,6 +5441,11 @@ export {
   ApiHelper,
   AuthHelper,
   Autocomplete2 as Autocomplete,
+  BaseDialog,
+  BaseDialogBody,
+  BaseDialogContainer,
+  BaseDialogCreate,
+  BaseDialogTrigger,
   BaseGrid,
   BaseGridAutoRows,
   Checkbox,
@@ -5301,6 +5476,8 @@ export {
   getTabProps,
   useAlert,
   useAsyncGrid,
+  useBaseDialog,
+  useBaseDialogInstance,
   useEvent,
   useFilter,
   useFormHelper,