react-simple-toasts - npm Package Compare versions

Comparing version 4.0.1 to 5.0.0

dist/index.d.ts

@@ -1,38 +0,3 @@
-import { ReactNode, SyntheticEvent } from 'react';
-import { ToastPosition as Position } from './lib/constants';
-type ClickHandler = (e: SyntheticEvent<HTMLDivElement>) => void | Promise<void>;
-export type ToastPosition = (typeof Position)[keyof typeof Position];
-export declare const Themes: {
-    readonly LIGHT: "light";
-    readonly DARK: "dark";
-};
-export type Theme = (typeof Themes)[keyof typeof Themes];
-export interface ToastOptions {
-    /**
-     * @deprecated The time option is deprecated. Use duration instead.
-     */
-    time?: number;
-    duration?: number;
-    className?: string;
-    clickable?: boolean;
-    clickClosable?: boolean;
-    position?: ToastPosition;
-    maxVisibleToasts?: number | null;
-    render?: ((message: ReactNode) => ReactNode) | null;
-    theme?: Theme | null;
-    onClick?: ClickHandler;
-    onClose?: () => void;
-    onCloseStart?: () => void;
-}
-export interface ConfigArgs extends Pick<ToastOptions, 'time' | 'duration' | 'className' | 'clickClosable' | 'position' | 'maxVisibleToasts' | 'render' | 'theme'> {
-}
-export interface ToastProps extends Pick<ToastOptions, 'className' | 'clickable' | 'position' | 'render' | 'theme' | 'onClick'> {
-    message: ReactNode;
-    isExit?: boolean;
-}
-export interface Toast {
-    close: () => void;
-    updateDuration: (duration?: number) => void;
-    update: (message: ReactNode, duration?: number) => void;
-}
+import { ReactNode } from 'react';
+import { ConfigArgs, Theme, Toast, ToastClickHandler, ToastComponent, ToastOptions, ToastPosition } from './type/common';
 export declare const toastConfig: (options: ConfigArgs) => void;
@@ -44,1 +9,2 @@ export declare const clearToasts: () => void;
 export default toast;
+export type { ToastPosition, Theme, ToastClickHandler, ToastOptions, ConfigArgs, Toast, ToastComponent, };

dist/index.es.js

@@ -1,19 +0,4 @@
-import React, { Fragment, cloneElement, useRef, useState, useLayoutEffect } from 'react';
+import React, { useRef, useState, useLayoutEffect, Fragment, cloneElement } from 'react';
 import * as ReactDOM from 'react-dom';
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 /******************************************************************************
@@ -45,2 +30,12 @@ Copyright (c) Microsoft Corporation.
 
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
 function styleInject(css, ref) {
@@ -73,4 +68,4 @@ if ( ref === void 0 ) ref = {};
 
-var css_248z = "#style_toast_container__DT-ei *{box-sizing:border-box}.style_toast-list__QC6Mo{box-sizing:border-box;line-height:1.5;position:fixed;text-align:center;z-index:1000}.style_toast-list__QC6Mo.style_bottom-left__OVYBd{bottom:20px;left:30px;transform:translateX(0) translateZ(0)}.style_toast-list__QC6Mo.style_bottom-center__NH15O{bottom:20px;left:50%;transform:translateX(-50%) translateZ(0)}.style_toast-list__QC6Mo.style_bottom-right__HeaCV{bottom:20px;left:auto;right:30px;transform:translateX(0) translateZ(0)}.style_toast-list__QC6Mo.style_top-left__gMJD1{left:30px;top:30px;transform:translateX(0) translateZ(0)}.style_toast-list__QC6Mo.style_top-center__zZFy4{left:50%;top:30px;transform:translateX(-50%) translateZ(0)}.style_toast-list__QC6Mo.style_top-right__0Fafq{left:auto;right:30px;top:30px;transform:translateX(0) translateZ(0)}.style_toast-list__QC6Mo.style_center__GLmmM{left:50%;top:50%;transform:translate(-50%,-50%) translateZ(0)}.style_toast-message__-UN8x{margin-bottom:10px;opacity:0;transition:height .3s,opacity .3s,transform .3s}.style_top-center__zZFy4 .style_toast-message__-UN8x,.style_top-left__gMJD1 .style_toast-message__-UN8x,.style_top-right__0Fafq .style_toast-message__-UN8x{transform:translateY(-10px)}.style_clickable__F3Zx7{cursor:pointer}.style_toast-message__-UN8x.toast-appear-active,.style_toast-message__-UN8x.toast-enter-active{opacity:1;transform:translateY(0)}.style_toast-message__-UN8x.toast-exit-active{opacity:0;transform:translateY(-10px)}.style_center__GLmmM .style_toast-message__-UN8x.toast-exit-active{transform:translateY(-40px)}.style_toast-content__jaj36{display:inline-block}";
-var styles = {"toast_container":"style_toast_container__DT-ei","toast-list":"style_toast-list__QC6Mo","bottom-left":"style_bottom-left__OVYBd","bottom-center":"style_bottom-center__NH15O","bottom-right":"style_bottom-right__HeaCV","top-left":"style_top-left__gMJD1","top-center":"style_top-center__zZFy4","top-right":"style_top-right__0Fafq","center":"style_center__GLmmM","toast-message":"style_toast-message__-UN8x","clickable":"style_clickable__F3Zx7","toast-content":"style_toast-content__jaj36"};
+var css_248z = "#style_toast_container__DT-ei *{-webkit-box-sizing:border-box;box-sizing:border-box}.style_toast-message__-UN8x.style_bottom-left__OVYBd{bottom:30px;left:30px}.style_toast-message__-UN8x.style_bottom-center__NH15O{bottom:30px;left:50%}.style_toast-message__-UN8x.style_bottom-right__HeaCV{bottom:30px;right:30px}.style_toast-message__-UN8x.style_top-left__gMJD1{left:30px;top:30px}.style_toast-message__-UN8x.style_top-center__zZFy4{left:50%;top:30px}.style_toast-message__-UN8x.style_top-right__0Fafq{right:30px;top:30px}.style_toast-message__-UN8x.style_center__GLmmM{left:50%;top:50%}.style_toast-message__-UN8x{opacity:0;position:fixed;-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s;transition:opacity .3s,transform .3s,-webkit-transform .3s;z-index:1000}.style_toast-message__-UN8x.toast-appear-active,.style_toast-message__-UN8x.toast-enter-active{opacity:1}.style_toast-message__-UN8x.toast-exit-active{opacity:0}.style_toast-content__jaj36{display:inline-block}.style_clickable__F3Zx7{cursor:pointer}";
+var styles = {"toast_container":"style_toast_container__DT-ei","toast-message":"style_toast-message__-UN8x","bottom-left":"style_bottom-left__OVYBd","bottom-center":"style_bottom-center__NH15O","bottom-right":"style_bottom-right__HeaCV","top-left":"style_top-left__gMJD1","top-center":"style_top-center__zZFy4","top-right":"style_top-right__0Fafq","center":"style_center__GLmmM","toast-content":"style_toast-content__jaj36","clickable":"style_clickable__F3Zx7"};
 styleInject(css_248z);
@@ -145,6 +140,79 @@
 
-var Themes = {
-  LIGHT: 'light',
-  DARK: 'dark'
-};
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function ToastMessage(_a) {
+  var id = _a.id,
+    message = _a.message,
+    className = _a.className,
+    clickable = _a.clickable,
+    position = _a.position,
+    isExit = _a.isExit,
+    render = _a.render,
+    theme = _a.theme,
+    offsetX = _a.offsetX,
+    offsetY = _a.offsetY,
+    zIndex = _a.zIndex,
+    onClick = _a.onClick,
+    _onEnter = _a._onEnter;
+  var messageDOM = useRef(null);
+  var isTopPosition = position === null || position === void 0 ? void 0 : position.includes('top');
+  var _b = useState(false),
+    isEnter = _b[0],
+    setIsEnter = _b[1];
+  var _c = useState({
+      transform: "translate(".concat(offsetX, ", ").concat(isTopPosition ? parseInt(offsetY || '0') - 20 : 20, "px)")
+    }),
+    messageStyle = _c[0],
+    setMessageStyle = _c[1];
+  useLayoutEffect(function () {
+    if (isExit) return;
+    var transform = "translate(".concat(offsetX, ", ").concat(offsetY, ")");
+    setMessageStyle({
+      zIndex: zIndex,
+      transform: transform,
+      WebkitTransform: transform
+    });
+  }, [isExit, offsetX, offsetY, zIndex]);
+  useLayoutEffect(function () {
+    var _a;
+    if (((_a = messageDOM.current) === null || _a === void 0 ? void 0 : _a.clientHeight) == null || isEnter) return;
+    var height = messageDOM.current.clientHeight;
+    if (messageDOM.current) {
+      _onEnter === null || _onEnter === void 0 ? void 0 : _onEnter({
+        target: messageDOM.current,
+        height: height
+      });
+    }
+    setIsEnter(true);
+  }, [isEnter, _onEnter]);
+  var messageClassNames = [styles['toast-message'], styles[position || 'bottom-center'], isEnter ? 'toast-enter-active' : '', isExit ? 'toast-exit-active' : ''].filter(Boolean).join(' ');
+  var contentClassNames = [styles['toast-content'], clickable ? styles['clickable'] : '', "toast-".concat(theme), className].filter(Boolean).join(' ');
+  var clickableProps = {
+    onClick: onClick,
+    tabIndex: 0,
+    role: 'button'
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: messageDOM,
+    id: id.toString(),
+    className: messageClassNames,
+    style: messageStyle
+  }, render ? render(message) : /*#__PURE__*/React.createElement("div", _extends({
+    className: contentClassNames
+  }, clickable && clickableProps), message));
+}
+
 var toastComponentList = [];
