@transferwise/components 46.167.0 → 46.168.0

package/build/Snackbar/SnackbarProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SnackbarProvider.js","sources":["../../src/Snackbar/SnackbarProvider.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\n\nimport SnackbarPortal, { SnackbarProps } from './Snackbar';\nimport { SnackbarContext } from './SnackbarContext';\n\nexport interface SnackbarProviderProps {\n  timeout?: number;\n  children?: React.ReactNode;\n}\n\nexport default function SnackbarProvider({ timeout = 4500, children }: SnackbarProviderProps) {\n  const [state, setState] = useState<Omit<SnackbarProps, 'timeout'>>({\n    text: '',\n    timestamp: 0,\n  });\n  const { action, text, timestamp } = state;\n\n  return (\n    <SnackbarContext.Provider\n      value={useMemo(\n        () => ({\n          createSnackbar: ({ action, text }) => {\n            setState({ action, text, timestamp: Date.now() });\n          },\n        }),\n        [],\n      )}\n    >\n      <SnackbarPortal action={action} text={text} timestamp={timestamp} timeout={timeout} />\n      {children}\n    </SnackbarContext.Provider>\n  );\n}\n"],"names":["SnackbarProvider","timeout","children","state","setState","useState","text","timestamp","action","_jsxs","SnackbarContext","Provider","value","useMemo","createSnackbar","Date","now","_jsx","SnackbarPortal"],"mappings":";;;;;;;;;AAUc,SAAUA,gBAAgBA,CAAC;AAAEC,EAAAA,OAAO,GAAG,IAAI;AAAEC,EAAAA;AAAQ,CAAyB,EAAA;AAC1F,EAAA,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,cAAQ,CAAiC;AACjEC,IAAAA,IAAI,EAAE,EAAE;AACRC,IAAAA,SAAS,EAAE;AACZ,GAAA,CAAC;EACF,MAAM;IAAEC,MAAM;IAAEF,IAAI;AAAEC,IAAAA;AAAS,GAAE,GAAGJ,KAAK;AAEzC,EAAA,oBACEM,eAAA,CAACC,+BAAe,CAACC,QAAQ,EAAA;IACvBC,KAAK,EAAEC,aAAO,CACZ,OAAO;AACLC,MAAAA,cAAc,EAAEA,CAAC;QAAEN,MAAM;AAAEF,QAAAA;AAAI,OAAE,KAAI;AACnCF,QAAAA,QAAQ,CAAC;UAAEI,MAAM;UAAEF,IAAI;AAAEC,UAAAA,SAAS,EAAEQ,IAAI,CAACC,GAAG;AAAE,SAAE,CAAC;AACnD,MAAA;KACD,CAAC,EACF,EAAE,CACF;IAAAd,QAAA,EAAA,cAEFe,cAAA,CAACC,gBAAc,EAAA;AAACV,MAAAA,MAAM,EAAEA,MAAO;AAACF,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,SAAS,EAAEA,SAAU;AAACN,MAAAA,OAAO,EAAEA;KAAQ,CACnF,EAACC,QAAQ;AAAA,GACe,CAAC;AAE/B;;"}

package/build/Snackbar/SnackbarProvider.mjs

@@ -1,42 +0,0 @@
-import { useState, useMemo } from 'react';
-import SnackbarPortal from './Snackbar.mjs';
-import { SnackbarContext } from './SnackbarContext.mjs';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function SnackbarProvider({
-  timeout = 4500,
-  children
-}) {
-  const [state, setState] = useState({
-    text: '',
-    timestamp: 0
-  });
-  const {
-    action,
-    text,
-    timestamp
-  } = state;
-  return /*#__PURE__*/jsxs(SnackbarContext.Provider, {
-    value: useMemo(() => ({
-      createSnackbar: ({
-        action,
-        text
-      }) => {
-        setState({
-          action,
-          text,
-          timestamp: Date.now()
-        });
-      }
-    }), []),
-    children: [/*#__PURE__*/jsx(SnackbarPortal, {
-      action: action,
-      text: text,
-      timestamp: timestamp,
-      timeout: timeout
-    }), children]
-  });
-}
-
-export { SnackbarProvider as default };
-//# sourceMappingURL=SnackbarProvider.mjs.map

