@transferwise/components 0.0.0-experimental-5e97fd1 → 0.0.0-experimental-3d0a13d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/build/index.esm.js +252 -184
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +253 -185
  4. package/build/index.js.map +1 -1
  5. package/build/types/common/textFormat/formatWithPattern/formatWithPattern.d.ts +1 -1
  6. package/build/types/common/textFormat/formatWithPattern/formatWithPattern.d.ts.map +1 -1
  7. package/build/types/common/textFormat/getCursorPositionAfterKeystroke/getCursorPositionAfterKeystroke.d.ts +1 -2
  8. package/build/types/common/textFormat/getCursorPositionAfterKeystroke/getCursorPositionAfterKeystroke.d.ts.map +1 -1
  9. package/build/types/common/textFormat/getSymbolsInPatternWithPosition/getSymbolsInPatternWithPosition.d.ts +1 -5
  10. package/build/types/common/textFormat/getSymbolsInPatternWithPosition/getSymbolsInPatternWithPosition.d.ts.map +1 -1
  11. package/build/types/common/textFormat/unformatWithPattern/unformatWithPattern.d.ts +1 -1
  12. package/build/types/common/textFormat/unformatWithPattern/unformatWithPattern.d.ts.map +1 -1
  13. package/build/types/index.d.ts +1 -0
  14. package/build/types/index.d.ts.map +1 -1
  15. package/build/types/inputWithDisplayFormat/InputWithDisplayFormat.d.ts +11 -5
  16. package/build/types/inputWithDisplayFormat/InputWithDisplayFormat.d.ts.map +1 -1
  17. package/build/types/inputWithDisplayFormat/index.d.ts +1 -1
  18. package/build/types/inputWithDisplayFormat/index.d.ts.map +1 -1
  19. package/build/types/inputs/Input.d.ts +6 -8
  20. package/build/types/inputs/Input.d.ts.map +1 -1
  21. package/build/types/inputs/SelectInput.d.ts +2 -2
  22. package/build/types/inputs/SelectInput.d.ts.map +1 -1
  23. package/build/types/moneyInput/MoneyInput.d.ts +45 -31
  24. package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
  25. package/build/types/moneyInput/MoneyInput.messages.d.ts +6 -6
  26. package/build/types/moneyInput/MoneyInput.messages.d.ts.map +1 -1
  27. package/build/types/moneyInput/currencyFormatting.d.ts +2 -2
  28. package/build/types/moneyInput/currencyFormatting.d.ts.map +1 -1
  29. package/build/types/moneyInput/index.d.ts +2 -1
  30. package/build/types/moneyInput/index.d.ts.map +1 -1
  31. package/build/types/textareaWithDisplayFormat/TextareaWithDisplayFormat.d.ts +11 -5
  32. package/build/types/textareaWithDisplayFormat/TextareaWithDisplayFormat.d.ts.map +1 -1
  33. package/build/types/textareaWithDisplayFormat/index.d.ts +1 -1
  34. package/build/types/textareaWithDisplayFormat/index.d.ts.map +1 -1
  35. package/build/types/withDisplayFormat/WithDisplayFormat.d.ts +82 -54
  36. package/build/types/withDisplayFormat/WithDisplayFormat.d.ts.map +1 -1
  37. package/build/types/withDisplayFormat/index.d.ts +1 -2
  38. package/build/types/withDisplayFormat/index.d.ts.map +1 -1
  39. package/package.json +1 -1
  40. package/src/common/textFormat/formatWithPattern/{formatWithPattern.ts → formatWithPattern.js} +4 -8
  41. package/src/common/textFormat/getCursorPositionAfterKeystroke/{getCursorPositionAfterKeystroke.ts → getCursorPositionAfterKeystroke.js} +6 -7
  42. package/src/common/textFormat/getSymbolsInPatternWithPosition/{getSymbolsInPatternWithPosition.ts → getSymbolsInPatternWithPosition.js} +2 -7
  43. package/src/common/textFormat/unformatWithPattern/{unformatWithPattern.ts → unformatWithPattern.js} +2 -3
  44. package/src/index.ts +6 -0
  45. package/src/inputWithDisplayFormat/InputWithDisplayFormat.js +14 -0
  46. package/src/inputs/Input.tsx +11 -6
  47. package/src/inputs/SelectInput.tsx +2 -2
  48. package/src/moneyInput/{MoneyInput.rtl.spec.js → MoneyInput.rtl.spec.tsx} +4 -4
  49. package/src/moneyInput/MoneyInput.spec.js +109 -49
  50. package/src/moneyInput/MoneyInput.story.tsx +6 -14
  51. package/src/moneyInput/{MoneyInput.js → MoneyInput.tsx} +189 -173
  52. package/src/moneyInput/{currencyFormatting.spec.js → currencyFormatting.spec.ts} +2 -2
  53. package/src/moneyInput/{currencyFormatting.js → currencyFormatting.ts} +7 -10
  54. package/src/moneyInput/index.ts +7 -0
  55. package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.js +14 -0
  56. package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.spec.js +15 -0
  57. package/src/withDisplayFormat/{WithDisplayFormat.tsx → WithDisplayFormat.js} +135 -122
  58. package/src/withDisplayFormat/index.js +1 -0
  59. package/src/inputWithDisplayFormat/InputWithDisplayFormat.tsx +0 -11
  60. package/src/moneyInput/index.js +0 -1
  61. package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx +0 -30
  62. package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.tsx +0 -11
  63. package/src/withDisplayFormat/index.ts +0 -2
  64. /package/src/inputWithDisplayFormat/{index.ts → index.js} +0 -0
  65. /package/src/moneyInput/{MoneyInput.messages.js → MoneyInput.messages.ts} +0 -0
  66. /package/src/textareaWithDisplayFormat/{index.ts → index.js} +0 -0
