@transferwise/components 0.0.0-experimental-38195a1 → 0.0.0-experimental-4f26f19

package/src/Snackbar/SnackbarProvider.test.tsx

@@ -0,0 +1,474 @@
+import { renderHook } from '@testing-library/react';
+
+import { act, mockMatchMedia, render, screen, userEvent } from '../test-utils';
+import { resetLiveRegionAnnouncementQueue } from '../common/LiveRegion/LiveRegion';
+
+import {
+  SNACKBAR_DEFAULT_DURATION,
+  SNACKBAR_ENTER_DURATION,
+  SNACKBAR_EXIT_DURATION,
+  SNACKBAR_EXTENDED_DURATION,
+} from './constants';
+import type { SnackbarCreationProps } from './Snackbar.types';
+import SnackbarProvider from './SnackbarProvider';
+import { SnackbarConsumer } from './SnackbarContext';
+import useSnackbar from './useSnackbar';
+import useSnackbarManager from './useSnackbarManager';
+
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
+
+mockMatchMedia();
+
+const advanceTimers = (duration: number) => {
+  act(() => jest.advanceTimersByTime(duration));
+};
+
+type SnackbarTrigger = { label: string; snackbar: SnackbarCreationProps };
+
+const SnackbarTriggers = ({ triggers }: { triggers: SnackbarTrigger[] }) => {
+  const createSnackbar = useSnackbar();
+
+  return (
+    <>
+      {triggers.map(({ label, snackbar }) => (
+        <button key={label} type="button" onClick={() => createSnackbar(snackbar)}>
+          {label}
+        </button>
+      ))}
+    </>
+  );
+};
+
+const BatchedSnackbarTrigger = ({ clear = false }: { clear?: boolean }) => {
+  const createSnackbar = useSnackbar();
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        createSnackbar({ text: 'First message' });
+        createSnackbar({ text: 'Latest message' });
+        if (clear) {
+          createSnackbar({ text: '' });
+        }
+      }}
+    >
+      Show latest
+    </button>
+  );
+};
+
+const renderProvider = (triggers: SnackbarTrigger[], timeout?: number) =>
+  render(
+    <SnackbarProvider timeout={timeout}>
+      <SnackbarTriggers triggers={triggers} />
+    </SnackbarProvider>,
+  );
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  resetLiveRegionAnnouncementQueue();
+});
+
+afterEach(() => {
+  jest.clearAllTimers();
+  jest.useRealTimers();
+});
+
+/* eslint-disable testing-library/no-node-access -- Portal placement, teardown and transition classes require structural DOM assertions. */
+describe('SnackbarProvider orchestration', () => {
+  it('does not mount a portal or live region while idle', () => {
+    const { baseElement } = renderProvider([]);
+
+    expect(baseElement.querySelector('.wds-Snackbar')).toBeNull();
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+  });
+
+  it.each(['', '   ', undefined, null, false, true])(
+    'does not show an empty surface when text is %p',
+    async (text) => {
+      renderProvider([{ label: 'Show', snackbar: { text } }]);
+
+      await user.click(screen.getByRole('button', { name: 'Show' }));
+
+      expect(screen.queryByRole('status')).not.toBeInTheDocument();
+      expect(document.querySelector('.wds-Snackbar')).toBeNull();
+      expect(jest.getTimerCount()).toBe(0);
+    },
+  );
+
+  it('keeps zero as valid message content', async () => {
+    renderProvider([{ label: 'Show', snackbar: { text: 0 } }]);
+
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    expect(screen.getByRole('status')).toHaveTextContent('0');
+  });
+
+  it('creates a Snackbar programmatically in document.body', async () => {
+    const { container } = renderProvider([
+      { label: 'Show', snackbar: { text: 'Changes saved', sentiment: 'success' } },
+    ]);
+
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    expect(screen.getByRole('status')).toHaveTextContent('Changes saved');
+    expect(container).not.toContainElement(screen.getByRole('status'));
+    expect(screen.getByText('Changes saved').closest('.wds-Snackbar')?.parentElement).toBe(
+      document.body,
+    );
+  });
+
+  it('dismisses after the default four-second duration', async () => {
+    renderProvider([{ label: 'Show', snackbar: { text: 'Changes saved' } }]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - 1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+  });
+
+  it('retains an explicitly configured Provider timeout', async () => {
+    renderProvider(
+      [{ label: 'Show', snackbar: { text: 'Changes saved' } }],
+      SNACKBAR_DEFAULT_DURATION * 2,
+    );
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION * 2 - 1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('uses an explicit semantic duration instead of the legacy Provider timeout', async () => {
+    renderProvider(
+      [{ label: 'Show', snackbar: { text: 'Changes saved', duration: 'extended' } }],
+      1,
+    );
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_EXTENDED_DURATION - 1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('pauses the provider timer while keyboard focus moves within the Snackbar', async () => {
+    renderProvider([
+      { label: 'Show', snackbar: { text: 'Changes saved', action: { label: 'Undo' } } },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION / 2);
+
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'Undo' })).toHaveFocus();
+    advanceTimers(SNACKBAR_DEFAULT_DURATION * 2);
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'Close' })).toHaveFocus();
+    advanceTimers(SNACKBAR_DEFAULT_DURATION * 2);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    await user.tab();
+    advanceTimers(SNACKBAR_DEFAULT_DURATION / 2 - 1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+  });
+
+  it('keeps indefinite notifications until manually dismissed', async () => {
+    renderProvider([
+      { label: 'Show', snackbar: { text: 'Changes saved', duration: 'indefinite' } },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    advanceTimers(60_000);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('exits the active Snackbar before showing the latest replacement', async () => {
+    renderProvider([
+      { label: 'Show first', snackbar: { text: 'First message' } },
+      { label: 'Show second', snackbar: { text: 'Second message' } },
+      { label: 'Show latest', snackbar: { text: 'Latest message' } },
+    ]);
+
+    await user.click(screen.getByRole('button', { name: 'Show first' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    await user.click(screen.getByRole('button', { name: 'Show second' }));
+    await user.click(screen.getByRole('button', { name: 'Show latest' }));
+
+    advanceTimers(SNACKBAR_EXIT_DURATION - 1);
+    expect(screen.getByText('First message')).toBeInTheDocument();
+    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
+    expect(screen.queryByText('Latest message')).not.toBeInTheDocument();
+
+    advanceTimers(1);
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
+    expect(screen.getByText('Latest message')).toBeInTheDocument();
+    expect(screen.getAllByRole('status')).toHaveLength(1);
+    expect(screen.getByText('Latest message').closest('.wds-Snackbar-container')).toHaveClass(
+      'wds-Snackbar-container-appear-active',
+    );
+  });
+
+  it('shows the latest Snackbar when creations are batched before the first render', async () => {
+    render(
+      <SnackbarProvider>
+        <BatchedSnackbarTrigger />
+      </SnackbarProvider>,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Show latest' }));
+
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+    expect(screen.getByText('Latest message')).toBeInTheDocument();
+  });
+
+  it('replaces Snackbars even when their timestamps and the clock are unchanged', async () => {
+    renderProvider([
+      { label: 'Show first', snackbar: { text: 'First message', timestamp: 1 } },
+      { label: 'Show second', snackbar: { text: 'Second message', timestamp: 1 } },
+    ]);
+
+    await user.click(screen.getByRole('button', { name: 'Show first' }));
+    await user.click(screen.getByRole('button', { name: 'Show second' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+    expect(screen.getByText('Second message')).toBeInTheDocument();
+  });
+
+  it('gives a replacing Snackbar a fresh timeout after the active one exits', async () => {
+    renderProvider([
+      { label: 'Show first', snackbar: { text: 'First message' } },
+      { label: 'Replace', snackbar: { text: 'Replacement' } },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Show first' }));
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - SNACKBAR_EXIT_DURATION);
+    await user.click(screen.getByRole('button', { name: 'Replace' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION - 1);
+    expect(screen.getByText('Replacement')).toBeInTheDocument();
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+    expect(screen.queryByText('Replacement')).not.toBeInTheDocument();
+  });
+
+  it.each(['', undefined])('dismisses instead of replacing with empty text %p', async (text) => {
+    renderProvider([
+      { label: 'Show first', snackbar: { text: 'First message' } },
+      { label: 'Clear', snackbar: { text } },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Show first' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    await user.click(screen.getByRole('button', { name: 'Clear' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION - 1);
+    expect(screen.getByText('First message')).toBeInTheDocument();
+
+    advanceTimers(1);
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+    advanceTimers(SNACKBAR_DEFAULT_DURATION);
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+  });
+
+  it('clears a pending replacement when the latest request has empty text', async () => {
+    renderProvider([
+      { label: 'Show first', snackbar: { text: 'First message' } },
+      { label: 'Replace', snackbar: { text: 'Pending message' } },
+      { label: 'Clear', snackbar: { text: '' } },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Show first' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    await user.click(screen.getByRole('button', { name: 'Replace' }));
+    await user.click(screen.getByRole('button', { name: 'Clear' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+
+    expect(screen.queryByText('Pending message')).not.toBeInTheDocument();
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+  });
+
+  it('never mounts a surface when a batched creation is followed by empty text', async () => {
+    render(
+      <SnackbarProvider>
+        <BatchedSnackbarTrigger clear />
+      </SnackbarProvider>,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Show latest' }));
+
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+    expect(jest.getTimerCount()).toBe(0);
+  });
+
+  it('cleans up the active Snackbar timer when the Provider unmounts', async () => {
+    const view = renderProvider([{ label: 'Show', snackbar: { text: 'Changes saved' } }]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    expect(jest.getTimerCount()).toBe(1);
+
+    view.unmount();
+    expect(jest.getTimerCount()).toBe(0);
+  });
+
+  it('removes the portal after the close button finishes dismissing it', async () => {
+    renderProvider([{ label: 'Show', snackbar: { text: 'Changes saved' } }]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+
+    advanceTimers(SNACKBAR_EXIT_DURATION - 1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+    advanceTimers(1);
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+  });
+
+  it('does not restart the timer when its parent rerenders', async () => {
+    const triggers = [{ label: 'Show', snackbar: { text: 'Changes saved' } }];
+    const view = renderProvider(triggers);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+    advanceTimers(SNACKBAR_DEFAULT_DURATION / 2);
+
+    view.rerender(
+      <SnackbarProvider>
+        <SnackbarTriggers triggers={triggers} />
+      </SnackbarProvider>,
+    );
+    advanceTimers(SNACKBAR_DEFAULT_DURATION / 2 - 1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+    advanceTimers(1);
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+
+    expect(document.querySelector('.wds-Snackbar')).toBeNull();
+  });
+
+  it.each(['mouse', 'keyboard', 'touch'] as const)(
+    'dismisses after action activation with %s even if focus stays inside',
+    async (activation) => {
+      const onClick = jest.fn();
+      renderProvider([
+        { label: 'Show', snackbar: { text: 'Changes saved', action: { label: 'Undo', onClick } } },
+      ]);
+      await user.click(screen.getByRole('button', { name: 'Show' }));
+      advanceTimers(SNACKBAR_ENTER_DURATION);
+      const action = screen.getByRole('button', { name: 'Undo' });
+      await user.tab();
+      expect(action).toHaveFocus();
+
+      if (activation === 'keyboard') {
+        await user.keyboard('{Enter}');
+      } else if (activation === 'touch') {
+        await user.pointer([{ target: action, keys: '[TouchA>]' }, { keys: '[/TouchA]' }]);
+      } else {
+        await user.click(action);
+      }
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+      advanceTimers(SNACKBAR_EXIT_DURATION);
+      expect(document.querySelector('.wds-Snackbar')).toBeNull();
+    },
+  );
+
+  it('preserves a follow-up Snackbar created by the action callback', async () => {
+    render(
+      <SnackbarProvider>
+        <SnackbarConsumer>
+          {({ createSnackbar }) => (
+            <button
+              type="button"
+              onClick={() =>
+                createSnackbar({
+                  text: 'Transfer deleted',
+                  action: {
+                    label: 'Undo',
+                    onClick: () =>
+                      createSnackbar({ text: 'Undo completed', duration: 'indefinite' }),
+                  },
+                })
+              }
+            >
+              Show
+            </button>
+          )}
+        </SnackbarConsumer>
+      </SnackbarProvider>,
+    );
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    advanceTimers(SNACKBAR_ENTER_DURATION);
+
+    await user.click(screen.getByRole('button', { name: 'Undo' }));
+    advanceTimers(SNACKBAR_EXIT_DURATION);
+
+    expect(screen.queryByText('Transfer deleted')).not.toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveTextContent('Undo completed');
+  });
+
+  it('forwards navigation actions unchanged', async () => {
+    renderProvider([
+      {
+        label: 'Show',
+        snackbar: {
+          text: 'Transfer completed',
+          action: { label: <span>View transfer</span>, href: '/transfers/123', target: '_blank' },
+        },
+      },
+    ]);
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    const link = screen.getByRole('link', { name: 'View transfer' });
+    expect(link).toHaveAttribute('href', '/transfers/123');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+});
+
+/* eslint-enable testing-library/no-node-access */
+
+describe('Snackbar manager instance guards', () => {
+  it('ignores an exit callback from an already replaced instance', () => {
+    const { result } = renderHook(() => useSnackbarManager());
+    act(() => result.current.createSnackbar({ text: 'First message' }));
+    const firstExited = result.current.handleExited;
+    act(() => result.current.createSnackbar({ text: 'Replacement' }));
+    act(() => firstExited());
+    const replacementKey = result.current.announcementKey;
+
+    act(() => firstExited());
+
+    expect(result.current.active?.props.text).toBe('Replacement');
+    expect(result.current.announcementKey).toBe(replacementKey);
+    expect(result.current.visible).toBe(true);
+  });
+
+  it('can dismiss a batched instance before it has rendered', () => {
+    const { result } = renderHook(() => useSnackbarManager());
+    act(() => {
+      result.current.createSnackbar({ text: 'Changes saved' });
+      result.current.dismissSnackbar();
+    });
+
+    expect(result.current.active).toBeNull();
+    expect(result.current.visible).toBe(false);
+  });
+});

package/src/Snackbar/SnackbarProvider.tsx

@@ -1,32 +1,40 @@
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 
-import SnackbarPortal, { SnackbarProps } from './Snackbar';
+import SnackbarPortal from './SnackbarPortal';
 import { SnackbarContext } from './SnackbarContext';
+import useSnackbarManager from './useSnackbarManager';
 
 export interface SnackbarProviderProps {
+  /**
+   * @deprecated Use per-Snackbar `duration` instead. Explicit millisecond values remain supported
+   * and are not automatically remapped when no `duration` is supplied.
+   * When neither option is supplied, the default is 4000ms (previously 4500ms), after entry finishes.
+   * To migrate, use `default` for 0–5000ms, `extended` for values above 5000ms, and `indefinite`
+   * for intentionally persistent notifications.
+   */
   timeout?: number;
   children?: React.ReactNode;
 }
 
-export default function SnackbarProvider({ timeout = 4500, children }: SnackbarProviderProps) {
-  const [state, setState] = useState<Omit<SnackbarProps, 'timeout'>>({
-    text: '',
-    timestamp: 0,
-  });
-  const { action, text, timestamp } = state;
+export default function SnackbarProvider({ timeout, children }: SnackbarProviderProps) {
+  const { active, announcementKey, createSnackbar, dismissSnackbar, handleExited, visible } =
+    useSnackbarManager();
+  const contextValue = useMemo(() => ({ createSnackbar }), [createSnackbar]);
 
   return (
-    <SnackbarContext.Provider
-      value={useMemo(
-        () => ({
-          createSnackbar: ({ action, text }) => {
-            setState({ action, text, timestamp: Date.now() });
-          },
-        }),
-        [],
-      )}
-    >
-      <SnackbarPortal action={action} text={text} timestamp={timestamp} timeout={timeout} />
+    <SnackbarContext.Provider value={contextValue}>
+      {active ? (
+        <SnackbarPortal
+          // Each instance gets a fresh appear transition and live-region announcement.
+          key={active.id}
+          {...active.props}
+          announcementKey={announcementKey}
+          timeout={timeout}
+          visible={visible}
+          onDismissRequest={dismissSnackbar}
+          onExited={handleExited}
+        />
+      ) : null}
       {children}
     </SnackbarContext.Provider>
   );

package/src/Snackbar/_stories/Snackbar.rtl.test.story.tsx

@@ -1,8 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 
 import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { Snackbar } from '../Snackbar';
+import type { SnackbarCreationProps } from '../Snackbar.types';
+import SnackbarProvider from '../SnackbarProvider';
+import useSnackbar from '../useSnackbar';
 
 export default {
   component: Snackbar,
@@ -12,18 +15,23 @@ export default {
 
 type Story = StoryObj<typeof Snackbar>;
 
-const TIMEOUT = 10_000_000;
-
-function SnackbarStory({ text, action }: { text: string; action?: { label: string } }) {
-  const [timestamp, setTimestamp] = useState(0);
+function ShowOnMount(props: SnackbarCreationProps) {
+  const createSnackbar = useSnackbar();
 
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setTimestamp(1);
+    createSnackbar(props);
+    // This visual fixture creates once per mount, not on every render of its props.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  return null;
+}
+
+function SnackbarStory({ text, action }: { text: string; action?: { label: string } }) {
   return (
-    <Snackbar text={<span>{text}</span>} timestamp={timestamp} timeout={TIMEOUT} action={action} />
+    <SnackbarProvider>
+      <ShowOnMount text={<span>{text}</span>} action={action} duration="indefinite" />
+    </SnackbarProvider>
   );
 }