d9-toast 1.4.34 → 1.4.35

package/README.md

@@ -28,7 +28,7 @@ A **lightweight, fully typed, customizable toast notification library** for Reac
 
 ## 📺 Demo
 
-[![Live Demo](https://img.shields.io/badge/Live_Demo-CodeSandbox-000000?style=for-the-badge\&logo=codesandbox\&logoColor=white)](https://codesandbox.io/embed/cqkyzm?view=preview)
+[![Live Demo](https://img.shields.io/badge/Live_Demo-CodeSandbox-000000?style=for-the-badge\&logo=codesandbox\&logoColor=white)](https://psathul073.github.io/d9-toast-docs/docs/examples/basic)
 
 ---
 
@@ -51,8 +51,8 @@ yarn add d9-toast
 ### 1. Wrap your app with `ToastProvider`
 
 ```jsx
-import "d9-toast/dist/toast.css";
 import { ToastProvider } from "d9-toast";
+import "d9-toast/toast.css";
 
 
 export default function Root() {
@@ -171,24 +171,24 @@ audio?: {
 
 ### Example
 
-```jsx
-const { sounds, showToast } = useToast();
-
-showToast({
-  message: "Message sent",
-  type: "success",
-  audio: {
-    enabled: true,
-    volume: 0.8,
-    cooldown: 500,
-    audioFile: sounds.success,
-  },
-});
-```
+  ```jsx
+  const { sounds, showToast } = useToast();
+
+  showToast({
+    message: "Message sent",
+    type: "success",
+    audio: {
+      enabled: true,
+      volume: 0.8,
+      cooldown: 500,
+      audioFile: sounds.success,
+    },
+  });
+  ```
 
-✔ Prevents sound spam
-✔ Per-toast control
-✔ Custom audio file supported
+  ✔ Prevents sound spam
+  ✔ Per-toast control
+  ✔ Custom audio file supported
 
 ---
 
@@ -198,7 +198,7 @@ showToast({
 Import the default styles once in your app:
 
 ```js
-import "d9-toast/dist/toast.css";
+import "d9-toast/toast.css";
 ```
 
 ### Tailwind / Custom Styling

package/dist/Toast.js

@@ -21,7 +21,7 @@ var Toast = function Toast(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     _ref$duration = _ref.duration,
-    duration = _ref$duration === void 0 ? 5000 : _ref$duration,
+    duration = _ref$duration === void 0 ? 4000 : _ref$duration,
     _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? [] : _ref$actions,
     remove = _ref.remove,
@@ -37,21 +37,24 @@ var Toast = function Toast(_ref) {
     pauseOnHover = _ref$pauseOnHover === void 0 ? true : _ref$pauseOnHover,
     _ref$pauseOnFocusLoss = _ref.pauseOnFocusLoss,
     pauseOnFocusLoss = _ref$pauseOnFocusLoss === void 0 ? true : _ref$pauseOnFocusLoss;
-  var intervalRef = useRef(null); // stores the interval ID
-  var start = useRef(Date.now()); // stores the moment timer started
-  var remaining = useRef(duration); // how much time is left
   var _useState = useState(100),
     _useState2 = _slicedToArray(_useState, 2),
     progressWidth = _useState2[0],
-    setProgressWidth = _useState2[1]; // progress bar %
+    setProgressWidth = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isPaused = _useState4[0],
-    setPaused = _useState4[1]; // For timer pause
+    exiting = _useState4[0],
+    setExiting = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    exiting = _useState6[0],
-    setExiting = _useState6[1];
+    isPausedState = _useState6[0],
+    setIsPausedState = _useState6[1]; // Only for UI/State checks..
+  var intervalRef = useRef(null);
+  var timeoutRef = useRef(null);
+  var initialDuration = useRef(duration);
+  var start = useRef(Date.now());
+  var remaining = useRef(duration);
+  var isPausedRef = useRef(false); // Use for internal logic to avoid loops..
 
   // Styles [Animation]
   var _useMemo = useMemo(function () {
@@ -69,49 +72,63 @@ var Toast = function Toast(_ref) {
     exitAnim = _useMemo.exitAnim;
 
   // --- Helpers Fun ---
+
+  // for exit
+  var triggerExit = useCallback(function () {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setExiting(true);
+    if (intervalRef.current) clearInterval(intervalRef.current);
+    timeoutRef.current = setTimeout(function () {
+      return remove();
+    }, 250); // Set and match exit animation duration.
+  }, [remove]);
+
   // for start
   var startTimer = useCallback(function () {
-    if (!autoClose) return;
+    if (!autoClose || initialDuration.current === 0) return;
+    if (intervalRef.current) clearInterval(intervalRef.current);
+
+    // Update the start point every time we (re)start the interval.
+    start.current = Date.now();
     intervalRef.current = setInterval(function () {
+      // If we are paused, we don't do anything, but the interval stays alive.
+      if (isPausedRef.current) return;
+
       // time to passed...
       var elapsed = Date.now() - start.current;
       // time to left...
       var timeToLeft = remaining.current - elapsed;
       // set shrink bar...
-      setProgressWidth(timeToLeft / duration * 100);
+      var percent = timeToLeft / initialDuration.current * 100;
+      setProgressWidth(Math.max(0, percent));
       if (timeToLeft <= 0) {
         // stop timer...
         clearInterval(intervalRef.current);
         // remove toast.
         triggerExit();
       }
-    }, 100);
-  }, [autoClose, duration]);
+    }, 50); // Add 50ms is smoother for progress bars..
+  }, [autoClose, triggerExit]);
 
   // for pause
   var pauseTimer = useCallback(function () {
-    if (isPaused && !autoClose) return;
-    clearInterval(intervalRef.current);
-    remaining.current = remaining.current - (Date.now() - start.current);
-    setPaused(true);
-  }, [isPaused, autoClose]);
+    if (!autoClose || isPausedRef.current) return;
+
+    // Calculate exactly what was left at the moment of pause..
+    var elapsed = Date.now() - start.current;
+    remaining.current = remaining.current - elapsed;
+    isPausedRef.current = true;
+    setIsPausedState(true);
+    if (intervalRef.current) clearInterval(intervalRef.current);
+  }, [autoClose]);
 
   // for resume
   var resumeTimer = useCallback(function () {
-    if (!isPaused && !autoClose) return;
-    start.current = Date.now();
-    setPaused(false);
+    if (!autoClose || !isPausedRef.current) return;
+    isPausedRef.current = false;
+    setIsPausedState(false);
     startTimer();
-  }, [isPaused, autoClose, startTimer]);
-
-  // for exit
-  var triggerExit = useCallback(function () {
-    setExiting(true);
-    clearInterval(intervalRef.current);
-    setTimeout(function () {
-      return remove();
-    }, 250); // Set and match exit animation duration.
-  }, [remove]);
+  }, [autoClose, startTimer]);
 
   // Toast actions...
   var actionButtons = useMemo(function () {
@@ -138,9 +155,8 @@ var Toast = function Toast(_ref) {
 
   // Start auto-close timer.
   useEffect(function () {
-    if (duration !== 0 && autoClose) {
-      startTimer();
-    }
+    startTimer();
+
     // pause/resume when window focus changes.
     var handleBlur = function handleBlur() {
       return pauseOnFocusLoss && pauseTimer();
@@ -153,13 +169,14 @@ var Toast = function Toast(_ref) {
       window.addEventListener("focus", handleFocus);
     }
     return function () {
-      clearInterval(intervalRef.current);
+      if (intervalRef.current) clearInterval(intervalRef.current);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
       if (pauseOnFocusLoss) {
         window.removeEventListener("blur", handleBlur);
         window.removeEventListener("focus", handleFocus);
       }
     };
-  }, [duration, autoClose, pauseOnFocusLoss]);
+  }, []);
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
       style: {
@@ -222,7 +239,8 @@ var Toast = function Toast(_ref) {
         children: /*#__PURE__*/_jsx("div", {
           className: "toast-progress ".concat(type),
           style: {
-            width: "".concat(progressWidth, "%")
+            width: "".concat(progressWidth, "%"),
+            transition: isPausedState ? "none" : "width 50ms linear"
           }
         })
       })]

package/dist/ToastContext.js

@@ -98,12 +98,7 @@ export var ToastProvider = function ToastProvider(_ref) {
         volume: audio.volume
       });
     }
-    var shouldAutoClose = toast.autoClose !== false && toast.duration !== 0;
-    if (shouldAutoClose) {
-      setTimeout(function () {
-        return removeToast(newToast.id);
-      }, toast.duration || 5000);
-    }
+    ;
     return newToast === null || newToast === void 0 ? void 0 : newToast.id;
   }, [playAudio]);
 

package/dist/toast.css

@@ -22,7 +22,7 @@
   --loading-color: #8736ca;
   --loading-bg: rgba(124, 58, 237, 0.1);
 
-  --border-color: rgba(17, 24, 39, 0.1);
+  --border-color: rgb(17, 24, 39);
 
   --line-height-base: 1.5;
   --font-size-base: 14px;
@@ -143,14 +143,14 @@
   --loading-color: #6900ca;
   --loading-bg: rgba(106, 31, 176, 0.1);
 
-  --border-color: #e5e7eb;
+  --border-color: rgb(229, 231, 235);
 
   /* background-color: #ffffff;
   color: #1e2939; */
 }
 
 .dark {
-   --primary-bg: #060606;
+  --primary-bg: #060606;
   --primary-color: #ffffff;
 
   --success-color: #00df5f;
@@ -168,7 +168,7 @@
   --loading-color: #c586ff;
   --loading-bg: rgba(106, 31, 176, 0.1);
 
-  --border-color: #111827;
+  --border-color: rgb(17, 24, 39);
 
   /* background-color: #1e2939;
   color: #ffffff; */
@@ -321,7 +321,7 @@
 
 .progress-container {
   position: absolute;
-  bottom: 0;
+  bottom: -1px;
   left: 0;
   width: 100%;
   height: 0.25rem;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "d9-toast",
-  "version": "1.4.34",
+  "version": "1.4.35",
   "description": "Customizable toast notifications for React",
-  "homepage": "https://codesandbox.io/embed/cqkyzm?view=preview",
+  "homepage": "https://psathul073.github.io/d9-toast-docs/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/psathul073/d9-toast.git"