@transferwise/components 46.5.0 → 46.6.0

package/build/index.js

@@ -7297,10 +7297,13 @@ 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(symbol => symbol.index === index);
+    patternSymbol = patternWithSymbolsPosition.filter(pattern => pattern.index === index);
     // Add pattern's symbol at n position
     if (patternSymbol.length === 1) {
-      valueArray.splice(index, 0, patternSymbol.pop().symbol);
+      const last = patternSymbol.pop();
+      if (last) {
+        valueArray.splice(index, 0, last.symbol);
+      }
     }
   }
   return valueArray.join('');
@@ -7346,7 +7349,7 @@ const countConsecutiveSymbols = (selectionStart, applicablePattern, direction) =
   return groupSize;
 };
 
-const getCursorPositionAfteractionstroke = (action, selectionStart, selectionEnd, pattern, pastedLength) => {
+const getCursorPositionAfterActionStroke = (action, selectionStart, selectionEnd, pattern, pastedLength) => {
   let cursorPosition = selectionStart;
   switch (action) {
     case 'Backspace':
@@ -7368,36 +7371,36 @@ const getCursorPositionAfteractionstroke = (action, selectionStart, selectionEnd
   }
   return cursorPosition;
 };
-var getCursorPositionAfterKeystroke = getCursorPositionAfteractionstroke;
+var getCursorPositionAfterKeystroke = getCursorPositionAfterActionStroke;
 
 class WithDisplayFormat extends React.Component {
+  static defaultProps = {
+    autoComplete: 'off',
+    displayPattern: '',
+    value: ''
+  };
   constructor(props) {
     super(props);
-    const {
-      value,
-      displayPattern
-    } = props;
-    const unformattedValue = unformatWithPattern$1(value, displayPattern);
+    const unformattedValue = unformatWithPattern$1(props.value ?? '', props.displayPattern);
     this.state = {
-      value: formatWithPattern$1(unformattedValue, displayPattern),
+      value: formatWithPattern$1(unformattedValue, props.displayPattern),
       historyNavigator: new HistoryNavigator$1(),
       prevDisplayPattern: props.displayPattern,
-      triggerType: null,
-      triggerEvent: null
+      triggerType: 'Initial',
+      triggerEvent: null,
+      selectionStart: 0,
+      selectionEnd: 0,
+      pastedLength: 0
     };
   }
-  static getDerivedStateFromProps(nextProps, previousState) {
-    const {
-      displayPattern
-    } = nextProps;
-    const {
-      prevDisplayPattern
-    } = previousState;
-    if (previousState.prevDisplayPattern !== displayPattern) {
-      const {
-        value,
-        historyNavigator
-      } = previousState;
+  static getDerivedStateFromProps({
+    displayPattern
+  }, {
+    prevDisplayPattern = displayPattern,
+    value,
+    historyNavigator
+  }) {
+    if (prevDisplayPattern !== displayPattern) {
       const unFormattedValue = unformatWithPattern$1(value, prevDisplayPattern);
       historyNavigator.reset();
       return {
@@ -7419,29 +7422,31 @@ class WithDisplayFormat extends React.Component {
     const {
       displayPattern
     } = this.props;
-    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) {
+    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) {
         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({
-      triggerType: null,
+      triggerType: 'Initial',
       triggerEvent: null,
       pastedLength: 0
     });
@@ -7458,14 +7463,13 @@ class WithDisplayFormat extends React.Component {
     const {
       selectionStart,
       selectionEnd
-    } = event.target;
+    } = event.currentTarget;
     const {
       historyNavigator
     } = this.state;
     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') {
@@ -7484,8 +7488,8 @@ class WithDisplayFormat extends React.Component {
       this.setState({
         triggerEvent: event,
         triggerType: 'KeyDown',
-        selectionStart,
-        selectionEnd
+        selectionStart: selectionStart ?? 0,
+        selectionEnd: selectionEnd ?? 0
       });
     }
   };
@@ -7514,7 +7518,6 @@ class WithDisplayFormat extends React.Component {
   handleOnChange = event => {
     const {
       historyNavigator,
-      triggerEvent,
       triggerType
     } = this.state;
     const {
@@ -7525,9 +7528,7 @@ class WithDisplayFormat extends React.Component {
       value
     } = event.target;
     let unformattedValue = unformatWithPattern$1(value, displayPattern);
-    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);
+    const action = this.getUserAction(unformattedValue);
     if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {
       return;
     }
@@ -7537,19 +7538,18 @@ class WithDisplayFormat extends React.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(), onChange(broadcastValue));
+    }, () => {
+      this.resetEvent();
+      if (onChange) {
+        const broadcastValue = unformatWithPattern$1(newFormattedValue, displayPattern);
+        onChange(broadcastValue);
+      }
+    });
   };
   handleOnBlur = event => {
-    const {
-      displayPattern,
-      onBlur
-    } = this.props;
-    if (onBlur) {
-      onBlur(unformatWithPattern$1(event.target.value, displayPattern));
-    }
+    this.props.onBlur?.(unformatWithPattern$1(event.target.value, this.props.displayPattern));
   };
   handleOnFocus = event => {
     const {
@@ -7598,7 +7598,7 @@ class WithDisplayFormat extends React.Component {
     const cursorPosition = getCursorPositionAfterKeystroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
     setTimeout(() => {
       if (triggerEvent) {
-        triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
+        triggerEvent.currentTarget.setSelectionRange(cursorPosition, cursorPosition);
       }
       this.setState({
         selectionStart: cursorPosition,
@@ -7608,7 +7608,6 @@ class WithDisplayFormat extends React.Component {
   };
   render() {
     const {
-      type,
       inputMode,
       className,
       id,
@@ -7625,7 +7624,6 @@ class WithDisplayFormat extends React.Component {
       value
     } = this.state;
     const renderProps = {
-      type,
       inputMode,
       className,
       id,
@@ -7648,62 +7646,13 @@ class WithDisplayFormat extends React.Component {
     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__default.default.oneOf(['on', 'off', 'disabled']),
-  className: PropTypes__default.default.string,
-  disabled: PropTypes__default.default.bool,
-  id: PropTypes__default.default.string,
-  maxLength: PropTypes__default.default.number,
-  minLength: PropTypes__default.default.number,
-  name: PropTypes__default.default.string,
-  onFocus: PropTypes__default.default.func,
-  onBlur: PropTypes__default.default.func,
-  onChange: PropTypes__default.default.func.isRequired,
-  placeholder: PropTypes__default.default.string,
-  readOnly: PropTypes__default.default.bool,
-  render: PropTypes__default.default.func.isRequired,
-  required: PropTypes__default.default.bool,
-  displayPattern: PropTypes__default.default.string,
-  type: PropTypes__default.default.string,
-  inputMode: PropTypes__default.default.string,
-  value: PropTypes__default.default.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__*/jsxRuntime.jsx(WithDisplayFormat$1, {
+const InputWithDisplayFormat = props => /*#__PURE__*/jsxRuntime.jsx(WithDisplayFormat, {
   ...props,
-  render: renderProps => /*#__PURE__*/jsxRuntime.jsx("input", {
+  render: renderProps => /*#__PURE__*/jsxRuntime.jsx(Input, {
     ...renderProps
   })
 });
-InputWithDisplayFormat.propTypes = {
-  displayPattern: PropTypes__default.default.string.isRequired,
-  onChange: PropTypes__default.default.func.isRequired
-};
-var InputWithDisplayFormat$1 = InputWithDisplayFormat;
 
 const InstructionsList = ({
   dos,
@@ -12380,17 +12329,12 @@ Tabs.defaultProps = {
 };
 var Tabs$1 = Tabs;
 
-const TextareaWithDisplayFormat = props => /*#__PURE__*/jsxRuntime.jsx(WithDisplayFormat$1, {
+const TextareaWithDisplayFormat = props => /*#__PURE__*/jsxRuntime.jsx(WithDisplayFormat, {
   ...props,
-  render: renderProps => /*#__PURE__*/jsxRuntime.jsx("textarea", {
+  render: renderProps => /*#__PURE__*/jsxRuntime.jsx(TextArea, {
     ...renderProps
   })
 });
-TextareaWithDisplayFormat.propTypes = {
-  displayPattern: PropTypes__default.default.string.isRequired,
-  onChange: PropTypes__default.default.func.isRequired
-};
-var TextareaWithDisplayFormat$1 = TextareaWithDisplayFormat;
 
 /* eslint-disable jsx-a11y/no-autofocus */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
@@ -15392,16 +15336,16 @@ var th = {
 	"neptune.DateInput.year.label": "ปี",
 	"neptune.DateInput.year.placeholder": "YYYY",
 	"neptune.DateLookup.day": "วัน",
-	"neptune.DateLookup.goTo20YearView": "Go to 20 year view",
+	"neptune.DateLookup.goTo20YearView": "ไปที่มุมมอง 20 ปี",
 	"neptune.DateLookup.month": "เดือน",
 	"neptune.DateLookup.next": "ถัดไป",
 	"neptune.DateLookup.previous": "ก่อนหน้า",
 	"neptune.DateLookup.selected": "เลือกแล้ว",
 	"neptune.DateLookup.twentyYears": "20 ปี",
 	"neptune.DateLookup.year": "ปี",
-	"neptune.FlowNavigation.back": "back to previous step",
+	"neptune.FlowNavigation.back": "กลับไปที่ขั้นก่อนหน้า",
 	"neptune.Info.ariaLabel": "ข้อมูลเพิ่มเติม",
-	"neptune.Link.opensInNewTab": "(opens in new tab)",
+	"neptune.Link.opensInNewTab": "(เปิดในแท็บใหม่)",
 	"neptune.MoneyInput.Select.placeholder": "เลือกตัวเลือก...",
 	"neptune.Select.searchPlaceholder": "ค้นหา...",
 	"neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",
@@ -15727,7 +15671,7 @@ exports.Info = Info;
 exports.InlineAlert = InlineAlert;
 exports.Input = Input;
 exports.InputGroup = InputGroup;
-exports.InputWithDisplayFormat = InputWithDisplayFormat$1;
+exports.InputWithDisplayFormat = InputWithDisplayFormat;
 exports.InstructionsList = InstructionsList$1;
 exports.LanguageProvider = LanguageProvider;
 exports.Link = Link;
@@ -15775,7 +15719,7 @@ exports.Switch = Switch;
 exports.SwitchOption = SwitchOption;
 exports.Tabs = Tabs$1;
 exports.TextArea = TextArea;
-exports.TextareaWithDisplayFormat = TextareaWithDisplayFormat$1;
+exports.TextareaWithDisplayFormat = TextareaWithDisplayFormat;
 exports.Title = Title;
 exports.Tooltip = Tooltip$1;
 exports.Typeahead = Typeahead;