@transferwise/components 0.0.0-experimental-adcaf57 → 0.0.0-experimental-2118ad7

package/build/index.esm.js

@@ -7263,13 +7263,10 @@ const formatWithPattern = (value, pattern) => {
   let patternSymbol = [];
   // valueArray.length increments during the cycle cause we are adding new elements.
   for (let index = 0; index < valueArray.length; index += 1) {
-    patternSymbol = patternWithSymbolsPosition.filter(pattern => pattern.index === index);
+    patternSymbol = patternWithSymbolsPosition.filter(symbol => symbol.index === index);
     // Add pattern's symbol at n position
     if (patternSymbol.length === 1) {
-      const last = patternSymbol.pop();
-      if (last) {
-        valueArray.splice(index, 0, last.symbol);
-      }
+      valueArray.splice(index, 0, patternSymbol.pop().symbol);
     }
   }
   return valueArray.join('');
@@ -7340,31 +7337,33 @@ const getCursorPositionAfteractionstroke = (action, selectionStart, selectionEnd
 var getCursorPositionAfterKeystroke = getCursorPositionAfteractionstroke;
 
 class WithDisplayFormat extends Component {
-  static defaultProps = {
-    autoComplete: 'off',
-    displayPattern: '',
-    type: 'text',
-    value: ''
-  };
   constructor(props) {
     super(props);
-    const unformattedValue = unformatWithPattern$1(props.value, props.displayPattern);
+    const {
+      value,
+      displayPattern
+    } = props;
+    const unformattedValue = unformatWithPattern$1(value, displayPattern);
     this.state = {
-      value: formatWithPattern$1(unformattedValue, props.displayPattern),
+      value: formatWithPattern$1(unformattedValue, displayPattern),
       historyNavigator: new HistoryNavigator$1(),
       prevDisplayPattern: props.displayPattern,
       triggerType: null,
       triggerEvent: null
     };
   }
-  static getDerivedStateFromProps({
-    displayPattern
-  }, {
-    prevDisplayPattern = displayPattern,
-    value,
-    historyNavigator
-  }) {
-    if (prevDisplayPattern !== displayPattern) {
+  static getDerivedStateFromProps(nextProps, previousState) {
+    const {
+      displayPattern
+    } = nextProps;
+    const {
+      prevDisplayPattern
+    } = previousState;
+    if (previousState.prevDisplayPattern !== displayPattern) {
+      const {
+        value,
+        historyNavigator
+      } = previousState;
       const unFormattedValue = unformatWithPattern$1(value, prevDisplayPattern);
       historyNavigator.reset();
       return {
@@ -7386,27 +7385,25 @@ class WithDisplayFormat extends Component {
     const {
       displayPattern
     } = this.props;
-    if (triggerEvent) {
-      const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();
-      if (triggerType === 'Paste' || triggerType === 'Cut') {
-        return triggerType;
-      }
-      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {
-        return triggerEvent.shiftKey ? 'Redo' : 'Undo';
-      }
-      // Detect mouse event redo
-      if (triggerEvent.ctrlKey && charCode === 'd') {
-        return 'Delete';
-      }
-      // Android Fix.
-      if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern$1(value, displayPattern).length) {
+    const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();
+    if (triggerType === 'Paste' || triggerType === 'Cut') {
+      return triggerType;
+    }
+    if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {
+      return triggerEvent.shiftKey ? 'Redo' : 'Undo';
+    }
+    // Detect mouse event redo
+    if (triggerEvent.ctrlKey && charCode === 'd') {
+      return 'Delete';
+    }
+
+    // Android Fix.
+    if (typeof triggerEvent.key === 'undefined') {
+      if (unformattedValue.length <= unformatWithPattern$1(value, displayPattern).length) {
         return 'Backspace';
       }
-      return triggerEvent.key;
-    } else {
-      // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
-      return 'Paste';
     }
+    return triggerEvent.key;
   };
   resetEvent = () => {
     this.setState({
@@ -7434,6 +7431,7 @@ class WithDisplayFormat extends Component {
     const {
       displayPattern
     } = this.props;
+
     // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.
     let newFormattedValue = '';
     if (this.detectUndoRedo(event) === 'Undo') {
@@ -7482,6 +7480,7 @@ class WithDisplayFormat extends Component {
   handleOnChange = event => {
     const {
       historyNavigator,
+      triggerEvent,
       triggerType
     } = this.state;
     const {
@@ -7492,7 +7491,9 @@ class WithDisplayFormat extends Component {
       value
     } = event.target;
     let unformattedValue = unformatWithPattern$1(value, displayPattern);
-    const action = this.getUserAction(unformattedValue);
+    const action = triggerEvent === null ?
+    // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
+    'Paste' : this.getUserAction(unformattedValue);
     if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {
       return;
     }
@@ -7502,18 +7503,19 @@ class WithDisplayFormat extends Component {
     const newFormattedValue = formatWithPattern$1(unformattedValue, displayPattern);
     historyNavigator.add(unformattedValue);
     this.handleCursorPositioning(action);
+    const broadcastValue = unformatWithPattern$1(newFormattedValue, displayPattern);
     this.setState({
       value: newFormattedValue
-    }, () => {
-      this.resetEvent();
-      if (onChange) {
-        const broadcastValue = unformatWithPattern$1(newFormattedValue, displayPattern);
-        onChange(broadcastValue);
-      }
-    });
+    }, this.resetEvent(), onChange(broadcastValue));
   };
   handleOnBlur = event => {
-    this.props.onBlur?.(unformatWithPattern$1(event.target.value, this.props.displayPattern));
+    const {
+      displayPattern,
+      onBlur
+    } = this.props;
+    if (onBlur) {
+      onBlur(unformatWithPattern$1(event.target.value, displayPattern));
+    }
   };
   handleOnFocus = event => {
     const {
@@ -7571,36 +7573,103 @@ class WithDisplayFormat extends Component {
     }, 0);
   };
   render() {
-    return this.props.render({
-      value: this.state.value,
-      type: this.props.type,
-      inputMode: this.props.inputMode,
-      className: this.props.className,
-      id: this.props.id,
-      name: this.props.name,
-      placeholder: this.props.placeholder,
-      readOnly: this.props.readOnly,
-      required: this.props.required,
-      minLength: this.props.minLength,
-      maxLength: this.props.maxLength,
-      disabled: this.props.disabled,
-      autoComplete: this.props.autoComplete,
+    const {
+      type,
+      inputMode,
+      className,
+      id,
+      name,
+      placeholder,
+      readOnly,
+      required,
+      minLength,
+      maxLength,
+      disabled,
+      autoComplete
+    } = this.props;
+    const {
+      value
+    } = this.state;
+    const renderProps = {
+      type,
+      inputMode,
+      className,
+      id,
+      name,
+      placeholder,
+      readOnly,
+      required,
+      minLength,
+      maxLength,
+      disabled,
+      autoComplete,
+      value,
       onFocus: this.handleOnFocus,
       onBlur: this.handleOnBlur,
       onPaste: this.handleOnPaste,
       onKeyDown: this.handleOnKeyDown,
       onChange: this.handleOnChange,
       onCut: this.handleOnCut
-    });
+    };
+    return this.props.render(renderProps);
   }
 }
+WithDisplayFormat.propTypes = {
+  /**
+   * autocomplete hides our form help so we need to disable it when help text
+   * is present. Chrome ignores autocomplete=off, the only way to disable it is
+   * to provide an 'invalid' value, for which 'disabled' serves.
+   */
+  autoComplete: PropTypes.oneOf(['on', 'off', 'disabled']),
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  maxLength: PropTypes.number,
+  minLength: PropTypes.number,
+  name: PropTypes.string,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  readOnly: PropTypes.bool,
+  render: PropTypes.func.isRequired,
+  required: PropTypes.bool,
+  displayPattern: PropTypes.string,
+  type: PropTypes.string,
+  inputMode: PropTypes.string,
+  value: PropTypes.string
+};
+WithDisplayFormat.defaultProps = {
+  autoComplete: 'off',
+  className: null,
+  disabled: false,
+  id: null,
+  maxLength: null,
+  minLength: null,
+  name: null,
+  placeholder: null,
+  readOnly: false,
+  required: false,
+  displayPattern: '',
+  type: 'text',
+  inputMode: null,
+  value: '',
+  onFocus: null,
+  onBlur: null
+};
+var WithDisplayFormat$1 = WithDisplayFormat;
 
-const InputWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat, {
+const InputWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat$1, {
   ...props,
-  render: renderProps => /*#__PURE__*/jsx(Input, {
+  render: renderProps => /*#__PURE__*/jsx("input", {
     ...renderProps
   })
 });
+InputWithDisplayFormat.propTypes = {
+  displayPattern: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+};
+var InputWithDisplayFormat$1 = InputWithDisplayFormat;
 
 const InstructionsList = ({
   dos,
@@ -12277,12 +12346,17 @@ Tabs.defaultProps = {
 };
 var Tabs$1 = Tabs;
 
-const TextareaWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat, {
+const TextareaWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat$1, {
   ...props,
-  render: renderProps => /*#__PURE__*/jsx(TextArea, {
+  render: renderProps => /*#__PURE__*/jsx("textarea", {
     ...renderProps
   })
 });
+TextareaWithDisplayFormat.propTypes = {
+  displayPattern: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+};
+var TextareaWithDisplayFormat$1 = TextareaWithDisplayFormat;
 
 /* eslint-disable jsx-a11y/no-autofocus */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
@@ -15579,5 +15653,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$1 as 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$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$1 as 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$1 as 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$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat$1 as 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