funda-ui 1.0.300 → 1.0.312

package/Toast/index.css

@@ -3,39 +3,45 @@
 /* ====================================================== */
 .toasts__wrapper {
   --bs-toast-zindex: 1090;
-  width: 350px;
+  --toasts-offset-top: 35px;
+  --toasts-offset-bottom: 15px;
+  --toasts-offset-bothsides: 15px;
+  --toasts-container-gap: 0.5rem;
+  --toasts-container-width: 350px;
+  width: var(--toasts-container-width);
   position: fixed;
   left: 50%;
   bottom: 0;
   z-index: var(--bs-toast-zindex);
   pointer-events: none;
   transition: 0.1s ease-in-out;
+  /* cascading divs */
 }
 .toasts__wrapper--bottom-left {
-  left: 15px;
+  left: var(--toasts-offset-bothsides);
 }
 .toasts__wrapper--bottom-right {
   left: auto;
-  right: 15px;
+  right: var(--toasts-offset-bothsides);
 }
 .toasts__wrapper--bottom-center {
   left: 50%;
   transform: translateX(-50%);
 }
 .toasts__wrapper--top-left {
-  left: 15px;
+  left: var(--toasts-offset-bothsides);
   bottom: auto;
-  top: 35px;
+  top: var(--toasts-offset-top);
 }
 .toasts__wrapper--top-right {
   left: auto;
-  right: 15px;
-  top: 35px;
+  right: var(--toasts-offset-bothsides);
+  top: var(--toasts-offset-top);
 }
 .toasts__wrapper--top-center {
   left: 50%;
   transform: translateX(-50%);
-  top: 35px;
+  top: var(--toasts-offset-top);
 }
 .toasts__wrapper--vertical-center {
   left: 50%;
@@ -46,7 +52,7 @@
 .toasts__wrapper .toasts {
   position: relative;
   width: 100%;
-  bottom: 15px;
+  bottom: var(--toasts-offset-bottom);
   display: flex;
   flex-flow: column-reverse nowrap;
 }
@@ -60,7 +66,13 @@
   background-color: transparent;
   pointer-events: none;
 }
