diff --git a/CHANGELOG.md b/CHANGELOG.md
index aa8909b2..1372e9fc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
Thanks to all contributers who improved notistack by opening an issue/PR.
+### `notistack@1.0.7`
+###### May 8, 2021
+* **@whytspace** Multiple Snackbars always left aligned [#373](https://github.com/iamhosseindhv/notistack/issues/373)
+
+
+
+
+
### `notistack@1.0.6`
###### April 18, 2021
* **@rzmz** Snackbars should have equal width on XS screens [#367](https://github.com/iamhosseindhv/notistack/issues/367)
diff --git a/package-lock.json b/package-lock.json
index 445801b7..6ecef9fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "notistack",
- "version": "1.0.6",
+ "version": "1.0.7",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 130835f4..42dd80a7 100644
--- a/package.json
+++ b/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",
diff --git a/src/SnackbarContainer.tsx b/src/SnackbarContainer.tsx
index 0c40e50f..3e37a4b4 100644
--- a/src/SnackbarContainer.tsx
+++ b/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 = (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,
);
diff --git a/src/SnackbarItem/SnackbarItem.tsx b/src/SnackbarItem/SnackbarItem.tsx
index ab02e2bf..97ea954b 100644
--- a/src/SnackbarItem/SnackbarItem.tsx
+++ b/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 = ({ classes, ...props }) => {
unmountOnExit
timeout={175}
in={collapsed}
- classes={omitNonCollapseKeys(classes, dense)}
onExited={callbacks.onExited}
>
{/* @ts-ignore */}
diff --git a/src/SnackbarItem/SnackbarItem.util.ts b/src/SnackbarItem/SnackbarItem.util.ts
index 4944eb72..f13493f3 100644
--- a/src/SnackbarItem/SnackbarItem.util.ts
+++ b/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,
-});