From 1f30385e503787a5807f2a6206fb3afeca49554e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20DUNGLER?= <clementdungler@gmail.com>
Date: Fri, 11 Jun 2021 09:16:05 +0200
Subject: [PATCH] fix: do not use css selector for collapse styles

---
 src/SnackbarContainer.tsx         | 19 -------------------
 src/SnackbarItem/SnackbarItem.tsx | 16 +++++++++++++++-
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/SnackbarContainer.tsx b/src/SnackbarContainer.tsx
index 37e52cc8..a446f275 100644
--- a/src/SnackbarContainer.tsx
+++ b/src/SnackbarContainer.tsx
@@ -4,11 +4,6 @@ import { makeStyles } from '@material-ui/core/styles';
 import { SNACKBAR_INDENTS } from './utils/constants';
 import { SnackbarProviderProps } from '.';
 
-const collapse = {
-    container: '& > .MuiCollapse-container',
-    wrapper: '& > .MuiCollapse-container > .MuiCollapse-wrapper',
-};
-
 const xsWidthMargin = 16;
 
 const useStyle = makeStyles((theme) => ({
@@ -23,24 +18,12 @@ const useStyle = makeStyles((theme) => ({
         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`,
-            transition: 'padding 300ms ease 0ms',
-        },
         maxWidth: `calc(100% - ${SNACKBAR_INDENTS.view.default * 2}px)`,
         [theme.breakpoints.down('xs')]: {
             width: '100%',
             maxWidth: `calc(100% - ${xsWidthMargin * 2}px)`,
         },
     },
-    rootDense: {
-        [collapse.wrapper]: {
-            padding: `${SNACKBAR_INDENTS.snackbar.dense}px 0px`,
-        },
-    },
     top: {
         top: SNACKBAR_INDENTS.view.default - SNACKBAR_INDENTS.snackbar.default,
         flexDirection: 'column',
@@ -76,7 +59,6 @@ const useStyle = makeStyles((theme) => ({
     },
 }));
 
-
 interface SnackbarContainerProps {
     children: JSX.Element | JSX.Element[];
     className?: string;
@@ -91,7 +73,6 @@ const SnackbarContainer: React.FC<SnackbarContainerProps> = (props) => {
     const combinedClassname = clsx(
         classes[anchorOrigin.vertical],
         classes[anchorOrigin.horizontal],
-        { [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 e7364a38..42a2ca3d 100644
--- a/src/SnackbarItem/SnackbarItem.tsx
+++ b/src/SnackbarItem/SnackbarItem.tsx
@@ -4,7 +4,7 @@ import { withStyles, WithStyles, createStyles, Theme, emphasize } from '@materia
 import Collapse from '@material-ui/core/Collapse';
 import SnackbarContent from '../SnackbarContent';
 import { getTransitionDirection } from './SnackbarItem.util';
-import { allClasses, REASONS, objectMerge, DEFAULTS, transformer } from '../utils/constants';
+import { allClasses, REASONS, objectMerge, DEFAULTS, transformer, SNACKBAR_INDENTS } from '../utils/constants';
 import { SharedProps, RequiredBy, TransitionHandlerProps, SnackbarProviderProps as ProviderProps } from '../index';
 import defaultIconVariants from '../utils/defaultIconVariants';
 import createChainedFunction from '../utils/createChainedFunction';
@@ -65,6 +65,16 @@ const styles = (theme: Theme) => {
             bottom: 0,
             left: 0,
         },
+        collapseContainer: {
+            pointerEvents: 'all',
+        },
+        collapseWrapper: {
+            padding: `${SNACKBAR_INDENTS.snackbar.default}px 0px`,
+            transition: 'padding 300ms ease 0ms',
+        },
+        collapseWrapperDense: {
+            padding: `${SNACKBAR_INDENTS.snackbar.dense}px 0px`,
+        },
     });
 }
 
@@ -194,6 +204,10 @@ const SnackbarItem: React.FC<SnackbarItemProps> = ({ classes, ...props }) => {
             timeout={175}
             in={collapsed}
             onExited={callbacks.onExited}
+            classes={{
+                wrapper: clsx(classes.collapseWrapper, { [classes.collapseWrapperDense]: dense }),
+                container: classes.collapseContainer
+            }}
         >
             {/* @ts-ignore */}
             <Snackbar