@transferwise/components 46.19.0 → 46.20.1

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 (67) hide show
  1. package/build/index.esm.js +61 -100
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +60 -99
  4. package/build/index.js.map +1 -1
  5. package/build/types/common/index.d.ts +0 -1
  6. package/build/types/common/panel/Panel.d.ts.map +1 -1
  7. package/build/types/common/textFormat/formatWithPattern/index.d.ts +1 -1
  8. package/build/types/common/textFormat/formatWithPattern/index.d.ts.map +1 -1
  9. package/build/types/common/textFormat/getCountOfSymbolsInSelection/getCountOfSymbolsInSelection.d.ts +1 -1
  10. package/build/types/common/textFormat/getCountOfSymbolsInSelection/getCountOfSymbolsInSelection.d.ts.map +1 -1
  11. package/build/types/common/textFormat/getCountOfSymbolsInSelection/index.d.ts +1 -1
  12. package/build/types/common/textFormat/getCountOfSymbolsInSelection/index.d.ts.map +1 -1
  13. package/build/types/common/textFormat/getCursorPositionAfterKeystroke/index.d.ts +1 -1
  14. package/build/types/common/textFormat/getCursorPositionAfterKeystroke/index.d.ts.map +1 -1
  15. package/build/types/common/textFormat/getDistanceToSymbol/getDistanceToSymbol.d.ts +2 -2
  16. package/build/types/common/textFormat/getDistanceToSymbol/getDistanceToSymbol.d.ts.map +1 -1
  17. package/build/types/common/textFormat/getDistanceToSymbol/index.d.ts +1 -1
  18. package/build/types/common/textFormat/getDistanceToSymbol/index.d.ts.map +1 -1
  19. package/build/types/common/textFormat/getSymbolsInPatternWithPosition/index.d.ts +1 -1
  20. package/build/types/common/textFormat/getSymbolsInPatternWithPosition/index.d.ts.map +1 -1
  21. package/build/types/common/textFormat/index.d.ts +7 -6
  22. package/build/types/common/textFormat/index.d.ts.map +1 -1
  23. package/build/types/common/textFormat/unformatWithPattern/index.d.ts +1 -1
  24. package/build/types/common/textFormat/unformatWithPattern/index.d.ts.map +1 -1
  25. package/build/types/index.d.ts +1 -0
  26. package/build/types/index.d.ts.map +1 -1
  27. package/build/types/info/Info.d.ts +3 -2
  28. package/build/types/info/Info.d.ts.map +1 -1
  29. package/build/types/logo/Logo.d.ts.map +1 -1
  30. package/build/types/popover/Popover.d.ts +16 -21
  31. package/build/types/popover/Popover.d.ts.map +1 -1
  32. package/build/types/popover/index.d.ts +2 -1
  33. package/build/types/popover/index.d.ts.map +1 -1
  34. package/build/types/promoCard/PromoCard.d.ts.map +1 -1
  35. package/package.json +1 -1
  36. package/src/common/index.js +0 -1
  37. package/src/common/panel/Panel.tsx +1 -0
  38. package/src/common/textFormat/getCountOfSymbolsInSelection/{getCountOfSymbolsInSelection.js → getCountOfSymbolsInSelection.ts} +5 -1
  39. package/src/common/textFormat/getCursorPositionAfterKeystroke/{getCursorPositionAfterKeystroke.spec.js → getCursorPositionAfterKeystroke.spec.ts} +15 -18
  40. package/src/common/textFormat/getDistanceToSymbol/{getDistanceToSymbol.spec.js → getDistanceToSymbol.spec.ts} +3 -3
  41. package/src/common/textFormat/getDistanceToSymbol/{getDistanceToSymbol.js → getDistanceToSymbol.ts} +8 -3
  42. package/src/index.ts +1 -0
  43. package/src/info/Info.tsx +2 -2
  44. package/src/logo/Logo.js +1 -0
  45. package/src/logo/__snapshots__/Logo.spec.js.snap +6 -0
  46. package/src/popover/{Popover.spec.js → Popover.spec.tsx} +5 -2
  47. package/src/popover/Popover.tsx +101 -0
  48. package/src/popover/__snapshots__/{Popover.spec.js.snap → Popover.spec.tsx.snap} +2 -3
  49. package/src/popover/index.ts +2 -0
  50. package/src/promoCard/PromoCard.tsx +5 -3
  51. package/build/types/common/randomId.d.ts +0 -13
  52. package/build/types/common/randomId.d.ts.map +0 -1
  53. package/src/common/randomId.ts +0 -14
  54. package/src/popover/Popover.js +0 -101
  55. package/src/popover/index.js +0 -1
  56. /package/src/common/textFormat/formatWithPattern/{formatWithPattern.spec.js → formatWithPattern.spec.ts} +0 -0
  57. /package/src/common/textFormat/formatWithPattern/{index.js → index.ts} +0 -0
  58. /package/src/common/textFormat/getCountOfSymbolsInSelection/{getCountOfSymbolsInSelection.spec.js → getCountOfSymbolsInSelection.spec.ts} +0 -0
  59. /package/src/common/textFormat/getCountOfSymbolsInSelection/{index.js → index.ts} +0 -0
  60. /package/src/common/textFormat/getCursorPositionAfterKeystroke/{index.js → index.ts} +0 -0
  61. /package/src/common/textFormat/getDistanceToSymbol/{index.js → index.ts} +0 -0
  62. /package/src/common/textFormat/getSymbolsInPatternWithPosition/{getSymbolsInPatternWithPosition.spec.js → getSymbolsInPatternWithPosition.spec.ts} +0 -0
  63. /package/src/common/textFormat/getSymbolsInPatternWithPosition/{index.js → index.ts} +0 -0
  64. /package/src/common/textFormat/{index.js → index.ts} +0 -0
  65. /package/src/common/textFormat/unformatWithPattern/{index.js → index.ts} +0 -0
  66. /package/src/common/textFormat/unformatWithPattern/{unformatWithPattern.spec.js → unformatWithPattern.spec.ts} +0 -0
  67. /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';
@@ -404,21 +404,6 @@ function getDirectionFromLocale(locale) {
404
404
  return adjustedLocale != null && RTL_LANGUAGES.includes(new Intl.Locale(adjustedLocale).language) ? Direction.RTL : Direction.LTR;
405
405
  }
406
406
 
407
- /**
408
- * generateRandomId() function
409
- *
410
- * This function generates a random string of characters that can be used as
411
- * an ID.
412
- *
413
- * @returns {string} A random string of characters.
414
- * @example
415
- * const id = generateRandomId();
416
- * // id will be a random string of characters, such as "id-4711".
417
- */
418
- const generateRandomId = () => {
419
- return `id-${Math.random().toString(36).slice(7)}`;
420
- };
421
-
422
407
  const DEFAULT_TYPE$1 = Typography.TITLE_GROUP;
423
408
  const titleTypeMapping = {
424
409
  [Typography.TITLE_SCREEN]: 'h1',
@@ -816,7 +801,7 @@ const StatusIcon = ({
816
801
  });
817
802
  };
818
803
 
819
- function logActionRequired$2(message) {
804
+ function logActionRequired$1(message) {
820
805
  if (['development', 'test'].includes(process?.env?.NODE_ENV)) {
821
806
  // eslint-disable-next-line no-console
822
807
  console.warn(message);
@@ -824,7 +809,7 @@ function logActionRequired$2(message) {
824
809
  }
825
810
  function logActionRequiredIf(message, conditional) {
826
811
  if (conditional) {
827
- logActionRequired$2(message);
812
+ logActionRequired$1(message);
828
813
  }
829
814
  }
830
815
 
@@ -855,7 +840,7 @@ const deprecated = (validator, {
855
840
  }) => (props, propertyName, ...rest) => {
856
841
  const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
857
842
  if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
858
- logActionRequired$2(deprecatedMessage({
843
+ logActionRequired$1(deprecatedMessage({
859
844
  component,
860
845
  propName: propertyName,
861
846
  message: newPropertyMessage,
@@ -884,7 +869,7 @@ function Markdown({
884
869
  }
885
870
  const linkTarget = config?.link?.target ?? '_self';
886
871
  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.');
872
+ logActionRequired$1('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
888
873
  }
889
874
  const parser = nodes => {
890
875
  const parsed = reader.parse(nodes);
@@ -1036,7 +1021,7 @@ const Alert = props => {
1036
1021
  ...props
1037
1022
  });
1038
1023
  }
1039
- logActionRequired$1(props);
1024
+ logActionRequired(props);
1040
1025
  const mappedType = deprecatedTypeMap$1[type] || type;
1041
1026
  const Icon = iconTypeMap[mappedType];
1042
1027
  function generateIcon() {
@@ -1119,7 +1104,7 @@ const deprecatedTypeMapMessage$1 = {
1119
1104
  [Sentiment.ERROR]: 'Sentiment.NEGATIVE'
1120
1105
  };
1121
1106
  const deprecatedTypes$1 = Object.keys(deprecatedTypeMap$1);
1122
- function logActionRequired$1({
1107
+ function logActionRequired({
1123
1108
  size,
1124
1109
  type
1125
1110
  }) {
@@ -3119,7 +3104,8 @@ const Panel = /*#__PURE__*/forwardRef(({
3119
3104
  onClose: onClose,
3120
3105
  children: /*#__PURE__*/jsx("div", {
3121
3106
  ...rest,
3122
- ref: setPopperElement
3107
+ ref: setPopperElement,
3108
+ role: "dialog"
3123
3109
  // eslint-disable-next-line react/forbid-dom-props
3124
3110
  ,
3125
3111
  style: {
@@ -5252,6 +5238,7 @@ const Logo = ({
5252
5238
  const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
5253
5239
  return /*#__PURE__*/jsxs("span", {
5254
5240
  "aria-label": type === LogoType.WISE ? 'Wise' : 'Wise business',
5241
+ role: "img",
5255
5242
  className: classNames(className, 'np-logo'),
5256
5243
  children: [/*#__PURE__*/jsx(LogoSm, {
5257
5244
  className: "np-logo-svg np-logo-svg--size-sm"
@@ -5775,22 +5762,33 @@ const Modal = ({
5775
5762
  });
5776
5763
  };
5777
5764
 
5778
- const Popover$1 = ({
5765
+ function resolvePlacement(preferredPlacement) {
5766
+ switch (preferredPlacement) {
5767
+ case 'left-top':
5768
+ case 'right-top':
5769
+ return 'top';
5770
+ case 'bottom-left':
5771
+ case 'bottom-right':
5772
+ return 'bottom';
5773
+ }
5774
+ return preferredPlacement;
5775
+ }
5776
+ function Popover$1({
5779
5777
  children,
5780
5778
  className,
5781
5779
  content,
5782
- preferredPlacement,
5780
+ preferredPlacement = Position.RIGHT,
5783
5781
  title,
5784
5782
  onClose
5785
- }) => {
5786
- logActionRequired({
5787
- preferredPlacement
5788
- });
5783
+ }) {
5784
+ const resolvedPlacement = resolvePlacement(preferredPlacement);
5785
+ useEffect(() => {
5786
+ if (resolvedPlacement !== preferredPlacement) {
5787
+ logActionRequired$1(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
5788
+ }
5789
+ }, [preferredPlacement, resolvedPlacement]);
5789
5790
  const anchorReference = useRef(null);
5790
5791
  const [open, setOpen] = useState(false);
5791
- const {
5792
- isModern
5793
- } = useTheme();
5794
5792
  const handleOnClose = () => {
5795
5793
  setOpen(false);
5796
5794
  onClose?.();
@@ -5800,25 +5798,21 @@ const Popover$1 = ({
5800
5798
  children: [/*#__PURE__*/jsx("span", {
5801
5799
  ref: anchorReference,
5802
5800
  className: "d-inline-block",
5803
- children: /*#__PURE__*/cloneElement(children, {
5801
+ children: /*#__PURE__*/isValidElement(children) ? /*#__PURE__*/cloneElement(children, {
5804
5802
  onClick: () => {
5805
- if (children?.props?.onClick) {
5806
- children.props.onClick();
5807
- }
5808
- setOpen(!open);
5803
+ children.props.onClick?.();
5804
+ setOpen(prevOpen => !prevOpen);
5809
5805
  }
5810
- })
5806
+ }) : children
5811
5807
  }), /*#__PURE__*/jsx(ResponsivePanel$1, {
5812
5808
  open: open,
5813
5809
  anchorRef: anchorReference,
5814
- position: deprecatedPlacements[preferredPlacement] || preferredPlacement,
5810
+ position: resolvedPlacement,
5815
5811
  arrow: true,
5816
5812
  className: "np-popover__container",
5817
5813
  onClose: handleOnClose,
5818
5814
  children: /*#__PURE__*/jsxs("div", {
5819
- className: isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content',
5820
- "aria-hidden": !open,
5821
- role: "dialog",
5815
+ className: "np-popover__content np-text-default-body",
5822
5816
  children: [title && /*#__PURE__*/jsx(Title, {
5823
5817
  type: Typography.TITLE_BODY,
5824
5818
  className: "m-b-1",
@@ -5827,36 +5821,7 @@ const Popover$1 = ({
5827
5821
  })
5828
5822
  })]
5829
5823
  });
5830
- };
5831
- const logActionRequired = ({
5832
- preferredPlacement
5833
- }) => {
5834
- logActionRequiredIf(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${deprecatedPlacements[preferredPlacement]} instead.`, deprecatedPlacements[preferredPlacement]);
5835
- };
5836
- Popover$1.defaultProps = {
5837
- className: undefined,
5838
- preferredPlacement: Position.RIGHT,
5839
- title: undefined
5840
- };
5841
- Popover$1.propTypes = {
5842
- children: PropTypes.node.isRequired,
5843
- className: PropTypes.string,
5844
- content: PropTypes.node.isRequired,
5845
- /**
5846
- * `'left-top'` / `'right-top'` are deprecated use `Position.TOP` / `'top'` instead,
5847
- * `'bottom-right'` / `'bottom-left'` are deprecated use `Position.BOTTOM` / `'bottom'` instead
5848
- */
5849
- preferredPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left', 'left-top', 'right-top', 'bottom-right', 'bottom-left']),
5850
- onClose: PropTypes.func,
5851
- title: PropTypes.node
5852
- };
5853
- const deprecatedPlacements = {
5854
- [Position.BOTTOM_LEFT]: Position.BOTTOM,
5855
- [Position.BOTTOM_RIGHT]: Position.BOTTOM,
5856
- [Position.LEFT_TOP]: Position.TOP,
5857
- [Position.RIGHT_TOP]: Position.TOP
5858
- };
5859
- var Popover$2 = Popover$1;
5824
+ }
5860
5825
 
5861
5826
  var messages$6 = defineMessages({
5862
5827
  ariaLabel: {
@@ -5907,7 +5872,7 @@ const Info = ({
5907
5872
  title: title,
5908
5873
  onClose: () => setOpen(false)
5909
5874
  })]
5910
- }) : /*#__PURE__*/jsx(Popover$2, {
5875
+ }) : /*#__PURE__*/jsx(Popover$1, {
5911
5876
  content: content,
5912
5877
  preferredPlacement: preferredPlacement,
5913
5878
  title: title,
@@ -6963,14 +6928,13 @@ const getSymbolsInPatternWithPosition = pattern => {
6963
6928
  });
6964
6929
  return patternWithSymbolsPosition;
6965
6930
  };
6966
- var getSymbolsInPatternWithPosition$1 = getSymbolsInPatternWithPosition;
6967
6931
 
6968
6932
  const formatWithPattern = (value, pattern) => {
6969
6933
  if (!value || value === '') {
6970
6934
  return '';
6971
6935
  }
6972
6936
  const valueArray = value.toString().split('');
6973
- const patternWithSymbolsPosition = getSymbolsInPatternWithPosition$1(pattern);
6937
+ const patternWithSymbolsPosition = getSymbolsInPatternWithPosition(pattern);
6974
6938
  let patternSymbol = [];
6975
6939
  // valueArray.length increments during the cycle cause we are adding new elements.
6976
6940
  for (let index = 0; index < valueArray.length; index += 1) {
@@ -6985,7 +6949,6 @@ const formatWithPattern = (value, pattern) => {
6985
6949
  }
6986
6950
  return valueArray.join('');
6987
6951
  };
6988
- var formatWithPattern$1 = formatWithPattern;
6989
6952
 
6990
6953
  const unformatWithPattern = (value, pattern) => {
6991
6954
  let valueArray = [''];
@@ -6996,18 +6959,16 @@ const unformatWithPattern = (value, pattern) => {
6996
6959
  return valueArray.join('');
6997
6960
  };
6998
6961
  const getSymbolsInPattern = pattern => pattern.split('').filter(symbol => symbol !== '*');
6999
- var unformatWithPattern$1 = unformatWithPattern;
7000
6962
 
7001
- const getCountOfSymbolsInSelection = (selectionStart, selectionEnd, pattern) => getSymbolsInPatternWithPosition$1(pattern).filter(symbol => symbol.index >= selectionStart && symbol.index < selectionEnd).length;
7002
- var getCountOfSymbolsInSelection$1 = getCountOfSymbolsInSelection;
6963
+ const getCountOfSymbolsInSelection = (selectionStart, selectionEnd, pattern) => getSymbolsInPatternWithPosition(pattern).filter(symbol => symbol.index >= selectionStart && symbol.index < selectionEnd).length;
7003
6964
 
7004
6965
  const getDistanceToNextSymbol = (selectionStart, pattern) => {
7005
- const patternArray = getSymbolsInPatternWithPosition$1(pattern);
6966
+ const patternArray = getSymbolsInPatternWithPosition(pattern);
7006
6967
  const applicablePattern = patternArray.filter(symbol => symbol.index >= selectionStart);
7007
6968
  return countConsecutiveSymbols(selectionStart, applicablePattern, 'left');
7008
6969
  };
7009
6970
  const getDistanceToPreviousSymbol = (selectionStart, pattern) => {
7010
- const patternArray = getSymbolsInPatternWithPosition$1(pattern);
6971
+ const patternArray = getSymbolsInPatternWithPosition(pattern);
7011
6972
  const applicablePattern = patternArray.filter(symbol => symbol.index < selectionStart).reverse();
7012
6973
  return countConsecutiveSymbols(selectionStart, applicablePattern, 'right');
7013
6974
  };
@@ -7037,7 +6998,7 @@ const getCursorPositionAfterActionStroke = (action, selectionStart, selectionEnd
7037
6998
  }
7038
6999
  break;
7039
7000
  case 'Paste':
7040
- cursorPosition += pastedLength + getCountOfSymbolsInSelection$1(selectionStart, selectionStart + pastedLength, pattern) + getDistanceToNextSymbol(selectionStart + pastedLength, pattern);
7001
+ cursorPosition += pastedLength + getCountOfSymbolsInSelection(selectionStart, selectionStart + pastedLength, pattern) + getDistanceToNextSymbol(selectionStart + pastedLength, pattern);
7041
7002
  break;
7042
7003
  case 'Cut':
7043
7004
  case 'Delete':
@@ -7048,7 +7009,6 @@ const getCursorPositionAfterActionStroke = (action, selectionStart, selectionEnd
7048
7009
  }
7049
7010
  return cursorPosition;
7050
7011
  };
7051
- var getCursorPositionAfterKeystroke = getCursorPositionAfterActionStroke;
7052
7012
 
7053
7013
  class WithDisplayFormat extends Component {
7054
7014
  static defaultProps = {
@@ -7058,9 +7018,9 @@ class WithDisplayFormat extends Component {
7058
7018
  };
7059
7019
  constructor(props) {
7060
7020
  super(props);
7061
- const unformattedValue = unformatWithPattern$1(props.value ?? '', props.displayPattern);
7021
+ const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);
7062
7022
  this.state = {
7063
- value: formatWithPattern$1(unformattedValue, props.displayPattern),
7023
+ value: formatWithPattern(unformattedValue, props.displayPattern),
7064
7024
  historyNavigator: new HistoryNavigator$1(),
7065
7025
  prevDisplayPattern: props.displayPattern,
7066
7026
  triggerType: 'Initial',
@@ -7078,11 +7038,11 @@ class WithDisplayFormat extends Component {
7078
7038
  historyNavigator
7079
7039
  }) {
7080
7040
  if (prevDisplayPattern !== displayPattern) {
7081
- const unFormattedValue = unformatWithPattern$1(value, prevDisplayPattern);
7041
+ const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);
7082
7042
  historyNavigator.reset();
7083
7043
  return {
7084
7044
  prevDisplayPattern: displayPattern,
7085
- value: formatWithPattern$1(unFormattedValue, displayPattern),
7045
+ value: formatWithPattern(unFormattedValue, displayPattern),
7086
7046
  triggerType: null,
7087
7047
  triggerEvent: null,
7088
7048
  pastedLength: 0
@@ -7112,7 +7072,7 @@ class WithDisplayFormat extends Component {
7112
7072
  return 'Delete';
7113
7073
  }
7114
7074
  // Android Fix.
7115
- if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern$1(value, displayPattern).length) {
7075
+ if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern(value, displayPattern).length) {
7116
7076
  return 'Backspace';
7117
7077
  }
7118
7078
  return triggerEvent.key;
@@ -7150,13 +7110,13 @@ class WithDisplayFormat extends Component {
7150
7110
  // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.
7151
7111
  let newFormattedValue = '';
7152
7112
  if (this.detectUndoRedo(event) === 'Undo') {
7153
- newFormattedValue = formatWithPattern$1(historyNavigator.undo(), displayPattern);
7113
+ newFormattedValue = formatWithPattern(historyNavigator.undo(), displayPattern);
7154
7114
  this.setState({
7155
7115
  value: newFormattedValue,
7156
7116
  triggerType: 'Undo'
7157
7117
  });
7158
7118
  } else if (this.detectUndoRedo(event) === 'Redo') {
7159
- newFormattedValue = formatWithPattern$1(historyNavigator.redo(), displayPattern);
7119
+ newFormattedValue = formatWithPattern(historyNavigator.redo(), displayPattern);
7160
7120
  this.setState({
7161
7121
  value: newFormattedValue,
7162
7122
  triggerType: 'Redo'
@@ -7174,7 +7134,7 @@ class WithDisplayFormat extends Component {
7174
7134
  const {
7175
7135
  displayPattern
7176
7136
  } = this.props;
7177
- const pastedLength = unformatWithPattern$1(event.clipboardData.getData('Text'), displayPattern).length;
7137
+ const pastedLength = unformatWithPattern(event.clipboardData.getData('Text'), displayPattern).length;
7178
7138
  this.setState({
7179
7139
  triggerType: 'Paste',
7180
7140
  pastedLength
@@ -7204,7 +7164,7 @@ class WithDisplayFormat extends Component {
7204
7164
  const {
7205
7165
  value
7206
7166
  } = event.target;
7207
- let unformattedValue = unformatWithPattern$1(value, displayPattern);
7167
+ let unformattedValue = unformatWithPattern(value, displayPattern);
7208
7168
  const action = this.getUserAction(unformattedValue);
7209
7169
  if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {
7210
7170
  return;
@@ -7212,7 +7172,7 @@ class WithDisplayFormat extends Component {
7212
7172
  if (action === 'Backspace' || action === 'Delete') {
7213
7173
  unformattedValue = this.handleDelete(unformattedValue, action);
7214
7174
  }
7215
- const newFormattedValue = formatWithPattern$1(unformattedValue, displayPattern);
7175
+ const newFormattedValue = formatWithPattern(unformattedValue, displayPattern);
7216
7176
  historyNavigator.add(unformattedValue);
7217
7177
  this.handleCursorPositioning(action);
7218
7178
  this.setState({
@@ -7220,13 +7180,13 @@ class WithDisplayFormat extends Component {
7220
7180
  }, () => {
7221
7181
  this.resetEvent();
7222
7182
  if (onChange) {
7223
- const broadcastValue = unformatWithPattern$1(newFormattedValue, displayPattern);
7183
+ const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);
7224
7184
  onChange(broadcastValue);
7225
7185
  }
7226
7186
  });
7227
7187
  };
7228
7188
  handleOnBlur = event => {
7229
- this.props.onBlur?.(unformatWithPattern$1(event.target.value, this.props.displayPattern));
7189
+ this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));
7230
7190
  };
7231
7191
  handleOnFocus = event => {
7232
7192
  const {
@@ -7235,7 +7195,7 @@ class WithDisplayFormat extends Component {
7235
7195
  } = this.props;
7236
7196
  if (onFocus) {
7237
7197
  this.handleOnChange(event);
7238
- onFocus(unformatWithPattern$1(event.target.value, displayPattern));
7198
+ onFocus(unformatWithPattern(event.target.value, displayPattern));
7239
7199
  }
7240
7200
  };
7241
7201
  handleDelete = (unformattedValue, action) => {
@@ -7248,7 +7208,7 @@ class WithDisplayFormat extends Component {
7248
7208
  } = this.state;
7249
7209
  const newStack = [...unformattedValue];
7250
7210
  if (selectionStart === selectionEnd) {
7251
- let startPosition = selectionStart - getCountOfSymbolsInSelection$1(0, selectionStart, displayPattern);
7211
+ let startPosition = selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);
7252
7212
  let toDelete = 0;
7253
7213
  let count = getDistanceToNextSymbol(selectionStart, displayPattern);
7254
7214
  if (action === 'Backspace') {
@@ -7272,7 +7232,7 @@ class WithDisplayFormat extends Component {
7272
7232
  selectionEnd,
7273
7233
  pastedLength
7274
7234
  } = this.state;
7275
- const cursorPosition = getCursorPositionAfterKeystroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
7235
+ const cursorPosition = getCursorPositionAfterActionStroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
7276
7236
  setTimeout(() => {
7277
7237
  if (triggerEvent) {
7278
7238
  triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
@@ -9660,7 +9620,8 @@ const PromoCard = /*#__PURE__*/forwardRef(({
9660
9620
  setChecked(!checked); // Update local state for checkbox
9661
9621
  }
9662
9622
  };
9663
- const componentId = `${id || generateRandomId()}`;
9623
+ const fallbackId = useId();
9624
+ const componentId = id || fallbackId;
9664
9625
  // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
9665
9626
  // `'download'` if `download` is truthy. If neither condition is true, set
9666
9627
  // `icon` to `undefined`.
@@ -15117,5 +15078,5 @@ const translations = {
15117
15078
  'zh-HK': zhHK
15118
15079
  };
15119
15080
 
15120
- 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$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 };
15081
+ 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 };
15121
15082
  //# sourceMappingURL=index.esm.js.map