From 1849ab46b9c58f3ee0bba4ab6598619c1dd1832d Mon Sep 17 00:00:00 2001
From: Emil Kowalski <36730035+emilkowalski@users.noreply.github.com>
Date: Sat, 2 Nov 2024 20:39:42 +0100
Subject: [PATCH] feat: improve swiping (#505)

---
 src/index.tsx  | 27 ++++++++++++---------------
 src/styles.css |  1 +
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 74cc2e9..d0be94e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -316,20 +316,11 @@ const Toast = (props: ToastProps) => {
         if (!pointerStartRef.current || !dismissible) return;
 
         const yPosition = event.clientY - pointerStartRef.current.y;
-        const xPosition = event.clientX - pointerStartRef.current.x;
-
-        const clamp = y === 'top' ? Math.min : Math.max;
-        const clampedY = clamp(0, yPosition);
-        const swipeStartThreshold = event.pointerType === 'touch' ? 10 : 2;
-        const isAllowedToSwipe = Math.abs(clampedY) > swipeStartThreshold;
-
-        if (isAllowedToSwipe) {
-          toastRef.current?.style.setProperty('--swipe-amount', `${yPosition}px`);
-        } else if (Math.abs(xPosition) > swipeStartThreshold) {
-          // User is swiping in wrong direction so we disable swipe gesture
-          // for the current pointer down interaction
-          pointerStartRef.current = null;
-        }
+        const isHighlighted = window.getSelection()?.toString().length > 0;
+
+        if (isHighlighted) return;
+
+        toastRef.current?.style.setProperty('--swipe-amount', `${Math.max(0, yPosition)}px`);
       }}
     >
       {closeButton && !toast.jsx ? (
@@ -643,7 +634,13 @@ const Toaster = forwardRef<HTMLElement, ToasterProps>(function Toaster(props, re
 
   return (
     // Remove item from normal navigation flow, only available via hotkey
-    <section aria-label={`${containerAriaLabel} ${hotkeyLabel}`} tabIndex={-1} aria-live="polite" aria-relevant="additions text" aria-atomic="false">
+    <section
+      aria-label={`${containerAriaLabel} ${hotkeyLabel}`}
+      tabIndex={-1}
+      aria-live="polite"
+      aria-relevant="additions text"
+      aria-atomic="false"
+    >
       {possiblePositions.map((position, index) => {
         const [y, x] = position.split('-');
 
diff --git a/src/styles.css b/src/styles.css
index 7cebed4..c3d0a42 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -332,6 +332,7 @@
 [data-sonner-toast][data-swiping='true'] {
   transform: var(--y) translateY(var(--swipe-amount, 0px));
   transition: none;
+  user-select: none;
 }
 
 [data-sonner-toast][data-swipe-out='true'][data-y-position='bottom'],