@transferwise/components 46.18.0 → 46.20.0

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 (82) hide show
  1. package/build/index.esm.js +70 -107
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +70 -107
  4. package/build/index.js.map +1 -1
  5. package/build/types/actionButton/ActionButton.d.ts +1 -1
  6. package/build/types/circularButton/CircularButton.d.ts +16 -20
  7. package/build/types/circularButton/CircularButton.d.ts.map +1 -1
  8. package/build/types/circularButton/index.d.ts +2 -1
  9. package/build/types/circularButton/index.d.ts.map +1 -1
  10. package/build/types/common/panel/Panel.d.ts.map +1 -1
  11. package/build/types/common/textFormat/formatWithPattern/index.d.ts +1 -1
  12. package/build/types/common/textFormat/formatWithPattern/index.d.ts.map +1 -1
  13. package/build/types/common/textFormat/getCountOfSymbolsInSelection/getCountOfSymbolsInSelection.d.ts +1 -1
  14. package/build/types/common/textFormat/getCountOfSymbolsInSelection/getCountOfSymbolsInSelection.d.ts.map +1 -1
  15. package/build/types/common/textFormat/getCountOfSymbolsInSelection/index.d.ts +1 -1
  16. package/build/types/common/textFormat/getCountOfSymbolsInSelection/index.d.ts.map +1 -1
  17. package/build/types/common/textFormat/getCursorPositionAfterKeystroke/index.d.ts +1 -1
  18. package/build/types/common/textFormat/getCursorPositionAfterKeystroke/index.d.ts.map +1 -1
  19. package/build/types/common/textFormat/getDistanceToSymbol/getDistanceToSymbol.d.ts +2 -2
  20. package/build/types/common/textFormat/getDistanceToSymbol/getDistanceToSymbol.d.ts.map +1 -1
  21. package/build/types/common/textFormat/getDistanceToSymbol/index.d.ts +1 -1
  22. package/build/types/common/textFormat/getDistanceToSymbol/index.d.ts.map +1 -1
  23. package/build/types/common/textFormat/getSymbolsInPatternWithPosition/index.d.ts +1 -1
  24. package/build/types/common/textFormat/getSymbolsInPatternWithPosition/index.d.ts.map +1 -1
  25. package/build/types/common/textFormat/index.d.ts +7 -6
  26. package/build/types/common/textFormat/index.d.ts.map +1 -1
  27. package/build/types/common/textFormat/unformatWithPattern/index.d.ts +1 -1
  28. package/build/types/common/textFormat/unformatWithPattern/index.d.ts.map +1 -1
  29. package/build/types/index.d.ts +2 -0
  30. package/build/types/index.d.ts.map +1 -1
  31. package/build/types/info/Info.d.ts +3 -2
  32. package/build/types/info/Info.d.ts.map +1 -1
  33. package/build/types/logo/Logo.d.ts.map +1 -1
  34. package/build/types/phoneNumberInput/PhoneNumberInput.d.ts +2 -1
  35. package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map +1 -1
  36. package/build/types/popover/Popover.d.ts +16 -21
  37. package/build/types/popover/Popover.d.ts.map +1 -1
  38. package/build/types/popover/index.d.ts +2 -1
  39. package/build/types/popover/index.d.ts.map +1 -1
  40. package/build/types/summary/Summary.d.ts.map +1 -1
  41. package/build/types/typeahead/typeaheadInput/TypeaheadInput.d.ts +1 -1
  42. package/package.json +1 -1
  43. package/src/circularButton/{CircularButton.story.js → CircularButton.story.tsx} +2 -2
  44. package/src/circularButton/CircularButton.tsx +51 -0
  45. package/src/circularButton/index.ts +2 -0
  46. package/src/common/panel/Panel.tsx +1 -0
  47. package/src/common/textFormat/getCountOfSymbolsInSelection/{getCountOfSymbolsInSelection.js → getCountOfSymbolsInSelection.ts} +5 -1
  48. package/src/common/textFormat/getCursorPositionAfterKeystroke/{getCursorPositionAfterKeystroke.spec.js → getCursorPositionAfterKeystroke.spec.ts} +15 -18
  49. package/src/common/textFormat/getDistanceToSymbol/{getDistanceToSymbol.spec.js → getDistanceToSymbol.spec.ts} +3 -3
  50. package/src/common/textFormat/getDistanceToSymbol/{getDistanceToSymbol.js → getDistanceToSymbol.ts} +8 -3
  51. package/src/index.ts +2 -0
  52. package/src/info/Info.tsx +2 -2
  53. package/src/logo/Logo.js +1 -0
  54. package/src/logo/__snapshots__/Logo.spec.js.snap +6 -0
  55. package/src/phoneNumberInput/PhoneNumberInput.rtl.spec.tsx +22 -0
  56. package/src/phoneNumberInput/PhoneNumberInput.tsx +3 -1
  57. package/src/popover/{Popover.spec.js → Popover.spec.tsx} +5 -2
  58. package/src/popover/Popover.tsx +101 -0
  59. package/src/popover/__snapshots__/{Popover.spec.js.snap → Popover.spec.tsx.snap} +2 -3
  60. package/src/popover/index.ts +2 -0
  61. package/src/summary/Summary.tsx +7 -1
  62. package/src/typeahead/Typeahead.spec.js +9 -0
  63. package/src/typeahead/Typeahead.tsx +1 -1
  64. package/src/typeahead/typeaheadInput/TypeaheadInput.tsx +3 -3
  65. package/src/circularButton/CircularButton.js +0 -57
  66. package/src/circularButton/index.js +0 -1
  67. package/src/popover/Popover.js +0 -101
  68. package/src/popover/index.js +0 -1
  69. /package/src/circularButton/{CircularButton.spec.js → CircularButton.spec.tsx} +0 -0
  70. /package/src/circularButton/__snapshots__/{CircularButton.spec.js.snap → CircularButton.spec.tsx.snap} +0 -0
  71. /package/src/common/textFormat/formatWithPattern/{formatWithPattern.spec.js → formatWithPattern.spec.ts} +0 -0
  72. /package/src/common/textFormat/formatWithPattern/{index.js → index.ts} +0 -0
  73. /package/src/common/textFormat/getCountOfSymbolsInSelection/{getCountOfSymbolsInSelection.spec.js → getCountOfSymbolsInSelection.spec.ts} +0 -0
  74. /package/src/common/textFormat/getCountOfSymbolsInSelection/{index.js → index.ts} +0 -0
  75. /package/src/common/textFormat/getCursorPositionAfterKeystroke/{index.js → index.ts} +0 -0
  76. /package/src/common/textFormat/getDistanceToSymbol/{index.js → index.ts} +0 -0
  77. /package/src/common/textFormat/getSymbolsInPatternWithPosition/{getSymbolsInPatternWithPosition.spec.js → getSymbolsInPatternWithPosition.spec.ts} +0 -0
  78. /package/src/common/textFormat/getSymbolsInPatternWithPosition/{index.js → index.ts} +0 -0
  79. /package/src/common/textFormat/{index.js → index.ts} +0 -0
  80. /package/src/common/textFormat/unformatWithPattern/{index.js → index.ts} +0 -0
  81. /package/src/common/textFormat/unformatWithPattern/{unformatWithPattern.spec.js → unformatWithPattern.spec.ts} +0 -0
  82. /package/src/popover/{Popover.story.js → Popover.story.tsx} +0 -0
