@transferwise/components 46.167.0 → 46.168.0

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

@@ -0,0 +1,263 @@
+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 } 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',
+  component: Snackbar,
+  argTypes: {},
+  tags: ['!autodocs', '!manifest'],
+};
+
+const launchSnackbar = async (canvasElement: HTMLElement) => {
+  await wait(0);
+  const canvas = within(canvasElement);
+  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<SnackbarCreationProps> & {
+  extraContext?: React.ReactNode;
+};
+
+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: {
+    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>
+        <SnackbarTestTrigger {...args} />
+      </SnackbarProvider>
+    );
+  },
+};
+
+export const Basic = {
+  ...Default,
+  args: {
+    ...Default.args,
+  },
+};
+
+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,
+      },
+    },
+  },
+};
+
+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');
+  },
+};
+
+export const Mobile = {
+  ...Default,
+  args: {
+    ...Default.args,
+  },
+  ...withVariantConfig(['mobile'], Default),
+};
+
+export const DarkMode = {
+  ...Default,
+  args: {
+    ...Default.args,
+  },
+  globals: { screenMode: 'dark' },
+};
+
+export const Zoom400 = {
+  ...Default,
+  args: {
+    ...Default.args,
+    extraContext: (
+      <div className="p-t-3">
+        Snackbar isn&#39;t transparent (I&#39;m going to make this text very long so that it will
+        fill up the entire page and go behind the snackbar. This way, when you look at it you will
+        easily be able to tell if the snackbar is transparent and recognize the bug because we
+        don&#39;t want it to be transparent. Transparent is bad. When we first did rebrand we had a
+        lot of problems with transparencies. {lorem20}
+      </div>
+    ),
+  },
+  ...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
+ */
+export const MultipleClicks = {
+  ...Default,
+  args: {
+    ...Default.args,
+  },
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+    for (let i = 0; i < 8; i += 1) {
+      await userEvent.click(canvas.getByRole('button'));
+    }
+
+    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/Prompt/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 → Prompt/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/Prompt/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/Prompt/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;

package/src/Prompt/Snackbar/useSnackbarSwipeDismiss.ts

@@ -0,0 +1,169 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import { SNACKBAR_SWIPE_DISMISS_THRESHOLD } from './constants';
+
+const DISMISS_CLASS = 'wds-Snackbar--swipe-dismiss';
+const SETTLE_CLASS = 'wds-Snackbar--swipe-settle';
+
+type SwipePointer = {
+  id: number;
+  target: Element;
+  startX: number;
+  startY: number;
+  threshold: number;
+};
+
+/**
+ * Captures one primary pointer and follows downward, mostly vertical movement without re-rendering.
+ * Release dismisses at half the surface height; shorter/cancelled gestures settle back into place.
+ * The outer wrapper moves independently of entry/exit motion, and a committed swipe consumes its
+ * follow-up click so dragging from the action cannot activate it.
+ */
+const useSnackbarSwipeDismiss = ({
+  onDismissRequest,
+  onSwipeChange,
+  visible,
+}: {
+  onDismissRequest: () => void;
+  /** Reports when a gesture starts and ends so auto-dismiss can pause beneath the pointer. */
+  onSwipeChange: (swiping: boolean) => void;
+  visible: boolean;
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const pointerRef = useRef<SwipePointer | null>(null);
+  const suppressClick = useRef(false);
+
+  const clearSwipePosition = useCallback(() => {
+    const pointer = pointerRef.current;
+    pointerRef.current = null;
+    if (pointer) {
+      if (pointer.target.hasPointerCapture?.(pointer.id)) {
+        pointer.target.releasePointerCapture(pointer.id);
+      }
+      onSwipeChange(false);
+    }
+    suppressClick.current = false;
+    containerRef.current?.classList.remove(DISMISS_CLASS, SETTLE_CLASS);
+    containerRef.current?.style.removeProperty('transform');
+  }, [onSwipeChange]);
+
+  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0 || !event.isPrimary || pointerRef.current) {
+      return;
+    }
+
+    clearSwipePosition();
+    const target = event.target as Element;
+    target.setPointerCapture?.(event.pointerId);
+    pointerRef.current = {
+      id: event.pointerId,
+      target,
+      startX: event.clientX,
+      startY: event.clientY,
+      threshold: event.currentTarget.offsetHeight * SNACKBAR_SWIPE_DISMISS_THRESHOLD,
+    };
+    onSwipeChange(true);
+  };
+
+  const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+    const pointer = pointerRef.current;
+    if (pointer?.id !== event.pointerId) {
+      return;
+    }
+
+    const offsetY = event.clientY - pointer.startY;
+    const offsetX = event.clientX - pointer.startX;
+    if (offsetY > 0 && offsetY > Math.abs(offsetX)) {
+      containerRef.current?.style.setProperty('transform', `translateY(${offsetY}px)`);
+    } else {
+      containerRef.current?.style.removeProperty('transform');
+    }
+  };
+
+  const handlePointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
+    const pointer = pointerRef.current;
+    if (pointer?.id !== event.pointerId) {
+      return;
+    }
+
+    const offsetY = event.clientY - pointer.startY;
+    const offsetX = event.clientX - pointer.startX;
+    const container = containerRef.current;
+    const bounds = pointer.target.closest('a, button')?.getBoundingClientRect();
+    clearSwipePosition();
+
+    if (offsetY >= pointer.threshold && offsetY > Math.abs(offsetX)) {
+      if (container) {
+        // Include wrapper padding and the safe area, not only the surface, to clear the viewport.
+        container.classList.add(DISMISS_CLASS);
+        container.style.setProperty(
+          'transform',
+          `translateY(${Math.max(offsetY, container.offsetHeight)}px)`,
+        );
+      }
+      suppressClick.current = true;
+      onDismissRequest();
+    } else {
+      // Capture retargets clicks to the pressed control even when released outside it.
+      suppressClick.current =
+        !!bounds &&
+        (offsetX !== 0 || offsetY !== 0) &&
+        (event.clientX < bounds.left ||
+          event.clientX > bounds.right ||
+          event.clientY < bounds.top ||
+          event.clientY > bounds.bottom);
+      container?.classList.add(SETTLE_CLASS);
+    }
+  };
+
+  const handlePointerCancel = useCallback(
+    (event: Pick<PointerEvent, 'pointerId'>) => {
+      if (pointerRef.current?.id !== event.pointerId) {
+        return;
+      }
+
+      clearSwipePosition();
+      containerRef.current?.classList.add(SETTLE_CLASS);
+    },
+    [clearSwipePosition],
+  );
+
+  useEffect(() => {
+    if (visible) {
+      clearSwipePosition();
+    } else if (pointerRef.current) {
+      // An exit starting mid-gesture (timeout, Escape, replacement) ends it without dismissing again.
+      handlePointerCancel({ pointerId: pointerRef.current.id });
+    }
+  }, [visible, clearSwipePosition, handlePointerCancel]);
+
+  useEffect(() => {
+    // Removed descendants report capture loss on their document, not the Snackbar surface.
+    const ownerDocument = containerRef.current?.ownerDocument;
+    ownerDocument?.addEventListener('lostpointercapture', handlePointerCancel);
+    return () => {
+      ownerDocument?.removeEventListener('lostpointercapture', handlePointerCancel);
+      clearSwipePosition();
+    };
+  }, [clearSwipePosition, handlePointerCancel]);
+
+  const handleClickCapture = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (suppressClick.current && event.detail > 0) {
+      suppressClick.current = false;
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+
+  return {
+    clearSwipePosition,
+    containerRef,
+    handleClickCapture,
+    handlePointerCancel,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+  };
+};
+
+export default useSnackbarSwipeDismiss;

package/src/Section/Section.tsx

@@ -13,7 +13,7 @@ type SectionProps = PropsWithChildren<
 
 /**
  *
- * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section
+ * Neptune Web: https://storybook.wise.design/?path=/docs/content-section--docs
  *
  */
 const Section = ({