@soul-refiner/design-system 0.2.83 → 0.2.84

package/dist/components/feedback/animated_toast/animated_toast.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ToastTypes } from '../toast/toast';
 export interface AnimatedToastProps {
     message: string;
-    onClose: () => void;
+    onClose?: () => void;
     type: ToastTypes;
 }
 export declare const AnimatedToast: ({ message, type, onClose, }: AnimatedToastProps) => React.JSX.Element;

package/dist/components/feedback/animated_toast/animated_toast.js

@@ -3,15 +3,24 @@ import React from 'react';
 import { styled } from 'styled-components';
 import { Toast } from '../toast';
 export const AnimatedToast = ({ message, type, onClose, }) => {
-    const [dismissed, setDismissed] = React.useState(false);
-    const handleDismiss = () => {
-        setDismissed(true);
-    };
-    return (React.createElement(Wrapper, null,
-        React.createElement(Container, null,
-            React.createElement(Toast, { content: message, type: type, onClose: onClose, handleDismiss: handleDismiss }))));
+    const [toastIsClosed, setToastIsClosed] = React.useState(false);
+    const timer = React.useRef(null);
+    React.useEffect(() => {
+        timer.current = setTimeout(() => {
+            setToastIsClosed(true);
+        }, 4000);
+        return () => {
+            clearTimeout(timer.current);
+        };
+    }, []);
+    return (React.createElement(Container, null,
+        React.createElement(ToastAnimation, { className: `${toastIsClosed ? 'toast-closed' : ''}` },
+            React.createElement(Toast, { content: message, type: type, onClose: () => {
+                    !!onClose && onClose();
+                    setToastIsClosed(true);
+                }, isAnimated: true }))));
 };
-const Wrapper = styled.div `
+const Container = styled.div `
   display: flex;
   row-gap: 12px;
   position: fixed;
@@ -19,10 +28,10 @@ const Wrapper = styled.div `
   bottom: 16px;
   right: 16px;
 `;
-const Container = styled.div `
+const ToastAnimation = styled.div `
   animation: slide-in 0.4s ease-in-out forwards;
 
-  .toast-dismissed {
+  .toast-closed {
     animation: slide-out 0.4s ease-in-out forwards;
   }
 

package/dist/components/feedback/toast/toast.d.ts

@@ -5,6 +5,6 @@ export interface ToastProps {
     href?: string;
     onClose: () => void;
     type: ToastTypes;
-    handleDismiss?: () => void;
+    isAnimated?: boolean;
 }
-export declare const Toast: ({ content, href, onClose, type, handleDismiss, }: ToastProps) => React.JSX.Element;
+export declare const Toast: ({ content, href, onClose, type, isAnimated, }: ToastProps) => React.JSX.Element;

package/dist/components/feedback/toast/toast.js

@@ -4,22 +4,19 @@ import styled from 'styled-components';
 import { Styles } from '../../../common';
 import { Button, P } from '../../';
 import { AlertCircle, AlertOctogon, AlertTriangle, Close, Information, } from '../../../icons';
-export const Toast = ({ content, href, onClose, type, handleDismiss, }) => {
+export const Toast = ({ content, href, onClose, type, isAnimated = false, }) => {
     const iconLookup = {
         error: React.createElement(AlertOctogon, { size: 24 }),
         info: React.createElement(Information, { size: 24 }),
         success: React.createElement(AlertCircle, { size: 24 }),
         warning: React.createElement(AlertTriangle, { size: 24 }),
     };
-    return (React.createElement(Wrapper, { as: "output", "$dir": "row", "$gap": 8, "$type": type },
+    return (React.createElement(Wrapper, { as: "output", "$align": "center", "$dir": "row", "$gap": 8, "$type": type, "$isAnimated": isAnimated },
         iconLookup[type],
         React.createElement(P, { as: "span" }, content),
         href && (React.createElement(P, { sx: "padding-left: 8px;", as: "a", href: href, "$color": "primary-blue-2" }, "View")),
-        React.createElement(Button, { icon: React.createElement(Close, { size: 24 }), onClick: () => {
-                !!handleDismiss && handleDismiss();
-                onClose();
-            }, type: "special" }),
-        !!handleDismiss && (React.createElement(ToastProgress, null,
+        React.createElement(Button, { icon: React.createElement(Close, { size: 24 }), onClick: onClose, type: "special" }),
+        isAnimated && (React.createElement(ToastProgress, null,
             React.createElement("div", { className: `toast-progress-bar ${type}` })))));
 };
 const ToastProgress = styled.div `
@@ -61,6 +58,12 @@ const ToastProgress = styled.div `
   }
 `;
 const Wrapper = styled.output `
+  ${({ $isAnimated }) => !$isAnimated &&
+    `
+      position: fixed;
+      bottom: 24px;
+      right: 24px;`}
+
   width: 99vw;
   max-width: 476px;
   box-sizing: border-box;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.83",
+  "version": "0.2.84",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {