@transferwise/components 0.0.0-experimental-bf3b43b → 0.0.0-experimental-cbc00a7

package/build/Snackbar/Snackbar.js

@@ -1,128 +1,130 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
+var icons = require('@transferwise/icons');
 var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
 var Button_resolver = require('../Button/Button.resolver.js');
 var Body = require('../Body/Body.js');
-var WithNextPortal = require('../WithNextPortal/WithNextPortal.js');
+require('../common/theme.js');
+require('../common/direction.js');
+require('@transferwise/neptune-tokens');
+require('../common/PropsValues/control.js');
+require('../common/PropsValues/size.js');
+require('../common/PropsValues/typography.js');
+require('../common/PropsValues/width.js');
+require('../common/PropsValues/type.js');
+require('../common/PropsValues/dateMode.js');
+require('../common/PropsValues/monthFormat.js');
+require('../common/PropsValues/position.js');
+require('../common/PropsValues/layouts.js');
+require('../common/PropsValues/status.js');
+require('../common/PropsValues/sentiment.js');
+require('../common/PropsValues/profileType.js');
+require('../common/PropsValues/variant.js');
+require('../common/PropsValues/scroll.js');
+require('../common/PropsValues/markdownNodeType.js');
+require('../common/fileType.js');
+require('@transferwise/formatting');
+require('clsx');
+require('react-intl');
+require('../common/CloseButton/CloseButton.messages.js');
 var jsxRuntime = require('react/jsx-runtime');
+var LiveRegion = require('../common/LiveRegion/LiveRegion.js');
+var PrimitivePrompt = require('../Prompt/PrimitivePrompt/PrimitivePrompt.js');
+var StatusIcon = require('../StatusIcon/StatusIcon.js');
+var constants = require('./constants.js');
 
-const CSS_TRANSITION_DURATION = 400;
-const Snackbar = props => {
-  const bodyRef = React.useRef(null);
-  const leaveTimeout = React.useRef(0);
-  const transitionTimeout = React.useRef(0);
-  /** The props of the last committed render, as `this.props` was in the class component. */
-  const committedProps = React.useRef(props);
-  const [state, setState] = React.useState({
-    visible: false,
-    text: ''
-  });
-  React.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 */
-  React.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 => {
-      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;
+const Snackbar = ({
+  action,
+  announcementKey,
+  media,
+  onDismissRequest,
+  onExited,
+  sentiment = 'neutral',
+  text,
+  timeout,
+  visible
+}) => {
+  const surfaceRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!visible) {
+      return undefined;
     }
-    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();
-      }
+    const id = window.setTimeout(onDismissRequest, timeout);
+    return () => window.clearTimeout(id);
+  }, [announcementKey, onDismissRequest, timeout, visible]);
+  const renderMedia = () => {
+    if (media) {
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "wds-Snackbar__media-asset",
+        children: media
+      });
     }
-  });
-  /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
-  const {
-    action,
-    text,
-    visible
-  } = state;
-  const {
-    timeout
-  } = props;
+    if (sentiment === 'proposition') {
+      return /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "wds-Snackbar__media-asset",
+        children: /*#__PURE__*/jsxRuntime.jsx(icons.Tags, {
+          "aria-hidden": true,
+          size: 24
+        })
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
+      sentiment: sentiment,
+      size: 24
+    });
+  };
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: "snackbar",
-    "aria-live": "assertive",
-    role: "alert",
+    className: "wds-Snackbar",
+    style: {
+      '--Snackbar-enter-duration': `${constants.SNACKBAR_ENTER_DURATION}ms`,
+      '--Snackbar-exit-duration': `${constants.SNACKBAR_EXIT_DURATION}ms`
+    },
     children: /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
-      nodeRef: bodyRef,
+      appear: true,
+      nodeRef: surfaceRef,
       in: visible,
-      classNames: "snackbar__text-container",
+      classNames: "wds-Snackbar-container",
       timeout: {
-        appear: 0,
-        enter: timeout,
-        exit: CSS_TRANSITION_DURATION
+        appear: constants.SNACKBAR_ENTER_DURATION,
+        enter: constants.SNACKBAR_ENTER_DURATION,
+        exit: constants.SNACKBAR_EXIT_DURATION
       },
       unmountOnExit: true,
-      children: /*#__PURE__*/jsxRuntime.jsxs(Body.default, {
-        ref: bodyRef,
-        as: "span",
-        className: "snackbar__text",
-        children: [text, action ? /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
-          className: "snackbar__text__action",
-          v2: true,
-          size: "sm",
-          onClick: action.onClick,
-          children: action.label
-        }) : null]
+      onExited: onExited,
+      children: /*#__PURE__*/jsxRuntime.jsx(PrimitivePrompt.PrimitivePrompt, {
+        ref: surfaceRef,
+        className: "wds-Snackbar-container",
+        sentiment: sentiment,
+        emphasis: "elevated",
+        media: renderMedia(),
+        onDismiss: onDismissRequest,
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "wds-Snackbar__content",
+          children: [/*#__PURE__*/jsxRuntime.jsx(LiveRegion.LiveRegion, {
+            "aria-live": "polite",
+            announceOnChange: announcementKey,
+            className: "wds-Snackbar__message",
+            children: /*#__PURE__*/jsxRuntime.jsx(Body.default, {
+              as: "span",
+              className: "wds-Snackbar__body",
+              children: text
+            })
+          }), action ? /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
+            className: "wds-Snackbar__action",
+            v2: true,
+            size: "sm",
+            priority: "secondary",
+            href: action.href,
+            target: action.target,
+            onClick: action.onClick,
+            children: action.label
+          }) : null]
+        })
       })
     })
   });
 };
-var SnackbarPortal = WithNextPortal.default(Snackbar);
 
 exports.Snackbar = Snackbar;
-exports.default = SnackbarPortal;
 //# sourceMappingURL=Snackbar.js.map

package/build/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.js","sources":["../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport Button from '../Button';\nimport Body from '../Body';\nimport type { ThemeDark, ThemeLight } from '../common';\nimport withNextPortal from '../WithNextPortal/WithNextPortal';\n\nconst CSS_TRANSITION_DURATION = 400;\n\nexport interface SnackbarProps {\n  action?: {\n    label: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  text: React.ReactNode;\n  /** @deprecated Has no effect. Snackbar theming is based on ThemeProvider. */\n  theme?: ThemeLight | ThemeDark;\n  timeout: number;\n  timestamp: number;\n}\n\ninterface SnackbarState extends Pick<SnackbarProps, 'action' | 'text'> {\n  visible: boolean;\n}\n\nexport const Snackbar = (props: SnackbarProps) => {\n  const bodyRef = useRef<HTMLSpanElement>(null);\n  const leaveTimeout = useRef(0);\n  const transitionTimeout = useRef(0);\n  /** The props of the last committed render, as `this.props` was in the class component. */\n  const committedProps = useRef(props);\n\n  const [state, setState] = useState<SnackbarState>({\n    visible: false,\n    text: '',\n  });\n\n  useEffect(\n    () => () => {\n      window.clearTimeout(leaveTimeout.current);\n      window.clearTimeout(transitionTimeout.current);\n    },\n    [],\n  );\n\n  // Runs after every render to mirror the componentDidUpdate lifecycle this component previously\n  // relied on, including the shouldComponentUpdate guard that ignored every update without text.\n  // Layout, not passive, so a notification is shown or replaced before the browser paints, as\n  // componentDidUpdate did. Both rules below are disabled on purpose: the dependency-less effect\n  // and its synchronous state updates are what keep this conversion behaviour-identical.\n  /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n  useLayoutEffect(() => {\n    const previousProps = committedProps.current;\n    committedProps.current = props;\n\n    const { action, text, timestamp } = props;\n\n    // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the\n    // updates scheduled below, so a Snackbar whose text is cleared stays on screen until it is\n    // given text again. Preserved here deliberately to keep this refactor behaviour-identical.\n    const updateWhileTextIsPresent = (update: () => void) => {\n      if (committedProps.current.text) {\n        update();\n      }\n    };\n\n    const setLeaveTimeout = () => {\n      leaveTimeout.current = window.setTimeout(() => {\n        updateWhileTextIsPresent(() => setState((current) => ({ ...current, visible: false })));\n      }, committedProps.current.timeout);\n    };\n\n    const show = () => {\n      setState((current) => ({ ...current, visible: true, action, text }));\n      setLeaveTimeout();\n    };\n\n    if (!text) {\n      return;\n    }\n\n    if (!previousProps.text) {\n      show();\n    } else if (previousProps.timestamp !== timestamp) {\n      window.clearTimeout(leaveTimeout.current);\n\n      if (state.visible) {\n        setState((current) => ({ ...current, visible: false }));\n        transitionTimeout.current = window.setTimeout(() => {\n          updateWhileTextIsPresent(show);\n        }, CSS_TRANSITION_DURATION);\n      } else {\n        show();\n      }\n    }\n  });\n  /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n\n  const { action, text, visible } = state;\n  const { timeout } = props;\n\n  return (\n    <div className=\"snackbar\" aria-live=\"assertive\" role=\"alert\">\n      <CSSTransition\n        nodeRef={bodyRef}\n        in={visible}\n        classNames=\"snackbar__text-container\"\n        timeout={{\n          appear: 0,\n          enter: timeout,\n          exit: CSS_TRANSITION_DURATION,\n        }}\n        unmountOnExit\n      >\n        <Body ref={bodyRef} as=\"span\" className=\"snackbar__text\">\n          {text}\n          {action ? (\n            <Button className=\"snackbar__text__action\" v2 size=\"sm\" onClick={action.onClick}>\n              {action.label}\n            </Button>\n          ) : null}\n        </Body>\n      </CSSTransition>\n    </div>\n  );\n};\n\nexport default withNextPortal(Snackbar);\n"],"names":["CSS_TRANSITION_DURATION","Snackbar","props","bodyRef","useRef","leaveTimeout","transitionTimeout","committedProps","state","setState","useState","visible","text","useEffect","window","clearTimeout","current","useLayoutEffect","previousProps","action","timestamp","updateWhileTextIsPresent","update","setLeaveTimeout","setTimeout","timeout","show","_jsx","className","role","children","CSSTransition","nodeRef","in","classNames","appear","enter","exit","unmountOnExit","_jsxs","Body","ref","as","Button","v2","size","onClick","label","withNextPortal"],"mappings":"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"}
+{"version":3,"file":"Snackbar.js","sources":["../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { Tags } from '@transferwise/icons';\nimport { useEffect, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport Button from '../Button';\nimport Body from '../Body';\nimport { LiveRegion } from '../common';\nimport type { ThemeDark, ThemeLight } from '../common';\nimport { PrimitivePrompt } from '../Prompt/PrimitivePrompt';\nimport type { Sentiment } from '../SentimentSurface';\nimport StatusIcon from '../StatusIcon';\n\nimport { SNACKBAR_ENTER_DURATION, SNACKBAR_EXIT_DURATION } from './constants';\nimport type { SnackbarAction, SnackbarInternalProps } from './Snackbar.types';\n\nexport interface SnackbarProps {\n  /** One optional action, supporting a callback or navigation through `href` and `target`. */\n  action?: SnackbarAction;\n  media?: React.ReactNode;\n  sentiment?: Sentiment;\n  text: React.ReactNode;\n  /** @deprecated Has no effect. Snackbar theming is based on ThemeProvider. */\n  theme?: ThemeLight | ThemeDark;\n  timeout: number;\n  /** @deprecated Has no effect when using SnackbarProvider, which manages Snackbar identity. */\n  timestamp?: number;\n}\n\nexport const Snackbar = ({\n  action,\n  announcementKey,\n  media,\n  onDismissRequest,\n  onExited,\n  sentiment = 'neutral',\n  text,\n  timeout,\n  visible,\n}: SnackbarInternalProps) => {\n  const surfaceRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!visible) {\n      return undefined;\n    }\n\n    const id = window.setTimeout(onDismissRequest, timeout);\n    return () => window.clearTimeout(id);\n  }, [announcementKey, onDismissRequest, timeout, visible]);\n\n  const renderMedia = () => {\n    if (media) {\n      return <span className=\"wds-Snackbar__media-asset\">{media}</span>;\n    }\n\n    if (sentiment === 'proposition') {\n      return (\n        <span className=\"wds-Snackbar__media-asset\">\n          <Tags aria-hidden size={24} />\n        </span>\n      );\n    }\n\n    return <StatusIcon sentiment={sentiment} size={24} />;\n  };\n\n  return (\n    <div\n      className=\"wds-Snackbar\"\n      style={\n        {\n          '--Snackbar-enter-duration': `${SNACKBAR_ENTER_DURATION}ms`,\n          '--Snackbar-exit-duration': `${SNACKBAR_EXIT_DURATION}ms`,\n        } as React.CSSProperties\n      }\n    >\n      <CSSTransition\n        appear\n        nodeRef={surfaceRef}\n        in={visible}\n        classNames=\"wds-Snackbar-container\"\n        timeout={{\n          appear: SNACKBAR_ENTER_DURATION,\n          enter: SNACKBAR_ENTER_DURATION,\n          exit: SNACKBAR_EXIT_DURATION,\n        }}\n        unmountOnExit\n        onExited={onExited}\n      >\n        <PrimitivePrompt\n          ref={surfaceRef}\n          className=\"wds-Snackbar-container\"\n          sentiment={sentiment}\n          emphasis=\"elevated\"\n          media={renderMedia()}\n          onDismiss={onDismissRequest}\n        >\n          <div className=\"wds-Snackbar__content\">\n            <LiveRegion\n              aria-live=\"polite\"\n              announceOnChange={announcementKey}\n              className=\"wds-Snackbar__message\"\n            >\n              <Body as=\"span\" className=\"wds-Snackbar__body\">\n                {text}\n              </Body>\n            </LiveRegion>\n            {action ? (\n              <Button\n                className=\"wds-Snackbar__action\"\n                v2\n                size=\"sm\"\n                priority=\"secondary\"\n                href={action.href}\n                target={action.target}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            ) : null}\n          </div>\n        </PrimitivePrompt>\n      </CSSTransition>\n    </div>\n  );\n};\n\nexport default Snackbar;\n"],"names":["Snackbar","action","announcementKey","media","onDismissRequest","onExited","sentiment","text","timeout","visible","surfaceRef","useRef","useEffect","undefined","id","window","setTimeout","clearTimeout","renderMedia","_jsx","className","children","Tags","size","StatusIcon","style","SNACKBAR_ENTER_DURATION","SNACKBAR_EXIT_DURATION","CSSTransition","appear","nodeRef","in","classNames","enter","exit","unmountOnExit","PrimitivePrompt","ref","emphasis","onDismiss","_jsxs","LiveRegion","announceOnChange","Body","as","Button","v2","priority","href","target","onClick","label"],"mappings":"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"}

package/build/Snackbar/Snackbar.mjs

@@ -1,123 +1,128 @@
-import { useRef, useState, useEffect, useLayoutEffect } from 'react';
+import { Tags } from '@transferwise/icons';
+import { useRef, useEffect } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import Button from '../Button/Button.resolver.mjs';
 import Body from '../Body/Body.mjs';
-import withNextPortalWrapper from '../WithNextPortal/WithNextPortal.mjs';
+import '../common/theme.mjs';
+import '../common/direction.mjs';
+import '@transferwise/neptune-tokens';
+import '../common/PropsValues/control.mjs';
+import '../common/PropsValues/size.mjs';
+import '../common/PropsValues/typography.mjs';
+import '../common/PropsValues/width.mjs';
+import '../common/PropsValues/type.mjs';
+import '../common/PropsValues/dateMode.mjs';
+import '../common/PropsValues/monthFormat.mjs';
+import '../common/PropsValues/position.mjs';
+import '../common/PropsValues/layouts.mjs';
+import '../common/PropsValues/status.mjs';
+import '../common/PropsValues/sentiment.mjs';
+import '../common/PropsValues/profileType.mjs';
+import '../common/PropsValues/variant.mjs';
+import '../common/PropsValues/scroll.mjs';
+import '../common/PropsValues/markdownNodeType.mjs';
+import '../common/fileType.mjs';
+import '@transferwise/formatting';
+import 'clsx';
+import 'react-intl';
+import '../common/CloseButton/CloseButton.messages.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { LiveRegion } from '../common/LiveRegion/LiveRegion.mjs';
+import { PrimitivePrompt } from '../Prompt/PrimitivePrompt/PrimitivePrompt.mjs';
+import StatusIcon from '../StatusIcon/StatusIcon.mjs';
+import { SNACKBAR_EXIT_DURATION, SNACKBAR_ENTER_DURATION } from './constants.mjs';
 
-const CSS_TRANSITION_DURATION = 400;
-const Snackbar = props => {
-  const bodyRef = useRef(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({
-    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 => {
-      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;
+const Snackbar = ({
+  action,
+  announcementKey,
+  media,
+  onDismissRequest,
+  onExited,
+  sentiment = 'neutral',
+  text,
+  timeout,
+  visible
+}) => {
+  const surfaceRef = useRef(null);
+  useEffect(() => {
+    if (!visible) {
+      return undefined;
     }
-    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();
-      }
+    const id = window.setTimeout(onDismissRequest, timeout);
+    return () => window.clearTimeout(id);
+  }, [announcementKey, onDismissRequest, timeout, visible]);
+  const renderMedia = () => {
+    if (media) {
+      return /*#__PURE__*/jsx("span", {
+        className: "wds-Snackbar__media-asset",
+        children: media
+      });
     }
-  });
-  /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
-  const {
-    action,
-    text,
-    visible
-  } = state;
-  const {
-    timeout
-  } = props;
+    if (sentiment === 'proposition') {
+      return /*#__PURE__*/jsx("span", {
+        className: "wds-Snackbar__media-asset",
+        children: /*#__PURE__*/jsx(Tags, {
+          "aria-hidden": true,
+          size: 24
+        })
+      });
+    }
+    return /*#__PURE__*/jsx(StatusIcon, {
+      sentiment: sentiment,
+      size: 24
+    });
+  };
   return /*#__PURE__*/jsx("div", {
-    className: "snackbar",
-    "aria-live": "assertive",
-    role: "alert",
+    className: "wds-Snackbar",
+    style: {
+      '--Snackbar-enter-duration': `${SNACKBAR_ENTER_DURATION}ms`,
+      '--Snackbar-exit-duration': `${SNACKBAR_EXIT_DURATION}ms`
+    },
     children: /*#__PURE__*/jsx(CSSTransition, {
-      nodeRef: bodyRef,
+      appear: true,
+      nodeRef: surfaceRef,
       in: visible,
-      classNames: "snackbar__text-container",
+      classNames: "wds-Snackbar-container",
       timeout: {
-        appear: 0,
-        enter: timeout,
-        exit: CSS_TRANSITION_DURATION
+        appear: SNACKBAR_ENTER_DURATION,
+        enter: SNACKBAR_ENTER_DURATION,
+        exit: SNACKBAR_EXIT_DURATION
       },
       unmountOnExit: true,
-      children: /*#__PURE__*/jsxs(Body, {
-        ref: bodyRef,
-        as: "span",
-        className: "snackbar__text",
-        children: [text, action ? /*#__PURE__*/jsx(Button, {
-          className: "snackbar__text__action",
-          v2: true,
-          size: "sm",
-          onClick: action.onClick,
-          children: action.label
-        }) : null]
+      onExited: onExited,
+      children: /*#__PURE__*/jsx(PrimitivePrompt, {
+        ref: surfaceRef,
+        className: "wds-Snackbar-container",
+        sentiment: sentiment,
+        emphasis: "elevated",
+        media: renderMedia(),
+        onDismiss: onDismissRequest,
+        children: /*#__PURE__*/jsxs("div", {
+          className: "wds-Snackbar__content",
+          children: [/*#__PURE__*/jsx(LiveRegion, {
+            "aria-live": "polite",
+            announceOnChange: announcementKey,
+            className: "wds-Snackbar__message",
+            children: /*#__PURE__*/jsx(Body, {
+              as: "span",
+              className: "wds-Snackbar__body",
+              children: text
+            })
+          }), action ? /*#__PURE__*/jsx(Button, {
+            className: "wds-Snackbar__action",
+            v2: true,
+            size: "sm",
+            priority: "secondary",
+            href: action.href,
+            target: action.target,
+            onClick: action.onClick,
+            children: action.label
+          }) : null]
+        })
       })
     })
   });
 };
-var SnackbarPortal = withNextPortalWrapper(Snackbar);
 
-export { Snackbar, SnackbarPortal as default };
+export { Snackbar };
 //# sourceMappingURL=Snackbar.mjs.map

package/build/Snackbar/Snackbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.mjs","sources":["../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport Button from '../Button';\nimport Body from '../Body';\nimport type { ThemeDark, ThemeLight } from '../common';\nimport withNextPortal from '../WithNextPortal/WithNextPortal';\n\nconst CSS_TRANSITION_DURATION = 400;\n\nexport interface SnackbarProps {\n  action?: {\n    label: string;\n    onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  text: React.ReactNode;\n  /** @deprecated Has no effect. Snackbar theming is based on ThemeProvider. */\n  theme?: ThemeLight | ThemeDark;\n  timeout: number;\n  timestamp: number;\n}\n\ninterface SnackbarState extends Pick<SnackbarProps, 'action' | 'text'> {\n  visible: boolean;\n}\n\nexport const Snackbar = (props: SnackbarProps) => {\n  const bodyRef = useRef<HTMLSpanElement>(null);\n  const leaveTimeout = useRef(0);\n  const transitionTimeout = useRef(0);\n  /** The props of the last committed render, as `this.props` was in the class component. */\n  const committedProps = useRef(props);\n\n  const [state, setState] = useState<SnackbarState>({\n    visible: false,\n    text: '',\n  });\n\n  useEffect(\n    () => () => {\n      window.clearTimeout(leaveTimeout.current);\n      window.clearTimeout(transitionTimeout.current);\n    },\n    [],\n  );\n\n  // Runs after every render to mirror the componentDidUpdate lifecycle this component previously\n  // relied on, including the shouldComponentUpdate guard that ignored every update without text.\n  // Layout, not passive, so a notification is shown or replaced before the browser paints, as\n  // componentDidUpdate did. Both rules below are disabled on purpose: the dependency-less effect\n  // and its synchronous state updates are what keep this conversion behaviour-identical.\n  /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n  useLayoutEffect(() => {\n    const previousProps = committedProps.current;\n    committedProps.current = props;\n\n    const { action, text, timestamp } = props;\n\n    // shouldComponentUpdate bailed out whenever the incoming text was empty. That also blocked the\n    // updates scheduled below, so a Snackbar whose text is cleared stays on screen until it is\n    // given text again. Preserved here deliberately to keep this refactor behaviour-identical.\n    const updateWhileTextIsPresent = (update: () => void) => {\n      if (committedProps.current.text) {\n        update();\n      }\n    };\n\n    const setLeaveTimeout = () => {\n      leaveTimeout.current = window.setTimeout(() => {\n        updateWhileTextIsPresent(() => setState((current) => ({ ...current, visible: false })));\n      }, committedProps.current.timeout);\n    };\n\n    const show = () => {\n      setState((current) => ({ ...current, visible: true, action, text }));\n      setLeaveTimeout();\n    };\n\n    if (!text) {\n      return;\n    }\n\n    if (!previousProps.text) {\n      show();\n    } else if (previousProps.timestamp !== timestamp) {\n      window.clearTimeout(leaveTimeout.current);\n\n      if (state.visible) {\n        setState((current) => ({ ...current, visible: false }));\n        transitionTimeout.current = window.setTimeout(() => {\n          updateWhileTextIsPresent(show);\n        }, CSS_TRANSITION_DURATION);\n      } else {\n        show();\n      }\n    }\n  });\n  /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n\n  const { action, text, visible } = state;\n  const { timeout } = props;\n\n  return (\n    <div className=\"snackbar\" aria-live=\"assertive\" role=\"alert\">\n      <CSSTransition\n        nodeRef={bodyRef}\n        in={visible}\n        classNames=\"snackbar__text-container\"\n        timeout={{\n          appear: 0,\n          enter: timeout,\n          exit: CSS_TRANSITION_DURATION,\n        }}\n        unmountOnExit\n      >\n        <Body ref={bodyRef} as=\"span\" className=\"snackbar__text\">\n          {text}\n          {action ? (\n            <Button className=\"snackbar__text__action\" v2 size=\"sm\" onClick={action.onClick}>\n              {action.label}\n            </Button>\n          ) : null}\n        </Body>\n      </CSSTransition>\n    </div>\n  );\n};\n\nexport default withNextPortal(Snackbar);\n"],"names":["CSS_TRANSITION_DURATION","Snackbar","props","bodyRef","useRef","leaveTimeout","transitionTimeout","committedProps","state","setState","useState","visible","text","useEffect","window","clearTimeout","current","useLayoutEffect","previousProps","action","timestamp","updateWhileTextIsPresent","update","setLeaveTimeout","setTimeout","timeout","show","_jsx","className","role","children","CSSTransition","nodeRef","in","classNames","appear","enter","exit","unmountOnExit","_jsxs","Body","ref","as","Button","v2","size","onClick","label","withNextPortal"],"mappings":"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"}
+{"version":3,"file":"Snackbar.mjs","sources":["../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { Tags } from '@transferwise/icons';\nimport { useEffect, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\n\nimport Button from '../Button';\nimport Body from '../Body';\nimport { LiveRegion } from '../common';\nimport type { ThemeDark, ThemeLight } from '../common';\nimport { PrimitivePrompt } from '../Prompt/PrimitivePrompt';\nimport type { Sentiment } from '../SentimentSurface';\nimport StatusIcon from '../StatusIcon';\n\nimport { SNACKBAR_ENTER_DURATION, SNACKBAR_EXIT_DURATION } from './constants';\nimport type { SnackbarAction, SnackbarInternalProps } from './Snackbar.types';\n\nexport interface SnackbarProps {\n  /** One optional action, supporting a callback or navigation through `href` and `target`. */\n  action?: SnackbarAction;\n  media?: React.ReactNode;\n  sentiment?: Sentiment;\n  text: React.ReactNode;\n  /** @deprecated Has no effect. Snackbar theming is based on ThemeProvider. */\n  theme?: ThemeLight | ThemeDark;\n  timeout: number;\n  /** @deprecated Has no effect when using SnackbarProvider, which manages Snackbar identity. */\n  timestamp?: number;\n}\n\nexport const Snackbar = ({\n  action,\n  announcementKey,\n  media,\n  onDismissRequest,\n  onExited,\n  sentiment = 'neutral',\n  text,\n  timeout,\n  visible,\n}: SnackbarInternalProps) => {\n  const surfaceRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!visible) {\n      return undefined;\n    }\n\n    const id = window.setTimeout(onDismissRequest, timeout);\n    return () => window.clearTimeout(id);\n  }, [announcementKey, onDismissRequest, timeout, visible]);\n\n  const renderMedia = () => {\n    if (media) {\n      return <span className=\"wds-Snackbar__media-asset\">{media}</span>;\n    }\n\n    if (sentiment === 'proposition') {\n      return (\n        <span className=\"wds-Snackbar__media-asset\">\n          <Tags aria-hidden size={24} />\n        </span>\n      );\n    }\n\n    return <StatusIcon sentiment={sentiment} size={24} />;\n  };\n\n  return (\n    <div\n      className=\"wds-Snackbar\"\n      style={\n        {\n          '--Snackbar-enter-duration': `${SNACKBAR_ENTER_DURATION}ms`,\n          '--Snackbar-exit-duration': `${SNACKBAR_EXIT_DURATION}ms`,\n        } as React.CSSProperties\n      }\n    >\n      <CSSTransition\n        appear\n        nodeRef={surfaceRef}\n        in={visible}\n        classNames=\"wds-Snackbar-container\"\n        timeout={{\n          appear: SNACKBAR_ENTER_DURATION,\n          enter: SNACKBAR_ENTER_DURATION,\n          exit: SNACKBAR_EXIT_DURATION,\n        }}\n        unmountOnExit\n        onExited={onExited}\n      >\n        <PrimitivePrompt\n          ref={surfaceRef}\n          className=\"wds-Snackbar-container\"\n          sentiment={sentiment}\n          emphasis=\"elevated\"\n          media={renderMedia()}\n          onDismiss={onDismissRequest}\n        >\n          <div className=\"wds-Snackbar__content\">\n            <LiveRegion\n              aria-live=\"polite\"\n              announceOnChange={announcementKey}\n              className=\"wds-Snackbar__message\"\n            >\n              <Body as=\"span\" className=\"wds-Snackbar__body\">\n                {text}\n              </Body>\n            </LiveRegion>\n            {action ? (\n              <Button\n                className=\"wds-Snackbar__action\"\n                v2\n                size=\"sm\"\n                priority=\"secondary\"\n                href={action.href}\n                target={action.target}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            ) : null}\n          </div>\n        </PrimitivePrompt>\n      </CSSTransition>\n    </div>\n  );\n};\n\nexport default Snackbar;\n"],"names":["Snackbar","action","announcementKey","media","onDismissRequest","onExited","sentiment","text","timeout","visible","surfaceRef","useRef","useEffect","undefined","id","window","setTimeout","clearTimeout","renderMedia","_jsx","className","children","Tags","size","StatusIcon","style","SNACKBAR_ENTER_DURATION","SNACKBAR_EXIT_DURATION","CSSTransition","appear","nodeRef","in","classNames","enter","exit","unmountOnExit","PrimitivePrompt","ref","emphasis","onDismiss","_jsxs","LiveRegion","announceOnChange","Body","as","Button","v2","priority","href","target","onClick","label"],"mappings":"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"}

package/build/Snackbar/SnackbarContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarContext.js","sources":["../../src/Snackbar/SnackbarContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport { SnackbarProps } from './Snackbar';\n\nexport type SnackbarContextType = {\n  createSnackbar: (props: Omit<SnackbarProps, 'timeout' | 'timestamp'>) => void;\n};\n\nexport const SnackbarContext = createContext<SnackbarContextType>({ createSnackbar: () => {} });\n\nexport const SnackbarConsumer = SnackbarContext.Consumer;\n"],"names":["SnackbarContext","createContext","createSnackbar","SnackbarConsumer","Consumer"],"mappings":";;;;AAQO,MAAMA,eAAe,gBAAGC,mBAAa,CAAsB;EAAEC,cAAc,EAAEA,MAAK,CAAE;AAAC,CAAE;AAEvF,MAAMC,gBAAgB,GAAGH,eAAe,CAACI;;;"}
+{"version":3,"file":"SnackbarContext.js","sources":["../../src/Snackbar/SnackbarContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport type { SnackbarCreationProps } from './Snackbar.types';\n\nexport type SnackbarContextType = {\n  createSnackbar: (props: SnackbarCreationProps) => void;\n};\n\nexport const SnackbarContext = createContext<SnackbarContextType>({ createSnackbar: () => {} });\n\nexport const SnackbarConsumer = SnackbarContext.Consumer;\n"],"names":["SnackbarContext","createContext","createSnackbar","SnackbarConsumer","Consumer"],"mappings":";;;;AAQO,MAAMA,eAAe,gBAAGC,mBAAa,CAAsB;EAAEC,cAAc,EAAEA,MAAK,CAAE;AAAC,CAAE;AAEvF,MAAMC,gBAAgB,GAAGH,eAAe,CAACI;;;"}

package/build/Snackbar/SnackbarContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarContext.mjs","sources":["../../src/Snackbar/SnackbarContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport { SnackbarProps } from './Snackbar';\n\nexport type SnackbarContextType = {\n  createSnackbar: (props: Omit<SnackbarProps, 'timeout' | 'timestamp'>) => void;\n};\n\nexport const SnackbarContext = createContext<SnackbarContextType>({ createSnackbar: () => {} });\n\nexport const SnackbarConsumer = SnackbarContext.Consumer;\n"],"names":["SnackbarContext","createContext","createSnackbar","SnackbarConsumer","Consumer"],"mappings":";;AAQO,MAAMA,eAAe,gBAAGC,aAAa,CAAsB;EAAEC,cAAc,EAAEA,MAAK,CAAE;AAAC,CAAE;AAEvF,MAAMC,gBAAgB,GAAGH,eAAe,CAACI;;"}
+{"version":3,"file":"SnackbarContext.mjs","sources":["../../src/Snackbar/SnackbarContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport type { SnackbarCreationProps } from './Snackbar.types';\n\nexport type SnackbarContextType = {\n  createSnackbar: (props: SnackbarCreationProps) => void;\n};\n\nexport const SnackbarContext = createContext<SnackbarContextType>({ createSnackbar: () => {} });\n\nexport const SnackbarConsumer = SnackbarContext.Consumer;\n"],"names":["SnackbarContext","createContext","createSnackbar","SnackbarConsumer","Consumer"],"mappings":";;AAQO,MAAMA,eAAe,gBAAGC,aAAa,CAAsB;EAAEC,cAAc,EAAEA,MAAK,CAAE;AAAC,CAAE;AAEvF,MAAMC,gBAAgB,GAAGH,eAAe,CAACI;;"}

package/build/Snackbar/SnackbarPortal.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var WithNextPortal = require('../WithNextPortal/WithNextPortal.js');
+var Snackbar = require('./Snackbar.js');
+
+/** Renders the Snackbar into `document.body` after mount, so it's safe for SSR. */
+const SnackbarPortal = WithNextPortal.default(Snackbar.Snackbar);
+
+exports.default = SnackbarPortal;
+//# sourceMappingURL=SnackbarPortal.js.map

package/build/Snackbar/SnackbarPortal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarPortal.js","sources":["../../src/Snackbar/SnackbarPortal.tsx"],"sourcesContent":["import withNextPortal from '../WithNextPortal/WithNextPortal';\n\nimport { Snackbar } from './Snackbar';\n\n/** Renders the Snackbar into `document.body` after mount, so it's safe for SSR. */\nconst SnackbarPortal = withNextPortal(Snackbar);\n\nexport default SnackbarPortal;\n"],"names":["SnackbarPortal","withNextPortal","Snackbar"],"mappings":";;;;;;;AAIA;AACA,MAAMA,cAAc,GAAGC,sBAAc,CAACC,iBAAQ;;"}

package/build/Snackbar/SnackbarPortal.mjs

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