Merge branch 'main' into subscribe-earlier

Author: tjenkinson

src/assets.tsx

@@ -23,7 +23,7 @@ export const getAsset = (type: ToastTypes): JSX.Element | null => {
 
 const bars = Array(12).fill(0);
 
-export const Loader = ({ visible, className }: { visible: boolean, className?: string }) => {
+export const Loader = ({ visible, className }: { visible: boolean; className?: string }) => {
   return (
     <div className={['sonner-loading-wrapper', className].filter(Boolean).join(' ')} data-visible={visible}>
       <div className="sonner-spinner">

src/hooks.tsx

@@ -10,7 +10,7 @@ export const useIsDocumentHidden = () => {
       setIsDocumentHidden(document.hidden);
     };
     document.addEventListener('visibilitychange', callback);
-    return () => window.removeEventListener('visibilitychange', callback);
+    return () => document.removeEventListener('visibilitychange', callback);
   }, []);
 
   return isDocumentHidden;

src/index.tsx

@@ -627,6 +627,7 @@ const Toaster = React.forwardRef<HTMLElement, ToasterProps>(function Toaster(pro
     dir = getDocumentDirection(),
     gap = GAP,
     icons,
+    customAriaLabel,
     containerAriaLabel = 'Notifications',
   } = props;
   const [toasts, setToasts] = React.useState<ToastT[]>([]);
@@ -764,7 +765,7 @@ const Toaster = React.forwardRef<HTMLElement, ToasterProps>(function Toaster(pro
 
   React.useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      const isHotkeyPressed = hotkey.every((key) => (event as any)[key] || event.code === key);
+      const isHotkeyPressed = hotkey.length > 0 && hotkey.every((key) => (event as any)[key] || event.code === key);
 
       if (isHotkeyPressed) {
         setExpanded(true);
@@ -799,12 +800,13 @@ const Toaster = React.forwardRef<HTMLElement, ToasterProps>(function Toaster(pro
     // Remove item from normal navigation flow, only available via hotkey
     <section
       ref={ref}
-      aria-label={`${containerAriaLabel} ${hotkeyLabel}`}
+      aria-label={customAriaLabel ?? `${containerAriaLabel} ${hotkeyLabel}`}
       tabIndex={-1}
       aria-live="polite"
       aria-relevant="additions text"
       aria-atomic="false"
       suppressHydrationWarning
+      data-react-aria-top-layer
     >
       {possiblePositions.map((position, index) => {
         const [y, x] = position.split('-');

src/state.ts

@@ -242,7 +242,7 @@ class Observer {
 
   custom = (jsx: (id: number | string) => React.ReactElement, data?: ExternalToast) => {
     const id = data?.id || toastsCounter++;
-    this.create({ jsx: jsx(id), id, ...data });
+    this.create({ jsx: jsx(id), ...data, id });
     return id;
   };
 

src/styles.css

@@ -348,6 +348,7 @@ html[dir='rtl'],
 }
 
 [data-sonner-toast][data-swiped='true'] {
+  -webkit-user-select: none; /* Safari 3+ */
   user-select: none;
 }
 

src/types.ts

@@ -145,6 +145,7 @@ export interface ToasterProps {
   dir?: 'rtl' | 'ltr' | 'auto';
   swipeDirections?: SwipeDirection[];
   icons?: ToastIcons;
+  customAriaLabel?: string;
   containerAriaLabel?: string;
 }
 

test/src/app/page.tsx

@@ -121,6 +121,27 @@ export default function Home({ searchParams }: any) {
       >
         Render Custom Cancel Button
       </button>
+      <button
+        data-testid="custom-with-empty-id"
+        className="button"
+        onClick={() =>
+          toast.custom(
+            (t) => (
+              <div>
+                <h1>jsx</h1>
+                <button data-testid="dismiss-button" onClick={() => toast.dismiss(t)}>
+                  Dismiss
+                </button>
+              </div>
+            ),
+            {
+              id: undefined,
+            },
+          )
+        }
+      >
+        Render Custom Toast with empty id
+      </button>
       <button data-testid="infinity-toast" className="button" onClick={() => toast('My Toast', { duration: Infinity })}>
         Render Infinity Toast
       </button>

test/tests/basic.spec.ts

@@ -270,6 +270,14 @@ test.describe('Basic functionality', () => {
     await expect(button).toHaveCSS('background-color', 'rgb(254, 226, 226)');
   });
 
+  test('cancel button dismisses the custom toast with empty id', async ({ page }) => {
+    await page.getByTestId('custom-with-empty-id').click();
+
+    await expect(page.locator('[data-sonner-toast]')).toHaveCount(1);
+    await page.locator('[data-dismiss]').click();
+    await expect(page.locator('[data-sonner-toast]')).toHaveCount(0);
+  });
+
   test('action button is rendered with custom styles', async ({ page }) => {
     await page.getByTestId('action').click();
     const button = await page.locator('[data-button]');