@transferwise/components 0.0.0-experimental-e6637c6 → 0.0.0-experimental-6e04f56

package/build/Snackbar/Snackbar.js

@@ -10,22 +10,14 @@ var WithNextPortal = require('../WithNextPortal/WithNextPortal.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 const CSS_TRANSITION_DURATION = 400;
-const Snackbar = ({
-  action,
-  text,
-  timeout,
-  timestamp
-}) => {
+const Snackbar = props => {
   const bodyRef = React.useRef(null);
   const leaveTimeout = React.useRef(0);
   const transitionTimeout = React.useRef(0);
-  /** Mirrors the props of the last committed render, as `this.props` did on the class component. */
-  const committedProps = React.useRef({
-    text,
-    timestamp
-  });
-  const [visible, setVisible] = React.useState(false);
-  const [notification, setNotification] = React.useState({
+  /** 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(() => () => {
@@ -38,14 +30,14 @@ const Snackbar = ({
   // updates are what keep this conversion behaviour-identical to the class component.
   /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
   React.useEffect(() => {
+    const previousProps = committedProps.current;
+    committedProps.current = props;
     const {
-      text: previousText,
-      timestamp: previousTimestamp
-    } = committedProps.current;
-    committedProps.current = {
+      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.
@@ -54,32 +46,52 @@ const Snackbar = ({
         update();
       }
     };
-    if (!text) {
-      return;
-    }
+    const setLeaveTimeout = () => {
+      leaveTimeout.current = window.setTimeout(() => {
+        updateWhileTextIsPresent(() => setState(current => ({
+          ...current,
+          visible: false
+        })));
+      }, timeout);
+    };
     const show = () => {
-      setVisible(true);
-      setNotification({
+      setState(current => ({
+        ...current,
+        visible: true,
         action,
         text
-      });
-      leaveTimeout.current = window.setTimeout(() => updateWhileTextIsPresent(() => setVisible(false)), timeout);
+      }));
+      setLeaveTimeout();
     };
-    if (!previousText) {
-      show();
+    if (!text) {
       return;
     }
-    if (previousTimestamp !== timestamp) {
+    if (!previousProps.text) {
+      show();
+    } else if (previousProps.timestamp !== timestamp) {
       window.clearTimeout(leaveTimeout.current);
-      if (visible) {
-        setVisible(false);
-        transitionTimeout.current = window.setTimeout(() => updateWhileTextIsPresent(show), CSS_TRANSITION_DURATION);
-        return;
+      if (state.visible) {
+        setState(current => ({
+          ...current,
+          visible: false
+        }));
+        transitionTimeout.current = window.setTimeout(() => {
+          updateWhileTextIsPresent(show);
+        }, CSS_TRANSITION_DURATION);
+      } else {
+        show();
       }
-      show();
     }
   });
   /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
+  const {
+    action,
+    text,
+    visible
+  } = state;
+  const {
+    timeout
+  } = props;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "snackbar",
     "aria-live": "assertive",
@@ -98,12 +110,12 @@ const Snackbar = ({
         ref: bodyRef,
         as: "span",
         className: "snackbar__text",
-        children: [notification.text, notification.action ? /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
+        children: [text, action ? /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
           className: "snackbar__text__action",
           v2: true,
           size: "sm",
-          onClick: notification.action.onClick,
-          children: notification.action.label
+          onClick: action.onClick,
+          children: action.label
         }) : null]
       })
     })

package/build/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.js","sources":["../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { useEffect, 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 */\n  theme?: ThemeLight | ThemeDark;\n  timeout: number;\n  timestamp: number;\n}\n\ntype SnackbarNotification = Pick<SnackbarProps, 'action' | 'text'>;\n\nexport const Snackbar = ({ action, text, timeout, timestamp }: SnackbarProps) => {\n  const bodyRef = useRef<HTMLSpanElement>(null);\n  const leaveTimeout = useRef(0);\n  const transitionTimeout = useRef(0);\n  /** Mirrors the props of the last committed render, as `this.props` did on the class component. */\n  const committedProps = useRef({ text, timestamp });\n\n  const [visible, setVisible] = useState(false);\n  const [notification, setNotification] = useState<SnackbarNotification>({ text: '' });\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  // Both rules below are disabled on purpose: the dependency-less effect and its synchronous state\n  // updates are what keep this conversion behaviour-identical to the class component.\n  /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n  useEffect(() => {\n    const { text: previousText, timestamp: previousTimestamp } = committedProps.current;\n    committedProps.current = { text, timestamp };\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    if (!text) {\n      return;\n    }\n\n    const show = () => {\n      setVisible(true);\n      setNotification({ action, text });\n      leaveTimeout.current = window.setTimeout(\n        () => updateWhileTextIsPresent(() => setVisible(false)),\n        timeout,\n      );\n    };\n\n    if (!previousText) {\n      show();\n      return;\n    }\n\n    if (previousTimestamp !== timestamp) {\n      window.clearTimeout(leaveTimeout.current);\n\n      if (visible) {\n        setVisible(false);\n        transitionTimeout.current = window.setTimeout(\n          () => updateWhileTextIsPresent(show),\n          CSS_TRANSITION_DURATION,\n        );\n        return;\n      }\n\n      show();\n    }\n  });\n  /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\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          {notification.text}\n          {notification.action ? (\n            <Button\n              className=\"snackbar__text__action\"\n              v2\n              size=\"sm\"\n              onClick={notification.action.onClick}\n            >\n              {notification.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","action","text","timeout","timestamp","bodyRef","useRef","leaveTimeout","transitionTimeout","committedProps","visible","setVisible","useState","notification","setNotification","useEffect","window","clearTimeout","current","previousText","previousTimestamp","updateWhileTextIsPresent","update","show","setTimeout","_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 { useEffect, 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 */\n  theme?: ThemeLight | ThemeDark;\n  timeout: number;\n  timestamp: number;\n}\n\ninterface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'> {\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  // Both rules below are disabled on purpose: the dependency-less effect and its synchronous state\n  // updates are what keep this conversion behaviour-identical to the class component.\n  /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n  useEffect(() => {\n    const previousProps = committedProps.current;\n    committedProps.current = props;\n\n    const { action, text, timeout, 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      }, 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","previousProps","action","timeout","timestamp","updateWhileTextIsPresent","update","setLeaveTimeout","setTimeout","show","_jsx","className","role","children","CSSTransition","nodeRef","in","classNames","appear","enter","exit","unmountOnExit","_jsxs","Body","ref","as","Button","v2","size","onClick","label","withNextPortal"],"mappings":";;;;;;;;;;;AAQA,MAAMA,uBAAuB,GAAG,GAAG;AAkB5B,MAAMC,QAAQ,GAAIC,KAAoB,IAAI;AAC/C,EAAA,MAAMC,OAAO,GAAGC,YAAM,CAAkB,IAAI,CAAC;AAC7C,EAAA,MAAMC,YAAY,GAAGD,YAAM,CAAC,CAAC,CAAC;AAC9B,EAAA,MAAME,iBAAiB,GAAGF,YAAM,CAAC,CAAC,CAAC;AACnC;AACA,EAAA,MAAMG,cAAc,GAAGH,YAAM,CAACF,KAAK,CAAC;AAEpC,EAAA,MAAM,CAACM,KAAK,EAAEC,QAAQ,CAAC,GAAGC,cAAQ,CAAgB;AAChDC,IAAAA,OAAO,EAAE,KAAK;AACdC,IAAAA,IAAI,EAAE;AACP,GAAA,CAAC;EAEFC,eAAS,CACP,MAAM,MAAK;AACTC,IAAAA,MAAM,CAACC,YAAY,CAACV,YAAY,CAACW,OAAO,CAAC;AACzCF,IAAAA,MAAM,CAACC,YAAY,CAACT,iBAAiB,CAACU,OAAO,CAAC;EAChD,CAAC,EACD,EAAE,CACH;AAED;AACA;AACA;AACA;AACA;AACAH,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,MAAMI,aAAa,GAAGV,cAAc,CAACS,OAAO;IAC5CT,cAAc,CAACS,OAAO,GAAGd,KAAK;IAE9B,MAAM;MAAEgB,MAAM;MAAEN,IAAI;MAAEO,OAAO;AAAEC,MAAAA;AAAS,KAAE,GAAGlB,KAAK;AAElD;AACA;AACA;IACA,MAAMmB,wBAAwB,GAAIC,MAAkB,IAAI;AACtD,MAAA,IAAIf,cAAc,CAACS,OAAO,CAACJ,IAAI,EAAE;AAC/BU,QAAAA,MAAM,EAAE;AACV,MAAA;IACF,CAAC;IAED,MAAMC,eAAe,GAAGA,MAAK;AAC3BlB,MAAAA,YAAY,CAACW,OAAO,GAAGF,MAAM,CAACU,UAAU,CAAC,MAAK;AAC5CH,QAAAA,wBAAwB,CAAC,MAAMZ,QAAQ,CAAEO,OAAO,KAAM;AAAE,UAAA,GAAGA,OAAO;AAAEL,UAAAA,OAAO,EAAE;SAAO,CAAC,CAAC,CAAC;MACzF,CAAC,EAAEQ,OAAO,CAAC;IACb,CAAC;IAED,MAAMM,IAAI,GAAGA,MAAK;MAChBhB,QAAQ,CAAEO,OAAO,KAAM;AAAE,QAAA,GAAGA,OAAO;AAAEL,QAAAA,OAAO,EAAE,IAAI;QAAEO,MAAM;AAAEN,QAAAA;AAAI,OAAE,CAAC,CAAC;AACpEW,MAAAA,eAAe,EAAE;IACnB,CAAC;IAED,IAAI,CAACX,IAAI,EAAE;AACT,MAAA;AACF,IAAA;AAEA,IAAA,IAAI,CAACK,aAAa,CAACL,IAAI,EAAE;AACvBa,MAAAA,IAAI,EAAE;AACR,IAAA,CAAC,MAAM,IAAIR,aAAa,CAACG,SAAS,KAAKA,SAAS,EAAE;AAChDN,MAAAA,MAAM,CAACC,YAAY,CAACV,YAAY,CAACW,OAAO,CAAC;MAEzC,IAAIR,KAAK,CAACG,OAAO,EAAE;QACjBF,QAAQ,CAAEO,OAAO,KAAM;AAAE,UAAA,GAAGA,OAAO;AAAEL,UAAAA,OAAO,EAAE;AAAK,SAAE,CAAC,CAAC;AACvDL,QAAAA,iBAAiB,CAACU,OAAO,GAAGF,MAAM,CAACU,UAAU,CAAC,MAAK;UACjDH,wBAAwB,CAACI,IAAI,CAAC;QAChC,CAAC,EAAEzB,uBAAuB,CAAC;AAC7B,MAAA,CAAC,MAAM;AACLyB,QAAAA,IAAI,EAAE;AACR,MAAA;AACF,IAAA;AACF,EAAA,CAAC,CAAC;AACF;EAEA,MAAM;IAAEP,MAAM;IAAEN,IAAI;AAAED,IAAAA;AAAO,GAAE,GAAGH,KAAK;EACvC,MAAM;AAAEW,IAAAA;AAAO,GAAE,GAAGjB,KAAK;AAEzB,EAAA,oBACEwB,cAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,UAAU;AAAC,IAAA,WAAA,EAAU,WAAW;AAACC,IAAAA,IAAI,EAAC,OAAO;IAAAC,QAAA,eAC1DH,cAAA,CAACI,kCAAa,EAAA;AACZC,MAAAA,OAAO,EAAE5B,OAAQ;AACjB6B,MAAAA,EAAE,EAAErB,OAAQ;AACZsB,MAAAA,UAAU,EAAC,0BAA0B;AACrCd,MAAAA,OAAO,EAAE;AACPe,QAAAA,MAAM,EAAE,CAAC;AACTC,QAAAA,KAAK,EAAEhB,OAAO;AACdiB,QAAAA,IAAI,EAAEpC;OACN;MACFqC,aAAa,EAAA,IAAA;MAAAR,QAAA,eAEbS,eAAA,CAACC,YAAI,EAAA;AAACC,QAAAA,GAAG,EAAErC,OAAQ;AAACsC,QAAAA,EAAE,EAAC,MAAM;AAACd,QAAAA,SAAS,EAAC,gBAAgB;AAAAE,QAAAA,QAAA,GACrDjB,IAAI,EACJM,MAAM,gBACLQ,cAAA,CAACgB,uBAAM,EAAA;AAACf,UAAAA,SAAS,EAAC,wBAAwB;UAACgB,EAAE,EAAA,IAAA;AAACC,UAAAA,IAAI,EAAC,IAAI;UAACC,OAAO,EAAE3B,MAAM,CAAC2B,OAAQ;UAAAhB,QAAA,EAC7EX,MAAM,CAAC4B;SACF,CAAC,GACP,IAAI;OACJ;KACO;AACjB,GAAK,CAAC;AAEV;AAEA,qBAAeC,sBAAc,CAAC9C,QAAQ,CAAC;;;"}

package/build/Snackbar/Snackbar.mjs

@@ -6,22 +6,14 @@ import withNextPortalWrapper from '../WithNextPortal/WithNextPortal.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const CSS_TRANSITION_DURATION = 400;
-const Snackbar = ({
-  action,
-  text,
-  timeout,
-  timestamp
-}) => {
+const Snackbar = props => {
   const bodyRef = useRef(null);
   const leaveTimeout = useRef(0);
   const transitionTimeout = useRef(0);
-  /** Mirrors the props of the last committed render, as `this.props` did on the class component. */
-  const committedProps = useRef({
-    text,
-    timestamp
-  });
-  const [visible, setVisible] = useState(false);
-  const [notification, setNotification] = useState({
+  /** 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(() => () => {
@@ -34,14 +26,14 @@ const Snackbar = ({
   // 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 {
-      text: previousText,
-      timestamp: previousTimestamp
-    } = committedProps.current;
-    committedProps.current = {
+      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.
@@ -50,32 +42,52 @@ const Snackbar = ({
         update();
       }
     };
-    if (!text) {
-      return;
-    }
+    const setLeaveTimeout = () => {
+      leaveTimeout.current = window.setTimeout(() => {
+        updateWhileTextIsPresent(() => setState(current => ({
+          ...current,
+          visible: false
+        })));
+      }, timeout);
+    };
     const show = () => {
-      setVisible(true);
-      setNotification({
+      setState(current => ({
+        ...current,
+        visible: true,
         action,
         text
-      });
-      leaveTimeout.current = window.setTimeout(() => updateWhileTextIsPresent(() => setVisible(false)), timeout);
+      }));
+      setLeaveTimeout();
     };
-    if (!previousText) {
-      show();
+    if (!text) {
       return;
     }
-    if (previousTimestamp !== timestamp) {
+    if (!previousProps.text) {
+      show();
+    } else if (previousProps.timestamp !== timestamp) {
       window.clearTimeout(leaveTimeout.current);
-      if (visible) {
-        setVisible(false);
-        transitionTimeout.current = window.setTimeout(() => updateWhileTextIsPresent(show), CSS_TRANSITION_DURATION);
-        return;
+      if (state.visible) {
+        setState(current => ({
+          ...current,
+          visible: false
+        }));
+        transitionTimeout.current = window.setTimeout(() => {
+          updateWhileTextIsPresent(show);
+        }, CSS_TRANSITION_DURATION);
+      } else {
+        show();
       }
-      show();
     }
   });
   /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */
+  const {
+    action,
+    text,
+    visible
+  } = state;
+  const {
+    timeout
+  } = props;
   return /*#__PURE__*/jsx("div", {
     className: "snackbar",
     "aria-live": "assertive",
@@ -94,12 +106,12 @@ const Snackbar = ({
         ref: bodyRef,
         as: "span",
         className: "snackbar__text",
-        children: [notification.text, notification.action ? /*#__PURE__*/jsx(Button, {
+        children: [text, action ? /*#__PURE__*/jsx(Button, {
           className: "snackbar__text__action",
           v2: true,
           size: "sm",
-          onClick: notification.action.onClick,
-          children: notification.action.label
+          onClick: action.onClick,
+          children: action.label
         }) : null]
       })
     })

package/build/Snackbar/Snackbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.mjs","sources":["../../src/Snackbar/Snackbar.tsx"],"sourcesContent":["import { useEffect, 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 */\n  theme?: ThemeLight | ThemeDark;\n  timeout: number;\n  timestamp: number;\n}\n\ntype SnackbarNotification = Pick<SnackbarProps, 'action' | 'text'>;\n\nexport const Snackbar = ({ action, text, timeout, timestamp }: SnackbarProps) => {\n  const bodyRef = useRef<HTMLSpanElement>(null);\n  const leaveTimeout = useRef(0);\n  const transitionTimeout = useRef(0);\n  /** Mirrors the props of the last committed render, as `this.props` did on the class component. */\n  const committedProps = useRef({ text, timestamp });\n\n  const [visible, setVisible] = useState(false);\n  const [notification, setNotification] = useState<SnackbarNotification>({ text: '' });\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  // Both rules below are disabled on purpose: the dependency-less effect and its synchronous state\n  // updates are what keep this conversion behaviour-identical to the class component.\n  /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n  useEffect(() => {\n    const { text: previousText, timestamp: previousTimestamp } = committedProps.current;\n    committedProps.current = { text, timestamp };\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    if (!text) {\n      return;\n    }\n\n    const show = () => {\n      setVisible(true);\n      setNotification({ action, text });\n      leaveTimeout.current = window.setTimeout(\n        () => updateWhileTextIsPresent(() => setVisible(false)),\n        timeout,\n      );\n    };\n\n    if (!previousText) {\n      show();\n      return;\n    }\n\n    if (previousTimestamp !== timestamp) {\n      window.clearTimeout(leaveTimeout.current);\n\n      if (visible) {\n        setVisible(false);\n        transitionTimeout.current = window.setTimeout(\n          () => updateWhileTextIsPresent(show),\n          CSS_TRANSITION_DURATION,\n        );\n        return;\n      }\n\n      show();\n    }\n  });\n  /* eslint-enable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\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          {notification.text}\n          {notification.action ? (\n            <Button\n              className=\"snackbar__text__action\"\n              v2\n              size=\"sm\"\n              onClick={notification.action.onClick}\n            >\n              {notification.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","action","text","timeout","timestamp","bodyRef","useRef","leaveTimeout","transitionTimeout","committedProps","visible","setVisible","useState","notification","setNotification","useEffect","window","clearTimeout","current","previousText","previousTimestamp","updateWhileTextIsPresent","update","show","setTimeout","_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 { useEffect, 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 */\n  theme?: ThemeLight | ThemeDark;\n  timeout: number;\n  timestamp: number;\n}\n\ninterface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'> {\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  // Both rules below are disabled on purpose: the dependency-less effect and its synchronous state\n  // updates are what keep this conversion behaviour-identical to the class component.\n  /* eslint-disable react-hooks/exhaustive-deps, react-hooks/set-state-in-effect */\n  useEffect(() => {\n    const previousProps = committedProps.current;\n    committedProps.current = props;\n\n    const { action, text, timeout, 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      }, 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","previousProps","action","timeout","timestamp","updateWhileTextIsPresent","update","setLeaveTimeout","setTimeout","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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"}

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

@@ -10,7 +10,7 @@ export interface SnackbarProps {
     timeout: number;
     timestamp: number;
 }
-export declare const Snackbar: ({ action, text, timeout, timestamp }: SnackbarProps) => import("react").JSX.Element;
+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 +1 @@
-{"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,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB;AAID,eAAO,MAAM,QAAQ,GAAI,sCAAsC,aAAa,gCAoG3E,CAAC;;AAEF,wBAAwC"}
+{"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,kBAAkB;IAClB,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,gCAmG5C,CAAC;;AAEF,wBAAwC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-e6637c6",
+  "version": "0.0.0-experimental-6e04f56",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/Snackbar/Snackbar.tsx

@@ -20,17 +20,21 @@ export interface SnackbarProps {
   timestamp: number;
 }
 
-type SnackbarNotification = Pick<SnackbarProps, 'action' | 'text'>;
+interface SnackbarState extends Pick<SnackbarProps, 'action' | 'text' | 'theme'> {
+  visible: boolean;
+}
 
-export const Snackbar = ({ action, text, timeout, timestamp }: SnackbarProps) => {
+export const Snackbar = (props: SnackbarProps) => {
   const bodyRef = useRef<HTMLSpanElement>(null);
   const leaveTimeout = useRef(0);
   const transitionTimeout = useRef(0);
-  /** Mirrors the props of the last committed render, as `this.props` did on the class component. */
-  const committedProps = useRef({ text, timestamp });
+  /** The props of the last committed render, as `this.props` was in the class component. */
+  const committedProps = useRef(props);
 
-  const [visible, setVisible] = useState(false);
-  const [notification, setNotification] = useState<SnackbarNotification>({ text: '' });
+  const [state, setState] = useState<SnackbarState>({
+    visible: false,
+    text: '',
+  });
 
   useEffect(
     () => () => {
@@ -46,8 +50,10 @@ export const Snackbar = ({ action, text, timeout, timestamp }: SnackbarProps) =>
   // 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 { text: previousText, timestamp: previousTimestamp } = committedProps.current;
-    committedProps.current = { text, timestamp };
+    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
@@ -58,41 +64,41 @@ export const Snackbar = ({ action, text, timeout, timestamp }: SnackbarProps) =>
       }
     };
 
-    if (!text) {
-      return;
-    }
+    const setLeaveTimeout = () => {
+      leaveTimeout.current = window.setTimeout(() => {
+        updateWhileTextIsPresent(() => setState((current) => ({ ...current, visible: false })));
+      }, timeout);
+    };
 
     const show = () => {
-      setVisible(true);
-      setNotification({ action, text });
-      leaveTimeout.current = window.setTimeout(
-        () => updateWhileTextIsPresent(() => setVisible(false)),
-        timeout,
-      );
+      setState((current) => ({ ...current, visible: true, action, text }));
+      setLeaveTimeout();
     };
 
-    if (!previousText) {
-      show();
+    if (!text) {
       return;
     }
 
-    if (previousTimestamp !== timestamp) {
+    if (!previousProps.text) {
+      show();
+    } else if (previousProps.timestamp !== timestamp) {
       window.clearTimeout(leaveTimeout.current);
 
-      if (visible) {
-        setVisible(false);
-        transitionTimeout.current = window.setTimeout(
-          () => updateWhileTextIsPresent(show),
-          CSS_TRANSITION_DURATION,
-        );
-        return;
+      if (state.visible) {
+        setState((current) => ({ ...current, visible: false }));
+        transitionTimeout.current = window.setTimeout(() => {
+          updateWhileTextIsPresent(show);
+        }, CSS_TRANSITION_DURATION);
+      } else {
+        show();
       }
-
-      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
@@ -107,15 +113,10 @@ export const Snackbar = ({ action, text, timeout, timestamp }: SnackbarProps) =>
         unmountOnExit
       >
         <Body ref={bodyRef} as="span" className="snackbar__text">
-          {notification.text}
-          {notification.action ? (
-            <Button
-              className="snackbar__text__action"
-              v2
-              size="sm"
-              onClick={notification.action.onClick}
-            >
-              {notification.action.label}
+          {text}
+          {action ? (
+            <Button className="snackbar__text__action" v2 size="sm" onClick={action.onClick}>
+              {action.label}
             </Button>
           ) : null}
         </Body>