@astryxdesign/core 0.1.4 → 0.1.5-canary.76e6697

package/src/Table/plugins/sortable/useTableSortableState.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import {describe, it, expect, vi} from 'vitest';
-import {render, screen, within} from '@testing-library/react';
+import {render, renderHook, screen, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {useState} from 'react';
 import {Table} from '../../Table';
@@ -421,6 +421,40 @@ describe('useTableSortableState', () => {
     });
   });
 
+  describe('NaN handling', () => {
+    it('keeps valid numbers sorted when a NaN cell is present', () => {
+      const data: Employee[] = [
+        {id: '1', name: 'A', age: 5, department: 'X', salary: 1},
+        {id: '2', name: 'B', age: NaN, department: 'X', salary: 1},
+        {id: '3', name: 'C', age: 1, department: 'X', salary: 1},
+        {id: '4', name: 'D', age: 3, department: 'X', salary: 1},
+      ];
+      const {result} = renderHook(() =>
+        useTableSortableState({
+          data,
+          defaultSort: [{sortKey: 'age', direction: 'ascending'}],
+        }),
+      );
+      // NaN groups at the end like null; the valid numbers stay ordered.
+      expect(result.current.sortedData.map(e => e.age)).toEqual([1, 3, 5, NaN]);
+    });
+
+    it('sorts NaN to the start in descending order, like null', () => {
+      const data: Employee[] = [
+        {id: '1', name: 'A', age: 5, department: 'X', salary: 1},
+        {id: '2', name: 'B', age: NaN, department: 'X', salary: 1},
+        {id: '3', name: 'C', age: 1, department: 'X', salary: 1},
+      ];
+      const {result} = renderHook(() =>
+        useTableSortableState({
+          data,
+          defaultSort: [{sortKey: 'age', direction: 'descending'}],
+        }),
+      );
+      expect(result.current.sortedData.map(e => e.age)).toEqual([NaN, 5, 1]);
+    });
+  });
+
   describe('null/undefined handling', () => {
     it('sorts null values to the end', () => {
       const data: Employee[] = [

package/src/Table/plugins/sortable/useTableSortableState.tsx

@@ -168,14 +168,18 @@ function defaultCompare<T extends Record<string, unknown>>(
   const aVal = a[sortKey];
   const bVal = b[sortKey];
 
-  // null/undefined sort to the end
-  if (aVal == null && bVal == null) {
+  // null/undefined/NaN sort to the end. NaN must not reach the numeric fast
+  // path: a NaN comparator result reads as "equal" to Array.sort, which makes
+  // the comparator inconsistent and corrupts the order of the other rows.
+  const aMissing = aVal == null || (typeof aVal === 'number' && Number.isNaN(aVal));
+  const bMissing = bVal == null || (typeof bVal === 'number' && Number.isNaN(bVal));
+  if (aMissing && bMissing) {
     return 0;
   }
-  if (aVal == null) {
+  if (aMissing) {
     return 1;
   }
-  if (bVal == null) {
+  if (bMissing) {
     return -1;
   }
 

package/src/Table/useTableGroupedRows.doc.mjs

@@ -0,0 +1,71 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../docs-types').ComponentDoc} */
+
+export const docs = {
+  name: 'useTableGroupedRows',
+  subComponentOf: 'Table',
+  displayName: 'useTableGroupedRows',
+  description:
+    'Hook that groups a flat data array into collapsible section rows. Each distinct groupBy value becomes a full-width section-header row with a chevron toggle, the group label, and a member count; collapsing hides that group\u2019s data rows while keeping the header visible. Mirrors useTableRowExpansionState: the consumer owns the collapsedGroups set and the hook returns {data, plugin, idKey} \u2014 pass all three to Table (data, plugins, and idKey respectively).',
+  props: [
+    {
+      name: 'data',
+      type: 'T[]',
+      description: 'The flat data to group.',
+      required: true,
+    },
+    {
+      name: 'groupBy',
+      type: '(item: T) => string',
+      description:
+        'Derive the group key for a row. Rows with the same key share a section.',
+      required: true,
+    },
+    {
+      name: 'collapsedGroups',
+      type: 'Set<string>',
+      description: 'Set of currently-collapsed group keys.',
+      required: true,
+    },
+    {
+      name: 'onToggleGroup',
+      type: '(groupKey: string) => void',
+      description: 'Called with a group key when its header is toggled.',
+      required: true,
+    },
+    {
+      name: 'renderGroupHeader',
+      type: '(groupKey: string, count: number, collapsed: boolean) => ReactNode',
+      description:
+        "Custom renderer for a group header's content (right of the chevron). Defaults to `<groupKey> (<count>)`.",
+    },
+    {
+      name: 'getRowKey',
+      type: '(item: T) => string',
+      description:
+        'Stable key for a real row. Falls back to a positional key when omitted.',
+    },
+    {
+      name: 'groupOrder',
+      type: 'string[]',
+      description:
+        'Explicit group ordering; groups not listed keep first-seen order after these.',
+    },
+  ],
+};
+
+/** @type {import('../docs-types').TranslationDoc} */
+export const docsDense = {
+  description:
+    'Groups a flat data array into collapsible section rows. Each groupBy value becomes a full-width header (chevron + label + count); collapsing hides its rows. Returns {data, plugin, idKey} \u2014 pass to Table data / plugins / idKey. Consumer owns the collapsedGroups set.',
+  propDescriptions: {
+    data: 'The flat data to group.',
+    groupBy: 'Derive a row\u2019s group key. Same key = same section.',
+    collapsedGroups: 'Set of currently-collapsed group keys.',
+    onToggleGroup: 'Called with the group key when a header is toggled.',
+    renderGroupHeader: "Custom header content (right of chevron). Default '<key> (<count>)'.",
+    getRowKey: 'Stable key for a real row; positional fallback when omitted.',
+    groupOrder: 'Pin these group keys first; others keep first-seen order.',
+  },
+};

package/src/TextArea/TextArea.test.tsx

@@ -13,7 +13,7 @@ import {useState} from 'react';
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {MagnifyingGlassIcon} from '@heroicons/react/24/outline';
+import {TestIcon} from '../__tests__/TestIcon';
 import {TextArea} from './TextArea';
 
 // Mock showPopover/hidePopover since jsdom does not implement them. Used by the
@@ -193,7 +193,7 @@ describe('TextArea', () => {
         label="Description"
         value=""
         onChange={() => {}}
-        startIcon={MagnifyingGlassIcon}
+        startIcon={TestIcon}
       />,
     );
     expect(screen.getByRole('textbox')).toBeInTheDocument();
@@ -577,7 +577,7 @@ describe('TextArea', () => {
           label="Notes"
           value=""
           onChange={() => {}}
-          startIcon={<MagnifyingGlassIcon />}
+          startIcon={<TestIcon />}
         />,
       );
 

package/src/TextInput/TextInput.test.tsx

@@ -12,7 +12,7 @@
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {MagnifyingGlassIcon} from '@heroicons/react/24/outline';
+import {TestIcon} from '../__tests__/TestIcon';
 import {TextInput} from './TextInput';
 
 // Mock showPopover/hidePopover since jsdom does not implement them. Used by the
@@ -163,7 +163,7 @@ describe('TextInput', () => {
         label="Search"
         value=""
         onChange={() => {}}
-        startIcon={MagnifyingGlassIcon}
+        startIcon={TestIcon}
       />,
     );
     expect(screen.getByRole('textbox')).toBeInTheDocument();
@@ -482,7 +482,7 @@ describe('TextInput', () => {
           label="Search"
           value=""
           onChange={() => {}}
-          startIcon={<MagnifyingGlassIcon />}
+          startIcon={<TestIcon />}
         />,
       );
 

package/src/Thumbnail/Thumbnail.test.tsx

@@ -37,11 +37,45 @@ describe('Thumbnail', () => {
     expect(screen.getByRole('status')).toBeInTheDocument();
   });
 
-  it('uses label as accessible name on root', () => {
+  it('exposes the label as an accessible name via a valid group role', () => {
     render(<Thumbnail label="photo.png" data-testid="thumb" />);
-    expect(screen.getByTestId('thumb')).toHaveAttribute('aria-label', 'photo.png');
+    // The accessible name must be carried by a valid named role (group),
+    // not by a bare aria-label on a generic div (aria-prohibited-attr).
+    const group = screen.getByRole('group', {name: 'photo.png'});
+    expect(group).toBe(screen.getByTestId('thumb'));
   });
 
+  it('does not put aria-label on a generic (roleless) element', () => {
+    render(<Thumbnail label="photo.png" data-testid="thumb" />);
+    const thumb = screen.getByTestId('thumb');
+    // The labeled element must declare a role so the name is legitimate.
+    expect(thumb).toHaveAttribute('role', 'group');
+  });
+
+  it('keeps interactive children accessible while exposing the group name', () => {
+    const onRemove = vi.fn();
+    render(
+      <Thumbnail
+        src="/img.jpg"
+        alt="Clickable"
+        label="file.png"
+        onClick={vi.fn()}
+        onRemove={onRemove}
+      />,
+    );
+    // A group role (unlike img) must not hide descendant controls.
+    expect(
+      screen.getByRole('group', {name: 'file.png — Clickable'}),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {name: 'Open file.png — Clickable'}),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {name: 'Remove file.png — Clickable'}),
+    ).toBeInTheDocument();
+  });
+
+
   it('label is shown via tooltip, not as inline text', () => {
     render(<Thumbnail label="photo.png" data-testid="thumb" />);
     // Label should exist in DOM (tooltip) but not as a direct child text node

package/src/Thumbnail/Thumbnail.tsx

@@ -58,8 +58,9 @@ export interface ThumbnailProps extends BaseProps<HTMLDivElement> {
   alt?: string;
   /**
    * Accessible label for the thumbnail (e.g. file name).
-   * Not rendered visually — shown in a tooltip on hover and used
-   * as accessible name for the remove button.
+   * Not rendered visually — shown in a tooltip on hover, exposed as the
+   * accessible name of the thumbnail group, and used as the accessible
+   * name for the remove button.
    */
   label?: string;
   /**
@@ -296,6 +297,7 @@ export function Thumbnail({
     <div
       ref={ref}
       data-testid={testId}
+      role="group"
       aria-label={accessibleName}
       {...mergeProps(
         themeProps('thumbnail'),

package/src/TimeInput/TimeInput.test.tsx

@@ -160,6 +160,43 @@ describe('TimeInput', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 
+  it('sets aria-invalid="true" when typed input is out of range', () => {
+    render(<TimeInput label="Time" onChange={() => {}} />);
+
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, {target: {value: '25:99'}});
+
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('does not set aria-invalid when typed input is a valid time', () => {
+    render(<TimeInput label="Time" onChange={() => {}} />);
+
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, {target: {value: '3:45 pm'}});
+
+    expect(input).not.toHaveAttribute('aria-invalid');
+  });
+
+  it('announces an alert message when typed input is invalid', () => {
+    render(<TimeInput label="Time" onChange={() => {}} />);
+
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, {target: {value: '25:99'}});
+
+    expect(screen.getByRole('alert')).toHaveTextContent('Invalid time');
+  });
+
+  it('does not announce an alert message when input is valid', () => {
+    render(<TimeInput label="Time" onChange={() => {}} />);
+
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, {target: {value: '3:45 pm'}});
+
+    expect(screen.getByRole('alert')).toHaveTextContent('');
+    expect(screen.queryByText('Invalid time')).not.toBeInTheDocument();
+  });
+
   it('calls onChange on blur when input is valid', async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();

package/src/TimeInput/TimeInput.tsx

@@ -635,7 +635,9 @@ export function TimeInput({
         data-autofocus={hasAutoFocus || undefined}
         aria-describedby={ariaDescribedBy}
         aria-required={isRequired === true ? 'true' : undefined}
-        aria-invalid={status?.type === 'error' ? 'true' : undefined}
+        aria-invalid={
+          status?.type === 'error' || !isInputValid ? 'true' : undefined
+        }
         aria-busy={isBusy || undefined}
         aria-labelledby={ariaLabelledBy}
         {...stylex.props(
@@ -644,6 +646,14 @@ export function TimeInput({
           !isInputValid && styles.inputInvalid,
         )}
       />
+      {/*
+          Live region announcing invalid typed input to assistive technology.
+          The value silently reverts on blur, so without this a screen-reader
+          user would get no feedback that their entry was rejected (WCAG 3.3.1).
+        */}
+      <VisuallyHidden as="div" role="alert" aria-live="assertive">
+        {!isInputValid ? 'Invalid time' : ''}
+      </VisuallyHidden>
       {isBusy && <Spinner size="sm" />}
       {hasClear && value && !isDisabled && (
         <button

package/src/Timestamp/Timestamp.doc.mjs

@@ -84,7 +84,7 @@ export const docs = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-timestamp', visualProps: ['type', 'color']},
+      {className: 'astryx-timestamp', visualProps: ['type', 'color', 'format']},
     ],
   },
   usage: {

package/src/Timestamp/Timestamp.test.tsx

@@ -33,6 +33,31 @@ describe('Timestamp', () => {
     expect(screen.getByText('2 hours ago')).toBeInTheDocument();
   });
 
+  it('does not round a tier up past its own boundary', () => {
+    // Just under each threshold the count must stay within the tier, e.g.
+    // 59.98 minutes is "59 minutes ago", never "60 minutes ago".
+    const {rerender} = render(
+      <Timestamp value={Date.now() / 1000 - 3599} format="relative" />,
+    );
+    expect(screen.getByText('59 minutes ago')).toBeInTheDocument();
+
+    rerender(
+      <Timestamp value={Date.now() / 1000 - 86399} format="relative" />,
+    );
+    expect(screen.getByText('23 hours ago')).toBeInTheDocument();
+
+    rerender(
+      <Timestamp value={Date.now() / 1000 - 2591999} format="relative" />,
+    );
+    expect(screen.getByText('29 days ago')).toBeInTheDocument();
+
+    // Same guarantee on the future side.
+    rerender(
+      <Timestamp value={Date.now() / 1000 + 3599} format="relative" />,
+    );
+    expect(screen.getByText('in 59 minutes')).toBeInTheDocument();
+  });
+
   it('renders "now" for very recent times', () => {
     const fiveSecondsAgo = Date.now() / 1000 - 5;
     render(<Timestamp value={fiveSecondsAgo} format="relative" />);
@@ -290,4 +315,31 @@ describe('Timestamp', () => {
     const el = screen.getByRole('time');
     expect(el.textContent).not.toContain('ago');
   });
+
+  // --- Invalid values ---
+
+  it('renders nothing instead of crashing on an unparseable string value', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    try {
+      const {container} = render(
+        <Timestamp value="not-a-date" data-testid="ts" />,
+      );
+      expect(container).toBeEmptyDOMElement();
+      expect(warn).toHaveBeenCalledWith(
+        expect.stringContaining('could not parse value'),
+      );
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it('renders nothing instead of crashing on a NaN value', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    try {
+      const {container} = render(<Timestamp value={NaN} data-testid="ts" />);
+      expect(container).toBeEmptyDOMElement();
+    } finally {
+      warn.mockRestore();
+    }
+  });
 });

package/src/Timestamp/Timestamp.tsx

@@ -180,22 +180,22 @@ function getRelativeTimeString(date: Date, now: Date): string {
       return 'in a few seconds';
     }
     if (absDiff < HOUR) {
-      const mins = Math.round(absDiff / MINUTE);
+      const mins = Math.floor(absDiff / MINUTE);
       return `in ${mins} ${mins === 1 ? 'minute' : 'minutes'}`;
     }
     if (absDiff < DAY) {
-      const hours = Math.round(absDiff / HOUR);
+      const hours = Math.floor(absDiff / HOUR);
       return `in ${hours} ${hours === 1 ? 'hour' : 'hours'}`;
     }
     if (absDiff < MONTH) {
-      const days = Math.round(absDiff / DAY);
+      const days = Math.floor(absDiff / DAY);
       return `in ${days} ${days === 1 ? 'day' : 'days'}`;
     }
     if (absDiff < YEAR) {
-      const months = Math.round(absDiff / MONTH);
+      const months = Math.floor(absDiff / MONTH);
       return `in ${months} ${months === 1 ? 'month' : 'months'}`;
     }
-    const years = Math.round(absDiff / YEAR);
+    const years = Math.floor(absDiff / YEAR);
     return `in ${years} ${years === 1 ? 'year' : 'years'}`;
   }
 
@@ -203,25 +203,25 @@ function getRelativeTimeString(date: Date, now: Date): string {
     return `${diffSeconds} seconds ago`;
   }
   if (diffSeconds < HOUR) {
-    const mins = Math.round(diffSeconds / MINUTE);
+    const mins = Math.floor(diffSeconds / MINUTE);
     return `${mins} ${mins === 1 ? 'minute' : 'minutes'} ago`;
   }
   if (diffSeconds < DAY) {
-    const hours = Math.round(diffSeconds / HOUR);
+    const hours = Math.floor(diffSeconds / HOUR);
     return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`;
   }
   if (diffSeconds < 2 * DAY) {
     return 'yesterday';
   }
   if (diffSeconds < MONTH) {
-    const days = Math.round(diffSeconds / DAY);
+    const days = Math.floor(diffSeconds / DAY);
     return `${days} days ago`;
   }
   if (diffSeconds < YEAR) {
-    const months = Math.round(diffSeconds / MONTH);
+    const months = Math.floor(diffSeconds / MONTH);
     return `${months} ${months === 1 ? 'month' : 'months'} ago`;
   }
-  const years = Math.round(diffSeconds / YEAR);
+  const years = Math.floor(diffSeconds / YEAR);
   return `${years} ${years === 1 ? 'year' : 'years'} ago`;
 }
 
@@ -360,7 +360,12 @@ export function Timestamp({
   const [now, setNow] = useState(() => new Date());
 
   const date = parseValue(value);
-  const isoString = date.toISOString();
+  // An unparseable value (a malformed date string, or a NaN timestamp from
+  // missing data) yields an Invalid Date, and formatting one throws "Invalid
+  // time value" — crashing the whole tree. Compute nothing from it here and
+  // bail out below (after the hooks) instead.
+  const isValidDate = !Number.isNaN(date.getTime());
+  const isoString = isValidDate ? date.toISOString() : '';
 
   // Determine effective format
   const diffSeconds = Math.round((now.getTime() - date.getTime()) / 1000);
@@ -372,19 +377,20 @@ export function Timestamp({
       : format;
 
   // Format the display text
-  const displayText =
-    effectiveFormat === 'relative'
+  const displayText = !isValidDate
+    ? ''
+    : effectiveFormat === 'relative'
       ? getRelativeTimeString(date, now)
       : isAbsoluteFormat(effectiveFormat)
         ? formatTimestamp(date, effectiveFormat, isTimezoneShown)
         : '';
 
   // Full absolute text for tooltip and aria-label
-  const fullAbsoluteText = getFullAbsoluteString(date);
+  const fullAbsoluteText = isValidDate ? getFullAbsoluteString(date) : '';
 
   // Live updates
   useEffect(() => {
-    if (!isLive || effectiveFormat !== 'relative') {
+    if (!isLive || !isValidDate || effectiveFormat !== 'relative') {
       return;
     }
 
@@ -394,7 +400,15 @@ export function Timestamp({
     }, interval);
 
     return () => clearInterval(timer);
-  }, [isLive, effectiveFormat, diffSeconds]);
+  }, [isLive, isValidDate, effectiveFormat, diffSeconds]);
+
+  // Placed after all hooks so the hook order stays stable across renders.
+  if (!isValidDate) {
+    console.warn(
+      `Timestamp: could not parse value ${JSON.stringify(value)} as a date. Rendering nothing.`,
+    );
+    return null;
+  }
 
   const showTooltip = hasTooltip && effectiveFormat === 'relative';
 

package/src/Toast/Toast.tsx

@@ -121,8 +121,14 @@ export function Toast({
   // Will be initialized by startTimer when actually used
   const startTimeRef = useRef<number | null>(null);
 
+  // Read onDismiss through a ref: the viewport re-creates it on every render
+  // (another toast arriving/exiting), and a startTimer that depends on it
+  // would restart — and un-pause — this toast's timer on unrelated renders.
+  const onDismissRef = useRef(onDismiss);
+  onDismissRef.current = onDismiss;
+
   const startTimer = useCallback(() => {
-    if (!isAutoHide) {
+    if (!isAutoHide || isPausedRef.current) {
       return;
     }
     if (timerRef.current) {
@@ -130,9 +136,9 @@ export function Toast({
     }
     startTimeRef.current = Date.now();
     timerRef.current = setTimeout(() => {
-      onDismiss('auto');
+      onDismissRef.current('auto');
     }, remainingRef.current);
-  }, [isAutoHide, onDismiss]);
+  }, [isAutoHide]);
 
   const pauseTimer = useCallback(() => {
     if (!isAutoHide || isPausedRef.current) {
@@ -165,6 +171,8 @@ export function Toast({
         clearTimeout(timerRef.current);
       }
     };
+    // startTimer's identity is stable per isAutoHide, so this runs on mount
+    // and on a genuine duration change — not on unrelated viewport renders.
   }, [autoHideDuration, startTimer]);
 
   // Pause the auto-hide timer while the window is not focused, so a toast

package/src/Toast/ToastViewport.test.tsx

@@ -212,3 +212,67 @@ describe('ToastViewport region ARIA', () => {
     expect(region).not.toHaveAttribute('aria-modal');
   });
 });
+
+describe('toast timer lifecycle (#3589)', () => {
+  it('fires onHide exactly once when dismissed twice during the exit window', () => {
+    const onHide = vi.fn();
+    renderViewport(
+      <ShowToastButton options={{body: 'Once', onHide}} triggerLabel="Show" />,
+    );
+    act(() => {
+      fireEvent.click(screen.getByText('Show'));
+    });
+    const dismiss = screen.getByRole('button', {name: 'Dismiss notification'});
+    act(() => {
+      fireEvent.click(dismiss);
+    });
+    // The toast stays mounted during its exit transition; a second click
+    // lands on the same still-mounted button.
+    act(() => {
+      fireEvent.click(dismiss);
+    });
+    expect(onHide).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps a window-blur pause alive when another toast arrives', () => {
+    vi.useFakeTimers();
+    try {
+      const onHide = vi.fn();
+      renderViewport(
+        <>
+          <ShowToastButton
+            options={{body: 'Paused', autoHideDuration: 3000, onHide}}
+            triggerLabel="Show A"
+          />
+          <ShowToastButton options={INFO_B} triggerLabel="Show B" />
+        </>,
+      );
+      act(() => {
+        fireEvent.click(screen.getByText('Show A'));
+      });
+      act(() => {
+        fireEvent.blur(window);
+      });
+      // A second toast arriving re-renders the viewport; the paused timer
+      // must not silently restart.
+      act(() => {
+        fireEvent.click(screen.getByText('Show B'));
+      });
+      act(() => {
+        vi.advanceTimersByTime(60_000);
+      });
+      expect(onHide).not.toHaveBeenCalled();
+      // Focus returns: the remaining time resumes and completes normally.
+      act(() => {
+        fireEvent.focus(window);
+      });
+      act(() => {
+        vi.advanceTimersByTime(60_000);
+      });
+      expect(onHide).toHaveBeenCalledTimes(1);
+      expect(onHide).toHaveBeenCalledWith('auto');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});

package/src/Toast/ToastViewport.tsx

@@ -114,6 +114,9 @@ export function ToastViewport({
 
   // Show the popover on mount so it enters the top layer.
   const viewportRef = useRef<HTMLDivElement>(null);
+  // Toast ids whose exit has begun — guards onHide from double-firing (see
+  // removeToast). Mirrors exitingIds state, readable synchronously.
+  const exitingIdsRef = useRef<Set<string>>(new Set());
   // The element that was focused before the user jumped into the viewport
   // (via F6). Used to restore focus once all toasts are dismissed so focus
   // never falls to <body>.
@@ -171,6 +174,14 @@ export function ToastViewport({
   }, []);
 
   const removeToast = useCallback((id: string, reason: ToastDismissReason) => {
+    // An exiting toast stays in toastsRef until its exit transition ends, so
+    // a second dismissal inside that window (double-click, auto-timer plus
+    // manual dismiss()) would re-fire onHide. Track exiting ids in a ref —
+    // the exitingIds state dedupe below runs too late to protect onHide.
+    if (exitingIdsRef.current.has(id)) {
+      return;
+    }
+    exitingIdsRef.current.add(id);
     const entry = toastsRef.current.find(t => t.id === id);
     if (entry) {
       entry.options.onHide?.(reason);
@@ -210,6 +221,7 @@ export function ToastViewport({
   }, []);
 
   const handleExited = useCallback((id: string) => {
+    exitingIdsRef.current.delete(id);
     setExitingIds(prev => {
       if (!prev.has(id)) {
         return prev;