feat: enqueueSnackbar close logic

src/index.tsx

@@ -1,11 +1,11 @@
-import { CssBaseline, ThemeProvider } from "@mui/material";
+import { CssBaseline, ThemeProvider, Button } from "@mui/material";
 import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { ruRU } from "@mui/x-date-pickers/locales";
 import App from "./App";
 import dayjs from "dayjs";
 import "dayjs/locale/ru";
-import { SnackbarProvider } from "notistack";
+import { SnackbarProvider, closeSnackbar } from "notistack";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { createRoot } from "react-dom/client";
@@ -14,6 +14,10 @@ import lightTheme from "./utils/themes/light";
 import { SWRConfig } from "swr";
 import { BrowserRouter } from "react-router-dom";
 import moment from "moment";
+import CloseIcon from "@icons/CloseBold";
+
+import type { HTMLAttributes } from "react";
+import type { SnackbarKey } from "notistack";
 
 dayjs.locale("ru");
 moment.locale("ru");
@@ -21,6 +25,23 @@ moment.locale("ru");
 const localeText =
   ruRU.components.MuiLocalizationProvider.defaultProps.localeText;
 
+const snackbarProps: HTMLAttributes<HTMLDivElement> = {
+  onTouchStart: () => closeSnackbar(),
+};
+
+const snackbarAction = (snackbarId: SnackbarKey) => (
+  <Button
+    onClick={() => closeSnackbar(snackbarId)}
+    sx={{
+      minWidth: "auto",
+      padding: "0px",
+      "&:hover": { backgroundColor: "transparent" },
+    }}
+  >
+    <CloseIcon />
+  </Button>
+);
+
 const root = createRoot(document.getElementById("root")!);
 
 root.render(
@@ -39,6 +60,8 @@ root.render(
         <ThemeProvider theme={lightTheme}>
           <BrowserRouter>
             <SnackbarProvider
+              SnackbarProps={snackbarProps}
+              action={snackbarAction}
               preventDuplicate={true}
               style={{ backgroundColor: lightTheme.palette.brightPurple.main }}
             >