package/build/Snackbar/SnackbarProvider.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"SnackbarProvider.mjs","sources":["../../src/Snackbar/SnackbarProvider.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\n\nimport SnackbarPortal, { SnackbarProps } from './Snackbar';\nimport { SnackbarContext } from './SnackbarContext';\n\nexport interface SnackbarProviderProps {\n  timeout?: number;\n  children?: React.ReactNode;\n}\n\nexport default function SnackbarProvider({ timeout = 4500, children }: SnackbarProviderProps) {\n  const [state, setState] = useState<Omit<SnackbarProps, 'timeout'>>({\n    text: '',\n    timestamp: 0,\n  });\n  const { action, text, timestamp } = state;\n\n  return (\n    <SnackbarContext.Provider\n      value={useMemo(\n        () => ({\n          createSnackbar: ({ action, text }) => {\n            setState({ action, text, timestamp: Date.now() });\n          },\n        }),\n        [],\n      )}\n    >\n      <SnackbarPortal action={action} text={text} timestamp={timestamp} timeout={timeout} />\n      {children}\n    </SnackbarContext.Provider>\n  );\n}\n"],"names":["SnackbarProvider","timeout","children","state","setState","useState","text","timestamp","action","_jsxs","SnackbarContext","Provider","value","useMemo","createSnackbar","Date","now","_jsx","SnackbarPortal"],"mappings":";;;;;AAUc,SAAUA,gBAAgBA,CAAC;AAAEC,EAAAA,OAAO,GAAG,IAAI;AAAEC,EAAAA;AAAQ,CAAyB,EAAA;AAC1F,EAAA,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,QAAQ,CAAiC;AACjEC,IAAAA,IAAI,EAAE,EAAE;AACRC,IAAAA,SAAS,EAAE;AACZ,GAAA,CAAC;EACF,MAAM;IAAEC,MAAM;IAAEF,IAAI;AAAEC,IAAAA;AAAS,GAAE,GAAGJ,KAAK;AAEzC,EAAA,oBACEM,IAAA,CAACC,eAAe,CAACC,QAAQ,EAAA;IACvBC,KAAK,EAAEC,OAAO,CACZ,OAAO;AACLC,MAAAA,cAAc,EAAEA,CAAC;QAAEN,MAAM;AAAEF,QAAAA;AAAI,OAAE,KAAI;AACnCF,QAAAA,QAAQ,CAAC;UAAEI,MAAM;UAAEF,IAAI;AAAEC,UAAAA,SAAS,EAAEQ,IAAI,CAACC,GAAG;AAAE,SAAE,CAAC;AACnD,MAAA;KACD,CAAC,EACF,EAAE,CACF;IAAAd,QAAA,EAAA,cAEFe,GAAA,CAACC,cAAc,EAAA;AAACV,MAAAA,MAAM,EAAEA,MAAO;AAACF,MAAAA,IAAI,EAAEA,IAAK;AAACC,MAAAA,SAAS,EAAEA,SAAU;AAACN,MAAAA,OAAO,EAAEA;KAAQ,CACnF,EAACC,QAAQ;AAAA,GACe,CAAC;AAE/B;;"}

package/build/Snackbar/useSnackbar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSnackbar.js","sources":["../../src/Snackbar/useSnackbar.ts"],"sourcesContent":["import { useContext } from 'react';\n\nimport { SnackbarContext } from './SnackbarContext';\n\nfunction useSnackbar() {\n  const { createSnackbar } = useContext(SnackbarContext);\n\n  return createSnackbar;\n}\n\nexport default useSnackbar;\n"],"names":["useSnackbar","createSnackbar","useContext","SnackbarContext"],"mappings":";;;;;;;AAIA,SAASA,WAAWA,GAAA;EAClB,MAAM;AAAEC,IAAAA;AAAc,GAAE,GAAGC,gBAAU,CAACC,+BAAe,CAAC;AAEtD,EAAA,OAAOF,cAAc;AACvB;;"}

