@transferwise/components 0.0.0-experimental-4b93e2b → 0.0.0-experimental-f144cf1

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

@@ -1,17 +1,18 @@
-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 { 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 { SnackbarConsumer } from '../SnackbarContext';
 import SnackbarProvider from '../SnackbarProvider';
+import type { SnackbarProps } from '../Snackbar.types';
 
 export default {
   title: 'Prompts/Snackbar/Tests',
   component: Snackbar,
-  argTypes: {},
   tags: ['!autodocs', '!manifest'],
 };
 
@@ -23,21 +24,18 @@ const launchSnackbar = async (canvasElement: HTMLElement) => {
 
 type Args = Partial<SnackbarProps> & {
   extraContext: React.ReactNode;
-  timeout: number;
 };
 
-const TIMEOUT = 10000000;
-
 const Default = {
   args: {
-    timeout: TIMEOUT,
+    duration: 'indefinite',
   } as Args,
   play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
     await launchSnackbar(canvasElement);
   },
   render: (args: Args) => {
     return (
-      <SnackbarProvider timeout={args.timeout}>
+      <SnackbarProvider>
         <SnackbarConsumer>
           {({ createSnackbar }) => (
             <>
@@ -46,11 +44,18 @@ const Default = {
                 block
                 onClick={() => {
                   createSnackbar({
-                    action: {
-                      label: 'View',
-                      onClick: () => action('View button clicked.'),
-                    },
-                    text: <span>Some text</span>,
+                    action:
+                      args.action ??
+                      ({
+                        label: 'View',
+                        onClick: () => action('View button clicked.'),
+                      } as const),
+                    duration: args.duration,
+                    loading: args.loading,
+                    media: args.media,
+                    onDismiss: args.onDismiss,
+                    sentiment: args.sentiment,
+                    text: args.text ?? <span>Some text</span>,
                   });
                 }}
               >
@@ -72,10 +77,60 @@ export const Basic = {
   },
 };
 
+export const CustomMedia = {
+  ...Default,
+  args: {
+    ...Default.args,
+    media: <Card title="Card" />,
+    sentiment: 'success',
+  },
+};
+
+export const Loading = {
+  ...Default,
+  args: {
+    ...Default.args,
+    loading: true,
+    sentiment: 'negative',
+  },
+};
+
+export const Proposition = {
+  ...Default,
+  args: {
+    ...Default.args,
+    sentiment: 'proposition',
+    loading: false,
+    media: null,
+  },
+};
+
+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,
+    media: null,
   },
   ...withVariantConfig(['mobile'], Default),
 };
@@ -88,9 +143,9 @@ const switchToDarkMode = async (context: { canvasElement: HTMLElement }) => {
   if (body) {
     body.setAttribute('class', 'np-theme-personal--dark');
   }
-  const snackbar = document.querySelector('div.snackbar');
+  const snackbar = document.querySelector('div.wds-Snackbar');
   if (snackbar) {
-    snackbar.setAttribute('class', 'snackbar np-theme-personal--dark');
+    snackbar.setAttribute('class', 'wds-Snackbar np-theme-personal--dark');
   }
 };
 
@@ -98,6 +153,7 @@ export const DarkMode = {
   ...Default,
   args: {
     ...Default.args,
+    sentiment: 'warning',
   },
   play: switchToDarkMode,
   ...withVariantConfig(['dark'], Default),
@@ -107,6 +163,14 @@ export const Zoom400 = {
   ...Default,
   args: {
     ...Default.args,
+    action: {
+      label: 'View details',
+      onClick: () => action('View details button clicked.'),
+    },
+    sentiment: 'success',
+    text: (
+      <span>Your transfer has been completed successfully and is ready for you to review.</span>
+    ),
     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
@@ -120,6 +184,17 @@ export const Zoom400 = {
   ...withVariantConfig(['400%'], Default),
 };
 
+export const Zoom400ShortMessage = {
+  ...Default,
+  args: {
+    ...Default.args,
+    media: <Card title="Card" />,
+    sentiment: 'success',
+    text: <span>Some text</span>,
+  },
+  ...withVariantConfig(['400%'], Default),
+};
+
 /**
  * Snackbar is only shown once even if trigger is clicked many times
  */
@@ -134,6 +209,6 @@ 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);
   },
 };

package/src/Snackbar/constants.ts

@@ -0,0 +1,5 @@
+export const SNACKBAR_ENTER_DURATION = 300;
+export const SNACKBAR_EXIT_DURATION = 150;
+export const SNACKBAR_DEFAULT_DURATION = 4000;
+export const SNACKBAR_EXTENDED_DURATION = 6000;
+export const SWIPE_DISMISS_THRESHOLD_RATIO = 0.5;

package/src/Snackbar/index.ts

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

package/src/Snackbar/useSnackbarAutoDismiss.ts

@@ -0,0 +1,155 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import { SNACKBAR_DEFAULT_DURATION, SNACKBAR_EXTENDED_DURATION } from './constants';
+import type { SnackbarDuration } from './Snackbar.types';
+
+type UseSnackbarAutoDismissOptions = {
+  duration?: SnackbarDuration;
+  loading?: boolean;
+  onDismissRequest: () => void;
+  resetKey: string | number;
+  timeout?: number;
+  visible: boolean;
+};
+
+type InteractionState = {
+  focusWithin: boolean;
+  hovered: boolean;
+};
+
+const getAutoDismissDuration = ({
+  duration,
+  loading,
+  timeout,
+}: Pick<UseSnackbarAutoDismissOptions, 'duration' | 'loading' | 'timeout'>) => {
+  if (loading || duration === 'indefinite') {
+    return null;
+  }
+
+  if (duration === 'extended') {
+    return SNACKBAR_EXTENDED_DURATION;
+  }
+
+  if (duration === 'default') {
+    return SNACKBAR_DEFAULT_DURATION;
+  }
+
+  return timeout ?? SNACKBAR_DEFAULT_DURATION;
+};
+
+const useSnackbarAutoDismiss = ({
+  duration,
+  loading,
+  onDismissRequest,
+  resetKey,
+  timeout,
+  visible,
+}: UseSnackbarAutoDismissOptions) => {
+  const surfaceRef = useRef<HTMLDivElement>(null);
+  const timeoutRef = useRef(0);
+  const remainingDurationRef = useRef<number | null>(null);
+  const timerStartedAtRef = useRef(0);
+  const interactionStateRef = useRef<InteractionState>({ focusWithin: false, hovered: false });
+
+  const isInterrupted = useCallback(() => {
+    const { focusWithin, hovered } = interactionStateRef.current;
+    return focusWithin || hovered;
+  }, []);
+
+  const clearTimer = useCallback(() => {
+    window.clearTimeout(timeoutRef.current);
+    timeoutRef.current = 0;
+  }, []);
+
+  const startTimer = useCallback(
+    (remainingDuration = getAutoDismissDuration({ duration, loading, timeout })) => {
+      clearTimer();
+      remainingDurationRef.current = remainingDuration;
+
+      if (!visible || remainingDuration === null || isInterrupted()) {
+        return;
+      }
+
+      timerStartedAtRef.current = Date.now();
+      timeoutRef.current = window.setTimeout(() => {
+        timeoutRef.current = 0;
+        remainingDurationRef.current = 0;
+        onDismissRequest();
+      }, remainingDuration);
+    },
+    [clearTimer, duration, isInterrupted, loading, onDismissRequest, timeout, visible],
+  );
+
+  const pauseTimer = useCallback(() => {
+    if (!timeoutRef.current || remainingDurationRef.current === null) {
+      return;
+    }
+
+    clearTimer();
+    remainingDurationRef.current = Math.max(
+      0,
+      remainingDurationRef.current - (Date.now() - timerStartedAtRef.current),
+    );
+  }, [clearTimer]);
+
+  const resumeTimer = useCallback(() => {
+    if (isInterrupted() || remainingDurationRef.current === null) {
+      return;
+    }
+
+    startTimer(remainingDurationRef.current);
+  }, [isInterrupted, startTimer]);
+
+  const handleMouseEnter = useCallback(() => {
+    interactionStateRef.current = { ...interactionStateRef.current, hovered: true };
+    pauseTimer();
+  }, [pauseTimer]);
+
+  const handleMouseLeave = useCallback(() => {
+    interactionStateRef.current = { ...interactionStateRef.current, hovered: false };
+    resumeTimer();
+  }, [resumeTimer]);
+
+  const handleFocus = useCallback(() => {
+    interactionStateRef.current = { ...interactionStateRef.current, focusWithin: true };
+    pauseTimer();
+  }, [pauseTimer]);
+
+  const handleBlur = useCallback(
+    (event: React.FocusEvent<HTMLDivElement>) => {
+      if (event.currentTarget.contains(event.relatedTarget)) {
+        return;
+      }
+
+      interactionStateRef.current = { ...interactionStateRef.current, focusWithin: false };
+      resumeTimer();
+    },
+    [resumeTimer],
+  );
+
+  useEffect(() => {
+    if (!visible) {
+      clearTimer();
+      return undefined;
+    }
+
+    const snackbar = surfaceRef.current;
+    interactionStateRef.current = {
+      focusWithin: Boolean(snackbar?.contains(document.activeElement)),
+      hovered: snackbar?.matches(':hover') ?? false,
+    };
+    startTimer();
+
+    return clearTimer;
+  }, [clearTimer, resetKey, startTimer, visible]);
+
+  return {
+    handleBlur,
+    handleFocus,
+    handleMouseEnter,
+    handleMouseLeave,
+    surfaceRef,
+  };
+};
+
+export default useSnackbarAutoDismiss;

package/src/Snackbar/useSnackbarManager.ts

@@ -0,0 +1,181 @@
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+
+import type { SnackbarProps } from './Snackbar.types';
+
+type SnackbarInstance = {
+  id: number;
+  props: SnackbarProps;
+};
+
+type SnackbarManagerState = {
+  active: SnackbarInstance | null;
+  activeHasRendered: boolean;
+  announcementKey: number;
+  pending: SnackbarInstance | null;
+  visible: boolean;
+};
+
+type SnackbarManagerAction =
+  | { type: 'show'; instance: SnackbarInstance }
+  | { type: 'update'; instance: SnackbarInstance; reactivate: boolean }
+  | { type: 'rendered'; instanceId: number }
+  | { type: 'dismiss' }
+  | { type: 'exited'; instanceId: number };
+
+const emptyState: SnackbarManagerState = {
+  active: null,
+  activeHasRendered: false,
+  announcementKey: 0,
+  pending: null,
+  visible: false,
+};
+
+const createInitialState = (initialSnackbar?: SnackbarProps): SnackbarManagerState =>
+  initialSnackbar
+    ? {
+        active: { id: 1, props: initialSnackbar },
+        activeHasRendered: false,
+        announcementKey: 1,
+        pending: null,
+        visible: true,
+      }
+    : emptyState;
+
+const snackbarManagerReducer = (
+  state: SnackbarManagerState,
+  action: SnackbarManagerAction,
+): SnackbarManagerState => {
+  switch (action.type) {
+    case 'show':
+      if (!state.active || !state.activeHasRendered) {
+        // Nothing has rendered yet, so consecutive creates from the same React batch collapse to
+        // the latest Snackbar instead of trying to animate out an instance that never entered.
+        return {
+          active: action.instance,
+          activeHasRendered: false,
+          announcementKey: state.announcementKey + 1,
+          pending: null,
+          visible: true,
+        };
+      }
+
+      // Latest wins: replace any pending Snackbar while the active one completes its exit.
+      return {
+        ...state,
+        pending: action.instance,
+        visible: false,
+      };
+    case 'rendered':
+      if (state.active?.id !== action.instanceId || state.activeHasRendered) {
+        return state;
+      }
+
+      return { ...state, activeHasRendered: true };
+    case 'update':
+      if (!state.active) {
+        return {
+          active: action.instance,
+          activeHasRendered: false,
+          announcementKey: state.announcementKey + 1,
+          pending: null,
+          visible: true,
+        };
+      }
+
+      return {
+        ...state,
+        active: { ...state.active, props: action.instance.props },
+        pending: action.reactivate ? null : state.pending,
+        visible: action.reactivate ? true : state.visible,
+        announcementKey:
+          state.active.props.text === action.instance.props.text
+            ? state.announcementKey
+            : state.announcementKey + 1,
+      };
+    case 'dismiss':
+      if (!state.active) {
+        return state;
+      }
+
+      return state.activeHasRendered
+        ? { ...state, visible: false }
+        : { ...emptyState, announcementKey: state.announcementKey };
+    case 'exited':
+      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 the shared latest-wins and exit-before-enter lifecycle used by Snackbar portals. */
+const useSnackbarManager = (initialSnackbar?: SnackbarProps) => {
+  const [state, dispatch] = useReducer(snackbarManagerReducer, initialSnackbar, createInitialState);
+  const nextInstanceId = useRef(initialSnackbar ? 1 : 0);
+
+  const createInstance = useCallback((props: SnackbarProps): SnackbarInstance => {
+    nextInstanceId.current += 1;
+    return { id: nextInstanceId.current, props };
+  }, []);
+
+  const showSnackbar = useCallback(
+    (props: SnackbarProps) => dispatch({ type: 'show', instance: createInstance(props) }),
+    [createInstance],
+  );
+
+  const updateSnackbar = useCallback(
+    (props: SnackbarProps, reactivate = false) =>
+      dispatch({ type: 'update', instance: createInstance(props), reactivate }),
+    [createInstance],
+  );
+
+  const dismissSnackbar = useCallback(() => dispatch({ type: 'dismiss' }), []);
+
+  const handleExited = useCallback(() => {
+    if (!state.active) {
+      return;
+    }
+
+    try {
+      state.active.props.onDismiss?.();
+    } finally {
+      // Consumer callbacks must not prevent a pending Snackbar from being promoted.
+      dispatch({ type: 'exited', instanceId: state.active.id });
+    }
+  }, [state.active]);
+
+  useEffect(() => {
+    if (!state.active || !state.visible || state.activeHasRendered) {
+      return;
+    }
+
+    // This runs after React commits the active Snackbar. Later creates can now safely wait for its
+    // exit transition; creates dispatched before this point continue to coalesce to the latest.
+    dispatch({ type: 'rendered', instanceId: state.active.id });
+  }, [state.active, state.activeHasRendered, state.visible]);
+
+  return {
+    active: state.active,
+    announcementKey: state.announcementKey,
+    dismissSnackbar,
+    handleExited,
+    showSnackbar,
+    updateSnackbar,
+    visible: state.visible,
+  };
+};
+
+export default useSnackbarManager;

package/src/Snackbar/useSnackbarSwipeDismiss.ts

@@ -0,0 +1,129 @@
+import { useCallback, useRef } from 'react';
+
+import { SWIPE_DISMISS_THRESHOLD_RATIO } from './constants';
+
+const SWIPE_DISMISS_CLASS_NAME = 'wds-Snackbar--swipe-dismiss';
+
+const useSnackbarSwipeDismiss = (onDismissRequest: () => void) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const initialXCoordinate = useRef(0);
+  const initialYCoordinate = useRef(0);
+  const moveOffsetX = useRef(0);
+  const moveOffsetY = useRef(0);
+  const dismissThreshold = useRef(0);
+  const activePointerId = useRef<number | null>(null);
+  const captureTarget = useRef<Element | null>(null);
+  const suppressClick = useRef(false);
+
+  const clearSwipePosition = useCallback(() => {
+    activePointerId.current = null;
+    captureTarget.current = null;
+    suppressClick.current = false;
+    moveOffsetX.current = 0;
+    moveOffsetY.current = 0;
+    containerRef.current?.classList.remove(SWIPE_DISMISS_CLASS_NAME);
+    containerRef.current?.style.removeProperty('transform');
+  }, []);
+
+  const updateMoveOffset = ({ clientX, clientY }: React.PointerEvent<HTMLDivElement>) => {
+    moveOffsetX.current = clientX - initialXCoordinate.current;
+    moveOffsetY.current = clientY - initialYCoordinate.current;
+  };
+
+  const releasePointerCapture = (pointerId: number) => {
+    const target = captureTarget.current;
+    if (target?.hasPointerCapture?.(pointerId)) {
+      target.releasePointerCapture(pointerId);
+    }
+    captureTarget.current = null;
+  };
+
+  const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0 || !event.isPrimary || activePointerId.current !== null) {
+      return;
+    }
+
+    const target = event.target as Element;
+    target.setPointerCapture?.(event.pointerId);
+    captureTarget.current = target;
+    activePointerId.current = event.pointerId;
+    initialXCoordinate.current = event.clientX;
+    initialYCoordinate.current = event.clientY;
+    moveOffsetX.current = 0;
+    moveOffsetY.current = 0;
+    dismissThreshold.current = event.currentTarget.offsetHeight * SWIPE_DISMISS_THRESHOLD_RATIO;
+  };
+
+  const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (activePointerId.current !== event.pointerId) {
+      return;
+    }
+
+    updateMoveOffset(event);
+
+    if (moveOffsetY.current <= 0 || moveOffsetY.current <= Math.abs(moveOffsetX.current)) {
+      containerRef.current?.style.removeProperty('transform');
+      return;
+    }
+
+    containerRef.current?.style.setProperty('transform', `translateY(${moveOffsetY.current}px)`);
+  };
+
+  const handlePointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (activePointerId.current !== event.pointerId) {
+      return;
+    }
+
+    updateMoveOffset(event);
+    releasePointerCapture(event.pointerId);
+    activePointerId.current = null;
+
+    if (
+      moveOffsetY.current >= dismissThreshold.current &&
+      moveOffsetY.current > Math.abs(moveOffsetX.current)
+    ) {
+      const container = containerRef.current;
+      if (container) {
+        const dismissOffset = Math.max(moveOffsetY.current, container.offsetHeight);
+        container.classList.add(SWIPE_DISMISS_CLASS_NAME);
+        container.style.setProperty('transform', `translateY(${dismissOffset}px)`);
+      }
+      suppressClick.current = true;
+      onDismissRequest();
+      return;
+    }
+
+    clearSwipePosition();
+  };
+
+  const handlePointerCancel = (event: React.PointerEvent<HTMLDivElement>) => {
+    if (activePointerId.current !== event.pointerId) {
+      return;
+    }
+
+    releasePointerCapture(event.pointerId);
+    clearSwipePosition();
+  };
+
+  const handleClickCapture = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!suppressClick.current) {
+      return;
+    }
+
+    suppressClick.current = false;
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  return {
+    clearSwipePosition,
+    containerRef,
+    handleClickCapture,
+    handlePointerCancel,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+  };
+};
+
+export default useSnackbarSwipeDismiss;

package/src/_deprecated/Select/Select.css

@@ -146,6 +146,12 @@
   border-radius: var(--radius-small);
   color: #37517e;
   color: var(--color-content-primary);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
 }
 .np-theme-personal .np-dropdown-menu > li > a {