react-toastify - npm Package Compare versions

Comparing version 6.0.0-rc.2 to 6.0.0-rc.3

dist/components/ProgressBar.d.ts

@@ -44,4 +44,8 @@ import { CSSProperties } from 'react';
     rtl?: boolean;
+    /**
+     * Tell if the component is visible on screen or not
+     */
+    isIn?: boolean;
 }
-export declare function ProgressBar({ delay, isRunning, closeToast, type, hide, className, style: userStyle, controlledProgress, progress, rtl }: ProgressBarProps): JSX.Element;
+export declare function ProgressBar({ delay, isRunning, closeToast, type, hide, className, style: userStyle, controlledProgress, progress, rtl, isIn }: ProgressBarProps): JSX.Element;
 export declare namespace ProgressBar {
@@ -48,0 +52,0 @@ var defaultProps: {

dist/components/Toast.d.ts

 import React from 'react';
-import { WithInjectedOptions } from '../types';
-export declare const Toast: React.FC<WithInjectedOptions>;
+import { ToastProps } from '../types';
+export declare const Toast: React.FC<ToastProps>;

dist/components/Transitions.d.ts

@@ -1,5 +0,5 @@
-declare const Bounce: ({ children, position, preventExitTransition, ...props }: Partial<import("react-transition-group/Transition").TransitionProps>) => JSX.Element;
-declare const Slide: ({ children, position, preventExitTransition, ...props }: Partial<import("react-transition-group/Transition").TransitionProps>) => JSX.Element;
-declare const Zoom: ({ children, position, preventExitTransition, ...props }: Partial<import("react-transition-group/Transition").TransitionProps>) => JSX.Element;
-declare const Flip: ({ children, position, preventExitTransition, ...props }: Partial<import("react-transition-group/Transition").TransitionProps>) => JSX.Element;
+declare const Bounce: ({ children, position, preventExitTransition, done, ...props }: import("..").ToastTransitionProps) => JSX.Element;
+declare const Slide: ({ children, position, preventExitTransition, done, ...props }: import("..").ToastTransitionProps) => JSX.Element;
+declare const Zoom: ({ children, position, preventExitTransition, done, ...props }: import("..").ToastTransitionProps) => JSX.Element;
+declare const Flip: ({ children, position, preventExitTransition, done, ...props }: import("..").ToastTransitionProps) => JSX.Element;
 export { Bounce, Slide, Zoom, Flip };

dist/core/eventManager.d.ts

 /// <reference types="react" />
-import { WithInjectedOptions, Id, ToastContent, ClearWaitingQueueParams } from '../types';
+import { Id, ToastContent, ClearWaitingQueueParams, NotValidatedToastProps } from '../types';
 import { ContainerInstance } from '../hooks';
@@ -12,3 +12,3 @@ export declare const enum Event {
 }
-declare type OnShowCallback = (content: ToastContent, options: WithInjectedOptions) => void;
+declare type OnShowCallback = (content: ToastContent, options: NotValidatedToastProps) => void;
 declare type OnClearCallback = (id?: Id) => void;
@@ -32,3 +32,3 @@ declare type OnClearWaitingQueue = (params: ClearWaitingQueueParams) => void;
     cancelEmit(event: Event): EventManager;
-    emit(event: Event.Show, content: React.ReactNode, options: WithInjectedOptions): void;
+    emit(event: Event.Show, content: React.ReactNode, options: NotValidatedToastProps): void;
     emit(event: Event.Clear, id?: string | number): void;
@@ -35,0 +35,0 @@ emit(event: Event.ClearWaitingQueue, params: ClearWaitingQueueParams): void;

dist/core/toast.d.ts

 import React from 'react';
-import { OnChangeCallback } from '.';
+import { OnChangeCallback } from './eventManager';
 import { ToastContent, ToastOptions, ToastContainerProps, UpdateOptions, ClearWaitingQueueParams } from '../types';
@@ -4,0 +4,0 @@ declare const toast: {

dist/hooks/useToast.d.ts

 import { DOMAttributes } from 'react';
-import { WithInjectedOptions } from '../types';
+import { ToastProps } from '../types';
 interface Draggable {
@@ -13,3 +13,3 @@ start: number;
 }
-export declare function useToast(props: WithInjectedOptions): {
+export declare function useToast(props: ToastProps): {
     playToast: () => void;
@@ -21,3 +21,2 @@ pauseToast: () => void;
     drag: Draggable;
-    onExitTransitionEnd: () => void;
     onDragStart: (e: import("react").MouseEvent<HTMLElement, MouseEvent> | import("react").TouchEvent<HTMLElement>) => void;
@@ -24,0 +23,0 @@ onDragTransitionEnd: () => void;

dist/hooks/useToastContainer.d.ts

@@ -12,3 +12,2 @@ /// <reference types="react" />
 export declare function useToastContainer(props: ToastContainerProps): {
-    toast: Id[];
     getToastToRender: <T>(cb: (position: ToastPosition, toastList: Toast[]) => T) => T[];
@@ -18,3 +17,2 @@ collection: Record<Id, Toast>;
     isToastActive: (id: Id) => boolean;
-    removeToast: (toastId?: string | number | undefined) => void;
 };

dist/react-toastify.cjs.development.js

@@ -131,2 +131,8 @@ 'use strict';
 }
+function hasToastId(toastId) {
+  return toastId === 0 || toastId;
+}
+function getAutoCloseDelay(toastAutoClose, containerAutoClose) {
+  return toastAutoClose === false || isNum(toastAutoClose) && toastAutoClose > 0 ? toastAutoClose : containerAutoClose;
+}
 var canUseDom = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
@@ -153,4 +159,34 @@ function canBeRendered(content) {
 };
-var RT_NAMESPACE = 'Toastify';
 
+/**
+ * Used to collapse toast after exit animation
+ */
+function collapseToast(node, done, duration
+/* COLLAPSE_DURATION */
+) {
+  if (duration === void 0) {
+    duration = 300;
+  }
+
+  var height = node.scrollHeight;
+  var style = node.style;
+
+  function onCollapseEnd() {
+    node.removeEventListener('transitionend', onCollapseEnd);
+    done();
+  }
+
+  requestAnimationFrame(function () {
+    style.minHeight = 'initial';
+    style.height = height + 'px';
+    style.transition = "all " + duration + "ms";
+    requestAnimationFrame(function () {
+      style.height = '0';
+      style.padding = '0';
+      style.margin = '0';
+    });
+    node.addEventListener('transitionend', onCollapseEnd);
+  });
+}
+
 function cssTransition(_ref) {
@@ -162,25 +198,34 @@ var enter = _ref.enter,
       _ref$appendPosition = _ref.appendPosition,
-      appendPosition = _ref$appendPosition === void 0 ? false : _ref$appendPosition;
-  return function (_ref2) {
+      appendPosition = _ref$appendPosition === void 0 ? false : _ref$appendPosition,
+      _ref$collapse = _ref.collapse,
+      collapse = _ref$collapse === void 0 ? true : _ref$collapse,
+      _ref$collapseDuration = _ref.collapseDuration,
+      collapseDuration = _ref$collapseDuration === void 0 ? 300 : _ref$collapseDuration;
+  var enterDuration, exitDuration;
+
+  if (Array.isArray(duration) && duration.length === 2) {
+    enterDuration = duration[0];
+    exitDuration = duration[1];
+  } else {
+    enterDuration = exitDuration = duration;
+  }
+
+  return function ToastTransition(_ref2) {
     var children = _ref2.children,
         position = _ref2.position,
         preventExitTransition = _ref2.preventExitTransition,
-        props = _objectWithoutPropertiesLoose(_ref2, ["children", "position", "preventExitTransition"]);
+        done = _ref2.done,
+        props = _objectWithoutPropertiesLoose(_ref2, ["children", "position", "preventExitTransition", "done"]);
 
     var enterClassName = appendPosition ? enter + "--" + position : enter;
     var exitClassName = appendPosition ? exit + "--" + position : exit;
-    var enterDuration, exitDuration;
 
-    if (Array.isArray(duration) && duration.length === 2) {
-      enterDuration = duration[0];
-      exitDuration = duration[1];
-    } else {
-      enterDuration = exitDuration = duration;
-    }
-
     var onEnter = function onEnter() {
       var node = props.nodeRef.current;
-      node.classList.add(enterClassName);
-      node.style.animationFillMode = 'forwards';
-      node.style.animationDuration = enterDuration * 0.001 + "s";
+
+      if (node) {
+        node.classList.add(enterClassName);
+        node.style.animationFillMode = 'forwards';
+        node.style.animationDuration = enterDuration + "ms";
+      }
     };
@@ -190,11 +235,27 @@
       var node = props.nodeRef.current;
-      node.classList.remove(enterClassName);
-      node.style.cssText = '';
+
+      if (node) {
+        node.classList.remove(enterClassName);
+        node.style.cssText = '';
+      }
     };
 
+    var onCollapseStart = function onCollapseStart() {
+      var node = props.nodeRef.current;
+
+      if (node) {
+        collapseToast(node, done, collapseDuration);
+        node.removeEventListener('animationend', onCollapseStart);
+      }
+    };
+
     var onExit = function onExit() {
       var node = props.nodeRef.current;
-      node.classList.add(exitClassName);
-      node.style.animationFillMode = 'forwards';
-      node.style.animationDuration = exitDuration * 0.001 + "s";
+
+      if (node) {
+        node.classList.add(exitClassName);
+        node.style.animationFillMode = 'forwards';
+        node.style.animationDuration = exitDuration + "ms";
+        collapse ? node.addEventListener('animationend', onCollapseStart) : done();
+      }
     };
@@ -205,7 +266,8 @@
         enter: enterDuration,
-        exit: exitDuration
+        exit: collapse ? exitDuration + collapseDuration : exitDuration
       },
       onEnter: onEnter,
       onEntered: onEntered,
-      onExit: preventExitTransition ? undefined : onExit
+      onExit: preventExitTransition ? done : onExit,
+      unmountOnExit: true
     }), children);
@@ -220,3 +282,7 @@ };
   return React__default.createElement("button", {
-    className: RT_NAMESPACE + "__close-button " + RT_NAMESPACE + "__close-button--" + type,
+    className: "Toastify"
+    /* CSS_NAMESPACE */
+    + "__close-button " + "Toastify"
+    /* CSS_NAMESPACE */
+    + "__close-button--" + type,
     type: "button",
@@ -252,3 +318,4 @@ onClick: function onClick(e) {
       progress = _ref.progress,
-      rtl = _ref.rtl;
+      rtl = _ref.rtl,
+      isIn = _ref.isIn;
 
@@ -262,7 +329,19 @@ var style = _extends({}, userStyle, {
   if (controlledProgress) style.transform = "scaleX(" + progress + ")";
-  var classNames = cx(RT_NAMESPACE + "__progress-bar", controlledProgress ? RT_NAMESPACE + "__progress-bar--controlled" : RT_NAMESPACE + "__progress-bar--animated", RT_NAMESPACE + "__progress-bar--" + type, (_cx = {}, _cx[RT_NAMESPACE + "__progress-bar--rtl"] = rtl, _cx), className); // 🧐 controlledProgress is derived from progress
+  var classNames = cx("Toastify"
+  /* CSS_NAMESPACE */
+  + "__progress-bar", controlledProgress ? "Toastify"
+  /* CSS_NAMESPACE */
+  + "__progress-bar--controlled" : "Toastify"
+  /* CSS_NAMESPACE */
+  + "__progress-bar--animated", "Toastify"
+  /* CSS_NAMESPACE */
+  + "__progress-bar--" + type, (_cx = {}, _cx["Toastify"
+  /* CSS_NAMESPACE */
+  + "__progress-bar--rtl"] = rtl, _cx), className); // 🧐 controlledProgress is derived from progress
   // so if controlledProgress is set
   // it means that this is also the case for progress
 
-  var animationEvent = (_animationEvent = {}, _animationEvent[controlledProgress && progress >= 1 ? 'onTransitionEnd' : 'onAnimationEnd'] = controlledProgress && progress < 1 ? null : closeToast, _animationEvent);
+  var animationEvent = (_animationEvent = {}, _animationEvent[controlledProgress && progress >= 1 ? 'onTransitionEnd' : 'onAnimationEnd'] = controlledProgress && progress < 1 ? null : function () {
+    isIn && closeToast();
+  }, _animationEvent);
   return React__default.createElement("div", Object.assign({
@@ -285,3 +364,2 @@ className: classNames,
       toastRef = _useToast.toastRef,
-      onExitTransitionEnd = _useToast.onExitTransitionEnd,
       eventHandlers = _useToast.eventHandlers;
@@ -296,3 +374,3 @@
       closeToast = props.closeToast,
-      transition = props.transition,
+      Transition = props.transition,
       position = props.position,
@@ -309,6 +387,12 @@ className = props.className,
       rtl = props.rtl,
-      toastId = props.toastId;
-  var cssClasses = cx(RT_NAMESPACE + "__toast", RT_NAMESPACE + "__toast--" + type, (_cx = {}, _cx[RT_NAMESPACE + "__toast--rtl"] = rtl, _cx), className);
+      toastId = props.toastId,
+      deleteToast = props.deleteToast;
+  var cssClasses = cx("Toastify"
+  /* CSS_NAMESPACE */
+  + "__toast", "Toastify"
+  /* CSS_NAMESPACE */
+  + "__toast--" + type, (_cx = {}, _cx["Toastify"
+  /* CSS_NAMESPACE */
+  + "__toast--rtl"] = rtl, _cx), className);
   var controlledProgress = !!progress;
-  var Transition = transition;
 
@@ -328,3 +412,3 @@ function renderCloseButton(closeButton) {
     appear: true,
-    onExited: onExitTransitionEnd,
+    done: deleteToast,
     position: position,
@@ -343,3 +427,5 @@ preventExitTransition: preventExitTransition,
   }, {
-    className: cx(RT_NAMESPACE + "__toast-body", bodyClassName),
+    className: cx("Toastify"
+    /* CSS_NAMESPACE */
+    + "__toast-body", bodyClassName),
     style: bodyStyle
@@ -352,2 +438,3 @@ }), children), renderCloseButton(closeButton), (autoClose || controlledProgress) && React__default.createElement(ProgressBar, Object.assign({}, updateId && !controlledProgress ? {
     isRunning: isRunning,
+    isIn: props["in"],
     closeToast: closeToast,
@@ -366,4 +453,8 @@ hide: hideProgressBar,
 cssTransition({
-  enter: RT_NAMESPACE + "__bounce-enter",
-  exit: RT_NAMESPACE + "__bounce-exit",
+  enter: "Toastify"
+  /* CSS_NAMESPACE */
+  + "__bounce-enter",
+  exit: "Toastify"
+  /* CSS_NAMESPACE */
+  + "__bounce-exit",
   appendPosition: true
@@ -374,4 +465,8 @@ });
 cssTransition({
-  enter: RT_NAMESPACE + "__slide-enter",
-  exit: RT_NAMESPACE + "__slide-exit",
+  enter: "Toastify"
+  /* CSS_NAMESPACE */
+  + "__slide-enter",
+  exit: "Toastify"
+  /* CSS_NAMESPACE */
+  + "__slide-exit",
   duration: [450, 750],
@@ -383,4 +478,8 @@ appendPosition: true
 cssTransition({
-  enter: RT_NAMESPACE + "__zoom-enter",
-  exit: RT_NAMESPACE + "__zoom-exit"
+  enter: "Toastify"
+  /* CSS_NAMESPACE */
+  + "__zoom-enter",
+  exit: "Toastify"
+  /* CSS_NAMESPACE */
+  + "__zoom-exit"
 });
@@ -390,10 +489,32 @@ var Flip =
 cssTransition({
-  enter: RT_NAMESPACE + "__flip-enter",
-  exit: RT_NAMESPACE + "__flip-exit"
+  enter: "Toastify"
+  /* CSS_NAMESPACE */
+  + "__flip-enter",
+  exit: "Toastify"
+  /* CSS_NAMESPACE */
+  + "__flip-exit"
 });
 
+var ToastPositioner = function ToastPositioner(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      style = _ref.style,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "style"]);
+
+  // Monkey patch react-transition-group
+  // As exit transition is broken with strict mode
+  delete rest["in"];
+  return React__default.createElement("div", {
+    className: className,
+    style: style
+  }, React__default.Children.map(children, function (child) {
+    return React__default.cloneElement(child, rest);
+  }));
+};
+
 var ToastContainer = function ToastContainer(props) {
   var _useToastContainer = useToastContainer(props),
       getToastToRender = _useToastContainer.getToastToRender,
-      containerRef = _useToastContainer.containerRef;
+      containerRef = _useToastContainer.containerRef,
+      isToastActive = _useToastContainer.isToastActive;
 
@@ -406,4 +527,8 @@ var className = props.className,
     ref: containerRef,
-    className: RT_NAMESPACE,
+    className: "Toastify"
+    /* CSS_NAMESPACE */
+    ,
     id: containerId
+  }, React__default.createElement(reactTransitionGroup.TransitionGroup, {
+    component: null
   }, getToastToRender(function (position, toastList) {
@@ -413,3 +538,9 @@ var _cx;
     var swag = {
-      className: cx(RT_NAMESPACE + "__toast-container", RT_NAMESPACE + "__toast-container--" + position, (_cx = {}, _cx[RT_NAMESPACE + "__toast-container--rtl"] = rtl, _cx), parseClassName(className)),
+      className: cx("Toastify"
+      /* CSS_NAMESPACE */
+      + "__toast-container", "Toastify"
+      /* CSS_NAMESPACE */
+      + "__toast-container--" + position, (_cx = {}, _cx["Toastify"
+      /* CSS_NAMESPACE */
+      + "__toast-container--rtl"] = rtl, _cx), parseClassName(className)),
       style: toastList.length === 0 ? _extends({}, style, {
@@ -419,52 +550,57 @@ pointerEvents: 'none'
     };
-    return React__default.createElement(reactTransitionGroup.TransitionGroup, Object.assign({}, swag, {
+    return React__default.createElement(ToastPositioner, Object.assign({}, swag, {
       key: "container-" + position
     }), toastList.map(function (_ref) {
       var content = _ref.content,
-          options = _ref.options;
-      return React__default.createElement(Toast, Object.assign({}, options, {
-        key: "toast-" + options.key,
-        closeButton: options.closeButton === true ? CloseButton : options.closeButton
+          toastProps = _ref.props;
+      return React__default.createElement(Toast, Object.assign({}, toastProps, {
+        "in": isToastActive(toastProps.toastId),
+        key: "toast-" + toastProps.key,
+        closeButton: toastProps.closeButton === true ? CloseButton : toastProps.closeButton
       }), content);
     }));
-  }));
-}; // @ts-ignore
+  })));
+};
 
-ToastContainer.propTypes = {
+{
   // @ts-ignore
-  position:
-  /*#__PURE__*/
-  PropTypes.oneOf(
-  /*#__PURE__*/
-  objectValues(POSITION)),
-  // @ts-ignore
-  autoClose:
-  /*#__PURE__*/
-  PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
-  // @ts-ignore
-  closeButton:
-  /*#__PURE__*/
-  PropTypes.oneOfType([PropTypes.node, PropTypes.bool, PropTypes.func]),
-  hideProgressBar: PropTypes.bool,
-  pauseOnHover: PropTypes.bool,
-  closeOnClick: PropTypes.bool,
-  newestOnTop: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  toastClassName: PropTypes.string,
-  bodyClassName: PropTypes.string,
-  progressClassName: PropTypes.string,
-  progressStyle: PropTypes.object,
-  transition: PropTypes.func,
-  rtl: PropTypes.bool,
-  draggable: PropTypes.bool,
-  draggablePercent: PropTypes.number,
-  pauseOnFocusLoss: PropTypes.bool,
-  enableMultiContainer: PropTypes.bool,
-  containerId:
-  /*#__PURE__*/
-  PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  role: PropTypes.string,
-  onClick: PropTypes.func
-};
+  ToastContainer.propTypes = {
+    // @ts-ignore
+    position:
+    /*#__PURE__*/
+    PropTypes.oneOf(
+    /*#__PURE__*/
+    objectValues(POSITION)),
+    // @ts-ignore
+    autoClose:
+    /*#__PURE__*/
+    PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+    // @ts-ignore
+    closeButton:
+    /*#__PURE__*/
+    PropTypes.oneOfType([PropTypes.node, PropTypes.bool, PropTypes.func]),
+    hideProgressBar: PropTypes.bool,
+    pauseOnHover: PropTypes.bool,
+    closeOnClick: PropTypes.bool,
+    newestOnTop: PropTypes.bool,
+    className: PropTypes.string,
+    style: PropTypes.object,
+    toastClassName: PropTypes.string,
+    bodyClassName: PropTypes.string,
+    progressClassName: PropTypes.string,
+    progressStyle: PropTypes.object,
+    transition: PropTypes.func,
+    rtl: PropTypes.bool,
+    draggable: PropTypes.bool,
+    draggablePercent: PropTypes.number,
+    pauseOnFocusLoss: PropTypes.bool,
+    enableMultiContainer: PropTypes.bool,
+    containerId:
+    /*#__PURE__*/
+    PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    role: PropTypes.string,
+    onClick: PropTypes.func
+  };
+}
+
 ToastContainer.defaultProps = {
@@ -658,3 +794,3 @@ position: POSITION.TOP_RIGHT,
     if (toast) {
-      var oldOptions = toast.options,
+      var oldOptions = toast.props,
           oldContent = toast.content;
@@ -774,6 +910,2 @@
 
-function hasToastId(toastId) {
-  return toastId === 0 || toastId;
-}
-
 function reducer(state, action) {
@@ -890,3 +1022,3 @@ switch (action.type) {
         toastContent = _queue$shift.toastContent,
-        toastOptions = _queue$shift.toastOptions,
+        toastProps = _queue$shift.toastProps,
         staleId = _queue$shift.staleId; // ensure that exit transition has been completed, hence the timeout
@@ -896,3 +1028,3 @@
     setTimeout(function () {
-      appendToast(toastContent, toastOptions, staleId);
+      appendToast(toastContent, toastProps, staleId);
     }, 500);
@@ -912,6 +1044,2 @@ }
     return !containerRef.current || instance.props.enableMultiContainer && containerId !== instance.props.containerId || instance.isToastActive(toastId) && updateId == null ? true : false;
-  }
-
-  function getAutoCloseDelay(toastAutoClose) {
-    return toastAutoClose === false || isNum(toastAutoClose) && toastAutoClose > 0 ? toastAutoClose : instance.props.autoClose;
   } // this function and all the function called inside needs to rely on ref(`useKeeper`)
@@ -935,3 +1063,5 @@
 
-    var toastOptions = {
+    var isNotAnUpdate = !isToastActive(toastId);
+    if (isNotAnUpdate) toastCount++;
+    var toastProps = {
       toastId: toastId,
@@ -958,9 +1088,12 @@ updateId: updateId,
       progressStyle: options.progressStyle || props.progressStyle,
-      autoClose: getAutoCloseDelay(options.autoClose),
+      autoClose: getAutoCloseDelay(options.autoClose, props.autoClose),
       hideProgressBar: isBool(options.hideProgressBar) ? options.hideProgressBar : props.hideProgressBar,
       progress: options.progress,
-      role: isStr(options.role) ? options.role : props.role
+      role: isStr(options.role) ? options.role : props.role,
+      deleteToast: function deleteToast() {
+        removeFromCollection(toastId);
+      }
     };
-    if (isFn(options.onOpen)) toastOptions.onOpen = options.onOpen;
-    if (isFn(options.onClose)) toastOptions.onClose = options.onClose;
+    if (isFn(options.onOpen)) toastProps.onOpen = options.onOpen;
+    if (isFn(options.onClose)) toastProps.onClose = options.onClose;
     var closeButton = props.closeButton;
@@ -974,3 +1107,3 @@
 
-    toastOptions.closeButton = closeButton;
+    toastProps.closeButton = closeButton;
     var toastContent = content;
@@ -986,6 +1119,4 @@
       });
-    }
+    } // not handling limit + delay by design. Waiting for user feedback first
 
-    var isNotAnUpdate = !isToastActive(toastId);
-    if (isNotAnUpdate) toastCount++; // not handling limit + delay by design. Waiting for user feedback first
 
@@ -995,3 +1126,3 @@ if (props.limit && props.limit > 0 && toastCount > props.limit && isNotAnUpdate) {
         toastContent: toastContent,
-        toastOptions: toastOptions,
+        toastProps: toastProps,
         staleId: staleId
@@ -1001,14 +1132,14 @@ });
       setTimeout(function () {
-        appendToast(toastContent, toastOptions, staleId);
+        appendToast(toastContent, toastProps, staleId);
       }, delay);
     } else {
-      appendToast(toastContent, toastOptions, staleId);
+      appendToast(toastContent, toastProps, staleId);
     }
   }
 
-  function appendToast(content, options, staleId) {
-    var toastId = options.toastId;
+  function appendToast(content, toastProps, staleId) {
+    var toastId = toastProps.toastId;
     collection[toastId] = {
       content: content,
-      options: options
+      props: toastProps
     };
@@ -1022,2 +1153,6 @@ dispatch({
 
+  function removeFromCollection(toastId) {
+    delete collection[toastId];
+  }
+
   function getToastToRender(cb) {
@@ -1029,7 +1164,5 @@ var toastToRender = {};
       var _toast = collection[toastList[i]];
-      var _toast$options = _toast.options,
-          position = _toast$options.position,
-          toastId = _toast$options.toastId;
+      var position = _toast.props.position;
       toastToRender[position] || (toastToRender[position] = []);
-      isToastActive(toastId) ? toastToRender[position].push(_toast) : delete collection[toastId];
+      toastToRender[position].push(_toast);
     }
@@ -1043,8 +1176,6 @@
   return {
-    toast: toast,
     getToastToRender: getToastToRender,
     collection: collection,
     containerRef: containerRef,
-    isToastActive: isToastActive,
-    removeToast: removeToast
+    isToastActive: isToastActive
   };
@@ -1061,5 +1192,2 @@ }
 
-var iLoveInternetExplorer = canUseDom &&
-/*#__PURE__*/
-/(msie|trident)/i.test(navigator.userAgent);
 function useToast(props) {
@@ -1199,29 +1327,2 @@ var _useState = React.useState(true),
     }
-  } // Maybe let the end user tweak it later on
-  // hmmm no comment about ie. I hope this browser die one day
-  // don't want to fix the issue on this browser, my head is hurting too much
-
-
-  function onExitTransitionEnd() {
-    if (iLoveInternetExplorer) {
-      props.onExited();
-      return;
-    }
-
-    var toast = toastRef.current;
-    var height = toast.scrollHeight;
-    var style = toast.style;
-    requestAnimationFrame(function () {
-      style.minHeight = 'initial';
-      style.height = height + 'px';
-      style.transition = 'all 0.4s ';
-      requestAnimationFrame(function () {
-        style.height = '0';
-        style.padding = '0';
-        style.margin = '0';
-      });
-      setTimeout(function () {
-        return props.onExited();
-      }, 400);
-    });
   }
@@ -1256,3 +1357,2 @@
     drag: drag,
-    onExitTransitionEnd: onExitTransitionEnd,
     onDragStart: onDragStart,
@@ -1259,0 +1359,0 @@ onDragTransitionEnd: onDragTransitionEnd,

dist/react-toastify.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),n=t(e),o=require("react-dom"),r=require("react-transition-group"),s=t(require("classnames")),i=t(require("prop-types"));function a(){return(a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t}).apply(this,arguments)}function u(t,e){if(null==t)return{};var n,o,r={},s=Object.keys(t);for(o=0;o<s.length;o++)e.indexOf(n=s[o])>=0||(r[n]=t[n]);return r}var c={list:new Map,emitQueue:new Map,on:function(t,e){return this.list.has(t)||this.list.set(t,[]),this.list.get(t).push(e),this},off:function(t,e){if(e){var n=this.list.get(t).filter((function(t){return t!==e}));return this.list.set(t,n),this}return this.list.delete(t),this},cancelEmit:function(t){var e=this.emitQueue.get(t);return e&&(e.forEach((function(t){return clearTimeout(t)})),this.emitQueue.delete(t)),this},emit:function(t){for(var e=this,n=arguments.length,o=new Array(n>1?n-1:0),r=1;r<n;r++)o[r-1]=arguments[r];this.list.has(t)&&this.list.get(t).forEach((function(n){var r=setTimeout((function(){n.apply(void 0,o)}),0);e.emitQueue.has(t)||e.emitQueue.set(t,[]),e.emitQueue.get(t).push(r)}))}};function l(t){return"number"==typeof t&&!isNaN(t)}function d(t){return"boolean"==typeof t}function f(t){return"string"==typeof t}function p(t){return"function"==typeof t}function g(t){return"string"==typeof t?t:null}function m(t){return Object.keys(t).map((function(e){return t[e]}))}var v=!("undefined"==typeof window||!window.document||!window.document.createElement);function y(t){return e.isValidElement(t)||f(t)||p(t)||l(t)}var T={TOP_LEFT:"top-left",TOP_RIGHT:"top-right",TOP_CENTER:"top-center",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right",BOTTOM_CENTER:"bottom-center"},b={INFO:"info",SUCCESS:"success",WARNING:"warning",ERROR:"error",DEFAULT:"default",DARK:"dark"};function h(t){var e=t.enter,o=t.exit,s=t.duration,i=void 0===s?750:s,a=t.appendPosition,c=void 0!==a&&a;return function(t){var s,a,l=t.children,d=t.position,f=t.preventExitTransition,p=u(t,["children","position","preventExitTransition"]),g=c?e+"--"+d:e,m=c?o+"--"+d:o;return Array.isArray(i)&&2===i.length?(s=i[0],a=i[1]):s=a=i,n.createElement(r.Transition,Object.assign({},p,{timeout:f?0:{enter:s,exit:a},onEnter:function(){var t=p.nodeRef.current;t.classList.add(g),t.style.animationFillMode="forwards",t.style.animationDuration=.001*s+"s"},onEntered:function(){var t=p.nodeRef.current;t.classList.remove(g),t.style.cssText=""},onExit:f?void 0:function(){var t=p.nodeRef.current;t.classList.add(m),t.style.animationFillMode="forwards",t.style.animationDuration=.001*a+"s"}}),l)}}function E(t){var e=t.closeToast;return n.createElement("button",{className:"Toastify__close-button Toastify__close-button--"+t.type,type:"button",onClick:function(t){t.stopPropagation(),e(t)},"aria-label":t.ariaLabel},n.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},n.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"})))}function O(t){var e,o,r=t.closeToast,i=t.type,u=t.className,c=t.controlledProgress,l=t.progress,d=t.rtl,f=a({},t.style,{animationDuration:t.delay+"ms",animationPlayState:t.isRunning?"running":"paused",opacity:t.hide?0:1});c&&(f.transform="scaleX("+l+")");var p=s("Toastify__progress-bar",c?"Toastify__progress-bar--controlled":"Toastify__progress-bar--animated","Toastify__progress-bar--"+i,((e={})["Toastify__progress-bar--rtl"]=d,e),u),g=((o={})[c&&l>=1?"onTransitionEnd":"onAnimationEnd"]=c&&l<1?null:r,o);return n.createElement("div",Object.assign({className:p,style:f},g))}E.defaultProps={ariaLabel:"close"},O.defaultProps={type:b.DEFAULT,hide:!1};var C=function(t){var o,r=function(t){var n=e.useState(!0),o=n[0],r=n[1],s=e.useState(!1),i=s[0],a=s[1],u=e.useRef(null),c=X({start:0,x:0,y:0,deltaX:0,removalDistance:0,canCloseOnClick:!0,canDrag:!1,boundingRect:null}),l=X(t,!0),d=t.autoClose,f=t.pauseOnHover,g=t.closeToast,m=t.onClick,v=t.closeOnClick;function y(e){var n=u.current;c.canCloseOnClick=!0,c.canDrag=!0,c.boundingRect=n.getBoundingClientRect(),n.style.transition="",c.start=c.x=G(e.nativeEvent),c.removalDistance=n.offsetWidth*(t.draggablePercent/100)}function T(){if(c.boundingRect){var e=c.boundingRect;t.pauseOnHover&&c.x>=e.left&&c.x<=e.right&&c.y>=e.top&&c.y<=e.bottom?h():b()}}function b(){r(!0)}function h(){r(!1)}function E(t){var e=u.current;c.canDrag&&(o&&h(),c.x=G(t),c.deltaX=c.x-c.start,c.y=function(t){return t.targetTouches&&t.targetTouches.length>=1?t.targetTouches[0].clientY:t.clientY}(t),c.start!==c.x&&(c.canCloseOnClick=!1),e.style.transform="translateX("+c.deltaX+"px)",e.style.opacity=""+(1-Math.abs(c.deltaX/c.removalDistance)))}function O(){var e=u.current;if(c.canDrag){if(c.canDrag=!1,Math.abs(c.deltaX)>c.removalDistance)return a(!0),void t.closeToast();e.style.transition="transform 0.2s, opacity 0.2s",e.style.transform="translateX(0)",e.style.opacity="1"}}e.useEffect((function(){return p(t.onOpen)&&t.onOpen(e.isValidElement(t.children)&&t.children.props),function(){p(l.onClose)&&l.onClose(e.isValidElement(l.children)&&l.children.props)}}),[]),e.useEffect((function(){return t.draggable&&(document.addEventListener("mousemove",E),document.addEventListener("mouseup",O),document.addEventListener("touchmove",E),document.addEventListener("touchend",O)),function(){t.draggable&&(document.removeEventListener("mousemove",E),document.removeEventListener("mouseup",O),document.removeEventListener("touchmove",E),document.removeEventListener("touchend",O))}}),[t.draggable]),e.useEffect((function(){return t.pauseOnFocusLoss&&(window.addEventListener("focus",b),window.addEventListener("blur",h)),function(){t.pauseOnFocusLoss&&(window.removeEventListener("focus",b),window.removeEventListener("blur",h))}}),[t.pauseOnFocusLoss]);var C={onMouseDown:y,onTouchStart:y,onMouseUp:T,onTouchEnd:T};return d&&f&&(C.onMouseEnter=h,C.onMouseLeave=b),v&&(C.onClick=function(t){m&&m(t),c.canCloseOnClick&&g()}),{playToast:b,pauseToast:h,isRunning:o,preventExitTransition:i,toastRef:u,drag:c,onExitTransitionEnd:function(){if(U)t.onExited();else{var e=u.current,n=e.scrollHeight,o=e.style;requestAnimationFrame((function(){o.minHeight="initial",o.height=n+"px",o.transition="all 0.4s ",requestAnimationFrame((function(){o.height="0",o.padding="0",o.margin="0"})),setTimeout((function(){return t.onExited()}),400)}))}},onDragStart:y,onDragTransitionEnd:T,eventHandlers:C}}(t),i=r.isRunning,a=r.preventExitTransition,u=r.toastRef,c=r.onExitTransitionEnd,l=r.eventHandlers,d=t.closeButton,f=t.children,g=t.autoClose,m=t.onClick,v=t.type,y=t.hideProgressBar,T=t.closeToast,b=t.transition,h=t.position,E=t.className,C=t.style,I=t.bodyClassName,_=t.bodyStyle,x=t.progressClassName,R=t.progressStyle,N=t.updateId,L=t.role,k=t.progress,w=t.rtl,P=t.toastId,B=s("Toastify__toast","Toastify__toast--"+v,((o={})["Toastify__toast--rtl"]=w,o),E),D=!!k;return n.createElement(b,{in:t.in,appear:!0,onExited:c,position:h,preventExitTransition:a,nodeRef:u},n.createElement("div",Object.assign({id:P,onClick:m,className:B},l,{style:C,ref:u}),n.createElement("div",Object.assign({},t.in&&{role:L},{className:s("Toastify__toast-body",I),style:_}),f),function(t){if(!t)return null;var n={closeToast:T,type:v};return p(t)?t(n):e.isValidElement(t)?e.cloneElement(t,n):void 0}(d),(g||D)&&n.createElement(O,Object.assign({},N&&!D?{key:"pb-"+N}:{},{rtl:w,delay:g,isRunning:i,closeToast:T,hide:y,type:v,style:R,className:x,controlledProgress:D,progress:k}))))},I=h({enter:"Toastify__bounce-enter",exit:"Toastify__bounce-exit",appendPosition:!0}),_=h({enter:"Toastify__slide-enter",exit:"Toastify__slide-exit",duration:[450,750],appendPosition:!0}),x=h({enter:"Toastify__zoom-enter",exit:"Toastify__zoom-exit"}),R=h({enter:"Toastify__flip-enter",exit:"Toastify__flip-exit"}),N=function(t){var e=V(t),o=t.className,i=t.style,u=t.rtl;return n.createElement("div",{ref:e.containerRef,className:"Toastify",id:t.containerId},(0,e.getToastToRender)((function(t,e){var c,l={className:s("Toastify__toast-container","Toastify__toast-container--"+t,(c={},c["Toastify__toast-container--rtl"]=u,c),g(o)),style:0===e.length?a({},i,{pointerEvents:"none"}):a({},i)};return n.createElement(r.TransitionGroup,Object.assign({},l,{key:"container-"+t}),e.map((function(t){var e=t.content,o=t.options;return n.createElement(C,Object.assign({},o,{key:"toast-"+o.key,closeButton:!0===o.closeButton?E:o.closeButton}),e)})))})))};N.propTypes={position:i.oneOf(m(T)),autoClose:i.oneOfType([i.bool,i.number]),closeButton:i.oneOfType([i.node,i.bool,i.func]),hideProgressBar:i.bool,pauseOnHover:i.bool,closeOnClick:i.bool,newestOnTop:i.bool,className:i.string,style:i.object,toastClassName:i.string,bodyClassName:i.string,progressClassName:i.string,progressStyle:i.object,transition:i.func,rtl:i.bool,draggable:i.bool,draggablePercent:i.number,pauseOnFocusLoss:i.bool,enableMultiContainer:i.bool,containerId:i.oneOfType([i.string,i.number]),role:i.string,onClick:i.func},N.defaultProps={position:T.TOP_RIGHT,transition:I,rtl:!1,autoClose:5e3,hideProgressBar:!1,closeButton:E,pauseOnHover:!0,pauseOnFocusLoss:!0,closeOnClick:!0,newestOnTop:!1,draggable:!0,draggablePercent:80,role:"alert"};var L,k,w,P=new Map,B=[],D=!1;function S(){return P.size>0}function A(){return(Math.random().toString(36)+Date.now().toString(36)).substr(2,10)}function M(t){return t&&(f(t.toastId)||l(t.toastId))?t.toastId:A()}function F(t,e){return S()?c.emit(0,t,e):(B.push({content:t,options:e}),D&&v&&(D=!1,k=document.createElement("div"),document.body.appendChild(k),o.render(n.createElement(N,Object.assign({},w)),k))),e.toastId}function j(t,e){return a({},e,{type:e&&e.type||t,toastId:M(e)})}var H=function(t,e){return F(t,j(b.DEFAULT,e))};function X(t,n){void 0===n&&(n=!1);var o=e.useRef(t);return e.useEffect((function(){n&&(o.current=t)})),o.current}function q(t){return 0===t||t}function Q(t,e){switch(e.type){case"ADD":return[].concat(t,[e.toastId]).filter((function(t){return t!==e.staleId}));case"REMOVE":return q(e.toastId)?t.filter((function(t){return t!==e.toastId})):[]}}function V(t){var n=e.useReducer(Q,[]),o=n[0],r=n[1],s=e.useRef(null),i=X(0),a=X([]),m=X({}),v=X({toastKey:1,displayedToast:0,props:t,containerId:null,isToastActive:T,getToast:function(t){return m[t]||null}});function T(t){return-1!==o.indexOf(t)}function b(t){var e=t.containerId,n=v.props;n.limit&&(!e||v.containerId===e&&n.enableMultiContainer)&&(i-=a.length,a=[])}function h(t){var e=a.length;if((i=q(t)?i-1:i-v.displayedToast)<0&&(i=0),e>0){var n=q(t)?1:v.props.limit;if(1===e||1===n)v.displayedToast++,E();else{var o=n>e?e:n;v.displayedToast=o;for(var s=0;s<o;s++)E()}}r({type:"REMOVE",toastId:t})}function E(){var t=a.shift(),e=t.toastContent,n=t.toastOptions,o=t.staleId;setTimeout((function(){C(e,n,o)}),500)}function O(t,n){var o,r,c=n.delay,m=n.staleId,T=u(n,["delay","staleId"]);if(y(t)&&(r=(o=T).updateId,!(!s.current||v.props.enableMultiContainer&&o.containerId!==v.props.containerId||v.isToastActive(o.toastId)&&null==r))){var b,E=T.toastId,O=v.props,I=v.isToastActive,_=function(){return h(E)},x={toastId:E,updateId:T.updateId,key:T.key||v.toastKey++,type:T.type,closeToast:_,closeButton:T.closeButton,rtl:O.rtl,position:T.position||O.position,transition:T.transition||O.transition,className:g(T.className||O.toastClassName),bodyClassName:g(T.bodyClassName||O.bodyClassName),style:T.style||O.toastStyle,bodyStyle:T.bodyStyle||O.bodyStyle,onClick:T.onClick||O.onClick,pauseOnHover:d(T.pauseOnHover)?T.pauseOnHover:O.pauseOnHover,pauseOnFocusLoss:d(T.pauseOnFocusLoss)?T.pauseOnFocusLoss:O.pauseOnFocusLoss,draggable:d(T.draggable)?T.draggable:O.draggable,draggablePercent:l(T.draggablePercent)?T.draggablePercent:O.draggablePercent,closeOnClick:d(T.closeOnClick)?T.closeOnClick:O.closeOnClick,progressClassName:g(T.progressClassName||O.progressClassName),progressStyle:T.progressStyle||O.progressStyle,autoClose:(b=T.autoClose,!1===b||l(b)&&b>0?b:v.props.autoClose),hideProgressBar:d(T.hideProgressBar)?T.hideProgressBar:O.hideProgressBar,progress:T.progress,role:f(T.role)?T.role:O.role};p(T.onOpen)&&(x.onOpen=T.onOpen),p(T.onClose)&&(x.onClose=T.onClose);var R=O.closeButton;!1===T.closeButton||y(T.closeButton)?R=T.closeButton:!0===T.closeButton&&(R=!y(O.closeButton)||O.closeButton),x.closeButton=R;var N=t;e.isValidElement(t)&&!f(t.type)?N=e.cloneElement(t,{closeToast:_}):p(t)&&(N=t({closeToast:_}));var L=!I(E);L&&i++,O.limit&&O.limit>0&&i>O.limit&&L?a.push({toastContent:N,toastOptions:x,staleId:m}):l(c)&&c>0?setTimeout((function(){C(N,x,m)}),c):C(N,x,m)}}function C(t,e,n){var o=e.toastId;m[o]={content:t,options:e},r({type:"ADD",toastId:o,staleId:n})}return e.useEffect((function(){return v.containerId=t.containerId,c.cancelEmit(3).on(0,O).on(1,(function(t){return s.current&&h(t)})).on(5,b).emit(2,v),function(){return c.emit(3,v)}}),[]),e.useEffect((function(){v.isToastActive=T,v.displayedToast=o.length,c.emit(4,o.length,t.containerId)}),[o]),e.useEffect((function(){v.props=t})),{toast:o,getToastToRender:function(e){for(var n={},o=t.newestOnTop?Object.keys(m).reverse():Object.keys(m),r=0;r<o.length;r++){var s=m[o[r]],i=s.options,a=i.position,u=i.toastId;n[a]||(n[a]=[]),T(u)?n[a].push(s):delete m[u]}return Object.keys(n).map((function(t){return e(t,n[t])}))},collection:m,containerRef:s,isToastActive:T,removeToast:h}}function G(t){return t.targetTouches&&t.targetTouches.length>=1?t.targetTouches[0].clientX:t.clientX}H.success=function(t,e){return F(t,j(b.SUCCESS,e))},H.info=function(t,e){return F(t,j(b.INFO,e))},H.error=function(t,e){return F(t,j(b.ERROR,e))},H.warning=function(t,e){return F(t,j(b.WARNING,e))},H.dark=function(t,e){return F(t,j(b.DARK,e))},H.warn=H.warning,H.dismiss=function(t){return S()&&c.emit(1,t)},H.clearWaitingQueue=function(t){return void 0===t&&(t={}),S()&&c.emit(5,t)},H.isActive=function(t){var e=!1;return P.forEach((function(n){n.isToastActive&&n.isToastActive(t)&&(e=!0)})),e},H.update=function(t,e){void 0===e&&(e={}),setTimeout((function(){var n=function(t,e){var n,o=(n=e.containerId,S()?P.get(n||L):null);return o?o.getToast(t):null}(t,e);if(n){var o=n.content,r=a({},n.options,{},e,{toastId:e.toastId||t,updateId:A()});r.toastId!==t&&(r.staleId=t);var s=void 0!==r.render?r.render:o;delete r.render,F(s,r)}}),0)},H.done=function(t){H.update(t,{progress:1})},H.onChange=function(t){return p(t)&&c.on(4,t),function(){p(t)&&c.off(4,t)}},H.configure=function(t){void 0===t&&(t={}),D=!0,w=t},H.POSITION=T,H.TYPE=b,c.on(2,(function(t){P.set(L=t.containerId||t,t),B.forEach((function(t){c.emit(0,t.content,t.options)})),B=[]})).on(3,(function(t){P.delete(t.containerId||t),0===P.size&&c.off(0).off(1).off(5),v&&k&&document.body.removeChild(k)}));var U=v&&/(msie|trident)/i.test(navigator.userAgent);exports.Bounce=I,exports.Flip=R,exports.Slide=_,exports.ToastContainer=N,exports.Zoom=x,exports.cssTransition=h,exports.toast=H,exports.useToastContainer=V;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),o=require("react-dom"),r=require("react-transition-group"),s=e(require("classnames"));function i(){return(i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function a(e,t){if(null==e)return{};var n,o,r={},s=Object.keys(e);for(o=0;o<s.length;o++)t.indexOf(n=s[o])>=0||(r[n]=e[n]);return r}require("prop-types");var u={list:new Map,emitQueue:new Map,on:function(e,t){return this.list.has(e)||this.list.set(e,[]),this.list.get(e).push(t),this},off:function(e,t){if(t){var n=this.list.get(e).filter((function(e){return e!==t}));return this.list.set(e,n),this}return this.list.delete(e),this},cancelEmit:function(e){var t=this.emitQueue.get(e);return t&&(t.forEach((function(e){return clearTimeout(e)})),this.emitQueue.delete(e)),this},emit:function(e){for(var t=this,n=arguments.length,o=new Array(n>1?n-1:0),r=1;r<n;r++)o[r-1]=arguments[r];this.list.has(e)&&this.list.get(e).forEach((function(n){var r=setTimeout((function(){n.apply(void 0,o)}),0);t.emitQueue.has(e)||t.emitQueue.set(e,[]),t.emitQueue.get(e).push(r)}))}};function c(e){return"number"==typeof e&&!isNaN(e)}function l(e){return"boolean"==typeof e}function d(e){return"string"==typeof e}function f(e){return"function"==typeof e}function p(e){return"string"==typeof e?e:null}function m(e){return 0===e||e}var v=!("undefined"==typeof window||!window.document||!window.document.createElement);function g(e){return t.isValidElement(e)||d(e)||f(e)||c(e)}var y={TOP_LEFT:"top-left",TOP_RIGHT:"top-right",TOP_CENTER:"top-center",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right",BOTTOM_CENTER:"bottom-center"},T={INFO:"info",SUCCESS:"success",WARNING:"warning",ERROR:"error",DEFAULT:"default",DARK:"dark"};function h(e){var t,o,s=e.enter,i=e.exit,u=e.duration,c=void 0===u?750:u,l=e.appendPosition,d=void 0!==l&&l,f=e.collapse,p=void 0===f||f,m=e.collapseDuration,v=void 0===m?300:m;return Array.isArray(c)&&2===c.length?(t=c[0],o=c[1]):t=o=c,function(e){var u=e.children,c=e.position,l=e.preventExitTransition,f=e.done,m=a(e,["children","position","preventExitTransition","done"]),g=d?s+"--"+c:s,y=d?i+"--"+c:i,T=function e(){var t=m.nodeRef.current;t&&(function(e,t,n){void 0===n&&(n=300);var o=e.scrollHeight,r=e.style;function s(){e.removeEventListener("transitionend",s),t()}requestAnimationFrame((function(){r.minHeight="initial",r.height=o+"px",r.transition="all "+n+"ms",requestAnimationFrame((function(){r.height="0",r.padding="0",r.margin="0"})),e.addEventListener("transitionend",s)}))}(t,f,v),t.removeEventListener("animationend",e))};return n.createElement(r.Transition,Object.assign({},m,{timeout:l?0:{enter:t,exit:p?o+v:o},onEnter:function(){var e=m.nodeRef.current;e&&(e.classList.add(g),e.style.animationFillMode="forwards",e.style.animationDuration=t+"ms")},onEntered:function(){var e=m.nodeRef.current;e&&(e.classList.remove(g),e.style.cssText="")},onExit:l?f:function(){var e=m.nodeRef.current;e&&(e.classList.add(y),e.style.animationFillMode="forwards",e.style.animationDuration=o+"ms",p?e.addEventListener("animationend",T):f())},unmountOnExit:!0}),u)}}function E(e){var t=e.closeToast;return n.createElement("button",{className:"Toastify__close-button Toastify__close-button--"+e.type,type:"button",onClick:function(e){e.stopPropagation(),t(e)},"aria-label":e.ariaLabel},n.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},n.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"})))}function b(e){var t,o,r=e.closeToast,a=e.type,u=e.className,c=e.controlledProgress,l=e.progress,d=e.rtl,f=e.isIn,p=i({},e.style,{animationDuration:e.delay+"ms",animationPlayState:e.isRunning?"running":"paused",opacity:e.hide?0:1});c&&(p.transform="scaleX("+l+")");var m=s("Toastify__progress-bar",c?"Toastify__progress-bar--controlled":"Toastify__progress-bar--animated","Toastify__progress-bar--"+a,((t={})["Toastify__progress-bar--rtl"]=d,t),u),v=((o={})[c&&l>=1?"onTransitionEnd":"onAnimationEnd"]=c&&l<1?null:function(){f&&r()},o);return n.createElement("div",Object.assign({className:m,style:p},v))}E.defaultProps={ariaLabel:"close"},b.defaultProps={type:T.DEFAULT,hide:!1};var O=function(e){var o,r=function(e){var n=t.useState(!0),o=n[0],r=n[1],s=t.useState(!1),i=s[0],a=s[1],u=t.useRef(null),c=X({start:0,x:0,y:0,deltaX:0,removalDistance:0,canCloseOnClick:!0,canDrag:!1,boundingRect:null}),l=X(e,!0),d=e.autoClose,p=e.pauseOnHover,m=e.closeToast,v=e.onClick,g=e.closeOnClick;function y(t){var n=u.current;c.canCloseOnClick=!0,c.canDrag=!0,c.boundingRect=n.getBoundingClientRect(),n.style.transition="",c.start=c.x=V(t.nativeEvent),c.removalDistance=n.offsetWidth*(e.draggablePercent/100)}function T(){if(c.boundingRect){var t=c.boundingRect;e.pauseOnHover&&c.x>=t.left&&c.x<=t.right&&c.y>=t.top&&c.y<=t.bottom?E():h()}}function h(){r(!0)}function E(){r(!1)}function b(e){var t=u.current;c.canDrag&&(o&&E(),c.x=V(e),c.deltaX=c.x-c.start,c.y=function(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientY:e.clientY}(e),c.start!==c.x&&(c.canCloseOnClick=!1),t.style.transform="translateX("+c.deltaX+"px)",t.style.opacity=""+(1-Math.abs(c.deltaX/c.removalDistance)))}function O(){var t=u.current;if(c.canDrag){if(c.canDrag=!1,Math.abs(c.deltaX)>c.removalDistance)return a(!0),void e.closeToast();t.style.transition="transform 0.2s, opacity 0.2s",t.style.transform="translateX(0)",t.style.opacity="1"}}t.useEffect((function(){return f(e.onOpen)&&e.onOpen(t.isValidElement(e.children)&&e.children.props),function(){f(l.onClose)&&l.onClose(t.isValidElement(l.children)&&l.children.props)}}),[]),t.useEffect((function(){return e.draggable&&(document.addEventListener("mousemove",b),document.addEventListener("mouseup",O),document.addEventListener("touchmove",b),document.addEventListener("touchend",O)),function(){e.draggable&&(document.removeEventListener("mousemove",b),document.removeEventListener("mouseup",O),document.removeEventListener("touchmove",b),document.removeEventListener("touchend",O))}}),[e.draggable]),t.useEffect((function(){return e.pauseOnFocusLoss&&(window.addEventListener("focus",h),window.addEventListener("blur",E)),function(){e.pauseOnFocusLoss&&(window.removeEventListener("focus",h),window.removeEventListener("blur",E))}}),[e.pauseOnFocusLoss]);var C={onMouseDown:y,onTouchStart:y,onMouseUp:T,onTouchEnd:T};return d&&p&&(C.onMouseEnter=E,C.onMouseLeave=h),g&&(C.onClick=function(e){v&&v(e),c.canCloseOnClick&&m()}),{playToast:h,pauseToast:E,isRunning:o,preventExitTransition:i,toastRef:u,drag:c,onDragStart:y,onDragTransitionEnd:T,eventHandlers:C}}(e),i=r.isRunning,a=r.preventExitTransition,u=r.toastRef,c=r.eventHandlers,l=e.closeButton,d=e.children,p=e.autoClose,m=e.onClick,v=e.type,g=e.hideProgressBar,y=e.closeToast,T=e.transition,h=e.position,E=e.className,O=e.style,C=e.bodyClassName,I=e.bodyStyle,_=e.progressClassName,R=e.progressStyle,x=e.updateId,L=e.role,N=e.progress,P=e.rtl,w=e.toastId,k=e.deleteToast,B=s("Toastify__toast","Toastify__toast--"+v,((o={})["Toastify__toast--rtl"]=P,o),E),D=!!N;return n.createElement(T,{in:e.in,appear:!0,done:k,position:h,preventExitTransition:a,nodeRef:u},n.createElement("div",Object.assign({id:w,onClick:m,className:B},c,{style:O,ref:u}),n.createElement("div",Object.assign({},e.in&&{role:L},{className:s("Toastify__toast-body",C),style:I}),d),function(e){if(!e)return null;var n={closeToast:y,type:v};return f(e)?e(n):t.isValidElement(e)?t.cloneElement(e,n):void 0}(l),(p||D)&&n.createElement(b,Object.assign({},x&&!D?{key:"pb-"+x}:{},{rtl:P,delay:p,isRunning:i,isIn:e.in,closeToast:y,hide:g,type:v,style:R,className:_,controlledProgress:D,progress:N}))))},C=h({enter:"Toastify__bounce-enter",exit:"Toastify__bounce-exit",appendPosition:!0}),I=h({enter:"Toastify__slide-enter",exit:"Toastify__slide-exit",duration:[450,750],appendPosition:!0}),_=h({enter:"Toastify__zoom-enter",exit:"Toastify__zoom-exit"}),R=h({enter:"Toastify__flip-enter",exit:"Toastify__flip-exit"}),x=function(e){var t=e.children,o=e.className,r=e.style,s=a(e,["children","className","style"]);return delete s.in,n.createElement("div",{className:o,style:r},n.Children.map(t,(function(e){return n.cloneElement(e,s)})))},L=function(e){var t=Q(e),o=t.isToastActive,a=e.className,u=e.style,c=e.rtl;return n.createElement("div",{ref:t.containerRef,className:"Toastify",id:e.containerId},n.createElement(r.TransitionGroup,{component:null},(0,t.getToastToRender)((function(e,t){var r,l={className:s("Toastify__toast-container","Toastify__toast-container--"+e,(r={},r["Toastify__toast-container--rtl"]=c,r),p(a)),style:0===t.length?i({},u,{pointerEvents:"none"}):i({},u)};return n.createElement(x,Object.assign({},l,{key:"container-"+e}),t.map((function(e){var t=e.content,r=e.props;return n.createElement(O,Object.assign({},r,{in:o(r.toastId),key:"toast-"+r.key,closeButton:!0===r.closeButton?E:r.closeButton}),t)})))}))))};L.defaultProps={position:y.TOP_RIGHT,transition:C,rtl:!1,autoClose:5e3,hideProgressBar:!1,closeButton:E,pauseOnHover:!0,pauseOnFocusLoss:!0,closeOnClick:!0,newestOnTop:!1,draggable:!0,draggablePercent:80,role:"alert"};var N,P,w,k=new Map,B=[],D=!1;function A(){return k.size>0}function S(){return(Math.random().toString(36)+Date.now().toString(36)).substr(2,10)}function M(e){return e&&(d(e.toastId)||c(e.toastId))?e.toastId:S()}function F(e,t){return A()?u.emit(0,e,t):(B.push({content:e,options:t}),D&&v&&(D=!1,P=document.createElement("div"),document.body.appendChild(P),o.render(n.createElement(L,Object.assign({},w)),P))),t.toastId}function j(e,t){return i({},t,{type:t&&t.type||e,toastId:M(t)})}var H=function(e,t){return F(e,j(T.DEFAULT,t))};function X(e,n){void 0===n&&(n=!1);var o=t.useRef(e);return t.useEffect((function(){n&&(o.current=e)})),o.current}function q(e,t){switch(t.type){case"ADD":return[].concat(e,[t.toastId]).filter((function(e){return e!==t.staleId}));case"REMOVE":return m(t.toastId)?e.filter((function(e){return e!==t.toastId})):[]}}function Q(e){var n=t.useReducer(q,[]),o=n[0],r=n[1],s=t.useRef(null),i=X(0),v=X([]),y=X({}),T=X({toastKey:1,displayedToast:0,props:e,containerId:null,isToastActive:h,getToast:function(e){return y[e]||null}});function h(e){return-1!==o.indexOf(e)}function E(e){var t=e.containerId,n=T.props;n.limit&&(!t||T.containerId===t&&n.enableMultiContainer)&&(i-=v.length,v=[])}function b(e){var t=v.length;if((i=m(e)?i-1:i-T.displayedToast)<0&&(i=0),t>0){var n=m(e)?1:T.props.limit;if(1===t||1===n)T.displayedToast++,O();else{var o=n>t?t:n;T.displayedToast=o;for(var s=0;s<o;s++)O()}}r({type:"REMOVE",toastId:e})}function O(){var e=v.shift(),t=e.toastContent,n=e.toastProps,o=e.staleId;setTimeout((function(){I(t,n,o)}),500)}function C(e,n){var o=n.delay,r=n.staleId,u=a(n,["delay","staleId"]);if(g(e)&&!function(e){var t=e.updateId;return!!(!s.current||T.props.enableMultiContainer&&e.containerId!==T.props.containerId||T.isToastActive(e.toastId)&&null==t)}(u)){var m=u.toastId,h=u.updateId,E=T.props,O=function(){return b(m)},C=!(0,T.isToastActive)(m);C&&i++;var _,R,x={toastId:m,updateId:h,key:u.key||T.toastKey++,type:u.type,closeToast:O,closeButton:u.closeButton,rtl:E.rtl,position:u.position||E.position,transition:u.transition||E.transition,className:p(u.className||E.toastClassName),bodyClassName:p(u.bodyClassName||E.bodyClassName),style:u.style||E.toastStyle,bodyStyle:u.bodyStyle||E.bodyStyle,onClick:u.onClick||E.onClick,pauseOnHover:l(u.pauseOnHover)?u.pauseOnHover:E.pauseOnHover,pauseOnFocusLoss:l(u.pauseOnFocusLoss)?u.pauseOnFocusLoss:E.pauseOnFocusLoss,draggable:l(u.draggable)?u.draggable:E.draggable,draggablePercent:c(u.draggablePercent)?u.draggablePercent:E.draggablePercent,closeOnClick:l(u.closeOnClick)?u.closeOnClick:E.closeOnClick,progressClassName:p(u.progressClassName||E.progressClassName),progressStyle:u.progressStyle||E.progressStyle,autoClose:(_=u.autoClose,R=E.autoClose,!1===_||c(_)&&_>0?_:R),hideProgressBar:l(u.hideProgressBar)?u.hideProgressBar:E.hideProgressBar,progress:u.progress,role:d(u.role)?u.role:E.role,deleteToast:function(){!function(e){delete y[e]}(m)}};f(u.onOpen)&&(x.onOpen=u.onOpen),f(u.onClose)&&(x.onClose=u.onClose);var L=E.closeButton;!1===u.closeButton||g(u.closeButton)?L=u.closeButton:!0===u.closeButton&&(L=!g(E.closeButton)||E.closeButton),x.closeButton=L;var N=e;t.isValidElement(e)&&!d(e.type)?N=t.cloneElement(e,{closeToast:O}):f(e)&&(N=e({closeToast:O})),E.limit&&E.limit>0&&i>E.limit&&C?v.push({toastContent:N,toastProps:x,staleId:r}):c(o)&&o>0?setTimeout((function(){I(N,x,r)}),o):I(N,x,r)}}function I(e,t,n){var o=t.toastId;y[o]={content:e,props:t},r({type:"ADD",toastId:o,staleId:n})}return t.useEffect((function(){return T.containerId=e.containerId,u.cancelEmit(3).on(0,C).on(1,(function(e){return s.current&&b(e)})).on(5,E).emit(2,T),function(){return u.emit(3,T)}}),[]),t.useEffect((function(){T.isToastActive=h,T.displayedToast=o.length,u.emit(4,o.length,e.containerId)}),[o]),t.useEffect((function(){T.props=e})),{getToastToRender:function(t){for(var n={},o=e.newestOnTop?Object.keys(y).reverse():Object.keys(y),r=0;r<o.length;r++){var s=y[o[r]],i=s.props.position;n[i]||(n[i]=[]),n[i].push(s)}return Object.keys(n).map((function(e){return t(e,n[e])}))},collection:y,containerRef:s,isToastActive:h}}function V(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientX:e.clientX}H.success=function(e,t){return F(e,j(T.SUCCESS,t))},H.info=function(e,t){return F(e,j(T.INFO,t))},H.error=function(e,t){return F(e,j(T.ERROR,t))},H.warning=function(e,t){return F(e,j(T.WARNING,t))},H.dark=function(e,t){return F(e,j(T.DARK,t))},H.warn=H.warning,H.dismiss=function(e){return A()&&u.emit(1,e)},H.clearWaitingQueue=function(e){return void 0===e&&(e={}),A()&&u.emit(5,e)},H.isActive=function(e){var t=!1;return k.forEach((function(n){n.isToastActive&&n.isToastActive(e)&&(t=!0)})),t},H.update=function(e,t){void 0===t&&(t={}),setTimeout((function(){var n=function(e,t){var n,o=(n=t.containerId,A()?k.get(n||N):null);return o?o.getToast(e):null}(e,t);if(n){var o=n.content,r=i({},n.props,{},t,{toastId:t.toastId||e,updateId:S()});r.toastId!==e&&(r.staleId=e);var s=void 0!==r.render?r.render:o;delete r.render,F(s,r)}}),0)},H.done=function(e){H.update(e,{progress:1})},H.onChange=function(e){return f(e)&&u.on(4,e),function(){f(e)&&u.off(4,e)}},H.configure=function(e){void 0===e&&(e={}),D=!0,w=e},H.POSITION=y,H.TYPE=T,u.on(2,(function(e){k.set(N=e.containerId||e,e),B.forEach((function(e){u.emit(0,e.content,e.options)})),B=[]})).on(3,(function(e){k.delete(e.containerId||e),0===k.size&&u.off(0).off(1).off(5),v&&P&&document.body.removeChild(P)})),exports.Bounce=C,exports.Flip=R,exports.Slide=I,exports.ToastContainer=L,exports.Zoom=_,exports.cssTransition=h,exports.toast=H,exports.useToastContainer=Q;
 //# sourceMappingURL=react-toastify.cjs.production.min.js.map

dist/react-toastify.esm.js

@@ -124,2 +124,8 @@ import React, { isValidElement, cloneElement, useRef, useEffect, useReducer, useState } from 'react';
 }