@@ -1523,7 +1523,7 @@ class DimmerManager {
1523
1523
  /**
1524
1524
  * Dimmer refs
1525
1525
  */
1526
-
1526
+ dimmers;
1527
1527
  constructor() {
1528
1528
  this.dimmers = [];
1529
1529
  }
@@ -5399,6 +5399,7 @@ var DynamicFieldDefinitionList$1 = DynamicFieldDefinitionList;
5399
5399
  const ESCAPED_OPENING_CHEVRON = '<';
5400
5400
  const ESCAPED_CLOSING_CHEVRON = '>';
5401
5401
  class EmphasisHtmlTransformer {
5402
+ tags;
5402
5403
  constructor(whitelistedTags) {
5403
5404
  this.tags = (whitelistedTags || []).map(tag => {
5404
5405
  return {
@@ -7262,13 +7263,10 @@ const formatWithPattern = (value, pattern) => {
7262
7263
  let patternSymbol = [];
7263
7264
  // valueArray.length increments during the cycle cause we are adding new elements.
7264
7265
  for (let index = 0; index < valueArray.length; index += 1) {
7265
- patternSymbol = patternWithSymbolsPosition.filter(pattern => pattern.index === index);
7266
+ patternSymbol = patternWithSymbolsPosition.filter(symbol => symbol.index === index);
7266
7267
  // Add pattern's symbol at n position
7267
7268
  if (patternSymbol.length === 1) {
7268
- const last = patternSymbol.pop();
7269
- if (last) {
7270
- valueArray.splice(index, 0, last.symbol);
7271
- }
7269
+ valueArray.splice(index, 0, patternSymbol.pop().symbol);
7272
7270
  }
7273
7271
  }
7274
7272
  return valueArray.join('');
@@ -7339,31 +7337,33 @@ const getCursorPositionAfteractionstroke = (action, selectionStart, selectionEnd
7339
7337
  var getCursorPositionAfterKeystroke = getCursorPositionAfteractionstroke;
7340
7338
 
7341
7339
  class WithDisplayFormat extends Component {
7342
- static defaultProps = {
7343
- autoComplete: 'off',
7344
- displayPattern: '',
7345
- type: 'text',
7346
- value: ''
7347
- };
7348
7340
  constructor(props) {
7349
7341
  super(props);
7350
- const unformattedValue = unformatWithPattern$1(props.value, props.displayPattern);
7342
+ const {
7343
+ value,
7344
+ displayPattern
7345
+ } = props;
7346
+ const unformattedValue = unformatWithPattern$1(value, displayPattern);
7351
7347
  this.state = {
7352
- value: formatWithPattern$1(unformattedValue, props.displayPattern),
7348
+ value: formatWithPattern$1(unformattedValue, displayPattern),
7353
7349
  historyNavigator: new HistoryNavigator$1(),
7354
7350
  prevDisplayPattern: props.displayPattern,
7355
7351
  triggerType: null,
7356
7352
  triggerEvent: null
7357
7353
  };
7358
7354
  }
7359
- static getDerivedStateFromProps({
7360
- displayPattern
7361
- }, {
7362
- prevDisplayPattern = displayPattern,
7363
- value,
7364
- historyNavigator
7365
- }) {
7366
- if (prevDisplayPattern !== displayPattern) {
7355
+ static getDerivedStateFromProps(nextProps, previousState) {
7356
+ const {
7357
+ displayPattern
7358
+ } = nextProps;
7359
+ const {
7360
+ prevDisplayPattern
7361
+ } = previousState;
7362
+ if (previousState.prevDisplayPattern !== displayPattern) {
7363
+ const {
7364
+ value,
7365
+ historyNavigator
7366
+ } = previousState;
7367
7367
  const unFormattedValue = unformatWithPattern$1(value, prevDisplayPattern);
7368
7368
  historyNavigator.reset();
7369
7369
  return {
@@ -7385,27 +7385,25 @@ class WithDisplayFormat extends Component {
7385
7385
  const {
7386
7386
  displayPattern
7387
7387
  } = this.props;
7388
- if (triggerEvent) {
7389
- const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();
7390
- if (triggerType === 'Paste' || triggerType === 'Cut') {
7391
- return triggerType;
7392
- }
7393
- if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {
7394
- return triggerEvent.shiftKey ? 'Redo' : 'Undo';
7395
- }
7396
- // Detect mouse event redo
7397
- if (triggerEvent.ctrlKey && charCode === 'd') {
7398
- return 'Delete';
7399
- }
7400
- // Android Fix.
7401
- if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern$1(value, displayPattern).length) {
7388
+ const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();
7389
+ if (triggerType === 'Paste' || triggerType === 'Cut') {
7390
+ return triggerType;
7391
+ }
7392
+ if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {
7393
+ return triggerEvent.shiftKey ? 'Redo' : 'Undo';
7394
+ }
7395
+ // Detect mouse event redo
7396
+ if (triggerEvent.ctrlKey && charCode === 'd') {
7397
+ return 'Delete';
7398
+ }
7399
+
7400
+ // Android Fix.
7401
+ if (typeof triggerEvent.key === 'undefined') {
7402
+ if (unformattedValue.length <= unformatWithPattern$1(value, displayPattern).length) {
7402
7403
  return 'Backspace';
7403
7404
  }
7404
- return triggerEvent.key;
7405
- } else {
7406
- // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
7407
- return 'Paste';
7408
7405
  }
7406
+ return triggerEvent.key;
7409
7407
  };
7410
7408
  resetEvent = () => {
7411
7409
  this.setState({
@@ -7433,6 +7431,7 @@ class WithDisplayFormat extends Component {
7433
7431
  const {
7434
7432
  displayPattern
7435
7433
  } = this.props;
7434
+
7436
7435
  // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.
7437
7436
  let newFormattedValue = '';
7438
7437
  if (this.detectUndoRedo(event) === 'Undo') {
@@ -7481,6 +7480,7 @@ class WithDisplayFormat extends Component {
7481
7480
  handleOnChange = event => {
7482
7481
  const {
7483
7482
  historyNavigator,
7483
+ triggerEvent,
7484
7484
  triggerType
7485
7485
  } = this.state;
7486
7486
  const {
@@ -7491,7 +7491,9 @@ class WithDisplayFormat extends Component {
7491
7491
  value
7492
7492
  } = event.target;
7493
7493
  let unformattedValue = unformatWithPattern$1(value, displayPattern);
7494
- const action = this.getUserAction(unformattedValue);
7494
+ const action = triggerEvent === null ?
7495
+ // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
7496
+ 'Paste' : this.getUserAction(unformattedValue);
7495
7497
  if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {
7496
7498
  return;
7497
7499
  }
@@ -7501,18 +7503,19 @@ class WithDisplayFormat extends Component {
7501
7503
  const newFormattedValue = formatWithPattern$1(unformattedValue, displayPattern);
7502
7504
  historyNavigator.add(unformattedValue);
7503
7505
  this.handleCursorPositioning(action);
7506
+ const broadcastValue = unformatWithPattern$1(newFormattedValue, displayPattern);
7504
7507
  this.setState({
7505
7508
  value: newFormattedValue
7506
- }, () => {
7507
- this.resetEvent();
7508
- if (onChange) {
7509
- const broadcastValue = unformatWithPattern$1(newFormattedValue, displayPattern);
7510
- onChange(broadcastValue);
7511
- }
7512
- });
7509
+ }, this.resetEvent(), onChange(broadcastValue));
7513
7510
  };
7514
7511
  handleOnBlur = event => {
7515
- this.props.onBlur?.(unformatWithPattern$1(event.target.value, this.props.displayPattern));
7512
+ const {
7513
+ displayPattern,
7514
+ onBlur
7515
+ } = this.props;
7516
+ if (onBlur) {
7517
+ onBlur(unformatWithPattern$1(event.target.value, displayPattern));
7518
+ }
7516
7519
  };
7517
7520
  handleOnFocus = event => {
7518
7521
  const {
@@ -7570,36 +7573,103 @@ class WithDisplayFormat extends Component {
7570
7573
  }, 0);
7571
7574
  };
7572
7575
  render() {
7573
- return this.props.render({
7574
- value: this.state.value,
7575
- type: this.props.type,
7576
- inputMode: this.props.inputMode,
7577
- className: this.props.className,
7578
- id: this.props.id,
7579
- name: this.props.name,
7580
- placeholder: this.props.placeholder,
7581
- readOnly: this.props.readOnly,
7582
- required: this.props.required,
7583
- minLength: this.props.minLength,
7584
- maxLength: this.props.maxLength,
7585
- disabled: this.props.disabled,
7586
- autoComplete: this.props.autoComplete,
7576
+ const {
7577
+ type,
7578
+ inputMode,
7579
+ className,
7580
+ id,
7581
+ name,
7582
+ placeholder,
7583
+ readOnly,
7584
+ required,
7585
+ minLength,
7586
+ maxLength,
7587
+ disabled,
7588
+ autoComplete
7589
+ } = this.props;
7590
+ const {
7591
+ value
7592
+ } = this.state;
7593
+ const renderProps = {
7594
+ type,
7595
+ inputMode,
7596
+ className,
7597
+ id,
7598
+ name,
7599
+ placeholder,
7600
+ readOnly,
7601
+ required,
7602
+ minLength,
7603
+ maxLength,
7604
+ disabled,
7605
+ autoComplete,
7606
+ value,
7587
7607
  onFocus: this.handleOnFocus,
7588
7608
  onBlur: this.handleOnBlur,
7589
7609
  onPaste: this.handleOnPaste,
7590
7610
  onKeyDown: this.handleOnKeyDown,
7591
7611
  onChange: this.handleOnChange,
7592
7612
  onCut: this.handleOnCut
7593
- });
7613
+ };
7614
+ return this.props.render(renderProps);
7594
7615
  }
7595
7616
  }
7617
+ WithDisplayFormat.propTypes = {
7618
+ /**
7619
+ * autocomplete hides our form help so we need to disable it when help text
7620
+ * is present. Chrome ignores autocomplete=off, the only way to disable it is
7621
+ * to provide an 'invalid' value, for which 'disabled' serves.
7622
+ */
7623
+ autoComplete: PropTypes.oneOf(['on', 'off', 'disabled']),
7624
+ className: PropTypes.string,
7625
+ disabled: PropTypes.bool,
7626
+ id: PropTypes.string,
7627
+ maxLength: PropTypes.number,
7628
+ minLength: PropTypes.number,
7629
+ name: PropTypes.string,
7630
+ onFocus: PropTypes.func,
7631
+ onBlur: PropTypes.func,
7632
+ onChange: PropTypes.func.isRequired,
7633
+ placeholder: PropTypes.string,
7634
+ readOnly: PropTypes.bool,
7635
+ render: PropTypes.func.isRequired,
7636
+ required: PropTypes.bool,
7637
+ displayPattern: PropTypes.string,
7638
+ type: PropTypes.string,
7639
+ inputMode: PropTypes.string,
7640
+ value: PropTypes.string
7641
+ };
7642
+ WithDisplayFormat.defaultProps = {
7643
+ autoComplete: 'off',
7644
+ className: null,
7645
+ disabled: false,
7646
+ id: null,
7647
+ maxLength: null,
7648
+ minLength: null,
7649
+ name: null,
7650
+ placeholder: null,
7651
+ readOnly: false,
7652
+ required: false,
7653
+ displayPattern: '',
7654
+ type: 'text',
7655
+ inputMode: null,
7656
+ value: '',
7657
+ onFocus: null,
7658
+ onBlur: null
7659
+ };
7660
+ var WithDisplayFormat$1 = WithDisplayFormat;
7596
7661
 
7597
- const InputWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat, {
7662
+ const InputWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat$1, {
7598
7663
  ...props,
7599
- render: renderProps => /*#__PURE__*/jsx(Input, {
7664
+ render: renderProps => /*#__PURE__*/jsx("input", {
7600
7665
  ...renderProps
7601
7666
  })
7602
7667
  });
7668
+ InputWithDisplayFormat.propTypes = {
7669
+ displayPattern: PropTypes.string.isRequired,
7670
+ onChange: PropTypes.func.isRequired
7671
+ };
7672
+ var InputWithDisplayFormat$1 = InputWithDisplayFormat;
7603
7673
 
7604
7674
  const InstructionsList = ({
7605
7675
  dos,
@@ -7763,20 +7833,17 @@ function getValidLocale(locale) {
7763
7833
  Intl.NumberFormat(noUnderscoreLocale);
7764
7834
  return noUnderscoreLocale;
7765
7835
  } catch {
7766
- return 'en-GB';
7836
+ return DEFAULT_LOCALE;
7767
7837
  }
7768
7838
  }
7769
- function getCurrencyDecimals(currency = '') {
7839
+ function getCurrencyDecimals(currency) {
7770
7840
  const upperCaseCurrency = currency.toUpperCase();
7771
- if (Object.prototype.hasOwnProperty.call(currencyDecimals, upperCaseCurrency)) {
7772
- return currencyDecimals[upperCaseCurrency];
7773
- }
7774
- return DEFAULT_CURRENCY_DECIMALS;
7841
+ return currencyDecimals[upperCaseCurrency] ?? DEFAULT_CURRENCY_DECIMALS;
7775
7842
  }
7776
7843
  function getDecimalSeparator(locale) {
7777
7844
  return isNumberLocaleSupported() ? 1.1.toLocaleString(locale)[1] : '.';
7778
7845
  }
7779
- function parseAmount(number, currency, locale) {
7846
+ function parseAmount(number, currency, locale = DEFAULT_LOCALE) {
7780
7847
  const validLocale = getValidLocale(locale);
7781
7848
  const precision = getCurrencyDecimals(currency);
7782
7849
  const groupSeparator = isNumberLocaleSupported() ? 10000 .toLocaleString(validLocale)[2] : ',';
@@ -7786,53 +7853,67 @@ function parseAmount(number, currency, locale) {
7786
7853
  return Math.abs(parsedAmount);
7787
7854
  }
7788
7855
 
7789
- const Currency = PropTypes.shape({
7790
- header: PropTypes.string,
7791
- value: PropTypes.string,
7792
- label: PropTypes.string,
7793
- currency: PropTypes.string,
7794
- note: PropTypes.string,
7795
- searchable: PropTypes.string
7796
- });
7797
7856
  const isNumberOrNull = v => isNumber(v) || isNull(v);
7798
- const formatAmountIfSet = (amount, currency, locale, maxLengthOverride) => {
7857
+ const formatAmountIfSet = ({
7858
+ amount,
7859
+ currency,
7860
+ locale,
7861
+ maxLengthOverride
7862
+ }) => {
7799
7863
  if (maxLengthOverride) {
7800
- return amount || '';
7864
+ return amount != null ? String(amount) : '';
7801
7865
  } else {
7802
7866
  return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
7803
7867
  }
7804
7868
  };
7805
- const parseNumber = (amount, currency, locale, maxLengthOverride) => {
7869
+ const parseNumber = ({
7870
+ amount,
7871
+ currency,
7872
+ locale,
7873
+ maxLengthOverride
7874
+ }) => {
7806
7875
  if (!maxLengthOverride) {
7807
7876
  return parseAmount(amount, currency, locale);
7808
7877
  }
7809
7878
  if (maxLengthOverride && amount.length > maxLengthOverride) {
7810
7879
  return 0;
7811
7880
  }
7812
- return +amount;
7881
+ return Number(amount);
7813
7882
  };
7814
7883
  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]);
7815
7884
  const inputKeyAllowlist = new Set([Key.PERIOD, Key.COMMA]);
7816
7885
  class MoneyInput extends Component {
7886
+ static defaultProps = {
7887
+ size: Size.LARGE,
7888
+ classNames: {},
7889
+ selectProps: {}
7890
+ };
7891
+ amountFocused = false;
7817
7892
  constructor(props) {
7818
7893
  super(props);
7819
- const {
7820
- locale
7821
- } = this.props.intl;
7822
- this.formatMessage = this.props.intl.formatMessage;
7823
7894
  this.state = {
7824
7895
  searchQuery: '',
7825
- formattedAmount: formatAmountIfSet(props.amount, props.selectedCurrency.currency, locale, props.maxLengthOverride),
7826
- locale
7896
+ formattedAmount: formatAmountIfSet({
7897
+ amount: props.amount,
7898
+ currency: props.selectedCurrency.currency,
7899
+ locale: props.intl.locale,
7900
+ maxLengthOverride: props.maxLengthOverride
7901
+ }),
7902
+ locale: props.intl.locale
7827
7903
  };
7828
7904
  }
7829
7905
  UNSAFE_componentWillReceiveProps(nextProps) {
7830
7906
  this.setState({
7831
- locale: nextProps?.intl?.locale
7907
+ locale: nextProps.intl.locale
7832
7908
  });
7833
7909
  if (!this.amountFocused) {
7834
7910
  this.setState({
7835
- formattedAmount: formatAmountIfSet(nextProps.amount, nextProps.selectedCurrency.currency, nextProps?.intl?.locale, nextProps.maxLengthOverride)
7911
+ formattedAmount: formatAmountIfSet({
7912
+ amount: nextProps.amount,
7913
+ currency: nextProps.selectedCurrency.currency,
7914
+ locale: nextProps.intl.locale,
7915
+ maxLengthOverride: nextProps.maxLengthOverride
7916
+ })
7836
7917
  });
7837
7918
  }
7838
7919
  }
@@ -7852,16 +7933,26 @@ class MoneyInput extends Component {
7852
7933
  }
7853
7934
  };
7854
7935
  handlePaste = event => {
7855
- const paste = (event.clipboardData || window.clipboardData).getData('text');
7936
+ const paste = event.clipboardData.getData('text');
7856
7937
  const {
7857
7938
  locale
7858
7939
  } = this.state;
7859
- const parsed = isEmpty(paste) ? null : parseNumber(paste, this.props.selectedCurrency.currency, locale, this.props.maxLengthOverride);
7940
+ const parsed = isEmpty(paste) ? null : parseNumber({
7941
+ amount: paste,
7942
+ currency: this.props.selectedCurrency.currency,
7943
+ locale: locale,
7944
+ maxLengthOverride: this.props.maxLengthOverride
7945
+ });
7860
7946
  if (isNumberOrNull(parsed)) {
7861
7947
  this.setState({
7862
- formattedAmount: formatAmountIfSet(parsed, this.props.selectedCurrency.currency, locale, this.props.maxLengthOverride)
7948
+ formattedAmount: formatAmountIfSet({
7949
+ amount: parsed,
7950
+ currency: this.props.selectedCurrency.currency,
7951
+ locale: locale,
7952
+ maxLengthOverride: this.props.maxLengthOverride
7953
+ })
7863
7954
  });
7864
- this.props.onAmountChange(parsed);
7955
+ this.props.onAmountChange?.(parsed);
7865
7956
  }
7866
7957
  event.preventDefault();
7867
7958
  };
@@ -7872,9 +7963,14 @@ class MoneyInput extends Component {
7872
7963
  this.setState({
7873
7964
  formattedAmount: value
7874
7965
  });
7875
- const parsed = isEmpty(value) ? null : parseNumber(value, this.props.selectedCurrency.currency, this.state.locale, this.props.maxLengthOverride);
7966
+ const parsed = isEmpty(value) ? null : parseNumber({
7967
+ amount: value,
7968
+ currency: this.props.selectedCurrency.currency,
7969
+ locale: this.state.locale,
7970
+ maxLengthOverride: this.props.maxLengthOverride
7971
+ });
7876
7972
  if (isNumberOrNull(parsed)) {
7877
- this.props.onAmountChange(parsed);
7973
+ this.props.onAmountChange?.(parsed);
7878
7974
  }
7879
7975
  };
7880
7976
  onAmountBlur = () => {
@@ -7884,68 +7980,67 @@ class MoneyInput extends Component {
7884
7980
  onAmountFocus = () => {
7885
7981
  this.amountFocused = true;
7886
7982
  };
7887
- mapOption = item => {
7888
- return {
7889
- type: 'option',
7890
- value: item,
7891
- filterMatchers: [item.value, item.label, item.note, item.searchable]
7892
- };
7893
- };
7894
7983
  getSelectOptions() {
7895
- const selectOptions = [...filterOptionsForQuery(this.props.currencies, this.state.searchQuery)];
7896
- let formattedOptions = [];
7897
- let groupIndex = null;
7984
+ const selectOptions = filterCurrenciesForQuery(this.props.currencies, this.state.searchQuery);
7985
+ const formattedOptions = [];
7986
+ let currentGroupOptions;
7898
7987
  selectOptions.forEach(item => {
7899
- if (item.header) {
7988
+ if (item.header != null) {
7989
+ currentGroupOptions = [];
7900
7990
  formattedOptions.push({
7901
7991
  type: 'group',
7902
7992
  label: item.header,
7903
- options: []
7993
+ options: currentGroupOptions
7904
7994
  });
7905
- groupIndex = formattedOptions.length - 1;
7906
7995
  } else {
7907
- if (groupIndex === null) {
7908
- formattedOptions.push(this.mapOption(item));
7909
- } else {
7910
- formattedOptions[groupIndex]?.options.push(this.mapOption(item));
7911
- }
7996
+ (currentGroupOptions ?? formattedOptions).push({
7997
+ type: 'option',
7998
+ value: item,
7999
+ filterMatchers: [item.value, item.label, item.note ?? '', item.searchable ?? '']
8000
+ });
7912
8001
  }
7913
8002
  });
7914
8003
  return formattedOptions;
7915
8004
  }
7916
8005
  setAmount() {
7917
8006
  this.setState(previousState => {
7918
- const parsed = parseNumber(previousState.formattedAmount, this.props.selectedCurrency.currency, previousState.locale, this.props.maxLengthOverride);
8007
+ const parsed = parseNumber({
8008
+ amount: previousState.formattedAmount,
8009
+ currency: this.props.selectedCurrency.currency,
8010
+ locale: previousState.locale,
8011
+ maxLengthOverride: this.props.maxLengthOverride
8012
+ });
7919
8013
  if (!isNumberOrNull(parsed)) {
7920
8014
  return {
7921
8015
  formattedAmount: previousState.formattedAmount
7922
8016
  };
7923
8017
  }
7924
8018
  return {
7925
- formattedAmount: formatAmountIfSet(parsed, this.props.selectedCurrency.currency, previousState.locale, this.props.maxLengthOverride)
8019
+ formattedAmount: formatAmountIfSet({
8020
+ amount: parsed,
8021
+ currency: this.props.selectedCurrency.currency,
8022
+ locale: previousState.locale,
8023
+ maxLengthOverride: this.props.maxLengthOverride
8024
+ })
7926
8025
  };
7927
8026
  });
7928
8027
  }
7929
8028
  handleSelectChange = value => {
7930
8029
  this.handleSearchChange('');
7931
- this.props.onCurrencyChange(value);
8030
+ this.props.onCurrencyChange?.(value);
7932
8031
  };
7933
8032
  handleCustomAction = () => {
7934
8033
  this.handleSearchChange('');
7935
- if (this.props.onCustomAction) {
7936
- this.props.onCustomAction();
7937
- }
8034
+ this.props.onCustomAction?.();
7938
8035
  };
7939
8036
  handleSearchChange = searchQuery => {
7940
8037
  this.setState({
7941
8038
  searchQuery
7942
8039
  });
7943
- if (this.props.onSearchChange) {
7944
- this.props.onSearchChange({
7945
- searchQuery,
7946
- filteredOptions: filterOptionsForQuery(this.props.currencies, searchQuery)
7947
- });
7948
- }
8040
+ this.props.onSearchChange?.({
8041
+ searchQuery,
8042
+ filteredOptions: filterCurrenciesForQuery(this.props.currencies, searchQuery)
8043
+ });
7949
8044
  };
7950
8045
  style = className => this.props.classNames[className] || className;
7951
8046
  render() {
@@ -7985,7 +8080,12 @@ class MoneyInput extends Component {
7985
8080
  inputMode: "decimal",
7986
8081
  disabled: disabled,
7987
8082
  maxLength: maxLengthOverride,
7988
- placeholder: formatAmountIfSet(this.props.placeholder, this.props.selectedCurrency.currency, this.state.locale, this.props.maxLengthOverride),
8083
+ placeholder: formatAmountIfSet({
8084
+ amount: this.props.placeholder,
8085
+ currency: this.props.selectedCurrency.currency,
8086
+ locale: this.state.locale,
8087
+ maxLengthOverride: this.props.maxLengthOverride
8088
+ }),
7989
8089
  autoComplete: "off",
7990
8090
  onKeyDown: this.handleKeyDown,
7991
8091
  onChange: this.onAmountChange,
@@ -8030,11 +8130,11 @@ class MoneyInput extends Component {
8030
8130
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
8031
8131
  jsx("div", {
8032
8132
  role: "button",
8033
- tabIndex: "0",
8133
+ tabIndex: 0,
8034
8134
  onClick: this.handleCustomAction,
8035
8135
  children: this.props.customActionLabel
8036
- }) : null,
8037
- placeholder: this.formatMessage(messages$3.selectPlaceholder),
8136
+ }) : undefined,
8137
+ placeholder: this.props.intl.formatMessage(messages$3.selectPlaceholder),
8038
8138
  filterable: true,
8039
8139
  filterPlaceholder: this.props.searchPlaceholder,
8040
8140
  disabled: disabled,
@@ -8051,25 +8151,25 @@ class MoneyInput extends Component {
8051
8151
  });
8052
8152
  }
8053
8153
  }
8054
- function filterOptionsForQuery(options, query) {
8154
+ function filterCurrenciesForQuery(currencies, query) {
8055
8155
  if (!query) {
8056
- return options;
8156
+ return [...currencies];
8057
8157
  }
8058
- const filteredOptions = removeDuplicateValueOptions(options).filter(option => isCurrencyOptionAndFitsQuery(option, query));
8158
+ const options = currencies.filter(option => option.header == null);
8159
+ const filteredOptions = removeDuplicateValueOptions(options).filter(option => currencyOptionFitsQuery(option, query));
8059
8160
  return sortOptionsLabelsToFirst(filteredOptions, query);
8060
8161
  }
8061
8162
  function removeDuplicateValueOptions(options) {
8062
- const result = [];
8063
- const resultValues = [];
8064
- options.forEach(option => {
8065
- if (option.value && !resultValues.includes(option.value)) {
8066
- result.push(option);
8067
- resultValues.push(option.value);
8163
+ const uniqueValues = new Set();
8164
+ return options.filter(option => {
8165
+ if (!uniqueValues.has(option.value)) {
8166
+ uniqueValues.add(option.value);
8167
+ return true;
8068
8168
  }
8169
+ return false;
8069
8170
  });
8070
- return result;
8071
8171
  }
8072
- function isCurrencyOptionAndFitsQuery(option, query) {
8172
+ function currencyOptionFitsQuery(option, query) {
8073
8173
  if (!option.value) {
8074
8174
  return false;
8075
8175
  }
@@ -8094,43 +8194,6 @@ function sortOptionsLabelsToFirst(options, query) {
8094
8194
  return 0;
8095
8195
  });
8096
8196
  }
8097
- MoneyInput.propTypes = {
8098
- id: PropTypes.string,
8099
- currencies: PropTypes.arrayOf(Currency).isRequired,
8100
- selectedCurrency: Currency.isRequired,
8101
- onCurrencyChange: PropTypes.func,
8102
- placeholder: PropTypes.number,
8103
- amount: PropTypes.number,
8104
- size: PropTypes.oneOf(['sm', 'md', 'lg']),
8105
- onAmountChange: PropTypes.func,
8106
- addon: PropTypes.node,
8107
- searchPlaceholder: PropTypes.string,
8108
- /**
8109
- * Allows the consumer to react to searching, while the search itself is handled internally. Called with `{ searchQuery: string, filteredOptions: Currency[] }`
8110
- */
8111
- onSearchChange: PropTypes.func,
8112
- customActionLabel: PropTypes.node,
8113
- onCustomAction: PropTypes.func,
8114
- classNames: PropTypes.objectOf(PropTypes.string),
8115
- selectProps: PropTypes.object,
8116
- maxLengthOverride: PropTypes.number
8117
- };
8118
- MoneyInput.defaultProps = {
8119
- id: null,
8120
- size: Size.LARGE,
8121
- addon: null,
8122
- searchPlaceholder: '',
8123
- onSearchChange: undefined,
8124
- onCurrencyChange: null,
8125
- placeholder: null,
8126
- amount: null,
8127
- onAmountChange: null,
8128
- customActionLabel: '',
8129
- onCustomAction: null,
8130
- classNames: {},
8131
- selectProps: {},
8132
- maxLengthOverride: null
8133
- };
8134
8197
  var MoneyInput$1 = injectIntl(MoneyInput);
8135
8198
 
8136
8199
  const NavigationOptionList = ({
@@ -12283,12 +12346,17 @@ Tabs.defaultProps = {
12283
12346
  };
12284
12347
  var Tabs$1 = Tabs;
12285
12348
 
12286
- const TextareaWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat, {
12349
+ const TextareaWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat$1, {
12287
12350
  ...props,
12288
- render: renderProps => /*#__PURE__*/jsx(TextArea, {
12351
+ render: renderProps => /*#__PURE__*/jsx("textarea", {
12289
12352
  ...renderProps
12290
12353
  })
12291
12354
  });
12355
+ TextareaWithDisplayFormat.propTypes = {
12356
+ displayPattern: PropTypes.string.isRequired,
12357
+ onChange: PropTypes.func.isRequired
12358
+ };
12359
+ var TextareaWithDisplayFormat$1 = TextareaWithDisplayFormat;
12292
12360
 
12293
12361
  /* eslint-disable jsx-a11y/no-autofocus */
12294
12362
  /* eslint-disable jsx-a11y/click-events-have-key-events */
@@ -15585,5 +15653,5 @@ const translations = {
15585
15653
  'zh-HK': zhHK
15586
15654
  };
15587
15655
 
15588
- 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 };
15656
+ 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 };
15589
15657
  //# sourceMappingURL=index.esm.js.map