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

package/src/Snackbar/Snackbar.tsx

@@ -1,126 +1,257 @@
-import { Component, createRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
+import { useIntl } from 'react-intl';
+import { Tags } from '@transferwise/icons';
 
 import Button from '../Button';
+import type { ButtonReferenceType } from '../Button/Button.types';
 import Body from '../Body';
+import { LiveRegion } from '../common';
 import type { ThemeDark, ThemeLight } from '../common';
-import { DirectionContext } from '../Provider/Direction';
-import withNextPortal from '../WithNextPortal/WithNextPortal';
-
-const CSS_TRANSITION_DURATION = 400;
+import ProcessIndicator from '../ProcessIndicator';
+import { PrimitivePrompt } from '../Prompt/PrimitivePrompt';
+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, SnackbarInternalProps } from './Snackbar.types';
+import useSnackbarAutoDismiss from './useSnackbarAutoDismiss';
+import useSnackbarSwipeDismiss from './useSnackbarSwipeDismiss';
 
 export interface SnackbarProps {
-  action?: {
-    label: string;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  };
+  /** One optional action. Supports callbacks and navigation through the Button API. */
+  action?: SnackbarAction;
+  /**
+   * Controls auto-dismiss using the design-defined duration presets.
+   * @default 'default'
+   */
+  duration?: SnackbarDuration;
+  /**
+   * Replaces the sentiment-derived default media.
+   * Custom media should fit the 24x24px media slot.
+   * The asset should include its own accessibility attributes if it conveys meaning.
+   */
+  media?: React.ReactNode;
+  /**
+   * Replaces the media with a progress indicator and uses neutral sentiment styling.
+   * @default false
+   */
+  loading?: boolean;
+  /** Called after the Snackbar completes dismissal. */
+  onDismiss?: () => void;
+  /**
+   * Determines the colour scheme and default media.
+   * @default 'neutral'
+   */
+  sentiment?: Sentiment;
+  /** Short Snackbar message. Plain text is recommended. */
   text: React.ReactNode;
-  /** @deprecated */
+  /**
+   * @deprecated Theme no longer changes Snackbar appearance. Use `sentiment` for the semantic
+   * colour scheme. This prop remains available temporarily for existing implementations.
+   */
   theme?: ThemeLight | ThemeDark;
-  timeout: number;
-  timestamp: number;
+  /**
+   * @deprecated Use `duration` instead. Existing millisecond values remain supported during
+   * migration: use `default` for 0–5000ms, `extended` above 5000ms, and `indefinite` only when
+   * the existing usage is intentionally persistent. `duration` takes precedence when both are
+   * provided.
+   */
+  timeout?: number;
 }
 