+function hasToastId(toastId) {
+  return toastId === 0 || toastId;
+}
+function getAutoCloseDelay(toastAutoClose, containerAutoClose) {
+  return toastAutoClose === false || isNum(toastAutoClose) && toastAutoClose > 0 ? toastAutoClose : containerAutoClose;
+}
 var canUseDom = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
@@ -146,4 +152,34 @@ function canBeRendered(content) {
 };
-var RT_NAMESPACE = 'Toastify';
 
+/**
+ * Used to collapse toast after exit animation
+ */
+function collapseToast(node, done, duration
+/* COLLAPSE_DURATION */
+) {
+  if (duration === void 0) {
+    duration = 300;
+  }
+
+  var height = node.scrollHeight;
+  var style = node.style;
+
+  function onCollapseEnd() {
+    node.removeEventListener('transitionend', onCollapseEnd);
+    done();
+  }
+
+  requestAnimationFrame(function () {
+    style.minHeight = 'initial';
+    style.height = height + 'px';
+    style.transition = "all " + duration + "ms";
+    requestAnimationFrame(function () {
+      style.height = '0';
+      style.padding = '0';
+      style.margin = '0';
+    });
+    node.addEventListener('transitionend', onCollapseEnd);
+  });
+}
+
 function cssTransition(_ref) {
@@ -155,25 +191,34 @@ var enter = _ref.enter,
       _ref$appendPosition = _ref.appendPosition,
-      appendPosition = _ref$appendPosition === void 0 ? false : _ref$appendPosition;
-  return function (_ref2) {
+      appendPosition = _ref$appendPosition === void 0 ? false : _ref$appendPosition,
+      _ref$collapse = _ref.collapse,
+      collapse = _ref$collapse === void 0 ? true : _ref$collapse,
+      _ref$collapseDuration = _ref.collapseDuration,
+      collapseDuration = _ref$collapseDuration === void 0 ? 300 : _ref$collapseDuration;
+  var enterDuration, exitDuration;
+
+  if (Array.isArray(duration) && duration.length === 2) {
+    enterDuration = duration[0];
+    exitDuration = duration[1];
+  } else {
+    enterDuration = exitDuration = duration;
+  }
+
+  return function ToastTransition(_ref2) {
     var children = _ref2.children,
         position = _ref2.position,
         preventExitTransition = _ref2.preventExitTransition,
-        props = _objectWithoutPropertiesLoose(_ref2, ["children", "position", "preventExitTransition"]);
+        done = _ref2.done,
+        props = _objectWithoutPropertiesLoose(_ref2, ["children", "position", "preventExitTransition", "done"]);
 
     var enterClassName = appendPosition ? enter + "--" + position : enter;
     var exitClassName = appendPosition ? exit + "--" + position : exit;
-    var enterDuration, exitDuration;
 
-    if (Array.isArray(duration) && duration.length === 2) {
-      enterDuration = duration[0];
-      exitDuration = duration[1];
-    } else {
-      enterDuration = exitDuration = duration;
-    }
-
     var onEnter = function onEnter() {
       var node = props.nodeRef.current;
-      node.classList.add(enterClassName);
-      node.style.animationFillMode = 'forwards';
-      node.style.animationDuration = enterDuration * 0.001 + "s";
+
+      if (node) {
+        node.classList.add(enterClassName);
+        node.style.animationFillMode = 'forwards';
+        node.style.animationDuration = enterDuration + "ms";
+      }
     };
@@ -183,11 +228,27 @@
       var node = props.nodeRef.current;
-      node.classList.remove(enterClassName);
-      node.style.cssText = '';
+
+      if (node) {
+        node.classList.remove(enterClassName);
+        node.style.cssText = '';
+      }
     };
 
+    var onCollapseStart = function onCollapseStart() {
+      var node = props.nodeRef.current;
+
+      if (node) {
+        collapseToast(node, done, collapseDuration);
+        node.removeEventListener('animationend', onCollapseStart);
+      }
+    };
+
     var onExit = function onExit() {
       var node = props.nodeRef.current;
-      node.classList.add(exitClassName);
-      node.style.animationFillMode = 'forwards';
-      node.style.animationDuration = exitDuration * 0.001 + "s";
+
+      if (node) {
+        node.classList.add(exitClassName);
+        node.style.animationFillMode = 'forwards';
+        node.style.animationDuration = exitDuration + "ms";
+        collapse ? node.addEventListener('animationend', onCollapseStart) : done();
+      }
     };
@@ -198,7 +259,8 @@
         enter: enterDuration,
-        exit: exitDuration
+        exit: collapse ? exitDuration + collapseDuration : exitDuration
       },
       onEnter: onEnter,
       onEntered: onEntered,
-      onExit: preventExitTransition ? undefined : onExit
+      onExit: preventExitTransition ? done : onExit,
+      unmountOnExit: true
     }), children);
