@transferwise/components 0.0.0-experimental-eaf43c2 → 0.0.0-experimental-6730b89

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 (139) hide show
  1. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  2. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  3. package/build/avatarView/AvatarView.js +8 -4
  4. package/build/avatarView/AvatarView.js.map +1 -1
  5. package/build/avatarView/AvatarView.mjs +8 -4
  6. package/build/avatarView/AvatarView.mjs.map +1 -1
  7. package/build/avatarView/{NotificationDot.js → Dot.js} +14 -12
  8. package/build/avatarView/Dot.js.map +1 -0
  9. package/build/avatarView/{NotificationDot.mjs → Dot.mjs} +14 -12
  10. package/build/avatarView/Dot.mjs.map +1 -0
  11. package/build/i18n/en.json +0 -2
  12. package/build/i18n/en.json.js +0 -2
  13. package/build/i18n/en.json.js.map +1 -1
  14. package/build/i18n/en.json.mjs +0 -2
  15. package/build/i18n/en.json.mjs.map +1 -1
  16. package/build/index.js +0 -2
  17. package/build/index.js.map +1 -1
  18. package/build/index.mjs +0 -1
  19. package/build/index.mjs.map +1 -1
  20. package/build/main.css +17 -69
  21. package/build/styles/avatarView/AvatarView.css +17 -11
  22. package/build/styles/avatarView/Dot.css +26 -0
  23. package/build/styles/main.css +17 -69
  24. package/build/types/avatarLayout/AvatarLayout.d.ts +1 -1
  25. package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
  26. package/build/types/avatarView/AvatarView.d.ts +4 -1
  27. package/build/types/avatarView/AvatarView.d.ts.map +1 -1
  28. package/build/types/avatarView/Dot.d.ts +8 -0
  29. package/build/types/avatarView/Dot.d.ts.map +1 -0
  30. package/build/types/index.d.ts +0 -2
  31. package/build/types/index.d.ts.map +1 -1
  32. package/build/types/test-utils/index.d.ts +0 -4
  33. package/build/types/test-utils/index.d.ts.map +1 -1
  34. package/package.json +2 -3
  35. package/src/avatarLayout/AvatarLayout.tsx +1 -1
  36. package/src/avatarView/AvatarView.css +17 -11
  37. package/src/avatarView/AvatarView.less +1 -1
  38. package/src/avatarView/AvatarView.story.tsx +37 -0
  39. package/src/avatarView/AvatarView.tsx +13 -6
  40. package/src/avatarView/Dot.css +26 -0
  41. package/src/avatarView/Dot.less +31 -0
  42. package/src/avatarView/Dot.tsx +42 -0
  43. package/src/i18n/en.json +0 -2
  44. package/src/index.ts +0 -2
  45. package/src/listItem/AvatarView/ListItemAvatarView.story.tsx +69 -2
  46. package/src/main.css +17 -69
  47. package/src/main.less +0 -1
  48. package/src/ssr.spec.tsx +0 -1
  49. package/build/avatarView/NotificationDot.js.map +0 -1
  50. package/build/avatarView/NotificationDot.mjs.map +0 -1
  51. package/build/moneyInputField/AmountInput.js +0 -284
  52. package/build/moneyInputField/AmountInput.js.map +0 -1
  53. package/build/moneyInputField/AmountInput.mjs +0 -282
  54. package/build/moneyInputField/AmountInput.mjs.map +0 -1
  55. package/build/moneyInputField/AnimatedNumber.js +0 -50
  56. package/build/moneyInputField/AnimatedNumber.js.map +0 -1
  57. package/build/moneyInputField/AnimatedNumber.mjs +0 -48
  58. package/build/moneyInputField/AnimatedNumber.mjs.map +0 -1
  59. package/build/moneyInputField/Chevron.js +0 -33
  60. package/build/moneyInputField/Chevron.js.map +0 -1
  61. package/build/moneyInputField/Chevron.mjs +0 -31
  62. package/build/moneyInputField/Chevron.mjs.map +0 -1
  63. package/build/moneyInputField/CurrencySelector.js +0 -160
  64. package/build/moneyInputField/CurrencySelector.js.map +0 -1
  65. package/build/moneyInputField/CurrencySelector.mjs +0 -157
  66. package/build/moneyInputField/CurrencySelector.mjs.map +0 -1
  67. package/build/moneyInputField/MoneyInputField.js +0 -113
  68. package/build/moneyInputField/MoneyInputField.js.map +0 -1
  69. package/build/moneyInputField/MoneyInputField.messages.js +0 -17
  70. package/build/moneyInputField/MoneyInputField.messages.js.map +0 -1
  71. package/build/moneyInputField/MoneyInputField.messages.mjs +0 -13
  72. package/build/moneyInputField/MoneyInputField.messages.mjs.map +0 -1
  73. package/build/moneyInputField/MoneyInputField.mjs +0 -109
  74. package/build/moneyInputField/MoneyInputField.mjs.map +0 -1
  75. package/build/moneyInputField/useFocus.js +0 -37
  76. package/build/moneyInputField/useFocus.js.map +0 -1
  77. package/build/moneyInputField/useFocus.mjs +0 -35
  78. package/build/moneyInputField/useFocus.mjs.map +0 -1
  79. package/build/moneyInputField/useInputStyle.js +0 -71
  80. package/build/moneyInputField/useInputStyle.js.map +0 -1
  81. package/build/moneyInputField/useInputStyle.mjs +0 -69
  82. package/build/moneyInputField/useInputStyle.mjs.map +0 -1
  83. package/build/moneyInputField/utils.js +0 -87
  84. package/build/moneyInputField/utils.js.map +0 -1
  85. package/build/moneyInputField/utils.mjs +0 -78
  86. package/build/moneyInputField/utils.mjs.map +0 -1
  87. package/build/styles/avatarView/NotificationDot.css +0 -20
  88. package/build/styles/moneyInputField/AmountInput.css +0 -32
  89. package/build/styles/moneyInputField/Chevron.css +0 -12
  90. package/build/styles/moneyInputField/CurrencySelector.css +0 -6
  91. package/build/styles/moneyInputField/MoneyInputField.css +0 -58
  92. package/build/types/avatarView/NotificationDot.d.ts +0 -8
  93. package/build/types/avatarView/NotificationDot.d.ts.map +0 -1
  94. package/build/types/moneyInputField/AmountInput.d.ts +0 -13
  95. package/build/types/moneyInputField/AmountInput.d.ts.map +0 -1
  96. package/build/types/moneyInputField/AnimatedNumber.d.ts +0 -9
  97. package/build/types/moneyInputField/AnimatedNumber.d.ts.map +0 -1
  98. package/build/types/moneyInputField/Chevron.d.ts +0 -6
  99. package/build/types/moneyInputField/Chevron.d.ts.map +0 -1
  100. package/build/types/moneyInputField/CurrencySelector.d.ts +0 -30
  101. package/build/types/moneyInputField/CurrencySelector.d.ts.map +0 -1
  102. package/build/types/moneyInputField/MoneyInputField.d.ts +0 -30
  103. package/build/types/moneyInputField/MoneyInputField.d.ts.map +0 -1
  104. package/build/types/moneyInputField/MoneyInputField.messages.d.ts +0 -12
  105. package/build/types/moneyInputField/MoneyInputField.messages.d.ts.map +0 -1
  106. package/build/types/moneyInputField/index.d.ts +0 -3
  107. package/build/types/moneyInputField/index.d.ts.map +0 -1
  108. package/build/types/moneyInputField/useFocus.d.ts +0 -7
  109. package/build/types/moneyInputField/useFocus.d.ts.map +0 -1
  110. package/build/types/moneyInputField/useInputStyle.d.ts +0 -10
  111. package/build/types/moneyInputField/useInputStyle.d.ts.map +0 -1
  112. package/build/types/moneyInputField/useSelectionRange.d.ts +0 -10
  113. package/build/types/moneyInputField/useSelectionRange.d.ts.map +0 -1
  114. package/build/types/moneyInputField/utils.d.ts +0 -22
  115. package/build/types/moneyInputField/utils.d.ts.map +0 -1
  116. package/src/avatarView/NotificationDot.css +0 -20
  117. package/src/avatarView/NotificationDot.less +0 -24
  118. package/src/avatarView/NotificationDot.tsx +0 -35
  119. package/src/moneyInputField/AmountInput.css +0 -32
  120. package/src/moneyInputField/AmountInput.less +0 -43
  121. package/src/moneyInputField/AmountInput.tsx +0 -355
  122. package/src/moneyInputField/AnimatedNumber.tsx +0 -40
  123. package/src/moneyInputField/Chevron.css +0 -12
  124. package/src/moneyInputField/Chevron.less +0 -13
  125. package/src/moneyInputField/Chevron.tsx +0 -35
  126. package/src/moneyInputField/CurrencySelector.css +0 -6
  127. package/src/moneyInputField/CurrencySelector.less +0 -7
  128. package/src/moneyInputField/CurrencySelector.tsx +0 -219
  129. package/src/moneyInputField/MoneyInputField.css +0 -58
  130. package/src/moneyInputField/MoneyInputField.less +0 -13
  131. package/src/moneyInputField/MoneyInputField.messages.ts +0 -13
  132. package/src/moneyInputField/MoneyInputField.story.tsx +0 -188
  133. package/src/moneyInputField/MoneyInputField.tsx +0 -123
  134. package/src/moneyInputField/index.ts +0 -2
  135. package/src/moneyInputField/useFocus.ts +0 -35
  136. package/src/moneyInputField/useInputStyle.ts +0 -85
  137. package/src/moneyInputField/useSelectionRange.ts +0 -23
  138. package/src/moneyInputField/utils.spec.ts +0 -114
  139. package/src/moneyInputField/utils.ts +0 -116
