feat(mui): configurable anchorOrigin for useNotificationProvider

.changeset/few-terms-fetch.md

@@ -0,0 +1,9 @@
+---
+"@refinedev/mui": patch
+---
+
+feat: add ability to customize anchor origin from snackbar provider
+
+Previously, `useNotificationProvider` used hardcoded `anchorOrigin` and `disableWindowBlurListener` values, preventing users to customize these values. This change moves these values to `<RefineSnackbarProvider />` as default props to allow users to customize them when needed.
+
+Resolves [#5847](https://github.com/refinedev/refine/issues/5847)

packages/mui/src/providers/notificationProvider/index.spec.tsx

@@ -65,11 +65,6 @@ describe("Notistack notificationProvider", () => {
       {
         key: mockNotification.key,
         variant: "success",
-        anchorOrigin: {
-          vertical: "top",
-          horizontal: "right",
-        },
-        disableWindowBlurListener: true,
       },
     );
   });
@@ -90,11 +85,6 @@ describe("Notistack notificationProvider", () => {
       {
         key: mockNotification.key,
         variant: "error",
-        anchorOrigin: {
-          vertical: "top",
-          horizontal: "right",
-        },
-        disableWindowBlurListener: true,
       },
     );
   });
@@ -114,14 +104,9 @@ describe("Notistack notificationProvider", () => {
       </>,
       {
         action: expect.any(Function),
-        anchorOrigin: {
-          vertical: "top",
-          horizontal: "right",
-        },
         preventDuplicate: true,
         key: "test-notification-undoable",
         autoHideDuration: 5000,
-        disableWindowBlurListener: true,
       },
     );
   });

packages/mui/src/providers/notificationProvider/index.tsx

@@ -43,14 +43,9 @@ export const useNotificationProvider = (): NotificationProvider => {
           </>,
           {
             action,
-            anchorOrigin: {
-              vertical: "top",
-              horizontal: "right",
-            },
             preventDuplicate: true,
             key,
             autoHideDuration: (undoableTimeout ?? 0) * 1000,
-            disableWindowBlurListener: true,
           },
         );
       } else {
@@ -66,11 +61,6 @@ export const useNotificationProvider = (): NotificationProvider => {
           {
             key,
             variant: type,
-            anchorOrigin: {
-              vertical: "top",
-              horizontal: "right",
-            },
-            disableWindowBlurListener: true,
           },
         );
       }

packages/mui/src/providers/refineSnackbarProvider/index.tsx

@@ -1,25 +1,43 @@
+import React from "react";
 import { styled } from "@mui/material/styles";
 import { SnackbarProvider } from "notistack";
 
-export const RefineSnackbarProvider = styled(SnackbarProvider)`
-    &.SnackbarItem-contentRoot {
-        background-color: ${(props) => props.theme.palette.background.default};
-        color: ${(props) => props.theme.palette.primary.main};
-    }
-    &.SnackbarItem-variantSuccess {
-        background-color: ${(props) => props.theme.palette.success.main};
-        color: ${(props) => props.theme.palette.success.contrastText};
-    }
-    &.SnackbarItem-variantError {
-        background-color: ${(props) => props.theme.palette.error.main};
-        color: ${(props) => props.theme.palette.error.contrastText};
-    }
-    &.SnackbarItem-variantInfo {
-        background-color: ${(props) => props.theme.palette.info.main};
-        color: ${(props) => props.theme.palette.info.contrastText};
-    }
-    &.SnackbarItem-variantWarning {
-        background-color: ${(props) => props.theme.palette.warning.main};
-        color: ${(props) => props.theme.palette.warning.contrastText};
-    }
+const SnackbarProviderWithDefaultValues = ({
+  anchorOrigin = {
+    vertical: "top",
+    horizontal: "right",
+  },
+  disableWindowBlurListener = true,
+  ...rest
+}: React.ComponentProps<typeof SnackbarProvider>) => {
+  return (
+    <SnackbarProvider
+      anchorOrigin={anchorOrigin}
+      disableWindowBlurListener={disableWindowBlurListener}
+      {...rest}
+    />
+  );
+};
+
+export const RefineSnackbarProvider = styled(SnackbarProviderWithDefaultValues)`
+&.SnackbarItem-contentRoot {
+    background-color: ${(props) => props.theme.palette.background.default};
+    color: ${(props) => props.theme.palette.primary.main};
+}
+&.SnackbarItem-variantSuccess {
+    background-color: ${(props) => props.theme.palette.success.main};
+    color: ${(props) => props.theme.palette.success.contrastText};
+}
+&.SnackbarItem-variantError {
+    background-color: ${(props) => props.theme.palette.error.main};
+    color: ${(props) => props.theme.palette.error.contrastText};
+}
+&.SnackbarItem-variantInfo {
+    background-color: ${(props) => props.theme.palette.info.main};
+    color: ${(props) => props.theme.palette.info.contrastText};
+}
+&.SnackbarItem-variantWarning {
+    background-color: ${(props) => props.theme.palette.warning.main};
+    color: ${(props) => props.theme.palette.warning.contrastText};
+}
 `;