-.toasts__wrapper .toasts:hover .toast-container {
+.toasts__wrapper .toast-container {
+  margin-bottom: var(--toasts-container-gap);
+}
+.toasts__wrapper.toasts__wrapper--cascading .toast-container {
+  margin-bottom: 0;
+}
+.toasts__wrapper.toasts__wrapper--cascading .toasts:hover .toast-container {
   transform: perspective(100px) translateZ(0) !important;
 }
 

package/Toast/index.d.ts

@@ -19,6 +19,8 @@ declare type ToastProps = {
     autoCloseReverse?: boolean;
     /** You can not close pop-win when it is enabled */
     lock?: boolean;
+    /** Whether to use cascading styles */
+    cascading?: boolean;
     /** Self-defined class name for body*/
     schemeBody?: string;
     /** Self-defined class name for header */
@@ -29,7 +31,7 @@ declare type ToastProps = {
     closeDisabled?: boolean;
     /** -- */
     id?: string;
-    onClose?: (e: any, data: any[]) => void;
+    onClose?: (e: HTMLDivElement, currentIndex: number, data: HTMLDivElement[]) => void;
 };
 declare const Toast: (props: ToastProps) => JSX.Element;
 export default Toast;

package/Toast/index.js

@@ -111,17 +111,19 @@ var Item = function Item(props) {
     message = props.message,
     depth = props.depth,
     lock = props.lock,
+    cascading = props.cascading,
     schemeBody = props.schemeBody,
     schemeHeader = props.schemeHeader,
     closeBtnColor = props.closeBtnColor,
-    closeDisabled = props.closeDisabled,
-    closeEv = props.closeEv;
+    closeDisabled = props.closeDisabled;
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "toast-container",
     "data-index": index,
-    style: {
+    style: cascading ? {
       transform: "perspective(100px) translateZ(-".concat(2 * index, "px) translateY(").concat(35 * index, "px)"),
       zIndex: depth
+    } : {
+      zIndex: depth
     }
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "toast fade show ".concat(schemeBody ? schemeBody : ''),
@@ -174,6 +176,7 @@ var Toast = function Toast(props) {
     autoCloseTime = props.autoCloseTime,
     autoCloseReverse = props.autoCloseReverse,
     lock = props.lock,
+    cascading = props.cascading,
     data = props.data,
     schemeBody = props.schemeBody,
     schemeHeader = props.schemeHeader,
@@ -185,6 +188,7 @@ var Toast = function Toast(props) {
   var idRes = id || uniqueID;
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var depth = data.length + 1;
+  var cascadingEnabled = typeof cascading === 'undefined' ? true : cascading;
   function init() {
     // Move HTML templates to tag end body </body>
     // render() don't use "Fragment", in order to avoid error "Failed to execute 'insertBefore' on 'Node'"
@@ -195,7 +199,8 @@ var Toast = function Toast(props) {
       [].slice.call(rootRef.current.querySelectorAll('[data-close]')).forEach(function (node) {
         node.addEventListener('pointerdown', function (e) {
           var index = node.dataset.index;
-          handleClose(index);
+          var currentItem = node.closest('.toast-container');
+          handleClose(index, currentItem);
         });
       });
     }
@@ -205,11 +210,11 @@ var Toast = function Toast(props) {
     var $toast = document.querySelector("#".concat(rootRef.current.id));
     if ($toast !== null) {
       if ($toast.dataset.async == 'true') {
-        var _list = rootRef.current.querySelectorAll('.toast-container');
-        [].slice.call(_list).forEach(function (node, i) {
+        var _list = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
+        _list.forEach(function (node, i) {
           node.classList.remove('hide-end');
           // rearrange
-          node.style.transform = "perspective(100px) translateZ(-".concat(2 * i, "px) translateY(").concat(35 * i, "px)");
+          if (cascadingEnabled) node.style.transform = "perspective(100px) translateZ(-".concat(2 * i, "px) translateY(").concat(35 * i, "px)");
         });
       }
     }
@@ -222,45 +227,42 @@ var Toast = function Toast(props) {
       autoClose(0, items, _autoCloseTime);
     }
   }
-  function handleClose(index) {
-    var items = JSON.parse(JSON.stringify(data));
-    if (items[index] !== undefined) {
-      var _list = rootRef.current.querySelectorAll('.toast-container');
-      _list[index].classList.add('hide-start');
+  function handleClose(index, currentItem) {
+    var _list = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
+    currentItem.classList.add('hide-start');
 
-      //Let the removed animation show
-      setTimeout(function () {
-        [].slice.call(_list).forEach(function (node, i) {
-          node.classList.remove('hide-start');
-        });
+    //Let the removed animation show
+    setTimeout(function () {
+      _list.forEach(function (node, i) {
+        node.classList.remove('hide-start');
+      });
 
-        // remove current
-        _list[index].classList.add('hide-end');
+      // remove current
+      currentItem.classList.add('hide-end');
 
-        // rearrange
-        [].slice.call(_list).filter(function (node) {
+      // rearrange
+      if (cascadingEnabled) {
+        _list.filter(function (node) {
           return !node.classList.contains('hide-end');
         }).forEach(function (node, index) {
           node.style.transform = "perspective(100px) translateZ(-".concat(2 * index, "px) translateY(").concat(35 * index, "px)");
         });
+      }
 
-        //
-        onClose === null || onClose === void 0 ? void 0 : onClose(rootRef.current, items);
-      }, 300);
-    }
+      //
+      onClose === null || onClose === void 0 ? void 0 : onClose(rootRef.current, Number(index), _list.filter(function (node) {
+        return !node.classList.contains('hide-end');
+      }));
+    }, 300);
   }
   function autoClose(index, items) {
     var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 3000;
     if (items.length === index) {
-      //
-      onClose === null || onClose === void 0 ? void 0 : onClose(rootRef.current, items);
-
-      //
       clearTimeout(window.setCloseToast);
       return;
     }
     window.setCloseToast = setTimeout(function () {
-      var _list = rootRef.current.querySelectorAll('.toast-container');
+      var _list = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
       if (autoCloseReverse) {
         _list[items.length - index].classList.add('hide-start');
       } else {
@@ -269,26 +271,39 @@ var Toast = function Toast(props) {
 
       //Let the removed animation show
       setTimeout(function () {
-        [].slice.call(_list).forEach(function (node) {
+        _list.forEach(function (node) {
           node.classList.remove('hide-start');
         });
 
         // remove current
         if (autoCloseReverse) {
           _list[items.length - index].classList.add('hide-end');
+
+          //
+          onClose === null || onClose === void 0 ? void 0 : onClose(rootRef.current, Number(items.length - index), _list.filter(function (node) {
+            return !node.classList.contains('hide-end');
+          }));
         } else {
           _list[index - 1].classList.add('hide-end');
+          //
+          onClose === null || onClose === void 0 ? void 0 : onClose(rootRef.current, Number(index - 1), _list.filter(function (node) {
+            return !node.classList.contains('hide-end');
+          }));
         }
 
         // rearrange
-        [].slice.call(_list).filter(function (node) {
-          return !node.classList.contains('hide-end');
-        }).forEach(function (node, i) {
-          node.style.transform = "perspective(100px) translateZ(-".concat(2 * i, "px) translateY(").concat(35 * i, "px)");
-        });
+        if (cascadingEnabled) {
+          _list.filter(function (node) {
+            return !node.classList.contains('hide-end');
+          }).forEach(function (node, i) {
+            node.style.transform = "perspective(100px) translateZ(-".concat(2 * i, "px) translateY(").concat(35 * i, "px)");
+          });
+        }
+
+        //
         autoClose(index, items, delay);
       }, 300);
-    }, delay * (index + 1));
+    }, delay);
     index++;
   }
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
@@ -305,12 +320,17 @@ var Toast = function Toast(props) {
       // Remove all toasts
       var _el = document.querySelector("#toasts__wrapper-".concat(idRes));
       if (_el !== null) _el.remove();
+
+      // remove all events
+      [].slice.call(rootRef.current.querySelectorAll('[data-close]')).forEach(function (node) {
+        node.replaceWith(node.cloneNode(true));
+      });
     };
   }, [data]);
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     id: "toasts__wrapper-".concat(idRes),
     "data-async": async ? async : false,
-    className: "toasts__wrapper toasts__wrapper--".concat(direction ? direction : 'bottom-center'),
+    className: "toasts__wrapper toasts__wrapper--".concat(direction ? direction : 'bottom-center', " ").concat(cascadingEnabled ? 'toasts__wrapper--cascading' : ''),
     ref: rootRef
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "toasts"
@@ -322,12 +342,12 @@ var Toast = function Toast(props) {
       title: item.title,
       note: item.note,
       lock: lock,
+      cascading: cascadingEnabled,
       schemeBody: schemeBody,
       schemeHeader: schemeHeader,
       closeBtnColor: closeBtnColor,
       closeDisabled: closeDisabled,
-      message: item.message,
-      closeEv: handleClose
+      message: item.message
     });
   }))));
 };

package/lib/cjs/Toast/index.d.ts

@@ -19,6 +19,8 @@ declare type ToastProps = {
     autoCloseReverse?: boolean;
     /** You can not close pop-win when it is enabled */
     lock?: boolean;
+    /** Whether to use cascading styles */
+    cascading?: boolean;
     /** Self-defined class name for body*/
     schemeBody?: string;
     /** Self-defined class name for header */
@@ -29,7 +31,7 @@ declare type ToastProps = {
     closeDisabled?: boolean;
     /** -- */
     id?: string;
-    onClose?: (e: any, data: any[]) => void;
+    onClose?: (e: HTMLDivElement, currentIndex: number, data: HTMLDivElement[]) => void;
 };
 declare const Toast: (props: ToastProps) => JSX.Element;
 export default Toast;

package/lib/cjs/Toast/index.js

@@ -111,17 +111,19 @@ var Item = function Item(props) {
     message = props.message,
     depth = props.depth,
     lock = props.lock,
+    cascading = props.cascading,
     schemeBody = props.schemeBody,
     schemeHeader = props.schemeHeader,
     closeBtnColor = props.closeBtnColor,
-    closeDisabled = props.closeDisabled,
-    closeEv = props.closeEv;
+    closeDisabled = props.closeDisabled;
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "toast-container",
     "data-index": index,
-    style: {
+    style: cascading ? {
       transform: "perspective(100px) translateZ(-".concat(2 * index, "px) translateY(").concat(35 * index, "px)"),
       zIndex: depth
+    } : {
+      zIndex: depth
     }
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "toast fade show ".concat(schemeBody ? schemeBody : ''),
@@ -174,6 +176,7 @@ var Toast = function Toast(props) {
     autoCloseTime = props.autoCloseTime,
     autoCloseReverse = props.autoCloseReverse,
     lock = props.lock,
+    cascading = props.cascading,
     data = props.data,
     schemeBody = props.schemeBody,
     schemeHeader = props.schemeHeader,
@@ -185,6 +188,7 @@ var Toast = function Toast(props) {
   var idRes = id || uniqueID;
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var depth = data.length + 1;
+  var cascadingEnabled = typeof cascading === 'undefined' ? true : cascading;
   function init() {
     // Move HTML templates to tag end body </body>
     // render() don't use "Fragment", in order to avoid error "Failed to execute 'insertBefore' on 'Node'"
@@ -195,7 +199,8 @@ var Toast = function Toast(props) {
       [].slice.call(rootRef.current.querySelectorAll('[data-close]')).forEach(function (node) {
         node.addEventListener('pointerdown', function (e) {
           var index = node.dataset.index;
-          handleClose(index);
+          var currentItem = node.closest('.toast-container');
+          handleClose(index, currentItem);
         });
       });
     }
@@ -205,11 +210,11 @@ var Toast = function Toast(props) {
     var $toast = document.querySelector("#".concat(rootRef.current.id));
     if ($toast !== null) {
       if ($toast.dataset.async == 'true') {
-        var _list = rootRef.current.querySelectorAll('.toast-container');
-        [].slice.call(_list).forEach(function (node, i) {
+        var _list = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
+        _list.forEach(function (node, i) {
           node.classList.remove('hide-end');
           // rearrange
-          node.style.transform = "perspective(100px) translateZ(-".concat(2 * i, "px) translateY(").concat(35 * i, "px)");
+          if (cascadingEnabled) node.style.transform = "perspective(100px) translateZ(-".concat(2 * i, "px) translateY(").concat(35 * i, "px)");
         });
       }
     }
@@ -222,45 +227,42 @@ var Toast = function Toast(props) {
       autoClose(0, items, _autoCloseTime);
     }
   }
-  function handleClose(index) {
-    var items = JSON.parse(JSON.stringify(data));
-    if (items[index] !== undefined) {
-      var _list = rootRef.current.querySelectorAll('.toast-container');
-      _list[index].classList.add('hide-start');
+  function handleClose(index, currentItem) {
+    var _list = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
+    currentItem.classList.add('hide-start');
 
-      //Let the removed animation show
-      setTimeout(function () {
-        [].slice.call(_list).forEach(function (node, i) {
-          node.classList.remove('hide-start');
-        });
+    //Let the removed animation show
+    setTimeout(function () {
+      _list.forEach(function (node, i) {
+        node.classList.remove('hide-start');
+      });
 
-        // remove current
-        _list[index].classList.add('hide-end');
+      // remove current
+      currentItem.classList.add('hide-end');
 
-        // rearrange
-        [].slice.call(_list).filter(function (node) {
+      // rearrange
+      if (cascadingEnabled) {
+        _list.filter(function (node) {
           return !node.classList.contains('hide-end');
         }).forEach(function (node, index) {
           node.style.transform = "perspective(100px) translateZ(-".concat(2 * index, "px) translateY(").concat(35 * index, "px)");
         });
+      }
 
-        //
-        onClose === null || onClose === void 0 ? void 0 : onClose(rootRef.current, items);
-      }, 300);
-    }
+      //
+      onClose === null || onClose === void 0 ? void 0 : onClose(rootRef.current, Number(index), _list.filter(function (node) {
+        return !node.classList.contains('hide-end');
+      }));
+    }, 300);
   }
   function autoClose(index, items) {
     var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 3000;
     if (items.length === index) {
-      //
-      onClose === null || onClose === void 0 ? void 0 : onClose(rootRef.current, items);
-
-      //
       clearTimeout(window.setCloseToast);
       return;
     }
     window.setCloseToast = setTimeout(function () {
-      var _list = rootRef.current.querySelectorAll('.toast-container');
+      var _list = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
       if (autoCloseReverse) {
         _list[items.length - index].classList.add('hide-start');
       } else {
@@ -269,26 +271,39 @@ var Toast = function Toast(props) {
 
       //Let the removed animation show
       setTimeout(function () {
-        [].slice.call(_list).forEach(function (node) {
+        _list.forEach(function (node) {
           node.classList.remove('hide-start');
         });
 
         // remove current
         if (autoCloseReverse) {
           _list[items.length - index].classList.add('hide-end');
+
+          //
+          onClose === null || onClose === void 0 ? void 0 : onClose(rootRef.current, Number(items.length - index), _list.filter(function (node) {
+            return !node.classList.contains('hide-end');
+          }));
         } else {
           _list[index - 1].classList.add('hide-end');
+          //
+          onClose === null || onClose === void 0 ? void 0 : onClose(rootRef.current, Number(index - 1), _list.filter(function (node) {
+            return !node.classList.contains('hide-end');
+          }));
         }
 
         // rearrange
-        [].slice.call(_list).filter(function (node) {
-          return !node.classList.contains('hide-end');
-        }).forEach(function (node, i) {
-          node.style.transform = "perspective(100px) translateZ(-".concat(2 * i, "px) translateY(").concat(35 * i, "px)");
-        });
+        if (cascadingEnabled) {
+          _list.filter(function (node) {
+            return !node.classList.contains('hide-end');
+          }).forEach(function (node, i) {
+            node.style.transform = "perspective(100px) translateZ(-".concat(2 * i, "px) translateY(").concat(35 * i, "px)");
+          });
+        }
+
+        //
         autoClose(index, items, delay);
       }, 300);
-    }, delay * (index + 1));
+    }, delay);
     index++;
   }
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
@@ -305,12 +320,17 @@ var Toast = function Toast(props) {
       // Remove all toasts
       var _el = document.querySelector("#toasts__wrapper-".concat(idRes));
       if (_el !== null) _el.remove();
+
+      // remove all events
+      [].slice.call(rootRef.current.querySelectorAll('[data-close]')).forEach(function (node) {
+        node.replaceWith(node.cloneNode(true));
+      });
     };
   }, [data]);
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     id: "toasts__wrapper-".concat(idRes),
     "data-async": async ? async : false,
-    className: "toasts__wrapper toasts__wrapper--".concat(direction ? direction : 'bottom-center'),
+    className: "toasts__wrapper toasts__wrapper--".concat(direction ? direction : 'bottom-center', " ").concat(cascadingEnabled ? 'toasts__wrapper--cascading' : ''),
     ref: rootRef
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "toasts"
@@ -322,12 +342,12 @@ var Toast = function Toast(props) {
       title: item.title,
       note: item.note,
       lock: lock,
+      cascading: cascadingEnabled,
       schemeBody: schemeBody,
       schemeHeader: schemeHeader,
       closeBtnColor: closeBtnColor,
       closeDisabled: closeDisabled,
-      message: item.message,
-      closeEv: handleClose
+      message: item.message
     });
   }))));
 };

package/lib/css/Toast/index.css

@@ -3,39 +3,45 @@
 /* ====================================================== */
 .toasts__wrapper {
   --bs-toast-zindex: 1090;
-  width: 350px;
+  --toasts-offset-top: 35px;
+  --toasts-offset-bottom: 15px;
+  --toasts-offset-bothsides: 15px;
+  --toasts-container-gap: 0.5rem;
+  --toasts-container-width: 350px;
+  width: var(--toasts-container-width);
   position: fixed;
   left: 50%;
   bottom: 0;
   z-index: var(--bs-toast-zindex);
   pointer-events: none;
   transition: 0.1s ease-in-out;
+  /* cascading divs */
 }
 .toasts__wrapper--bottom-left {
-  left: 15px;
+  left: var(--toasts-offset-bothsides);
 }
 .toasts__wrapper--bottom-right {
   left: auto;
-  right: 15px;
+  right: var(--toasts-offset-bothsides);
 }
 .toasts__wrapper--bottom-center {
   left: 50%;
   transform: translateX(-50%);
 }
 .toasts__wrapper--top-left {
-  left: 15px;
+  left: var(--toasts-offset-bothsides);
   bottom: auto;
-  top: 35px;
+  top: var(--toasts-offset-top);
 }
 .toasts__wrapper--top-right {
   left: auto;
-  right: 15px;
-  top: 35px;
+  right: var(--toasts-offset-bothsides);
+  top: var(--toasts-offset-top);
 }
 .toasts__wrapper--top-center {
   left: 50%;
   transform: translateX(-50%);
-  top: 35px;
+  top: var(--toasts-offset-top);
 }
 .toasts__wrapper--vertical-center {
   left: 50%;
@@ -46,7 +52,7 @@
 .toasts__wrapper .toasts {
   position: relative;
   width: 100%;
-  bottom: 15px;
+  bottom: var(--toasts-offset-bottom);
   display: flex;
   flex-flow: column-reverse nowrap;
 }
@@ -60,7 +66,13 @@
   background-color: transparent;
   pointer-events: none;
 }
-.toasts__wrapper .toasts:hover .toast-container {
+.toasts__wrapper .toast-container {
+  margin-bottom: var(--toasts-container-gap);
+}
+.toasts__wrapper.toasts__wrapper--cascading .toast-container {
+  margin-bottom: 0;
+}
+.toasts__wrapper.toasts__wrapper--cascading .toasts:hover .toast-container {
   transform: perspective(100px) translateZ(0) !important;
 }
 

package/lib/esm/Toast/Item.tsx

@@ -11,8 +11,7 @@ interface ItemProps extends React.ComponentPropsWithoutRef<any> {
     closeBtnColor?: string;
     closeDisabled?: boolean;
     lock?: boolean;
-    /** Handling events for close it */
-    closeEv?: (index: number) => void | undefined;
+    cascading?: boolean;
 };
 
 const Item = (props: ItemProps) => {
@@ -24,22 +23,26 @@ const Item = (props: ItemProps) => {
         message,
         depth,
         lock,
+        cascading,
         schemeBody,
         schemeHeader,
         closeBtnColor,
-        closeDisabled,
-        closeEv
+        closeDisabled
     } = props;
 
+    
+
     return (
         <>
 
             <div
                 className={`toast-container`}
                 data-index={index}
-                style={{
+                style={cascading ? {
                     transform: `perspective(100px) translateZ(-${2 * index}px) translateY(${35 * index}px)`,
                     zIndex: depth
+                } : {
+                    zIndex: depth
                 }}>
 
                 {/* Bootstrap toast */}

package/lib/esm/Toast/index.scss

@@ -5,7 +5,15 @@
 
 .toasts__wrapper {
     --bs-toast-zindex: 1090;
-    width: 350px;
+    --toasts-offset-top: 35px;
+    --toasts-offset-bottom: 15px;
+    --toasts-offset-bothsides: 15px;
+    --toasts-container-gap: 0.5rem;
+    --toasts-container-width: 350px;
+    
+
+
+    width: var(--toasts-container-width);
     position: fixed;
     left: 50%;
     bottom: 0;
@@ -14,12 +22,12 @@
     transition: .1s ease-in-out;
 
     &--bottom-left {
-        left: 15px;
+        left: var(--toasts-offset-bothsides);
     }
 
     &--bottom-right {
         left: auto;
-        right: 15px;
+        right: var(--toasts-offset-bothsides);
     }
 
     &--bottom-center {
@@ -28,21 +36,21 @@
     }
 
     &--top-left {
-        left: 15px;
+        left: var(--toasts-offset-bothsides);
         bottom: auto;
-        top: 35px;
+        top: var(--toasts-offset-top);
     }
 
     &--top-right {
         left: auto;
-        right: 15px;
-        top: 35px;
+        right: var(--toasts-offset-bothsides);
+        top: var(--toasts-offset-top);
     }
 
     &--top-center {
         left: 50%;
         transform: translateX(-50%);
-        top: 35px;
+        top: var(--toasts-offset-top);
     }
 
     &--vertical-center {
@@ -55,7 +63,7 @@
     .toasts {
         position: relative;
         width: 100%;
-        bottom: 15px;
+        bottom: var(--toasts-offset-bottom);
         display: flex;
         flex-flow: column-reverse nowrap;
 
@@ -71,9 +79,24 @@
             pointer-events: none;
         }
 
-        &:hover {
-            .toast-container {
-                transform: perspective(100px) translateZ(0) !important;
+    }
+
+    .toast-container {
+        margin-bottom: var(--toasts-container-gap);
+    }
+
+    /* cascading divs */
+    &.toasts__wrapper--cascading {
+
+        .toast-container {
+            margin-bottom: 0;
+        }
+
+        .toasts {
+            &:hover {
+                .toast-container {
+                    transform: perspective(100px) translateZ(0) !important;
+                }
             }
         }
     }
@@ -117,4 +140,3 @@
     }
 
 }
-

package/lib/esm/Toast/index.tsx

@@ -24,6 +24,8 @@ type ToastProps = {
     autoCloseReverse?: boolean;
     /** You can not close pop-win when it is enabled */
     lock?: boolean;
+    /** Whether to use cascading styles */
+    cascading?: boolean;
     /** Self-defined class name for body*/
     schemeBody?: string;
     /** Self-defined class name for header */
@@ -34,7 +36,7 @@ type ToastProps = {
     closeDisabled?: boolean;
     /** -- */
     id?: string;
-    onClose?: (e: any, data: any[]) => void;
+    onClose?: (e: HTMLDivElement, currentIndex: number, data: HTMLDivElement[]) => void;
 };
 
 
@@ -45,6 +47,7 @@ const Toast = (props: ToastProps) => {
         autoCloseTime,
         autoCloseReverse,
         lock,
+        cascading,
         data,
         schemeBody,
         schemeHeader,
@@ -59,6 +62,7 @@ const Toast = (props: ToastProps) => {
     const idRes = id || uniqueID;
     const rootRef = useRef<any>(null);
     let depth: number = data.length + 1;
+    const cascadingEnabled = typeof cascading === 'undefined' ? true : cascading;
 
     function init() {
 
@@ -72,10 +76,10 @@ const Toast = (props: ToastProps) => {
             [].slice.call(rootRef.current.querySelectorAll('[data-close]')).forEach( (node: HTMLElement) => {
                 node.addEventListener('pointerdown', (e: any) => {
                     const index = node.dataset.index;
-                    handleClose(index as never);
+                    const currentItem = node.closest('.toast-container');
+                    handleClose(index as never, currentItem as never);
                 });
-            });     
-                
+            });       
         }
 
 
@@ -87,11 +91,11 @@ const Toast = (props: ToastProps) => {
         if ( $toast !== null ) {
             if ( $toast.dataset.async == 'true' ) {
 
-                const _list = rootRef.current.querySelectorAll('.toast-container');
-                [].slice.call(_list).forEach((node: any, i: number) => {
+                const _list: HTMLDivElement[] = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
+                _list.forEach((node: any, i: number) => {
                     node.classList.remove('hide-end');
                     // rearrange
-                    node.style.transform = `perspective(100px) translateZ(-${2 * i}px) translateY(${35 * i}px)`;
+                    if (cascadingEnabled) node.style.transform = `perspective(100px) translateZ(-${2 * i}px) translateY(${35 * i}px)`;
 
                 });
 
@@ -113,48 +117,45 @@ const Toast = (props: ToastProps) => {
 
     }
 
-    function handleClose(index: number) {
+    function handleClose(index: number, currentItem: HTMLDivElement) {
 
-        const items = JSON.parse(JSON.stringify(data));
-        if (items[index] !== undefined) {
-            const _list = rootRef.current.querySelectorAll('.toast-container');
-            _list[index].classList.add('hide-start');
+  
+        const _list: HTMLDivElement[] = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
+        currentItem.classList.add('hide-start');
 
-            //Let the removed animation show
-            setTimeout(() => {
+        //Let the removed animation show
+        setTimeout(() => {
 
-                [].slice.call(_list).forEach((node: any, i: number) => {
-                    node.classList.remove('hide-start');
-                });
+            _list.forEach((node: any, i: number) => {
+                node.classList.remove('hide-start');
+            });
 
-                // remove current
-                _list[index].classList.add('hide-end');
+            // remove current
+            currentItem.classList.add('hide-end');
 
-                // rearrange
-                [].slice.call(_list).filter((node: any) => !node.classList.contains('hide-end')).forEach((node: any, index: number) => {
+            // rearrange
+            if (cascadingEnabled) {
+                _list.filter((node: any) => !node.classList.contains('hide-end')).forEach((node: any, index: number) => {
                     node.style.transform = `perspective(100px) translateZ(-${2 * index}px) translateY(${35 * index}px)`;
                 });
+            }
 
-                //
-                onClose?.(rootRef.current, items);          
 
-            }, 300);
-        }
+            //
+            onClose?.(rootRef.current, Number(index), _list.filter((node: HTMLDivElement) => !node.classList.contains('hide-end') ));          
+
+        }, 300);
     }
 
     function autoClose(index: number, items: any[], delay: number = 3000) {
         if ( items.length  === index ) {
-
-            //
-            onClose?.(rootRef.current, items);     
-            
-            //
             clearTimeout(window.setCloseToast);
             return;
         }
+        
 
         window.setCloseToast = setTimeout(() => {
-            const _list = rootRef.current.querySelectorAll('.toast-container');
+            const _list: HTMLDivElement[] = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
 
             if ( autoCloseReverse ) {
                 _list[items.length-index].classList.add('hide-start');
@@ -166,26 +167,36 @@ const Toast = (props: ToastProps) => {
             //Let the removed animation show
             setTimeout(() => {
                 
-                [].slice.call(_list).forEach((node: any) => {
+                _list.forEach((node: any) => {
                     node.classList.remove('hide-start');
                 });
 
                 // remove current
                 if ( autoCloseReverse ) {
                     _list[items.length-index].classList.add('hide-end');
+
+                    //
+                    onClose?.(rootRef.current, Number(items.length-index), _list.filter((node: HTMLDivElement) => !node.classList.contains('hide-end') ));
+
                 } else {
                     _list[index-1].classList.add('hide-end');
+                    //
+                    onClose?.(rootRef.current, Number(index-1), _list.filter((node: HTMLDivElement) => !node.classList.contains('hide-end') ));
                 }
                 
                 // rearrange
-                [].slice.call(_list).filter((node: any) => !node.classList.contains('hide-end')).forEach((node: any, i: number) => {
-                    node.style.transform = `perspective(100px) translateZ(-${2 * i}px) translateY(${35 * i}px)`;
-                });           
-                
+                if (cascadingEnabled) {
+                    _list.filter((node: any) => !node.classList.contains('hide-end')).forEach((node: any, i: number) => {
+                        node.style.transform = `perspective(100px) translateZ(-${2 * i}px) translateY(${35 * i}px)`;
+                    });    
+                }
+
+
+                //
                 autoClose(index, items, delay);
 
             }, 300); 
-        }, delay * (index + 1));
+        }, delay);
      
         index++;
     }
@@ -210,6 +221,10 @@ const Toast = (props: ToastProps) => {
             const _el = document.querySelector(`#toasts__wrapper-${idRes}`);
             if ( _el !== null ) _el.remove();
 
+            // remove all events
+            [].slice.call(rootRef.current.querySelectorAll('[data-close]')).forEach( (node: HTMLElement) => {
+                node.replaceWith(node.cloneNode(true));
+            });    
 
         }
 
@@ -218,7 +233,7 @@ const Toast = (props: ToastProps) => {
     return (
         <div>
 
-            <div id={`toasts__wrapper-${idRes}`} data-async={async ? async : false} className={`toasts__wrapper toasts__wrapper--${direction ? direction : 'bottom-center'}`} ref={rootRef}>
+            <div id={`toasts__wrapper-${idRes}`} data-async={async ? async : false} className={`toasts__wrapper toasts__wrapper--${direction ? direction : 'bottom-center'} ${cascadingEnabled ? 'toasts__wrapper--cascading' : ''}`} ref={rootRef}>
                 <div className="toasts">
                     {data.map((item: any, i: number) => {
                         return <Item
@@ -228,12 +243,12 @@ const Toast = (props: ToastProps) => {
                             title={item.title}
                             note={item.note}
                             lock={lock}
+                            cascading={cascadingEnabled}
                             schemeBody={schemeBody}
                             schemeHeader={schemeHeader}
                             closeBtnColor={closeBtnColor}
                             closeDisabled={closeDisabled}
                             message={item.message}
-                            closeEv={handleClose}
                         /> 
 
                     })}

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "1.0.300",
+  "version": "1.0.312",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",