package/build/Snackbar/useSnackbar.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSnackbar.mjs","sources":["../../src/Snackbar/useSnackbar.ts"],"sourcesContent":["import { useContext } from 'react';\n\nimport { SnackbarContext } from './SnackbarContext';\n\nfunction useSnackbar() {\n  const { createSnackbar } = useContext(SnackbarContext);\n\n  return createSnackbar;\n}\n\nexport default useSnackbar;\n"],"names":["useSnackbar","createSnackbar","useContext","SnackbarContext"],"mappings":";;;AAIA,SAASA,WAAWA,GAAA;EAClB,MAAM;AAAEC,IAAAA;AAAc,GAAE,GAAGC,UAAU,CAACC,eAAe,CAAC;AAEtD,EAAA,OAAOF,cAAc;AACvB;;"}

package/build/styles/Snackbar/Snackbar.css

@@ -1,71 +0,0 @@
-.snackbar {
-  text-align: center;
-  position: fixed;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  z-index: 1060;
-}
-.snackbar__text {
-  background: #37517e;
-  color: #ffffff;
-  display: inline-flex;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-  align-items: center;
-  justify-content: space-between;
-  text-align: start;
-  font-size: var(--wds-font-size-body);
-  margin-block: 0;
-  margin-inline: var(--size-16);
-  padding-block: var(--size-8);
-  padding-inline: var(--size-16);
-  inline-size: calc(100% - var(--size-32));
-  transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-.np-theme-personal .snackbar__text {
-  box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
-  position: relative;
-  background: var(--color-contrast-theme);
-  border-radius: var(--radius-small);
-  color: var(--color-contrast-overlay);
-}
-.np-theme-personal .snackbar__text::after {
-  display: block;
-  border-radius: inherit;
-  block-size: 100%;
-  inline-size: 100%;
-  content: "";
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  z-index: -1;
-  background-color: var(--color-background-neutral);
-}
-.np-theme-personal--dark .snackbar__text,
-.np-theme-personal--forest-green .snackbar__text {
-  box-shadow: none;
-}
-@media (min-width: 600px) {
-  .snackbar__text {
-    inline-size: auto;
-    max-inline-size: 600px;
-  }
-}
-.snackbar__text__action {
-  flex-shrink: 0;
-  margin-inline-start: var(--size-16);
-}
-.snackbar__text-container-enter,
-.snackbar__text-container-exit {
-  transform: translateY(calc(100% + 10px));
-}
-.snackbar__text-container-enter-active {
-  transform: translateY(-16px);
-  transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
-}
-@media (min-width: 600px) {
-  .snackbar__text-container-enter-active {
-    transform: translateY(-24px);
-  }
-}

package/build/types/Snackbar/Snackbar.d.ts

@@ -1,16 +0,0 @@
-import type { ThemeDark, ThemeLight } from '../common';
-export interface SnackbarProps {
-    action?: {
-        label: string;
-        onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    };
-    text: React.ReactNode;
-    /** @deprecated Has no effect. Snackbar theming is based on ThemeProvider. */
-    theme?: ThemeLight | ThemeDark;
-    timeout: number;
-    timestamp: number;
-}
-export declare const Snackbar: (props: SnackbarProps) => import("react").JSX.Element;
-declare const _default: (props: SnackbarProps) => import("react").ReactPortal | null;
-export default _default;
-//# sourceMappingURL=Snackbar.d.ts.map

package/build/types/Snackbar/Snackbar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAKvD,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;KACtD,CAAC;IACF,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB;AAMD,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,gCAoG5C,CAAC;;AAEF,wBAAwC"}

package/build/types/Snackbar/SnackbarContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SnackbarContext.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/SnackbarContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,WAAW,CAAC,KAAK,IAAI,CAAC;CAC/E,CAAC;AAEF,eAAO,MAAM,eAAe,8CAAmE,CAAC;AAEhG,eAAO,MAAM,gBAAgB,+CAA2B,CAAC"}

package/build/types/Snackbar/SnackbarProvider.d.ts

@@ -1,6 +0,0 @@
-export interface SnackbarProviderProps {
-    timeout?: number;
-    children?: React.ReactNode;
-}
-export default function SnackbarProvider({ timeout, children }: SnackbarProviderProps): import("react").JSX.Element;
-//# sourceMappingURL=SnackbarProvider.d.ts.map

package/build/types/Snackbar/SnackbarProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SnackbarProvider.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/SnackbarProvider.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,OAAc,EAAE,QAAQ,EAAE,EAAE,qBAAqB,+BAsB3F"}

package/build/types/Snackbar/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC"}

package/build/types/Snackbar/useSnackbar.d.ts

@@ -1,3 +0,0 @@
-declare function useSnackbar(): (props: Omit<import("./Snackbar").SnackbarProps, "timeout" | "timestamp">) => void;
-export default useSnackbar;
-//# sourceMappingURL=useSnackbar.d.ts.map

package/build/types/Snackbar/useSnackbar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSnackbar.d.ts","sourceRoot":"","sources":["../../../src/Snackbar/useSnackbar.ts"],"names":[],"mappings":"AAIA,iBAAS,WAAW,uFAInB;AAED,eAAe,WAAW,CAAC"}

package/src/Snackbar/Snackbar.css

@@ -1,71 +0,0 @@
-.snackbar {
-  text-align: center;
-  position: fixed;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  z-index: 1060;
-}
-.snackbar__text {
-  background: #37517e;
-  color: #ffffff;
-  display: inline-flex;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-  align-items: center;
-  justify-content: space-between;
-  text-align: start;
-  font-size: var(--wds-font-size-body);
-  margin-block: 0;
-  margin-inline: var(--size-16);
-  padding-block: var(--size-8);
-  padding-inline: var(--size-16);
-  inline-size: calc(100% - var(--size-32));
-  transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-.np-theme-personal .snackbar__text {
-  box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
-  position: relative;
-  background: var(--color-contrast-theme);
-  border-radius: var(--radius-small);
-  color: var(--color-contrast-overlay);
-}
-.np-theme-personal .snackbar__text::after {
-  display: block;
-  border-radius: inherit;
-  block-size: 100%;
-  inline-size: 100%;
-  content: "";
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  z-index: -1;
-  background-color: var(--color-background-neutral);
-}
-.np-theme-personal--dark .snackbar__text,
-.np-theme-personal--forest-green .snackbar__text {
-  box-shadow: none;
-}
-@media (min-width: 600px) {
-  .snackbar__text {
-    inline-size: auto;
-    max-inline-size: 600px;
-  }
-}
-.snackbar__text__action {
-  flex-shrink: 0;
-  margin-inline-start: var(--size-16);
-}
-.snackbar__text-container-enter,
-.snackbar__text-container-exit {
-  transform: translateY(calc(100% + 10px));
-}
-.snackbar__text-container-enter-active {
-  transform: translateY(-16px);
-  transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
-}
-@media (min-width: 600px) {
-  .snackbar__text-container-enter-active {
-    transform: translateY(-24px);
-  }
-}

package/src/Snackbar/Snackbar.less

@@ -1,80 +0,0 @@
-@import (reference) "./../styles/variables/zindex.less";
-@import (reference) "./../styles/variables/neptune-tokens.less";
-
-.snackbar {
-  text-align: center;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-
-  right: 0;
-
-  z-index: @zindex-mobile-nav;
-
-  &__text {
-    background: @color-navy-background-elevated;
-    color: @color-navy-content-primary;
-    display: inline-flex;
-    border-radius: 2px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-    align-items: center;
-    justify-content: space-between;
-    text-align: left;
-
-    font-size: var(--wds-font-size-body);
-    margin: 0 var(--size-16);
-    padding: var(--size-8) var(--size-16);
-    width: calc(100% - var(--size-32));
-    transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
-
-    .np-theme-personal & {
-      box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
-      position: relative;
-      background: var(--color-contrast-theme);
-      border-radius: var(--radius-small);
-      color: var(--color-contrast-overlay);
-
-      &::after {
-        display: block;
-        border-radius: inherit;
-        height: 100%;
-        width: 100%;
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 0;
-        z-index: -1;
-        background-color: var(--color-background-neutral);
-      }
-    }
-
-    .np-theme-personal--dark &,
-    .np-theme-personal--forest-green & {
-      box-shadow: none;
-    }
-
-    @media (--screen-sm) {
-      width: auto;
-      max-width: 600px;
-    }
-
-    &__action {
-      flex-shrink: 0;
-      margin-left: var(--size-16);
-    }
-
-    &-container-enter,
-    &-container-exit {
-      transform: translateY(calc(100% + 10px));
-    }
-
-    &-container-enter-active {
-      transform: translateY(-16px);
-      transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
-
-      @media (--screen-sm) {
-        transform: translateY(-24px);
-      }
-    }
-  }
-}

package/src/Snackbar/Snackbar.test.tsx

@@ -1,206 +0,0 @@
-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();
-  });
-
-  it('dismisses a delayed replacement on the timeout current when it appears', () => {
-    const { rerender } = renderSnackbar();
-
-    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
-    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
-    // Shortened while the replacement is still waiting out the exit transition.
-    rerender(<Snackbar text="Second message" timeout={1000} timestamp={2} />);
-
-    advanceTimers(CSS_TRANSITION_DURATION);
-    expect(screen.getByText('Second message')).toBeInTheDocument();
-
-    advanceTimers(1000);
-    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,129 +0,0 @@
-import { useEffect, useLayoutEffect, 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 withNextPortal from '../WithNextPortal/WithNextPortal';
-
-const CSS_TRANSITION_DURATION = 400;
-
-export interface SnackbarProps {
-  action?: {
-    label: string;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  };
-  text: React.ReactNode;
-  /** @deprecated Has no effect. Snackbar theming is based on ThemeProvider. */
-  theme?: ThemeLight | ThemeDark;
-  timeout: number;
-  timestamp: number;
-}
-
-interface SnackbarState extends Pick<SnackbarProps, 'action' | 'text'> {
-  visible: boolean;
-}
-
-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.
-  // Layout, not passive, so a notification is shown or replaced before the browser paints, as
-  // componentDidUpdate did. Both rules below are disabled on purpose: the dependency-less effect
-  // and its synchronous state updates are what keep this conversion behaviour-identical.
-  /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
-  useLayoutEffect(() => {
-    const previousProps = committedProps.current;
-    committedProps.current = props;
-
-    const { action, text, 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();
-      }
-    };
-
-    const setLeaveTimeout = () => {
-      leaveTimeout.current = window.setTimeout(() => {
-        updateWhileTextIsPresent(() => setState((current) => ({ ...current, visible: false })));
-      }, committedProps.current.timeout);
-    };
-
-    const show = () => {
-      setState((current) => ({ ...current, visible: true, action, text }));
-      setLeaveTimeout();
-    };
-
-    if (!text) {
-      return;
-    }
-
-    if (!previousProps.text) {
-      show();
-    } else if (previousProps.timestamp !== timestamp) {
-      window.clearTimeout(leaveTimeout.current);
-
-      if (state.visible) {
-        setState((current) => ({ ...current, visible: false }));
-        transitionTimeout.current = window.setTimeout(() => {
-          updateWhileTextIsPresent(show);
-        }, CSS_TRANSITION_DURATION);
-      } else {
-        show();
-      }
-    }
-  });
-  /* 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);