@transferwise/components 0.0.0-experimental-d72e9b7 → 0.0.0-experimental-f4ca4fa

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

@@ -1,12 +1,16 @@
-import { userEvent, within, expect } from 'storybook/test';
+import { userEvent, within, expect, waitFor } from 'storybook/test';
 import { action } from 'storybook/actions';
+import { Card } from '@transferwise/icons';
 import { withVariantConfig } from '../../../.storybook/helpers';
+import { allModes } from '../../../.storybook/modes';
 import { lorem20 } from '../../test-utils';
 import { wait } from '../../test-utils/wait';
 import Button from '../../Button';
-import { Snackbar, type SnackbarProps } from '../Snackbar';
+import { Snackbar } from '../Snackbar';
+import type { SnackbarCreationProps } from '../Snackbar.types';
 import { SnackbarConsumer } from '../SnackbarContext';
 import SnackbarProvider from '../SnackbarProvider';
+import useSnackbar from '../useSnackbar';
 
 export default {
   title: 'Prompts/Snackbar/Tests',
@@ -18,48 +22,41 @@ export default {
 const launchSnackbar = async (canvasElement: HTMLElement) => {
   await wait(0);
   const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByRole('button'));
+  await userEvent.click(canvas.getByRole('button', { name: 'Show Snackbar' }));
+  await waitFor(async () =>
+    expect(document.querySelector('.wds-Snackbar-container-appear-done')).not.toBeNull(),
+  );
 };
 
-type Args = Partial<SnackbarProps> & {
-  extraContext: React.ReactNode;
-  timeout: number;
+type Args = Partial<SnackbarCreationProps> & {
+  extraContext?: React.ReactNode;
 };
 
-const TIMEOUT = 10000000;
+function SnackbarTestTrigger({ text = 'Some text', extraContext, ...props }: Args) {
+  const createSnackbar = useSnackbar();
+
+  return (
+    <>
+      <Button v2 block onClick={() => createSnackbar({ text, ...props })}>
+        Show Snackbar
+      </Button>
+      {extraContext}
+    </>
+  );
+}
 
 const Default = {
   args: {
-    timeout: TIMEOUT,
+    duration: 'indefinite',
+    action: { label: 'View', onClick: action('View button clicked.') },
   } as Args,
   play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
     await launchSnackbar(canvasElement);
   },
   render: (args: Args) => {
     return (
-      <SnackbarProvider timeout={args.timeout}>
-        <SnackbarConsumer>
-          {({ createSnackbar }) => (
-            <>
-              <Button
-                v2
-                block
-                onClick={() => {
-                  createSnackbar({
-                    action: {
-                      label: 'View',
-                      onClick: () => action('View button clicked.'),
-                    },
-                    text: <span>Some text</span>,
-                  });
-                }}
-              >
-                Show Snackbar
-              </Button>
-              {args.extraContext}
-            </>
-          )}
-        </SnackbarConsumer>
+      <SnackbarProvider>
+        <SnackbarTestTrigger {...args} />
       </SnackbarProvider>
     );
   },
@@ -72,26 +69,100 @@ export const Basic = {
   },
 };
 
-export const Mobile = {
+export const Success = {
+  ...Default,
+  args: { ...Default.args, sentiment: 'success' },
+};
+
+export const Warning = {
+  ...Default,
+  args: { ...Default.args, sentiment: 'warning' },
+};
+
+export const Negative = {
+  ...Default,
+  args: { ...Default.args, sentiment: 'negative' },
+};
+
+export const Proposition = {
+  ...Default,
+  args: { ...Default.args, sentiment: 'proposition' },
+  parameters: {
+    chromatic: {
+      modes: { Desktop: allModes.desktop, 'Zoom 400%': allModes.zoom400 },
+    },
+  },
+};
+
+export const WithoutAction = {
+  ...Default,
+  args: { ...Default.args, action: undefined },
+};
+
+export const CustomMedia = {
+  ...Default,
+  render: (args: Args) => (
+    <SnackbarProvider>
+      <SnackbarTestTrigger {...args} media={<Card aria-hidden />} />
+    </SnackbarProvider>
+  ),
+  parameters: {
+    chromatic: {
+      modes: {
+        Desktop: allModes.desktop,
+        Dark: { ...allModes.desktop, ...allModes.dark },
+        Mobile: allModes.largeMobile,
+        'Zoom 400%': allModes.zoom400,
+      },
+    },
+  },
+};
+
+export const Loading = {
   ...Default,
   args: {
     ...Default.args,
+    loading: true,
+  },
+  parameters: {
+    chromatic: {
+      modes: {
+        Desktop: allModes.desktop,
+        Dark: { ...allModes.desktop, ...allModes.dark },
+        Mobile: allModes.largeMobile,
+        'Zoom 400%': allModes.zoom400,
+      },
+    },
   },
-  ...withVariantConfig(['mobile'], Default),
 };
 
-const switchToDarkMode = async (context: { canvasElement: HTMLElement }) => {
-  await Default.play(context);
+export const NavigationAction = {
+  ...Default,
+  args: {
+    ...Default.args,
+    action: {
+      label: 'View transfer',
+      href: '/transfers/123',
+      target: '_blank',
+    },
+  },
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    await launchSnackbar(canvasElement);
+
+    const link = await waitFor(() =>
+      within(document.body).getByRole('link', { name: 'View transfer' }),
+    );
+    await expect(link).toHaveAttribute('href', '/transfers/123');
+    await expect(link).toHaveAttribute('target', '_blank');
+  },
+};
 
-  // the snackbar is outside the storybook dom so dark mode doesn't apply
-  const body = document.querySelector('div.np-theme-personal');
-  if (body) {
-    body.setAttribute('class', 'np-theme-personal--dark');
-  }
-  const snackbar = document.querySelector('div.snackbar');
-  if (snackbar) {
-    snackbar.setAttribute('class', 'snackbar np-theme-personal--dark');
-  }
+export const Mobile = {
+  ...Default,
+  args: {
+    ...Default.args,
+  },
+  ...withVariantConfig(['mobile'], Default),
 };
 
 export const DarkMode = {
@@ -99,8 +170,7 @@ export const DarkMode = {
   args: {
     ...Default.args,
   },
-  play: switchToDarkMode,
-  ...withVariantConfig(['dark'], Default),
+  globals: { screenMode: 'dark' },
 };
 
 export const Zoom400 = {
@@ -120,6 +190,31 @@ export const Zoom400 = {
   ...withVariantConfig(['400%'], Default),
 };
 
+export const Zoom400ShortMessage = {
+  ...Default,
+  ...withVariantConfig(['400%'], Default),
+};
+
+/** Deliberately unsuitable content: records how unbroken words can overflow the layout. */
+export const LongUnbrokenText = {
+  ...Default,
+  args: {
+    ...Default.args,
+    text: `Your transfer is ready. ${'VeryLongUnbrokenTransferReference'.repeat(5)}`,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Stress case, not recommended usage. Very long unbroken words can overflow the current layout; keep Snackbar messages short and readable.',
+      },
+    },
+    chromatic: {
+      modes: { Desktop: allModes.desktop, Mobile: allModes.largeMobile },
+    },
+  },
+};
+
 /**
  * Snackbar is only shown once even if trigger is clicked many times
  */
@@ -134,6 +229,35 @@ export const MultipleClicks = {
       await userEvent.click(canvas.getByRole('button'));
     }
 
-    await expect(within(document.body).getAllByRole('alert')).toHaveLength(1);
+    await expect(within(document.body).getAllByRole('status')).toHaveLength(1);
+  },
+};
+
+/** Empty text dismisses the current Snackbar without rendering a blank replacement. */
+export const ClearedMessage = {
+  ...Default,
+  args: {
+    ...Default.args,
+    extraContext: (
+      <SnackbarConsumer>
+        {({ createSnackbar }) => (
+          <Button v2 onClick={() => createSnackbar({ text: '' })}>
+            Clear Snackbar
+          </Button>
+        )}
+      </SnackbarConsumer>
+    ),
+  },
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button', { name: 'Show Snackbar' }));
+    await waitFor(async () => {
+      await expect(within(document.body).getByRole('status')).toBeInTheDocument();
+    });
+    await userEvent.click(canvas.getByRole('button', { name: 'Clear Snackbar' }));
+    await waitFor(async () => {
+      await expect(within(document.body).queryByRole('status')).not.toBeInTheDocument();
+      await expect(document.querySelector('.wds-Snackbar')).toBeNull();
+    });
   },
 };

