react-simple-toasts - npm Package Compare versions

Comparing version 6.0.1 to 6.1.0-rc.1

dist/component/toast-message.d.ts

 import { ReactElement, ReactNode } from 'react';
 import { ToastEnterEvent, ToastOptions } from '../type/common';
-export interface ToastMessageProps extends Required<Pick<ToastOptions, 'className' | 'clickable' | 'position' | 'render' | 'theme' | 'onClick' | 'loadingText' | 'onClose' | 'onCloseStart'>> {
+export interface ToastMessageProps extends Required<Pick<ToastOptions, 'className' | 'clickable' | 'position' | 'render' | 'theme' | 'onClick' | 'clickClosable' | 'offsetX' | 'offsetY' | 'zIndex' | 'loading' | 'loadingText' | 'onClose' | 'onCloseStart'>> {
     id: number;
     message: ReactNode;
     isExit?: boolean;
-    offsetX?: string;
-    offsetY?: string;
-    baseOffsetX?: number;
-    baseOffsetY?: number;
-    zIndex?: number;
-    loading?: boolean | Promise<unknown>;
+    deltaOffsetX?: string;
+    deltaOffsetY?: string;
     _onEnter?: (e: ToastEnterEvent) => void;
 }
-declare function ToastMessage({ id, message, className, clickable, position, isExit, render, theme, offsetX, offsetY, baseOffsetX, baseOffsetY, zIndex, loading, loadingText, onClick, onClose, onCloseStart, _onEnter, }: ToastMessageProps): ReactElement;
+declare function ToastMessage({ id, message, className, clickable: clickableProp, clickClosable, position, isExit, render, theme, offsetX, offsetY, deltaOffsetX, deltaOffsetY, zIndex, loading, loadingText, onClick, onClose, onCloseStart, _onEnter, }: ToastMessageProps): ReactElement;
 export default ToastMessage;

dist/index.d.ts

 import { ReactNode } from 'react';
 import { Themes } from './lib/constants';
-import { ConfigArgs, Theme, Toast, ToastClickHandler, ToastComponent, ToastOptions, ToastPosition } from './type/common';
-export declare const toastConfig: (options: ConfigArgs) => void;
+import { Theme, Toast, ToastClickHandler, ToastComponent, ToastOptions, ToastPosition, ToastUpdateArgs, ToastUpdateOptions } from './type/common';
+export declare const toastConfig: (options: ToastOptions) => void;
 export declare const clearToasts: () => void;
 declare function toast(message: ReactNode, duration?: number | null): Toast;
 declare function toast(message: ReactNode, options?: ToastOptions): Toast;
-export declare const createToast: (options: ConfigArgs) => typeof toast;
+export declare const createToast: (options: ToastOptions) => typeof toast;
 export default toast;
 export { Themes, toast };
-export type { ToastPosition, Theme, ToastClickHandler, ToastOptions, ConfigArgs, Toast, ToastComponent, };
+export type { ToastPosition, Theme, ToastClickHandler, ToastOptions, Toast, ToastComponent, ToastUpdateOptions, ToastUpdateArgs, };

dist/index.es.js

@@ -5,2 +5,17 @@ import React, { useRef, useState, Fragment, cloneElement } from 'react';
 
+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);
+}
+
 /******************************************************************************
@@ -143,17 +158,2 @@ Copyright (c) Microsoft Corporation.
 
-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);
-}
-
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
@@ -183,3 +183,4 @@
     className = _a.className,
-    clickable = _a.clickable,
+    clickableProp = _a.clickable,
+    clickClosable = _a.clickClosable,
     position = _a.position,
@@ -191,4 +192,4 @@ isExit = _a.isExit,
     offsetY = _a.offsetY,
-    baseOffsetX = _a.baseOffsetX,
-    baseOffsetY = _a.baseOffsetY,
+    deltaOffsetX = _a.deltaOffsetX,
+    deltaOffsetY = _a.deltaOffsetY,
     zIndex = _a.zIndex,
@@ -201,2 +202,3 @@ loading = _a.loading,
     _onEnter = _a._onEnter;
+  var clickable = clickableProp || clickClosable;
   var messageDOM = useRef(null);
@@ -213,3 +215,3 @@ var hasTopPosition = position === null || position === void 0 ? void 0 : position.includes('top');
   var _c = useState({
-      transform: "translate(".concat(offsetX, ", ").concat(isCenterPosition ? 'calc(50% - 20px)' : "".concat(parseInt(offsetY || '0') + 20 * (hasTopPosition ? -1 : 1), "px"), ")")
+      transform: "translate(".concat(deltaOffsetX, ", ").concat(isCenterPosition ? 'calc(50% - 20px)' : "".concat(parseInt(deltaOffsetY || '0') + 20 * (hasTopPosition ? -1 : 1), "px"), ")")
     }),
@@ -224,8 +226,8 @@ messageStyle = _c[0],
     setLoadingColor = _e[1];
-  var top = isCenterPosition ? '50%' : hasTopPosition ? baseOffsetY : undefined;
-  var bottom = hasBottomPosition ? baseOffsetY : undefined;
-  var right = hasRightPosition ? baseOffsetX : undefined;
-  var left = hasCenterPosition || isCenterPosition ? '50%' : hasLeftPosition ? baseOffsetX : undefined;
+  var top = isCenterPosition ? '50%' : hasTopPosition ? offsetY : undefined;
+  var bottom = hasBottomPosition ? offsetY : undefined;
+  var right = hasRightPosition ? offsetX : undefined;
+  var left = hasCenterPosition || isCenterPosition ? '50%' : hasLeftPosition ? offsetX : undefined;
   useIsomorphicLayoutEffect(function () {
-    var transform = "translate(".concat(offsetX, ", ").concat(offsetY, ")");
+    var transform = "translate(".concat(deltaOffsetX, ", ").concat(deltaOffsetY, ")");
     setMessageStyle({
@@ -240,3 +242,3 @@ top: top,
     });
-  }, [offsetX, offsetY, zIndex, top, right, bottom, left]);
+  }, [deltaOffsetX, deltaOffsetY, zIndex, top, right, bottom, left]);
   useIsomorphicLayoutEffect(function () {
@@ -313,2 +315,42 @@ var _a;
 
+function ToastContainer(props) {
+  var toastComponentList = props.toastComponentList,
+    onToastEnter = props.onToastEnter;
+  var handleToastEnter = function (t, e) {
+    toastComponentList.forEach(function (toast) {
+      if (toast.id !== t.id) return;
+      toast.startCloseTimer();
+      toast.height = e.height;
+    });
+    onToastEnter();
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, toastComponentList.map(function (t) {
+    var toastComponents = t.position.includes('top') ? reverse(toastComponentList) : toastComponentList;
+    var currentIndex = toastComponents.findIndex(function (toast) {
+      return toast.id === t.id;
+    });
+    var bottomToasts = toastComponents.slice(currentIndex + 1).filter(function (toast) {
+      return toast.position === t.position && !toast.isExit;
+    });
+    var bottomToastsHeight = bottomToasts.reduce(function (acc, toast) {
+      var _a;
+      return acc + ((_a = toast.height) !== null && _a !== void 0 ? _a : 0) + t.gap;
+    }, 0);
+    var deltaOffsetX = t.position.includes('left') || t.position.includes('right') ? '0%' : '-50%';
+    var offsetYAlpha = t.position.includes('top') ? 1 : -1;
+    var baseOffsetY = bottomToastsHeight * offsetYAlpha;
+    var deltaOffsetY = 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,
+      deltaOffsetX: deltaOffsetX,
+      deltaOffsetY: deltaOffsetY,
+      _onEnter: function (event) {
+        return handleToastEnter(t, event);
+      }
+    }));
+  }));
+}
+
 var toastComponentList = [];
@@ -338,7 +380,9 @@ var init = function () {
   theme: null,
-  zIndex: null,
   loadingText: 'loading',
+  zIndex: 1000,
+  clickable: false,
   onClick: noop,
+  onClose: noop,
   onCloseStart: noop,
-  onClose: noop
+  loading: false
 };
@@ -352,58 +396,10 @@ var isValidPosition = function (position) {
 };
+var validateOptions = function (options) {
+  options.position && isValidPosition(options.position);
+};
 var toastConfig = function (options) {
   if (!isBrowser()) return;
-  if (options.theme) defaultOptions.theme = options.theme;
-  if (options.duration) defaultOptions.duration = options.duration;
-  if (options.className) defaultOptions.className = options.className;
-  if (options.position && isValidPosition(options.position)) defaultOptions.position = options.position;
-  if (options.clickClosable) defaultOptions.clickClosable = options.clickClosable;
-  if (options.render) defaultOptions.render = options.render;
-  if (options.maxVisibleToasts) defaultOptions.maxVisibleToasts = options.maxVisibleToasts;
-  if (options.isReversedOrder) defaultOptions.isReversedOrder = options.isReversedOrder;
-  if (options.zIndex != null) defaultOptions.zIndex = options.zIndex;
-  if (options.offsetX != null) defaultOptions.offsetX = options.offsetX;
-  if (options.offsetY != null) defaultOptions.offsetY = options.offsetY;
-  if (options.gap != null) defaultOptions.gap = options.gap;
-  if (options.loadingText) defaultOptions.loadingText = options.loadingText;
-  if (options.onClick) defaultOptions.onClick = options.onClick;
-  if (options.onCloseStart) defaultOptions.onCloseStart = options.onCloseStart;
-  if (options.onClose) defaultOptions.onClose = options.onClose;
+  validateOptions(options);
+  Object.assign(defaultOptions, options);
 };
-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 toastComponents = t.position.includes('top') ? reverse(toastComponentList) : toastComponentList;
-    var currentIndex = toastComponents.findIndex(function (toast) {
-      return toast.id === t.id;
-    });
-    var bottomToasts = toastComponents.slice(currentIndex + 1).filter(function (toast) {
-      return toast.position === t.position && !toast.isExit;
-    });
-    var bottomToastsHeight = bottomToasts.reduce(function (acc, toast) {
-      var _a;
-      return acc + ((_a = toast.height) !== null && _a !== void 0 ? _a : 0) + t.gap;
-    }, 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 () {
@@ -413,3 +409,6 @@ if (!isBrowser()) return;
   if (!toastContainer) return;
-  render( /*#__PURE__*/React.createElement(ToastContainer, null), toastContainer);
+  render( /*#__PURE__*/React.createElement(ToastContainer, {
+    toastComponentList: toastComponentList,
+    onToastEnter: renderDOM
+  }), toastContainer);
 };
