@transferwise/components 46.8.0 → 46.9.0

package/build/index.js

@@ -2612,7 +2612,7 @@ const CheckboxOption = /*#__PURE__*/React.forwardRef(({
     button: /*#__PURE__*/jsxRuntime.jsx(CheckboxButton$1, {
       checked: checked,
       disabled: disabled,
-      onChange: () => onChange(!checked)
+      onChange: () => onChange?.(!checked)
     })
   });
 });
@@ -11181,18 +11181,19 @@ const SegmentedControl = ({
 
 const CSS_TRANSITION_DURATION = 400;
 class Snackbar extends React.Component {
-  /** @type {RefObject<HTMLSpanElement>} */
   bodyRef = /*#__PURE__*/React.createRef();
-  constructor() {
-    super();
+  timeout = 0;
+  transitionTimeout = 0;
+  constructor(props) {
+    super(props);
     this.state = {
       visible: false,
       text: ''
     };
   }
   componentWillUnmount() {
-    clearTimeout(this.timeout);
-    clearTimeout(this.transitionTimeout);
+    window.clearTimeout(this.timeout);
+    window.clearTimeout(this.transitionTimeout);
   }
   shouldComponentUpdate(nextProps, nextState) {
     if (!nextProps.text) {
@@ -11207,7 +11208,7 @@ class Snackbar extends React.Component {
     const {
       timeout
     } = this.props;
-    this.timeout = setTimeout(() => {
+    this.timeout = window.setTimeout(() => {
       this.setState({
         visible: false
       });
@@ -11230,12 +11231,12 @@ class Snackbar extends React.Component {
         this.setLeaveTimeout();
       });
     } else if (previousProps.timestamp !== timestamp) {
-      clearTimeout(this.timeout);
+      window.clearTimeout(this.timeout);
       if (this.state.visible) {
         this.setState({
           visible: false
         }, () => {
-          this.transitionTimeout = setTimeout(() => {
+          this.transitionTimeout = window.setTimeout(() => {
             this.setState({
               visible: true,
               action,
@@ -11260,7 +11261,7 @@ class Snackbar extends React.Component {
     const {
       action,
       text,
-      theme,
+      theme = exports.Theme.LIGHT,
       visible
     } = this.state;
     const {
@@ -11294,74 +11295,51 @@ class Snackbar extends React.Component {
   }
 }
 Snackbar.contextType = DirectionContext;
-Snackbar.propTypes = {
-  action: PropTypes__default.default.shape({
-    label: PropTypes__default.default.string.isRequired,
-    onClick: PropTypes__default.default.func
-  }),
-  text: PropTypes__default.default.node.isRequired,
-  theme: PropTypes__default.default.oneOf(['light', 'dark']),
-  timeout: PropTypes__default.default.number.isRequired,
-  timestamp: PropTypes__default.default.number.isRequired
-};
-Snackbar.defaultProps = {
-  action: null,
-  theme: exports.Theme.LIGHT
-};
 var SnackbarPortal = withNextPortalWrapper(Snackbar);
 
-const SnackbarContext = /*#__PURE__*/React.createContext();
+const SnackbarContext = /*#__PURE__*/React.createContext({
+  createSnackbar: () => {}
+});
 const SnackbarConsumer = SnackbarContext.Consumer;
 
-class SnackbarProvider extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      text: '',
-      timestamp: 0
-    };
-  }
-  create = ({
+function SnackbarProvider({
+  timeout = 4500,
+  children
+}) {
+  const [state, setState] = React.useState({
+    text: '',
+    timestamp: 0
+  });
+  const {
     action,
     text,
-    theme
-  }) => {
-    this.setState({
-      action,
-      text,
-      theme,
-      timestamp: Date.now()
-    });
-  };
-  render() {
-    const {
-      action,
-      text,
-      theme,
-      timestamp
-    } = this.state;
-    return /*#__PURE__*/jsxRuntime.jsxs(SnackbarContext.Provider, {
-      value: {
-        createSnackbar: this.create
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsx(SnackbarPortal, {
-        action: action,
-        text: text,
-        timestamp: timestamp,
-        timeout: this.props.timeout,
-        theme: theme
-      }), this.props.children]
-    });
-  }
+    theme,
+    timestamp
+  } = state;
+  return /*#__PURE__*/jsxRuntime.jsxs(SnackbarContext.Provider, {
+    value: React.useMemo(() => ({
+      createSnackbar: ({
+        action,
+        text,
+        theme
+      }) => {
+        setState({
+          action,
+          text,
+          theme,
+          timestamp: Date.now()
+        });
+      }
+    }), []),
+    children: [/*#__PURE__*/jsxRuntime.jsx(SnackbarPortal, {
+      action: action,
+      text: text,
+      timestamp: timestamp,
+      timeout: timeout,
+      theme: theme
+    }), children]
+  });
 }
-SnackbarProvider.propTypes = {
-  children: PropTypes__default.default.node.isRequired,
-  timeout: PropTypes__default.default.number
-};
-SnackbarProvider.defaultProps = {
-  timeout: 4500
-};
-var SnackbarProvider$1 = SnackbarProvider;
 
 const Sticky = ({
   open,
@@ -15655,7 +15633,7 @@ exports.SlidingPanel = SlidingPanel$1;
 exports.SnackbarConsumer = SnackbarConsumer;
 exports.SnackbarContext = SnackbarContext;
 exports.SnackbarPortal = SnackbarPortal;
-exports.SnackbarProvider = SnackbarProvider$1;
+exports.SnackbarProvider = SnackbarProvider;
 exports.StatusIcon = StatusIcon;
 exports.Stepper = Stepper;
 exports.Sticky = Sticky$1;