-interface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'> {
-  visible: boolean;
-}
+export const SnackbarInternal = ({
+  action,
+  announcementKey,
+  duration,
+  loading = false,
+  media,
+  onDismissRequest,
+  onExited,
+  sentiment = 'neutral',
+  text,
+  timeout,
+  visible,
+}: SnackbarInternalProps) => {
+  const { formatMessage } = useIntl();
+  const {
+    clearSwipePosition,
+    containerRef,
+    handleClickCapture,
+    handlePointerCancel,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+  } = useSnackbarSwipeDismiss(onDismissRequest);
+  const { handleBlur, handleFocus, handleMouseEnter, handleMouseLeave, surfaceRef } =
+    useSnackbarAutoDismiss({
+      duration,
+      loading,
+      onDismissRequest,
+      timeout,
+      visible,
+      resetKey: announcementKey,
+    });
 
-export class Snackbar extends Component<SnackbarProps, SnackbarState> {
-  bodyRef = createRef<HTMLSpanElement>();
-  timeout = 0;
-  transitionTimeout = 0;
+  const handleExited = () => {
+    clearSwipePosition();
+    onExited();
+  };
 
-  constructor(props: SnackbarProps) {
-    super(props);
-    this.state = {
-      visible: false,
-      text: '',
-    };
-  }
+  const handleActionClick: React.MouseEventHandler<ButtonReferenceType> = (event) => {
+    const handleClick: React.MouseEventHandler<ButtonReferenceType> | undefined = action?.onClick;
+    try {
+      handleClick?.(event);
+    } finally {
+      onDismissRequest();
+    }
+  };
 
-  componentWillUnmount() {
-    window.clearTimeout(this.timeout);
-    window.clearTimeout(this.transitionTimeout);
-  }
+  const renderMedia = () => {
+    if (loading) {
+      return (
+        <ProcessIndicator
+          className="wds-Snackbar__process-indicator"
+          data-testid="Snackbar_ProcessIndicator"
+          size="xs"
+        />
+      );
+    }
 
-  shouldComponentUpdate(nextProps: SnackbarProps, nextState: SnackbarState) {
-    if (!nextProps.text) {
-      return false;
+    if (media) {
+      return <span className="wds-Snackbar__media-asset">{media}</span>;
     }
-    if (
-      nextProps.timestamp === this.props.timestamp &&
-      nextState.visible === this.state.visible &&
-      nextState.text === this.state.text
-    ) {
-      return false;
+
+    if (sentiment === 'proposition') {
+      return (
+        <span className="wds-Snackbar__media-asset">
+          <Tags aria-hidden size={24} />
+        </span>
+      );
     }
 
-    return true;
-  }
+    return <StatusIcon sentiment={sentiment} size={24} />;
+  };
 
-  setLeaveTimeout = () => {
-    const { timeout } = this.props;
+  useEffect(() => {
+    if (visible) {
+      clearSwipePosition();
+    }
+  }, [clearSwipePosition, visible]);
 
-    this.timeout = window.setTimeout(() => {
-      this.setState({ visible: false });
-    }, timeout);
-  };
+  useEffect(() => {
+    if (!visible) {
+      return undefined;
+    }
 
-  componentDidUpdate(previousProps: SnackbarProps) {
-    const { action, text, timestamp } = this.props;
-
-    if (!previousProps.text) {
-      this.setState({ visible: true, action, text }, () => {
-        this.setLeaveTimeout();
-      });
-    } else if (previousProps.timestamp !== timestamp) {
-      window.clearTimeout(this.timeout);
-
-      if (this.state.visible) {
-        this.setState({ visible: false }, () => {
-          this.transitionTimeout = window.setTimeout(() => {
-            this.setState({ visible: true, action, text });
-            this.setLeaveTimeout();
-          }, CSS_TRANSITION_DURATION);
-        });
-      } else {
-        this.setState({ visible: true, action, text });
-        this.setLeaveTimeout();
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && !event.defaultPrevented) {
+        onDismissRequest();
       }
-    }
-  }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [onDismissRequest, visible]);
 
-  render() {
-    const { action, text, visible } = this.state;
-    const { timeout } = this.props;
-
-    return (
-      <div className="snackbar" aria-live="assertive" role="alert">
-        <CSSTransition
-          nodeRef={this.bodyRef}
-          in={visible}
-          classNames="snackbar__text-container"
-          timeout={{
-            appear: 0,
-            enter: timeout,
-            exit: CSS_TRANSITION_DURATION,
-          }}
-          unmountOnExit
+  return (
+    <div ref={containerRef} className="wds-Snackbar">
+      <CSSTransition
+        appear
+        nodeRef={surfaceRef}
+        in={visible}
+        classNames="wds-Snackbar-container"
+        timeout={{
+          appear: SNACKBAR_ENTER_DURATION,
+          enter: SNACKBAR_ENTER_DURATION,
+          exit: SNACKBAR_EXIT_DURATION,
+        }}
+        unmountOnExit
+        onExited={handleExited}
+      >
+        <PrimitivePrompt
+          ref={surfaceRef}
+          className="wds-Snackbar-container"
+          sentiment={loading ? 'neutral' : sentiment}
+          emphasis="elevated"
+          media={renderMedia()}
+          onDismiss={onDismissRequest}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onClickCapture={handleClickCapture}
+          onPointerCancel={handlePointerCancel}
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
         >
-          <Body ref={this.bodyRef} as="span" className="snackbar__text">
-            {text}
+          <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="snackbar__text__action" v2 size="sm" onClick={action.onClick}>
+              <Button
+                className="wds-Snackbar__action"
+                v2
+                size="sm"
+                priority="secondary"
+                href={action.href}
+                target={action.target}
+                onClick={handleActionClick}
+              >
                 {action.label}
               </Button>
             ) : null}
-          </Body>
-        </CSSTransition>
-      </div>
-    );
-  }
-}
+          </div>
+        </PrimitivePrompt>
+      </CSSTransition>
+    </div>
+  );
+};
+
+export const Snackbar = ({ onDismiss, ...props }: SnackbarProps) => {
+  const [mounted, setMounted] = useState(true);
+  const [visible, setVisible] = useState(true);
+  const [announcementKey, setAnnouncementKey] = useState(0);
+  const previousText = useRef(props.text);
+  const handleDismissRequest = useCallback(() => setVisible(false), []);
+  const handleExited = useCallback(() => {
+    setMounted(false);
+    onDismiss?.();
+  }, [onDismiss]);
+
+  useEffect(() => {
+    if (previousText.current === props.text) {
+      return;
+    }
+
+    previousText.current = props.text;
+    // Direct Snackbars do not have a Provider-generated instance id, so text changes advance this
+    // key to schedule a fresh announcement and restart the semantic duration.
+    setMounted(true);
+    setVisible(true);
+    setAnnouncementKey((key) => key + 1);
+  }, [props.text]);
 
-Snackbar.contextType = DirectionContext;
+  if (!mounted) {
+    return null;
+  }
 
-export default withNextPortal(Snackbar);
+  return (
+    <SnackbarInternal
+      {...props}
+      announcementKey={announcementKey}
+      visible={visible}
+      onDismissRequest={handleDismissRequest}
+      onExited={handleExited}
+    />
+  );
+};

package/src/Snackbar/Snackbar.types.ts

@@ -0,0 +1,26 @@
+import type { ButtonProps } from '../Button/Button.types';
+import type { SnackbarProps } from './Snackbar';
+
+export type { SnackbarProps } from './Snackbar';
+
+export type SnackbarAction = Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
+  label: ButtonProps['children'];
+};
+
+export type SnackbarDuration = 'default' | 'extended' | 'indefinite';
+
+/** Props accepted when creating a Snackbar through SnackbarProvider. */
+export type SnackbarCreationProps = Omit<SnackbarProps, 'timeout'>;
+
+export interface SnackbarInternalProps extends Omit<SnackbarProps, 'onDismiss'> {
+  announcementKey: string | number;
+  onDismissRequest: () => void;
+  onExited: () => void;
+  visible: boolean;
+}
+
+/** Compatibility props for the existing SnackbarPortal export. */
+export interface SnackbarPortalProps extends SnackbarProps {
+  /** @internal Legacy notification identity retained only for migration compatibility. */
+  timestamp?: number;
+}

