d9-toast 2.5.42 → 2.5.44

package/README.md

@@ -287,3 +287,6 @@ MIT © **Athul / D9 Coder**
 * 💻 Source: [https://github.com/psathul073/d9-toast](https://github.com/psathul073/d9-toast)
 * 📦 npm: [https://www.npmjs.com/package/d9-toast](https://www.npmjs.com/package/d9-toast)
 
+---
+
+> See [CHANGELOG](https://psathul073.github.io/d9-toast-docs/docs/Changelog) for details.

package/dist/Toast.js

@@ -8,16 +8,16 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Icons from "./Icons.js";
+
+// For animation direction.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var ENTER_ANIMATIONS = {
-  top: "d9-upToDown",
-  bottom: "d9-downToUp",
-  center: "d9-centerEnter"
-};
-var EXIT_ANIMATIONS = {
-  top: "d9-downToUpExit",
-  bottom: "d9-upToDownExit",
-  center: "d9-centerExit"
+var getAnimationDirection = function getAnimationDirection(position) {
+  if (position.startsWith("top")) return "top";
+  if (position.startsWith("bottom")) return "bottom";
+  if (position === "center") return "center";
+  if (position === "center-top") return "top";
+  if (position === "center-bottom") return "bottom";
+  return "top";
 };
 var Toast = function Toast(_ref) {
   var id = _ref.id,
@@ -37,7 +37,7 @@ var Toast = function Toast(_ref) {
     _ref$expand = _ref.expand,
     expand = _ref$expand === void 0 ? "hover" : _ref$expand,
     _ref$duration = _ref.duration,
-    duration = _ref$duration === void 0 ? 3000 : _ref$duration,
+    duration = _ref$duration === void 0 ? 4000 : _ref$duration,
     _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? [] : _ref$actions,
     remove = _ref.remove,
@@ -54,18 +54,19 @@ 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;
+  // const [exiting, setExiting] = useState(false);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    exiting = _useState2[0],
-    setExiting = _useState2[1];
+    isPaused = _useState2[0],
+    setIsPaused = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isPaused = _useState4[0],
-    setIsPaused = _useState4[1];
-  var _useState5 = useState(false),
+    isMounted = _useState4[0],
+    setIsMounted = _useState4[1];
+  var _useState5 = useState("enter"),
     _useState6 = _slicedToArray(_useState5, 2),
-    isMounted = _useState6[0],
-    setIsMounted = _useState6[1];
+    phase = _useState6[0],
+    setPhase = _useState6[1];
   var timeoutRef = useRef(null);
 
   // For SSR Safety Guard.
@@ -74,34 +75,21 @@ var Toast = function Toast(_ref) {
   }, []);
   var shouldExpand = expand === "hover" ? isStackHovered : expand;
   var ariaRole = type === "error" ? "alert" : "status";
-
-  // Styles [Animation]
-  var _useMemo = useMemo(function () {
-      // entry animation [based on position]
-      var isTop = position.includes("top");
-      var isBottom = position.includes("bottom");
-      var baseEnter = isTop ? ENTER_ANIMATIONS.top : isBottom ? ENTER_ANIMATIONS.bottom : ENTER_ANIMATIONS.center;
-
-      // exit animation [reverse direction]
-      var baseExit = isTop ? EXIT_ANIMATIONS.top : isBottom ? EXIT_ANIMATIONS.bottom : EXIT_ANIMATIONS.center;
-      return {
-        enterAnim: "".concat(baseEnter, " 450ms cubic-bezier(0.165, 0.84, 0.44, 1) "),
-        exitAnim: "".concat(baseExit, "  300ms ease-in")
-      };
-    }, [position]),
-    enterAnim = _useMemo.enterAnim,
-    exitAnim = _useMemo.exitAnim;
+  var direction = useMemo(function () {
+    return getAnimationDirection(position);
+  }, [position]);
+  var animationClass = phase === "exit" ? "toast--exit-".concat(direction) : "toast--enter-".concat(direction);
 
   // --- Helpers Fun ---
 
   // for exit
   var triggerExit = useCallback(function () {
-    if (exiting) return;
-    setExiting(true);
+    if (phase === "exit") return;
+    setPhase("exit");
     timeoutRef.current = setTimeout(function () {
       return remove();
     }, 300); // Set and match exit animation duration.
-  }, [remove, exiting]);
+  }, [remove, phase]);
 
   // for pause.
   var handlePause = useCallback(function () {
@@ -175,11 +163,9 @@ var Toast = function Toast(_ref) {
       tabIndex: 0,
       "aria-hidden": !shouldExpand && stackIndex > 0,
       style: {
-        animation: exiting ? exitAnim : enterAnim,
-        opacity: exiting ? 0 : undefined,
-        pointerEvents: exiting ? "none" : "auto"
+        pointerEvents: phase === "exit" ? "none" : "auto"
       },
-      className: "d9-toast toast ".concat(theme === "colored" ? type : theme, " ").concat(className),
+      className: "d9-toast toast ".concat(animationClass, " ").concat(theme === "colored" ? type : theme, " ").concat(className),
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [title && /*#__PURE__*/_jsxs("div", {

package/dist/ToastContext.js

@@ -182,7 +182,7 @@ export var ToastProvider = function ToastProvider(_ref) {
     });
     // Limit to last 10 toasts to prevent memory overflow...
     setToasts(function (prev) {
-      return [].concat(_toConsumableArray(prev), [newToast]).slice(-10);
+      return [newToast].concat(_toConsumableArray(prev)).slice(0, 10);
     });
     var audio = newToast.audio,
       type = newToast.type;

package/dist/toast.css

@@ -238,6 +238,28 @@
   pointer-events: none;
 }
 
+/* Animation */
+.toast--enter-top {
+  animation: d9-upToDown 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.toast--exit-top {
+  animation: d9-downToUpExit 300ms ease-in;
+}
+
+.toast--enter-bottom {
+  animation: d9-downToUp 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.toast--exit-bottom {
+  animation: d9-upToDownExit 300ms ease-in;
+}
+
+.toast--enter-center {
+  animation: d9-centerEnter 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.toast--exit-center {
+  animation: d9-centerExit 300ms ease-in;
+}
+
 /* Type colors */
 .default {
   color: var(--primary-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "d9-toast",
-  "version": "2.5.42",
+  "version": "2.5.44",
   "description": "Customizable toast notifications for React",
   "homepage": "https://psathul073.github.io/d9-toast-docs/",
   "repository": {