@transferwise/components 46.166.0 → 46.168.0

package/src/Prompt/Snackbar/Snackbar.tsx

@@ -0,0 +1,245 @@
+import { Tags } from '@transferwise/icons';
+import { useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { CSSTransition } from 'react-transition-group';
+
+import Button, { type ButtonReferenceType } from '../../Button';
+import Body from '../../Body';
+import { LiveRegion } from '../../common';
+import type { ThemeDark, ThemeLight } from '../../common';
+import { PrimitivePrompt } from '../PrimitivePrompt';
+import ProcessIndicator from '../../ProcessIndicator';
+import type { Sentiment } from '../../SentimentSurface';
+import StatusIcon from '../../StatusIcon';
+
+import { SNACKBAR_ENTER_DURATION, SNACKBAR_EXIT_DURATION } from './constants';
+import messages from './Snackbar.messages';
+import type { SnackbarAction, SnackbarDuration } from './Snackbar.types';
+import useSnackbarAutoDismiss from './useSnackbarAutoDismiss';
+import useSnackbarSwipeDismiss from './useSnackbarSwipeDismiss';
+
+/**
+ * Props for the controlled Snackbar surface, including provider-managed lifecycle controls.
+ * Use SnackbarCreationProps when creating notifications through SnackbarProvider/useSnackbar.
+ */
+export interface SnackbarProps {
+  /** One optional callback or navigation action. Activating it dismisses after its callback runs. */
+  action?: SnackbarAction;
+  /** Changes for each new Snackbar so LiveRegion re-announces it. */
+  announcementKey: number;
+  /**
+   * Controls auto-dismiss with a four-second, six-second or indefinite duration after entry finishes.
+   * Takes precedence over the deprecated `timeout`.
+   * When neither option is supplied, the default is 4000ms (previously 4500ms).
+   * @default 'default'
+   */
+  duration?: SnackbarDuration;
+  /**
+   * Replaces the media with a progress indicator, uses neutral styling and prevents auto-dismiss.
+   * Takes precedence over `media`, `sentiment`, `duration` and the deprecated `timeout`.
+   * @default false
+   */
+  loading?: boolean;
+  /** Overrides sentiment-derived media with content for the 24×24px media slot. */
+  media?: React.ReactNode;
+  /**
+   * Called once after this Snackbar finishes exiting, including after an action (e.g. Undo)
+   * or replacement by a newer Snackbar. The action callback runs first.
+   * Not called for Snackbars discarded before being shown, such as earlier creates batched
+   * before the first render.
+   */
+  onDismiss?: () => void;
+  /** Requests an exit; the provider retains the surface until onExited confirms it has finished. */
+  onDismissRequest: () => void;
+  /** Called after the exit animation so the provider can unmount active or show its replacement. */
+  onExited: () => void;
+  /**
+   * Controls the sentiment surface and default media.
+   * @default 'neutral'
+   */
+  sentiment?: Sentiment;
+  /** Message content. Empty strings or absent text dismiss without creating a blank replacement. */
+  text: React.ReactNode;
+  /** @deprecated Has no effect. Snackbar theming is based on ThemeProvider. */
+  theme?: ThemeLight | ThemeDark;
+  /**
+   * @deprecated Use `duration` instead. Explicit millisecond values remain supported and are not
+   * automatically remapped when no `duration` is supplied.
+   * To migrate, use `default` for 0–5000ms, `extended` for values above 5000ms, and `indefinite`
+   * for intentionally persistent notifications.
+   */
+  timeout?: number;
+  /** @deprecated Has no effect when using SnackbarProvider, which manages Snackbar identity. */
+  timestamp?: number;
+  /** Controls entry/exit; the surface does not manage visibility itself. */
+  visible: boolean;
+}
+
+export const Snackbar = ({
+  action,
+  announcementKey,
+  duration,
+  loading = false,
+  media,
+  onDismissRequest,
+  onExited,
+  sentiment = 'neutral',
+  text,
+  timeout,
+  visible,
+}: SnackbarProps) => {
+  const { formatMessage } = useIntl();
+  const {
+    handleBlur,
+    handleEntered,
+    handleFocus,
+    handleMouseEnter,
+    handleMouseLeave,
+    setSwiping,
+    surfaceRef,
+  } = useSnackbarAutoDismiss({
+    duration,
+    loading,
+    onDismissRequest,
+    timeout,
+    visible,
+  });
+  const {
+    clearSwipePosition,
+    containerRef,
+    handleClickCapture,
+    handlePointerCancel,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+  } = useSnackbarSwipeDismiss({ onDismissRequest, onSwipeChange: setSwiping, visible });
+
+  useEffect(() => {
+    if (!visible) {
+      return undefined;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && !event.defaultPrevented && !event.isComposing) {
+        onDismissRequest();
+      }
+    };
+
+    // Let document-level overlays consume Escape before this fallback handles it.
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [visible, onDismissRequest]);
+
+  const handleActionClick: React.MouseEventHandler<ButtonReferenceType> = (event) => {
+    try {
+      action?.onClick?.(event);
+    } finally {
+      onDismissRequest();
+    }
+  };
+
+  const renderMedia = () => {
+    if (loading) {
+      return (
+        <ProcessIndicator
+          className="wds-Snackbar__process-indicator"
+          data-testid="Snackbar_ProcessIndicator"
+          size="xs"
+        />
+      );
+    }
+
+    if (media) {
+      return <span className="wds-Snackbar__media-asset">{media}</span>;
+    }
+
+    if (sentiment === 'proposition') {
+      return (
+        <span className="wds-Snackbar__media-asset">
+          <Tags aria-hidden size={24} />
+        </span>
+      );
+    }
+
+    return <StatusIcon sentiment={sentiment} size={24} />;
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className="wds-Snackbar"
+      style={
+        {
+          '--Snackbar-enter-duration': `${SNACKBAR_ENTER_DURATION}ms`,
+          '--Snackbar-exit-duration': `${SNACKBAR_EXIT_DURATION}ms`,
+        } as React.CSSProperties
+      }
+    >
+      <CSSTransition
+        appear
+        nodeRef={surfaceRef}
+        in={visible}
+        classNames="wds-Snackbar-container"
+        timeout={{
+          appear: SNACKBAR_ENTER_DURATION,
+          enter: SNACKBAR_ENTER_DURATION,
+          exit: SNACKBAR_EXIT_DURATION,
+        }}
+        unmountOnExit
+        onEntered={handleEntered}
+        onExited={() => {
+          clearSwipePosition();
+          onExited();
+        }}
+      >
+        <PrimitivePrompt
+          ref={surfaceRef}
+          className="wds-Snackbar-container"
+          sentiment={loading ? 'neutral' : sentiment}
+          emphasis="elevated"
+          media={renderMedia()}
+          dismissButtonPriority="minimal"
+          onDismiss={onDismissRequest}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onClickCapture={handleClickCapture}
+          onDragStart={(event) => event.preventDefault()}
+          onPointerDown={visible ? handlePointerDown : undefined}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerCancel={handlePointerCancel}
+        >
+          <div className="wds-Snackbar__content">
+            <LiveRegion
+              aria-live="polite"
+              announceOnChange={announcementKey}
+              className="wds-Snackbar__message"
+            >
+              <Body as="span" className="wds-Snackbar__body">
+                {text}
+                <span className="sr-only"> {formatMessage(messages.escapeDismissHint)}</span>
+              </Body>
+            </LiveRegion>
+            {action ? (
+              <Button
+                className="wds-Snackbar__action"
+                v2
+                size="sm"
+                priority="secondary"
+                href={action.href}
+                target={action.target}
+                onClick={handleActionClick}
+              >
+                {action.label}
+              </Button>
+            ) : null}
+          </div>
+        </PrimitivePrompt>
+      </CSSTransition>
+    </div>
+  );
+};
+
+export default Snackbar;

package/src/Prompt/Snackbar/Snackbar.types.ts

@@ -0,0 +1,17 @@
+import type { ButtonProps, ButtonReferenceType } from '../../Button/Button.types';
+import type { SnackbarProps } from './Snackbar';
+
+/** Semantic auto-dismiss durations. `indefinite` disables the timer. */
+export type SnackbarDuration = 'default' | 'extended' | 'indefinite';
+
+/** One optional action. Supports callbacks and navigation through the Button API. */
+export type SnackbarAction = Pick<ButtonProps, 'href' | 'target'> & {
+  label: ButtonProps['children'];
+  onClick?: React.MouseEventHandler<ButtonReferenceType>;
+};
+
+/** Props accepted by `createSnackbar` from `useSnackbar()`. */
+export type SnackbarCreationProps = Omit<
+  SnackbarProps,
+  'announcementKey' | 'onDismissRequest' | 'onExited' | 'timeout' | 'visible'
+>;

package/src/{Snackbar → Prompt/Snackbar}/SnackbarContext.ts

@@ -1,9 +1,9 @@
 import { createContext } from 'react';
 
-import { SnackbarProps } from './Snackbar';
+import type { SnackbarCreationProps } from './Snackbar.types';
 
 export type SnackbarContextType = {
-  createSnackbar: (props: Omit<SnackbarProps, 'timeout' | 'timestamp'>) => void;
+  createSnackbar: (props: SnackbarCreationProps) => void;
 };
 
 export const SnackbarContext = createContext<SnackbarContextType>({ createSnackbar: () => {} });

package/src/Prompt/Snackbar/SnackbarPortal.tsx

@@ -0,0 +1,8 @@
+import withNextPortal from '../../WithNextPortal/WithNextPortal';
+
+import { Snackbar } from './Snackbar';
+
+/** Renders the Snackbar into `document.body` after mount, so it's safe for SSR. */
+const SnackbarPortal = withNextPortal(Snackbar);
+
+export default SnackbarPortal;