From 5a2e5cdf917506ef2ddca5c2b128a48b4cdecff5 Mon Sep 17 00:00:00 2001
From: nhanluongoe <nhanlt18@gmail.com>
Date: Thu, 14 Mar 2024 14:42:45 +0700
Subject: [PATCH 1/5] fix: enhance flick motion

---
 src/components/toast.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/toast.tsx b/src/components/toast.tsx
index caf4cc1..f09c10e 100644
--- a/src/components/toast.tsx
+++ b/src/components/toast.tsx
@@ -74,7 +74,7 @@ const StyledToast = styled('li')`
   justify-content: space-between;
   width: content-fit;
   box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
-  transition: transform 0.35s cubic-bezier(0.06, 0.71, 0.55, 1.275);
+  transition: transform 0.35s ease;
   background: #fff;
   color: #363636;
   border-radius: 8px;

From 7c738c1defd9c576e0a9bcde3a9a8fce87bbd766 Mon Sep 17 00:00:00 2001
From: nhanluongoe <nhanlt18@gmail.com>
Date: Thu, 14 Mar 2024 15:59:01 +0700
Subject: [PATCH 2/5] fix: use absolute position to reduce motion interruption

---
 src/components/toast.tsx | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/toast.tsx b/src/components/toast.tsx
index f09c10e..eeee829 100644
--- a/src/components/toast.tsx
+++ b/src/components/toast.tsx
@@ -16,7 +16,7 @@ const StyledToastViewport = styled('ul')`
   padding: 8px;
   top: 8px;
   flex-direction: column;
-  max-width: 420px;
+  width: 320px;
 `;
 
 const ToastViewport: React.FC<
@@ -44,7 +44,7 @@ function calculatePosition(
 ): CSSProperties {
   const positions = {
     left: { left: '16px' },
-    right: { right: '16px' },
+    right: { right: '60px' },
     center: { left: '50%', transform: 'translateX(-50%)' },
   };
 
@@ -70,18 +70,18 @@ const fadeIn = keyframes`
 `;
 const StyledToast = styled('li')`
   display: flex;
-  position: relative;
+  position: absolute;
   justify-content: space-between;
-  width: content-fit;
+  width: 100%;
   box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
-  transition: transform 0.35s ease;
+  transition: transform 0.5s ease;
   background: #fff;
   color: #363636;
   border-radius: 8px;
   line-height: 1.3;
   padding: 16px;
   margin-bottom: 8px;
-  animation: ${(props: ToastProps) => (props.visible ? fadeIn : fadeOut)} 0.4s
+  animation: ${(props: ToastProps) => (props.visible ? fadeIn : fadeOut)} 0.5s
     forwards cubic-bezier(0.06, 0.71, 0.55, 1);
 `;
 
@@ -117,11 +117,19 @@ function calculateAnimationStyle(
 ): CSSProperties {
   const transformValue =
     collapsed === 'true'
-      ? `scaleX(${1 - idx! * 0.05}) translateY(${-idx! * 95}%)`
-      : 'none';
+      ? `scaleX(${1 - idx * 0.05})`
+      : `translateY(${idx * 100}%)`;
+
+  // const transformValue =
+  //   collapsed === 'true'
+  //     ? `scaleX(${1 - idx! * 0.05}) translateY(${-idx! * 95}%)`
+  //     : 'none';
+  //
+  console.log(collapsed);
   return {
     zIndex: 5500 - idx!,
     transform: transformValue,
+    top: `${idx! * 8}px`,
   };
 }
 

From fc841856cbaebfac0c5cb70d7e5ea280aec99ddc Mon Sep 17 00:00:00 2001
From: nhanluongoe <nhanlt18@gmail.com>
Date: Thu, 14 Mar 2024 16:01:49 +0700
Subject: [PATCH 3/5] chore: remove unused code

---
 src/components/toast.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/toast.tsx b/src/components/toast.tsx
index eeee829..e51192d 100644
--- a/src/components/toast.tsx
+++ b/src/components/toast.tsx
@@ -120,12 +120,6 @@ function calculateAnimationStyle(
       ? `scaleX(${1 - idx * 0.05})`
       : `translateY(${idx * 100}%)`;
 
-  // const transformValue =
-  //   collapsed === 'true'
-  //     ? `scaleX(${1 - idx! * 0.05}) translateY(${-idx! * 95}%)`
-  //     : 'none';
-  //
-  console.log(collapsed);
   return {
     zIndex: 5500 - idx!,
     transform: transformValue,

From d5c7bc591344962e0a1f90cc0399a11eba3ab09f Mon Sep 17 00:00:00 2001
From: nhanluongoe <nhanlt18@gmail.com>
Date: Thu, 14 Mar 2024 16:02:03 +0700
Subject: [PATCH 4/5] chore: increase stacking space

---
 src/components/toast.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/toast.tsx b/src/components/toast.tsx
index e51192d..999cfad 100644
--- a/src/components/toast.tsx
+++ b/src/components/toast.tsx
@@ -123,7 +123,7 @@ function calculateAnimationStyle(
   return {
     zIndex: 5500 - idx!,
     transform: transformValue,
-    top: `${idx! * 8}px`,
+    top: `${idx! * 10}px`,
   };
 }
 

From 951bb0af6cbfb39fc3b93e77eb14ca19b3d5a6bd Mon Sep 17 00:00:00 2001
From: nhanluongoe <nhanlt18@gmail.com>
Date: Thu, 14 Mar 2024 16:05:44 +0700
Subject: [PATCH 5/5] chore(release): v0.0.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2e84a49..25305a0 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-stacked-toast",
   "description": "A stacked toast component for React",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "author": "Nhan Luong",
   "license": "MIT",
   "keywords": [