@@ -1,282 +0,0 @@
1
- import { formatAmount } from '@transferwise/formatting';
2
- import { clsx } from 'clsx';
3
- import { AnimatePresence } from 'framer-motion';
4
- import { useState, useMemo, useRef, useEffect } from 'react';
5
- import { useIntl } from 'react-intl';
6
- import { AnimatedNumber } from './AnimatedNumber.mjs';
7
- import { useFocus } from './useFocus.mjs';
8
- import { useInputStyle } from './useInputStyle.mjs';
9
- import { getFormattedString, getUnformattedNumber, getGroupSeparator, getDecimalSeparator, getDecimalCount, isInputPossiblyOverflowing, isAllowedInputKey, getEnteredDecimalsCount } from './utils.mjs';
10
- import { jsxs, jsx } from 'react/jsx-runtime';
11
-
12
- const AmountInput = ({
13
- id,
14
- describedById,
15
- amount,
16
- currency,
17
- autoFocus,
18
- onChange,
19
- onFocusChange,
20
- loading
21
- }) => {
22
- const intl = useIntl();
23
- const {
24
- focus,
25
- setFocus,
26
- visualFocus,
27
- setVisualFocus
28
- } = useFocus();
29
- const [value, setValue] = useState(amount ? getFormattedString({
30
- value: amount,
31
- currency,
32
- locale: intl.locale
33
- }) : '');
34
- const numericValue = useMemo(() => {
35
- return getUnformattedNumber({
36
- value,
37
- currency,
38
- locale: intl.locale
39
- });
40
- }, [value, currency, intl.locale]);
41
- const valueWithFullDecimals = useMemo(() => {
42
- return getFormattedString({
43
- value: numericValue ?? 0,
44
- currency,
45
- locale: intl.locale,
46
- alwaysShowDecimals: true
47
- });
48
- }, [numericValue, currency, intl.locale]);
49
- const ref = useRef(null);
50
- useEffect(() => {
51
- if (autoFocus) {
52
- ref.current?.focus();
53
- }
54
- }, []);
55
- const placeholder = getPlaceholder(currency, intl.locale);
56
- const groupSeparator = getGroupSeparator(currency, intl.locale);
57
- const decimalSeparator = getDecimalSeparator(currency, intl.locale);
58
- const maxDecimalCount = getDecimalCount(currency, intl.locale);
59
- const decimalPart = getDecimalPart(value, decimalSeparator);
60
- const decimalMode = decimalSeparator && value.includes(decimalSeparator);
61
- useEffect(() => {
62
- if (!focus) {
63
- setValue(amount ? getFormattedString({
64
- value: amount,
65
- currency,
66
- locale: intl.locale
67
- }) : '');
68
- }
69
- // eslint-disable-next-line react-hooks/exhaustive-deps
70
- }, [amount]);
71
- useEffect(() => {
72
- onFocusChange?.(visualFocus);
73
- }, [visualFocus]);
74
- const shouldReformatAfterUserInput = newValue => {
75
- // don't reformat if formatting would wipe out user's input
76
- if (reformatValue(newValue) === '') {
77
- return false;
78
- }
79
- const endsWithDecimalSeparator = decimalSeparator && newValue.endsWith(decimalSeparator);
80
- const endsWithGroupSeparator = groupSeparator && newValue.endsWith(groupSeparator);
81
- // if the user has entered a seperator to the end, formatting would delete it
82
- if (endsWithDecimalSeparator || endsWithGroupSeparator) {
83
- return false;
84
- }
85
- const containsDecimalSeparator = decimalSeparator && newValue.includes(decimalSeparator);
86
- if (containsDecimalSeparator) {
87
- const enteredDecimalsCount = getEnteredDecimalsCount(newValue, decimalSeparator);
88
- // don't reformat until user has entered all the allowed decimals
89
- // for example, we don't want 1.1 to be reformatted to 1.10 immediately
90
- if (enteredDecimalsCount < maxDecimalCount) {
91
- return false;
92
- }
93
- }
94
- return true;
95
- };
96
- const reformatValue = newValue => {
97
- const unformattedValue = getUnformattedNumber({
98
- value: newValue,
99
- currency,
100
- locale: intl.locale
101
- });
102
- const formattedValue = unformattedValue ? getFormattedString({
103
- value: unformattedValue,
104
- currency,
105
- locale: intl.locale
106
- }) : '';
107
- return formattedValue;
108
- };
109
- const handleChange = newValue => {
110
- const oldCursorPosition = ref.current?.selectionStart ?? 0;
111
- const newFormattedString = shouldReformatAfterUserInput(newValue) ? reformatValue(newValue) : newValue;
112
- setValue(newFormattedString);
113
- const newNumber = getUnformattedNumber({
114
- value: newFormattedString,
115
- currency,
116
- locale: intl.locale
117
- });
118
- if (newNumber !== numericValue) {
119
- if (numericValue || newNumber) {
120
- onChange(newNumber);
121
- }
122
- }
123
- const newCursorPosition = oldCursorPosition + (newFormattedString.length - newValue.length);
124
- requestAnimationFrame(() => {
125
- ref?.current?.setSelectionRange(newCursorPosition, newCursorPosition);
126
- });
127
- };
128
- const handlePaste = e => {
129
- e.preventDefault();
130
- const clipboardData = e.clipboardData?.getData('text/plain');
131
- if (!clipboardData) {
132
- return;
133
- }
134
- // need to sanitise the pasted value otherwise other validation logic will ignore the input entirely
135
- const sanitisedValue = reformatValue(clipboardData);
136
- handleChange(sanitisedValue);
137
- };
138
- const handleBlur = () => {
139
- setFocus(false);
140
- setValue(reformatValue(value));
141
- };
142
- const handleBackspace = e => {
143
- const input = e.target;
144
- // using the updated selection range after the backspace key has been processed, instead of the current selection range in state
145
- const {
146
- value: currentValue,
147
- selectionStart,
148
- selectionEnd
149
- } = input;
150
- if (selectionStart === selectionEnd && selectionStart && selectionStart > 0) {
151
- const charBeforeCursor = currentValue[selectionStart - 1];
152
- // if the user deletes a thousands separator, remove the digit before it as well
153
- if (charBeforeCursor === groupSeparator) {
154
- e.preventDefault();
155
- const beforeCursor = currentValue.slice(0, selectionStart - 2);
156
- const afterCursor = currentValue.slice(selectionStart);
157
- const newValue = `${beforeCursor}${afterCursor}`;
158
- input.setSelectionRange(beforeCursor.length, beforeCursor.length);
159
- handleChange(newValue);
160
- }
161
- }
162
- };
163
- const handleKeyDown = e => {
164
- setFocus(true);
165
- if (!isAllowedInputKey(e)) {
166
- e.preventDefault();
167
- }
168
- if (e.key === 'Backspace') {
169
- handleBackspace(e);
170
- }
171
- };
172
- const isAllowedInput = e => {
173
- const hasMultipleDecimalSeparators = decimalSeparator && e.target.value.split(decimalSeparator).length > 2;
174
- if (hasMultipleDecimalSeparators) {
175
- return false;
176
- }
177
- const newNumericValue = getUnformattedNumber({
178
- value: e.target.value,
179
- currency,
180
- locale: intl.locale
181
- });
182
- const maxLength = Number.MAX_SAFE_INTEGER.toString().length;
183
- if (String(newNumericValue).length > maxLength) {
184
- return false;
185
- }
186
- return true;
187
- };
188
- const addonContent = useMemo(() => {
189
- // because we're using a separate "addon" element for the placeholder decimals, there is a possibility that the input itself will become scrollable
190
- // and the decimals will appear on top of the input. Safest thing to do is to just hide the addon if there is not enough room
191
- if (isInputPossiblyOverflowing({
192
- ref,
193
- value
194
- })) {
195
- return null;
196
- }
197
- if (!decimalSeparator || !value) {
198
- return null;
199
- }
200
- // if the user has typed a decimal separator, show the full decimal part as a placeholder
201
- // this returns a string even if there is no content, typing should replace the placeholder immediately without animation
202
- // otherwise there is an ugly animation when going from 1.23 to 1.2 due to AnimatePresence
203
- if (focus && decimalMode) {
204
- // reuse getDecimalPart
205
- const fullDecimalPart = getDecimalPart(valueWithFullDecimals, decimalSeparator);
206
- // show only the characters that are not already displayed by the input
207
- return fullDecimalPart?.slice(decimalPart?.length);
208
- }
209
- // in unfocused state, always show the full decimal part unless the user has already entered decimals
210
- if (!focus && !decimalMode) {
211
- const [_, decimalPlaceholder] = placeholder.split(decimalSeparator);
212
- return decimalSeparator + decimalPlaceholder;
213
- }
214
- return null;
215
- }, [decimalMode, decimalPart?.length, decimalSeparator, focus, placeholder, value, valueWithFullDecimals]);
216
- const style = useInputStyle({
217
- // whenever decimals are shown, we need to account for the full decimal part for the font size calculation
218
- value: addonContent ? valueWithFullDecimals : value,
219
- focus: visualFocus,
220
- inputElement: ref.current,
221
- loading
222
- });
223
- const getInputMask = () => {
224
- return '';
225
- };
226
- return /*#__PURE__*/jsxs("div", {
227
- className: "wds-amount-input-container",
228
- children: [/*#__PURE__*/jsxs("div", {
229
- className: "wds-amount-input-input-container display-2",
230
- style: style,
231
- children: [/*#__PURE__*/jsx("input", {
232
- ref: ref,
233
- className: "wds-amount-input-input",
234
- id: id,
235
- autoComplete: "off",
236
- inputMode: "decimal",
237
- value: value,
238
- type: "text",
239
- placeholder: placeholder,
240
- "aria-describedby": describedById
241
- /* without this, the input tries to keep an aspect ratio and doesn't respect CSS width rules */,
242
- size: 1,
243
- onChange: e => {
244
- if (isAllowedInput(e)) {
245
- handleChange(e.target.value);
246
- }
247
- },
248
- onBlurCapture: () => handleBlur(),
249
- onPaste: e => handlePaste(e),
250
- onFocus: () => {
251
- setFocus(true);
252
- },
253
- onBlur: () => {
254
- setTimeout(() => setVisualFocus(false), 30);
255
- },
256
- onKeyDown: e => handleKeyDown(e)
257
- }), /*#__PURE__*/jsx(AnimatePresence, {
258
- initial: false,
259
- children: addonContent !== null && /*#__PURE__*/jsx(AnimatedNumber, {
260
- className: clsx('wds-amount-input-placeholder', visualFocus && 'wds-amount-input-placeholder-focus'),
261
- onClick: () => ref.current?.focus(),
262
- children: addonContent
263
- })
264
- })]
265
- }), getInputMask()]
266
- });
267
- };
268
- const getPlaceholder = (currency, locale) => {
269
- return formatAmount(0, currency, locale, {
270
- alwaysShowDecimals: true
271
- });
272
- };
273
- const getDecimalPart = (value, decimalSeparator) => {
274
- if (!value || !decimalSeparator) {
275
- return undefined;
276
- }
277
- const [_, decimalPart] = value.split(decimalSeparator);
278
- return decimalPart ?? undefined;
279
- };
280
-
281
- export { AmountInput };
282
- //# sourceMappingURL=AmountInput.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AmountInput.mjs","sources":["../../src/moneyInputField/AmountInput.tsx"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\nimport { clsx } from 'clsx';\nimport { AnimatePresence } from 'framer-motion';\nimport { type ChangeEvent, type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Props as MoneyInputFieldProps } from './MoneyInputField';\nimport { AnimatedNumber } from './AnimatedNumber';\nimport { useFocus } from './useFocus';\nimport { useInputStyle } from './useInputStyle';\nimport {\n getDecimalCount,\n getDecimalSeparator,\n getEnteredDecimalsCount,\n getFormattedString,\n getGroupSeparator,\n getUnformattedNumber,\n isAllowedInputKey,\n isInputPossiblyOverflowing,\n} from './utils';\n\ntype Props = {\n id: string;\n describedById?: string;\n amount?: number | null;\n currency: string;\n autoFocus?: boolean;\n onChange: (amount: number | null) => void;\n onFocusChange?: (focused: boolean) => void;\n} & Pick<MoneyInputFieldProps, 'loading'>;\n\nexport const AmountInput = ({\n id,\n describedById,\n amount,\n currency,\n autoFocus,\n onChange,\n onFocusChange,\n loading,\n}: Props) => {\n const intl = useIntl();\n const { focus, setFocus, visualFocus, setVisualFocus } = useFocus();\n\n const [value, setValue] = useState<string>(\n amount\n ? getFormattedString({\n value: amount,\n currency,\n locale: intl.locale,\n })\n : '',\n );\n const numericValue = useMemo(() => {\n return getUnformattedNumber({\n value,\n currency,\n locale: intl.locale,\n });\n }, [value, currency, intl.locale]);\n\n const valueWithFullDecimals = useMemo(() => {\n return getFormattedString({\n value: numericValue ?? 0,\n currency,\n locale: intl.locale,\n alwaysShowDecimals: true,\n });\n }, [numericValue, currency, intl.locale]);\n\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (autoFocus) {\n ref.current?.focus();\n }\n }, []);\n\n const placeholder = getPlaceholder(currency, intl.locale);\n const groupSeparator = getGroupSeparator(currency, intl.locale);\n const decimalSeparator = getDecimalSeparator(currency, intl.locale);\n const maxDecimalCount = getDecimalCount(currency, intl.locale);\n\n const decimalPart = getDecimalPart(value, decimalSeparator);\n const decimalMode = decimalSeparator && value.includes(decimalSeparator);\n\n useEffect(() => {\n if (!focus) {\n setValue(\n amount\n ? getFormattedString({\n value: amount,\n currency,\n locale: intl.locale,\n })\n : '',\n );\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [amount]);\n\n useEffect(() => {\n onFocusChange?.(visualFocus);\n }, [visualFocus]);\n\n const shouldReformatAfterUserInput = (newValue: string) => {\n // don't reformat if formatting would wipe out user's input\n if (reformatValue(newValue) === '') {\n return false;\n }\n\n const endsWithDecimalSeparator = decimalSeparator && newValue.endsWith(decimalSeparator);\n const endsWithGroupSeparator = groupSeparator && newValue.endsWith(groupSeparator);\n\n // if the user has entered a seperator to the end, formatting would delete it\n if (endsWithDecimalSeparator || endsWithGroupSeparator) {\n return false;\n }\n\n const containsDecimalSeparator = decimalSeparator && newValue.includes(decimalSeparator);\n\n if (containsDecimalSeparator) {\n const enteredDecimalsCount = getEnteredDecimalsCount(newValue, decimalSeparator);\n // don't reformat until user has entered all the allowed decimals\n // for example, we don't want 1.1 to be reformatted to 1.10 immediately\n if (enteredDecimalsCount < maxDecimalCount) {\n return false;\n }\n }\n\n return true;\n };\n\n const reformatValue = (newValue: string) => {\n const unformattedValue = getUnformattedNumber({\n value: newValue,\n currency,\n locale: intl.locale,\n });\n const formattedValue = unformattedValue\n ? getFormattedString({\n value: unformattedValue,\n currency,\n locale: intl.locale,\n })\n : '';\n return formattedValue;\n };\n\n const handleChange = (newValue: string) => {\n const oldCursorPosition = ref.current?.selectionStart ?? 0;\n\n const newFormattedString = shouldReformatAfterUserInput(newValue)\n ? reformatValue(newValue)\n : newValue;\n setValue(newFormattedString);\n\n const newNumber = getUnformattedNumber({\n value: newFormattedString,\n currency,\n locale: intl.locale,\n });\n\n if (newNumber !== numericValue) {\n if (numericValue || newNumber) {\n onChange(newNumber);\n }\n }\n\n const newCursorPosition = oldCursorPosition + (newFormattedString.length - newValue.length);\n requestAnimationFrame(() => {\n ref?.current?.setSelectionRange(newCursorPosition, newCursorPosition);\n });\n };\n\n const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n e.preventDefault();\n\n const clipboardData = e.clipboardData?.getData('text/plain');\n if (!clipboardData) {\n return;\n }\n\n // need to sanitise the pasted value otherwise other validation logic will ignore the input entirely\n const sanitisedValue = reformatValue(clipboardData);\n\n handleChange(sanitisedValue);\n };\n\n const handleBlur = () => {\n setFocus(false);\n setValue(reformatValue(value));\n };\n\n const handleBackspace = (e: KeyboardEvent<HTMLInputElement>) => {\n const input = e.target as HTMLInputElement;\n // using the updated selection range after the backspace key has been processed, instead of the current selection range in state\n const { value: currentValue, selectionStart, selectionEnd } = input;\n\n if (selectionStart === selectionEnd && selectionStart && selectionStart > 0) {\n const charBeforeCursor = currentValue[selectionStart - 1];\n\n // if the user deletes a thousands separator, remove the digit before it as well\n if (charBeforeCursor === groupSeparator) {\n e.preventDefault();\n const beforeCursor = currentValue.slice(0, selectionStart - 2);\n const afterCursor = currentValue.slice(selectionStart);\n const newValue = `${beforeCursor}${afterCursor}`;\n input.setSelectionRange(beforeCursor.length, beforeCursor.length);\n handleChange(newValue);\n }\n }\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n setFocus(true);\n if (!isAllowedInputKey(e)) {\n e.preventDefault();\n }\n\n if (e.key === 'Backspace') {\n handleBackspace(e);\n }\n };\n\n const isAllowedInput = (e: ChangeEvent<HTMLInputElement>) => {\n const hasMultipleDecimalSeparators =\n decimalSeparator && e.target.value.split(decimalSeparator).length > 2;\n if (hasMultipleDecimalSeparators) {\n return false;\n }\n\n const newNumericValue = getUnformattedNumber({\n value: e.target.value,\n currency,\n locale: intl.locale,\n });\n const maxLength = Number.MAX_SAFE_INTEGER.toString().length;\n if (String(newNumericValue).length > maxLength) {\n return false;\n }\n\n return true;\n };\n\n const addonContent = useMemo((): string | null | undefined => {\n // because we're using a separate \"addon\" element for the placeholder decimals, there is a possibility that the input itself will become scrollable\n // and the decimals will appear on top of the input. Safest thing to do is to just hide the addon if there is not enough room\n if (isInputPossiblyOverflowing({ ref, value })) {\n return null;\n }\n if (!decimalSeparator || !value) {\n return null;\n }\n\n // if the user has typed a decimal separator, show the full decimal part as a placeholder\n // this returns a string even if there is no content, typing should replace the placeholder immediately without animation\n // otherwise there is an ugly animation when going from 1.23 to 1.2 due to AnimatePresence\n if (focus && decimalMode) {\n // reuse getDecimalPart\n const fullDecimalPart = getDecimalPart(valueWithFullDecimals, decimalSeparator);\n // show only the characters that are not already displayed by the input\n return fullDecimalPart?.slice(decimalPart?.length);\n }\n\n // in unfocused state, always show the full decimal part unless the user has already entered decimals\n if (!focus && !decimalMode) {\n const [_, decimalPlaceholder] = placeholder.split(decimalSeparator);\n return decimalSeparator + decimalPlaceholder;\n }\n\n return null;\n }, [\n decimalMode,\n decimalPart?.length,\n decimalSeparator,\n focus,\n placeholder,\n value,\n valueWithFullDecimals,\n ]);\n\n const style = useInputStyle({\n // whenever decimals are shown, we need to account for the full decimal part for the font size calculation\n value: addonContent ? valueWithFullDecimals : value,\n focus: visualFocus,\n inputElement: ref.current,\n loading,\n });\n\n const getInputMask = () => {\n return '';\n };\n\n return (\n <div className=\"wds-amount-input-container\">\n <div className=\"wds-amount-input-input-container display-2\" style={style}>\n <input\n ref={ref}\n className=\"wds-amount-input-input\"\n id={id}\n autoComplete=\"off\"\n inputMode=\"decimal\"\n value={value}\n type=\"text\"\n placeholder={placeholder}\n aria-describedby={describedById}\n /* without this, the input tries to keep an aspect ratio and doesn't respect CSS width rules */\n size={1}\n onChange={(e) => {\n if (isAllowedInput(e)) {\n handleChange(e.target.value);\n }\n }}\n onBlurCapture={() => handleBlur()}\n onPaste={(e) => handlePaste(e)}\n onFocus={() => {\n setFocus(true);\n }}\n onBlur={() => {\n setTimeout(() => setVisualFocus(false), 30);\n }}\n onKeyDown={(e) => handleKeyDown(e)}\n />\n <AnimatePresence initial={false}>\n {addonContent !== null && (\n <AnimatedNumber\n className={clsx(\n 'wds-amount-input-placeholder',\n visualFocus && 'wds-amount-input-placeholder-focus',\n )}\n onClick={() => ref.current?.focus()}\n >\n {addonContent}\n </AnimatedNumber>\n )}\n </AnimatePresence>\n </div>\n {getInputMask()}\n </div>\n );\n};\n\nconst getPlaceholder = (currency: string, locale: string) => {\n return formatAmount(0, currency, locale, { alwaysShowDecimals: true });\n};\n\nconst getDecimalPart = (value: string, decimalSeparator: string | null) => {\n if (!value || !decimalSeparator) {\n return undefined;\n }\n\n const [_, decimalPart] = value.split(decimalSeparator);\n return decimalPart ?? undefined;\n};\n"],"names":["AmountInput","id","describedById","amount","currency","autoFocus","onChange","onFocusChange","loading","intl","useIntl","focus","setFocus","visualFocus","setVisualFocus","useFocus","value","setValue","useState","getFormattedString","locale","numericValue","useMemo","getUnformattedNumber","valueWithFullDecimals","alwaysShowDecimals","ref","useRef","useEffect","current","placeholder","getPlaceholder","groupSeparator","getGroupSeparator","decimalSeparator","getDecimalSeparator","maxDecimalCount","getDecimalCount","decimalPart","getDecimalPart","decimalMode","includes","shouldReformatAfterUserInput","newValue","reformatValue","endsWithDecimalSeparator","endsWith","endsWithGroupSeparator","containsDecimalSeparator","enteredDecimalsCount","getEnteredDecimalsCount","unformattedValue","formattedValue","handleChange","oldCursorPosition","selectionStart","newFormattedString","newNumber","newCursorPosition","length","requestAnimationFrame","setSelectionRange","handlePaste","e","preventDefault","clipboardData","getData","sanitisedValue","handleBlur","handleBackspace","input","target","currentValue","selectionEnd","charBeforeCursor","beforeCursor","slice","afterCursor","handleKeyDown","isAllowedInputKey","key","isAllowedInput","hasMultipleDecimalSeparators","split","newNumericValue","maxLength","Number","MAX_SAFE_INTEGER","toString","String","addonContent","isInputPossiblyOverflowing","fullDecimalPart","_","decimalPlaceholder","style","useInputStyle","inputElement","getInputMask","_jsxs","className","children","_jsx","autoComplete","inputMode","type","size","onBlurCapture","onPaste","onFocus","onBlur","setTimeout","onKeyDown","AnimatePresence","initial","AnimatedNumber","clsx","onClick","formatAmount","undefined"],"mappings":"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"}
@@ -1,50 +0,0 @@
1
- 'use strict';
2
-
3
- var framerMotion = require('framer-motion');
4
- var jsxRuntime = require('react/jsx-runtime');
5
-
6
- const AnimatedNumber = ({
7
- children,
8
- onClick,
9
- className
10
- }) => {
11
- const reducedMotion = framerMotion.useReducedMotion();
12
- return /*#__PURE__*/jsxRuntime.jsx(framerMotion.motion.span, {
13
- className: className,
14
- "aria-hidden": true,
15
- initial: {
16
- zoom: 0.01
17
- },
18
- animate: {
19
- zoom: 1
20
- },
21
- exit: {
22
- zoom: 0.01
23
- },
24
- transition: {
25
- duration: reducedMotion ? 0 : 0.3,
26
- type: 'tween',
27
- ease: [0.3, 0, 0.1, 1]
28
- },
29
- onClick: () => onClick?.(),
30
- children: /*#__PURE__*/jsxRuntime.jsx(framerMotion.motion.span, {
31
- initial: {
32
- opacity: 0
33
- },
34
- animate: {
35
- opacity: [0, 0, 1]
36
- },
37
- exit: {
38
- opacity: [1, 0, 0]
39
- },
40
- transition: {
41
- duration: reducedMotion ? 0 : 0.3,
42
- times: [0, 0.5, 1]
43
- },
44
- children: children
45
- })
46
- });
47
- };
48
-
49
- exports.AnimatedNumber = AnimatedNumber;
50
- //# sourceMappingURL=AnimatedNumber.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AnimatedNumber.js","sources":["../../src/moneyInputField/AnimatedNumber.tsx"],"sourcesContent":["import { motion, useReducedMotion } from 'framer-motion';\nimport type { ReactNode } from 'react';\n\ninterface Props {\n children: ReactNode;\n onClick?: () => void;\n className?: string;\n}\n\nexport const AnimatedNumber = ({ children, onClick, className }: Props) => {\n const reducedMotion = useReducedMotion();\n\n return (\n <motion.span\n className={className}\n aria-hidden\n initial={{ zoom: 0.01 }}\n animate={{ zoom: 1 }}\n exit={{ zoom: 0.01 }}\n transition={{\n duration: reducedMotion ? 0 : 0.3,\n type: 'tween',\n ease: [0.3, 0, 0.1, 1],\n }}\n onClick={() => onClick?.()}\n >\n <motion.span\n initial={{ opacity: 0 }}\n animate={{ opacity: [0, 0, 1] }}\n exit={{ opacity: [1, 0, 0] }}\n transition={{\n duration: reducedMotion ? 0 : 0.3,\n times: [0, 0.5, 1],\n }}\n >\n {children}\n </motion.span>\n </motion.span>\n );\n};\n"],"names":["AnimatedNumber","children","onClick","className","reducedMotion","useReducedMotion","_jsx","motion","span","initial","zoom","animate","exit","transition","duration","type","ease","opacity","times"],"mappings":";;;;;AASO,MAAMA,cAAc,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA;AAAS,CAAS,KAAI;AACxE,EAAA,MAAMC,aAAa,GAAGC,6BAAgB,EAAE;AAExC,EAAA,oBACEC,cAAA,CAACC,mBAAM,CAACC,IAAI,EAAA;AACVL,IAAAA,SAAS,EAAEA,SAAU;IACrB,aAAA,EAAA,IAAW;AACXM,IAAAA,OAAO,EAAE;AAAEC,MAAAA,IAAI,EAAE;KAAO;AACxBC,IAAAA,OAAO,EAAE;AAAED,MAAAA,IAAI,EAAE;KAAI;AACrBE,IAAAA,IAAI,EAAE;AAAEF,MAAAA,IAAI,EAAE;KAAO;AACrBG,IAAAA,UAAU,EAAE;AACVC,MAAAA,QAAQ,EAAEV,aAAa,GAAG,CAAC,GAAG,GAAG;AACjCW,MAAAA,IAAI,EAAE,OAAO;MACbC,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;KACrB;AACFd,IAAAA,OAAO,EAAEA,MAAMA,OAAO,IAAK;AAAAD,IAAAA,QAAA,eAE3BK,cAAA,CAACC,mBAAM,CAACC,IAAI,EAAA;AACVC,MAAAA,OAAO,EAAE;AAAEQ,QAAAA,OAAO,EAAE;OAAI;AACxBN,MAAAA,OAAO,EAAE;AAAEM,QAAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;OAAI;AAChCL,MAAAA,IAAI,EAAE;AAAEK,QAAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;OAAI;AAC7BJ,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAEV,aAAa,GAAG,CAAC,GAAG,GAAG;AACjCc,QAAAA,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC;OACjB;AAAAjB,MAAAA,QAAA,EAEDA;KACU;AACf,GAAa,CAAC;AAElB;;;;"}
@@ -1,48 +0,0 @@
1
- import { useReducedMotion, motion } from 'framer-motion';
2
- import { jsx } from 'react/jsx-runtime';
3
-
4
- const AnimatedNumber = ({
5
- children,
6
- onClick,
7
- className
8
- }) => {
9
- const reducedMotion = useReducedMotion();
10
- return /*#__PURE__*/jsx(motion.span, {
11
- className: className,
12
- "aria-hidden": true,
13
- initial: {
14
- zoom: 0.01
15
- },
16
- animate: {
17
- zoom: 1
18
- },
19
- exit: {
20
- zoom: 0.01
21
- },
22
- transition: {
23
- duration: reducedMotion ? 0 : 0.3,
24
- type: 'tween',
25
- ease: [0.3, 0, 0.1, 1]
26
- },
27
- onClick: () => onClick?.(),
28
- children: /*#__PURE__*/jsx(motion.span, {
29
- initial: {
30
- opacity: 0
31
- },
32
- animate: {
33
- opacity: [0, 0, 1]
34
- },
35
- exit: {
36
- opacity: [1, 0, 0]
37
- },
38
- transition: {
39
- duration: reducedMotion ? 0 : 0.3,
40
- times: [0, 0.5, 1]
41
- },
42
- children: children
43
- })
44
- });
45
- };
46
-
47
- export { AnimatedNumber };
48
- //# sourceMappingURL=AnimatedNumber.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AnimatedNumber.mjs","sources":["../../src/moneyInputField/AnimatedNumber.tsx"],"sourcesContent":["import { motion, useReducedMotion } from 'framer-motion';\nimport type { ReactNode } from 'react';\n\ninterface Props {\n children: ReactNode;\n onClick?: () => void;\n className?: string;\n}\n\nexport const AnimatedNumber = ({ children, onClick, className }: Props) => {\n const reducedMotion = useReducedMotion();\n\n return (\n <motion.span\n className={className}\n aria-hidden\n initial={{ zoom: 0.01 }}\n animate={{ zoom: 1 }}\n exit={{ zoom: 0.01 }}\n transition={{\n duration: reducedMotion ? 0 : 0.3,\n type: 'tween',\n ease: [0.3, 0, 0.1, 1],\n }}\n onClick={() => onClick?.()}\n >\n <motion.span\n initial={{ opacity: 0 }}\n animate={{ opacity: [0, 0, 1] }}\n exit={{ opacity: [1, 0, 0] }}\n transition={{\n duration: reducedMotion ? 0 : 0.3,\n times: [0, 0.5, 1],\n }}\n >\n {children}\n </motion.span>\n </motion.span>\n );\n};\n"],"names":["AnimatedNumber","children","onClick","className","reducedMotion","useReducedMotion","_jsx","motion","span","initial","zoom","animate","exit","transition","duration","type","ease","opacity","times"],"mappings":";;;AASO,MAAMA,cAAc,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,OAAO;AAAEC,EAAAA;AAAS,CAAS,KAAI;AACxE,EAAA,MAAMC,aAAa,GAAGC,gBAAgB,EAAE;AAExC,EAAA,oBACEC,GAAA,CAACC,MAAM,CAACC,IAAI,EAAA;AACVL,IAAAA,SAAS,EAAEA,SAAU;IACrB,aAAA,EAAA,IAAW;AACXM,IAAAA,OAAO,EAAE;AAAEC,MAAAA,IAAI,EAAE;KAAO;AACxBC,IAAAA,OAAO,EAAE;AAAED,MAAAA,IAAI,EAAE;KAAI;AACrBE,IAAAA,IAAI,EAAE;AAAEF,MAAAA,IAAI,EAAE;KAAO;AACrBG,IAAAA,UAAU,EAAE;AACVC,MAAAA,QAAQ,EAAEV,aAAa,GAAG,CAAC,GAAG,GAAG;AACjCW,MAAAA,IAAI,EAAE,OAAO;MACbC,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;KACrB;AACFd,IAAAA,OAAO,EAAEA,MAAMA,OAAO,IAAK;AAAAD,IAAAA,QAAA,eAE3BK,GAAA,CAACC,MAAM,CAACC,IAAI,EAAA;AACVC,MAAAA,OAAO,EAAE;AAAEQ,QAAAA,OAAO,EAAE;OAAI;AACxBN,MAAAA,OAAO,EAAE;AAAEM,QAAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;OAAI;AAChCL,MAAAA,IAAI,EAAE;AAAEK,QAAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;OAAI;AAC7BJ,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAEV,aAAa,GAAG,CAAC,GAAG,GAAG;AACjCc,QAAAA,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC;OACjB;AAAAjB,MAAAA,QAAA,EAEDA;KACU;AACf,GAAa,CAAC;AAElB;;;;"}
@@ -1,33 +0,0 @@
1
- 'use strict';
2
-
3
- var icons = require('@transferwise/icons');
4
- var clsx = require('clsx');
5
- var framerMotion = require('framer-motion');
6
- var jsxRuntime = require('react/jsx-runtime');
7
-
8
- const Chevron = ({
9
- shouldShow = true
10
- }) => {
11
- return /*#__PURE__*/jsxRuntime.jsx("div", {
12
- className: clsx.clsx('d-flex align-items-center', 'wds-chevron-container', !shouldShow && 'wds-chevron-hidden'),
13
- children: /*#__PURE__*/jsxRuntime.jsx(framerMotion.motion.div, {
14
- animate: {
15
- x: [12, 0, 0, -12],
16
- opacity: [0, 1, 1, 0]
17
- },
18
- transition: {
19
- duration: 3,
20
- ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],
21
- times: [0, 0.1, 0.9, 1],
22
- repeat: Infinity,
23
- repeatType: 'loop'
24
- },
25
- children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronLeft, {
26
- size: 24
27
- })
28
- })
29
- });
30
- };
31
-
32
- exports.Chevron = Chevron;
33
- //# sourceMappingURL=Chevron.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Chevron.js","sources":["../../src/moneyInputField/Chevron.tsx"],"sourcesContent":["import { ChevronLeft } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { motion } from 'framer-motion';\n\ninterface Props {\n shouldShow: boolean;\n}\n\nexport const Chevron = ({ shouldShow = true }: Props) => {\n return (\n <div\n className={clsx(\n 'd-flex align-items-center',\n 'wds-chevron-container',\n !shouldShow && 'wds-chevron-hidden',\n )}\n >\n <motion.div\n animate={{\n x: [12, 0, 0, -12],\n opacity: [0, 1, 1, 0],\n }}\n transition={{\n duration: 3,\n ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],\n times: [0, 0.1, 0.9, 1],\n repeat: Infinity,\n repeatType: 'loop',\n }}\n >\n <ChevronLeft size={24} />\n </motion.div>\n </div>\n );\n};\n"],"names":["Chevron","shouldShow","_jsx","className","clsx","children","motion","div","animate","x","opacity","transition","duration","ease","times","repeat","Infinity","repeatType","ChevronLeft","size"],"mappings":";;;;;;;AAQO,MAAMA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,UAAU,GAAG;AAAI,CAAS,KAAI;AACtD,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,SAAI,CACb,2BAA2B,EAC3B,uBAAuB,EACvB,CAACH,UAAU,IAAI,oBAAoB,CACnC;AAAAI,IAAAA,QAAA,eAEFH,cAAA,CAACI,mBAAM,CAACC,GAAG,EAAA;AACTC,MAAAA,OAAO,EAAE;QACPC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;QAClBC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;OACpB;AACFC,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAE,CAAC;QACXC,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACpDC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACvBC,QAAAA,MAAM,EAAEC,QAAQ;AAChBC,QAAAA,UAAU,EAAE;OACZ;MAAAZ,QAAA,eAEFH,cAAA,CAACgB,iBAAW,EAAA;AAACC,QAAAA,IAAI,EAAE;OAAG;KACZ;AACd,GAAK,CAAC;AAEV;;;;"}
@@ -1,31 +0,0 @@
1
- import { ChevronLeft } from '@transferwise/icons';
2
- import { clsx } from 'clsx';
3
- import { motion } from 'framer-motion';
4
- import { jsx } from 'react/jsx-runtime';
5
-
6
- const Chevron = ({
7
- shouldShow = true
8
- }) => {
9
- return /*#__PURE__*/jsx("div", {
10
- className: clsx('d-flex align-items-center', 'wds-chevron-container', !shouldShow && 'wds-chevron-hidden'),
11
- children: /*#__PURE__*/jsx(motion.div, {
12
- animate: {
13
- x: [12, 0, 0, -12],
14
- opacity: [0, 1, 1, 0]
15
- },
16
- transition: {
17
- duration: 3,
18
- ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],
19
- times: [0, 0.1, 0.9, 1],
20
- repeat: Infinity,
21
- repeatType: 'loop'
22
- },
23
- children: /*#__PURE__*/jsx(ChevronLeft, {
24
- size: 24
25
- })
26
- })
27
- });
28
- };
29
-
30
- export { Chevron };
31
- //# sourceMappingURL=Chevron.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Chevron.mjs","sources":["../../src/moneyInputField/Chevron.tsx"],"sourcesContent":["import { ChevronLeft } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { motion } from 'framer-motion';\n\ninterface Props {\n shouldShow: boolean;\n}\n\nexport const Chevron = ({ shouldShow = true }: Props) => {\n return (\n <div\n className={clsx(\n 'd-flex align-items-center',\n 'wds-chevron-container',\n !shouldShow && 'wds-chevron-hidden',\n )}\n >\n <motion.div\n animate={{\n x: [12, 0, 0, -12],\n opacity: [0, 1, 1, 0],\n }}\n transition={{\n duration: 3,\n ease: [[0.3, 0, 0.1, 1], 'linear', [0.3, 0, 0.1, 1]],\n times: [0, 0.1, 0.9, 1],\n repeat: Infinity,\n repeatType: 'loop',\n }}\n >\n <ChevronLeft size={24} />\n </motion.div>\n </div>\n );\n};\n"],"names":["Chevron","shouldShow","_jsx","className","clsx","children","motion","div","animate","x","opacity","transition","duration","ease","times","repeat","Infinity","repeatType","ChevronLeft","size"],"mappings":";;;;;AAQO,MAAMA,OAAO,GAAGA,CAAC;AAAEC,EAAAA,UAAU,GAAG;AAAI,CAAS,KAAI;AACtD,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;IACEC,SAAS,EAAEC,IAAI,CACb,2BAA2B,EAC3B,uBAAuB,EACvB,CAACH,UAAU,IAAI,oBAAoB,CACnC;AAAAI,IAAAA,QAAA,eAEFH,GAAA,CAACI,MAAM,CAACC,GAAG,EAAA;AACTC,MAAAA,OAAO,EAAE;QACPC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;QAClBC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;OACpB;AACFC,MAAAA,UAAU,EAAE;AACVC,QAAAA,QAAQ,EAAE,CAAC;QACXC,IAAI,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;QACpDC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AACvBC,QAAAA,MAAM,EAAEC,QAAQ;AAChBC,QAAAA,UAAU,EAAE;OACZ;MAAAZ,QAAA,eAEFH,GAAA,CAACgB,WAAW,EAAA;AAACC,QAAAA,IAAI,EAAE;OAAG;KACZ;AACd,GAAK,CAAC;AAEV;;;;"}