@@ -168,3 +236,4 @@ var init = function () {
   maxVisibleToasts: null,
-  theme: null
+  theme: null,
+  zIndex: null
 };
@@ -204,3 +273,50 @@ var isValidPosition = function (position) {
   }
+  if (options.zIndex) {
+    defaultOptions.zIndex = options.zIndex;
+  }
 };
+function ToastContainer() {
+  var handleToastEnter = function (t, e) {
+    toastComponentList.forEach(function (toast) {
+      if (toast.id !== t.id) return;
+      toast.startCloseTimer();
+      toast.height = e.height;
+    });
+    renderDOM();
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, toastComponentList.map(function (t) {
+    var bottomToasts = [];
+    var cloneToastComponentList = __spreadArray([], toastComponentList, true);
+    if (t.position.includes('top')) cloneToastComponentList.reverse();
+    for (var i = cloneToastComponentList.length - 1; i >= 0; i--) {
+      var toast_1 = cloneToastComponentList[i];
+      if (toast_1.id === t.id) break;
+      if (toast_1.position === t.position && !toast_1.isExit) {
+        bottomToasts.push({
+          id: toast_1.id,
+          height: toast_1.height
+        });
+      }
+    }
+    var bottomToastsHeight = bottomToasts.reduce(function (acc, toast) {
+      var _a;
+      var MARGIN = 10;
+      return acc + ((_a = toast.height) !== null && _a !== void 0 ? _a : 0) + MARGIN;
+    }, 0);
+    var offsetX = t.position.includes('left') || t.position.includes('right') ? '0%' : '-50%';
+    var offsetYAlpha = t.position.includes('top') ? 1 : -1;
+    var baseOffsetY = bottomToastsHeight * offsetYAlpha;
+    var offsetY = t.position === 'center' ? "calc(-50% - ".concat(baseOffsetY * -1, "px)") : "".concat(baseOffsetY, "px");
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: t.id
+    }, /*#__PURE__*/cloneElement(t.component, {
+      isExit: t.isExit,
+      offsetX: offsetX,
+      offsetY: offsetY,
+      _onEnter: function (event) {
+        return handleToastEnter(t, event);
+      }
+    }));
+  }));
+}
 var renderDOM = function () {
@@ -210,25 +326,3 @@ if (!isBrowser()) return;
   if (!toastContainer) return;
-  var defaultToastList = Object.values(ToastPosition).reduce(function (acc, position) {
-    var _a;
-    return __assign(__assign({}, acc), (_a = {}, _a[position] = [], _a));
-  }, {});
-  var toastListByPosition = toastComponentList.reduce(function (acc, toast) {
-    acc[toast.position].push(toast);
-    return acc;
-  }, defaultToastList);
-  var toastListComponent = Object.entries(toastListByPosition).map(function (_a) {
-    var position = _a[0],
-      toastsByPosition = _a[1];
-    return /*#__PURE__*/React.createElement("div", {
-      key: position,
-      className: "".concat(styles['toast-list'], " ").concat(styles[position])
-    }, toastsByPosition.map(function (t) {
-      return /*#__PURE__*/React.createElement(Fragment, {
-        key: t.id
-      }, /*#__PURE__*/cloneElement(t.component, {
-        isExit: t.isExit
-      }));
-    }));
-  });
-  render( /*#__PURE__*/React.createElement(React.Fragment, null, toastListComponent), toastContainer);
+  render( /*#__PURE__*/React.createElement(ToastContainer, null), toastContainer);
 };
@@ -241,44 +335,2 @@ var clearToasts = function () {
 };