@@ -213,3 +275,7 @@ };
   return React.createElement("button", {
-    className: RT_NAMESPACE + "__close-button " + RT_NAMESPACE + "__close-button--" + type,
+    className: "Toastify"
+    /* CSS_NAMESPACE */
+    + "__close-button " + "Toastify"
+    /* CSS_NAMESPACE */
+    + "__close-button--" + type,
     type: "button",
@@ -245,3 +311,4 @@ onClick: function onClick(e) {
       progress = _ref.progress,
-      rtl = _ref.rtl;
+      rtl = _ref.rtl,
+      isIn = _ref.isIn;
 
@@ -255,7 +322,19 @@ var style = _extends({}, userStyle, {
   if (controlledProgress) style.transform = "scaleX(" + progress + ")";
-  var classNames = cx(RT_NAMESPACE + "__progress-bar", controlledProgress ? RT_NAMESPACE + "__progress-bar--controlled" : RT_NAMESPACE + "__progress-bar--animated", RT_NAMESPACE + "__progress-bar--" + type, (_cx = {}, _cx[RT_NAMESPACE + "__progress-bar--rtl"] = rtl, _cx), className); // 🧐 controlledProgress is derived from progress
+  var classNames = cx("Toastify"
+  /* CSS_NAMESPACE */
+  + "__progress-bar", controlledProgress ? "Toastify"
+  /* CSS_NAMESPACE */
+  + "__progress-bar--controlled" : "Toastify"
+  /* CSS_NAMESPACE */
+  + "__progress-bar--animated", "Toastify"
+  /* CSS_NAMESPACE */
+  + "__progress-bar--" + type, (_cx = {}, _cx["Toastify"
+  /* CSS_NAMESPACE */
+  + "__progress-bar--rtl"] = rtl, _cx), className); // 🧐 controlledProgress is derived from progress
   // so if controlledProgress is set
   // it means that this is also the case for progress
 
-  var animationEvent = (_animationEvent = {}, _animationEvent[controlledProgress && progress >= 1 ? 'onTransitionEnd' : 'onAnimationEnd'] = controlledProgress && progress < 1 ? null : closeToast, _animationEvent);
+  var animationEvent = (_animationEvent = {}, _animationEvent[controlledProgress && progress >= 1 ? 'onTransitionEnd' : 'onAnimationEnd'] = controlledProgress && progress < 1 ? null : function () {
+    isIn && closeToast();
+  }, _animationEvent);
   return React.createElement("div", Object.assign({
@@ -278,3 +357,2 @@ className: classNames,
       toastRef = _useToast.toastRef,
-      onExitTransitionEnd = _useToast.onExitTransitionEnd,
       eventHandlers = _useToast.eventHandlers;
@@ -289,3 +367,3 @@
       closeToast = props.closeToast,
-      transition = props.transition,
+      Transition = props.transition,
       position = props.position,
@@ -302,6 +380,12 @@ className = props.className,
       rtl = props.rtl,
-      toastId = props.toastId;
-  var cssClasses = cx(RT_NAMESPACE + "__toast", RT_NAMESPACE + "__toast--" + type, (_cx = {}, _cx[RT_NAMESPACE + "__toast--rtl"] = rtl, _cx), className);
+      toastId = props.toastId,
+      deleteToast = props.deleteToast;
+  var cssClasses = cx("Toastify"
+  /* CSS_NAMESPACE */
+  + "__toast", "Toastify"
+  /* CSS_NAMESPACE */
+  + "__toast--" + type, (_cx = {}, _cx["Toastify"
+  /* CSS_NAMESPACE */
+  + "__toast--rtl"] = rtl, _cx), className);
   var controlledProgress = !!progress;
-  var Transition = transition;
 
@@ -321,3 +405,3 @@ function renderCloseButton(closeButton) {
     appear: true,
-    onExited: onExitTransitionEnd,
+    done: deleteToast,
     position: position,
@@ -336,3 +420,5 @@ preventExitTransition: preventExitTransition,
   }, {
-    className: cx(RT_NAMESPACE + "__toast-body", bodyClassName),
+    className: cx("Toastify"
+    /* CSS_NAMESPACE */
+    + "__toast-body", bodyClassName),
     style: bodyStyle
@@ -345,2 +431,3 @@ }), children), renderCloseButton(closeButton), (autoClose || controlledProgress) && React.createElement(ProgressBar, Object.assign({}, updateId && !controlledProgress ? {
     isRunning: isRunning,
+    isIn: props["in"],
     closeToast: closeToast,
@@ -359,4 +446,8 @@ hide: hideProgressBar,
 cssTransition({
-  enter: RT_NAMESPACE + "__bounce-enter",
-  exit: RT_NAMESPACE + "__bounce-exit",
+  enter: "Toastify"
+  /* CSS_NAMESPACE */
+  + "__bounce-enter",
+  exit: "Toastify"
+  /* CSS_NAMESPACE */
+  + "__bounce-exit",
   appendPosition: true
@@ -367,4 +458,8 @@ });
 cssTransition({
-  enter: RT_NAMESPACE + "__slide-enter",
-  exit: RT_NAMESPACE + "__slide-exit",
+  enter: "Toastify"
+  /* CSS_NAMESPACE */
+  + "__slide-enter",
+  exit: "Toastify"
+  /* CSS_NAMESPACE */
+  + "__slide-exit",
   duration: [450, 750],
@@ -376,4 +471,8 @@ appendPosition: true
 cssTransition({
-  enter: RT_NAMESPACE + "__zoom-enter",
-  exit: RT_NAMESPACE + "__zoom-exit"
+  enter: "Toastify"
+  /* CSS_NAMESPACE */
+  + "__zoom-enter",
+  exit: "Toastify"
+  /* CSS_NAMESPACE */
+  + "__zoom-exit"
 });
@@ -383,10 +482,32 @@ var Flip =
 cssTransition({
-  enter: RT_NAMESPACE + "__flip-enter",
-  exit: RT_NAMESPACE + "__flip-exit"
+  enter: "Toastify"
+  /* CSS_NAMESPACE */
+  + "__flip-enter",
+  exit: "Toastify"
+  /* CSS_NAMESPACE */
+  + "__flip-exit"
 });
 
+var ToastPositioner = function ToastPositioner(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      style = _ref.style,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "style"]);
+
+  // Monkey patch react-transition-group
+  // As exit transition is broken with strict mode
+  delete rest["in"];
+  return React.createElement("div", {
+    className: className,
+    style: style
+  }, React.Children.map(children, function (child) {
+    return React.cloneElement(child, rest);
+  }));
+};
+
 var ToastContainer = function ToastContainer(props) {
   var _useToastContainer = useToastContainer(props),
       getToastToRender = _useToastContainer.getToastToRender,
-      containerRef = _useToastContainer.containerRef;
+      containerRef = _useToastContainer.containerRef,
+      isToastActive = _useToastContainer.isToastActive;
 
@@ -399,4 +520,8 @@ var className = props.className,
     ref: containerRef,
-    className: RT_NAMESPACE,
+    className: "Toastify"
+    /* CSS_NAMESPACE */
+    ,
     id: containerId
+  }, React.createElement(TransitionGroup, {
+    component: null
   }, getToastToRender(function (position, toastList) {
@@ -406,3 +531,9 @@ var _cx;
     var swag = {
-      className: cx(RT_NAMESPACE + "__toast-container", RT_NAMESPACE + "__toast-container--" + position, (_cx = {}, _cx[RT_NAMESPACE + "__toast-container--rtl"] = rtl, _cx), parseClassName(className)),
+      className: cx("Toastify"
+      /* CSS_NAMESPACE */
+      + "__toast-container", "Toastify"
+      /* CSS_NAMESPACE */
+      + "__toast-container--" + position, (_cx = {}, _cx["Toastify"
+      /* CSS_NAMESPACE */
+      + "__toast-container--rtl"] = rtl, _cx), parseClassName(className)),
       style: toastList.length === 0 ? _extends({}, style, {
@@ -412,52 +543,57 @@ pointerEvents: 'none'
     };
-    return React.createElement(TransitionGroup, Object.assign({}, swag, {
+    return React.createElement(ToastPositioner, Object.assign({}, swag, {
       key: "container-" + position
     }), toastList.map(function (_ref) {
       var content = _ref.content,
-          options = _ref.options;
-      return React.createElement(Toast, Object.assign({}, options, {
-        key: "toast-" + options.key,
-        closeButton: options.closeButton === true ? CloseButton : options.closeButton
+          toastProps = _ref.props;
+      return React.createElement(Toast, Object.assign({}, toastProps, {
+        "in": isToastActive(toastProps.toastId),
+        key: "toast-" + toastProps.key,
+        closeButton: toastProps.closeButton === true ? CloseButton : toastProps.closeButton
       }), content);
     }));
-  }));
-}; // @ts-ignore
+  })));
+};
 
-ToastContainer.propTypes = {
+if (process.env.NODE_ENV !== 'production') {
   // @ts-ignore
-  position:
-  /*#__PURE__*/
-  PropTypes.oneOf(
-  /*#__PURE__*/
-  objectValues(POSITION)),
-  // @ts-ignore
-  autoClose:
-  /*#__PURE__*/
-  PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
-  // @ts-ignore
-  closeButton:
-  /*#__PURE__*/
-  PropTypes.oneOfType([PropTypes.node, PropTypes.bool, PropTypes.func]),
-  hideProgressBar: PropTypes.bool,
-  pauseOnHover: PropTypes.bool,
-  closeOnClick: PropTypes.bool,
-  newestOnTop: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.object,
-  toastClassName: PropTypes.string,
-  bodyClassName: PropTypes.string,
-  progressClassName: PropTypes.string,
-  progressStyle: PropTypes.object,
-  transition: PropTypes.func,
-  rtl: PropTypes.bool,
-  draggable: PropTypes.bool,
-  draggablePercent: PropTypes.number,
-  pauseOnFocusLoss: PropTypes.bool,
-  enableMultiContainer: PropTypes.bool,
-  containerId:
-  /*#__PURE__*/
-  PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  role: PropTypes.string,
-  onClick: PropTypes.func
-};
+  ToastContainer.propTypes = {
+    // @ts-ignore
+    position:
+    /*#__PURE__*/
+    PropTypes.oneOf(
+    /*#__PURE__*/
+    objectValues(POSITION)),
+    // @ts-ignore
+    autoClose:
+    /*#__PURE__*/
+    PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
+    // @ts-ignore
+    closeButton:
+    /*#__PURE__*/
+    PropTypes.oneOfType([PropTypes.node, PropTypes.bool, PropTypes.func]),
+    hideProgressBar: PropTypes.bool,
+    pauseOnHover: PropTypes.bool,
+    closeOnClick: PropTypes.bool,
+    newestOnTop: PropTypes.bool,
+    className: PropTypes.string,
+    style: PropTypes.object,
+    toastClassName: PropTypes.string,
+    bodyClassName: PropTypes.string,
+    progressClassName: PropTypes.string,
+    progressStyle: PropTypes.object,
+    transition: PropTypes.func,
+    rtl: PropTypes.bool,
+    draggable: PropTypes.bool,
+    draggablePercent: PropTypes.number,
+    pauseOnFocusLoss: PropTypes.bool,
+    enableMultiContainer: PropTypes.bool,
+    containerId:
+    /*#__PURE__*/
+    PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    role: PropTypes.string,
+    onClick: PropTypes.func
+  };
+}
+
 ToastContainer.defaultProps = {
@@ -651,3 +787,3 @@ position: POSITION.TOP_RIGHT,
     if (toast) {
-      var oldOptions = toast.options,
+      var oldOptions = toast.props,
           oldContent = toast.content;
@@ -767,6 +903,2 @@
 
-function hasToastId(toastId) {
-  return toastId === 0 || toastId;
-}
-
 function reducer(state, action) {
@@ -883,3 +1015,3 @@ switch (action.type) {
         toastContent = _queue$shift.toastContent,
-        toastOptions = _queue$shift.toastOptions,
+        toastProps = _queue$shift.toastProps,
         staleId = _queue$shift.staleId; // ensure that exit transition has been completed, hence the timeout
@@ -889,3 +1021,3 @@
     setTimeout(function () {
-      appendToast(toastContent, toastOptions, staleId);
+      appendToast(toastContent, toastProps, staleId);
     }, 500);
@@ -905,6 +1037,2 @@ }
     return !containerRef.current || instance.props.enableMultiContainer && containerId !== instance.props.containerId || instance.isToastActive(toastId) && updateId == null ? true : false;
-  }
-
-  function getAutoCloseDelay(toastAutoClose) {
-    return toastAutoClose === false || isNum(toastAutoClose) && toastAutoClose > 0 ? toastAutoClose : instance.props.autoClose;
   } // this function and all the function called inside needs to rely on ref(`useKeeper`)
@@ -928,3 +1056,5 @@
 
-    var toastOptions = {
+    var isNotAnUpdate = !isToastActive(toastId);
+    if (isNotAnUpdate) toastCount++;
+    var toastProps = {
       toastId: toastId,
@@ -951,9 +1081,12 @@ updateId: updateId,
       progressStyle: options.progressStyle || props.progressStyle,
-      autoClose: getAutoCloseDelay(options.autoClose),
+      autoClose: getAutoCloseDelay(options.autoClose, props.autoClose),
       hideProgressBar: isBool(options.hideProgressBar) ? options.hideProgressBar : props.hideProgressBar,
       progress: options.progress,
-      role: isStr(options.role) ? options.role : props.role
+      role: isStr(options.role) ? options.role : props.role,
+      deleteToast: function deleteToast() {
+        removeFromCollection(toastId);
+      }
     };
-    if (isFn(options.onOpen)) toastOptions.onOpen = options.onOpen;
-    if (isFn(options.onClose)) toastOptions.onClose = options.onClose;
+    if (isFn(options.onOpen)) toastProps.onOpen = options.onOpen;
+    if (isFn(options.onClose)) toastProps.onClose = options.onClose;
     var closeButton = props.closeButton;
@@ -967,3 +1100,3 @@
 
-    toastOptions.closeButton = closeButton;
+    toastProps.closeButton = closeButton;
     var toastContent = content;
@@ -979,6 +1112,4 @@
       });
-    }
+    } // not handling limit + delay by design. Waiting for user feedback first
 
-    var isNotAnUpdate = !isToastActive(toastId);
-    if (isNotAnUpdate) toastCount++; // not handling limit + delay by design. Waiting for user feedback first
 
@@ -988,3 +1119,3 @@ if (props.limit && props.limit > 0 && toastCount > props.limit && isNotAnUpdate) {
         toastContent: toastContent,
-        toastOptions: toastOptions,
+        toastProps: toastProps,
         staleId: staleId
@@ -994,14 +1125,14 @@ });
       setTimeout(function () {
-        appendToast(toastContent, toastOptions, staleId);
+        appendToast(toastContent, toastProps, staleId);
       }, delay);
     } else {
-      appendToast(toastContent, toastOptions, staleId);
+      appendToast(toastContent, toastProps, staleId);
     }
   }
 
-  function appendToast(content, options, staleId) {
-    var toastId = options.toastId;
+  function appendToast(content, toastProps, staleId) {
+    var toastId = toastProps.toastId;
     collection[toastId] = {
       content: content,
-      options: options
+      props: toastProps
     };
@@ -1015,2 +1146,6 @@ dispatch({
 
+  function removeFromCollection(toastId) {
+    delete collection[toastId];
+  }
+
   function getToastToRender(cb) {
@@ -1022,7 +1157,5 @@ var toastToRender = {};
       var _toast = collection[toastList[i]];
-      var _toast$options = _toast.options,
-          position = _toast$options.position,
-          toastId = _toast$options.toastId;
+      var position = _toast.props.position;
       toastToRender[position] || (toastToRender[position] = []);
-      isToastActive(toastId) ? toastToRender[position].push(_toast) : delete collection[toastId];
+      toastToRender[position].push(_toast);
     }
@@ -1036,8 +1169,6 @@
   return {
-    toast: toast,
     getToastToRender: getToastToRender,
     collection: collection,
     containerRef: containerRef,
-    isToastActive: isToastActive,
-    removeToast: removeToast
+    isToastActive: isToastActive
   };
@@ -1054,5 +1185,2 @@ }
 
-var iLoveInternetExplorer = canUseDom &&
-/*#__PURE__*/
-/(msie|trident)/i.test(navigator.userAgent);
 function useToast(props) {
@@ -1192,29 +1320,2 @@ var _useState = useState(true),
     }
-  } // Maybe let the end user tweak it later on
-  // hmmm no comment about ie. I hope this browser die one day
-  // don't want to fix the issue on this browser, my head is hurting too much
-
-
-  function onExitTransitionEnd() {
-    if (iLoveInternetExplorer) {
-      props.onExited();
-      return;
-    }
-
-    var toast = toastRef.current;
-    var height = toast.scrollHeight;
-    var style = toast.style;
-    requestAnimationFrame(function () {
-      style.minHeight = 'initial';
-      style.height = height + 'px';
-      style.transition = 'all 0.4s ';
-      requestAnimationFrame(function () {
-        style.height = '0';
-        style.padding = '0';
-        style.margin = '0';
-      });
-      setTimeout(function () {
-        return props.onExited();
-      }, 400);
-    });
   }
@@ -1249,3 +1350,2 @@
     drag: drag,
-    onExitTransitionEnd: onExitTransitionEnd,
     onDragStart: onDragStart,
@@ -1252,0 +1352,0 @@ onDragTransitionEnd: onDragTransitionEnd,

dist/types/index.d.ts

@@ -13,5 +13,6 @@ import * as React from 'react';
     content: ToastContent;
-    options: WithInjectedOptions;
+    props: ToastProps;
 }
 export declare type Id = number | string;
+export declare type ToastTransition = React.FC<ToastTransitionProps> | React.ComponentClass<ToastTransitionProps>;
 declare type ClassName = string | null;
@@ -82,3 +83,3 @@ export interface ClearWaitingQueueParams {
      */
-    transition?: React.ReactNode;
+    transition?: ToastTransition;
     /**
@@ -149,6 +150,11 @@ * Allow toast to be draggable
 }
-export interface WithInjectedOptions extends ToastOptions {
+/**
+ * @INTERNAL
+ */
+export interface ToastProps extends ToastOptions {
+    in?: boolean;
     staleId?: Id;
     toastId: Id;
     key: Id;
+    transition: ToastTransition;
     closeToast: () => void;
@@ -158,8 +164,13 @@ position: ToastPosition;
     draggablePercent: number;
-    in?: boolean;
     progressClassName?: ClassName;
     className?: ClassName;
     bodyClassName?: ClassName;
-    onExited?: () => void;
+    deleteToast: () => void;
 }
+/**
+ * @INTERNAL
+ */
+export interface NotValidatedToastProps extends Partial<ToastProps> {
+    toastId: Id;
+}
 export interface UpdateOptions extends Nullable<ToastOptions> {
@@ -200,2 +211,11 @@ /**
 }
+export interface ToastTransitionProps {
+    in: boolean;
+    appear: boolean;
+    done: () => void;
+    position: ToastPosition | string;
+    preventExitTransition: boolean;
+    nodeRef: React.RefObject<HTMLElement>;
+    children?: React.ReactNode;
+}
 export {};

dist/utils/constant.d.ts

@@ -19,2 +19,5 @@ export declare type TypeOptions = 'info' | 'success' | 'warning' | 'error' | 'default';
 };
-export declare const RT_NAMESPACE = "Toastify";
+export declare const enum DEFAULT {
+    COLLAPSE_DURATION = 300,
+    CSS_NAMESPACE = "Toastify"
+}

dist/utils/cssTransition.d.ts

@@ -0,1 +1,2 @@
+import { ToastTransitionProps } from 'types';
 export interface CSSTransitionProps {
@@ -22,3 +23,13 @@ /**
     appendPosition?: boolean;
+    /**
+     * Collapse toast smoothly when animation end
+     * `Default: true`
+     */
+    collapse?: boolean;
+    /**
+     * Collapse transition duration
+     * `Default: 300`
+     */
+    collapseDuration?: number;
 }
-export declare function cssTransition({ enter, exit, duration, appendPosition }: CSSTransitionProps): ({ children, position, preventExitTransition, ...props }: any) => JSX.Element;
+export declare function cssTransition({ enter, exit, duration, appendPosition, collapse, collapseDuration }: CSSTransitionProps): ({ children, position, preventExitTransition, done, ...props }: ToastTransitionProps) => JSX.Element;

dist/utils/index.d.ts

 export * from './propValidator';
 export * from './constant';
 export * from './cssTransition';
+export * from './collapseToast';

dist/utils/propValidator.d.ts

@@ -0,1 +1,2 @@
+import { Id } from 'types';
 export declare function isNum(v: any): v is Number;
@@ -7,3 +8,5 @@ export declare function isBool(v: any): v is Boolean;
 export declare function objectValues<T>(obj: Record<string, T>): T[];
+export declare function hasToastId(toastId?: Id): string | number | true | undefined;
+export declare function getAutoCloseDelay(toastAutoClose?: false | number, containerAutoClose?: false | number): number | false | undefined;
 export declare const canUseDom: boolean;
 export declare function canBeRendered<T>(content: T): boolean;

package.json

 {
-  "version": "6.0.0-rc.2",
+  "version": "6.0.0-rc.3",
   "license": "MIT",
@@ -99,4 +99,4 @@ "main": "dist/index.js",
     "prop-types": "^15.7.2",
-    "react-transition-group": "^4.4.0"
+    "react-transition-group": "^4.4.1"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

369144

increased by4.2%

Number of package files

59

increased by7.27%

Lines of code

3436

increased by7.51%

Worsened metrics

Number of low supply chain risk alerts

2

increased by100%

Dependency changes

• Updatedreact-transition-group@^4.4.1