@bluemarble/bm-components 1.16.0 → 1.16.2

package/dist/index.mjs

@@ -258,7 +258,7 @@ var require_react_is_development = __commonJS({
         var Fragment3 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
-        var Portal = REACT_PORTAL_TYPE;
+        var Portal2 = REACT_PORTAL_TYPE;
         var Profiler = REACT_PROFILER_TYPE;
         var StrictMode = REACT_STRICT_MODE_TYPE;
         var Suspense = REACT_SUSPENSE_TYPE;
@@ -317,7 +317,7 @@ var require_react_is_development = __commonJS({
         exports.Fragment = Fragment3;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
-        exports.Portal = Portal;
+        exports.Portal = Portal2;
         exports.Profiler = Profiler;
         exports.StrictMode = StrictMode;
         exports.Suspense = Suspense;
@@ -2404,7 +2404,7 @@ function createBox(options = {}) {
   const BoxRoot = styled("div", {
     shouldForwardProp: (prop) => prop !== "theme" && prop !== "sx" && prop !== "as"
   })(styleFunctionSx_default);
-  const Box7 = /* @__PURE__ */ React3.forwardRef(function Box8(inProps, ref) {
+  const Box8 = /* @__PURE__ */ React3.forwardRef(function Box9(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 Box7;
+  return Box8;
 }
 
 // node_modules/@mui/utils/generateUtilityClass/generateUtilityClass.js
@@ -3202,7 +3202,7 @@ var BaseInputMask = (_a) => {
   const { ref, value, setValue, maskRef, unmaskedValue } = useIMask2(
     mask,
     {
-      onComplete: (...params) => {
+      onAccept: (...params) => {
         if (onChangeValue)
           onChangeValue(params[0], unmaskedValue);
       }
@@ -4062,6 +4062,101 @@ var Dialog = (_a) => {
   }))));
 };
 
+// src/components/DialogConfirm/DialogConfirm.view.tsx
+import React24 from "react";
+import { Box as Box7, Portal, Stack as Stack2, Typography as Typography3 } from "@mui/material";
+import { grey, orange } from "@mui/material/colors";
+import { MdOutlineWarningAmber } from "react-icons/md";
+
+// src/components/DialogConfirm/DialogConfirm.model.ts
+import { useRef as useRef3, useState as useState4 } from "react";
+function UseDialogConfirm() {
+  const [opened, setOpened] = useState4(false);
+  const [isLoading, setLoading] = useState4(false);
+  const onConfirmFn = useRef3();
+  const paramsFn = useRef3([]);
+  const onConfirm = (fn) => {
+    onConfirmFn.current = fn;
+    return (...params) => __async(this, null, function* () {
+      paramsFn.current = params;
+      setOpened(true);
+    });
+  };
+  const onProceed = (event) => __async(this, null, function* () {
+    event == null ? void 0 : event.preventDefault();
+    event == null ? void 0 : event.stopPropagation();
+    setLoading(true);
+    try {
+      if (!onConfirmFn.current)
+        return;
+      yield onConfirmFn.current(...paramsFn.current);
+    } finally {
+      setOpened(false);
+      setLoading(false);
+    }
+  });
+  const onCancel = (event) => {
+    event == null ? void 0 : event.preventDefault();
+    event == null ? void 0 : event.stopPropagation();
+    setOpened(false);
+  };
+  const onCloseModal = () => {
+    if (isLoading)
+      return;
+    setOpened(false);
+  };
+  return {
+    isLoading,
+    opened,
+    onConfirm,
+    onCloseModal,
+    onCancel,
+    onProceed
+  };
+}
+
+// src/components/DialogConfirm/DialogConfirm.view.tsx
+var DEFAULT_ICON = MdOutlineWarningAmber;
+var DialogConfirm = (props) => {
+  const model = UseDialogConfirm();
+  const Icon = props.icon || DEFAULT_ICON;
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, props.children({
+    onConfirm: model.onConfirm,
+    onCancel: model.onCancel
+  }), /* @__PURE__ */ React24.createElement(Portal, null, /* @__PURE__ */ React24.createElement(Modal, { open: model.opened, onClose: model.onCloseModal }, /* @__PURE__ */ React24.createElement(Box7, { sx: { p: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React24.createElement(
+    Stack2,
+    {
+      mx: "auto",
+      color: orange[800],
+      bgcolor: orange[50],
+      borderRadius: "50%",
+      height: 8 * 5,
+      width: 8 * 5,
+      direction: "row",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    /* @__PURE__ */ React24.createElement(Icon, { size: 8 * 3 })
+  ), /* @__PURE__ */ React24.createElement(Typography3, { fontWeight: "bold", variant: "h6", mt: 1 }, props.title || "Aten\xE7\xE3o"), /* @__PURE__ */ React24.createElement(Typography3, { my: 1 }, props.body || "Tem certeza que deseja realizar essa a\xE7\xE3o?"), /* @__PURE__ */ React24.createElement(Stack2, { gap: 1, mt: 3, color: grey[600] }, /* @__PURE__ */ React24.createElement(
+    LargeButton,
+    {
+      color: "warning",
+      loading: model.isLoading,
+      onClick: model.onProceed
+    },
+    props.confirmButtonText || "Confirmar"
+  ), /* @__PURE__ */ React24.createElement(
+    LargeButton,
+    {
+      variant: "outlined",
+      disabled: model.isLoading,
+      onClick: model.onCancel,
+      color: "inherit"
+    },
+    props.cancelButtonText || "Confirmar"
+  ))))));
+};
+
 // src/errors/HttpError.ts
 var HttpError = class extends Error {
   constructor(status, message) {
@@ -4175,21 +4270,21 @@ var ApiHelper = class _ApiHelper {
 };
 
 // src/hooks/useFormHelper.ts
-import { useCallback as useCallback3, useContext as useContext3, useEffect as useEffect4, useRef as useRef3 } from "react";
+import { useCallback as useCallback3, useContext as useContext3, useEffect as useEffect4, useRef as useRef4 } from "react";
 
 // src/hooks/useAlert.ts
 import { useContext as useContext2 } from "react";
 
 // src/contexts/AlertContext.tsx
-import React25, { useCallback } from "react";
-import { createContext, useState as useState4 } from "react";
+import React26, { useCallback } from "react";
+import { createContext, useState as useState5 } from "react";
 
 // src/components/Toast/index.tsx
-import React24 from "react";
+import React25 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__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(
     Snackbar,
     {
       open,
@@ -4198,12 +4293,12 @@ var Toast = ({ open, onClose, severity, message }) => {
       anchorOrigin: { vertical: "top", horizontal: "right" },
       sx: { zIndex: 99999999 }
     },
-    /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React25.createElement(
       Alert,
       {
         severity,
         elevation: 2,
-        action: /* @__PURE__ */ React24.createElement(
+        action: /* @__PURE__ */ React25.createElement(
           IconButton4,
           {
             "aria-label": "close",
@@ -4211,7 +4306,7 @@ var Toast = ({ open, onClose, severity, message }) => {
             size: "small",
             onClick: onClose
           },
-          /* @__PURE__ */ React24.createElement(MdClose2, { fontSize: "inherit" })
+          /* @__PURE__ */ React25.createElement(MdClose2, { fontSize: "inherit" })
         )
       },
       message
@@ -4222,9 +4317,9 @@ var Toast = ({ open, onClose, severity, message }) => {
 // src/contexts/AlertContext.tsx
 var AlertContext = createContext({});
 var AlertProvider = ({ children }) => {
-  const [severity, setSeverity] = useState4("info");
-  const [message, setMessage] = useState4("");
-  const [isVisible, setIsVisible] = useState4(false);
+  const [severity, setSeverity] = useState5("info");
+  const [message, setMessage] = useState5("");
+  const [isVisible, setIsVisible] = useState5(false);
   const createAlert = useCallback(
     (newMessage, severity2) => {
       setMessage(newMessage);
@@ -4236,7 +4331,7 @@ var AlertProvider = ({ children }) => {
   const onCloseToast = useCallback(() => {
     setIsVisible(false);
   }, []);
-  return /* @__PURE__ */ React25.createElement(AlertContext.Provider, { value: { createAlert } }, children, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(AlertContext.Provider, { value: { createAlert } }, children, /* @__PURE__ */ React26.createElement(
     Toast,
     {
       open: isVisible,
@@ -4253,9 +4348,9 @@ var useAlert = () => {
 };
 
 // src/hooks/useLoading.ts
-import { useCallback as useCallback2, useState as useState5 } from "react";
+import { useCallback as useCallback2, useState as useState6 } from "react";
 function useLoading() {
-  const [state, setState] = useState5([]);
+  const [state, setState] = useState6([]);
   const isLoading = useCallback2((prop) => state.includes(prop), [state]);
   const setLoading = useCallback2((prop, remove) => {
     if (remove)
@@ -4267,11 +4362,11 @@ function useLoading() {
 }
 
 // src/contexts/FormHelperProvider.tsx
-import React26 from "react";
+import React27 from "react";
 import { createContext as createContext2 } from "react";
 var FormHelperContext = createContext2({});
 var FormHelperProvider = ({ formatErrorMessage, api, children }) => {
-  return /* @__PURE__ */ React26.createElement(FormHelperContext.Provider, { value: { formatErrorMessage, api } }, children);
+  return /* @__PURE__ */ React27.createElement(FormHelperContext.Provider, { value: { formatErrorMessage, api } }, children);
 };
 
 // src/hooks/useFormHelper.ts
@@ -4281,7 +4376,7 @@ function useFormHelper() {
   const { api, formatErrorMessage } = useContext3(FormHelperContext);
   const { createAlert } = alertProps;
   const { setLoading } = loadingProps;
-  const sourceRef = useRef3(new AbortController());
+  const sourceRef = useRef4(new AbortController());
   const onSubmitWrapper = useCallback3(
     (fn, { name }) => {
       return (fields, methods) => __async(this, null, function* () {
@@ -4680,11 +4775,11 @@ var AuthHelper = class {
 };
 
 // src/hooks/useGrid.ts
-import { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo3, useState as useState7 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo3, useState as useState8 } from "react";
 
 // src/hooks/useFilter.ts
 import moment2 from "moment";
-import { useCallback as useCallback4, useState as useState6 } from "react";
+import { useCallback as useCallback4, useState as useState7 } from "react";
 
 // src/components/utils/getObjectValue.ts
 function getObjectValue(obj) {
@@ -4699,7 +4794,7 @@ function getObjectValue(obj) {
 
 // src/hooks/useFilter.ts
 function useFilter(props = { defaultFilters: [] }) {
-  const [selectedFilters, setSelectedFilters] = useState6(() => {
+  const [selectedFilters, setSelectedFilters] = useState7(() => {
     const { defaultFilters } = props;
     return defaultFilters || [];
   });
@@ -4790,12 +4885,12 @@ function useGrid({
   defaultCurrentPage,
   defaultSortedBy
 }) {
-  const [defaultData, setDefaultData] = useState7(externalDefaultData || []);
-  const [sortedBy, setSortedBy] = useState7(
+  const [defaultData, setDefaultData] = useState8(externalDefaultData || []);
+  const [sortedBy, setSortedBy] = useState8(
     defaultSortedBy || []
   );
-  const [currentPage, setCurrentPage] = useState7(defaultCurrentPage || 0);
-  const [rowsPerPage, setRowsPerPage] = useState7(rowsPerPageOptions[0]);
+  const [currentPage, setCurrentPage] = useState8(defaultCurrentPage || 0);
+  const [rowsPerPage, setRowsPerPage] = useState8(rowsPerPageOptions[0]);
   const toggleSortedDirection = useCallback5(
     (direction) => {
       if (direction === "asc")
@@ -4876,8 +4971,15 @@ function useGrid({
     },
     [currentPage]
   );
+  const orderedData = useMemo3(() => {
+    if (sortedBy.length === 0)
+      return defaultData;
+    const newData = defaultData.slice(0);
+    const sortedData = sortData(newData);
+    return sortedData;
+  }, [defaultData, sortData, sortedBy]);
   const filteredData = useMemo3(() => {
-    let newData = defaultData.slice(0);
+    let newData = orderedData.slice(0);
     if (search && search.value !== "") {
       const searchBy = createSearch(search);
       newData = newData.filter(searchBy);
@@ -4886,16 +4988,12 @@ function useGrid({
       return newData;
     const newFilter = createFilter(filters);
     return newData.filter(newFilter.apply);
-  }, [defaultData, search, filters]);
-  const orderedData = useMemo3(() => {
-    const sortedData = sortData(filteredData);
-    return sortedData;
-  }, [filteredData, sortData]);
+  }, [orderedData, search, filters]);
   const paginatedData = useMemo3(() => {
     const startPage = currentPage * rowsPerPage;
     const endPage = startPage + rowsPerPage;
-    return orderedData.slice(startPage, endPage);
-  }, [currentPage, rowsPerPage, orderedData]);
+    return filteredData.slice(startPage, endPage);
+  }, [currentPage, rowsPerPage, filteredData]);
   const totalNumberOfPages = Math.ceil(filteredData.length / rowsPerPage) - 1;
   useEffect5(() => {
     if (externalDefaultData)
@@ -4959,7 +5057,7 @@ function createSearch(options) {
 }
 
 // src/hooks/useAsyncGrid.ts
-import { useCallback as useCallback6, useEffect as useEffect6, useState as useState8 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect6, useState as useState9 } from "react";
 function useAsyncGrid({
   columns,
   filters = [],
@@ -4972,14 +5070,14 @@ function useAsyncGrid({
   defaultCurrentPage,
   defaultSortedBy
 }) {
-  const [defaultData, setDefaultData] = useState8(externalDefaultData || []);
-  const [sortedBy, setSortedBy] = useState8(
+  const [defaultData, setDefaultData] = useState9(externalDefaultData || []);
+  const [sortedBy, setSortedBy] = useState9(
     defaultSortedBy || []
   );
-  const [totalNumberOfItems, setTotalNumberOfItems] = useState8(0);
-  const [isLoading, setIsLoading] = useState8(false);
-  const [currentPage, setCurrentPage] = useState8(defaultCurrentPage || 0);
-  const [rowsPerPage, setRowsPerPage] = useState8(rowsPerPageOptions[0]);
+  const [totalNumberOfItems, setTotalNumberOfItems] = useState9(0);
+  const [isLoading, setIsLoading] = useState9(false);
+  const [currentPage, setCurrentPage] = useState9(defaultCurrentPage || 0);
+  const [rowsPerPage, setRowsPerPage] = useState9(rowsPerPageOptions[0]);
   const totalNumberOfPages = Math.ceil(totalNumberOfItems / rowsPerPage) - 1;
   const toggleSortedDirection = useCallback6(
     (direction) => {
@@ -5144,11 +5242,11 @@ function useEvent(event, handler, passive = false) {
 }
 
 // src/contexts/AuthContext.tsx
-import React27, { useCallback as useCallback7 } from "react";
+import React28, { useCallback as useCallback7 } from "react";
 import {
   createContext as createContext3,
   useEffect as useEffect8,
-  useState as useState9
+  useState as useState10
 } from "react";
 import { parseCookies as parseCookies2 } from "nookies";
 function createAuthContext() {
@@ -5160,8 +5258,8 @@ function CreateAuthProvider({
   sessionTokenName,
   Provider
 }) {
-  const [user, setUser] = useState9();
-  const [status, setStatus] = useState9("unauthenticated");
+  const [user, setUser] = useState10();
+  const [status, setStatus] = useState10("unauthenticated");
   const { createAlert } = useAlert();
   const signIn = useCallback7(
     (_0) => __async(this, [_0], function* ({ email, password }) {
@@ -5202,7 +5300,7 @@ function CreateAuthProvider({
       });
     }
   }, [api, sessionTokenName]);
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React28.createElement(
     Provider,
     {
       value: {
@@ -5226,6 +5324,7 @@ export {
   Checkbox,
   CreateAuthProvider,
   Dialog,
+  DialogConfirm,
   DomainError,
   EditableTableCell,
   FormHelperContext,
@@ -5243,6 +5342,7 @@ export {
   TabPanel,
   Td,
   Tr,
+  UseDialogConfirm,
   createAuthContext,
   createFilter,
   filterData,