kitzo 2.0.5 → 2.0.7

package/README.md

@@ -25,7 +25,7 @@ npm i kitzo
 or
 
 ```javascript
-<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.5/dist/kitzo.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.6/dist/kitzo.umd.min.js"></script>
 ```
 
 > Attach this script tag in the html head tag and you are good to go.

package/dist/react.esm.js

@@ -328,26 +328,23 @@ function Toast({
   const ref = useRef(null);
   useLayoutEffect(() => {
     if (!ref.current) return;
-    const h = ref.current.getBoundingClientRect().height;
+    const height = ref.current.getBoundingClientRect().height;
     setToasts(prev => {
-      const idx = prev.findIndex(t => t.options.id === toast.id);
-      if (idx === -1) return prev;
+      const index = prev.findIndex(t => t.options.id === toast.options.id);
+      if (index === -1) return prev;
       const newToasts = [...prev];
-      newToasts[idx] = {
-        ...newToasts[idx],
-        height: h
+      newToasts[index] = {
+        ...newToasts[index],
+        height
       };
       let offset = 0;
-      for (let i = 0; i < newToasts.length; i++) {
-        newToasts[i] = {
-          ...newToasts[i],
-          offset
-        };
-        offset += newToasts[i].height + GAP;
+      for (let t of newToasts) {
+        t.offset = offset;
+        offset += (t.height || 0) + GAP;
       }
       return newToasts;
     });
-  }, [setToasts, toast.id]);
+  }, [setToasts, toast.options.id]);
   const transformY = position.includes('bottom') ? `translateY(-${toast.offset || 0}px)` : `translateY(${toast.offset || 0}px)`;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
@@ -389,11 +386,12 @@ function ToastContainer(props) {
     position
   } = props;
   const [toasts, setToasts] = useState([]);
+  const timeouts = useRef(new Set());
   useEffect(() => {
     const unsub = subscribe(toast => {
       const duration = toast.options.duration;
       const id = toast.options.id;
-      console.log(id);
+      console.log(toast);
       setToasts(prev => {
         const exists = prev.some(t => t.options.id === id);
         if (exists) {
@@ -410,19 +408,36 @@ function ToastContainer(props) {
         }, ...prev];
       });
       if (toast.type !== 'loading') {
-        setTimeout(() => {
+        const exit = setTimeout(() => {
           setToasts(prev => prev.map(t => t.options.id === id ? {
             ...t,
             leaving: true
           } : t));
         }, Math.max(0, duration - 300));
-        setTimeout(() => {
+        const remove = setTimeout(() => {
           setToasts(prev => prev.filter(t => t.options.id !== id));
         }, duration);
+        timeouts.current.add(exit);
+        timeouts.current.add(remove);
       }
     });
-    return () => unsub();
+    return () => {
+      unsub();
+      timeouts.current.forEach(clearTimeout);
+      timeouts.current.clear();
+    };
   }, []);
+  useEffect(() => {
+    let offset = 0;
+    setToasts(prev => prev.map(t => {
+      const newToast = {
+        ...t,
+        offset
+      };
+      offset += (t.height || 0) + 10;
+      return newToast;
+    }));
+  }, [toasts.map(t => t.height).join(',')]);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'fixed',
@@ -432,9 +447,9 @@ function ToastContainer(props) {
       fontFamily: 'inherit',
       padding: '1rem'
     }
-  }, toasts.map(t => /*#__PURE__*/React.createElement(Toast, {
-    key: t.options.id,
-    toast: t,
+  }, toasts.map(toast => /*#__PURE__*/React.createElement(Toast, {
+    key: toast.options.id,
+    toast: toast,
     setToasts: setToasts,
     position: position
   })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitzo",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "A lightweight JavaScript UI micro-library.",
   "type": "module",
   "main": "./dist/kitzo.umd.js",