@transferwise/components 46.8.0 → 46.10.0

package/build/index.esm.js

@@ -333,15 +333,6 @@ var FileType;
   FileType["CSV"] = ".csv,text/csv";
 })(FileType || (FileType = {}));
 
-const Key = {
-  ENTER: 'Enter',
-  ESCAPE: 'Escape',
-  SPACE: [' ', 'Spacebar'],
-  TAB: 'Tab',
-  PERIOD: '.',
-  COMMA: ','
-};
-
 const DEFAULT_LANG = 'en';
 const DEFAULT_LOCALE = 'en-GB';
 /**
@@ -2578,7 +2569,7 @@ const CheckboxOption = /*#__PURE__*/forwardRef(({
     button: /*#__PURE__*/jsx(CheckboxButton$1, {
       checked: checked,
       disabled: disabled,
-      onChange: () => onChange(!checked)
+      onChange: () => onChange?.(!checked)
     })
   });
 });
@@ -3134,26 +3125,6 @@ DateInput.defaultProps = {
 };
 var DateInput$1 = DateInput;
 
-/**
- * TODO: mention what to use instead or consider to delete this object
- *
- * @deprecated
- */
-var KeyCodes = {
-  DOWN: 40,
-  UP: 38,
-  LEFT: 37,
-  RIGHT: 39,
-  ENTER: 13,
-  ESCAPE: 27,
-  TAB: 9,
-  SPACE: 32,
-  BACKSPACE: 8,
-  DELETE: 46,
-  COMMA: 188,
-  PERIOD: 190
-};
-
 const POPOVER_OFFSET = [0, 16];
 // By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
 // the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
@@ -4175,8 +4146,8 @@ class DateLookup extends PureComponent {
       open,
       originalDate
     } = this.state;
