ensure hover state returns back to normal

emilkowalski · Sep 16, 2023 · 3c880d5 · 3c880d5
1 parent 8546d0c
commit 3c880d5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/src/index.tsx b/src/index.tsx
@@ -221,6 +221,7 @@ const Toast = (props: ToastProps) => {
       data-index={index}
       data-front={isFront}
       data-swiping={swiping}
+      data-dismissible={dismissible}
       data-type={toastType}
       data-invert={invert}
       data-swipe-out={swipeOut}
@@ -520,6 +521,7 @@ const Toaster = (props: ToasterProps) => {
   }, [listRef.current]);
 
   if (!toasts.length) return null;
+  console.log({ expanded, interacting });
 
   return (
     // Remove item from normal navigation flow, only available via hotkey
@@ -553,6 +555,10 @@ const Toaster = (props: ToasterProps) => {
           }
         }}
         onFocus={(event) => {
+          const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === 'false';
+
+          if (isNotDismissible) return;
+
           if (!isFocusWithinRef.current) {
             isFocusWithinRef.current = true;
             lastFocusedElementRef.current = event.relatedTarget as HTMLElement;
@@ -566,7 +572,10 @@ const Toaster = (props: ToasterProps) => {
             setExpanded(false);
           }
         }}
-        onPointerDown={() => {
+        onPointerDown={(event) => {
+          const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === 'false';
+
+          if (isNotDismissible) return;
           setInteracting(true);
         }}
         onPointerUp={() => setInteracting(false)}

diff --git a/test/src/app/page.tsx b/test/src/app/page.tsx
@@ -115,6 +115,17 @@ export default function Home({ searchParams }: any) {
       >
         Render Toast With onAutoClose callback
       </button>
+      <button
+        data-testid="non-dismissible-toast"
+        className="button"
+        onClick={() =>
+          toast('My Toast', {
+            dismissible: false,
+          })
+        }
+      >
+        Non-dismissible Toast
+      </button>
       {showAutoClose ? <div data-testid="auto-close-el" /> : null}
       {showDismiss ? <div data-testid="dismiss-el" /> : null}
       <Toaster position={searchParams.position || 'bottom-right'} theme={theme} dir={searchParams.dir || 'auto'} />