@@ -1,7 +1,7 @@
1
1
  import classNames from 'classnames';
2
2
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
3
  import * as React from 'react';
4
- import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, createContext, useContext, createElement, Component, PureComponent, createRef, Children, Fragment as Fragment$1 } from 'react';
4
+ import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, createContext, useContext, createElement, Component, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
5
5
  import { useId } from '@radix-ui/react-id';
6
6
  import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$2, ClockBorderless, CheckCircle, InfoCircle, Warning, CrossCircle, Clock, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
7
7
  import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
@@ -816,7 +816,7 @@ const StatusIcon = ({
816
816
  });
817
817
  };
818
818
 
819
- function logActionRequired$2(message) {
819
+ function logActionRequired$1(message) {
820
820
  if (['development', 'test'].includes(process?.env?.NODE_ENV)) {
821
821
  // eslint-disable-next-line no-console
822
822
  console.warn(message);
@@ -824,7 +824,7 @@ function logActionRequired$2(message) {
824
824
  }
825
825
  function logActionRequiredIf(message, conditional) {
826
826
  if (conditional) {
827
- logActionRequired$2(message);
827
+ logActionRequired$1(message);
828
828
  }
829
829
  }
830
830
 
@@ -855,7 +855,7 @@ const deprecated = (validator, {
855
855
  }) => (props, propertyName, ...rest) => {
856
856
  const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
857
857
  if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
858
- logActionRequired$2(deprecatedMessage({
858
+ logActionRequired$1(deprecatedMessage({
859
859
  component,
860
860
  propName: propertyName,
861
861
  message: newPropertyMessage,
@@ -884,7 +884,7 @@ function Markdown({
884
884
  }
885
885
  const linkTarget = config?.link?.target ?? '_self';
886
886
  if (allowList != null && blockList != null) {
887
- logActionRequired$2('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
887
+ logActionRequired$1('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
888
888
  }
889
889
  const parser = nodes => {
890
890
  const parsed = reader.parse(nodes);
@@ -1036,7 +1036,7 @@ const Alert = props => {
1036
1036
  ...props
1037
1037
  });
1038
1038
  }
1039
- logActionRequired$1(props);
1039
+ logActionRequired(props);
1040
1040
  const mappedType = deprecatedTypeMap$1[type] || type;
1041
1041
  const Icon = iconTypeMap[mappedType];
1042
1042
  function generateIcon() {
@@ -1119,7 +1119,7 @@ const deprecatedTypeMapMessage$1 = {
1119
1119
  [Sentiment.ERROR]: 'Sentiment.NEGATIVE'
1120
1120
  };
1121
1121
  const deprecatedTypes$1 = Object.keys(deprecatedTypeMap$1);
1122
- function logActionRequired$1({
1122
+ function logActionRequired({
1123
1123
  size,
1124
1124
  type
1125
1125
  }) {
@@ -2656,16 +2656,16 @@ const CircularButton = ({
2656
2656
  children,
2657
2657
  disabled,
2658
2658
  icon,
2659
- priority,
2660
- type,
2659
+ priority = Priority.PRIMARY,
2660
+ type = ControlType.ACCENT,
2661
2661
  ...rest
2662
2662
  }) => {
2663
2663
  const classes = classNames('btn np-btn', typeClassMap$1[type], priorityClassMap[priority]);
2664
- const iconElement = icon.props.size !== 24 ? /*#__PURE__*/cloneElement(icon, {
2664
+ const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/cloneElement(icon, {
2665
2665
  size: 24
2666
2666
  }) : icon;
2667
2667
  return /*#__PURE__*/jsxs("label", {
2668
- className: classNames('np-circular-btn', priority, type, disabled ? 'disabled' : '', className),
2668
+ className: classNames('np-circular-btn', priority, type, disabled && 'disabled', className),
2669
2669
  children: [/*#__PURE__*/jsx("input", {
2670
2670
  type: "button",
2671
2671
  "aria-label": children,
@@ -2680,22 +2680,6 @@ const CircularButton = ({
2680
2680
  })]
2681
2681
  });
2682
2682
  };
2683
- CircularButton.propTypes = {
2684
- className: PropTypes.string,
2685
- children: PropTypes.string.isRequired,
2686
- disabled: PropTypes.bool,
2687
- icon: PropTypes.element.isRequired,
2688
- onClick: PropTypes.func,
2689
- priority: PropTypes.oneOf(['primary', 'secondary']),
2690
- type: PropTypes.oneOf(['accent', 'positive', 'negative'])
2691
- };
2692
- CircularButton.defaultProps = {
2693
- className: undefined,
2694
- disabled: false,
2695
- priority: Priority.PRIMARY,
2696
- type: ControlType.ACCENT
2697
- };
2698
- var CircularButton$1 = CircularButton;
2699
2683
 
2700
2684
  function getDayNames(locale, format = 'short') {
2701
2685
  const days = [];
@@ -3135,7 +3119,8 @@ const Panel = /*#__PURE__*/forwardRef(({
3135
3119
  onClose: onClose,
3136
3120
  children: /*#__PURE__*/jsx("div", {
3137
3121
  ...rest,
3138
- ref: setPopperElement
3122
+ ref: setPopperElement,
3123
+ role: "dialog"
3139
3124
  // eslint-disable-next-line react/forbid-dom-props
3140
3125
  ,
3141
3126
  style: {
@@ -5268,6 +5253,7 @@ const Logo = ({
5268
5253
  const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
5269
5254
  return /*#__PURE__*/jsxs("span", {
5270
5255
  "aria-label": type === LogoType.WISE ? 'Wise' : 'Wise business',
5256
+ role: "img",
5271
5257
  className: classNames(className, 'np-logo'),
5272
5258
  children: [/*#__PURE__*/jsx(LogoSm, {
5273
5259
  className: "np-logo-svg np-logo-svg--size-sm"
@@ -5791,22 +5777,33 @@ const Modal = ({
5791
5777
  });
5792
5778
  };
5793
5779
 
5794
- const Popover$1 = ({
5780
+ function resolvePlacement(preferredPlacement) {
5781
+ switch (preferredPlacement) {
5782
+ case 'left-top':
5783
+ case 'right-top':
5784
+ return 'top';
5785
+ case 'bottom-left':
5786
+ case 'bottom-right':
5787
+ return 'bottom';
5788
+ }
5789
+ return preferredPlacement;
5790
+ }
5791
+ function Popover$1({
5795
5792
  children,
5796
5793
  className,
5797
5794
  content,
5798
- preferredPlacement,
5795
+ preferredPlacement = Position.RIGHT,
5799
5796
  title,
5800
5797
  onClose
5801
- }) => {
5802
- logActionRequired({
5803
- preferredPlacement
5804
- });
5798
+ }) {
5799
+ const resolvedPlacement = resolvePlacement(preferredPlacement);
5800
+ useEffect(() => {
5801
+ if (resolvedPlacement !== preferredPlacement) {
5802
+ logActionRequired$1(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
5803
+ }
5804
+ }, [preferredPlacement, resolvedPlacement]);
5805
5805
  const anchorReference = useRef(null);
5806
5806
  const [open, setOpen] = useState(false);
5807
- const {
5808
- isModern
5809
- } = useTheme();
5810
5807
  const handleOnClose = () => {
5811
5808
  setOpen(false);
5812
5809
  onClose?.();
@@ -5816,25 +5813,21 @@ const Popover$1 = ({
5816
5813
  children: [/*#__PURE__*/jsx("span", {
5817
5814
  ref: anchorReference,
5818
5815
  className: "d-inline-block",
5819
- children: /*#__PURE__*/cloneElement(children, {
5816
+ children: /*#__PURE__*/isValidElement(children) ? /*#__PURE__*/cloneElement(children, {
5820
5817
  onClick: () => {
5821
- if (children?.props?.onClick) {
5822
- children.props.onClick();
5823
- }
5824
- setOpen(!open);
5818
+ children.props.onClick?.();
5819
+ setOpen(prevOpen => !prevOpen);
5825
5820
  }
5826
- })
5821
+ }) : children
5827
5822
  }), /*#__PURE__*/jsx(ResponsivePanel$1, {
5828
5823
  open: open,
5829
5824
  anchorRef: anchorReference,
5830
- position: deprecatedPlacements[preferredPlacement] || preferredPlacement,
5825
+ position: resolvedPlacement,
5831
5826
  arrow: true,
5832
5827
  className: "np-popover__container",
5833
5828
  onClose: handleOnClose,
5834
5829
  children: /*#__PURE__*/jsxs("div", {
5835
- className: isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content',
5836
- "aria-hidden": !open,
5837
- role: "dialog",
5830
+ className: "np-popover__content np-text-default-body",
5838
5831
  children: [title && /*#__PURE__*/jsx(Title, {
5839
5832
  type: Typography.TITLE_BODY,
5840
5833
  className: "m-b-1",
@@ -5843,36 +5836,7 @@ const Popover$1 = ({
5843
5836
  })
5844
5837
  })]
5845
5838
  });
5846
- };
5847
- const logActionRequired = ({
5848
- preferredPlacement
5849
- }) => {
5850
- logActionRequiredIf(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${deprecatedPlacements[preferredPlacement]} instead.`, deprecatedPlacements[preferredPlacement]);
5851
- };
5852
- Popover$1.defaultProps = {
5853
- className: undefined,
5854
- preferredPlacement: Position.RIGHT,
5855
- title: undefined
5856
- };
5857
- Popover$1.propTypes = {
5858
- children: PropTypes.node.isRequired,
5859
- className: PropTypes.string,
5860
- content: PropTypes.node.isRequired,
5861
- /**
5862
- * `'left-top'` / `'right-top'` are deprecated use `Position.TOP` / `'top'` instead,
5863
- * `'bottom-right'` / `'bottom-left'` are deprecated use `Position.BOTTOM` / `'bottom'` instead
5864
- */
5865
- preferredPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left', 'left-top', 'right-top', 'bottom-right', 'bottom-left']),
5866
- onClose: PropTypes.func,
5867
- title: PropTypes.node
5868
- };
5869
- const deprecatedPlacements = {
5870
- [Position.BOTTOM_LEFT]: Position.BOTTOM,
5871
- [Position.BOTTOM_RIGHT]: Position.BOTTOM,
5872
- [Position.LEFT_TOP]: Position.TOP,
5873
- [Position.RIGHT_TOP]: Position.TOP
5874
- };
5875
- var Popover$2 = Popover$1;
5839
+ }
5876
5840
 
5877
5841
  var messages$6 = defineMessages({
5878
5842
  ariaLabel: {
@@ -5923,7 +5887,7 @@ const Info = ({
5923
5887
  title: title,
5924
5888
  onClose: () => setOpen(false)
5925
5889
  })]
5926
- }) : /*#__PURE__*/jsx(Popover$2, {
5890
+ }) : /*#__PURE__*/jsx(Popover$1, {
5927
5891
  content: content,
5928
5892
  preferredPlacement: preferredPlacement,
5929
5893
  title: title,
@@ -6979,14 +6943,13 @@ const getSymbolsInPatternWithPosition = pattern => {
6979
6943
  });
6980
6944
  return patternWithSymbolsPosition;
6981
6945
  };
6982
- var getSymbolsInPatternWithPosition$1 = getSymbolsInPatternWithPosition;
6983
6946
 
6984
6947
  const formatWithPattern = (value, pattern) => {
6985
6948
  if (!value || value === '') {
6986
6949
  return '';
6987
6950
  }
6988
6951
  const valueArray = value.toString().split('');
6989
- const patternWithSymbolsPosition = getSymbolsInPatternWithPosition$1(pattern);
6952
+ const patternWithSymbolsPosition = getSymbolsInPatternWithPosition(pattern);
6990
6953
  let patternSymbol = [];
6991
6954
  // valueArray.length increments during the cycle cause we are adding new elements.
6992
6955
  for (let index = 0; index < valueArray.length; index += 1) {
@@ -7001,7 +6964,6 @@ const formatWithPattern = (value, pattern) => {
7001
6964
  }
7002
6965
  return valueArray.join('');
7003
6966
  };
7004
- var formatWithPattern$1 = formatWithPattern;
7005
6967
 
7006
6968
  const unformatWithPattern = (value, pattern) => {
7007
6969
  let valueArray = [''];
@@ -7012,18 +6974,16 @@ const unformatWithPattern = (value, pattern) => {
7012
6974
  return valueArray.join('');
7013
6975
  };
7014
6976
  const getSymbolsInPattern = pattern => pattern.split('').filter(symbol => symbol !== '*');
7015
- var unformatWithPattern$1 = unformatWithPattern;
7016
6977
 
7017
- const getCountOfSymbolsInSelection = (selectionStart, selectionEnd, pattern) => getSymbolsInPatternWithPosition$1(pattern).filter(symbol => symbol.index >= selectionStart && symbol.index < selectionEnd).length;
7018
- var getCountOfSymbolsInSelection$1 = getCountOfSymbolsInSelection;
6978
+ const getCountOfSymbolsInSelection = (selectionStart, selectionEnd, pattern) => getSymbolsInPatternWithPosition(pattern).filter(symbol => symbol.index >= selectionStart && symbol.index < selectionEnd).length;
7019
6979
 
7020
6980
  const getDistanceToNextSymbol = (selectionStart, pattern) => {
7021
- const patternArray = getSymbolsInPatternWithPosition$1(pattern);
6981
+ const patternArray = getSymbolsInPatternWithPosition(pattern);
7022
6982
  const applicablePattern = patternArray.filter(symbol => symbol.index >= selectionStart);
7023
6983
  return countConsecutiveSymbols(selectionStart, applicablePattern, 'left');
7024
6984
  };
7025
6985
  const getDistanceToPreviousSymbol = (selectionStart, pattern) => {
7026
- const patternArray = getSymbolsInPatternWithPosition$1(pattern);
6986
+ const patternArray = getSymbolsInPatternWithPosition(pattern);
7027
6987
  const applicablePattern = patternArray.filter(symbol => symbol.index < selectionStart).reverse();
7028
6988
  return countConsecutiveSymbols(selectionStart, applicablePattern, 'right');
7029
6989
  };
@@ -7053,7 +7013,7 @@ const getCursorPositionAfterActionStroke = (action, selectionStart, selectionEnd
7053
7013
  }
7054
7014
  break;
7055
7015
  case 'Paste':
7056
- cursorPosition += pastedLength + getCountOfSymbolsInSelection$1(selectionStart, selectionStart + pastedLength, pattern) + getDistanceToNextSymbol(selectionStart + pastedLength, pattern);
7016
+ cursorPosition += pastedLength + getCountOfSymbolsInSelection(selectionStart, selectionStart + pastedLength, pattern) + getDistanceToNextSymbol(selectionStart + pastedLength, pattern);
7057
7017
  break;
7058
7018
  case 'Cut':
7059
7019
  case 'Delete':
@@ -7064,7 +7024,6 @@ const getCursorPositionAfterActionStroke = (action, selectionStart, selectionEnd
7064
7024
  }
7065
7025
  return cursorPosition;
7066
7026
  };
7067
- var getCursorPositionAfterKeystroke = getCursorPositionAfterActionStroke;
7068
7027
 
7069
7028
  class WithDisplayFormat extends Component {
7070
7029
  static defaultProps = {
@@ -7074,9 +7033,9 @@ class WithDisplayFormat extends Component {
7074
7033
  };
7075
7034
  constructor(props) {
7076
7035
  super(props);
7077
- const unformattedValue = unformatWithPattern$1(props.value ?? '', props.displayPattern);
7036
+ const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);
7078
7037
  this.state = {
7079
- value: formatWithPattern$1(unformattedValue, props.displayPattern),
7038
+ value: formatWithPattern(unformattedValue, props.displayPattern),
7080
7039
  historyNavigator: new HistoryNavigator$1(),
7081
7040
  prevDisplayPattern: props.displayPattern,
7082
7041
  triggerType: 'Initial',
@@ -7094,11 +7053,11 @@ class WithDisplayFormat extends Component {
7094
7053
  historyNavigator
7095
7054
  }) {
7096
7055
  if (prevDisplayPattern !== displayPattern) {
7097
- const unFormattedValue = unformatWithPattern$1(value, prevDisplayPattern);
7056
+ const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);
7098
7057
  historyNavigator.reset();
7099
7058
  return {
7100
7059
  prevDisplayPattern: displayPattern,
7101
- value: formatWithPattern$1(unFormattedValue, displayPattern),
7060
+ value: formatWithPattern(unFormattedValue, displayPattern),
7102
7061
  triggerType: null,
7103
7062
  triggerEvent: null,
7104
7063
  pastedLength: 0
@@ -7128,7 +7087,7 @@ class WithDisplayFormat extends Component {
7128
7087
  return 'Delete';
7129
7088
  }
7130
7089
  // Android Fix.
7131
- if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern$1(value, displayPattern).length) {
7090
+ if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern(value, displayPattern).length) {
7132
7091
  return 'Backspace';
7133
7092
  }
7134
7093
  return triggerEvent.key;
@@ -7166,13 +7125,13 @@ class WithDisplayFormat extends Component {
7166
7125
  // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.
7167
7126
  let newFormattedValue = '';
7168
7127
  if (this.detectUndoRedo(event) === 'Undo') {
7169
- newFormattedValue = formatWithPattern$1(historyNavigator.undo(), displayPattern);
7128
+ newFormattedValue = formatWithPattern(historyNavigator.undo(), displayPattern);
7170
7129
  this.setState({
7171
7130
  value: newFormattedValue,
7172
7131
  triggerType: 'Undo'
7173
7132
  });
7174
7133
  } else if (this.detectUndoRedo(event) === 'Redo') {
7175
- newFormattedValue = formatWithPattern$1(historyNavigator.redo(), displayPattern);
7134
+ newFormattedValue = formatWithPattern(historyNavigator.redo(), displayPattern);
7176
7135
  this.setState({
7177
7136
  value: newFormattedValue,
7178
7137
  triggerType: 'Redo'
@@ -7190,7 +7149,7 @@ class WithDisplayFormat extends Component {
7190
7149
  const {
7191
7150
  displayPattern
7192
7151
  } = this.props;
7193
- const pastedLength = unformatWithPattern$1(event.clipboardData.getData('Text'), displayPattern).length;
7152
+ const pastedLength = unformatWithPattern(event.clipboardData.getData('Text'), displayPattern).length;
7194
7153
  this.setState({
7195
7154
  triggerType: 'Paste',
7196
7155
  pastedLength
@@ -7220,7 +7179,7 @@ class WithDisplayFormat extends Component {
7220
7179
  const {
7221
7180
  value
7222
7181
  } = event.target;
7223
- let unformattedValue = unformatWithPattern$1(value, displayPattern);
7182
+ let unformattedValue = unformatWithPattern(value, displayPattern);
7224
7183
  const action = this.getUserAction(unformattedValue);
7225
7184
  if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {
7226
7185
  return;
@@ -7228,7 +7187,7 @@ class WithDisplayFormat extends Component {
7228
7187
  if (action === 'Backspace' || action === 'Delete') {
7229
7188
  unformattedValue = this.handleDelete(unformattedValue, action);
7230
7189
  }
7231
- const newFormattedValue = formatWithPattern$1(unformattedValue, displayPattern);
7190
+ const newFormattedValue = formatWithPattern(unformattedValue, displayPattern);
7232
7191
  historyNavigator.add(unformattedValue);
7233
7192
  this.handleCursorPositioning(action);
7234
7193
  this.setState({
@@ -7236,13 +7195,13 @@ class WithDisplayFormat extends Component {
7236
7195
  }, () => {
7237
7196
  this.resetEvent();
7238
7197
  if (onChange) {
7239
- const broadcastValue = unformatWithPattern$1(newFormattedValue, displayPattern);
7198
+ const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);
7240
7199
  onChange(broadcastValue);
7241
7200
  }
7242
7201
  });
7243
7202
  };
7244
7203
  handleOnBlur = event => {
7245
- this.props.onBlur?.(unformatWithPattern$1(event.target.value, this.props.displayPattern));
7204
+ this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));
7246
7205
  };
7247
7206
  handleOnFocus = event => {
7248
7207
  const {
@@ -7251,7 +7210,7 @@ class WithDisplayFormat extends Component {
7251
7210
  } = this.props;
7252
7211
  if (onFocus) {
7253
7212
  this.handleOnChange(event);
7254
- onFocus(unformatWithPattern$1(event.target.value, displayPattern));
7213
+ onFocus(unformatWithPattern(event.target.value, displayPattern));
7255
7214
  }
7256
7215
  };
7257
7216
  handleDelete = (unformattedValue, action) => {
@@ -7264,7 +7223,7 @@ class WithDisplayFormat extends Component {
7264
7223
  } = this.state;
7265
7224
  const newStack = [...unformattedValue];
7266
7225
  if (selectionStart === selectionEnd) {
7267
- let startPosition = selectionStart - getCountOfSymbolsInSelection$1(0, selectionStart, displayPattern);
7226
+ let startPosition = selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);
7268
7227
  let toDelete = 0;
7269
7228
  let count = getDistanceToNextSymbol(selectionStart, displayPattern);
7270
7229
  if (action === 'Backspace') {
@@ -7288,7 +7247,7 @@ class WithDisplayFormat extends Component {
7288
7247
  selectionEnd,
7289
7248
  pastedLength
7290
7249
  } = this.state;
7291
- const cursorPosition = getCursorPositionAfterKeystroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
7250
+ const cursorPosition = getCursorPositionAfterActionStroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
7292
7251
  setTimeout(() => {
7293
7252
  if (triggerEvent) {
7294
7253
  triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
@@ -9402,6 +9361,7 @@ const defaultSelectProps = {};
9402
9361
  const defaultDisabledCountries = [];
9403
9362
  const PhoneNumberInput = ({
9404
9363
  id,
9364
+ 'aria-labelledby': ariaLabelledBy,
9405
9365
  required,
9406
9366
  disabled,
9407
9367
  initialValue,
@@ -9464,6 +9424,7 @@ const PhoneNumberInput = ({
9464
9424
  setBroadcastedValue(internalValue);
9465
9425
  }, [onChange, broadcastedValue, internalValue]);
9466
9426
  return /*#__PURE__*/jsxs("div", {
9427
+ "aria-labelledby": ariaLabelledBy,
9467
9428
  className: "tw-telephone",
9468
9429
  children: [/*#__PURE__*/jsx("div", {
9469
9430
  className: "tw-telephone__country-select",
@@ -11090,6 +11051,8 @@ const Summary = ({
11090
11051
  className: "np-summary__title d-flex",
11091
11052
  children: [/*#__PURE__*/jsx(Body, {
11092
11053
  as: "span",
11054
+ role: "heading",
11055
+ "aria-level": 4,
11093
11056
  type: Typography.BODY_LARGE_BOLD,
11094
11057
  className: "text-primary m-b-1",
11095
11058
  children: title
@@ -11953,7 +11916,7 @@ class TypeaheadInput extends Component {
11953
11916
  autoFocus,
11954
11917
  multiple,
11955
11918
  name,
11956
- optionsShown,
11919
+ dropdownOpen,
11957
11920
  placeholder,
11958
11921
  selected,
11959
11922
  value,
@@ -11975,7 +11938,7 @@ class TypeaheadInput extends Component {
11975
11938
  autoFocus: autoFocus,
11976
11939
  placeholder: hasPlaceholder ? placeholder : '',
11977
11940
  "aria-autocomplete": "list",
11978
- "aria-expanded": optionsShown,
11941
+ "aria-expanded": dropdownOpen,
11979
11942
  "aria-haspopup": "listbox",
11980
11943
  "aria-controls": `menu-${typeaheadId}`,
11981
11944
  autoComplete: autoComplete,
@@ -12477,7 +12440,7 @@ class Typeahead extends Component {
12477
12440
  }), /*#__PURE__*/jsx(TypeaheadInput, {
12478
12441
  autoFocus,
12479
12442
  multiple,
12480
- optionsShown,
12443
+ dropdownOpen,
12481
12444
  placeholder,
12482
12445
  selected,
12483
12446
  maxHeight,
@@ -15129,5 +15092,5 @@ const translations = {
15129
15092
  'zh-HK': zhHK
15130
15093
  };
15131
15094
 
15132
- 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, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, 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, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, 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, RadioGroup, 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, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
15095
+ 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, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup$1 as DateLookup, DateMode, Decision, DecisionPresentation, 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, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, 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$1 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, RadioGroup, 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, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
15133
15096
  //# sourceMappingURL=index.esm.js.map