-    switch (event.keyCode) {
-      case KeyCodes.LEFT:
+    switch (event.key) {
+      case 'ArrowLeft':
         if (open) {
           this.adjustDate(-1, -1, -1);
         } else {
@@ -4184,7 +4155,7 @@ class DateLookup extends PureComponent {
         }
         event.preventDefault();
         break;
-      case KeyCodes.UP:
+      case 'ArrowUp':
         if (open) {
           this.adjustDate(-7, -4, -4);
         } else {
@@ -4192,7 +4163,7 @@ class DateLookup extends PureComponent {
         }
         event.preventDefault();
         break;
-      case KeyCodes.RIGHT:
+      case 'ArrowRight':
         if (open) {
           this.adjustDate(1, 1, 1);
         } else {
@@ -4200,7 +4171,7 @@ class DateLookup extends PureComponent {
         }
         event.preventDefault();
         break;
-      case KeyCodes.DOWN:
+      case 'ArrowDown':
         if (open) {
           this.adjustDate(7, 4, 4);
         } else {
@@ -4208,7 +4179,7 @@ class DateLookup extends PureComponent {
         }
         event.preventDefault();
         break;
-      case KeyCodes.ESCAPE:
+      case 'Escape':
         if (originalDate !== null) {
           this.props.onChange(originalDate);
         }
@@ -4531,7 +4502,7 @@ const Tile = ({
     onKeyDown: disabled ? null : ({
       key
     }) => {
-      if (key === Key.ENTER || Key.SPACE.includes(key)) {
+      if (key === 'Enter' || key === ' ') {
         onClick();
       }
     },
@@ -6762,6 +6733,7 @@ function SelectInputClearButton({
 }
 const noop = () => {};
 function SelectInput({
+  id,
   name,
   multiple,
   placeholder,
@@ -6827,6 +6799,7 @@ function SelectInput({
           // eslint-disable-next-line react/jsx-no-constructed-context-values
           value: {
             ref: mergeRefs([ref, triggerRef]),
+            id,
             ...mergeProps({
               onClick: () => {
                 setOpen(prev => !prev);
@@ -7775,8 +7748,7 @@ const parseNumber = ({
   }
   return Number(amount);
 };
-const inputKeyCodeAllowlist = new Set([KeyCodes.BACKSPACE, KeyCodes.DELETE, KeyCodes.COMMA, KeyCodes.PERIOD, KeyCodes.DOWN, KeyCodes.UP, KeyCodes.LEFT, KeyCodes.RIGHT, KeyCodes.ENTER, KeyCodes.ESCAPE, KeyCodes.TAB]);
-const inputKeyAllowlist = new Set([Key.PERIOD, Key.COMMA]);
+const allowedInputKeys = new Set(['Backspace', 'Delete', ',', '.', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Enter', 'Escape', 'Tab']);
 class MoneyInput extends Component {
   static defaultProps = {
     size: Size.LARGE,
@@ -7814,13 +7786,12 @@ class MoneyInput extends Component {
   }
   isInputAllowedForKeyEvent = event => {
     const {
-      keyCode,
       metaKey,
       key,
       ctrlKey
     } = event;
     const isNumberKey = isNumber(parseInt(key, 10));
-    return isNumberKey || metaKey || ctrlKey || inputKeyCodeAllowlist.has(keyCode) || inputKeyAllowlist.has(key);
+    return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);
   };
   handleKeyDown = event => {
     if (!this.isInputAllowedForKeyEvent(event)) {
@@ -10660,17 +10631,17 @@ function Select({
     }
   };
   const handleKeyDown = event => {
-    switch (event.keyCode) {
-      case KeyCodes.UP:
-      case KeyCodes.DOWN:
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
         if (open) {
-          moveFocusWithDifference(event.keyCode === KeyCodes.UP ? -1 : 1);
+          moveFocusWithDifference(event.key === 'ArrowUp' ? -1 : 1);
         } else {
           setOpen(true);
         }
         stopPropagation$1(event);
         break;
-      case KeyCodes.SPACE:
+      case ' ':
         if (event.target !== searchBoxReference.current) {
           if (open) {
             selectKeyboardFocusedOption();
@@ -10680,7 +10651,7 @@ function Select({
           stopPropagation$1(event);
         }
         break;
-      case KeyCodes.ENTER:
+      case 'Enter':
         if (open) {
           selectKeyboardFocusedOption();
         } else {
@@ -10688,11 +10659,11 @@ function Select({
         }
         stopPropagation$1(event);
         break;
-      case KeyCodes.ESCAPE:
+      case 'Escape':
         handleCloseOptions();
         stopPropagation$1(event);
         break;
-      case KeyCodes.TAB:
+      case 'Tab':
         if (open) {
           selectKeyboardFocusedOption();
         }
@@ -11147,18 +11118,19 @@ const SegmentedControl = ({
 
 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) {
@@ -11173,7 +11145,7 @@ class Snackbar extends Component {
     const {
       timeout
     } = this.props;
-    this.timeout = setTimeout(() => {
+    this.timeout = window.setTimeout(() => {
       this.setState({
         visible: false
       });
@@ -11196,12 +11168,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,
@@ -11226,7 +11198,7 @@ class Snackbar extends Component {
     const {
       action,
       text,
-      theme,
+      theme = Theme.LIGHT,
       visible
     } = this.state;
     const {
@@ -11260,74 +11232,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,
@@ -11473,7 +11422,7 @@ const Switch = props => {
     disabled
   } = props;
   const handleKeyDown = event => {
-    if (event.code === '32' || event.keyCode === KeyCodes.SPACE) {
+    if (event.key === ' ') {
       event.preventDefault();
       onClick();
     }
@@ -11970,7 +11919,7 @@ class Tabs extends Component {
     this.switchTab(index);
   };
   onKeyDown = index => event => {
-    if (event && event.keyCode === KeyCodes.ENTER) {
+    if (event && event.key === 'Enter') {
       this.switchTab(index);
     }
   };
@@ -12572,16 +12521,16 @@ class Typeahead extends Component {
         label: query
       });
     } else {
-      switch (event.keyCode) {
-        case KeyCodes.DOWN:
+      switch (event.key) {
+        case 'ArrowDown':
           event.preventDefault();
           this.moveFocusedOption(1);
           break;
-        case KeyCodes.UP:
+        case 'ArrowUp':
           event.preventDefault();
           this.moveFocusedOption(-1);
           break;
-        case KeyCodes.ENTER:
+        case 'Enter':
           event.preventDefault();
           if (options[keyboardFocusedOptionIndex]) {
             this.selectItem(options[keyboardFocusedOptionIndex]);
@@ -12591,7 +12540,7 @@ class Typeahead extends Component {
             });
           }
           break;
-        case KeyCodes.BACKSPACE:
+        case 'Backspace':
           if (multiple && !query && selected.length > 0) {
             this.updateSelectedValue(selected.slice(0, -1));
           }
@@ -15541,5 +15490,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, SegmentedControl, 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