@transferwise/components 0.0.0-experimental-536d239 → 0.0.0-experimental-6e04f56

package/src/Snackbar/Snackbar.test.tsx

@@ -0,0 +1,190 @@
+import { act, render, screen, userEvent } from '../test-utils';
+import Button from '../Button';
+
+import { Snackbar, type SnackbarProps } from './Snackbar';
+import { SnackbarConsumer } from './SnackbarContext';
+import SnackbarProvider from './SnackbarProvider';
+
+const CSS_TRANSITION_DURATION = 400;
+const TIMEOUT = 4000;
+
+const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
+
+const advanceTimers = (duration: number) => {
+  act(() => {
+    jest.advanceTimersByTime(duration);
+  });
+};
+
+const renderSnackbar = (props: Partial<SnackbarProps> = {}) =>
+  render(<Snackbar text="" timeout={TIMEOUT} timestamp={0} {...props} />);
+
+beforeEach(() => {
+  jest.useFakeTimers();
+});
+
+afterEach(() => {
+  jest.clearAllTimers();
+  jest.useRealTimers();
+});
+
+describe('Snackbar', () => {
+  it('renders the live region wrapper even while no notification is shown', () => {
+    renderSnackbar();
+
+    expect(screen.getByRole('alert')).toHaveAttribute('aria-live', 'assertive');
+    expect(screen.getByRole('alert')).toHaveClass('snackbar');
+  });
+
+  it('does not show a notification that is already present on mount', () => {
+    renderSnackbar({ text: 'Changes saved', timestamp: 1 });
+
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('shows the notification once text arrives after mount', () => {
+    const { rerender } = renderSnackbar();
+
+    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
+
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+  });
+
+  it('renders an action and calls its onClick handler', async () => {
+    const onClick = jest.fn();
+    const { rerender } = renderSnackbar();
+
+    rerender(
+      <Snackbar
+        action={{ label: 'View', onClick }}
+        text="Transfer completed"
+        timeout={TIMEOUT}
+        timestamp={1}
+      />,
+    );
+    await user.click(screen.getByRole('button', { name: 'View' }));
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('dismisses the notification once the timeout elapses', () => {
+    const { rerender } = renderSnackbar();
+
+    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
+
+    advanceTimers(TIMEOUT - 1);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(CSS_TRANSITION_DURATION);
+    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
+  });
+
+  it('exits the current notification before entering the next one', () => {
+    const { rerender } = renderSnackbar();
+
+    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
+    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
+
+    advanceTimers(CSS_TRANSITION_DURATION - 1);
+    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
+
+    advanceTimers(1);
+    expect(screen.getByText('Second message')).toBeInTheDocument();
+    expect(screen.queryByText('First message')).not.toBeInTheDocument();
+  });
+
+  it('shows the next notification immediately when the previous one has already been dismissed', () => {
+    const { rerender } = renderSnackbar();
+
+    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
+    advanceTimers(TIMEOUT + CSS_TRANSITION_DURATION);
+
+    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
+    expect(screen.getByText('Second message')).toBeInTheDocument();
+  });
+
+  it('restarts the timeout for a replacing notification', () => {
+    const { rerender } = renderSnackbar();
+
+    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
+    advanceTimers(TIMEOUT - 100);
+
+    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
+    advanceTimers(CSS_TRANSITION_DURATION);
+    expect(screen.getByText('Second message')).toBeInTheDocument();
+
+    advanceTimers(TIMEOUT - 1);
+    expect(screen.getByText('Second message')).toBeInTheDocument();
+
+    advanceTimers(1);
+    advanceTimers(CSS_TRANSITION_DURATION);
+    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
+  });
+
+  // Documents existing behaviour rather than endorsing it: clearing the text leaves the notification
+  // on screen indefinitely, because the previous shouldComponentUpdate blocked the dismissal too.
+  it('keeps the notification visible for as long as text is empty', () => {
+    const { rerender } = renderSnackbar();
+
+    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
+    rerender(<Snackbar text="" timeout={TIMEOUT} timestamp={2} />);
+
+    advanceTimers(TIMEOUT + CSS_TRANSITION_DURATION);
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+  });
+
+  it('ignores a repeated timestamp', () => {
+    const { rerender } = renderSnackbar();
+
+    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
+    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={1} />);
+
+    advanceTimers(CSS_TRANSITION_DURATION);
+    expect(screen.getByText('First message')).toBeInTheDocument();
+    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
+  });
+
+  it('clears its pending dismissal timer on unmount', () => {
+    const { rerender, unmount } = renderSnackbar();
+
+    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
+    const pendingTimers = jest.getTimerCount();
+    unmount();
+
+    // The timer left behind belongs to CSSTransition's enter timeout, not to Snackbar.
+    expect(jest.getTimerCount()).toBe(pendingTimers - 1);
+  });
+});
+
+describe('Snackbar created through SnackbarProvider', () => {
+  const renderProvider = () =>
+    render(
+      <SnackbarProvider timeout={TIMEOUT}>
+        <SnackbarConsumer>
+          {({ createSnackbar }) => (
+            <Button onClick={() => createSnackbar({ text: 'Changes saved' })}>Show</Button>
+          )}
+        </SnackbarConsumer>
+      </SnackbarProvider>,
+    );
+
+  it('shows a notification created through the context', async () => {
+    renderProvider();
+
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+
+    expect(screen.getByText('Changes saved')).toBeInTheDocument();
+  });
+
+  it('shows only one notification when the trigger is clicked repeatedly', async () => {
+    renderProvider();
+
+    const trigger = screen.getByRole('button', { name: 'Show' });
+    await user.click(trigger);
+    await user.click(trigger);
+    await user.click(trigger);
+
+    expect(screen.getAllByRole('alert')).toHaveLength(1);
+  });
+});

package/src/Snackbar/Snackbar.tsx

@@ -1,10 +1,9 @@
-import { Component, createRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import Button from '../Button';
 import Body from '../Body';
 import type { ThemeDark, ThemeLight } from '../common';
-import { DirectionContext } from '../Provider/Direction';
 import withNextPortal from '../WithNextPortal/WithNextPortal';
 
 const CSS_TRANSITION_DURATION = 400;
@@ -25,102 +24,105 @@ interface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'>
   visible: boolean;
 }
 
-export class Snackbar extends Component<SnackbarProps, SnackbarState> {
-  bodyRef = createRef<HTMLSpanElement>();
-  timeout = 0;
-  transitionTimeout = 0;
+export const Snackbar = (props: SnackbarProps) => {
+  const bodyRef = useRef<HTMLSpanElement>(null);
+  const leaveTimeout = useRef(0);
+  const transitionTimeout = useRef(0);
+  /** The props of the last committed render, as `this.props` was in the class component. */
+  const committedProps = useRef(props);
+
+  const [state, setState] = useState<SnackbarState>({
+    visible: false,
+    text: '',
+  });
+
+  useEffect(
+    () => () => {
+      window.clearTimeout(leaveTimeout.current);
+      window.clearTimeout(transitionTimeout.current);
+    },
+    [],
+  );
+
+  // Runs after every render to mirror the componentDidUpdate lifecycle this component previously
+  // relied on, including the shouldComponentUpdate guard that ignored every update without text.
+  // Both rules below are disabled on purpose: the dependency-less effect and its synchronous state
+  // updates are what keep this conversion behaviour-identical to the class component.
+  /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
+  useEffect(() => {
+    const previousProps = committedProps.current;
+    committedProps.current = props;
+
+    const { action, text, timeout, timestamp } = props;
+
+    // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the
+    // updates scheduled below, so a Snackbar whose text is cleared stays on screen until it is
+    // given text again. Preserved here deliberately to keep this refactor behaviour-identical.
+    const updateWhileTextIsPresent = (update: () => void) => {
+      if (committedProps.current.text) {
+        update();
+      }
+    };
 
-  constructor(props: SnackbarProps) {
-    super(props);
-    this.state = {
-      visible: false,
-      text: '',
+    const setLeaveTimeout = () => {
+      leaveTimeout.current = window.setTimeout(() => {
+        updateWhileTextIsPresent(() => setState((current) => ({ ...current, visible: false })));
+      }, timeout);
     };
-  }
 
-  componentWillUnmount() {
-    window.clearTimeout(this.timeout);
-    window.clearTimeout(this.transitionTimeout);
-  }
+    const show = () => {
+      setState((current) => ({ ...current, visible: true, action, text }));
+      setLeaveTimeout();
+    };
 
-  shouldComponentUpdate(nextProps: SnackbarProps, nextState: SnackbarState) {
-    if (!nextProps.text) {
-      return false;
+    if (!text) {
+      return;
     }
-    if (
-      nextProps.timestamp === this.props.timestamp &&
-      nextState.visible === this.state.visible &&
-      nextState.text === this.state.text
-    ) {
-      return false;
-    }
-
-    return true;
-  }
-
-  setLeaveTimeout = () => {
-    const { timeout } = this.props;
-
-    this.timeout = window.setTimeout(() => {
-      this.setState({ visible: false });
-    }, timeout);
-  };
-
-  componentDidUpdate(previousProps: SnackbarProps) {
-    const { action, text, timestamp } = this.props;
 
     if (!previousProps.text) {
-      this.setState({ visible: true, action, text }, () => {
-        this.setLeaveTimeout();
-      });
+      show();
     } 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);
-        });
+      window.clearTimeout(leaveTimeout.current);
+
+      if (state.visible) {
+        setState((current) => ({ ...current, visible: false }));
+        transitionTimeout.current = window.setTimeout(() => {
+          updateWhileTextIsPresent(show);
+        }, CSS_TRANSITION_DURATION);
       } else {
-        this.setState({ visible: true, action, text });
-        this.setLeaveTimeout();
+        show();
       }
     }
-  }
-
-  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
-        >
-          <Body ref={this.bodyRef} as="span" className="snackbar__text">
-            {text}
-            {action ? (
-              <Button className="snackbar__text__action" v2 size="sm" onClick={action.onClick}>
-                {action.label}
-              </Button>
-            ) : null}
-          </Body>
-        </CSSTransition>
-      </div>
-    );
-  }
-}
-
-Snackbar.contextType = DirectionContext;
+  });
+  /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
+
+  const { action, text, visible } = state;
+  const { timeout } = props;
+
+  return (
+    <div className="snackbar" aria-live="assertive" role="alert">
+      <CSSTransition
+        nodeRef={bodyRef}
+        in={visible}
+        classNames="snackbar__text-container"
+        timeout={{
+          appear: 0,
+          enter: timeout,
+          exit: CSS_TRANSITION_DURATION,
+        }}
+        unmountOnExit
+      >
+        <Body ref={bodyRef} as="span" className="snackbar__text">
+          {text}
+          {action ? (
+            <Button className="snackbar__text__action" v2 size="sm" onClick={action.onClick}>
+              {action.label}
+            </Button>
+          ) : null}
+        </Body>
+      </CSSTransition>
+    </div>
+  );
+};
 
 export default withNextPortal(Snackbar);

package/src/_deprecated/Select/Select.css

@@ -1,30 +1,4 @@
-.np-dropdown-menu > li > a {
-  word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .np-dropdown-menu > li > a {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .np-dropdown-menu > li > a {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .np-dropdown-menu > li > a {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .np-dropdown-menu > li > a {
-    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .np-dropdown-menu > li > a {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}.np-select .np-dropdown-toggle {
+.np-select .np-dropdown-toggle {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   border: 1px solid #c9cbce;
@@ -172,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 {