package/src/Snackbar/constants.ts

@@ -0,0 +1,10 @@
+export const SNACKBAR_ENTER_DURATION = 300;
+export const SNACKBAR_EXIT_DURATION = 150;
+
+/** Default auto-dismiss duration for short feedback, in milliseconds. */
+export const SNACKBAR_DEFAULT_DURATION = 4000;
+/** Extended auto-dismiss duration for messages needing more reading time, in milliseconds. */
+export const SNACKBAR_EXTENDED_DURATION = 6000;
+
+/** Fraction of the Snackbar surface height a downward swipe must travel to dismiss (0.5 = half). */
+export const SNACKBAR_SWIPE_DISMISS_THRESHOLD = 0.5;

package/src/Snackbar/index.ts

@@ -1,4 +1,4 @@
 export { default } from './Snackbar';
 
-export type { SnackbarProps } from './Snackbar';
+export type { SnackbarCreationProps } from './Snackbar.types';
 export type { SnackbarProviderProps } from './SnackbarProvider';

package/src/Snackbar/useSnackbarAutoDismiss.ts

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { SNACKBAR_DEFAULT_DURATION, SNACKBAR_EXTENDED_DURATION } from './constants';
+import type { SnackbarProps } from './Snackbar';
+import type { SnackbarDuration } from './Snackbar.types';
+
+const DURATIONS: Record<SnackbarDuration, number | null> = {
+  default: SNACKBAR_DEFAULT_DURATION,
+  extended: SNACKBAR_EXTENDED_DURATION,
+  indefinite: null,
+};
+
+/** Starts after entry finishes and pauses on hover, focus or swipe, preserving the remaining time. */
+const useSnackbarAutoDismiss = ({
+  duration,
+  loading,
+  onDismissRequest,
+  timeout,
+  visible,
+}: Pick<SnackbarProps, 'duration' | 'loading' | 'onDismissRequest' | 'timeout' | 'visible'>) => {
+  const surfaceRef = useRef<HTMLDivElement>(null);
+  const milliseconds = loading
+    ? null
+    : duration
+      ? DURATIONS[duration]
+      : (timeout ?? SNACKBAR_DEFAULT_DURATION);
+  const remaining = useRef(milliseconds);
+  const [entered, setEntered] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const [focusWithin, setFocusWithin] = useState(false);
+  const [swiping, setSwiping] = useState(false);
+
+  const running = visible && entered && !hovered && !focusWithin && !swiping;
+
+  useEffect(() => {
+    // Only a timing change starts a fresh budget; interaction and callback changes preserve it.
+    remaining.current = milliseconds;
+  }, [milliseconds]);
+
+  useEffect(() => {
+    const ms = remaining.current;
+    if (!running || ms === null) {
+      return undefined;
+    }
+
+    const startedAt = Date.now();
+    const id = window.setTimeout(() => onDismissRequest(), ms);
+    return () => {
+      window.clearTimeout(id);
+      remaining.current = Math.max(0, ms - (Date.now() - startedAt));
+    };
+  }, [running, onDismissRequest, milliseconds]);
+
+  return {
+    handleBlur: (event: React.FocusEvent<HTMLDivElement>) => {
+      if (!event.currentTarget.contains(event.relatedTarget)) {
+        setFocusWithin(false);
+      }
+    },
+    handleEntered: () => {
+      // Entry can finish beneath the pointer or with focus already inside the surface.
+      setHovered(surfaceRef.current?.matches(':hover') ?? false);
+      setFocusWithin(Boolean(surfaceRef.current?.contains(document.activeElement)));
+      setEntered(true);
+    },
+    handleFocus: () => setFocusWithin(true),
+    handleMouseEnter: () => setHovered(true),
+    handleMouseLeave: () => setHovered(false),
+    setSwiping,
+    surfaceRef,
+  };
+};
+
+export default useSnackbarAutoDismiss;