@@ -431,3 +430,3 @@ var clearToasts = function () {
 }
-function renderToast(message, options) {
+function renderToast(message, _options) {
   var dummyReturn = {
@@ -447,37 +446,16 @@ close: function () {
   var id = createId();
+  var options = __assign(__assign({}, defaultOptions), _options);
   var _a = options || {},
+    loading = _a.loading,
+    loadingText = _a.loadingText,
+    onClose = _a.onClose,
+    onCloseStart = _a.onCloseStart,
+    clickClosable = _a.clickClosable,
+    position = _a.position,
+    onClick = _a.onClick,
+    gap = _a.gap,
+    theme = _a.theme,
     duration = _a.duration,
-    _b = _a.clickable,
-    clickable = _b === void 0 ? false : _b,
-    _c = _a.clickClosable,
-    clickClosable = _c === void 0 ? defaultOptions.clickClosable : _c,
-    _d = _a.className,
-    className = _d === void 0 ? defaultOptions.className : _d,
-    _e = _a.position,
-    position = _e === void 0 ? defaultOptions.position : _e,
-    _f = _a.offsetX,
-    offsetX = _f === void 0 ? defaultOptions.offsetX : _f,
-    _g = _a.offsetY,
-    offsetY = _g === void 0 ? defaultOptions.offsetY : _g,
-    _h = _a.gap,
-    gap = _h === void 0 ? defaultOptions.gap : _h,
-    _j = _a.maxVisibleToasts,
-    maxVisibleToasts = _j === void 0 ? defaultOptions.maxVisibleToasts : _j,
-    _k = _a.isReversedOrder,
-    isReversedOrder = _k === void 0 ? defaultOptions.isReversedOrder : _k,
-    _l = _a.render,
-    render = _l === void 0 ? defaultOptions.render : _l,
-    _m = _a.theme,
-    theme = _m === void 0 ? defaultOptions.theme : _m,
-    _o = _a.zIndex,
-    zIndex = _o === void 0 ? defaultOptions.zIndex : _o,
-    _p = _a.onClick,
-    onClick = _p === void 0 ? defaultOptions.onClick : _p,
-    _q = _a.onClose,
-    onClose = _q === void 0 ? defaultOptions.onClose : _q,
-    _r = _a.onCloseStart,
-    onCloseStart = _r === void 0 ? defaultOptions.onCloseStart : _r,
-    _s = _a.loadingText,
-    loadingText = _s === void 0 ? defaultOptions.loadingText : _s,
-    loading = _a.loading;
+    isReversedOrder = _a.isReversedOrder,
+    maxVisibleToasts = _a.maxVisibleToasts;
   var durationTime = duration === undefined ? defaultOptions.duration : duration;
@@ -504,3 +482,3 @@ if (!isValidPosition(position)) ;
     if (duration === void 0) {
-      duration = durationTime;
+      duration = options.duration;
     }
@@ -521,19 +499,9 @@ if (duration === null || duration === 0 || duration > SET_TIMEOUT_MAX) return;
     gap: gap,
-    component: /*#__PURE__*/React.createElement(ToastMessage, {
+    component: /*#__PURE__*/React.createElement(ToastMessage, _extends({}, options, {
       id: id,
       message: message,
-      className: className,
-      clickable: clickable || clickClosable,
-      position: position,
-      baseOffsetX: offsetX,
-      baseOffsetY: offsetY,
-      render: render,
-      theme: theme,
-      zIndex: zIndex || undefined,
-      loading: loading,
-      loadingText: loadingText,
       onClick: handleClick,
       onClose: handleClose,
       onCloseStart: onCloseStart
-    })
+    }))
   };
@@ -569,13 +537,6 @@ if (isReversedOrder) toastComponentList.unshift(newToastComponent);else toastComponentList.push(newToastComponent);
         toast.message = finalMessage;
-        toast.component = /*#__PURE__*/React.createElement(ToastMessage, {
+        toast.component = /*#__PURE__*/React.createElement(ToastMessage, _extends({}, options, {
           id: id,
           message: finalMessage,
-          className: className,
-          clickable: clickable || clickClosable,
-          position: position,
-          baseOffsetX: offsetX,
-          baseOffsetY: offsetY,
-          render: render,
           theme: finalTheme,
-          zIndex: zIndex || undefined,
           loading: finalLoading,
@@ -586,3 +547,3 @@ loadingText: loadingText,
           onCloseStart: onCloseStart
-        });
+        }));
         renderDOM();
@@ -603,7 +564,5 @@ if (newDuration !== undefined) {
 var createToast = function (options) {
-  var toastInstanceId = createId();
   return function (message, durationOrOptions) {
     if (typeof durationOrOptions === 'number') {
       return renderToast(message, {
-        toastInstanceId: toastInstanceId,
         duration: durationOrOptions || options.duration
@@ -613,5 +572,3 @@ });
     if (durationOrOptions === undefined || typeof durationOrOptions === 'object') {
-      var mergedOptions = __assign(__assign({
-        toastInstanceId: toastInstanceId
-      }, options), durationOrOptions);
+      var mergedOptions = __assign(__assign({}, options), durationOrOptions);
       return renderToast(message, mergedOptions);
@@ -618,0 +575,0 @@ }

dist/index.js

@@ -10,16 +10,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);
 }
@@ -30,2 +30,17 @@
 
+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);
+}
+
 /******************************************************************************
@@ -168,17 +183,2 @@ Copyright (c) Microsoft Corporation.
 
-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);
-}
-
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
@@ -208,3 +208,4 @@
     className = _a.className,
-    clickable = _a.clickable,
+    clickableProp = _a.clickable,
+    clickClosable = _a.clickClosable,
     position = _a.position,
@@ -216,4 +217,4 @@ isExit = _a.isExit,
     offsetY = _a.offsetY,
-    baseOffsetX = _a.baseOffsetX,
-    baseOffsetY = _a.baseOffsetY,
+    deltaOffsetX = _a.deltaOffsetX,
+    deltaOffsetY = _a.deltaOffsetY,
     zIndex = _a.zIndex,
@@ -226,2 +227,3 @@ loading = _a.loading,
     _onEnter = _a._onEnter;
+  var clickable = clickableProp || clickClosable;
   var messageDOM = React.useRef(null);
@@ -238,3 +240,3 @@ var hasTopPosition = position === null || position === void 0 ? void 0 : position.includes('top');
   var _c = React.useState({
-      transform: "translate(".concat(offsetX, ", ").concat(isCenterPosition ? 'calc(50% - 20px)' : "".concat(parseInt(offsetY || '0') + 20 * (hasTopPosition ? -1 : 1), "px"), ")")
+      transform: "translate(".concat(deltaOffsetX, ", ").concat(isCenterPosition ? 'calc(50% - 20px)' : "".concat(parseInt(deltaOffsetY || '0') + 20 * (hasTopPosition ? -1 : 1), "px"), ")")
     }),
@@ -249,8 +251,8 @@ messageStyle = _c[0],
     setLoadingColor = _e[1];
-  var top = isCenterPosition ? '50%' : hasTopPosition ? baseOffsetY : undefined;
-  var bottom = hasBottomPosition ? baseOffsetY : undefined;
-  var right = hasRightPosition ? baseOffsetX : undefined;
-  var left = hasCenterPosition || isCenterPosition ? '50%' : hasLeftPosition ? baseOffsetX : undefined;
+  var top = isCenterPosition ? '50%' : hasTopPosition ? offsetY : undefined;
+  var bottom = hasBottomPosition ? offsetY : undefined;
+  var right = hasRightPosition ? offsetX : undefined;
+  var left = hasCenterPosition || isCenterPosition ? '50%' : hasLeftPosition ? offsetX : undefined;
   useIsomorphicLayoutEffect(function () {
-    var transform = "translate(".concat(offsetX, ", ").concat(offsetY, ")");
+    var transform = "translate(".concat(deltaOffsetX, ", ").concat(deltaOffsetY, ")");
     setMessageStyle({
@@ -265,3 +267,3 @@ top: top,
     });
-  }, [offsetX, offsetY, zIndex, top, right, bottom, left]);
+  }, [deltaOffsetX, deltaOffsetY, zIndex, top, right, bottom, left]);
   useIsomorphicLayoutEffect(function () {
@@ -338,2 +340,42 @@ var _a;
 
+function ToastContainer(props) {
+  var toastComponentList = props.toastComponentList,
+    onToastEnter = props.onToastEnter;
+  var handleToastEnter = function (t, e) {
+    toastComponentList.forEach(function (toast) {
+      if (toast.id !== t.id) return;
+      toast.startCloseTimer();
+      toast.height = e.height;
+    });
+    onToastEnter();
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, toastComponentList.map(function (t) {
+    var toastComponents = t.position.includes('top') ? reverse(toastComponentList) : toastComponentList;
+    var currentIndex = toastComponents.findIndex(function (toast) {
+      return toast.id === t.id;
+    });
+    var bottomToasts = toastComponents.slice(currentIndex + 1).filter(function (toast) {
+      return toast.position === t.position && !toast.isExit;
+    });
+    var bottomToastsHeight = bottomToasts.reduce(function (acc, toast) {
+      var _a;
+      return acc + ((_a = toast.height) !== null && _a !== void 0 ? _a : 0) + t.gap;
+    }, 0);
+    var deltaOffsetX = t.position.includes('left') || t.position.includes('right') ? '0%' : '-50%';
+    var offsetYAlpha = t.position.includes('top') ? 1 : -1;
+    var baseOffsetY = bottomToastsHeight * offsetYAlpha;
+    var deltaOffsetY = 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,
+      deltaOffsetX: deltaOffsetX,
+      deltaOffsetY: deltaOffsetY,
+      _onEnter: function (event) {
+        return handleToastEnter(t, event);
+      }
+    }));
+  }));
+}
+
 var toastComponentList = [];
@@ -363,7 +405,9 @@ var init = function () {
   theme: null,
-  zIndex: null,
   loadingText: 'loading',
+  zIndex: 1000,
+  clickable: false,
   onClick: noop,
+  onClose: noop,
   onCloseStart: noop,
-  onClose: noop
+  loading: false
 };
@@ -377,58 +421,10 @@ var isValidPosition = function (position) {
 };
+var validateOptions = function (options) {
+  options.position && isValidPosition(options.position);
+};
 var toastConfig = function (options) {
   if (!isBrowser()) return;
-  if (options.theme) defaultOptions.theme = options.theme;
-  if (options.duration) defaultOptions.duration = options.duration;
-  if (options.className) defaultOptions.className = options.className;
-  if (options.position && isValidPosition(options.position)) defaultOptions.position = options.position;
-  if (options.clickClosable) defaultOptions.clickClosable = options.clickClosable;
-  if (options.render) defaultOptions.render = options.render;
-  if (options.maxVisibleToasts) defaultOptions.maxVisibleToasts = options.maxVisibleToasts;
-  if (options.isReversedOrder) defaultOptions.isReversedOrder = options.isReversedOrder;
-  if (options.zIndex != null) defaultOptions.zIndex = options.zIndex;
-  if (options.offsetX != null) defaultOptions.offsetX = options.offsetX;
-  if (options.offsetY != null) defaultOptions.offsetY = options.offsetY;
-  if (options.gap != null) defaultOptions.gap = options.gap;
-  if (options.loadingText) defaultOptions.loadingText = options.loadingText;
-  if (options.onClick) defaultOptions.onClick = options.onClick;
-  if (options.onCloseStart) defaultOptions.onCloseStart = options.onCloseStart;
-  if (options.onClose) defaultOptions.onClose = options.onClose;
+  validateOptions(options);
+  Object.assign(defaultOptions, options);
 };
-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 toastComponents = t.position.includes('top') ? reverse(toastComponentList) : toastComponentList;
-    var currentIndex = toastComponents.findIndex(function (toast) {
-      return toast.id === t.id;
-    });
-    var bottomToasts = toastComponents.slice(currentIndex + 1).filter(function (toast) {
-      return toast.position === t.position && !toast.isExit;
-    });
-    var bottomToastsHeight = bottomToasts.reduce(function (acc, toast) {
-      var _a;
-      return acc + ((_a = toast.height) !== null && _a !== void 0 ? _a : 0) + t.gap;
-    }, 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 () {
@@ -438,3 +434,6 @@ if (!isBrowser()) return;
   if (!toastContainer) return;
-  render( /*#__PURE__*/React.createElement(ToastContainer, null), toastContainer);
+  render( /*#__PURE__*/React.createElement(ToastContainer, {
+    toastComponentList: toastComponentList,
+    onToastEnter: renderDOM
+  }), toastContainer);
 };
@@ -456,3 +455,3 @@ var clearToasts = function () {
 }
-function renderToast(message, options) {
+function renderToast(message, _options) {
   var dummyReturn = {
@@ -472,37 +471,16 @@ close: function () {
   var id = createId();
+  var options = __assign(__assign({}, defaultOptions), _options);
   var _a = options || {},
+    loading = _a.loading,
+    loadingText = _a.loadingText,
+    onClose = _a.onClose,
+    onCloseStart = _a.onCloseStart,
+    clickClosable = _a.clickClosable,
+    position = _a.position,
+    onClick = _a.onClick,
+    gap = _a.gap,
+    theme = _a.theme,
     duration = _a.duration,
-    _b = _a.clickable,
-    clickable = _b === void 0 ? false : _b,
-    _c = _a.clickClosable,
-    clickClosable = _c === void 0 ? defaultOptions.clickClosable : _c,
-    _d = _a.className,
-    className = _d === void 0 ? defaultOptions.className : _d,
-    _e = _a.position,
-    position = _e === void 0 ? defaultOptions.position : _e,
-    _f = _a.offsetX,
-    offsetX = _f === void 0 ? defaultOptions.offsetX : _f,
-    _g = _a.offsetY,
-    offsetY = _g === void 0 ? defaultOptions.offsetY : _g,
-    _h = _a.gap,
-    gap = _h === void 0 ? defaultOptions.gap : _h,
-    _j = _a.maxVisibleToasts,
-    maxVisibleToasts = _j === void 0 ? defaultOptions.maxVisibleToasts : _j,
-    _k = _a.isReversedOrder,
-    isReversedOrder = _k === void 0 ? defaultOptions.isReversedOrder : _k,
-    _l = _a.render,
-    render = _l === void 0 ? defaultOptions.render : _l,
-    _m = _a.theme,
-    theme = _m === void 0 ? defaultOptions.theme : _m,
-    _o = _a.zIndex,
-    zIndex = _o === void 0 ? defaultOptions.zIndex : _o,
-    _p = _a.onClick,
-    onClick = _p === void 0 ? defaultOptions.onClick : _p,
-    _q = _a.onClose,
-    onClose = _q === void 0 ? defaultOptions.onClose : _q,
-    _r = _a.onCloseStart,
-    onCloseStart = _r === void 0 ? defaultOptions.onCloseStart : _r,
-    _s = _a.loadingText,
-    loadingText = _s === void 0 ? defaultOptions.loadingText : _s,
-    loading = _a.loading;
+    isReversedOrder = _a.isReversedOrder,
+    maxVisibleToasts = _a.maxVisibleToasts;
   var durationTime = duration === undefined ? defaultOptions.duration : duration;
@@ -529,3 +507,3 @@ if (!isValidPosition(position)) ;
     if (duration === void 0) {
-      duration = durationTime;
+      duration = options.duration;
     }
@@ -546,19 +524,9 @@ if (duration === null || duration === 0 || duration > SET_TIMEOUT_MAX) return;
     gap: gap,
-    component: /*#__PURE__*/React.createElement(ToastMessage, {
+    component: /*#__PURE__*/React.createElement(ToastMessage, _extends({}, options, {
       id: id,
       message: message,
-      className: className,
-      clickable: clickable || clickClosable,
-      position: position,
-      baseOffsetX: offsetX,
-      baseOffsetY: offsetY,
-      render: render,
-      theme: theme,
-      zIndex: zIndex || undefined,
-      loading: loading,
-      loadingText: loadingText,
       onClick: handleClick,
       onClose: handleClose,
       onCloseStart: onCloseStart
-    })
+    }))
   };
@@ -594,13 +562,6 @@ if (isReversedOrder) toastComponentList.unshift(newToastComponent);else toastComponentList.push(newToastComponent);
         toast.message = finalMessage;
-        toast.component = /*#__PURE__*/React.createElement(ToastMessage, {
+        toast.component = /*#__PURE__*/React.createElement(ToastMessage, _extends({}, options, {
           id: id,
           message: finalMessage,
-          className: className,
-          clickable: clickable || clickClosable,
-          position: position,
-          baseOffsetX: offsetX,
-          baseOffsetY: offsetY,
-          render: render,
           theme: finalTheme,
-          zIndex: zIndex || undefined,
           loading: finalLoading,
@@ -611,3 +572,3 @@ loadingText: loadingText,
           onCloseStart: onCloseStart
-        });
+        }));
         renderDOM();
@@ -628,7 +589,5 @@ if (newDuration !== undefined) {
 var createToast = function (options) {
-  var toastInstanceId = createId();
   return function (message, durationOrOptions) {
     if (typeof durationOrOptions === 'number') {
       return renderToast(message, {
-        toastInstanceId: toastInstanceId,
         duration: durationOrOptions || options.duration
@@ -638,5 +597,3 @@ });
     if (durationOrOptions === undefined || typeof durationOrOptions === 'object') {
-      var mergedOptions = __assign(__assign({
-        toastInstanceId: toastInstanceId
-      }, options), durationOrOptions);
+      var mergedOptions = __assign(__assign({}, options), durationOrOptions);
       return renderToast(message, mergedOptions);
@@ -643,0 +600,0 @@ }

dist/type/common.d.ts

 import { ReactElement, ReactNode, SyntheticEvent } from 'react';
 import { Themes, ToastPosition as Position } from '../lib/constants';
+import { ToastMessageProps } from '../component/toast-message';
 export type ToastPosition = (typeof Position)[keyof typeof Position];
@@ -12,2 +13,5 @@ export type Theme = (typeof Themes)[keyof typeof Themes];
     position?: ToastPosition;
+    offsetX?: number;
+    offsetY?: number;
+    gap?: number;
     maxVisibleToasts?: number | null;
@@ -17,3 +21,3 @@ isReversedOrder?: boolean;
     theme?: Theme | string | null;
-    zIndex?: number | null;
+    zIndex?: number;
     loading?: boolean | Promise<unknown>;
@@ -30,7 +34,2 @@ loadingText?: ReactNode;
 };
-export type ConfigArgs = Pick<ToastOptions, 'duration' | 'className' | 'clickClosable' | 'position' | 'maxVisibleToasts' | 'render' | 'theme' | 'zIndex' | 'isReversedOrder' | 'onClick' | 'onCloseStart' | 'onClose' | 'loadingText'> & {
-    offsetX?: number;
-    offsetY?: number;
-    gap?: number;
-};
 export type ToastUpdateOptions = {
@@ -52,3 +51,3 @@ message?: ReactNode;
     position: ToastPosition;
-    component: ReactElement;
+    component: ReactElement<ToastMessageProps>;
     isExit?: boolean;
@@ -55,0 +54,0 @@ width?: number;

package.json

 {
   "name": "react-simple-toasts",
-  "version": "6.0.1",
+  "version": "6.1.0-rc.1",
   "description": "Instant, lightweight toast notifications for React. No providers or containers needed.",
@@ -19,6 +19,11 @@ "author": "almond-bongbong",
     "./style.css": "./dist/style.css",
-    "./style.css.map": "./dist/style.css.map",
-    "./dist/style.css": "./dist/style.css",
-    "./dist/style.css.map": "./dist/style.css.map"
+    "./*": "./*"
   },
+  "typesVersions": {
+    "*": {
+      "./*": [
+        "./*"
+      ]
+    }
+  },
   "scripts": {
@@ -86,5 +91,2 @@ "test": "jest",
   ],
-  "engines": {
-    "node": ">=16.17.0 <=20.x"
-  },
   "sideEffects": [
@@ -91,0 +93,0 @@ "*.css"

README.md

@@ -112,13 +112,13 @@ # React Simple Toasts 🍞🚀
             <td align="center">
-                <a href="https://github.com/Kim-Yeon-ho">
-                    <img src="https://avatars.githubusercontent.com/u/81131715?v=4" width="100;" alt="Kim-Yeon-ho"/>
+                <a href="https://github.com/hemengke1997">
+                    <img src="https://avatars.githubusercontent.com/u/49073282?v=4" width="100;" alt="hemengke1997"/>
                     <br />
-                    <sub><b>Hardy</b></sub>
+                    <sub><b>Minko</b></sub>
                 </a>
             </td>
             <td align="center">
-                <a href="https://github.com/hemengke1997">
-                    <img src="https://avatars.githubusercontent.com/u/49073282?v=4" width="100;" alt="hemengke1997"/>
+                <a href="https://github.com/Kim-Yeon-ho">
+                    <img src="https://avatars.githubusercontent.com/u/81131715?v=4" width="100;" alt="Kim-Yeon-ho"/>
                     <br />
-                    <sub><b>Minko</b></sub>
+                    <sub><b>Hardy</b></sub>
                 </a>
@@ -125,0 +125,0 @@ </td>

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

AI-detected possible typosquat

Supply chain risk

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

Found 1 instance in 1 package

Improved metrics

Number of package files

34

increased by3.03%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

62140

decreased by-6.81%

Lines of code

1517

decreased by-5.25%

Number of low quality alerts

1

increased byInfinity%

No dependency changes