Fix snackbars of different width being left-aligned

CHANGELOG.md

@@ -1,5 +1,13 @@
 Thanks to all contributers who improved notistack by opening an issue/PR.
 
+### `[email protected]`
+###### May 8, 2021
+* **@whytspace** Multiple Snackbars always left aligned [#373](https://github.com/iamhosseindhv/notistack/issues/373) 
+
+
+<br />
+
+
 ### `[email protected]`
 ###### April 18, 2021
 * **@rzmz** Snackbars should have equal width on XS screens [#367](https://github.com/iamhosseindhv/notistack/issues/367) 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "notistack",
-    "version": "1.0.6",
+    "version": "1.0.7",
     "description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
     "main": "dist/index.js",
     "module": "dist/notistack.esm.js",

src/SnackbarContainer.tsx

@@ -4,37 +4,71 @@ import { makeStyles } from '@material-ui/core/styles';
 import { SNACKBAR_INDENTS } from './utils/constants';
 import { SnackbarProviderProps } from '.';
 
-const useStyle = makeStyles(theme => ({
+const collapse = {
+    container: '& > .MuiCollapse-container',
+    wrapper: '& > .MuiCollapse-container > .MuiCollapse-wrapper',
+};
+
+const useStyle = makeStyles((theme) => ({
     root: {
         boxSizing: 'border-box',
         display: 'flex',
         maxHeight: '100%',
-        maxWidth: '100%',
         position: 'fixed',
-        flexDirection: 'column',
         zIndex: theme.zIndex.snackbar,
         height: 'auto',
         width: 'auto',
-        minWidth: 288,
-        transition: theme.transitions.create(['top', 'right', 'bottom', 'left'], { easing: 'ease' }),
+        transition: 'top 300ms ease 0ms, right 300ms ease 0ms, bottom 300ms ease 0ms, left 300ms ease 0ms, margin 300ms ease 0ms, max-width 300ms ease 0ms',
+        // container itself is invisible and should not block clicks, clicks should be passed to its children 
+        pointerEvents: 'none',
+        [collapse.container]: {
+            pointerEvents: 'all',
+        },
+        [collapse.wrapper]: {
+            padding: `${SNACKBAR_INDENTS.snackbar.default}px 0px`,
+        },
+        maxWidth: `calc(100% - ${SNACKBAR_INDENTS.view.default * 2}px)`,
         [theme.breakpoints.down('xs')]: {
-            left: '0 !important',
-            right: '0 !important',
+            left: '16px',
+            right: '16px',
             width: '100%',
+            maxWidth: 'calc(100% - 32px)',
         },
     },
-    reverseColumns: { flexDirection: 'column-reverse' },
 
-    top: { top: SNACKBAR_INDENTS.view.default - SNACKBAR_INDENTS.snackbar.default },
+    rootDense: {
+        maxWidth: `calc(100% - ${SNACKBAR_INDENTS.view.dense * 2}px)`,
+        [collapse.wrapper]: {
+            padding: `${SNACKBAR_INDENTS.snackbar.dense}px 0px`,
+        },
+    },
+
+    top: {
+        top: SNACKBAR_INDENTS.view.default - SNACKBAR_INDENTS.snackbar.default,
+        flexDirection: 'column',
+    },
     topDense: { top: SNACKBAR_INDENTS.view.dense - SNACKBAR_INDENTS.snackbar.dense },
 
-    bottom: { bottom: SNACKBAR_INDENTS.view.default - SNACKBAR_INDENTS.snackbar.default },
+    bottom: {
+        bottom: SNACKBAR_INDENTS.view.default - SNACKBAR_INDENTS.snackbar.default,
+        flexDirection: 'column-reverse',
+    },
     bottomDense: { bottom: SNACKBAR_INDENTS.view.dense - SNACKBAR_INDENTS.snackbar.dense },
 
-    left: { left: SNACKBAR_INDENTS.view.default },
+    left: {
+        left: SNACKBAR_INDENTS.view.default,
+        [theme.breakpoints.up('sm')]: {
+            alignItems: 'flex-start',
+        },
+    },
     leftDense: { left: SNACKBAR_INDENTS.view.dense },
 
-    right: { right: SNACKBAR_INDENTS.view.default },
+    right: {
+        right: SNACKBAR_INDENTS.view.default,
+        [theme.breakpoints.up('sm')]: {
+            alignItems: 'flex-end',
+        },
+    },
     rightDense: { right: SNACKBAR_INDENTS.view.dense },
 
     center: {
@@ -43,6 +77,9 @@ const useStyle = makeStyles(theme => ({
         [theme.breakpoints.down('xs')]: {
             transform: 'translateX(0)',
         },
+        [theme.breakpoints.up('sm')]: {
+            alignItems: 'center',
+        },
     },
 }));
 
@@ -59,14 +96,15 @@ const SnackbarContainer: React.FC<SnackbarContainerProps> = (props) => {
     const { className, anchorOrigin, dense, ...other } = props;
 
     const combinedClassname = clsx(
-        classes.root,
         classes[anchorOrigin.vertical],
         classes[anchorOrigin.horizontal],
         // @ts-ignore
-        classes[`${anchorOrigin.vertical}${dense ? 'Dense' : ''}`],
+        { [classes[`${anchorOrigin.vertical}Dense`]]: dense },
+        // @ts-ignore
+        { [classes[`${anchorOrigin.horizontal}Dense`]]: dense },
         // @ts-ignore
-        classes[`${anchorOrigin.horizontal}${dense ? 'Dense' : ''}`],
-        { [classes.reverseColumns]: anchorOrigin.vertical === 'bottom' },
+        { [classes.rootDense]: dense },
+        classes.root, // root should come after others to override maxWidth
         className,
     );
 

src/SnackbarItem/SnackbarItem.tsx

@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { withStyles, WithStyles, createStyles, Theme, emphasize } from '@material-ui/core/styles';
 import Collapse from '@material-ui/core/Collapse';
 import SnackbarContent from '../SnackbarContent';
-import { getTransitionDirection, omitNonCollapseKeys } from './SnackbarItem.util';
-import { allClasses, REASONS, SNACKBAR_INDENTS, objectMerge, DEFAULTS, transformer } from '../utils/constants';
+import { getTransitionDirection } from './SnackbarItem.util';
+import { allClasses, REASONS, objectMerge, DEFAULTS, transformer } from '../utils/constants';
 import { SharedProps, RequiredBy, TransitionHandlerProps, SnackbarProviderProps as ProviderProps } from '../index';
 import defaultIconVariants from '../utils/defaultIconVariants';
 import createChainedFunction from '../utils/createChainedFunction';
@@ -65,27 +65,6 @@ const styles = (theme: Theme) => {
             bottom: 0,
             left: 0,
         },
-        collapseContainer: {
-            [theme.breakpoints.down('xs')]: {
-                paddingLeft: theme.spacing(1),
-                paddingRight: theme.spacing(1),
-            },
-        },
-        collapseWrapper: {
-            transition: theme.transitions.create(['margin-bottom'], { easing: 'ease' }),
-            marginTop: SNACKBAR_INDENTS.snackbar.default,
-            marginBottom: SNACKBAR_INDENTS.snackbar.default,
-        },
-        collapseWrapperDense: {
-            marginTop: SNACKBAR_INDENTS.snackbar.dense,
-            marginBottom: SNACKBAR_INDENTS.snackbar.dense,
-        },
-        collapseWrapperInner: {
-            width: 'auto',
-            [theme.breakpoints.down('xs')]: {
-                width: '100%',
-            },
-        },
     });
 }
 
@@ -214,7 +193,6 @@ const SnackbarItem: React.FC<SnackbarItemProps> = ({ classes, ...props }) => {
             unmountOnExit
             timeout={175}
             in={collapsed}
-            classes={omitNonCollapseKeys(classes, dense)}
             onExited={callbacks.onExited}
         >
             {/* @ts-ignore */}

src/SnackbarItem/SnackbarItem.util.ts

@@ -1,7 +1,4 @@
-import clsx from 'clsx';
-import { SnackbarItemProps } from './SnackbarItem';
 import { Snack } from '../SnackbarProvider';
-import { SnackbarProviderProps } from '..';
 
 const DIRECTION = {
     right: 'left',
@@ -17,12 +14,3 @@ export const getTransitionDirection = (anchorOrigin: Snack['anchorOrigin']): Dir
     }
     return DIRECTION[anchorOrigin.vertical];
 };
-
-/**
- * Omit all class keys except what we need for collapse component
- */
-export const omitNonCollapseKeys = (classes: SnackbarItemProps['classes'], dense: SnackbarProviderProps['dense']): { container: string; wrapper: string; wrapperInner: string; } => ({
-    container: classes.collapseContainer,
-    wrapper: clsx(classes.collapseWrapper, { [classes.collapseWrapperDense]: dense }),
-    wrapperInner: classes.collapseWrapperInner,
-});