@transferwise/components 0.0.0-experimental-b2eafa7 → 0.0.0-experimental-b7402e7

package/build/index.esm.js

@@ -2578,7 +2578,7 @@ const CheckboxOption = /*#__PURE__*/forwardRef(({
     button: /*#__PURE__*/jsx(CheckboxButton$1, {
       checked: checked,
       disabled: disabled,
-      onChange: () => onChange(!checked)
+      onChange: () => onChange?.(!checked)
     })
   });
 });
@@ -9879,7 +9879,6 @@ const PromoCard = /*#__PURE__*/forwardRef(({
       setChecked(!checked); // Update local state for checkbox
     }
   };
-
   const componentId = `${id || generateRandomId()}`;
   // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
   // `'download'` if `download` is truthy. If neither condition is true, set
@@ -11043,123 +11042,21 @@ Select.defaultProps = {
   dropdownProps: {}
 };
 
-const SegmentedControl = ({
-  name,
-  defaultValue,
-  mode = 'input',
-  segments,
-  onChange
-}) => {
-  const [selectedValue, setSelectedValue] = useState(defaultValue || segments[0].value);
-  const [animate, setAnimate] = useState(false);
-  const segmentsRef = useRef(null);
-  if (segments.length > 3) {
-    throw new Error('SegmentedControl only supports up to 3 segments. Please refer to: https://wise.design/components/segmented-control');
-  }
-  const segmentsWithRefs = segments.map(segment => ({
-    ...segment,
-    ref: /*#__PURE__*/createRef()
-  }));
-  const updateSegmentPosition = () => {
-    const selectedSegmentRef = segmentsWithRefs.find(segment => segment.value === selectedValue)?.ref;
-    // We grab the active segments style object from the ref
-    // and set the css variables to the selected segments width and x position.
-    // This is so we can animate the highlight to the selected segment
-    if (selectedSegmentRef?.current && segmentsRef.current) {
-      const {
-        style
-      } = segmentsRef.current;
-      style.setProperty('--segment-highlight-width', `${selectedSegmentRef.current.offsetWidth}px`);
-      style.setProperty('--segment-highlight-x', `${selectedSegmentRef.current.offsetLeft}px`);
-    }
-  };
-  useEffect(() => {
-    updateSegmentPosition();
-    const handleWindowSizeChange = () => {
-      setAnimate(false);
-      updateSegmentPosition();
-    };
-    window.addEventListener('resize', handleWindowSizeChange);
-    return () => {
-      window.removeEventListener('resize', handleWindowSizeChange);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [segmentsWithRefs, selectedValue]);
-  useEffect(() => {
-    onChange(selectedValue);
-  }, [onChange, selectedValue]);
-  return /*#__PURE__*/jsx("div", {
-    ref: segmentsRef,
-    "data-testid": "segmented-control",
-    className: classNames('segmented-control', {
-      'segmented-control--input': mode === 'input'
-    }),
-    children: /*#__PURE__*/jsx("div", {
-      className: classNames('segmented-control__segments', {
-        'segmented-control__segments--no-animate': !animate
-      }),
-      children: segmentsWithRefs.map(segment => mode === 'input' ? /*#__PURE__*/jsxs("label", {
-        ref: segment.ref,
-        htmlFor: segment.id,
-        className: classNames('segmented-control__segment', {
-          'segmented-control__selected-segment': selectedValue === segment.value
-        }),
-        children: [/*#__PURE__*/jsx("input", {
-          type: "radio",
-          className: "segmented-control__radio-input",
-          id: segment.id,
-          name: name,
-          value: segment.value,
-          checked: selectedValue === segment.value,
-          onChange: () => {
-            setAnimate(true);
-            setSelectedValue(segment.value);
-          }
-        }), /*#__PURE__*/jsx(Body, {
-          className: "segmented-control__text",
-          as: "span",
-          type: selectedValue === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
-          children: segment.label
-        })]
-      }, segment.id) : /*#__PURE__*/jsx("button", {
-        ref: segment.ref,
-        type: "button",
-        role: "tab",
-        id: segment.id,
-        "aria-controls": segment.controls,
-        "aria-selected": selectedValue === segment.value,
-        className: classNames('segmented-control__segment', 'segmented-control__button', {
-          'segmented-control__selected-segment': selectedValue === segment.value
-        }),
-        onClick: () => {
-          setAnimate(true);
-          setSelectedValue(segment.value);
-        },
-        children: /*#__PURE__*/jsx(Body, {
-          as: "span",
-          className: "segmented-control__text",
-          type: selectedValue === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
-          children: segment.label
-        })
-      }, segment.id))
-    })
-  });
-};
-
 const CSS_TRANSITION_DURATION = 400;
 class Snackbar extends Component {
-  /** @type {RefObject<HTMLSpanElement>} */
   bodyRef = /*#__PURE__*/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) {
@@ -11174,7 +11071,7 @@ class Snackbar extends Component {
     const {
       timeout
     } = this.props;
-    this.timeout = setTimeout(() => {
+    this.timeout = window.setTimeout(() => {
       this.setState({
         visible: false
       });
@@ -11197,12 +11094,12 @@ class Snackbar extends 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,
@@ -11227,7 +11124,7 @@ class Snackbar extends Component {
     const {
       action,
       text,
-      theme,
+      theme = Theme.LIGHT,
       visible
     } = this.state;
     const {
@@ -11261,74 +11158,51 @@ class Snackbar extends Component {
   }
 }
 Snackbar.contextType = DirectionContext;
-Snackbar.propTypes = {
-  action: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    onClick: PropTypes.func
-  }),
-  text: PropTypes.node.isRequired,
-  theme: PropTypes.oneOf(['light', 'dark']),
-  timeout: PropTypes.number.isRequired,
-  timestamp: PropTypes.number.isRequired
-};
-Snackbar.defaultProps = {
-  action: null,
-  theme: Theme.LIGHT
-};
 var SnackbarPortal = withNextPortalWrapper(Snackbar);
 
-const SnackbarContext = /*#__PURE__*/createContext();
+const SnackbarContext = /*#__PURE__*/createContext({
+  createSnackbar: () => {}
+});
 const SnackbarConsumer = SnackbarContext.Consumer;
 
-class SnackbarProvider extends Component {
-  constructor() {
-    super();
-    this.state = {
-      text: '',
-      timestamp: 0
-    };
-  }
-  create = ({
+function SnackbarProvider({
+  timeout = 4500,
+  children
+}) {
+  const [state, setState] = 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__*/jsxs(SnackbarContext.Provider, {
-      value: {
-        createSnackbar: this.create
-      },
-      children: [/*#__PURE__*/jsx(SnackbarPortal, {
-        action: action,
-        text: text,
-        timestamp: timestamp,
-        timeout: this.props.timeout,
-        theme: theme
-      }), this.props.children]
-    });
-  }
+    theme,
+    timestamp
+  } = state;
+  return /*#__PURE__*/jsxs(SnackbarContext.Provider, {
+    value: useMemo(() => ({
+      createSnackbar: ({
+        action,
+        text,
+        theme
+      }) => {
+        setState({
+          action,
+          text,
+          theme,
+          timestamp: Date.now()
+        });
+      }
+    }), []),
+    children: [/*#__PURE__*/jsx(SnackbarPortal, {
+      action: action,
+      text: text,
+      timestamp: timestamp,
+      timeout: timeout,
+      theme: theme
+    }), children]
+  });
 }
-SnackbarProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  timeout: PropTypes.number
-};
-SnackbarProvider.defaultProps = {
-  timeout: 4500
-};
-var SnackbarProvider$1 = SnackbarProvider;
 
 const Sticky = ({
   open,
@@ -13930,7 +13804,6 @@ const UploadButton = ({
     if (areAllFilesAllowed) {
       return null; //file input by default allows all files
     }
-
     if (Array.isArray(fileTypes)) {
       return {
         accept: fileTypes.join(',')
@@ -14128,7 +14001,6 @@ const UploadItem = ({
       children: processIndicator
     }); // Scale down ProcessIndicator to be 20px*20px to match `icons`
   };
-
   const getErrorMessage = () => typeof error === 'object' && error.message || error || formatMessage(MESSAGES.uploadingFailed);
   const getDescription = () => {
     if (error || status === Status.FAILED) {
@@ -15544,5 +15416,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
+export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.esm.js.map