@nulogy/components 8.1.4 → 8.1.5

package/dist/main.js

@@ -42421,41 +42421,6 @@
   var SHOW_DURATION = 2000; // in ms
 
   var ANIMATE_OUT_DURATION = 1000;
-  var TOAST_Y_MAX = "0px";
-  var TOAST_Y_MIN = "-32px";
-  var ACTIVE_Z_INDEX = 2;
-  var INACTIVE_Z_INDEX = ACTIVE_Z_INDEX - 1;
-  var SLIDE_IN_STYLES = {
-    transform: "translateY(" + TOAST_Y_MIN + ")",
-    transition: "transform 0.15s ease-out",
-    zIndex: ACTIVE_Z_INDEX
-  };
-  var SLIDE_OUT_STYLES = {
-    transform: "translateY(" + TOAST_Y_MAX + ")",
-    transition: "transform 0.9s ease-in",
-    zIndex: INACTIVE_Z_INDEX,
-    pointerEvents: "none"
-  };
-  var FADE_IN_STYLES = {
-    opacity: 1,
-    transition: "opacity 0.25s linear"
-  };
-  var FADE_OUT_STYLES = {
-    transition: "opacity 1s linear"
-  };
-  var AnimatedAlert = styled__default['default'](Alert).withConfig({
-    displayName: "Toast__AnimatedAlert",
-    componentId: "sc-1cheg2k-0"
-  })(function (_ref) {
-    var visible = _ref.visible,
-        theme = _ref.theme;
-    return Object.assign({
-      boxShadow: theme.shadows.medium,
-      minWidth: "200px",
-      maxWidth: "600px",
-      opacity: 0
-    }, visible ? FADE_IN_STYLES : FADE_OUT_STYLES);
-  });
   var Toast = function Toast(_a) {
     var triggered = _a.triggered,
         onHide = _a.onHide,
@@ -42532,8 +42497,9 @@
       hideToast(0);
     };
 
-    return /*#__PURE__*/React__default['default'].createElement(Box, Object.assign({
-      visible: visible,
+    return /*#__PURE__*/React__default['default'].createElement(AnimatePresence, {
+      initial: false
+    }, visible && /*#__PURE__*/React__default['default'].createElement(AnimatedBox, {
       onMouseEnter: onMouseIn,
       onFocus: onMouseIn,
       onMouseLeave: onMouseOut,
@@ -42545,15 +42511,37 @@
       marginLeft: "auto",
       marginRight: "auto",
       width: "fit-content",
-      transform: "translateY(" + TOAST_Y_MIN + ")"
-    }, visible ? SLIDE_IN_STYLES : SLIDE_OUT_STYLES, {
-      zIndex: zIndex
-    }), /*#__PURE__*/React__default['default'].createElement(AnimatedAlert, Object.assign({
-      visible: visible,
+      zIndex: zIndex,
+      boxShadow: "medium",
+      layout: true,
+      initial: {
+        opacity: 0,
+        y: 50
+      },
+      animate: {
+        opacity: 1,
+        y: -30,
+        transition: {
+          type: "spring",
+          bounce: 0.4,
+          duration: 0.6
+        }
+      },
+      exit: {
+        y: 50,
+        opacity: 0,
+        transition: {
+          ease: "easeOut",
+          duration: 0.15
+        }
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(Alert, Object.assign({
+      minWidth: "200px",
+      maxWidth: "600px",
       isCloseable: isCloseable,
       onClose: handleCloseButtonClick,
       controlled: true
-    }, props), children));
+    }, props), children)));
   };
   Toast.defaultProps = {
     triggered: false,

package/dist/main.module.js

@@ -42395,41 +42395,6 @@ TruncatedText.defaultProps = {
 var SHOW_DURATION = 2000; // in ms
 
 var ANIMATE_OUT_DURATION = 1000;
-var TOAST_Y_MAX = "0px";
-var TOAST_Y_MIN = "-32px";
-var ACTIVE_Z_INDEX = 2;
-var INACTIVE_Z_INDEX = ACTIVE_Z_INDEX - 1;
-var SLIDE_IN_STYLES = {
-  transform: "translateY(" + TOAST_Y_MIN + ")",
-  transition: "transform 0.15s ease-out",
-  zIndex: ACTIVE_Z_INDEX
-};
-var SLIDE_OUT_STYLES = {
-  transform: "translateY(" + TOAST_Y_MAX + ")",
-  transition: "transform 0.9s ease-in",
-  zIndex: INACTIVE_Z_INDEX,
-  pointerEvents: "none"
-};
-var FADE_IN_STYLES = {
-  opacity: 1,
-  transition: "opacity 0.25s linear"
-};
-var FADE_OUT_STYLES = {
-  transition: "opacity 1s linear"
-};
-var AnimatedAlert = styled(Alert).withConfig({
-  displayName: "Toast__AnimatedAlert",
-  componentId: "sc-1cheg2k-0"
-})(function (_ref) {
-  var visible = _ref.visible,
-      theme = _ref.theme;
-  return Object.assign({
-    boxShadow: theme.shadows.medium,
-    minWidth: "200px",
-    maxWidth: "600px",
-    opacity: 0
-  }, visible ? FADE_IN_STYLES : FADE_OUT_STYLES);
-});
 var Toast = function Toast(_a) {
   var triggered = _a.triggered,
       onHide = _a.onHide,
@@ -42506,8 +42471,9 @@ var Toast = function Toast(_a) {
     hideToast(0);
   };
 
-  return /*#__PURE__*/React__default.createElement(Box, Object.assign({
-    visible: visible,
+  return /*#__PURE__*/React__default.createElement(AnimatePresence, {
+    initial: false
+  }, visible && /*#__PURE__*/React__default.createElement(AnimatedBox, {
     onMouseEnter: onMouseIn,
     onFocus: onMouseIn,
     onMouseLeave: onMouseOut,
@@ -42519,15 +42485,37 @@ var Toast = function Toast(_a) {
     marginLeft: "auto",
     marginRight: "auto",
     width: "fit-content",
-    transform: "translateY(" + TOAST_Y_MIN + ")"
-  }, visible ? SLIDE_IN_STYLES : SLIDE_OUT_STYLES, {
-    zIndex: zIndex
-  }), /*#__PURE__*/React__default.createElement(AnimatedAlert, Object.assign({
-    visible: visible,
+    zIndex: zIndex,
+    boxShadow: "medium",
+    layout: true,
+    initial: {
+      opacity: 0,
+      y: 50
+    },
+    animate: {
+      opacity: 1,
+      y: -30,
+      transition: {
+        type: "spring",
+        bounce: 0.4,
+        duration: 0.6
+      }
+    },
+    exit: {
+      y: 50,
+      opacity: 0,
+      transition: {
+        ease: "easeOut",
+        duration: 0.15
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(Alert, Object.assign({
+    minWidth: "200px",
+    maxWidth: "600px",
     isCloseable: isCloseable,
     onClose: handleCloseButtonClick,
     controlled: true
-  }, props), children));
+  }, props), children)));
 };
 Toast.defaultProps = {
   triggered: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "8.1.4",
+  "version": "8.1.5",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {