@transferwise/components 0.0.0-experimental-d3453cf → 0.0.0-experimental-3f5dc0d
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.
- package/build/expressiveMoneyInput/AmountInput.js +281 -0
- package/build/expressiveMoneyInput/AmountInput.js.map +1 -0
- package/build/expressiveMoneyInput/AmountInput.mjs +279 -0
- package/build/expressiveMoneyInput/AmountInput.mjs.map +1 -0
- package/build/expressiveMoneyInput/AnimatedNumber.js +50 -0
- package/build/expressiveMoneyInput/AnimatedNumber.js.map +1 -0
- package/build/expressiveMoneyInput/AnimatedNumber.mjs +48 -0
- package/build/expressiveMoneyInput/AnimatedNumber.mjs.map +1 -0
- package/build/expressiveMoneyInput/Chevron.js +33 -0
- package/build/expressiveMoneyInput/Chevron.js.map +1 -0
- package/build/expressiveMoneyInput/Chevron.mjs +31 -0
- package/build/expressiveMoneyInput/Chevron.mjs.map +1 -0
- package/build/expressiveMoneyInput/CurrencySelector.js +160 -0
- package/build/expressiveMoneyInput/CurrencySelector.js.map +1 -0
- package/build/expressiveMoneyInput/CurrencySelector.mjs +157 -0
- package/build/expressiveMoneyInput/CurrencySelector.mjs.map +1 -0
- package/build/expressiveMoneyInput/ExpressiveMoneyInput.js +113 -0
- package/build/expressiveMoneyInput/ExpressiveMoneyInput.js.map +1 -0
- package/build/expressiveMoneyInput/ExpressiveMoneyInput.messages.js +17 -0
- package/build/expressiveMoneyInput/ExpressiveMoneyInput.messages.js.map +1 -0
- package/build/expressiveMoneyInput/ExpressiveMoneyInput.messages.mjs +13 -0
- package/build/expressiveMoneyInput/ExpressiveMoneyInput.messages.mjs.map +1 -0
- package/build/expressiveMoneyInput/ExpressiveMoneyInput.mjs +109 -0
- package/build/expressiveMoneyInput/ExpressiveMoneyInput.mjs.map +1 -0
- package/build/expressiveMoneyInput/useFocus.js +37 -0
- package/build/expressiveMoneyInput/useFocus.js.map +1 -0
- package/build/expressiveMoneyInput/useFocus.mjs +35 -0
- package/build/expressiveMoneyInput/useFocus.mjs.map +1 -0
- package/build/expressiveMoneyInput/useInputStyle.js +71 -0
- package/build/expressiveMoneyInput/useInputStyle.js.map +1 -0
- package/build/expressiveMoneyInput/useInputStyle.mjs +69 -0
- package/build/expressiveMoneyInput/useInputStyle.mjs.map +1 -0
- package/build/expressiveMoneyInput/utils.js +87 -0
- package/build/expressiveMoneyInput/utils.js.map +1 -0
- package/build/expressiveMoneyInput/utils.mjs +78 -0
- package/build/expressiveMoneyInput/utils.mjs.map +1 -0
- package/build/i18n/en.json +2 -0
- package/build/i18n/en.json.js +2 -0
- package/build/i18n/en.json.js.map +1 -1
- package/build/i18n/en.json.mjs +2 -0
- package/build/i18n/en.json.mjs.map +1 -1
- package/build/index.js +2 -0
- package/build/index.js.map +1 -1
- package/build/index.mjs +1 -0
- package/build/index.mjs.map +1 -1
- package/build/main.css +58 -0
- package/build/styles/expressiveMoneyInput/AmountInput.css +32 -0
- package/build/styles/expressiveMoneyInput/Chevron.css +12 -0
- package/build/styles/expressiveMoneyInput/CurrencySelector.css +6 -0
- package/build/styles/expressiveMoneyInput/ExpressiveMoneyInput.css +58 -0
- package/build/styles/main.css +58 -0
- package/build/types/expressiveMoneyInput/AmountInput.d.ts +13 -0
- package/build/types/expressiveMoneyInput/AmountInput.d.ts.map +1 -0
- package/build/types/expressiveMoneyInput/AnimatedNumber.d.ts +9 -0
- package/build/types/expressiveMoneyInput/AnimatedNumber.d.ts.map +1 -0
- package/build/types/expressiveMoneyInput/Chevron.d.ts +6 -0
- package/build/types/expressiveMoneyInput/Chevron.d.ts.map +1 -0
- package/build/types/expressiveMoneyInput/CurrencySelector.d.ts +30 -0
- package/build/types/expressiveMoneyInput/CurrencySelector.d.ts.map +1 -0
- package/build/types/expressiveMoneyInput/ExpressiveMoneyInput.d.ts +30 -0
- package/build/types/expressiveMoneyInput/ExpressiveMoneyInput.d.ts.map +1 -0
- package/build/types/expressiveMoneyInput/ExpressiveMoneyInput.messages.d.ts +12 -0
- package/build/types/expressiveMoneyInput/ExpressiveMoneyInput.messages.d.ts.map +1 -0
- package/build/types/expressiveMoneyInput/index.d.ts +3 -0
- package/build/types/expressiveMoneyInput/index.d.ts.map +1 -0
- package/build/types/expressiveMoneyInput/useFocus.d.ts +7 -0
- package/build/types/expressiveMoneyInput/useFocus.d.ts.map +1 -0
- package/build/types/expressiveMoneyInput/useInputStyle.d.ts +10 -0
- package/build/types/expressiveMoneyInput/useInputStyle.d.ts.map +1 -0
- package/build/types/expressiveMoneyInput/useSelectionRange.d.ts +10 -0
- package/build/types/expressiveMoneyInput/useSelectionRange.d.ts.map +1 -0
- package/build/types/expressiveMoneyInput/utils.d.ts +22 -0
- package/build/types/expressiveMoneyInput/utils.d.ts.map +1 -0
- package/build/types/index.d.ts +2 -0
- package/build/types/index.d.ts.map +1 -1
- package/build/types/test-utils/index.d.ts +4 -0
- package/build/types/test-utils/index.d.ts.map +1 -1
- package/package.json +9 -2
- package/src/expressiveMoneyInput/AmountInput.css +32 -0
- package/src/expressiveMoneyInput/AmountInput.less +43 -0
- package/src/expressiveMoneyInput/AmountInput.tsx +353 -0
- package/src/expressiveMoneyInput/AnimatedNumber.tsx +40 -0
- package/src/expressiveMoneyInput/Chevron.css +12 -0
- package/src/expressiveMoneyInput/Chevron.less +13 -0
- package/src/expressiveMoneyInput/Chevron.tsx +35 -0
- package/src/expressiveMoneyInput/CurrencySelector.css +6 -0
- package/src/expressiveMoneyInput/CurrencySelector.less +7 -0
- package/src/expressiveMoneyInput/CurrencySelector.tsx +218 -0
- package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +58 -0
- package/src/expressiveMoneyInput/ExpressiveMoneyInput.less +13 -0
- package/src/expressiveMoneyInput/ExpressiveMoneyInput.messages.ts +13 -0
- package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx +188 -0
- package/src/expressiveMoneyInput/ExpressiveMoneyInput.tsx +124 -0
- package/src/expressiveMoneyInput/index.ts +2 -0
- package/src/expressiveMoneyInput/useFocus.ts +35 -0
- package/src/expressiveMoneyInput/useInputStyle.ts +85 -0
- package/src/expressiveMoneyInput/useSelectionRange.ts +23 -0
- package/src/expressiveMoneyInput/utils.spec.ts +114 -0
- package/src/expressiveMoneyInput/utils.ts +116 -0
- package/src/i18n/en.json +2 -0
- package/src/index.ts +2 -0
- package/src/main.css +58 -0
- package/src/main.less +1 -0
- package/src/ssr.spec.tsx +1 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../src/expressiveMoneyInput/utils.ts"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\nimport type { KeyboardEvent } from 'react';\n\nexport const getDecimalSeparator = (currency: string, locale: string): string | null => {\n return formatAmount(1.1, currency, locale).replace(/\\p{Number}/gu, '');\n};\n\nexport const getGroupSeparator = (currency: string, locale: string): string | null => {\n return formatAmount(10000000, currency, locale).replace(/\\p{Number}/gu, '')[0];\n};\n\nexport const getDecimalCount = (currency: string, locale: string): number => {\n const decimalSeparator = getDecimalSeparator(currency, locale);\n if (!decimalSeparator) {\n return 0;\n }\n const parts = formatAmount(1.1, currency, locale).split(decimalSeparator);\n return parts.length === 2 ? parts[1].length : 0;\n};\n\nexport const getEnteredDecimalsCount = (value: string, decimalSeparator: string) => {\n return value.split(decimalSeparator)[1]?.length ?? 0;\n};\n\nexport const getUnformattedNumber = ({\n value: formattedValue,\n currency,\n locale,\n}: {\n value: string;\n currency: string;\n locale: string;\n}): number | null => {\n const groupSeparator = getGroupSeparator(currency, locale);\n const decimalSeparator = getDecimalSeparator(currency, locale);\n if (!formattedValue) {\n return null;\n }\n\n // parseFloat can't handle thousands separators\n const withoutGroupSeparator = groupSeparator\n ? formattedValue.replace(/ /gu, '').replace(new RegExp(`\\\\${groupSeparator}`, 'g'), '')\n : formattedValue;\n\n // parseFloat can only handle . as decimal separator\n const withNormalisedDecimalSeparator = decimalSeparator\n ? withoutGroupSeparator.replace(decimalSeparator, '.')\n : withoutGroupSeparator;\n\n const parsedValue = Number.parseFloat(withNormalisedDecimalSeparator);\n return parsedValue;\n};\n\nexport const getFormattedString = ({\n value: unformattedValue,\n currency,\n locale,\n alwaysShowDecimals = false,\n}: {\n value: number;\n currency: string;\n locale: string;\n alwaysShowDecimals?: boolean;\n}): string => {\n const decimalSeparator = getDecimalSeparator(currency, locale);\n // formatAmount rounds extra decimals, so 1.999 will become 2. Instead we will manually strip extra decimals so that it becomes 1.99 after formatting\n const decimalCount = getDecimalCount(currency, locale);\n const unformattedString = unformattedValue.toString();\n\n const [integerPart, decimalPart] = decimalSeparator\n ? unformattedString.split(decimalSeparator)\n : [unformattedString, undefined];\n\n const formattedDecimalPart = decimalPart ? decimalPart.slice(0, decimalCount) : '';\n\n const sanitisedUnformattedValue = Number.parseFloat(`${integerPart}.${formattedDecimalPart}`);\n\n return formatAmount(sanitisedUnformattedValue, currency, locale, {\n alwaysShowDecimals,\n });\n};\n\nexport const isInputPossiblyOverflowing = ({\n ref,\n value,\n}: {\n ref: React.RefObject<HTMLInputElement>;\n value: string;\n}) => {\n const textLength = value.length;\n const inputWidth = ref.current?.clientWidth;\n if (!inputWidth || !textLength) {\n return;\n }\n\n const maxCharactersWithoutOverflow = Math.floor(inputWidth / 19);\n return textLength > maxCharactersWithoutOverflow;\n};\n\nconst allowedInputKeys = new Set([\n 'Backspace',\n 'Delete',\n ',',\n '.',\n 'ArrowLeft',\n 'ArrowRight',\n 'Enter',\n 'Tab',\n]);\n\nexport const isAllowedInputKey = (e: KeyboardEvent<HTMLInputElement>) => {\n const { metaKey, key, ctrlKey } = e;\n const isNumberKey = !Number.isNaN(Number.parseInt(key, 10));\n\n return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);\n};\n"],"names":["getDecimalSeparator","currency","locale","formatAmount","replace","getGroupSeparator","getDecimalCount","decimalSeparator","parts","split","length","getEnteredDecimalsCount","value","getUnformattedNumber","formattedValue","groupSeparator","withoutGroupSeparator","RegExp","withNormalisedDecimalSeparator","parsedValue","Number","parseFloat","getFormattedString","unformattedValue","alwaysShowDecimals","decimalCount","unformattedString","toString","integerPart","decimalPart","undefined","formattedDecimalPart","slice","sanitisedUnformattedValue","isInputPossiblyOverflowing","ref","textLength","inputWidth","current","clientWidth","maxCharactersWithoutOverflow","Math","floor","allowedInputKeys","Set","isAllowedInputKey","e","metaKey","key","ctrlKey","isNumberKey","isNaN","parseInt","has"],"mappings":"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"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { formatAmount } from '@transferwise/formatting';
|
|
2
|
+
|
|
3
|
+
const getDecimalSeparator = (currency, locale) => {
|
|
4
|
+
return formatAmount(1.1, currency, locale).replace(/\p{Number}/gu, '');
|
|
5
|
+
};
|
|
6
|
+
const getGroupSeparator = (currency, locale) => {
|
|
7
|
+
return formatAmount(10000000, currency, locale).replace(/\p{Number}/gu, '')[0];
|
|
8
|
+
};
|
|
9
|
+
const getDecimalCount = (currency, locale) => {
|
|
10
|
+
const decimalSeparator = getDecimalSeparator(currency, locale);
|
|
11
|
+
if (!decimalSeparator) {
|
|
12
|
+
return 0;
|
|
13
|
+
}
|
|
14
|
+
const parts = formatAmount(1.1, currency, locale).split(decimalSeparator);
|
|
15
|
+
return parts.length === 2 ? parts[1].length : 0;
|
|
16
|
+
};
|
|
17
|
+
const getEnteredDecimalsCount = (value, decimalSeparator) => {
|
|
18
|
+
return value.split(decimalSeparator)[1]?.length ?? 0;
|
|
19
|
+
};
|
|
20
|
+
const getUnformattedNumber = ({
|
|
21
|
+
value: formattedValue,
|
|
22
|
+
currency,
|
|
23
|
+
locale
|
|
24
|
+
}) => {
|
|
25
|
+
const groupSeparator = getGroupSeparator(currency, locale);
|
|
26
|
+
const decimalSeparator = getDecimalSeparator(currency, locale);
|
|
27
|
+
if (!formattedValue) {
|
|
28
|
+
return null;
|
|
29
|
+
}
|
|
30
|
+
// parseFloat can't handle thousands separators
|
|
31
|
+
const withoutGroupSeparator = groupSeparator ? formattedValue.replace(/ /gu, '').replace(new RegExp(`\\${groupSeparator}`, 'g'), '') : formattedValue;
|
|
32
|
+
// parseFloat can only handle . as decimal separator
|
|
33
|
+
const withNormalisedDecimalSeparator = decimalSeparator ? withoutGroupSeparator.replace(decimalSeparator, '.') : withoutGroupSeparator;
|
|
34
|
+
const parsedValue = Number.parseFloat(withNormalisedDecimalSeparator);
|
|
35
|
+
return parsedValue;
|
|
36
|
+
};
|
|
37
|
+
const getFormattedString = ({
|
|
38
|
+
value: unformattedValue,
|
|
39
|
+
currency,
|
|
40
|
+
locale,
|
|
41
|
+
alwaysShowDecimals = false
|
|
42
|
+
}) => {
|
|
43
|
+
const decimalSeparator = getDecimalSeparator(currency, locale);
|
|
44
|
+
// formatAmount rounds extra decimals, so 1.999 will become 2. Instead we will manually strip extra decimals so that it becomes 1.99 after formatting
|
|
45
|
+
const decimalCount = getDecimalCount(currency, locale);
|
|
46
|
+
const unformattedString = unformattedValue.toString();
|
|
47
|
+
const [integerPart, decimalPart] = decimalSeparator ? unformattedString.split(decimalSeparator) : [unformattedString, undefined];
|
|
48
|
+
const formattedDecimalPart = decimalPart ? decimalPart.slice(0, decimalCount) : '';
|
|
49
|
+
const sanitisedUnformattedValue = Number.parseFloat(`${integerPart}.${formattedDecimalPart}`);
|
|
50
|
+
return formatAmount(sanitisedUnformattedValue, currency, locale, {
|
|
51
|
+
alwaysShowDecimals
|
|
52
|
+
});
|
|
53
|
+
};
|
|
54
|
+
const isInputPossiblyOverflowing = ({
|
|
55
|
+
ref,
|
|
56
|
+
value
|
|
57
|
+
}) => {
|
|
58
|
+
const textLength = value.length;
|
|
59
|
+
const inputWidth = ref.current?.clientWidth;
|
|
60
|
+
if (!inputWidth || !textLength) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
const maxCharactersWithoutOverflow = Math.floor(inputWidth / 19);
|
|
64
|
+
return textLength > maxCharactersWithoutOverflow;
|
|
65
|
+
};
|
|
66
|
+
const allowedInputKeys = new Set(['Backspace', 'Delete', ',', '.', 'ArrowLeft', 'ArrowRight', 'Enter', 'Tab']);
|
|
67
|
+
const isAllowedInputKey = e => {
|
|
68
|
+
const {
|
|
69
|
+
metaKey,
|
|
70
|
+
key,
|
|
71
|
+
ctrlKey
|
|
72
|
+
} = e;
|
|
73
|
+
const isNumberKey = !Number.isNaN(Number.parseInt(key, 10));
|
|
74
|
+
return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
export { getDecimalCount, getDecimalSeparator, getEnteredDecimalsCount, getFormattedString, getGroupSeparator, getUnformattedNumber, isAllowedInputKey, isInputPossiblyOverflowing };
|
|
78
|
+
//# sourceMappingURL=utils.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.mjs","sources":["../../src/expressiveMoneyInput/utils.ts"],"sourcesContent":["import { formatAmount } from '@transferwise/formatting';\nimport type { KeyboardEvent } from 'react';\n\nexport const getDecimalSeparator = (currency: string, locale: string): string | null => {\n return formatAmount(1.1, currency, locale).replace(/\\p{Number}/gu, '');\n};\n\nexport const getGroupSeparator = (currency: string, locale: string): string | null => {\n return formatAmount(10000000, currency, locale).replace(/\\p{Number}/gu, '')[0];\n};\n\nexport const getDecimalCount = (currency: string, locale: string): number => {\n const decimalSeparator = getDecimalSeparator(currency, locale);\n if (!decimalSeparator) {\n return 0;\n }\n const parts = formatAmount(1.1, currency, locale).split(decimalSeparator);\n return parts.length === 2 ? parts[1].length : 0;\n};\n\nexport const getEnteredDecimalsCount = (value: string, decimalSeparator: string) => {\n return value.split(decimalSeparator)[1]?.length ?? 0;\n};\n\nexport const getUnformattedNumber = ({\n value: formattedValue,\n currency,\n locale,\n}: {\n value: string;\n currency: string;\n locale: string;\n}): number | null => {\n const groupSeparator = getGroupSeparator(currency, locale);\n const decimalSeparator = getDecimalSeparator(currency, locale);\n if (!formattedValue) {\n return null;\n }\n\n // parseFloat can't handle thousands separators\n const withoutGroupSeparator = groupSeparator\n ? formattedValue.replace(/ /gu, '').replace(new RegExp(`\\\\${groupSeparator}`, 'g'), '')\n : formattedValue;\n\n // parseFloat can only handle . as decimal separator\n const withNormalisedDecimalSeparator = decimalSeparator\n ? withoutGroupSeparator.replace(decimalSeparator, '.')\n : withoutGroupSeparator;\n\n const parsedValue = Number.parseFloat(withNormalisedDecimalSeparator);\n return parsedValue;\n};\n\nexport const getFormattedString = ({\n value: unformattedValue,\n currency,\n locale,\n alwaysShowDecimals = false,\n}: {\n value: number;\n currency: string;\n locale: string;\n alwaysShowDecimals?: boolean;\n}): string => {\n const decimalSeparator = getDecimalSeparator(currency, locale);\n // formatAmount rounds extra decimals, so 1.999 will become 2. Instead we will manually strip extra decimals so that it becomes 1.99 after formatting\n const decimalCount = getDecimalCount(currency, locale);\n const unformattedString = unformattedValue.toString();\n\n const [integerPart, decimalPart] = decimalSeparator\n ? unformattedString.split(decimalSeparator)\n : [unformattedString, undefined];\n\n const formattedDecimalPart = decimalPart ? decimalPart.slice(0, decimalCount) : '';\n\n const sanitisedUnformattedValue = Number.parseFloat(`${integerPart}.${formattedDecimalPart}`);\n\n return formatAmount(sanitisedUnformattedValue, currency, locale, {\n alwaysShowDecimals,\n });\n};\n\nexport const isInputPossiblyOverflowing = ({\n ref,\n value,\n}: {\n ref: React.RefObject<HTMLInputElement>;\n value: string;\n}) => {\n const textLength = value.length;\n const inputWidth = ref.current?.clientWidth;\n if (!inputWidth || !textLength) {\n return;\n }\n\n const maxCharactersWithoutOverflow = Math.floor(inputWidth / 19);\n return textLength > maxCharactersWithoutOverflow;\n};\n\nconst allowedInputKeys = new Set([\n 'Backspace',\n 'Delete',\n ',',\n '.',\n 'ArrowLeft',\n 'ArrowRight',\n 'Enter',\n 'Tab',\n]);\n\nexport const isAllowedInputKey = (e: KeyboardEvent<HTMLInputElement>) => {\n const { metaKey, key, ctrlKey } = e;\n const isNumberKey = !Number.isNaN(Number.parseInt(key, 10));\n\n return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);\n};\n"],"names":["getDecimalSeparator","currency","locale","formatAmount","replace","getGroupSeparator","getDecimalCount","decimalSeparator","parts","split","length","getEnteredDecimalsCount","value","getUnformattedNumber","formattedValue","groupSeparator","withoutGroupSeparator","RegExp","withNormalisedDecimalSeparator","parsedValue","Number","parseFloat","getFormattedString","unformattedValue","alwaysShowDecimals","decimalCount","unformattedString","toString","integerPart","decimalPart","undefined","formattedDecimalPart","slice","sanitisedUnformattedValue","isInputPossiblyOverflowing","ref","textLength","inputWidth","current","clientWidth","maxCharactersWithoutOverflow","Math","floor","allowedInputKeys","Set","isAllowedInputKey","e","metaKey","key","ctrlKey","isNumberKey","isNaN","parseInt","has"],"mappings":"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"}
|
package/build/i18n/en.json
CHANGED
|
@@ -16,6 +16,8 @@
|
|
|
16
16
|
"neptune.DateLookup.selected": "selected",
|
|
17
17
|
"neptune.DateLookup.twentyYears": "20 years",
|
|
18
18
|
"neptune.DateLookup.year": "year",
|
|
19
|
+
"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
|
|
20
|
+
"neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
|
|
19
21
|
"neptune.FlowNavigation.back": "back to previous step",
|
|
20
22
|
"neptune.Info.ariaLabel": "More information",
|
|
21
23
|
"neptune.Label.optional": "(Optional)",
|
package/build/i18n/en.json.js
CHANGED
|
@@ -20,6 +20,8 @@ var en = {
|
|
|
20
20
|
"neptune.DateLookup.selected": "selected",
|
|
21
21
|
"neptune.DateLookup.twentyYears": "20 years",
|
|
22
22
|
"neptune.DateLookup.year": "year",
|
|
23
|
+
"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
|
|
24
|
+
"neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
|
|
23
25
|
"neptune.FlowNavigation.back": "back to previous step",
|
|
24
26
|
"neptune.Info.ariaLabel": "More information",
|
|
25
27
|
"neptune.Label.optional": "(Optional)",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"en.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/i18n/en.json.mjs
CHANGED
|
@@ -16,6 +16,8 @@ var en = {
|
|
|
16
16
|
"neptune.DateLookup.selected": "selected",
|
|
17
17
|
"neptune.DateLookup.twentyYears": "20 years",
|
|
18
18
|
"neptune.DateLookup.year": "year",
|
|
19
|
+
"neptune.ExpressiveMoneyInput.currency.search.placeholder": "Type a currency / country",
|
|
20
|
+
"neptune.ExpressiveMoneyInput.currency.select.currency": "Select currency",
|
|
19
21
|
"neptune.FlowNavigation.back": "back to previous step",
|
|
20
22
|
"neptune.Info.ariaLabel": "More information",
|
|
21
23
|
"neptune.Label.optional": "(Optional)",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/index.js
CHANGED
|
@@ -67,6 +67,7 @@ var Markdown = require('./markdown/Markdown.js');
|
|
|
67
67
|
var Modal = require('./modal/Modal.js');
|
|
68
68
|
var Money = require('./money/Money.js');
|
|
69
69
|
var MoneyInput = require('./moneyInput/MoneyInput.js');
|
|
70
|
+
var ExpressiveMoneyInput = require('./expressiveMoneyInput/ExpressiveMoneyInput.js');
|
|
70
71
|
var NavigationOption = require('./navigationOption/NavigationOption.js');
|
|
71
72
|
var NavigationOptionsList = require('./navigationOptionsList/NavigationOptionsList.js');
|
|
72
73
|
var Nudge = require('./nudge/Nudge.js');
|
|
@@ -229,6 +230,7 @@ exports.Markdown = Markdown.default;
|
|
|
229
230
|
exports.Modal = Modal.default;
|
|
230
231
|
exports.Money = Money.default;
|
|
231
232
|
exports.MoneyInput = MoneyInput.default;
|
|
233
|
+
exports.ExpressiveMoneyInput = ExpressiveMoneyInput.default;
|
|
232
234
|
exports.NavigationOption = NavigationOption.default;
|
|
233
235
|
exports.NavigationOptionsList = NavigationOptionsList.default;
|
|
234
236
|
exports.Nudge = Nudge.default;
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/index.mjs
CHANGED
|
@@ -65,6 +65,7 @@ export { default as Markdown } from './markdown/Markdown.mjs';
|
|
|
65
65
|
export { default as Modal } from './modal/Modal.mjs';
|
|
66
66
|
export { default as Money } from './money/Money.mjs';
|
|
67
67
|
export { default as MoneyInput } from './moneyInput/MoneyInput.mjs';
|
|
68
|
+
export { default as ExpressiveMoneyInput } from './expressiveMoneyInput/ExpressiveMoneyInput.mjs';
|
|
68
69
|
export { default as NavigationOption } from './navigationOption/NavigationOption.mjs';
|
|
69
70
|
export { default as NavigationOptionsList } from './navigationOptionsList/NavigationOptionsList.mjs';
|
|
70
71
|
export { default as Nudge } from './nudge/Nudge.mjs';
|
package/build/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/main.css
CHANGED
|
@@ -4447,6 +4447,64 @@ button.np-link {
|
|
|
4447
4447
|
box-shadow: inset 0 0 0 1px #c9cbce !important;
|
|
4448
4448
|
box-shadow: inset 0 0 0 1px var(--color-interactive-secondary) !important;
|
|
4449
4449
|
}
|
|
4450
|
+
.wds-amount-input-container {
|
|
4451
|
+
width: 100%;
|
|
4452
|
+
}
|
|
4453
|
+
.wds-amount-input-input-container {
|
|
4454
|
+
display: flex;
|
|
4455
|
+
justify-content: right;
|
|
4456
|
+
width: 100%;
|
|
4457
|
+
transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
|
|
4458
|
+
color: var(--color-interactive-primary);
|
|
4459
|
+
overflow: hidden;
|
|
4460
|
+
margin-bottom: 0 !important;
|
|
4461
|
+
}
|
|
4462
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4463
|
+
.wds-amount-input-input-container {
|
|
4464
|
+
transition: none;
|
|
4465
|
+
}
|
|
4466
|
+
}
|
|
4467
|
+
.wds-amount-input-input {
|
|
4468
|
+
border: none;
|
|
4469
|
+
outline: none;
|
|
4470
|
+
flex-grow: 1;
|
|
4471
|
+
text-align: right;
|
|
4472
|
+
background-color: transparent;
|
|
4473
|
+
}
|
|
4474
|
+
.wds-amount-input-input:focus-visible {
|
|
4475
|
+
outline: none;
|
|
4476
|
+
}
|
|
4477
|
+
.wds-amount-input-placeholder {
|
|
4478
|
+
flex-grow: 0;
|
|
4479
|
+
display: flex;
|
|
4480
|
+
align-items: center;
|
|
4481
|
+
}
|
|
4482
|
+
.wds-currency-selector:disabled {
|
|
4483
|
+
opacity: 1 !important;
|
|
4484
|
+
cursor: auto !important;
|
|
4485
|
+
cursor: initial !important;
|
|
4486
|
+
mix-blend-mode: initial !important;
|
|
4487
|
+
}
|
|
4488
|
+
.wds-chevron-container {
|
|
4489
|
+
width: 32px;
|
|
4490
|
+
width: var(--size-32);
|
|
4491
|
+
overflow: hidden;
|
|
4492
|
+
color: var(--color-interactive-primary);
|
|
4493
|
+
margin-left: 8px;
|
|
4494
|
+
margin-left: var(--size-8);
|
|
4495
|
+
transition: width 0.3s ease;
|
|
4496
|
+
}
|
|
4497
|
+
.wds-chevron-hidden {
|
|
4498
|
+
width: 0;
|
|
4499
|
+
}
|
|
4500
|
+
.wds-expressive-money-input-currency-selector {
|
|
4501
|
+
flex-shrink: 0;
|
|
4502
|
+
margin-right: 24px;
|
|
4503
|
+
margin-right: var(--size-24);
|
|
4504
|
+
}
|
|
4505
|
+
.wds-expressive-money-input-chevron {
|
|
4506
|
+
transform: translateY(-5%);
|
|
4507
|
+
}
|
|
4450
4508
|
.np-navigation-option {
|
|
4451
4509
|
-webkit-text-decoration: none;
|
|
4452
4510
|
text-decoration: none;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
.wds-amount-input-container {
|
|
2
|
+
width: 100%;
|
|
3
|
+
}
|
|
4
|
+
.wds-amount-input-input-container {
|
|
5
|
+
display: flex;
|
|
6
|
+
justify-content: right;
|
|
7
|
+
width: 100%;
|
|
8
|
+
transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
|
|
9
|
+
color: var(--color-interactive-primary);
|
|
10
|
+
overflow: hidden;
|
|
11
|
+
margin-bottom: 0 !important;
|
|
12
|
+
}
|
|
13
|
+
@media (prefers-reduced-motion: reduce) {
|
|
14
|
+
.wds-amount-input-input-container {
|
|
15
|
+
transition: none;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
.wds-amount-input-input {
|
|
19
|
+
border: none;
|
|
20
|
+
outline: none;
|
|
21
|
+
flex-grow: 1;
|
|
22
|
+
text-align: right;
|
|
23
|
+
background-color: transparent;
|
|
24
|
+
}
|
|
25
|
+
.wds-amount-input-input:focus-visible {
|
|
26
|
+
outline: none;
|
|
27
|
+
}
|
|
28
|
+
.wds-amount-input-placeholder {
|
|
29
|
+
flex-grow: 0;
|
|
30
|
+
display: flex;
|
|
31
|
+
align-items: center;
|
|
32
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
.wds-amount-input-container {
|
|
2
|
+
width: 100%;
|
|
3
|
+
}
|
|
4
|
+
.wds-amount-input-input-container {
|
|
5
|
+
display: flex;
|
|
6
|
+
justify-content: right;
|
|
7
|
+
width: 100%;
|
|
8
|
+
transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
|
|
9
|
+
color: var(--color-interactive-primary);
|
|
10
|
+
overflow: hidden;
|
|
11
|
+
margin-bottom: 0 !important;
|
|
12
|
+
}
|
|
13
|
+
@media (prefers-reduced-motion: reduce) {
|
|
14
|
+
.wds-amount-input-input-container {
|
|
15
|
+
transition: none;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
.wds-amount-input-input {
|
|
19
|
+
border: none;
|
|
20
|
+
outline: none;
|
|
21
|
+
flex-grow: 1;
|
|
22
|
+
text-align: right;
|
|
23
|
+
background-color: transparent;
|
|
24
|
+
}
|
|
25
|
+
.wds-amount-input-input:focus-visible {
|
|
26
|
+
outline: none;
|
|
27
|
+
}
|
|
28
|
+
.wds-amount-input-placeholder {
|
|
29
|
+
flex-grow: 0;
|
|
30
|
+
display: flex;
|
|
31
|
+
align-items: center;
|
|
32
|
+
}
|
|
33
|
+
.wds-currency-selector:disabled {
|
|
34
|
+
opacity: 1 !important;
|
|
35
|
+
cursor: auto !important;
|
|
36
|
+
cursor: initial !important;
|
|
37
|
+
mix-blend-mode: initial !important;
|
|
38
|
+
}
|
|
39
|
+
.wds-chevron-container {
|
|
40
|
+
width: 32px;
|
|
41
|
+
width: var(--size-32);
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
color: var(--color-interactive-primary);
|
|
44
|
+
margin-left: 8px;
|
|
45
|
+
margin-left: var(--size-8);
|
|
46
|
+
transition: width 0.3s ease;
|
|
47
|
+
}
|
|
48
|
+
.wds-chevron-hidden {
|
|
49
|
+
width: 0;
|
|
50
|
+
}
|
|
51
|
+
.wds-expressive-money-input-currency-selector {
|
|
52
|
+
flex-shrink: 0;
|
|
53
|
+
margin-right: 24px;
|
|
54
|
+
margin-right: var(--size-24);
|
|
55
|
+
}
|
|
56
|
+
.wds-expressive-money-input-chevron {
|
|
57
|
+
transform: translateY(-5%);
|
|
58
|
+
}
|
package/build/styles/main.css
CHANGED
|
@@ -4447,6 +4447,64 @@ button.np-link {
|
|
|
4447
4447
|
box-shadow: inset 0 0 0 1px #c9cbce !important;
|
|
4448
4448
|
box-shadow: inset 0 0 0 1px var(--color-interactive-secondary) !important;
|
|
4449
4449
|
}
|
|
4450
|
+
.wds-amount-input-container {
|
|
4451
|
+
width: 100%;
|
|
4452
|
+
}
|
|
4453
|
+
.wds-amount-input-input-container {
|
|
4454
|
+
display: flex;
|
|
4455
|
+
justify-content: right;
|
|
4456
|
+
width: 100%;
|
|
4457
|
+
transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
|
|
4458
|
+
color: var(--color-interactive-primary);
|
|
4459
|
+
overflow: hidden;
|
|
4460
|
+
margin-bottom: 0 !important;
|
|
4461
|
+
}
|
|
4462
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4463
|
+
.wds-amount-input-input-container {
|
|
4464
|
+
transition: none;
|
|
4465
|
+
}
|
|
4466
|
+
}
|
|
4467
|
+
.wds-amount-input-input {
|
|
4468
|
+
border: none;
|
|
4469
|
+
outline: none;
|
|
4470
|
+
flex-grow: 1;
|
|
4471
|
+
text-align: right;
|
|
4472
|
+
background-color: transparent;
|
|
4473
|
+
}
|
|
4474
|
+
.wds-amount-input-input:focus-visible {
|
|
4475
|
+
outline: none;
|
|
4476
|
+
}
|
|
4477
|
+
.wds-amount-input-placeholder {
|
|
4478
|
+
flex-grow: 0;
|
|
4479
|
+
display: flex;
|
|
4480
|
+
align-items: center;
|
|
4481
|
+
}
|
|
4482
|
+
.wds-currency-selector:disabled {
|
|
4483
|
+
opacity: 1 !important;
|
|
4484
|
+
cursor: auto !important;
|
|
4485
|
+
cursor: initial !important;
|
|
4486
|
+
mix-blend-mode: initial !important;
|
|
4487
|
+
}
|
|
4488
|
+
.wds-chevron-container {
|
|
4489
|
+
width: 32px;
|
|
4490
|
+
width: var(--size-32);
|
|
4491
|
+
overflow: hidden;
|
|
4492
|
+
color: var(--color-interactive-primary);
|
|
4493
|
+
margin-left: 8px;
|
|
4494
|
+
margin-left: var(--size-8);
|
|
4495
|
+
transition: width 0.3s ease;
|
|
4496
|
+
}
|
|
4497
|
+
.wds-chevron-hidden {
|
|
4498
|
+
width: 0;
|
|
4499
|
+
}
|
|
4500
|
+
.wds-expressive-money-input-currency-selector {
|
|
4501
|
+
flex-shrink: 0;
|
|
4502
|
+
margin-right: 24px;
|
|
4503
|
+
margin-right: var(--size-24);
|
|
4504
|
+
}
|
|
4505
|
+
.wds-expressive-money-input-chevron {
|
|
4506
|
+
transform: translateY(-5%);
|
|
4507
|
+
}
|
|
4450
4508
|
.np-navigation-option {
|
|
4451
4509
|
-webkit-text-decoration: none;
|
|
4452
4510
|
text-decoration: none;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
|
|
2
|
+
type Props = {
|
|
3
|
+
id: string;
|
|
4
|
+
describedById?: string;
|
|
5
|
+
amount?: number | null;
|
|
6
|
+
currency: string;
|
|
7
|
+
autoFocus?: boolean;
|
|
8
|
+
onChange: (amount: number | null) => void;
|
|
9
|
+
onFocusChange?: (focused: boolean) => void;
|
|
10
|
+
} & Pick<ExpressiveMoneyInputProps, 'loading'>;
|
|
11
|
+
export declare const AmountInput: ({ id, describedById, amount, currency, autoFocus, onChange, onFocusChange, loading, }: Props) => import("react").JSX.Element;
|
|
12
|
+
export {};
|
|
13
|
+
//# sourceMappingURL=AmountInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/AmountInput.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,IAAI,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAe5E,KAAK,KAAK,GAAG;IACX,EAAE,EAAE,MAAM,CAAC;IACX,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,GAAG,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;AAE/C,eAAO,MAAM,WAAW,GAAI,uFASzB,KAAK,gCA2SP,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
interface Props {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
onClick?: () => void;
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const AnimatedNumber: ({ children, onClick, className }: Props) => import("react").JSX.Element;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=AnimatedNumber.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AnimatedNumber.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/AnimatedNumber.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,UAAU,KAAK;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,GAAI,kCAAkC,KAAK,gCA8BrE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/Chevron.tsx"],"names":[],"mappings":"AAIA,UAAU,KAAK;IACb,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,GAAI,gBAAuB,KAAK,gCA0BnD,CAAC"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { AvatarLayoutProps } from '../avatarLayout';
|
|
2
|
+
import { CurrencyType, Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
|
|
3
|
+
import { type ButtonHTMLAttributes } from 'react';
|
|
4
|
+
export interface CurrencyOption {
|
|
5
|
+
label?: string;
|
|
6
|
+
code: string;
|
|
7
|
+
keywords: string[] | undefined;
|
|
8
|
+
}
|
|
9
|
+
export interface CurrencySection {
|
|
10
|
+
title: string;
|
|
11
|
+
currencies: CurrencyOption[];
|
|
12
|
+
}
|
|
13
|
+
export type CurrencyOptions = CurrencySection[];
|
|
14
|
+
export type Props = {
|
|
15
|
+
id: string;
|
|
16
|
+
labelId: string;
|
|
17
|
+
options?: CurrencyOptions;
|
|
18
|
+
onChange?: (currency: CurrencyType) => void;
|
|
19
|
+
onOpen?: () => void;
|
|
20
|
+
addons?: AvatarLayoutProps['avatars'];
|
|
21
|
+
onSearchChange?: (payload: {
|
|
22
|
+
query: string;
|
|
23
|
+
resultCount: number;
|
|
24
|
+
}) => void;
|
|
25
|
+
} & Pick<ExpressiveMoneyInputProps, 'currency'>;
|
|
26
|
+
export declare const CurrencySelector: ({ id, currency, options, labelId, onChange, addons, onOpen, onSearchChange, }: Props) => import("react").JSX.Element;
|
|
27
|
+
export declare const ButtonInput: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
28
|
+
children?: import("react").ReactNode | undefined;
|
|
29
|
+
} & import("react").RefAttributes<HTMLButtonElement | null>>;
|
|
30
|
+
//# sourceMappingURL=CurrencySelector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CurrencySelector.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/CurrencySelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAOzD,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAG1F,OAAO,EACL,KAAK,oBAAoB,EAK1B,MAAM,OAAO,CAAC;AAKf,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,cAAc,EAAE,CAAC;CAC9B;AAED,MAAM,MAAM,eAAe,GAAG,eAAe,EAAE,CAAC;AAEhD,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC5E,GAAG,IAAI,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAAC;AAEhD,eAAO,MAAM,gBAAgB,GAAI,+EAS9B,KAAK,gCA2FP,CAAC;AAEF,eAAO,MAAM,WAAW;;4DAgBtB,CAAC"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { type Props as CurrencySelectorProps } from './CurrencySelector';
|
|
3
|
+
import { CommonProps } from '../common';
|
|
4
|
+
import { type InlinePromptProps } from '../prompt/InlinePrompt';
|
|
5
|
+
type AmountType = number | null;
|
|
6
|
+
export type CurrencyType = string;
|
|
7
|
+
type DefaultCurrencySelectorInstanceType = Pick<CurrencySelectorProps, 'addons' | 'options' | 'onChange' | 'onOpen' | 'onSearchChange'>;
|
|
8
|
+
type CustomCurrencySelectorInstanceType = (props: {
|
|
9
|
+
id: string;
|
|
10
|
+
labelId: string;
|
|
11
|
+
}) => ReactNode;
|
|
12
|
+
type CurrencySelectorType = DefaultCurrencySelectorInstanceType | CustomCurrencySelectorInstanceType;
|
|
13
|
+
export type Props = {
|
|
14
|
+
label?: ReactNode;
|
|
15
|
+
currencySelector?: CurrencySelectorType;
|
|
16
|
+
amount?: AmountType;
|
|
17
|
+
currency: CurrencyType;
|
|
18
|
+
inlinePrompt?: {
|
|
19
|
+
sentiment?: InlinePromptProps['sentiment'];
|
|
20
|
+
message: InlinePromptProps['children'];
|
|
21
|
+
};
|
|
22
|
+
showChevron?: boolean;
|
|
23
|
+
autoFocus?: boolean;
|
|
24
|
+
loading?: boolean;
|
|
25
|
+
onAmountChange: (amount: AmountType) => void;
|
|
26
|
+
onFocusChange?: (focused: boolean) => void;
|
|
27
|
+
} & CommonProps;
|
|
28
|
+
export default function ExpressiveMoneyInput({ label, currency, currencySelector, amount, onAmountChange, className, inlinePrompt, showChevron, autoFocus, loading, onFocusChange, }: Props): import("react").JSX.Element;
|
|
29
|
+
export {};
|
|
30
|
+
//# sourceMappingURL=ExpressiveMoneyInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpressiveMoneyInput.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/ExpressiveMoneyInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,KAAK,KAAK,IAAI,qBAAqB,EAAoB,MAAM,oBAAoB,CAAC;AAC3F,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE9E,KAAK,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC;AAChC,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC,KAAK,mCAAmC,GAAG,IAAI,CAC7C,qBAAqB,EACrB,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,gBAAgB,CAChE,CAAC;AACF,KAAK,kCAAkC,GAAG,CAAC,KAAK,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,KAAK,SAAS,CAAC;AAChG,KAAK,oBAAoB,GACrB,mCAAmC,GACnC,kCAAkC,CAAC;AAEvC,MAAM,MAAM,KAAK,GAAG;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,oBAAoB,CAAC;IACxC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,QAAQ,EAAE,YAAY,CAAC;IACvB,YAAY,CAAC,EAAE;QACb,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;QAC3C,OAAO,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;KACxC,CAAC;IACF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C,GAAG,WAAW,CAAC;AAEhB,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,KAAK,EACL,QAAQ,EACR,gBAAyE,EACzE,MAAM,EACN,cAAc,EACd,SAAS,EACT,YAAY,EACZ,WAAW,EACX,SAAS,EACT,OAAO,EACP,aAAa,GACd,EAAE,KAAK,+BAuEP"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
currencySelectorSearchPlaceholder: {
|
|
3
|
+
id: string;
|
|
4
|
+
defaultMessage: string;
|
|
5
|
+
};
|
|
6
|
+
currencySelectorSelectCurrency: {
|
|
7
|
+
id: string;
|
|
8
|
+
defaultMessage: string;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export default _default;
|
|
12
|
+
//# sourceMappingURL=ExpressiveMoneyInput.messages.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExpressiveMoneyInput.messages.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/ExpressiveMoneyInput.messages.ts"],"names":[],"mappings":";;;;;;;;;;AAEA,wBAUG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACjF,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFocus.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/useFocus.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ;;sBAgBC,OAAO;;4BAUD,OAAO;CAIlC,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type CSSProperties } from 'react';
|
|
2
|
+
import { Props as ExpressiveMoneyInputProps } from './ExpressiveMoneyInput';
|
|
3
|
+
type InputStyleObject = {
|
|
4
|
+
value: string;
|
|
5
|
+
focus: boolean;
|
|
6
|
+
inputElement: HTMLInputElement | null;
|
|
7
|
+
} & Pick<ExpressiveMoneyInputProps, 'loading'>;
|
|
8
|
+
export declare const useInputStyle: ({ value, focus, inputElement, loading }: InputStyleObject) => CSSProperties;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=useInputStyle.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useInputStyle.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/useInputStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAwC,MAAM,OAAO,CAAC;AACjF,OAAO,EAAE,KAAK,IAAI,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAE5E,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACvC,GAAG,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,CAAC;AAE/C,eAAO,MAAM,aAAa,GAAI,yCAAyC,gBAAgB,kBAyBtF,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type SyntheticEvent } from 'react';
|
|
2
|
+
export declare const useSelectionRange: () => {
|
|
3
|
+
selection: {
|
|
4
|
+
selectionStart: number | null;
|
|
5
|
+
selectionEnd: number | null;
|
|
6
|
+
} | undefined;
|
|
7
|
+
handleSelect: (e: SyntheticEvent<HTMLInputElement>) => void;
|
|
8
|
+
handleSelectionBlur: () => void;
|
|
9
|
+
};
|
|
10
|
+
//# sourceMappingURL=useSelectionRange.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSelectionRange.d.ts","sourceRoot":"","sources":["../../../src/expressiveMoneyInput/useSelectionRange.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAU,MAAM,OAAO,CAAC;AAEpD,eAAO,MAAM,iBAAiB;;wBAEV,MAAM,GAAG,IAAI;sBACf,MAAM,GAAG,IAAI;;sBAGJ,cAAc,CAAC,gBAAgB,CAAC;;CAc1D,CAAC"}
|