-var Toast = function (_a) {
-  var message = _a.message,
-    className = _a.className,
-    clickable = _a.clickable,
-    position = _a.position,
-    isExit = _a.isExit,
-    render = _a.render,
-    theme = _a.theme,
-    onClick = _a.onClick;
-  var messageDOM = useRef(null);
-  var _b = useState(false),
-    isEnter = _b[0],
-    setIsEnter = _b[1];
-  useLayoutEffect(function () {
-    if (messageDOM.current && messageDOM.current.clientHeight) {
-      var height_1 = messageDOM.current.clientHeight;
-      messageDOM.current.style.height = '0px';
-      setTimeout(function () {
-        if (messageDOM.current) messageDOM.current.style.height = "".concat(height_1, "px");
-        setIsEnter(true);
-      }, 0);
-    }
-  }, []);
-  useLayoutEffect(function () {
-    var topOrCenter = position && (position.indexOf('top') > -1 || position === 'center');
-    if (isExit && position && topOrCenter) {
-      if (messageDOM.current) messageDOM.current.style.height = '0px';
-    }
-  }, [isExit]);
-  var contentClassNames = [styles['toast-content'], clickable ? styles['clickable'] : '', "toast-".concat(theme), className].filter(Boolean).join(' ');
-  var clickableProps = {
-    onClick: onClick,
-    tabIndex: 0,
-    role: 'button'
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    ref: messageDOM,
-    className: "".concat(styles['toast-message'], " ").concat(isEnter ? 'toast-enter-active' : '', " ").concat(isExit ? 'toast-exit-active' : '')
-  }, render ? render(message) : /*#__PURE__*/React.createElement("div", _extends({
-    className: contentClassNames
-  }, clickable && clickableProps), message));
-};
 function closeToast(id, options) {
@@ -305,5 +357,11 @@ var _a;
   var dummyReturn = {
-    close: function () {},
-    updateDuration: function () {},
-    update: function () {}
+    close: function () {
+      return null;
+    },
+    updateDuration: function () {
+      return null;
+    },
+    update: function () {
+      return null;
+    }
   };
@@ -331,8 +389,10 @@ if (!isBrowser()) return dummyReturn;
     theme = _j === void 0 ? defaultOptions.theme : _j,
-    _k = _a.onClick,
-    onClick = _k === void 0 ? undefined : _k,
-    _l = _a.onClose,
-    onClose = _l === void 0 ? undefined : _l,
-    _m = _a.onCloseStart,
-    onCloseStart = _m === void 0 ? undefined : _m;
+    _k = _a.zIndex,
+    zIndex = _k === void 0 ? defaultOptions.zIndex : _k,
+    _l = _a.onClick,
+    onClick = _l === void 0 ? undefined : _l,
+    _m = _a.onClose,
+    onClose = _m === void 0 ? undefined : _m,
+    _o = _a.onCloseStart,
+    onCloseStart = _o === void 0 ? undefined : _o;
   var durationTime = duration || time || defaultOptions.duration || defaultOptions.time;
@@ -345,7 +405,3 @@ var closeOptions = {
   init();
-  var handleClick = function () {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-      args[_i] = arguments[_i];
-    }
+  var handleClick = function (e) {
     if (clickClosable) {
@@ -357,4 +413,22 @@ if (closeTimer) {
     }
-    onClick === null || onClick === void 0 ? void 0 : onClick.apply(void 0, args);
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
   };
+  var startCloseTimer = function (duration, callback) {
+    if (duration === void 0) {
+      duration = durationTime;
+    }
+    if (duration > SET_TIMEOUT_MAX) return;
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+    }
+    closeTimer = window.setTimeout(function () {
+      closeToast(id, __assign(__assign({}, closeOptions), {
+        onCloseStart: function () {
+          var _a;
+          callback === null || callback === void 0 ? void 0 : callback();
+          (_a = closeOptions.onClose) === null || _a === void 0 ? void 0 : _a.call(closeOptions);
+        }
+      }));
+    }, duration);
+  };
   toastComponentList.push({
@@ -364,3 +438,5 @@ id: id,
     position: position,
-    component: /*#__PURE__*/React.createElement(Toast, {
+    startCloseTimer: startCloseTimer,
+    component: /*#__PURE__*/React.createElement(ToastMessage, {
+      id: id,
       message: message,
@@ -372,2 +448,3 @@ className: className,
       theme: theme,
+      zIndex: zIndex || undefined,
       onClick: handleClick
@@ -385,15 +462,2 @@ })
   renderDOM();
-  var startCloseTimer = function (duration) {
-    if (duration === void 0) {
-      duration = durationTime;
-    }
-    if (duration > SET_TIMEOUT_MAX) return;
-    if (closeTimer) {
-      clearTimeout(closeTimer);
-    }
-    closeTimer = window.setTimeout(function () {
-      closeToast(id, closeOptions);
-    }, duration);
-  };
-  startCloseTimer();
   return {
@@ -415,3 +479,4 @@ close: function () {
         toastComponentList[index].message = newMessage;
-        toastComponentList[index].component = /*#__PURE__*/React.createElement(Toast, {
+        toastComponentList[index].component = /*#__PURE__*/React.createElement(ToastMessage, {
+          id: id,
           message: newMessage,
@@ -458,3 +523,3 @@ className: className,
 
-export { Themes, clearToasts, createToast, toast as default, toastConfig };
+export { clearToasts, createToast, toast as default, toastConfig };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -9,16 +9,16 @@ 'use strict';
 function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
         });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
+    }
+    n.default = e;
+    return Object.freeze(n);
 }
@@ -28,17 +28,2 @@
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 /******************************************************************************
@@ -70,2 +55,12 @@ Copyright (c) Microsoft Corporation.
 
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
 function styleInject(css, ref) {
@@ -98,4 +93,4 @@ if ( ref === void 0 ) ref = {};
 
-var css_248z = "#style_toast_container__DT-ei *{box-sizing:border-box}.style_toast-list__QC6Mo{box-sizing:border-box;line-height:1.5;position:fixed;text-align:center;z-index:1000}.style_toast-list__QC6Mo.style_bottom-left__OVYBd{bottom:20px;left:30px;transform:translateX(0) translateZ(0)}.style_toast-list__QC6Mo.style_bottom-center__NH15O{bottom:20px;left:50%;transform:translateX(-50%) translateZ(0)}.style_toast-list__QC6Mo.style_bottom-right__HeaCV{bottom:20px;left:auto;right:30px;transform:translateX(0) translateZ(0)}.style_toast-list__QC6Mo.style_top-left__gMJD1{left:30px;top:30px;transform:translateX(0) translateZ(0)}.style_toast-list__QC6Mo.style_top-center__zZFy4{left:50%;top:30px;transform:translateX(-50%) translateZ(0)}.style_toast-list__QC6Mo.style_top-right__0Fafq{left:auto;right:30px;top:30px;transform:translateX(0) translateZ(0)}.style_toast-list__QC6Mo.style_center__GLmmM{left:50%;top:50%;transform:translate(-50%,-50%) translateZ(0)}.style_toast-message__-UN8x{margin-bottom:10px;opacity:0;transition:height .3s,opacity .3s,transform .3s}.style_top-center__zZFy4 .style_toast-message__-UN8x,.style_top-left__gMJD1 .style_toast-message__-UN8x,.style_top-right__0Fafq .style_toast-message__-UN8x{transform:translateY(-10px)}.style_clickable__F3Zx7{cursor:pointer}.style_toast-message__-UN8x.toast-appear-active,.style_toast-message__-UN8x.toast-enter-active{opacity:1;transform:translateY(0)}.style_toast-message__-UN8x.toast-exit-active{opacity:0;transform:translateY(-10px)}.style_center__GLmmM .style_toast-message__-UN8x.toast-exit-active{transform:translateY(-40px)}.style_toast-content__jaj36{display:inline-block}";
-var styles = {"toast_container":"style_toast_container__DT-ei","toast-list":"style_toast-list__QC6Mo","bottom-left":"style_bottom-left__OVYBd","bottom-center":"style_bottom-center__NH15O","bottom-right":"style_bottom-right__HeaCV","top-left":"style_top-left__gMJD1","top-center":"style_top-center__zZFy4","top-right":"style_top-right__0Fafq","center":"style_center__GLmmM","toast-message":"style_toast-message__-UN8x","clickable":"style_clickable__F3Zx7","toast-content":"style_toast-content__jaj36"};
+var css_248z = "#style_toast_container__DT-ei *{-webkit-box-sizing:border-box;box-sizing:border-box}.style_toast-message__-UN8x.style_bottom-left__OVYBd{bottom:30px;left:30px}.style_toast-message__-UN8x.style_bottom-center__NH15O{bottom:30px;left:50%}.style_toast-message__-UN8x.style_bottom-right__HeaCV{bottom:30px;right:30px}.style_toast-message__-UN8x.style_top-left__gMJD1{left:30px;top:30px}.style_toast-message__-UN8x.style_top-center__zZFy4{left:50%;top:30px}.style_toast-message__-UN8x.style_top-right__0Fafq{right:30px;top:30px}.style_toast-message__-UN8x.style_center__GLmmM{left:50%;top:50%}.style_toast-message__-UN8x{opacity:0;position:fixed;-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s;transition:opacity .3s,transform .3s,-webkit-transform .3s;z-index:1000}.style_toast-message__-UN8x.toast-appear-active,.style_toast-message__-UN8x.toast-enter-active{opacity:1}.style_toast-message__-UN8x.toast-exit-active{opacity:0}.style_toast-content__jaj36{display:inline-block}.style_clickable__F3Zx7{cursor:pointer}";
+var styles = {"toast_container":"style_toast_container__DT-ei","toast-message":"style_toast-message__-UN8x","bottom-left":"style_bottom-left__OVYBd","bottom-center":"style_bottom-center__NH15O","bottom-right":"style_bottom-right__HeaCV","top-left":"style_top-left__gMJD1","top-center":"style_top-center__zZFy4","top-right":"style_top-right__0Fafq","center":"style_center__GLmmM","toast-content":"style_toast-content__jaj36","clickable":"style_clickable__F3Zx7"};
 styleInject(css_248z);
@@ -170,6 +165,79 @@
 
-var Themes = {
-  LIGHT: 'light',
-  DARK: 'dark'
-};
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function ToastMessage(_a) {
+  var id = _a.id,
+    message = _a.message,
+    className = _a.className,
+    clickable = _a.clickable,
+    position = _a.position,
+    isExit = _a.isExit,
+    render = _a.render,
+    theme = _a.theme,
+    offsetX = _a.offsetX,
+    offsetY = _a.offsetY,
+    zIndex = _a.zIndex,
+    onClick = _a.onClick,
+    _onEnter = _a._onEnter;
+  var messageDOM = React.useRef(null);
+  var isTopPosition = position === null || position === void 0 ? void 0 : position.includes('top');
+  var _b = React.useState(false),
+    isEnter = _b[0],
+    setIsEnter = _b[1];
+  var _c = React.useState({
+      transform: "translate(".concat(offsetX, ", ").concat(isTopPosition ? parseInt(offsetY || '0') - 20 : 20, "px)")
+    }),
+    messageStyle = _c[0],
+    setMessageStyle = _c[1];
+  React.useLayoutEffect(function () {
+    if (isExit) return;
+    var transform = "translate(".concat(offsetX, ", ").concat(offsetY, ")");
+    setMessageStyle({
+      zIndex: zIndex,
+      transform: transform,
+      WebkitTransform: transform
+    });
+  }, [isExit, offsetX, offsetY, zIndex]);
+  React.useLayoutEffect(function () {
+    var _a;
+    if (((_a = messageDOM.current) === null || _a === void 0 ? void 0 : _a.clientHeight) == null || isEnter) return;
+    var height = messageDOM.current.clientHeight;
+    if (messageDOM.current) {
+      _onEnter === null || _onEnter === void 0 ? void 0 : _onEnter({
+        target: messageDOM.current,
+        height: height
+      });
+    }
+    setIsEnter(true);
+  }, [isEnter, _onEnter]);
+  var messageClassNames = [styles['toast-message'], styles[position || 'bottom-center'], isEnter ? 'toast-enter-active' : '', isExit ? 'toast-exit-active' : ''].filter(Boolean).join(' ');
+  var contentClassNames = [styles['toast-content'], clickable ? styles['clickable'] : '', "toast-".concat(theme), className].filter(Boolean).join(' ');
+  var clickableProps = {
+    onClick: onClick,
+    tabIndex: 0,
+    role: 'button'
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: messageDOM,
+    id: id.toString(),
+    className: messageClassNames,
+    style: messageStyle
+  }, render ? render(message) : /*#__PURE__*/React.createElement("div", _extends({
+    className: contentClassNames
+  }, clickable && clickableProps), message));
+}
+
 var toastComponentList = [];
@@ -193,3 +261,4 @@ var init = function () {
   maxVisibleToasts: null,
-  theme: null
+  theme: null,
+  zIndex: null
 };
@@ -229,3 +298,50 @@ var isValidPosition = function (position) {
   }
+  if (options.zIndex) {
+    defaultOptions.zIndex = options.zIndex;
+  }
 };
+function ToastContainer() {
+  var handleToastEnter = function (t, e) {
+    toastComponentList.forEach(function (toast) {
+      if (toast.id !== t.id) return;
+      toast.startCloseTimer();
+      toast.height = e.height;
+    });
+    renderDOM();
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, toastComponentList.map(function (t) {
+    var bottomToasts = [];
+    var cloneToastComponentList = __spreadArray([], toastComponentList, true);
+    if (t.position.includes('top')) cloneToastComponentList.reverse();
+    for (var i = cloneToastComponentList.length - 1; i >= 0; i--) {
+      var toast_1 = cloneToastComponentList[i];
+      if (toast_1.id === t.id) break;
+      if (toast_1.position === t.position && !toast_1.isExit) {
+        bottomToasts.push({
+          id: toast_1.id,
+          height: toast_1.height
+        });
+      }
+    }
+    var bottomToastsHeight = bottomToasts.reduce(function (acc, toast) {
+      var _a;
+      var MARGIN = 10;
+      return acc + ((_a = toast.height) !== null && _a !== void 0 ? _a : 0) + MARGIN;
+    }, 0);
+    var offsetX = t.position.includes('left') || t.position.includes('right') ? '0%' : '-50%';
+    var offsetYAlpha = t.position.includes('top') ? 1 : -1;
+    var baseOffsetY = bottomToastsHeight * offsetYAlpha;
+    var offsetY = t.position === 'center' ? "calc(-50% - ".concat(baseOffsetY * -1, "px)") : "".concat(baseOffsetY, "px");
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: t.id
+    }, /*#__PURE__*/React.cloneElement(t.component, {
+      isExit: t.isExit,
+      offsetX: offsetX,
+      offsetY: offsetY,
+      _onEnter: function (event) {
+        return handleToastEnter(t, event);
+      }
+    }));
+  }));
+}
 var renderDOM = function () {
@@ -235,25 +351,3 @@ if (!isBrowser()) return;
   if (!toastContainer) return;
-  var defaultToastList = Object.values(ToastPosition).reduce(function (acc, position) {
-    var _a;
-    return __assign(__assign({}, acc), (_a = {}, _a[position] = [], _a));
-  }, {});
-  var toastListByPosition = toastComponentList.reduce(function (acc, toast) {
-    acc[toast.position].push(toast);
-    return acc;
-  }, defaultToastList);
-  var toastListComponent = Object.entries(toastListByPosition).map(function (_a) {
-    var position = _a[0],
-      toastsByPosition = _a[1];
-    return /*#__PURE__*/React.createElement("div", {
-      key: position,
-      className: "".concat(styles['toast-list'], " ").concat(styles[position])
-    }, toastsByPosition.map(function (t) {
-      return /*#__PURE__*/React.createElement(React.Fragment, {
-        key: t.id
-      }, /*#__PURE__*/React.cloneElement(t.component, {
-        isExit: t.isExit
-      }));
-    }));
-  });
-  render( /*#__PURE__*/React.createElement(React.Fragment, null, toastListComponent), toastContainer);
+  render( /*#__PURE__*/React.createElement(ToastContainer, null), toastContainer);
 };
@@ -266,44 +360,2 @@ var clearToasts = function () {
 };
-var Toast = function (_a) {
-  var message = _a.message,
-    className = _a.className,
-    clickable = _a.clickable,
-    position = _a.position,
-    isExit = _a.isExit,
-    render = _a.render,
-    theme = _a.theme,
-    onClick = _a.onClick;
-  var messageDOM = React.useRef(null);
-  var _b = React.useState(false),
-    isEnter = _b[0],
-    setIsEnter = _b[1];
-  React.useLayoutEffect(function () {
-    if (messageDOM.current && messageDOM.current.clientHeight) {
-      var height_1 = messageDOM.current.clientHeight;
-      messageDOM.current.style.height = '0px';
-      setTimeout(function () {
-        if (messageDOM.current) messageDOM.current.style.height = "".concat(height_1, "px");
-        setIsEnter(true);
-      }, 0);
-    }
-  }, []);
-  React.useLayoutEffect(function () {
-    var topOrCenter = position && (position.indexOf('top') > -1 || position === 'center');
-    if (isExit && position && topOrCenter) {
-      if (messageDOM.current) messageDOM.current.style.height = '0px';
-    }
-  }, [isExit]);
-  var contentClassNames = [styles['toast-content'], clickable ? styles['clickable'] : '', "toast-".concat(theme), className].filter(Boolean).join(' ');
-  var clickableProps = {
-    onClick: onClick,
-    tabIndex: 0,
-    role: 'button'
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    ref: messageDOM,
-    className: "".concat(styles['toast-message'], " ").concat(isEnter ? 'toast-enter-active' : '', " ").concat(isExit ? 'toast-exit-active' : '')
-  }, render ? render(message) : /*#__PURE__*/React.createElement("div", _extends({
-    className: contentClassNames
-  }, clickable && clickableProps), message));
-};
 function closeToast(id, options) {
@@ -330,5 +382,11 @@ var _a;
   var dummyReturn = {
-    close: function () {},
-    updateDuration: function () {},
-    update: function () {}
+    close: function () {
+      return null;
+    },
+    updateDuration: function () {
+      return null;
+    },
+    update: function () {
+      return null;
+    }
   };
@@ -356,8 +414,10 @@ if (!isBrowser()) return dummyReturn;
     theme = _j === void 0 ? defaultOptions.theme : _j,
-    _k = _a.onClick,
-    onClick = _k === void 0 ? undefined : _k,
-    _l = _a.onClose,
-    onClose = _l === void 0 ? undefined : _l,
-    _m = _a.onCloseStart,
-    onCloseStart = _m === void 0 ? undefined : _m;
+    _k = _a.zIndex,
+    zIndex = _k === void 0 ? defaultOptions.zIndex : _k,
+    _l = _a.onClick,
+    onClick = _l === void 0 ? undefined : _l,
+    _m = _a.onClose,
+    onClose = _m === void 0 ? undefined : _m,
+    _o = _a.onCloseStart,
+    onCloseStart = _o === void 0 ? undefined : _o;
   var durationTime = duration || time || defaultOptions.duration || defaultOptions.time;
@@ -370,7 +430,3 @@ var closeOptions = {
   init();
-  var handleClick = function () {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-      args[_i] = arguments[_i];
-    }
+  var handleClick = function (e) {
     if (clickClosable) {
@@ -382,4 +438,22 @@ if (closeTimer) {
     }
-    onClick === null || onClick === void 0 ? void 0 : onClick.apply(void 0, args);
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
   };
+  var startCloseTimer = function (duration, callback) {
+    if (duration === void 0) {
+      duration = durationTime;
+    }
+    if (duration > SET_TIMEOUT_MAX) return;
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+    }
+    closeTimer = window.setTimeout(function () {
+      closeToast(id, __assign(__assign({}, closeOptions), {
+        onCloseStart: function () {
+          var _a;
+          callback === null || callback === void 0 ? void 0 : callback();
+          (_a = closeOptions.onClose) === null || _a === void 0 ? void 0 : _a.call(closeOptions);
+        }
+      }));
+    }, duration);
+  };
   toastComponentList.push({
@@ -389,3 +463,5 @@ id: id,
     position: position,
-    component: /*#__PURE__*/React.createElement(Toast, {
+    startCloseTimer: startCloseTimer,
+    component: /*#__PURE__*/React.createElement(ToastMessage, {
+      id: id,
       message: message,
@@ -397,2 +473,3 @@ className: className,
       theme: theme,
+      zIndex: zIndex || undefined,
       onClick: handleClick
@@ -410,15 +487,2 @@ })
   renderDOM();
-  var startCloseTimer = function (duration) {
-    if (duration === void 0) {
-      duration = durationTime;
-    }
-    if (duration > SET_TIMEOUT_MAX) return;
-    if (closeTimer) {
-      clearTimeout(closeTimer);
-    }
-    closeTimer = window.setTimeout(function () {
-      closeToast(id, closeOptions);
-    }, duration);
-  };
-  startCloseTimer();
   return {
@@ -440,3 +504,4 @@ close: function () {
         toastComponentList[index].message = newMessage;
-        toastComponentList[index].component = /*#__PURE__*/React.createElement(Toast, {
+        toastComponentList[index].component = /*#__PURE__*/React.createElement(ToastMessage, {
+          id: id,
           message: newMessage,
@@ -483,3 +548,2 @@ className: className,
 
-exports.Themes = Themes;
 exports.clearToasts = clearToasts;
@@ -486,0 +550,0 @@ exports.createToast = createToast;

dist/lib/constants.d.ts

@@ -11,1 +11,5 @@ export declare const SET_TIMEOUT_MAX = 2147483647;
 };
+export declare const Themes: {
+    readonly LIGHT: "light";
+    readonly DARK: "dark";
+};

package.json

 {
   "name": "react-simple-toasts",
-  "version": "4.0.1",
+  "version": "5.0.0",
   "description": "React Simple Toasts is a simple and easy-to-use toast message popup for React.",
@@ -35,2 +35,3 @@ "author": "almond-bongbong",
     "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-eslint": "^9.0.4",
     "@rollup/plugin-node-resolve": "^15.0.2",
@@ -42,5 +43,11 @@ "@testing-library/jest-dom": "^5.16.5",
     "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
+    "autoprefixer": "^10.4.14",
     "babel-jest": "^29.5.0",
     "cross-env": "^5.1.4",
     "cssnano": "^6.0.1",
+    "eslint": "^8.42.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "gh-pages": "^4.0.0",
@@ -47,0 +54,0 @@ "identity-obj-proxy": "^3.0.0",

README.md

@@ -54,3 +54,9 @@ # React Simple Toasts 🍞
 import toast from 'react-simple-toasts';
+import 'react-simple-toasts/dist/theme/dark.css'; // import the desired theme
 
+// specify the theme in toastConfig
+toastConfig({
+  theme: 'dark',
+});
+
 function MyComponent() {
@@ -57,0 +63,0 @@ return <button onClick={() => toast('Hello, world!')}>Display Toast</button>;

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52180

increased by11.15%

Number of package files

16

increased by23.08%

Lines of code

1110

increased by15.5%

Number of lines in readme file

91

increased by7.06%

Worsened metrics

Dev dependency count

38

increased by22.58%

No dependency changes