package/src/Snackbar/useSnackbarManager.ts

@@ -0,0 +1,169 @@
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+
+import type { SnackbarCreationProps } from './Snackbar.types';
+
+type SnackbarInstance = {
+  id: number;
+  props: SnackbarCreationProps;
+};
+
+type SnackbarManagerState = {
+  /** The instance currently entering, visible or exiting. `null` means the provider is idle. */
+  active: SnackbarInstance | null;
+  /** Marks the active provider render as committed, not its entry animation as finished. */
+  activeHasRendered: boolean;
+  /** Changes when a new instance becomes active so repeated message text can be announced. */
+  announcementKey: number;
+  /** The latest replacement waiting for active to exit. `null` means no replacement is waiting. */
+  pending: SnackbarInstance | null;
+  /** Whether active should enter/stay visible; false requests its exit or indicates idle state. */
+  visible: boolean;
+};
+
+type SnackbarManagerAction =
+  | { type: 'show'; instance: SnackbarInstance }
+  | {
+      /** Ends pre-render coalescing; subsequent creates must wait for the committed instance to exit. */
+      type: 'rendered';
+      instanceId: number;
+    }
+  | { type: 'dismiss' }
+  | {
+      /** Like `dismiss`, but also cancels a queued replacement. Sent when `createSnackbar` gets empty text. */
+      type: 'clear';
+    }
+  | { type: 'exited'; instanceId: number };
+
+const emptyState: SnackbarManagerState = {
+  active: null,
+  activeHasRendered: false,
+  announcementKey: 0,
+  pending: null,
+  visible: false,
+};
+
+/**
+ * Coalesces creates before the first commit, then keeps active content until its exit finishes.
+ * Only the latest pending replacement is retained. Exited promotes pending or returns to idle.
+ * Instance IDs prevent stale exit callbacks from affecting a newer Snackbar.
+ */
+const snackbarManagerReducer = (
+  state: SnackbarManagerState,
+  action: SnackbarManagerAction,
+): SnackbarManagerState => {
+  switch (action.type) {
+    case 'show':
+      if (!state.active || !state.activeHasRendered) {
+        // Batched creates collapse to the latest instance before anything has entered.
+        return {
+          active: action.instance,
+          activeHasRendered: false,
+          announcementKey: state.announcementKey + 1,
+          pending: null,
+          visible: true,
+        };
+      }
+
+      // Keep the active content until it exits; newer creates replace only the pending instance.
+      return { ...state, pending: action.instance, visible: false };
+    case 'rendered':
+      if (state.active?.id !== action.instanceId || state.activeHasRendered) {
+        return state;
+      }
+
+      return { ...state, activeHasRendered: true };
+    case 'dismiss':
+    case 'clear':
+      if (!state.active) {
+        return state;
+      }
+
+      if (!state.activeHasRendered) {
+        return { ...emptyState, announcementKey: state.announcementKey };
+      }
+
+      // Dismissal lets a queued replacement show next; clearing cancels it as well.
+      return { ...state, pending: action.type === 'clear' ? null : state.pending, visible: false };
+    case 'exited':
+      // Ignore callbacks from an instance that has already been replaced.
+      if (state.active?.id !== action.instanceId) {
+        return state;
+      }
+
+      if (state.pending) {
+        return {
+          active: state.pending,
+          activeHasRendered: false,
+          announcementKey: state.announcementKey + 1,
+          pending: null,
+          visible: true,
+        };
+      }
+
+      return { ...emptyState, announcementKey: state.announcementKey };
+    default:
+      return state;
+  }
+};
+
+/**
+ * Owns latest-wins replacement through reducer actions, separate from rendering and animation.
+ * Stable create/dismiss callbacks request state changes; the surface's onExited callback completes
+ * dismissal. The provider uses this state to mount/unmount the portal without a notification queue.
+ */
+const useSnackbarManager = () => {
+  const [state, dispatch] = useReducer(snackbarManagerReducer, emptyState);
+  const nextInstanceId = useRef(0);
+
+  const createSnackbar = useCallback((props: SnackbarCreationProps) => {
+    const { text } = props;
+    if (
+      text == null ||
+      typeof text === 'boolean' ||
+      (typeof text === 'string' && text.trim() === '')
+    ) {
+      // A clear request must dismiss active and cancel pending, never create a blank replacement.
+      dispatch({ type: 'clear' });
+      return;
+    }
+
+    nextInstanceId.current += 1;
+    dispatch({ type: 'show', instance: { id: nextInstanceId.current, props } });
+  }, []);
+
+  const dismissSnackbar = useCallback(() => dispatch({ type: 'dismiss' }), []);
+
+  const handleExited = useCallback(() => {
+    if (!state.active) {
+      return;
+    }
+
+    try {
+      state.active.props.onDismiss?.();
+    } catch (error) {
+      // This runs in a transition commit; an escaping error could unmount the provider.
+      // eslint-disable-next-line no-console
+      console.error('Snackbar onDismiss callback failed:', error);
+    } finally {
+      dispatch({ type: 'exited', instanceId: state.active.id });
+    }
+  }, [state.active]);
+
+  useEffect(() => {
+    if (state.active && state.visible && !state.activeHasRendered) {
+      // Later creates can now wait for this instance's exit instead of coalescing before render.
+      dispatch({ type: 'rendered', instanceId: state.active.id });
+    }
+  }, [state.active, state.activeHasRendered, state.visible]);
+
+  return {
+    active: state.active,
+    announcementKey: state.announcementKey,
+    createSnackbar,
+    dismissSnackbar,
+    handleExited,
+    visible: state.visible,
+  };
+};
+
+export default useSnackbarManager;