notistack - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

CHANGELOG.md

 Thanks to all contributers who improved notistack by opening an issue/PR.
 
-### `notistack@1.0.2`
+### `notistack@1.0.3`
 ###### to be published
@@ -12,2 +12,10 @@ * **@pctestjfarz**: Add swipe to dismiss feature [#138](https://github.com/iamhosseindhv/notistack/issues/138)
 
+### `notistack@1.0.2`
+###### November 26, 2020
+* Add support MUI v5 [#333](https://github.com/iamhosseindhv/notistack/pull/333) 
+
+
+<br />
+
+
 ### `notistack@1.0.1`
@@ -14,0 +22,0 @@ ###### October 6, 2020

dist/index.d.ts

@@ -10,3 +10,2 @@ /**
 
-export type OptionalBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
 export type RequiredBy<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>
@@ -113,2 +112,4 @@ export type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, string>;
 
+export type SnackbarContentProps = React.HTMLAttributes<HTMLDivElement>
+
 /**
@@ -160,14 +161,9 @@ * @category Shared
      * The duration for the transition, in milliseconds.
-     * You may specify a single timeout for all transitions, or individually with an object
-     * in the following shape:
+     * You may specify the duration with an object in the following shape:
      * ```js
-     *   timeout={500}
+     * transitionDuration={{ enter: 300, exit: 500 }}
      * ```
-     * or individually:
-     * ```js
-     * timeout={{ enter: 300, exit: 500 }}
-     * ```
      * @default { enter: 225, exit: 195 }
      */
-    transitionDuration?: number | { appear?: number; enter?: number; exit?: number };
+    transitionDuration?: { appear?: number; enter?: number; exit?: number };
     /**
@@ -174,0 +170,0 @@ * Properties applied to Transition component (e.g. Slide, Grow, Zoom, etc.)

dist/notistack.cjs.development.js

@@ -11,7 +11,7 @@ 'use strict';
 var clsx = _interopDefault(require('clsx'));
+var Slide = _interopDefault(require('@material-ui/core/Slide'));
 var styles$2 = require('@material-ui/core/styles');
-var Snackbar = _interopDefault(require('@material-ui/core/Snackbar'));
-var Slide = _interopDefault(require('@material-ui/core/Slide'));
 var Collapse = _interopDefault(require('@material-ui/core/Collapse'));
 var SvgIcon = _interopDefault(require('@material-ui/core/SvgIcon'));
+var ClickAwayListener = _interopDefault(require('@material-ui/core/ClickAwayListener'));
 var hoistNonReactStatics = _interopDefault(require('hoist-non-react-statics'));
@@ -109,2 +109,18 @@
 };
+var DEFAULTS = {
+  maxSnack: 3,
+  dense: false,
+  hideIconVariant: false,
+  variant: 'default',
+  autoHideDuration: 5000,
+  anchorOrigin: {
+    vertical: 'bottom',
+    horizontal: 'left'
+  },
+  TransitionComponent: Slide,
+  transitionDuration: {
+    enter: 225,
+    exit: 195
+  }
+};
 var capitalise = function capitalise(text) {
@@ -131,13 +147,26 @@ return text.charAt(0).toUpperCase() + text.slice(1);
 };
+var REASONS = {
+  TIMEOUT: 'timeout',
+  CLICKAWAY: 'clickaway',
+  MAXSNACK: 'maxsnack',
+  INSTRUCTED: 'instructed'
+};
+/** Tranforms classes name */
+
+var transformer = {
+  toContainerAnchorOrigin: function toContainerAnchorOrigin(origin) {
+    return "anchorOrigin" + origin;
+  },
+  toAnchorOrigin: function toAnchorOrigin(_ref) {
+    var vertical = _ref.vertical,
+        horizontal = _ref.horizontal;
+    return "anchorOrigin" + capitalise(vertical) + capitalise(horizontal);
+  },
+  toVariant: function toVariant(variant) {
+    return "variant" + capitalise(variant);
+  }
+};
 var isDefined = function isDefined(value) {
   return !!value || value === 0;
 };
-var DEFAULTS = {
-  variant: 'default',
-  autoHideDuration: 5000,
-  anchorOrigin: {
-    vertical: 'bottom',
-    horizontal: 'left'
-  }
-};
 
@@ -160,8 +189,18 @@ var numberOrNull = function numberOrNull(numberish) {
 };
-var REASONS = {
-  CLICKAWAY: 'clickaway',
-  MAXSNACK: 'maxsnack',
-  INSTRUCTED: 'instructed'
-};
+function objectMerge(options, props, defaults) {
+  if (options === void 0) {
+    options = {};
+  }
 
+  if (props === void 0) {
+    props = {};
+  }
+
+  if (defaults === void 0) {
+    defaults = {};
+  }
+
+  return _extends({}, defaults, {}, props, {}, options);
+}
+
 var styles = function styles(theme) {
@@ -208,19 +247,2 @@ var _root;
 /**
- * Omit all class keys except those allowed in material-ui snackbar
- */
-
-var omitNonMuiKeys = function omitNonMuiKeys(classes) {
-  var snackbarMuiClasses = Object.keys(classes) // @ts-ignore
-  .filter(function (key) {
-    return allClasses.mui[key] !== undefined;
-  }).reduce(function (obj, key) {
-    var _extends2;
-
-    return _extends({}, obj, (_extends2 = {}, _extends2[key] = classes[key], _extends2));
-  }, {});
-  return _extends({}, snackbarMuiClasses, {
-    root: clsx(classes.root, classes.wrappedRoot)
-  });
-};
-/**
  * Omit all class keys except what we need for collapse component
@@ -236,2 +258,46 @@ */
 
+var CheckIcon = function CheckIcon(props) {
+  return React__default.createElement(SvgIcon, Object.assign({}, props), React__default.createElement("path", {
+    d: "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41\n        10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+  }));
+};
+
+var WarningIcon = function WarningIcon(props) {
+  return React__default.createElement(SvgIcon, Object.assign({}, props), React__default.createElement("path", {
+    d: "M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"
+  }));
+};
+
+var ErrorIcon = function ErrorIcon(props) {
+  return React__default.createElement(SvgIcon, Object.assign({}, props), React__default.createElement("path", {
+    d: "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,\n        6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,\n        13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
+  }));
+};
+
+var InfoIcon = function InfoIcon(props) {
+  return React__default.createElement(SvgIcon, Object.assign({}, props), React__default.createElement("path", {
+    d: "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,\n        0 22,12A10,10 0 0,0 12,2Z"
+  }));
+};
+
+var iconStyles = {
+  fontSize: 20,
+  marginInlineEnd: 8
+};
+var defaultIconVariants = {
+  "default": undefined,
+  success: /*#__PURE__*/React__default.createElement(CheckIcon, {
+    style: iconStyles
+  }),
+  warning: /*#__PURE__*/React__default.createElement(WarningIcon, {
+    style: iconStyles
+  }),
+  error: /*#__PURE__*/React__default.createElement(ErrorIcon, {
+    style: iconStyles
+  }),
+  info: /*#__PURE__*/React__default.createElement(InfoIcon, {
+    style: iconStyles
+  })
+};
+
 /**
@@ -268,6 +334,123 @@ * @link https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/utils/createChainedFunction.js
 
+/**
+ * @link https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/utils/useEventCallback.js
+ */
+var useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+function useEventCallback(fn) {
+  var ref = React.useRef(fn);
+  useEnhancedEffect(function () {
+    ref.current = fn;
+  });
+  return React.useCallback(function () {
+    return (ref.current).apply(void 0, arguments);
+  }, []);
+}
+
+var Snackbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+      autoHideDuration = props.autoHideDuration,
+      ClickAwayListenerProps = props.ClickAwayListenerProps,
+      _props$disableWindowB = props.disableWindowBlurListener,
+      disableWindowBlurListener = _props$disableWindowB === void 0 ? false : _props$disableWindowB,
+      onClose = props.onClose,
+      onMouseEnter = props.onMouseEnter,
+      onMouseLeave = props.onMouseLeave,
+      open = props.open,
+      resumeHideDuration = props.resumeHideDuration,
+      other = _objectWithoutPropertiesLoose(props, ["children", "autoHideDuration", "ClickAwayListenerProps", "disableWindowBlurListener", "onClose", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration"]);
+
+  var timerAutoHide = React.useRef();
+  var handleClose = useEventCallback(function () {
+    if (onClose) {
+      onClose.apply(void 0, arguments);
+    }
+  });
+  var setAutoHideTimer = useEventCallback(function (autoHideDurationParam) {
+    if (!onClose || autoHideDurationParam == null) {
+      return;
+    }
+
+    clearTimeout(timerAutoHide.current);
+    timerAutoHide.current = setTimeout(function () {
+      handleClose(null, REASONS.TIMEOUT);
+    }, autoHideDurationParam);
+  });
+  React.useEffect(function () {
+    if (open) {
+      setAutoHideTimer(autoHideDuration);
+    }
+
+    return function () {
+      clearTimeout(timerAutoHide.current);
+    };
+  }, [open, autoHideDuration, setAutoHideTimer]);
+  /**
+   * Pause the timer when the user is interacting with the Snackbar
+   * or when the user hide the window.
+   */
+
+  var handlePause = function handlePause() {
+    clearTimeout(timerAutoHide.current);
+  };
+  /**
+   * Restart the timer when the user is no longer interacting with the Snackbar
+   * or when the window is shown back.
+   */
+
+
+  var handleResume = React.useCallback(function () {
+    if (autoHideDuration != null) {
+      setAutoHideTimer(resumeHideDuration != null ? resumeHideDuration : autoHideDuration * 0.5);
+    }
+  }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
+
+  var handleMouseEnter = function handleMouseEnter(event) {
+    if (onMouseEnter) {
+      onMouseEnter(event);
+    }
+
+    handlePause();
+  };
+
+  var handleMouseLeave = function handleMouseLeave(event) {
+    if (onMouseLeave) {
+      onMouseLeave(event);
+    }
+
+    handleResume();
+  };
+
+  var handleClickAway = function handleClickAway(event) {
+    if (onClose) {
+      onClose(event, REASONS.CLICKAWAY);
+    }
+  };
+
+  React.useEffect(function () {
+    if (!disableWindowBlurListener && open) {
+      window.addEventListener('focus', handleResume);
+      window.addEventListener('blur', handlePause);
+      return function () {
+        window.removeEventListener('focus', handleResume);
+        window.removeEventListener('blur', handlePause);
+      };
+    }
+
+    return undefined;
+  }, [disableWindowBlurListener, handleResume, open]);
+  return React.createElement(ClickAwayListener, _extends({
+    onClickAway: handleClickAway
+  }, ClickAwayListenerProps), React.createElement("div", _extends({
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    ref: ref
+  }, other), children));
+});
+
 var styles$1 = function styles(theme) {
   var _collapseContainer;
 
-  var backgroundColor = styles$2.emphasize(theme.palette.background["default"], theme.palette.type === 'light' ? 0.8 : 0.98);
+  // @ts-ignore
+  var mode = theme.palette.mode || theme.palette.type;
+  var backgroundColor = styles$2.emphasize(theme.palette.background["default"], mode === 'light' ? 0.8 : 0.98);
   return styles$2.createStyles(_extends({}, allClasses.mui, {
@@ -370,10 +553,4 @@ lessPadding: {
 
-  var callbacks = ['onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'].reduce(function (acc, cbName) {
-    var _extends2;
-
-    return _extends({}, acc, (_extends2 = {}, _extends2[cbName] = createChainedFunction([props.snack[cbName], props[cbName]], props.snack.key), _extends2));
-  }, {});
-
-  var action = props.action,
-      content = props.content,
+  var style = props.style,
+      dense = props.dense,
       otherAriaAttributes = props.ariaAttributes,
@@ -384,10 +561,11 @@ otherClassName = props.className,
       snack = props.snack,
-      dense = props.dense,
-      _props$TransitionComp = props.TransitionComponent,
-      TransitionComponent = _props$TransitionComp === void 0 ? Slide : _props$TransitionComp,
-      _props$TransitionProp = props.TransitionProps,
-      otherTransitionProps = _props$TransitionProp === void 0 ? {} : _props$TransitionProp,
-      other = _objectWithoutPropertiesLoose(props, ["action", "content", "ariaAttributes", "className", "hideIconVariant", "iconVariant", "snack", "dense", "TransitionComponent", "TransitionProps"]);
+      otherAction = props.action,
+      otherContent = props.content,
+      otherTranComponent = props.TransitionComponent,
+      otherTranProps = props.TransitionProps,
+      otherTranDuration = props.transitionDuration,
+      other = _objectWithoutPropertiesLoose(props, ["style", "dense", "ariaAttributes", "className", "hideIconVariant", "iconVariant", "snack", "action", "content", "TransitionComponent", "TransitionProps", "transitionDuration", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting"]);
 
   var key = snack.key,
+      open = snack.open,
       singleClassName = snack.className,
@@ -399,31 +577,38 @@ variant = snack.variant,
       anchorOrigin = snack.anchorOrigin,
-      _snack$TransitionProp = snack.TransitionProps,
-      singleTransitionProps = _snack$TransitionProp === void 0 ? {} : _snack$TransitionProp,
-      singleSnackProps = _objectWithoutPropertiesLoose(snack, ["key", "persist", "entered", "requestClose", "className", "variant", "content", "action", "ariaAttributes", "anchorOrigin", "TransitionProps"]);
+      snackMessage = snack.message,
+      singleTranComponent = snack.TransitionComponent,
+      singleTranProps = snack.TransitionProps,
+      singleTranDuration = snack.transitionDuration,
+      singleSnackProps = _objectWithoutPropertiesLoose(snack, ["persist", "key", "open", "entered", "requestClose", "className", "variant", "content", "action", "ariaAttributes", "anchorOrigin", "message", "TransitionComponent", "TransitionProps", "transitionDuration", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting"]);
 
-  var icon = iconVariant[variant];
+  var icon = _extends({}, defaultIconVariants, {}, iconVariant)[variant];
 
   var ariaAttributes = _extends({
-    'aria-describedby': 'client-snackbar'
-  }, otherAriaAttributes, {}, singleAriaAttributes);
+    'aria-describedby': 'notistack-snackbar'
+  }, objectMerge(singleAriaAttributes, otherAriaAttributes));
 
+  var TransitionComponent = singleTranComponent || otherTranComponent || DEFAULTS.TransitionComponent;
+  var transitionDuration = objectMerge(singleTranDuration, otherTranDuration, DEFAULTS.transitionDuration);
+
   var transitionProps = _extends({
     direction: getTransitionDirection(anchorOrigin)
-  }, otherTransitionProps, {}, singleTransitionProps, {
-    onExited: handleExitedScreen
-  });
+  }, objectMerge(singleTranProps, otherTranProps));
 
-  var finalAction = singleAction || action;
+  var action = singleAction || otherAction;
 
-  if (typeof finalAction === 'function') {
-    // @ts-ignore
-    finalAction = finalAction(key);
+  if (typeof action === 'function') {
+    action = action(key);
   }
 
-  var snackContent = singleContent || content;
+  var content = singleContent || otherContent;
 
-  if (snackContent && typeof snackContent === 'function') {
-    snackContent = snackContent(key, snack.message);
+  if (typeof content === 'function') {
+    content = content(key, snack.message);
   }
 
+  var callbacks = ['onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'].reduce(function (acc, cbName) {
+    var _extends2;
+
+    return _extends({}, acc, (_extends2 = {}, _extends2[cbName] = createChainedFunction([props.snack[cbName], props[cbName]], props.snack.key), _extends2));
+  }, {});
   return React__default.createElement(Collapse, {
@@ -435,14 +620,14 @@ unmountOnExit: true,
     onExited: callbacks.onExited
-  }, React__default.createElement(Snackbar // @ts-ignore
-  , Object.assign({
-    // @ts-ignore
-    TransitionComponent: TransitionComponent
-  }, other, singleSnackProps, {
-    open: snack.open,
-    anchorOrigin: anchorOrigin,
-    TransitionProps: transitionProps,
-    classes: omitNonMuiKeys(classes),
-    onClose: handleClose,
+  }, React__default.createElement(Snackbar, Object.assign({}, other, singleSnackProps, {
+    open: open,
+    className: clsx(classes.root, classes.wrappedRoot, classes[transformer.toAnchorOrigin(anchorOrigin)]),
+    onClose: handleClose
+  }), React__default.createElement(TransitionComponent, Object.assign({
+    appear: true,
+    "in": open,
+    timeout: transitionDuration
+  }, transitionProps, {
     onExit: callbacks.onExit,
     onExiting: callbacks.onExiting,
+    onExited: handleExitedScreen,
     onEnter: callbacks.onEnter,
@@ -453,11 +638,12 @@ onEntering: callbacks.onEntering,
     onEntered: createChainedFunction([callbacks.onEntered, handleEntered])
-  }), snackContent || React__default.createElement(SnackbarContent$1, Object.assign({}, ariaAttributes, {
+  }), content || React__default.createElement(SnackbarContent$1, Object.assign({}, ariaAttributes, {
     role: "alert",
-    className: clsx(classes.contentRoot, classes["variant" + capitalise(variant)], otherClassName, singleClassName, !hideIconVariant && icon && classes.lessPadding)
+    style: style,
+    className: clsx(classes.contentRoot, classes[transformer.toVariant(variant)], otherClassName, singleClassName, !hideIconVariant && icon && classes.lessPadding)
   }), React__default.createElement("div", {
     id: ariaAttributes['aria-describedby'],
     className: classes.message
-  }, !hideIconVariant ? icon : null, snack.message), finalAction && React__default.createElement("div", {
+  }, !hideIconVariant ? icon : null, snackMessage), action && React__default.createElement("div", {
     className: classes.action
-  }, finalAction))));
+  }, action)))));
 };
@@ -557,45 +743,2 @@
 
-var CheckIcon = function CheckIcon(props) {
-  return React__default.createElement(SvgIcon, Object.assign({}, props), React__default.createElement("path", {
-    d: "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41\n        10.59L10 14.17L17.59 6.58L19 8L10 17Z"
-  }));
-};
-
-var WarningIcon = function WarningIcon(props) {
-  return React__default.createElement(SvgIcon, Object.assign({}, props), React__default.createElement("path", {
-    d: "M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"
-  }));
-};
-
-var ErrorIcon = function ErrorIcon(props) {
-  return React__default.createElement(SvgIcon, Object.assign({}, props), React__default.createElement("path", {
-    d: "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,\n        6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,\n        13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
-  }));
-};
-
-var InfoIcon = function InfoIcon(props) {
-  return React__default.createElement(SvgIcon, Object.assign({}, props), React__default.createElement("path", {
-    d: "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,\n        0 22,12A10,10 0 0,0 12,2Z"
-  }));
-};
-
-var iconStyles = {
-  fontSize: 20,
-  marginInlineEnd: 8
-};
-var defaultIconVariants = {
-  success: /*#__PURE__*/React__default.createElement(CheckIcon, {
-    style: iconStyles
-  }),
-  warning: /*#__PURE__*/React__default.createElement(WarningIcon, {
-    style: iconStyles
-  }),
-  error: /*#__PURE__*/React__default.createElement(ErrorIcon, {
-    style: iconStyles
-  }),
-  info: /*#__PURE__*/React__default.createElement(InfoIcon, {
-    style: iconStyles
-  })
-};
-
 var SnackbarProvider = /*#__PURE__*/function (_Component) {
@@ -613,8 +756,12 @@ _inheritsLoose(SnackbarProvider, _Component);
 
-    _this.enqueueSnackbar = function (message, _temp) {
-      var _ref = _temp === void 0 ? {} : _temp,
-          key = _ref.key,
-          preventDuplicate = _ref.preventDuplicate,
-          options = _objectWithoutPropertiesLoose(_ref, ["key", "preventDuplicate"]);
+    _this.enqueueSnackbar = function (message, opts) {
+      if (opts === void 0) {
+        opts = {};
+      }
 
+      var _opts = opts,
+          key = _opts.key,
+          preventDuplicate = _opts.preventDuplicate,
+          options = _objectWithoutPropertiesLoose(_opts, ["key", "preventDuplicate"]);
+
       var hasSpecifiedKey = isDefined(key);
@@ -755,4 +902,4 @@ var id = hasSpecifiedKey ? key : new Date().getTime() + Math.random();
 
-      _this.setState(function (_ref2) {
-        var snacks = _ref2.snacks;
+      _this.setState(function (_ref) {
+        var snacks = _ref.snacks;
         return {
@@ -773,2 +920,4 @@ snacks: snacks.map(function (item) {
     _this.handleCloseSnack = function (event, reason, key) {
+      // should not use createChainedFunction for onClose.
+      // because this.closeSnackbar called this function
       if (_this.props.onClose) {
@@ -781,5 +930,5 @@ _this.props.onClose(event, reason, key);
 
-      _this.setState(function (_ref3) {
-        var snacks = _ref3.snacks,
-            queue = _ref3.queue;
+      _this.setState(function (_ref2) {
+        var snacks = _ref2.snacks,
+            queue = _ref2.queue;
         return {
@@ -871,2 +1020,7 @@ snacks: snacks.map(function (item) {
     var _this$props = this.props,
+        iconVariant = _this$props.iconVariant,
+        _this$props$dense = _this$props.dense,
+        dense = _this$props$dense === void 0 ? DEFAULTS.dense : _this$props$dense,
+        _this$props$hideIconV = _this$props.hideIconVariant,
+        hideIconVariant = _this$props$hideIconV === void 0 ? DEFAULTS.hideIconVariant : _this$props$hideIconV,
         domRoot = _this$props.domRoot,
@@ -876,7 +1030,3 @@ children = _this$props.children,
         classes = _this$props$classes === void 0 ? {} : _this$props$classes,
-        _this$props$dense = _this$props.dense,
-        dense = _this$props$dense === void 0 ? false : _this$props$dense,
-        _this$props$hideIconV = _this$props.hideIconVariant,
-        hideIconVariant = _this$props$hideIconV === void 0 ? false : _this$props$hideIconV,
-        props = _objectWithoutPropertiesLoose(_this$props, ["variant", "maxSnack", "anchorOrigin", "preventDuplicate", "domRoot", "children", "classes", "dense", "hideIconVariant"]);
+        props = _objectWithoutPropertiesLoose(_this$props, ["maxSnack", "preventDuplicate", "variant", "anchorOrigin", "iconVariant", "dense", "hideIconVariant", "domRoot", "children", "classes"]);
 
@@ -890,5 +1040,2 @@ var categ = this.state.snacks.reduce(function (acc, current) {
     }, {});
-
-    var iconVariant = _extends({}, defaultIconVariants, {}, this.props.iconVariant);
-
     var snackbars = Object.keys(categ).map(function (origin) {
@@ -900,10 +1047,10 @@ var snacks = categ[origin];
         anchorOrigin: snacks[0].anchorOrigin,
-        className: clsx(classes.containerRoot, classes["containerAnchorOrigin" + origin])
+        className: clsx(classes.containerRoot, classes[transformer.toContainerAnchorOrigin(origin)])
       }, snacks.map(function (snack) {
         return React__default.createElement(SnackbarItem$1, Object.assign({}, props, {
           key: snack.key,
+          snack: snack,
           dense: dense,
-          snack: snack,
+          iconVariant: iconVariant,
           hideIconVariant: hideIconVariant,
-          iconVariant: iconVariant,
           classes: omitContainerKeys(classes),
@@ -924,3 +1071,3 @@ onClose: _this2.handleCloseSnack,
     get: function get() {
-      return this.props.maxSnack || 3;
+      return this.props.maxSnack || DEFAULTS.maxSnack;
     }
@@ -927,0 +1074,0 @@ }]);

dist/notistack.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),r=require("react-dom"),a=e(require("clsx")),o=require("@material-ui/core/styles"),i=e(require("@material-ui/core/Snackbar")),c=e(require("@material-ui/core/Slide")),s=e(require("@material-ui/core/Collapse")),u=e(require("@material-ui/core/SvgIcon")),l=e(require("hoist-non-react-statics"));function p(){return(p=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function d(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n.indexOf(t=o[r])>=0||(a[t]=e[t]);return a}var f=t.createContext(),m={root:{},anchorOriginTopCenter:{},anchorOriginBottomCenter:{},anchorOriginTopRight:{},anchorOriginBottomRight:{},anchorOriginTopLeft:{},anchorOriginBottomLeft:{}},g={containerRoot:{},containerAnchorOriginTopCenter:{},containerAnchorOriginBottomCenter:{},containerAnchorOriginTopRight:{},containerAnchorOriginBottomRight:{},containerAnchorOriginTopLeft:{},containerAnchorOriginBottomLeft:{}},h=function(e){return e.charAt(0).toUpperCase()+e.slice(1)},k=function(e){return Object.keys(e).filter((function(e){return!g[e]})).reduce((function(n,t){var r;return p({},n,((r={})[t]=e[t],r))}),{})},v=function(e){return!!e||0===e},b={variant:"default",autoHideDuration:5e3,anchorOrigin:{vertical:"bottom",horizontal:"left"}},x=function(e){return"number"==typeof e||null===e},y={CLICKAWAY:"clickaway",MAXSNACK:"maxsnack",INSTRUCTED:"instructed"},C=function(e){var n;return o.createStyles({root:(n={display:"flex",flexWrap:"wrap",flexGrow:1},n[e.breakpoints.up("sm")]={flexGrow:"initial",minWidth:288},n)})},E=n.forwardRef((function(e,n){var r=e.classes,o=e.className,i=d(e,["classes","className"]);return t.createElement("div",Object.assign({ref:n,className:a(r.root,o)},i))})),S=o.withStyles(C)(E),O={right:"left",left:"right",bottom:"up",top:"down"},D=function(e){return"center"!==e.horizontal?O[e.horizontal]:O[e.vertical]},w=function(e){var n=Object.keys(e).filter((function(e){return void 0!==m[e]})).reduce((function(n,t){var r;return p({},n,((r={})[t]=e[t],r))}),{});return p({},n,{root:a(e.root,e.wrappedRoot)})},L=function(e,n){return{container:e.collapseContainer,wrapper:a(e.collapseWrapper,n&&e.collapseWrapperDense)}};function q(e,n){return e.reduce((function(e,t){return null==t?e:function(){for(var r=arguments.length,a=new Array(r),o=0;o<r;o++)a[o]=arguments[o];var i=[].concat(a);n&&-1===i.indexOf(n)&&i.push(n),e.apply(this,i),t.apply(this,i)}}),(function(){}))}var T=function(e){var n,t=o.emphasize(e.palette.background.default,"light"===e.palette.type?.8:.98);return o.createStyles(p({},m,{lessPadding:{paddingLeft:20},variantSuccess:{backgroundColor:"#43a047 !important",color:"#fff !important"},variantError:{backgroundColor:"#d32f2f !important",color:"#fff !important"},variantInfo:{backgroundColor:"#2196f3 !important",color:"#fff !important"},variantWarning:{backgroundColor:"#ff9800 !important",color:"#fff !important"},contentRoot:p({},e.typography.body2,{backgroundColor:t,color:e.palette.getContrastText(t),alignItems:"center",padding:"6px 16px",borderRadius:"4px",boxShadow:"0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"}),message:{display:"flex",alignItems:"center",padding:"8px 0"},action:{display:"flex",alignItems:"center",marginLeft:"auto",paddingLeft:16,marginRight:-8},wrappedRoot:{position:"relative",transform:"translateX(0)",top:0,right:0,bottom:0,left:0},collapseContainer:(n={},n[e.breakpoints.down("xs")]={paddingLeft:e.spacing(1),paddingRight:e.spacing(1)},n),collapseWrapper:{transition:e.transitions.create(["margin-bottom"],{easing:"ease"}),marginTop:6,marginBottom:6},collapseWrapperDense:{marginTop:2,marginBottom:2}}))},A=function(e){var r=e.classes,o=d(e,["classes"]),u=n.useRef(),l=n.useState(!0),f=l[0],m=l[1];n.useEffect((function(){return function(){u.current&&clearTimeout(u.current)}}),[]);var g=q([o.snack.onClose,o.onClose],o.snack.key),k=["onEnter","onEntering","onEntered","onExit","onExiting","onExited"].reduce((function(e,n){var t;return p({},e,((t={})[n]=q([o.snack[n],o[n]],o.snack.key),t))}),{}),v=o.action,b=o.content,x=o.ariaAttributes,C=o.className,E=o.hideIconVariant,O=o.iconVariant,T=o.snack,A=o.dense,R=o.TransitionComponent,I=void 0===R?c:R,N=o.TransitionProps,H=void 0===N?{}:N,j=d(o,["action","content","ariaAttributes","className","hideIconVariant","iconVariant","snack","dense","TransitionComponent","TransitionProps"]),M=T.key,V=T.className,P=T.variant,z=T.content,W=T.action,B=T.ariaAttributes,X=T.anchorOrigin,_=T.TransitionProps,K=void 0===_?{}:_,U=d(T,["key","persist","entered","requestClose","className","variant","content","action","ariaAttributes","anchorOrigin","TransitionProps"]),Z=O[P],Q=p({"aria-describedby":"client-snackbar"},x,{},B),G=p({direction:D(X)},H,{},K,{onExited:function(){u.current=setTimeout((function(){m(!f)}),125)}}),Y=W||v;"function"==typeof Y&&(Y=Y(M));var F=z||b;return F&&"function"==typeof F&&(F=F(M,T.message)),t.createElement(s,{unmountOnExit:!0,timeout:175,in:f,classes:L(r,A),onExited:k.onExited},t.createElement(i,Object.assign({TransitionComponent:I},j,U,{open:T.open,anchorOrigin:X,TransitionProps:G,classes:w(r),onClose:g,onExit:k.onExit,onExiting:k.onExiting,onEnter:k.onEnter,onEntering:k.onEntering,onEntered:q([k.onEntered,function(){o.snack.requestClose&&g(null,y.INSTRCUTED)}])}),F||t.createElement(S,Object.assign({},Q,{role:"alert",className:a(r.contentRoot,r["variant"+h(P)],C,V,!E&&Z&&r.lessPadding)}),t.createElement("div",{id:Q["aria-describedby"],className:r.message},E?null:Z,T.message),Y&&t.createElement("div",{className:r.action},Y))))},R=o.withStyles(T)(A),I=o.makeStyles((function(e){var n,t;return{root:(n={boxSizing:"border-box",display:"flex",maxHeight:"100%",maxWidth:"100%",position:"fixed",flexDirection:"column",zIndex:e.zIndex.snackbar,height:"auto",width:"auto",minWidth:288,transition:e.transitions.create(["top","right","bottom","left"],{easing:"ease"})},n[e.breakpoints.down("xs")]={left:"0 !important",right:"0 !important",width:"100%"},n),reverseColumns:{flexDirection:"column-reverse"},top:{top:14},topDense:{top:2},bottom:{bottom:14},bottomDense:{bottom:2},left:{left:20},leftDense:{left:4},right:{right:20},rightDense:{right:4},center:(t={left:"50%",transform:"translateX(-50%)"},t[e.breakpoints.down("xs")]={transform:"translateX(0)"},t)}})),N=function(e){var n=I(),r=e.className,o=e.anchorOrigin,i=e.dense,c=d(e,["className","anchorOrigin","dense"]),s=a(n.root,n[o.vertical],n[o.horizontal],n[o.vertical+(i?"Dense":"")],n[o.horizontal+(i?"Dense":"")],r,"bottom"===o.vertical&&n.reverseColumns);return t.createElement("div",Object.assign({className:s},c))},H=t.memo(N),j=function(e){return t.createElement(u,Object.assign({},e),t.createElement("path",{d:"M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41\n        10.59L10 14.17L17.59 6.58L19 8L10 17Z"}))},M=function(e){return t.createElement(u,Object.assign({},e),t.createElement("path",{d:"M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"}))},V=function(e){return t.createElement(u,Object.assign({},e),t.createElement("path",{d:"M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,\n        6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,\n        13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"}))},P=function(e){return t.createElement(u,Object.assign({},e),t.createElement("path",{d:"M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,\n        0 22,12A10,10 0 0,0 12,2Z"}))},z={fontSize:20,marginInlineEnd:8},W={success:t.createElement(j,{style:z}),warning:t.createElement(M,{style:z}),error:t.createElement(V,{style:z}),info:t.createElement(P,{style:z})},B=function(e){var n,o,i;function c(n){var t;return(t=e.call(this,n)||this).enqueueSnackbar=function(e,n){var r=void 0===n?{}:n,a=r.key,o=r.preventDuplicate,i=d(r,["key","preventDuplicate"]),c=v(a),s=c?a:(new Date).getTime()+Math.random(),u=function(e,n,t){return function(r){return"autoHideDuration"===r?x(e.autoHideDuration)?e.autoHideDuration:x(n.autoHideDuration)?n.autoHideDuration:b.autoHideDuration:e[r]||n[r]||t[r]}}(i,t.props,b),l=p({key:s},i,{message:e,open:!0,entered:!1,requestClose:!1,variant:u("variant"),anchorOrigin:u("anchorOrigin"),autoHideDuration:u("autoHideDuration")});return i.persist&&(l.autoHideDuration=void 0),t.setState((function(n){if(void 0===o&&t.props.preventDuplicate||o){var r=function(n){return c?n.key===a:n.message===e},i=n.queue.findIndex(r)>-1,s=n.snacks.findIndex(r)>-1;if(i||s)return n}return t.handleDisplaySnack(p({},n,{queue:[].concat(n.queue,[l])}))})),s},t.handleDisplaySnack=function(e){return e.snacks.length>=t.maxSnack?t.handleDismissOldest(e):t.processQueue(e)},t.processQueue=function(e){var n=e.queue;return n.length>0?p({},e,{snacks:[].concat(e.snacks,[n[0]]),queue:n.slice(1,n.length)}):e},t.handleDismissOldest=function(e){if(e.snacks.some((function(e){return!e.open||e.requestClose})))return e;var n=!1,r=!1;e.snacks.reduce((function(e,n){return e+(n.open&&n.persist?1:0)}),0)===t.maxSnack&&(r=!0);var a=e.snacks.map((function(e){return n||e.persist&&!r?p({},e):(n=!0,e.entered?(e.onClose&&e.onClose(null,y.MAXSNACK,e.key),t.props.onClose&&t.props.onClose(null,y.MAXSNACK,e.key),p({},e,{open:!1})):p({},e,{requestClose:!0}))}));return p({},e,{snacks:a})},t.handleEnteredSnack=function(e,n,r){if(!v(r))throw new Error("handleEnteredSnack Cannot be called with undefined key");t.setState((function(e){return{snacks:e.snacks.map((function(e){return e.key===r?p({},e,{entered:!0}):p({},e)}))}}))},t.handleCloseSnack=function(e,n,r){if(t.props.onClose&&t.props.onClose(e,n,r),n!==y.CLICKAWAY){var a=void 0===r;t.setState((function(e){var n=e.queue;return{snacks:e.snacks.map((function(e){return a||e.key===r?p({},e,e.entered?{open:!1}:{requestClose:!0}):p({},e)})),queue:n.filter((function(e){return e.key!==r}))}}))}},t.closeSnackbar=function(e){var n=t.state.snacks.find((function(n){return n.key===e}));v(e)&&n&&n.onClose&&n.onClose(null,y.INSTRUCTED,e),t.handleCloseSnack(null,y.INSTRUCTED,e)},t.handleExitedSnack=function(e,n,r){var a=n||r;if(!v(a))throw new Error("handleExitedSnack Cannot be called with undefined key");t.setState((function(e){var n=t.processQueue(p({},e,{snacks:e.snacks.filter((function(e){return e.key!==a}))}));return 0===n.queue.length?n:t.handleDismissOldest(n)}))},t.state={snacks:[],queue:[],contextValue:{enqueueSnackbar:t.enqueueSnackbar,closeSnackbar:t.closeSnackbar}},t}return o=e,(n=c).prototype=Object.create(o.prototype),n.prototype.constructor=n,n.__proto__=o,c.prototype.render=function(){var e=this,n=this.state.contextValue,o=this.props,i=o.domRoot,c=o.children,s=o.classes,u=void 0===s?{}:s,l=o.dense,m=void 0!==l&&l,g=o.hideIconVariant,v=void 0!==g&&g,b=d(o,["variant","maxSnack","anchorOrigin","preventDuplicate","domRoot","children","classes","dense","hideIconVariant"]),x=this.state.snacks.reduce((function(e,n){var t,r,a=""+h((r=n.anchorOrigin).vertical)+h(r.horizontal);return p({},e,((t={})[a]=[].concat(e[a]||[],[n]),t))}),{}),y=p({},W,{},this.props.iconVariant),C=Object.keys(x).map((function(n){var r=x[n];return t.createElement(H,{key:n,dense:m,anchorOrigin:r[0].anchorOrigin,className:a(u.containerRoot,u["containerAnchorOrigin"+n])},r.map((function(n){return t.createElement(R,Object.assign({},b,{key:n.key,dense:m,snack:n,hideIconVariant:v,iconVariant:y,classes:k(u),onClose:e.handleCloseSnack,onExited:q([e.handleExitedSnack,e.props.onExited]),onEntered:q([e.handleEnteredSnack,e.props.onEntered])}))})))}));return t.createElement(f.Provider,{value:n},c,i?r.createPortal(C,i):C)},(i=[{key:"maxSnack",get:function(){return this.props.maxSnack||3}}])&&function(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}(c.prototype,i),c}(n.Component);exports.SnackbarContent=S,exports.SnackbarProvider=B,exports.useSnackbar=function(){return n.useContext(f)},exports.withSnackbar=function(e){var n=t.forwardRef((function(n,r){return t.createElement(f.Consumer,null,(function(a){return t.createElement(e,p({},n,{ref:r,enqueueSnackbar:a.enqueueSnackbar,closeSnackbar:a.closeSnackbar}))}))}));return l(n,e),n};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),r=require("react-dom"),o=e(require("clsx")),a=e(require("@material-ui/core/Slide")),i=require("@material-ui/core/styles"),c=e(require("@material-ui/core/Collapse")),s=e(require("@material-ui/core/SvgIcon")),u=e(require("@material-ui/core/ClickAwayListener")),l=e(require("hoist-non-react-statics"));function d(){return(d=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}function f(e,n){if(null==e)return{};var t,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n.indexOf(t=a[r])>=0||(o[t]=e[t]);return o}var p=t.createContext(),m={root:{},anchorOriginTopCenter:{},anchorOriginBottomCenter:{},anchorOriginTopRight:{},anchorOriginBottomRight:{},anchorOriginTopLeft:{},anchorOriginBottomLeft:{}},g={containerRoot:{},containerAnchorOriginTopCenter:{},containerAnchorOriginBottomCenter:{},containerAnchorOriginTopRight:{},containerAnchorOriginBottomRight:{},containerAnchorOriginTopLeft:{},containerAnchorOriginBottomLeft:{}},h={maxSnack:3,dense:!1,hideIconVariant:!1,variant:"default",autoHideDuration:5e3,anchorOrigin:{vertical:"bottom",horizontal:"left"},TransitionComponent:a,transitionDuration:{enter:225,exit:195}},k=function(e){return e.charAt(0).toUpperCase()+e.slice(1)},v=function(e){return Object.keys(e).filter((function(e){return!g[e]})).reduce((function(n,t){var r;return d({},n,((r={})[t]=e[t],r))}),{})},E={TIMEOUT:"timeout",CLICKAWAY:"clickaway",MAXSNACK:"maxsnack",INSTRUCTED:"instructed"},b=function(e){return"anchorOrigin"+e},x=function(e){var n=e.horizontal;return"anchorOrigin"+k(e.vertical)+k(n)},y=function(e){return"variant"+k(e)},C=function(e){return!!e||0===e},S=function(e){return"number"==typeof e||null===e};function O(e,n,t){return void 0===e&&(e={}),void 0===n&&(n={}),void 0===t&&(t={}),d({},t,{},n,{},e)}var w=function(e){var n;return i.createStyles({root:(n={display:"flex",flexWrap:"wrap",flexGrow:1},n[e.breakpoints.up("sm")]={flexGrow:"initial",minWidth:288},n)})},D=n.forwardRef((function(e,n){var r=e.classes,a=e.className,i=f(e,["classes","className"]);return t.createElement("div",Object.assign({ref:n,className:o(r.root,a)},i))})),L=i.withStyles(w)(D),T={right:"left",left:"right",bottom:"up",top:"down"},A=function(e){return"center"!==e.horizontal?T[e.horizontal]:T[e.vertical]},q=function(e,n){return{container:e.collapseContainer,wrapper:o(e.collapseWrapper,n&&e.collapseWrapperDense)}},I=function(e){return t.createElement(s,Object.assign({},e),t.createElement("path",{d:"M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41\n        10.59L10 14.17L17.59 6.58L19 8L10 17Z"}))},R=function(e){return t.createElement(s,Object.assign({},e),t.createElement("path",{d:"M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"}))},H=function(e){return t.createElement(s,Object.assign({},e),t.createElement("path",{d:"M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,\n        6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,\n        13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"}))},M=function(e){return t.createElement(s,Object.assign({},e),t.createElement("path",{d:"M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,\n        0 22,12A10,10 0 0,0 12,2Z"}))},N={fontSize:20,marginInlineEnd:8},j={default:void 0,success:t.createElement(I,{style:N}),warning:t.createElement(R,{style:N}),error:t.createElement(H,{style:N}),info:t.createElement(M,{style:N})};function V(e,n){return e.reduce((function(e,t){return null==t?e:function(){for(var r=arguments.length,o=new Array(r),a=0;a<r;a++)o[a]=arguments[a];var i=[].concat(o);n&&-1===i.indexOf(n)&&i.push(n),e.apply(this,i),t.apply(this,i)}}),(function(){}))}var P="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;function W(e){var t=n.useRef(e);return P((function(){t.current=e})),n.useCallback((function(){return t.current.apply(void 0,arguments)}),[])}var z=n.forwardRef((function(e,t){var r=e.children,o=e.autoHideDuration,a=e.ClickAwayListenerProps,i=e.disableWindowBlurListener,c=void 0!==i&&i,s=e.onClose,l=e.onMouseEnter,p=e.onMouseLeave,m=e.open,g=e.resumeHideDuration,h=f(e,["children","autoHideDuration","ClickAwayListenerProps","disableWindowBlurListener","onClose","onMouseEnter","onMouseLeave","open","resumeHideDuration"]),k=n.useRef(),v=W((function(){s&&s.apply(void 0,arguments)})),b=W((function(e){s&&null!=e&&(clearTimeout(k.current),k.current=setTimeout((function(){v(null,E.TIMEOUT)}),e))}));n.useEffect((function(){return m&&b(o),function(){clearTimeout(k.current)}}),[m,o,b]);var x=function(){clearTimeout(k.current)},y=n.useCallback((function(){null!=o&&b(null!=g?g:.5*o)}),[o,g,b]);return n.useEffect((function(){if(!c&&m)return window.addEventListener("focus",y),window.addEventListener("blur",x),function(){window.removeEventListener("focus",y),window.removeEventListener("blur",x)}}),[c,y,m]),n.createElement(u,d({onClickAway:function(e){s&&s(e,E.CLICKAWAY)}},a),n.createElement("div",d({onMouseEnter:function(e){l&&l(e),x()},onMouseLeave:function(e){p&&p(e),y()},ref:t},h),r))})),B=function(e){var n,t=i.emphasize(e.palette.background.default,"light"===(e.palette.mode||e.palette.type)?.8:.98);return i.createStyles(d({},m,{lessPadding:{paddingLeft:20},variantSuccess:{backgroundColor:"#43a047 !important",color:"#fff !important"},variantError:{backgroundColor:"#d32f2f !important",color:"#fff !important"},variantInfo:{backgroundColor:"#2196f3 !important",color:"#fff !important"},variantWarning:{backgroundColor:"#ff9800 !important",color:"#fff !important"},contentRoot:d({},e.typography.body2,{backgroundColor:t,color:e.palette.getContrastText(t),alignItems:"center",padding:"6px 16px",borderRadius:"4px",boxShadow:"0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)"}),message:{display:"flex",alignItems:"center",padding:"8px 0"},action:{display:"flex",alignItems:"center",marginLeft:"auto",paddingLeft:16,marginRight:-8},wrappedRoot:{position:"relative",transform:"translateX(0)",top:0,right:0,bottom:0,left:0},collapseContainer:(n={},n[e.breakpoints.down("xs")]={paddingLeft:e.spacing(1),paddingRight:e.spacing(1)},n),collapseWrapper:{transition:e.transitions.create(["margin-bottom"],{easing:"ease"}),marginTop:6,marginBottom:6},collapseWrapperDense:{marginTop:2,marginBottom:2}}))},U=function(e){var r=e.classes,a=f(e,["classes"]),i=n.useRef(),s=n.useState(!0),u=s[0],l=s[1];n.useEffect((function(){return function(){i.current&&clearTimeout(i.current)}}),[]);var p=V([a.snack.onClose,a.onClose],a.snack.key),m=a.style,g=a.dense,k=a.ariaAttributes,v=a.className,b=a.hideIconVariant,C=a.iconVariant,S=a.snack,w=a.action,D=a.content,T=a.TransitionComponent,I=a.TransitionProps,R=a.transitionDuration,H=f(a,["style","dense","ariaAttributes","className","hideIconVariant","iconVariant","snack","action","content","TransitionComponent","TransitionProps","transitionDuration","onEnter","onEntered","onEntering","onExit","onExited","onExiting"]),M=S.key,N=S.open,P=S.className,W=S.variant,B=S.content,U=S.action,K=S.ariaAttributes,X=S.anchorOrigin,_=S.message,Z=S.TransitionComponent,Q=S.TransitionProps,Y=S.transitionDuration,G=f(S,["persist","key","open","entered","requestClose","className","variant","content","action","ariaAttributes","anchorOrigin","message","TransitionComponent","TransitionProps","transitionDuration","onEnter","onEntered","onEntering","onExit","onExited","onExiting"]),F=d({},j,{},C)[W],J=d({"aria-describedby":"notistack-snackbar"},O(K,k)),$=Z||T||h.TransitionComponent,ee=O(Y,R,h.transitionDuration),ne=d({direction:A(X)},O(Q,I)),te=U||w;"function"==typeof te&&(te=te(M));var re=B||D;"function"==typeof re&&(re=re(M,S.message));var oe=["onEnter","onEntering","onEntered","onExit","onExiting","onExited"].reduce((function(e,n){var t;return d({},e,((t={})[n]=V([a.snack[n],a[n]],a.snack.key),t))}),{});return t.createElement(c,{unmountOnExit:!0,timeout:175,in:u,classes:q(r,g),onExited:oe.onExited},t.createElement(z,Object.assign({},H,G,{open:N,className:o(r.root,r.wrappedRoot,r[x(X)]),onClose:p}),t.createElement($,Object.assign({appear:!0,in:N,timeout:ee},ne,{onExit:oe.onExit,onExiting:oe.onExiting,onExited:function(){i.current=setTimeout((function(){l(!u)}),125)},onEnter:oe.onEnter,onEntering:oe.onEntering,onEntered:V([oe.onEntered,function(){a.snack.requestClose&&p(null,E.INSTRCUTED)}])}),re||t.createElement(L,Object.assign({},J,{role:"alert",style:m,className:o(r.contentRoot,r[y(W)],v,P,!b&&F&&r.lessPadding)}),t.createElement("div",{id:J["aria-describedby"],className:r.message},b?null:F,_),te&&t.createElement("div",{className:r.action},te)))))},K=i.withStyles(B)(U),X=i.makeStyles((function(e){var n,t;return{root:(n={boxSizing:"border-box",display:"flex",maxHeight:"100%",maxWidth:"100%",position:"fixed",flexDirection:"column",zIndex:e.zIndex.snackbar,height:"auto",width:"auto",minWidth:288,transition:e.transitions.create(["top","right","bottom","left"],{easing:"ease"})},n[e.breakpoints.down("xs")]={left:"0 !important",right:"0 !important",width:"100%"},n),reverseColumns:{flexDirection:"column-reverse"},top:{top:14},topDense:{top:2},bottom:{bottom:14},bottomDense:{bottom:2},left:{left:20},leftDense:{left:4},right:{right:20},rightDense:{right:4},center:(t={left:"50%",transform:"translateX(-50%)"},t[e.breakpoints.down("xs")]={transform:"translateX(0)"},t)}})),_=function(e){var n=X(),r=e.className,a=e.anchorOrigin,i=e.dense,c=f(e,["className","anchorOrigin","dense"]),s=o(n.root,n[a.vertical],n[a.horizontal],n[a.vertical+(i?"Dense":"")],n[a.horizontal+(i?"Dense":"")],r,"bottom"===a.vertical&&n.reverseColumns);return t.createElement("div",Object.assign({className:s},c))},Z=t.memo(_),Q=function(e){var n,a,i;function c(n){var t;return(t=e.call(this,n)||this).enqueueSnackbar=function(e,n){void 0===n&&(n={});var r=n.key,o=n.preventDuplicate,a=f(n,["key","preventDuplicate"]),i=C(r),c=i?r:(new Date).getTime()+Math.random(),s=function(e,n,t){return function(r){return"autoHideDuration"===r?S(e.autoHideDuration)?e.autoHideDuration:S(n.autoHideDuration)?n.autoHideDuration:h.autoHideDuration:e[r]||n[r]||t[r]}}(a,t.props,h),u=d({key:c},a,{message:e,open:!0,entered:!1,requestClose:!1,variant:s("variant"),anchorOrigin:s("anchorOrigin"),autoHideDuration:s("autoHideDuration")});return a.persist&&(u.autoHideDuration=void 0),t.setState((function(n){if(void 0===o&&t.props.preventDuplicate||o){var a=function(n){return i?n.key===r:n.message===e},c=n.queue.findIndex(a)>-1,s=n.snacks.findIndex(a)>-1;if(c||s)return n}return t.handleDisplaySnack(d({},n,{queue:[].concat(n.queue,[u])}))})),c},t.handleDisplaySnack=function(e){return e.snacks.length>=t.maxSnack?t.handleDismissOldest(e):t.processQueue(e)},t.processQueue=function(e){var n=e.queue;return n.length>0?d({},e,{snacks:[].concat(e.snacks,[n[0]]),queue:n.slice(1,n.length)}):e},t.handleDismissOldest=function(e){if(e.snacks.some((function(e){return!e.open||e.requestClose})))return e;var n=!1,r=!1;e.snacks.reduce((function(e,n){return e+(n.open&&n.persist?1:0)}),0)===t.maxSnack&&(r=!0);var o=e.snacks.map((function(e){return n||e.persist&&!r?d({},e):(n=!0,e.entered?(e.onClose&&e.onClose(null,E.MAXSNACK,e.key),t.props.onClose&&t.props.onClose(null,E.MAXSNACK,e.key),d({},e,{open:!1})):d({},e,{requestClose:!0}))}));return d({},e,{snacks:o})},t.handleEnteredSnack=function(e,n,r){if(!C(r))throw new Error("handleEnteredSnack Cannot be called with undefined key");t.setState((function(e){return{snacks:e.snacks.map((function(e){return e.key===r?d({},e,{entered:!0}):d({},e)}))}}))},t.handleCloseSnack=function(e,n,r){if(t.props.onClose&&t.props.onClose(e,n,r),n!==E.CLICKAWAY){var o=void 0===r;t.setState((function(e){var n=e.queue;return{snacks:e.snacks.map((function(e){return o||e.key===r?d({},e,e.entered?{open:!1}:{requestClose:!0}):d({},e)})),queue:n.filter((function(e){return e.key!==r}))}}))}},t.closeSnackbar=function(e){var n=t.state.snacks.find((function(n){return n.key===e}));C(e)&&n&&n.onClose&&n.onClose(null,E.INSTRUCTED,e),t.handleCloseSnack(null,E.INSTRUCTED,e)},t.handleExitedSnack=function(e,n,r){var o=n||r;if(!C(o))throw new Error("handleExitedSnack Cannot be called with undefined key");t.setState((function(e){var n=t.processQueue(d({},e,{snacks:e.snacks.filter((function(e){return e.key!==o}))}));return 0===n.queue.length?n:t.handleDismissOldest(n)}))},t.state={snacks:[],queue:[],contextValue:{enqueueSnackbar:t.enqueueSnackbar,closeSnackbar:t.closeSnackbar}},t}return a=e,(n=c).prototype=Object.create(a.prototype),n.prototype.constructor=n,n.__proto__=a,c.prototype.render=function(){var e=this,n=this.state.contextValue,a=this.props,i=a.iconVariant,c=a.dense,s=void 0===c?h.dense:c,u=a.hideIconVariant,l=void 0===u?h.hideIconVariant:u,m=a.domRoot,g=a.children,E=a.classes,x=void 0===E?{}:E,y=f(a,["maxSnack","preventDuplicate","variant","anchorOrigin","iconVariant","dense","hideIconVariant","domRoot","children","classes"]),C=this.state.snacks.reduce((function(e,n){var t,r,o=""+k((r=n.anchorOrigin).vertical)+k(r.horizontal);return d({},e,((t={})[o]=[].concat(e[o]||[],[n]),t))}),{}),S=Object.keys(C).map((function(n){var r=C[n];return t.createElement(Z,{key:n,dense:s,anchorOrigin:r[0].anchorOrigin,className:o(x.containerRoot,x[b(n)])},r.map((function(n){return t.createElement(K,Object.assign({},y,{key:n.key,snack:n,dense:s,iconVariant:i,hideIconVariant:l,classes:v(x),onClose:e.handleCloseSnack,onExited:V([e.handleExitedSnack,e.props.onExited]),onEntered:V([e.handleEnteredSnack,e.props.onEntered])}))})))}));return t.createElement(p.Provider,{value:n},g,m?r.createPortal(S,m):S)},(i=[{key:"maxSnack",get:function(){return this.props.maxSnack||h.maxSnack}}])&&function(e,n){for(var t=0;t<n.length;t++){var r=n[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}(c.prototype,i),c}(n.Component);exports.SnackbarContent=L,exports.SnackbarProvider=Q,exports.useSnackbar=function(){return n.useContext(p)},exports.withSnackbar=function(e){var n=t.forwardRef((function(n,r){return t.createElement(p.Consumer,null,(function(o){return t.createElement(e,d({},n,{ref:r,enqueueSnackbar:o.enqueueSnackbar,closeSnackbar:o.closeSnackbar}))}))}));return l(n,e),n};
 //# sourceMappingURL=notistack.cjs.production.min.js.map

dist/notistack.esm.js

@@ -1,9 +0,9 @@
-import React, { forwardRef, useRef, useState, useEffect, Component, useContext } from 'react';
+import React__default, { forwardRef, useRef, useCallback, useLayoutEffect, useEffect, createElement, useState, Component, useContext } from 'react';
 import { createPortal } from 'react-dom';
 import clsx from 'clsx';
+import Slide from '@material-ui/core/Slide';
 import { withStyles, createStyles, emphasize, makeStyles } from '@material-ui/core/styles';
-import Snackbar from '@material-ui/core/Snackbar';
-import Slide from '@material-ui/core/Slide';
 import Collapse from '@material-ui/core/Collapse';
 import SvgIcon from '@material-ui/core/SvgIcon';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import hoistNonReactStatics from 'hoist-non-react-statics';
@@ -66,3 +66,3 @@
 
-var SnackbarContext = /*#__PURE__*/React.createContext();
+var SnackbarContext = /*#__PURE__*/React__default.createContext();
 
@@ -102,2 +102,18 @@ var allClasses = {
 };
+var DEFAULTS = {
+  maxSnack: 3,
+  dense: false,
+  hideIconVariant: false,
+  variant: 'default',
+  autoHideDuration: 5000,
+  anchorOrigin: {
+    vertical: 'bottom',
+    horizontal: 'left'
+  },
+  TransitionComponent: Slide,
+  transitionDuration: {
+    enter: 225,
+    exit: 195
+  }
+};
 var capitalise = function capitalise(text) {
@@ -124,13 +140,26 @@ return text.charAt(0).toUpperCase() + text.slice(1);
 };
+var REASONS = {
+  TIMEOUT: 'timeout',
+  CLICKAWAY: 'clickaway',
+  MAXSNACK: 'maxsnack',
+  INSTRUCTED: 'instructed'
+};
+/** Tranforms classes name */
+
+var transformer = {
+  toContainerAnchorOrigin: function toContainerAnchorOrigin(origin) {
+    return "anchorOrigin" + origin;
+  },
+  toAnchorOrigin: function toAnchorOrigin(_ref) {
+    var vertical = _ref.vertical,
+        horizontal = _ref.horizontal;
+    return "anchorOrigin" + capitalise(vertical) + capitalise(horizontal);
+  },
+  toVariant: function toVariant(variant) {
+    return "variant" + capitalise(variant);
+  }
+};
 var isDefined = function isDefined(value) {
   return !!value || value === 0;
 };
-var DEFAULTS = {
-  variant: 'default',
-  autoHideDuration: 5000,
-  anchorOrigin: {
-    vertical: 'bottom',
-    horizontal: 'left'
-  }
-};
 
@@ -153,8 +182,18 @@ var numberOrNull = function numberOrNull(numberish) {
 };
-var REASONS = {
-  CLICKAWAY: 'clickaway',
-  MAXSNACK: 'maxsnack',
-  INSTRUCTED: 'instructed'
-};
+function objectMerge(options, props, defaults) {
+  if (options === void 0) {
+    options = {};
+  }
 
+  if (props === void 0) {
+    props = {};
+  }
+
+  if (defaults === void 0) {
+    defaults = {};
+  }
+
+  return _extends({}, defaults, {}, props, {}, options);
+}
+
 var styles = function styles(theme) {
@@ -180,3 +219,3 @@ var _root;
 
-  return React.createElement("div", Object.assign({
+  return React__default.createElement("div", Object.assign({
     ref: ref,
@@ -202,19 +241,2 @@ className: clsx(classes.root, className)
 /**
- * Omit all class keys except those allowed in material-ui snackbar
- */
-
-var omitNonMuiKeys = function omitNonMuiKeys(classes) {
-  var snackbarMuiClasses = Object.keys(classes) // @ts-ignore
-  .filter(function (key) {
-    return allClasses.mui[key] !== undefined;
-  }).reduce(function (obj, key) {
-    var _extends2;
-
-    return _extends({}, obj, (_extends2 = {}, _extends2[key] = classes[key], _extends2));
-  }, {});
-  return _extends({}, snackbarMuiClasses, {
-    root: clsx(classes.root, classes.wrappedRoot)
-  });
-};
-/**
  * Omit all class keys except what we need for collapse component
@@ -230,2 +252,46 @@ */
 
+var CheckIcon = function CheckIcon(props) {
+  return React__default.createElement(SvgIcon, Object.assign({}, props), React__default.createElement("path", {
+    d: "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41\n        10.59L10 14.17L17.59 6.58L19 8L10 17Z"
+  }));
+};
+
+var WarningIcon = function WarningIcon(props) {
+  return React__default.createElement(SvgIcon, Object.assign({}, props), React__default.createElement("path", {
+    d: "M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"
+  }));
+};
+
+var ErrorIcon = function ErrorIcon(props) {
+  return React__default.createElement(SvgIcon, Object.assign({}, props), React__default.createElement("path", {
+    d: "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,\n        6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,\n        13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
+  }));
+};
+
+var InfoIcon = function InfoIcon(props) {
+  return React__default.createElement(SvgIcon, Object.assign({}, props), React__default.createElement("path", {
+    d: "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,\n        0 22,12A10,10 0 0,0 12,2Z"
+  }));
+};
+
+var iconStyles = {
+  fontSize: 20,
+  marginInlineEnd: 8
+};
+var defaultIconVariants = {
+  "default": undefined,
+  success: /*#__PURE__*/React__default.createElement(CheckIcon, {
+    style: iconStyles
+  }),
+  warning: /*#__PURE__*/React__default.createElement(WarningIcon, {
+    style: iconStyles
+  }),
+  error: /*#__PURE__*/React__default.createElement(ErrorIcon, {
+    style: iconStyles
+  }),
+  info: /*#__PURE__*/React__default.createElement(InfoIcon, {
+    style: iconStyles
+  })
+};
+
 /**
@@ -262,6 +328,123 @@ * @link https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/utils/createChainedFunction.js
 
+/**
+ * @link https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/utils/useEventCallback.js
+ */
+var useEnhancedEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+function useEventCallback(fn) {
+  var ref = useRef(fn);
+  useEnhancedEffect(function () {
+    ref.current = fn;
+  });
+  return useCallback(function () {
+    return (ref.current).apply(void 0, arguments);
+  }, []);
+}
+
+var Snackbar = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      autoHideDuration = props.autoHideDuration,
+      ClickAwayListenerProps = props.ClickAwayListenerProps,
+      _props$disableWindowB = props.disableWindowBlurListener,
+      disableWindowBlurListener = _props$disableWindowB === void 0 ? false : _props$disableWindowB,
+      onClose = props.onClose,
+      onMouseEnter = props.onMouseEnter,
+      onMouseLeave = props.onMouseLeave,
+      open = props.open,
+      resumeHideDuration = props.resumeHideDuration,
+      other = _objectWithoutPropertiesLoose(props, ["children", "autoHideDuration", "ClickAwayListenerProps", "disableWindowBlurListener", "onClose", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration"]);
+
+  var timerAutoHide = useRef();
+  var handleClose = useEventCallback(function () {
+    if (onClose) {
+      onClose.apply(void 0, arguments);
+    }
+  });
+  var setAutoHideTimer = useEventCallback(function (autoHideDurationParam) {
+    if (!onClose || autoHideDurationParam == null) {
+      return;
+    }
+
+    clearTimeout(timerAutoHide.current);
+    timerAutoHide.current = setTimeout(function () {
+      handleClose(null, REASONS.TIMEOUT);
+    }, autoHideDurationParam);
+  });
+  useEffect(function () {
+    if (open) {
+      setAutoHideTimer(autoHideDuration);
+    }
+
+    return function () {
+      clearTimeout(timerAutoHide.current);
+    };
+  }, [open, autoHideDuration, setAutoHideTimer]);
+  /**
+   * Pause the timer when the user is interacting with the Snackbar
+   * or when the user hide the window.
+   */
+
+  var handlePause = function handlePause() {
+    clearTimeout(timerAutoHide.current);
+  };
+  /**
+   * Restart the timer when the user is no longer interacting with the Snackbar
+   * or when the window is shown back.
+   */
+
+
+  var handleResume = useCallback(function () {
+    if (autoHideDuration != null) {
+      setAutoHideTimer(resumeHideDuration != null ? resumeHideDuration : autoHideDuration * 0.5);
+    }
+  }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
+
+  var handleMouseEnter = function handleMouseEnter(event) {
+    if (onMouseEnter) {
+      onMouseEnter(event);
+    }
+
+    handlePause();
+  };
+
+  var handleMouseLeave = function handleMouseLeave(event) {
+    if (onMouseLeave) {
+      onMouseLeave(event);
+    }
+
+    handleResume();
+  };
+
+  var handleClickAway = function handleClickAway(event) {
+    if (onClose) {
+      onClose(event, REASONS.CLICKAWAY);
+    }
+  };
+
+  useEffect(function () {
+    if (!disableWindowBlurListener && open) {
+      window.addEventListener('focus', handleResume);
+      window.addEventListener('blur', handlePause);
+      return function () {
+        window.removeEventListener('focus', handleResume);
+        window.removeEventListener('blur', handlePause);
+      };
+    }
+
+    return undefined;
+  }, [disableWindowBlurListener, handleResume, open]);
+  return createElement(ClickAwayListener, _extends({
+    onClickAway: handleClickAway
+  }, ClickAwayListenerProps), createElement("div", _extends({
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    ref: ref
+  }, other), children));
+});
+
 var styles$1 = function styles(theme) {
   var _collapseContainer;
 
-  var backgroundColor = emphasize(theme.palette.background["default"], theme.palette.type === 'light' ? 0.8 : 0.98);
+  // @ts-ignore
+  var mode = theme.palette.mode || theme.palette.type;
+  var backgroundColor = emphasize(theme.palette.background["default"], mode === 'light' ? 0.8 : 0.98);
   return createStyles(_extends({}, allClasses.mui, {
@@ -364,10 +547,4 @@ lessPadding: {
 
-  var callbacks = ['onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'].reduce(function (acc, cbName) {
-    var _extends2;
-
-    return _extends({}, acc, (_extends2 = {}, _extends2[cbName] = createChainedFunction([props.snack[cbName], props[cbName]], props.snack.key), _extends2));
-  }, {});
-
-  var action = props.action,
-      content = props.content,
+  var style = props.style,
+      dense = props.dense,
       otherAriaAttributes = props.ariaAttributes,
@@ -378,10 +555,11 @@ otherClassName = props.className,
       snack = props.snack,
-      dense = props.dense,
-      _props$TransitionComp = props.TransitionComponent,
-      TransitionComponent = _props$TransitionComp === void 0 ? Slide : _props$TransitionComp,
-      _props$TransitionProp = props.TransitionProps,
-      otherTransitionProps = _props$TransitionProp === void 0 ? {} : _props$TransitionProp,
-      other = _objectWithoutPropertiesLoose(props, ["action", "content", "ariaAttributes", "className", "hideIconVariant", "iconVariant", "snack", "dense", "TransitionComponent", "TransitionProps"]);
+      otherAction = props.action,
+      otherContent = props.content,
+      otherTranComponent = props.TransitionComponent,
+      otherTranProps = props.TransitionProps,
+      otherTranDuration = props.transitionDuration,
+      other = _objectWithoutPropertiesLoose(props, ["style", "dense", "ariaAttributes", "className", "hideIconVariant", "iconVariant", "snack", "action", "content", "TransitionComponent", "TransitionProps", "transitionDuration", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting"]);
 
   var key = snack.key,
+      open = snack.open,
       singleClassName = snack.className,
@@ -393,32 +571,39 @@ variant = snack.variant,
       anchorOrigin = snack.anchorOrigin,
-      _snack$TransitionProp = snack.TransitionProps,
-      singleTransitionProps = _snack$TransitionProp === void 0 ? {} : _snack$TransitionProp,
-      singleSnackProps = _objectWithoutPropertiesLoose(snack, ["key", "persist", "entered", "requestClose", "className", "variant", "content", "action", "ariaAttributes", "anchorOrigin", "TransitionProps"]);
+      snackMessage = snack.message,
+      singleTranComponent = snack.TransitionComponent,
+      singleTranProps = snack.TransitionProps,
+      singleTranDuration = snack.transitionDuration,
+      singleSnackProps = _objectWithoutPropertiesLoose(snack, ["persist", "key", "open", "entered", "requestClose", "className", "variant", "content", "action", "ariaAttributes", "anchorOrigin", "message", "TransitionComponent", "TransitionProps", "transitionDuration", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting"]);
 
-  var icon = iconVariant[variant];
+  var icon = _extends({}, defaultIconVariants, {}, iconVariant)[variant];
 
   var ariaAttributes = _extends({
-    'aria-describedby': 'client-snackbar'
-  }, otherAriaAttributes, {}, singleAriaAttributes);
+    'aria-describedby': 'notistack-snackbar'
+  }, objectMerge(singleAriaAttributes, otherAriaAttributes));
 
+  var TransitionComponent = singleTranComponent || otherTranComponent || DEFAULTS.TransitionComponent;
+  var transitionDuration = objectMerge(singleTranDuration, otherTranDuration, DEFAULTS.transitionDuration);
+
   var transitionProps = _extends({
     direction: getTransitionDirection(anchorOrigin)
-  }, otherTransitionProps, {}, singleTransitionProps, {
-    onExited: handleExitedScreen
-  });
+  }, objectMerge(singleTranProps, otherTranProps));
 
-  var finalAction = singleAction || action;
+  var action = singleAction || otherAction;
 
-  if (typeof finalAction === 'function') {
-    // @ts-ignore
-    finalAction = finalAction(key);
+  if (typeof action === 'function') {
+    action = action(key);
   }
 
-  var snackContent = singleContent || content;
+  var content = singleContent || otherContent;
 
-  if (snackContent && typeof snackContent === 'function') {
-    snackContent = snackContent(key, snack.message);
+  if (typeof content === 'function') {
+    content = content(key, snack.message);
   }
 
-  return React.createElement(Collapse, {
+  var callbacks = ['onEnter', 'onEntering', 'onEntered', 'onExit', 'onExiting', 'onExited'].reduce(function (acc, cbName) {
+    var _extends2;
+
+    return _extends({}, acc, (_extends2 = {}, _extends2[cbName] = createChainedFunction([props.snack[cbName], props[cbName]], props.snack.key), _extends2));
+  }, {});
+  return React__default.createElement(Collapse, {
     unmountOnExit: true,
@@ -429,14 +614,14 @@ timeout: 175,
     onExited: callbacks.onExited
-  }, React.createElement(Snackbar // @ts-ignore
-  , Object.assign({
-    // @ts-ignore
-    TransitionComponent: TransitionComponent
-  }, other, singleSnackProps, {
-    open: snack.open,
-    anchorOrigin: anchorOrigin,
-    TransitionProps: transitionProps,
-    classes: omitNonMuiKeys(classes),
-    onClose: handleClose,
+  }, React__default.createElement(Snackbar, Object.assign({}, other, singleSnackProps, {
+    open: open,
+    className: clsx(classes.root, classes.wrappedRoot, classes[transformer.toAnchorOrigin(anchorOrigin)]),
+    onClose: handleClose
+  }), React__default.createElement(TransitionComponent, Object.assign({
+    appear: true,
+    "in": open,
+    timeout: transitionDuration
+  }, transitionProps, {
     onExit: callbacks.onExit,
     onExiting: callbacks.onExiting,
+    onExited: handleExitedScreen,
     onEnter: callbacks.onEnter,
@@ -447,11 +632,12 @@ onEntering: callbacks.onEntering,
     onEntered: createChainedFunction([callbacks.onEntered, handleEntered])
-  }), snackContent || React.createElement(SnackbarContent$1, Object.assign({}, ariaAttributes, {
+  }), content || React__default.createElement(SnackbarContent$1, Object.assign({}, ariaAttributes, {
     role: "alert",
-    className: clsx(classes.contentRoot, classes["variant" + capitalise(variant)], otherClassName, singleClassName, !hideIconVariant && icon && classes.lessPadding)
-  }), React.createElement("div", {
+    style: style,
+    className: clsx(classes.contentRoot, classes[transformer.toVariant(variant)], otherClassName, singleClassName, !hideIconVariant && icon && classes.lessPadding)
+  }), React__default.createElement("div", {
     id: ariaAttributes['aria-describedby'],
     className: classes.message
-  }, !hideIconVariant ? icon : null, snack.message), finalAction && React.createElement("div", {
+  }, !hideIconVariant ? icon : null, snackMessage), action && React__default.createElement("div", {
     className: classes.action
-  }, finalAction))));
+  }, action)))));
 };
@@ -531,3 +717,3 @@
   classes["" + anchorOrigin.horizontal + (dense ? 'Dense' : '')], className, anchorOrigin.vertical === 'bottom' && classes.reverseColumns);
-  return React.createElement("div", Object.assign({
+  return React__default.createElement("div", Object.assign({
     className: combinedClassname
@@ -537,3 +723,3 @@ }, other));
 
-var SnackbarContainer$1 = /*#__PURE__*/React.memo(SnackbarContainer);
+var SnackbarContainer$1 = /*#__PURE__*/React__default.memo(SnackbarContainer);
 
@@ -555,45 +741,2 @@ /* eslint-disable */
 
-var CheckIcon = function CheckIcon(props) {
-  return React.createElement(SvgIcon, Object.assign({}, props), React.createElement("path", {
-    d: "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41\n        10.59L10 14.17L17.59 6.58L19 8L10 17Z"
-  }));
-};
-
-var WarningIcon = function WarningIcon(props) {
-  return React.createElement(SvgIcon, Object.assign({}, props), React.createElement("path", {
-    d: "M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z"
-  }));
-};
-
-var ErrorIcon = function ErrorIcon(props) {
-  return React.createElement(SvgIcon, Object.assign({}, props), React.createElement("path", {
-    d: "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,\n        6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,\n        13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
-  }));
-};
-
-var InfoIcon = function InfoIcon(props) {
-  return React.createElement(SvgIcon, Object.assign({}, props), React.createElement("path", {
-    d: "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,\n        0 22,12A10,10 0 0,0 12,2Z"
-  }));
-};
-
-var iconStyles = {
-  fontSize: 20,
-  marginInlineEnd: 8
-};
-var defaultIconVariants = {
-  success: /*#__PURE__*/React.createElement(CheckIcon, {
-    style: iconStyles
-  }),
-  warning: /*#__PURE__*/React.createElement(WarningIcon, {
-    style: iconStyles
-  }),
-  error: /*#__PURE__*/React.createElement(ErrorIcon, {
-    style: iconStyles
-  }),
-  info: /*#__PURE__*/React.createElement(InfoIcon, {
-    style: iconStyles
-  })
-};
-
 var SnackbarProvider = /*#__PURE__*/function (_Component) {
@@ -611,8 +754,12 @@ _inheritsLoose(SnackbarProvider, _Component);
 
-    _this.enqueueSnackbar = function (message, _temp) {
-      var _ref = _temp === void 0 ? {} : _temp,
-          key = _ref.key,
-          preventDuplicate = _ref.preventDuplicate,
-          options = _objectWithoutPropertiesLoose(_ref, ["key", "preventDuplicate"]);
+    _this.enqueueSnackbar = function (message, opts) {
+      if (opts === void 0) {
+        opts = {};
+      }
 
+      var _opts = opts,
+          key = _opts.key,
+          preventDuplicate = _opts.preventDuplicate,
+          options = _objectWithoutPropertiesLoose(_opts, ["key", "preventDuplicate"]);
+
       var hasSpecifiedKey = isDefined(key);
@@ -753,4 +900,4 @@ var id = hasSpecifiedKey ? key : new Date().getTime() + Math.random();
 
-      _this.setState(function (_ref2) {
-        var snacks = _ref2.snacks;
+      _this.setState(function (_ref) {
+        var snacks = _ref.snacks;
         return {
@@ -771,2 +918,4 @@ snacks: snacks.map(function (item) {
     _this.handleCloseSnack = function (event, reason, key) {
+      // should not use createChainedFunction for onClose.
+      // because this.closeSnackbar called this function
       if (_this.props.onClose) {
@@ -779,5 +928,5 @@ _this.props.onClose(event, reason, key);
 
-      _this.setState(function (_ref3) {
-        var snacks = _ref3.snacks,
-            queue = _ref3.queue;
+      _this.setState(function (_ref2) {
+        var snacks = _ref2.snacks,
+            queue = _ref2.queue;
         return {
@@ -869,2 +1018,7 @@ snacks: snacks.map(function (item) {
     var _this$props = this.props,
+        iconVariant = _this$props.iconVariant,
+        _this$props$dense = _this$props.dense,
+        dense = _this$props$dense === void 0 ? DEFAULTS.dense : _this$props$dense,
+        _this$props$hideIconV = _this$props.hideIconVariant,
+        hideIconVariant = _this$props$hideIconV === void 0 ? DEFAULTS.hideIconVariant : _this$props$hideIconV,
         domRoot = _this$props.domRoot,
@@ -874,7 +1028,3 @@ children = _this$props.children,
         classes = _this$props$classes === void 0 ? {} : _this$props$classes,
-        _this$props$dense = _this$props.dense,
-        dense = _this$props$dense === void 0 ? false : _this$props$dense,
-        _this$props$hideIconV = _this$props.hideIconVariant,
-        hideIconVariant = _this$props$hideIconV === void 0 ? false : _this$props$hideIconV,
-        props = _objectWithoutPropertiesLoose(_this$props, ["variant", "maxSnack", "anchorOrigin", "preventDuplicate", "domRoot", "children", "classes", "dense", "hideIconVariant"]);
+        props = _objectWithoutPropertiesLoose(_this$props, ["maxSnack", "preventDuplicate", "variant", "anchorOrigin", "iconVariant", "dense", "hideIconVariant", "domRoot", "children", "classes"]);
 
@@ -888,19 +1038,16 @@ var categ = this.state.snacks.reduce(function (acc, current) {
     }, {});
-
-    var iconVariant = _extends({}, defaultIconVariants, {}, this.props.iconVariant);
-
     var snackbars = Object.keys(categ).map(function (origin) {
       var snacks = categ[origin];
-      return React.createElement(SnackbarContainer$1, {
+      return React__default.createElement(SnackbarContainer$1, {
         key: origin,
         dense: dense,
         anchorOrigin: snacks[0].anchorOrigin,
-        className: clsx(classes.containerRoot, classes["containerAnchorOrigin" + origin])
+        className: clsx(classes.containerRoot, classes[transformer.toContainerAnchorOrigin(origin)])
       }, snacks.map(function (snack) {
-        return React.createElement(SnackbarItem$1, Object.assign({}, props, {
+        return React__default.createElement(SnackbarItem$1, Object.assign({}, props, {
           key: snack.key,
+          snack: snack,
           dense: dense,
-          snack: snack,
+          iconVariant: iconVariant,
           hideIconVariant: hideIconVariant,
-          iconVariant: iconVariant,
           classes: omitContainerKeys(classes),
@@ -913,3 +1060,3 @@ onClose: _this2.handleCloseSnack,
     });
-    return React.createElement(SnackbarContext.Provider, {
+    return React__default.createElement(SnackbarContext.Provider, {
       value: contextValue
@@ -922,3 +1069,3 @@ }, children, domRoot ? createPortal(snackbars, domRoot) : snackbars);
     get: function get() {
-      return this.props.maxSnack || 3;
+      return this.props.maxSnack || DEFAULTS.maxSnack;
     }
@@ -1002,5 +1149,5 @@ }]);
 var withSnackbar = function withSnackbar(Component) {
-  var WrappedComponent = React.forwardRef(function (props, ref) {
-    return React.createElement(SnackbarContext.Consumer, null, function (context) {
-      return React.createElement(Component, _extends({}, props, {
+  var WrappedComponent = React__default.forwardRef(function (props, ref) {
+    return React__default.createElement(SnackbarContext.Consumer, null, function (context) {
+      return React__default.createElement(Component, _extends({}, props, {
         ref: ref,
@@ -1007,0 +1154,0 @@ enqueueSnackbar: context.enqueueSnackbar,

package.json

 {
     "name": "notistack",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
@@ -20,3 +20,3 @@ "main": "dist/index.js",
     "scripts": {
-        "build": "tsdx build --entry ./src/index.js",
+        "build": "tsdx build --transpileOnly --entry ./src/index.js",
         "prebuild": "npm run docs",
@@ -23,0 +23,0 @@ "prepublishOnly": "npm run build",

No alert changes

Improved metrics

Total package byte prevSize

317449

14.16%

Lines of code

2296

13.27%

No dependency changes