package/src/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/Snackbar/SnackbarPortal.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useRef } from 'react';
+
+import withNextPortal from '../WithNextPortal/WithNextPortal';
+import { SnackbarInternal } from './Snackbar';
+import type { SnackbarPortalProps } from './Snackbar.types';
+import useSnackbarManager from './useSnackbarManager';
+
+export const PortalledSnackbar = withNextPortal(SnackbarInternal);
+
+const hasSnackbarText = (text: SnackbarPortalProps['text']) =>
+  text !== null && text !== undefined && text !== '';
+
+export const SnackbarPortal = ({
+  action,
+  duration,
+  loading,
+  media,
+  onDismiss,
+  sentiment,
+  text,
+  theme,
+  timeout,
+  timestamp,
+}: SnackbarPortalProps) => {
+  const hasText = hasSnackbarText(text);
+  const previousTimestamp = useRef(timestamp);
+  const previousText = useRef(text);
+  const isInitialRender = useRef(true);
+  const {
+    active,
+    announcementKey,
+    dismissSnackbar,
+    handleExited,
+    showSnackbar,
+    updateSnackbar,
+    visible,
+  } = useSnackbarManager(
+    hasText
+      ? { action, duration, loading, media, onDismiss, sentiment, text, theme, timeout }
+      : undefined,
+  );
+
+  useEffect(() => {
+    if (isInitialRender.current) {
+      isInitialRender.current = false;
+      return;
+    }
+
+    if (!hasText) {
+      dismissSnackbar();
+      previousTimestamp.current = timestamp;
+      previousText.current = text;
+      return;
+    }
+
+    const snackbar = {
+      action,
+      duration,
+      loading,
+      media,
+      onDismiss,
+      sentiment,
+      text,
+      theme,
+      timeout,
+    };
+
+    if (timestamp === undefined) {
+      // Without the legacy identity prop, update in place so recreated callbacks/media do not
+      // repeatedly restart the exit animation or auto-dismiss timer.
+      updateSnackbar(snackbar, !hasSnackbarText(previousText.current));
+    } else if (!hasSnackbarText(previousText.current) || previousTimestamp.current !== timestamp) {
+      showSnackbar(snackbar);
+    }
+
+    previousTimestamp.current = timestamp;
+    previousText.current = text;
+  }, [
+    dismissSnackbar,
+    showSnackbar,
+    action,
+    duration,
+    hasText,
+    loading,
+    media,
+    onDismiss,
+    sentiment,
+    text,
+    theme,
+    timeout,
+    timestamp,
+    updateSnackbar,
+  ]);
+
+  if (!active) {
+    return null;
+  }
+
+  return (
+    <PortalledSnackbar
+      {...active.props}
+      announcementKey={announcementKey}
+      visible={visible}
+      onDismissRequest={dismissSnackbar}
+      onExited={handleExited}
+    />
+  );
+};
+
+export default SnackbarPortal;