@transferwise/components 0.0.0-experimental-2aa3886 → 0.0.0-experimental-e783ca8
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/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/phoneNumberInput/PhoneNumberInput.js +36 -2
- package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.messages.js +6 -0
- package/build/phoneNumberInput/PhoneNumberInput.messages.js.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.messages.mjs +6 -0
- package/build/phoneNumberInput/PhoneNumberInput.messages.mjs.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.mjs +36 -2
- package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
- package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map +1 -1
- package/build/types/phoneNumberInput/PhoneNumberInput.messages.d.ts +8 -0
- package/build/types/phoneNumberInput/PhoneNumberInput.messages.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/build/types/uploadInput/UploadInput.d.ts.map +1 -1
- package/build/types/uploadInput/uploadItem/UploadItem.d.ts +1 -1
- package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map +1 -1
- package/build/uploadInput/UploadInput.js +6 -55
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.mjs +6 -55
- package/build/uploadInput/UploadInput.mjs.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.js +6 -12
- package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.mjs +6 -12
- package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
- package/package.json +3 -6
- package/src/i18n/en.json +2 -0
- package/src/phoneNumberInput/PhoneNumberInput.messages.ts +8 -0
- package/src/phoneNumberInput/PhoneNumberInput.spec.tsx +77 -43
- package/src/phoneNumberInput/PhoneNumberInput.tsx +34 -2
- package/src/test-utils/jest.setup.ts +0 -4
- package/src/typeahead/Typeahead.spec.tsx +182 -0
- package/src/typeahead/typeaheadInput/TypeaheadInput.spec.tsx +103 -0
- package/src/typeahead/util/highlight.spec.tsx +43 -0
- package/src/uploadInput/UploadInput.tsx +8 -81
- package/src/uploadInput/uploadItem/UploadItem.tsx +6 -11
- package/src/typeahead/Typeahead.rtl.spec.tsx +0 -54
- package/src/typeahead/Typeahead.spec.js +0 -404
- package/src/typeahead/typeaheadInput/TypeaheadInput.spec.js +0 -74
- package/src/typeahead/typeaheadOption/TypeaheadOption.spec.js +0 -75
- package/src/typeahead/util/highlight.spec.js +0 -34
package/build/i18n/en.json
CHANGED
|
@@ -23,6 +23,8 @@
|
|
|
23
23
|
"neptune.MoneyInput.Select.placeholder": "Select an option...",
|
|
24
24
|
"neptune.MoneyInput.Select.selectCurrencyLabel": "Select currency",
|
|
25
25
|
"neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
|
|
26
|
+
"neptune.PhoneNumberInput.countryCodeLabel": "Country code",
|
|
27
|
+
"neptune.PhoneNumberInput.phoneNumberLabel": "Phone number",
|
|
26
28
|
"neptune.Select.searchPlaceholder": "Search...",
|
|
27
29
|
"neptune.SelectInput.noResultsFound": "No results found",
|
|
28
30
|
"neptune.SelectOption.action.label": "Choose",
|
package/build/i18n/en.json.js
CHANGED
|
@@ -27,6 +27,8 @@ var en = {
|
|
|
27
27
|
"neptune.MoneyInput.Select.placeholder": "Select an option...",
|
|
28
28
|
"neptune.MoneyInput.Select.selectCurrencyLabel": "Select currency",
|
|
29
29
|
"neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
|
|
30
|
+
"neptune.PhoneNumberInput.countryCodeLabel": "Country code",
|
|
31
|
+
"neptune.PhoneNumberInput.phoneNumberLabel": "Phone number",
|
|
30
32
|
"neptune.Select.searchPlaceholder": "Search...",
|
|
31
33
|
"neptune.SelectInput.noResultsFound": "No results found",
|
|
32
34
|
"neptune.SelectOption.action.label": "Choose",
|
|
@@ -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
|
@@ -23,6 +23,8 @@ var en = {
|
|
|
23
23
|
"neptune.MoneyInput.Select.placeholder": "Select an option...",
|
|
24
24
|
"neptune.MoneyInput.Select.selectCurrencyLabel": "Select currency",
|
|
25
25
|
"neptune.PhoneNumberInput.SelectInput.placeholder": "Select an option...",
|
|
26
|
+
"neptune.PhoneNumberInput.countryCodeLabel": "Country code",
|
|
27
|
+
"neptune.PhoneNumberInput.phoneNumberLabel": "Phone number",
|
|
26
28
|
"neptune.Select.searchPlaceholder": "Search...",
|
|
27
29
|
"neptune.SelectInput.noResultsFound": "No results found",
|
|
28
30
|
"neptune.SelectOption.action.label": "Choose",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"en.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -68,6 +68,23 @@ const PhoneNumberInput = ({
|
|
|
68
68
|
locale,
|
|
69
69
|
formatMessage
|
|
70
70
|
} = reactIntl.useIntl();
|
|
71
|
+
const createId = (customID, backup) => {
|
|
72
|
+
if (customID) {
|
|
73
|
+
return customID + (backup ? `-${backup}` : '');
|
|
74
|
+
}
|
|
75
|
+
const random = Math.random().toString(36).slice(2, 8);
|
|
76
|
+
return `${backup}-${random}`;
|
|
77
|
+
};
|
|
78
|
+
const ids = {
|
|
79
|
+
countryCode: {
|
|
80
|
+
label: createId(id, 'country-code-label'),
|
|
81
|
+
select: createId(id, 'country-code-select')
|
|
82
|
+
},
|
|
83
|
+
phoneNumber: {
|
|
84
|
+
label: createId(id, 'phone-number-label'),
|
|
85
|
+
input: createId(id, id ? '' : 'phone-number-input')
|
|
86
|
+
}
|
|
87
|
+
};
|
|
71
88
|
const [internalValue, setInternalValue] = React.useState(() => {
|
|
72
89
|
const cleanValue = initialValue ? cleanNumber.cleanNumber(initialValue) : null;
|
|
73
90
|
if (!cleanValue || !isValidPhoneNumber.isValidPhoneNumber(cleanValue, 1)) {
|
|
@@ -124,7 +141,11 @@ const PhoneNumberInput = ({
|
|
|
124
141
|
...inputAttributes,
|
|
125
142
|
"aria-labelledby": ariaLabelledBy,
|
|
126
143
|
className: "tw-telephone",
|
|
127
|
-
children: [/*#__PURE__*/jsxRuntime.jsx("
|
|
144
|
+
children: [/*#__PURE__*/jsxRuntime.jsx("label", {
|
|
145
|
+
className: "sr-only",
|
|
146
|
+
id: ids.countryCode.label,
|
|
147
|
+
children: formatMessage(PhoneNumberInput_messages.default.countryCodeLabel)
|
|
148
|
+
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
128
149
|
className: "tw-telephone__country-select",
|
|
129
150
|
children: /*#__PURE__*/jsxRuntime.jsx(SelectInput.SelectInput, {
|
|
130
151
|
placeholder: formatMessage(PhoneNumberInput_messages.default.selectInputPlaceholder),
|
|
@@ -142,6 +163,13 @@ const PhoneNumberInput = ({
|
|
|
142
163
|
filterPlaceholder: searchPlaceholder,
|
|
143
164
|
disabled: disabled,
|
|
144
165
|
size: size$1,
|
|
166
|
+
id: ids.countryCode.select,
|
|
167
|
+
UNSAFE_triggerButtonProps: {
|
|
168
|
+
id: ids.countryCode.select,
|
|
169
|
+
'aria-labelledby': ids.countryCode.label,
|
|
170
|
+
'aria-describedby': undefined,
|
|
171
|
+
'aria-invalid': undefined
|
|
172
|
+
},
|
|
145
173
|
onChange: prefix => {
|
|
146
174
|
const country = prefix != null ? index$2.findCountryByPrefix(prefix) : null;
|
|
147
175
|
setInternalValue(prev => ({
|
|
@@ -157,12 +185,17 @@ const PhoneNumberInput = ({
|
|
|
157
185
|
},
|
|
158
186
|
...selectProps
|
|
159
187
|
})
|
|
188
|
+
}), /*#__PURE__*/jsxRuntime.jsx("label", {
|
|
189
|
+
className: "sr-only",
|
|
190
|
+
id: ids.phoneNumber.label,
|
|
191
|
+
htmlFor: ids.phoneNumber.input,
|
|
192
|
+
children: formatMessage(PhoneNumberInput_messages.default.phoneNumberLabel)
|
|
160
193
|
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
161
194
|
className: "tw-telephone__number-input",
|
|
162
195
|
children: /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
163
196
|
className: `input-group input-group-${size$1}`,
|
|
164
197
|
children: /*#__PURE__*/jsxRuntime.jsx(Input.Input, {
|
|
165
|
-
id:
|
|
198
|
+
id: ids.phoneNumber.input,
|
|
166
199
|
autoComplete: "tel-national",
|
|
167
200
|
name: "phoneNumber",
|
|
168
201
|
inputMode: "numeric",
|
|
@@ -170,6 +203,7 @@ const PhoneNumberInput = ({
|
|
|
170
203
|
disabled: disabled,
|
|
171
204
|
required: required,
|
|
172
205
|
placeholder: placeholder,
|
|
206
|
+
"aria-labelledby": ids.phoneNumber.label,
|
|
173
207
|
onChange: onSuffixChange,
|
|
174
208
|
onPaste: onPaste,
|
|
175
209
|
onFocus: onFocus,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneNumberInput.js","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\n\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n explodeNumberModel,\n isValidPhoneNumber,\n cleanNumber,\n setDefaultPrefix,\n sortArrayByProperty,\n groupCountriesByPrefix,\n excludeCountries,\n findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\nimport { Input } from '../inputs/Input';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n id?: string;\n 'aria-labelledby'?: string;\n required?: boolean;\n disabled?: boolean;\n initialValue?: string;\n onChange: (value: string | null, prefix: string) => void;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: () => void;\n countryCode?: string;\n searchPlaceholder?: string;\n size?: SizeSmall | SizeMedium | SizeLarge;\n placeholder?: string;\n selectProps?: Partial<SelectInputProps<string | null>>;\n /** List of iso3 codes of countries to remove from the list */\n disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n id,\n 'aria-labelledby': ariaLabelledByProp,\n required,\n disabled,\n initialValue,\n onChange,\n onFocus,\n onBlur,\n countryCode,\n searchPlaceholder = 'Prefix',\n size = Size.MEDIUM,\n placeholder,\n selectProps = defaultSelectProps,\n disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {\n return {\n prefix: setDefaultPrefix(locale, countryCode),\n suffix: '',\n };\n }\n\n return explodeNumberModel(cleanValue);\n });\n const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);\n\n const [suffixDirty, setSuffixDirty] = useState(false);\n useEffect(() => {\n if (internalValue.suffix) {\n setSuffixDirty(true);\n }\n }, [internalValue.suffix]);\n\n const countriesByPrefix = useMemo(\n () =>\n groupCountriesByPrefix(\n sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n ),\n [disabledCountries],\n );\n\n const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n const suffix = event.target.value;\n if (ALLOWED_PHONE_CHARS.test(suffix)) {\n setInternalValue((prev) => ({ ...prev, suffix }));\n }\n };\n\n const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n if (!event.nativeEvent.clipboardData) {\n return;\n }\n\n const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n /(\\s|-)+/g,\n '',\n );\n const pastedNumber = explodeNumberModel(pastedValue);\n\n if (\n pastedNumber.prefix != null &&\n countriesByPrefix.has(pastedNumber.prefix) &&\n ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n ) {\n setInternalValue(pastedNumber);\n }\n };\n\n useEffect(() => {\n if (broadcastedValue === null) {\n setBroadcastedValue(internalValue);\n return;\n }\n\n const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;\n\n if (internalPhoneNumber === broadcastedPhoneNumber) {\n return;\n }\n\n const newValue = isValidPhoneNumber(internalPhoneNumber)\n ? cleanNumber(internalPhoneNumber)\n : null;\n\n onChange(\n newValue,\n internalValue.prefix ?? '', // TODO: Allow `null` in public API\n );\n setBroadcastedValue(internalValue);\n }, [onChange, broadcastedValue, internalValue]);\n\n return (\n <div\n role=\"group\"\n {...inputAttributes}\n aria-labelledby={ariaLabelledBy}\n className=\"tw-telephone\"\n >\n <div className=\"tw-telephone__country-select\">\n <SelectInput\n placeholder={formatMessage(messages.selectInputPlaceholder)}\n items={[...countriesByPrefix].map(([prefix, countries]) => ({\n type: 'option',\n value: prefix,\n filterMatchers: [\n prefix,\n ...countries.map((country) => country.name),\n ...countries.map((country) => country.iso3),\n ],\n }))}\n value={internalValue.prefix}\n renderValue={(prefix, withinTrigger) => (\n <SelectInputOptionContent\n title={prefix}\n note={\n withinTrigger\n ? undefined\n : countriesByPrefix\n .get(prefix)\n ?.map((country) => country.iso3)\n .join(', ')\n }\n />\n )}\n filterable\n filterPlaceholder={searchPlaceholder}\n disabled={disabled}\n size={size}\n onChange={(prefix) => {\n const country = prefix != null ? findCountryByPrefix(prefix) : null;\n setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n }}\n onClose={() => {\n if (suffixDirty) {\n onBlur?.();\n }\n }}\n {...selectProps}\n />\n </div>\n <div className=\"tw-telephone__number-input\">\n <div className={`input-group input-group-${size}`}>\n <Input\n id={id}\n autoComplete=\"tel-national\"\n name=\"phoneNumber\"\n inputMode=\"numeric\"\n value={internalValue.suffix}\n disabled={disabled}\n required={required}\n placeholder={placeholder}\n onChange={onSuffixChange}\n onPaste={onPaste}\n onFocus={onFocus}\n onBlur={() => onBlur?.()}\n />\n </div>\n </div>\n </div>\n );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","newValue","_jsxs","role","className","children","_jsx","SelectInput","messages","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","findCountryByPrefix","format","phoneFormat","onClose","Input","autoComplete","inputMode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAMA,mBAAmB,GAAG,eAAe;AAoB3C,MAAMC,kBAAkB,GAAG,EAAiD;AAC5E,MAAMC,wBAAwB,GAAG,EAAuD;AAElFC,MAAAA,gBAAgB,GAAGA,CAAC;EACxBC,EAAE;AACF,EAAA,iBAAiB,EAAEC,kBAAkB;EACrCC,QAAQ;EACRC,QAAQ;EACRC,YAAY;EACZC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACNC,WAAW;AACXC,EAAAA,iBAAiB,GAAG,QAAQ;QAC5BC,MAAI,GAAGC,SAAI,CAACC,MAAM;EAClBC,WAAW;AACXC,EAAAA,WAAW,GAAGjB,kBAAkB;AAChCkB,EAAAA,iBAAiB,GAAGjB;AACE,CAAA,KAAI;EAC1B,MAAMkB,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAM,GAAA,CAAC;AAClE,EAAA,MAAMC,cAAc,GAAGlB,kBAAkB,IAAIe,eAAe,CAAC,iBAAiB,CAAC;EAE/E,MAAM;IAAEI,MAAM;AAAEC,IAAAA;GAAe,GAAGC,iBAAO,EAAE;EAE3C,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGC,cAAQ,CAAc,MAAK;IACnE,MAAMC,UAAU,GAAGtB,YAAY,GAAGuB,uBAAW,CAACvB,YAAY,CAAC,GAAG,IAAI;IAElE,IAAI,CAACsB,UAAU,IAAI,CAACE,qCAAkB,CAACF,UAAU,EAAE,CAAC,CAAC,EAAE;MACrD,OAAO;AACLG,QAAAA,MAAM,EAAEC,sBAAgB,CAACV,MAAM,EAAEZ,WAAW,CAAC;AAC7CuB,QAAAA,MAAM,EAAE;OACT;AACH;IAEA,OAAOC,0BAAkB,CAACN,UAAU,CAAC;AACvC,GAAC,CAAC;EACF,MAAM,CAACO,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGT,cAAQ,CAAqB,IAAI,CAAC;EAElF,MAAM,CAACU,WAAW,EAAEC,cAAc,CAAC,GAAGX,cAAQ,CAAC,KAAK,CAAC;AACrDY,EAAAA,eAAS,CAAC,MAAK;IACb,IAAId,aAAa,CAACQ,MAAM,EAAE;MACxBK,cAAc,CAAC,IAAI,CAAC;AACtB;AACF,GAAC,EAAE,CAACb,aAAa,CAACQ,MAAM,CAAC,CAAC;EAE1B,MAAMO,iBAAiB,GAAGC,aAAO,CAC/B,MACEC,6CAAsB,CACpBC,uCAAmB,CAACC,iCAAgB,CAACC,iBAAS,EAAE5B,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAC5E,EACH,CAACA,iBAAiB,CAAC,CACpB;EAED,MAAM6B,cAAc,GAAgDC,KAAK,IAAI;AAC3E,IAAA,MAAMd,MAAM,GAAGc,KAAK,CAACC,MAAM,CAACC,KAAK;AACjC,IAAA,IAAInD,mBAAmB,CAACoD,IAAI,CAACjB,MAAM,CAAC,EAAE;MACpCP,gBAAgB,CAAEyB,IAAI,KAAM;AAAE,QAAA,GAAGA,IAAI;AAAElB,QAAAA;AAAQ,OAAA,CAAC,CAAC;AACnD;GACD;EAED,MAAMmB,OAAO,GAAmDL,KAAK,IAAI;AACvE,IAAA,IAAI,CAACA,KAAK,CAACM,WAAW,CAACC,aAAa,EAAE;AACpC,MAAA;AACF;IAEA,MAAMC,WAAW,GAAG,CAACR,KAAK,CAACM,WAAW,CAACC,aAAa,CAACE,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,EAAEC,OAAO,CACvF,UAAU,EACV,EAAE,CACH;AACD,IAAA,MAAMC,YAAY,GAAGxB,0BAAkB,CAACqB,WAAW,CAAC;IAEpD,IACEG,YAAY,CAAC3B,MAAM,IAAI,IAAI,IAC3BS,iBAAiB,CAACmB,GAAG,CAACD,YAAY,CAAC3B,MAAM,CAAC,IAC1CjC,mBAAmB,CAACoD,IAAI,CAACQ,YAAY,CAACzB,MAAM,CAAC,EAC7C;MACAP,gBAAgB,CAACgC,YAAY,CAAC;AAChC;GACD;AAEDnB,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIJ,gBAAgB,KAAK,IAAI,EAAE;MAC7BC,mBAAmB,CAACX,aAAa,CAAC;AAClC,MAAA;AACF;AAEA,IAAA,MAAMmC,mBAAmB,GAAG,CAAGnC,EAAAA,aAAa,CAACM,MAAM,IAAI,EAAE,CAAGN,EAAAA,aAAa,CAACQ,MAAM,CAAE,CAAA;AAClF,IAAA,MAAM4B,sBAAsB,GAAG,CAAG1B,EAAAA,gBAAgB,CAACJ,MAAM,IAAI,EAAE,CAAGI,EAAAA,gBAAgB,CAACF,MAAM,CAAE,CAAA;IAE3F,IAAI2B,mBAAmB,KAAKC,sBAAsB,EAAE;AAClD,MAAA;AACF;AAEA,IAAA,MAAMC,QAAQ,GAAGhC,qCAAkB,CAAC8B,mBAAmB,CAAC,GACpD/B,uBAAW,CAAC+B,mBAAmB,CAAC,GAChC,IAAI;IAERrD,QAAQ,CACNuD,QAAQ,EACRrC,aAAa,CAACM,MAAM,IAAI,EAAE,CAC3B;IACDK,mBAAmB,CAACX,aAAa,CAAC;GACnC,EAAE,CAAClB,QAAQ,EAAE4B,gBAAgB,EAAEV,aAAa,CAAC,CAAC;AAE/C,EAAA,oBACEsC,eAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,OAAO;AAAA,IAAA,GACR9C,eAAe;AACnB,IAAA,iBAAA,EAAiBG,cAAe;AAChC4C,IAAAA,SAAS,EAAC,cAAc;AAAAC,IAAAA,QAAA,gBAExBC,cAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,8BAA8B;MAAAC,QAAA,eAC3CC,cAAA,CAACC,uBAAW,EAAA;AACVrD,QAAAA,WAAW,EAAEQ,aAAa,CAAC8C,iCAAQ,CAACC,sBAAsB,CAAE;AAC5DC,QAAAA,KAAK,EAAE,CAAC,GAAG/B,iBAAiB,CAAC,CAACgC,GAAG,CAAC,CAAC,CAACzC,MAAM,EAAEc,SAAS,CAAC,MAAM;AAC1D4B,UAAAA,IAAI,EAAE,QAAQ;AACdxB,UAAAA,KAAK,EAAElB,MAAM;UACb2C,cAAc,EAAE,CACd3C,MAAM,EACN,GAAGc,SAAS,CAAC2B,GAAG,CAAEG,OAAO,IAAKA,OAAO,CAACC,IAAI,CAAC,EAC3C,GAAG/B,SAAS,CAAC2B,GAAG,CAAEG,OAAO,IAAKA,OAAO,CAACE,IAAI,CAAC;AAE9C,SAAA,CAAC,CAAE;QACJ5B,KAAK,EAAExB,aAAa,CAACM,MAAO;QAC5B+C,WAAW,EAAEA,CAAC/C,MAAM,EAAEgD,aAAa,kBACjCZ,cAAA,CAACa,oCAAwB,EAAA;AACvBC,UAAAA,KAAK,EAAElD,MAAO;UACdmD,IAAI,EACFH,aAAa,GACTI,SAAS,GACT3C,iBAAiB,CACd4C,GAAG,CAACrD,MAAM,CAAC,EACVyC,GAAG,CAAEG,OAAO,IAAKA,OAAO,CAACE,IAAI,CAAC,CAC/BQ,IAAI,CAAC,IAAI;AACjB,UAEH;QACFC,UAAU,EAAA,IAAA;AACVC,QAAAA,iBAAiB,EAAE5E,iBAAkB;AACrCN,QAAAA,QAAQ,EAAEA,QAAS;AACnBO,QAAAA,IAAI,EAAEA,MAAK;QACXL,QAAQ,EAAGwB,MAAM,IAAI;UACnB,MAAM4C,OAAO,GAAG5C,MAAM,IAAI,IAAI,GAAGyD,2BAAmB,CAACzD,MAAM,CAAC,GAAG,IAAI;UACnEL,gBAAgB,CAAEyB,IAAI,KAAM;AAAE,YAAA,GAAGA,IAAI;YAAEpB,MAAM;YAAE0D,MAAM,EAAEd,OAAO,EAAEe;AAAW,WAAE,CAAC,CAAC;SAC/E;QACFC,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAItD,WAAW,EAAE;AACf5B,YAAAA,MAAM,IAAI;AACZ;SACA;QAAA,GACEO;OAER;KAAK,CACL,eAAAmD,cAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,4BAA4B;AAAAC,MAAAA,QAAA,eACzCC,cAAA,CAAA,KAAA,EAAA;QAAKF,SAAS,EAAE,CAA2BrD,wBAAAA,EAAAA,MAAI,CAAG,CAAA;QAAAsD,QAAA,eAChDC,cAAA,CAACyB,WAAK,EAAA;AACJ1F,UAAAA,EAAE,EAAEA,EAAG;AACP2F,UAAAA,YAAY,EAAC,cAAc;AAC3BjB,UAAAA,IAAI,EAAC,aAAa;AAClBkB,UAAAA,SAAS,EAAC,SAAS;UACnB7C,KAAK,EAAExB,aAAa,CAACQ,MAAO;AAC5B5B,UAAAA,QAAQ,EAAEA,QAAS;AACnBD,UAAAA,QAAQ,EAAEA,QAAS;AACnBW,UAAAA,WAAW,EAAEA,WAAY;AACzBR,UAAAA,QAAQ,EAAEuC,cAAe;AACzBM,UAAAA,OAAO,EAAEA,OAAQ;AACjB5C,UAAAA,OAAO,EAAEA,OAAQ;AACjBC,UAAAA,MAAM,EAAEA,MAAMA,MAAM;SAExB;OAAK;AACP,KAAK,CACP;AAAA,GAAK,CAAC;AAEV;;;;"}
|
|
1
|
+
{"version":3,"file":"PhoneNumberInput.js","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n explodeNumberModel,\n isValidPhoneNumber,\n cleanNumber,\n setDefaultPrefix,\n sortArrayByProperty,\n groupCountriesByPrefix,\n excludeCountries,\n findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\nimport { Input } from '../inputs/Input';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n id?: string;\n 'aria-labelledby'?: string;\n required?: boolean;\n disabled?: boolean;\n initialValue?: string;\n onChange: (value: string | null, prefix: string) => void;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: () => void;\n countryCode?: string;\n searchPlaceholder?: string;\n size?: SizeSmall | SizeMedium | SizeLarge;\n placeholder?: string;\n selectProps?: Partial<SelectInputProps<string | null>>;\n /** List of iso3 codes of countries to remove from the list */\n disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n id,\n 'aria-labelledby': ariaLabelledByProp,\n required,\n disabled,\n initialValue,\n onChange,\n onFocus,\n onBlur,\n countryCode,\n searchPlaceholder = 'Prefix',\n size = Size.MEDIUM,\n placeholder,\n selectProps = defaultSelectProps,\n disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const createId = (customID: string | undefined, backup: string): string => {\n if (customID) {\n return customID + (backup ? `-${backup}` : '');\n }\n const random = Math.random().toString(36).slice(2, 8);\n return `${backup}-${random}`;\n };\n\n const ids = {\n countryCode: {\n label: createId(id, 'country-code-label'),\n select: createId(id, 'country-code-select'),\n },\n phoneNumber: {\n label: createId(id, 'phone-number-label'),\n input: createId(id, id ? '' : 'phone-number-input'),\n },\n };\n\n const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {\n return {\n prefix: setDefaultPrefix(locale, countryCode),\n suffix: '',\n };\n }\n\n return explodeNumberModel(cleanValue);\n });\n const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);\n\n const [suffixDirty, setSuffixDirty] = useState(false);\n useEffect(() => {\n if (internalValue.suffix) {\n setSuffixDirty(true);\n }\n }, [internalValue.suffix]);\n\n const countriesByPrefix = useMemo(\n () =>\n groupCountriesByPrefix(\n sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n ),\n [disabledCountries],\n );\n\n const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n const suffix = event.target.value;\n if (ALLOWED_PHONE_CHARS.test(suffix)) {\n setInternalValue((prev) => ({ ...prev, suffix }));\n }\n };\n\n const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n if (!event.nativeEvent.clipboardData) {\n return;\n }\n\n const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n /(\\s|-)+/g,\n '',\n );\n const pastedNumber = explodeNumberModel(pastedValue);\n\n if (\n pastedNumber.prefix != null &&\n countriesByPrefix.has(pastedNumber.prefix) &&\n ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n ) {\n setInternalValue(pastedNumber);\n }\n };\n\n useEffect(() => {\n if (broadcastedValue === null) {\n setBroadcastedValue(internalValue);\n return;\n }\n\n const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;\n\n if (internalPhoneNumber === broadcastedPhoneNumber) {\n return;\n }\n\n const newValue = isValidPhoneNumber(internalPhoneNumber)\n ? cleanNumber(internalPhoneNumber)\n : null;\n\n onChange(\n newValue,\n internalValue.prefix ?? '', // TODO: Allow `null` in public API\n );\n setBroadcastedValue(internalValue);\n }, [onChange, broadcastedValue, internalValue]);\n\n return (\n <div\n role=\"group\"\n {...inputAttributes}\n aria-labelledby={ariaLabelledBy}\n className=\"tw-telephone\"\n >\n <label className=\"sr-only\" id={ids.countryCode.label}>\n {formatMessage(messages.countryCodeLabel)}\n </label>\n <div className=\"tw-telephone__country-select\">\n <SelectInput\n placeholder={formatMessage(messages.selectInputPlaceholder)}\n items={[...countriesByPrefix].map(([prefix, countries]) => ({\n type: 'option',\n value: prefix,\n filterMatchers: [\n prefix,\n ...countries.map((country) => country.name),\n ...countries.map((country) => country.iso3),\n ],\n }))}\n value={internalValue.prefix}\n renderValue={(prefix, withinTrigger) => (\n <SelectInputOptionContent\n title={prefix}\n note={\n withinTrigger\n ? undefined\n : countriesByPrefix\n .get(prefix)\n ?.map((country) => country.iso3)\n .join(', ')\n }\n />\n )}\n filterable\n filterPlaceholder={searchPlaceholder}\n disabled={disabled}\n size={size}\n id={ids.countryCode.select}\n UNSAFE_triggerButtonProps={{\n id: ids.countryCode.select,\n 'aria-labelledby': ids.countryCode.label,\n 'aria-describedby': undefined,\n 'aria-invalid': undefined,\n }}\n onChange={(prefix) => {\n const country = prefix != null ? findCountryByPrefix(prefix) : null;\n setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n }}\n onClose={() => {\n if (suffixDirty) {\n onBlur?.();\n }\n }}\n {...selectProps}\n />\n </div>\n <label className=\"sr-only\" id={ids.phoneNumber.label} htmlFor={ids.phoneNumber.input}>\n {formatMessage(messages.phoneNumberLabel)}\n </label>\n <div className=\"tw-telephone__number-input\">\n <div className={`input-group input-group-${size}`}>\n <Input\n id={ids.phoneNumber.input}\n autoComplete=\"tel-national\"\n name=\"phoneNumber\"\n inputMode=\"numeric\"\n value={internalValue.suffix}\n disabled={disabled}\n required={required}\n placeholder={placeholder}\n aria-labelledby={ids.phoneNumber.label}\n onChange={onSuffixChange}\n onPaste={onPaste}\n onFocus={onFocus}\n onBlur={() => onBlur?.()}\n />\n </div>\n </div>\n </div>\n );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","createId","customID","backup","random","Math","toString","slice","ids","label","select","phoneNumber","input","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","newValue","_jsxs","role","className","children","_jsx","messages","countryCodeLabel","SelectInput","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","UNSAFE_triggerButtonProps","findCountryByPrefix","format","phoneFormat","onClose","htmlFor","phoneNumberLabel","Input","autoComplete","inputMode"],"mappings":"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"}
|
|
@@ -7,6 +7,12 @@ var reactIntl = require('react-intl');
|
|
|
7
7
|
var messages = reactIntl.defineMessages({
|
|
8
8
|
selectInputPlaceholder: {
|
|
9
9
|
id: "neptune.PhoneNumberInput.SelectInput.placeholder"
|
|
10
|
+
},
|
|
11
|
+
countryCodeLabel: {
|
|
12
|
+
id: "neptune.PhoneNumberInput.countryCodeLabel"
|
|
13
|
+
},
|
|
14
|
+
phoneNumberLabel: {
|
|
15
|
+
id: "neptune.PhoneNumberInput.phoneNumberLabel"
|
|
10
16
|
}
|
|
11
17
|
});
|
|
12
18
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneNumberInput.messages.js","sources":["../../src/phoneNumberInput/PhoneNumberInput.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n selectInputPlaceholder: {\n id: 'neptune.PhoneNumberInput.SelectInput.placeholder',\n defaultMessage: 'Select an option...',\n },\n});\n"],"names":["defineMessages","selectInputPlaceholder","id"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,sBAAsB,EAAE;IACtBC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"PhoneNumberInput.messages.js","sources":["../../src/phoneNumberInput/PhoneNumberInput.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n selectInputPlaceholder: {\n id: 'neptune.PhoneNumberInput.SelectInput.placeholder',\n defaultMessage: 'Select an option...',\n },\n countryCodeLabel: {\n id: 'neptune.PhoneNumberInput.countryCodeLabel',\n defaultMessage: 'Country code',\n },\n phoneNumberLabel: {\n id: 'neptune.PhoneNumberInput.phoneNumberLabel',\n defaultMessage: 'Phone number',\n },\n});\n"],"names":["defineMessages","selectInputPlaceholder","id","countryCodeLabel","phoneNumberLabel"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,sBAAsB,EAAE;IACtBC,EAAE,EAAA;GAEH;AACDC,EAAAA,gBAAgB,EAAE;IAChBD,EAAE,EAAA;GAEH;AACDE,EAAAA,gBAAgB,EAAE;IAChBF,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}
|
|
@@ -3,6 +3,12 @@ import { defineMessages } from 'react-intl';
|
|
|
3
3
|
var messages = defineMessages({
|
|
4
4
|
selectInputPlaceholder: {
|
|
5
5
|
id: "neptune.PhoneNumberInput.SelectInput.placeholder"
|
|
6
|
+
},
|
|
7
|
+
countryCodeLabel: {
|
|
8
|
+
id: "neptune.PhoneNumberInput.countryCodeLabel"
|
|
9
|
+
},
|
|
10
|
+
phoneNumberLabel: {
|
|
11
|
+
id: "neptune.PhoneNumberInput.phoneNumberLabel"
|
|
6
12
|
}
|
|
7
13
|
});
|
|
8
14
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneNumberInput.messages.mjs","sources":["../../src/phoneNumberInput/PhoneNumberInput.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n selectInputPlaceholder: {\n id: 'neptune.PhoneNumberInput.SelectInput.placeholder',\n defaultMessage: 'Select an option...',\n },\n});\n"],"names":["defineMessages","selectInputPlaceholder","id"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,sBAAsB,EAAE;IACtBC,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"PhoneNumberInput.messages.mjs","sources":["../../src/phoneNumberInput/PhoneNumberInput.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n selectInputPlaceholder: {\n id: 'neptune.PhoneNumberInput.SelectInput.placeholder',\n defaultMessage: 'Select an option...',\n },\n countryCodeLabel: {\n id: 'neptune.PhoneNumberInput.countryCodeLabel',\n defaultMessage: 'Country code',\n },\n phoneNumberLabel: {\n id: 'neptune.PhoneNumberInput.phoneNumberLabel',\n defaultMessage: 'Phone number',\n },\n});\n"],"names":["defineMessages","selectInputPlaceholder","id","countryCodeLabel","phoneNumberLabel"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,sBAAsB,EAAE;IACtBC,EAAE,EAAA;GAEH;AACDC,EAAAA,gBAAgB,EAAE;IAChBD,EAAE,EAAA;GAEH;AACDE,EAAAA,gBAAgB,EAAE;IAChBF,EAAE,EAAA;AAEH;AACF,CAAA,CAAC;;;;"}
|
|
@@ -64,6 +64,23 @@ const PhoneNumberInput = ({
|
|
|
64
64
|
locale,
|
|
65
65
|
formatMessage
|
|
66
66
|
} = useIntl();
|
|
67
|
+
const createId = (customID, backup) => {
|
|
68
|
+
if (customID) {
|
|
69
|
+
return customID + (backup ? `-${backup}` : '');
|
|
70
|
+
}
|
|
71
|
+
const random = Math.random().toString(36).slice(2, 8);
|
|
72
|
+
return `${backup}-${random}`;
|
|
73
|
+
};
|
|
74
|
+
const ids = {
|
|
75
|
+
countryCode: {
|
|
76
|
+
label: createId(id, 'country-code-label'),
|
|
77
|
+
select: createId(id, 'country-code-select')
|
|
78
|
+
},
|
|
79
|
+
phoneNumber: {
|
|
80
|
+
label: createId(id, 'phone-number-label'),
|
|
81
|
+
input: createId(id, id ? '' : 'phone-number-input')
|
|
82
|
+
}
|
|
83
|
+
};
|
|
67
84
|
const [internalValue, setInternalValue] = useState(() => {
|
|
68
85
|
const cleanValue = initialValue ? cleanNumber(initialValue) : null;
|
|
69
86
|
if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {
|
|
@@ -120,7 +137,11 @@ const PhoneNumberInput = ({
|
|
|
120
137
|
...inputAttributes,
|
|
121
138
|
"aria-labelledby": ariaLabelledBy,
|
|
122
139
|
className: "tw-telephone",
|
|
123
|
-
children: [/*#__PURE__*/jsx("
|
|
140
|
+
children: [/*#__PURE__*/jsx("label", {
|
|
141
|
+
className: "sr-only",
|
|
142
|
+
id: ids.countryCode.label,
|
|
143
|
+
children: formatMessage(messages.countryCodeLabel)
|
|
144
|
+
}), /*#__PURE__*/jsx("div", {
|
|
124
145
|
className: "tw-telephone__country-select",
|
|
125
146
|
children: /*#__PURE__*/jsx(SelectInput, {
|
|
126
147
|
placeholder: formatMessage(messages.selectInputPlaceholder),
|
|
@@ -138,6 +159,13 @@ const PhoneNumberInput = ({
|
|
|
138
159
|
filterPlaceholder: searchPlaceholder,
|
|
139
160
|
disabled: disabled,
|
|
140
161
|
size: size,
|
|
162
|
+
id: ids.countryCode.select,
|
|
163
|
+
UNSAFE_triggerButtonProps: {
|
|
164
|
+
id: ids.countryCode.select,
|
|
165
|
+
'aria-labelledby': ids.countryCode.label,
|
|
166
|
+
'aria-describedby': undefined,
|
|
167
|
+
'aria-invalid': undefined
|
|
168
|
+
},
|
|
141
169
|
onChange: prefix => {
|
|
142
170
|
const country = prefix != null ? findCountryByPrefix(prefix) : null;
|
|
143
171
|
setInternalValue(prev => ({
|
|
@@ -153,12 +181,17 @@ const PhoneNumberInput = ({
|
|
|
153
181
|
},
|
|
154
182
|
...selectProps
|
|
155
183
|
})
|
|
184
|
+
}), /*#__PURE__*/jsx("label", {
|
|
185
|
+
className: "sr-only",
|
|
186
|
+
id: ids.phoneNumber.label,
|
|
187
|
+
htmlFor: ids.phoneNumber.input,
|
|
188
|
+
children: formatMessage(messages.phoneNumberLabel)
|
|
156
189
|
}), /*#__PURE__*/jsx("div", {
|
|
157
190
|
className: "tw-telephone__number-input",
|
|
158
191
|
children: /*#__PURE__*/jsx("div", {
|
|
159
192
|
className: `input-group input-group-${size}`,
|
|
160
193
|
children: /*#__PURE__*/jsx(Input, {
|
|
161
|
-
id:
|
|
194
|
+
id: ids.phoneNumber.input,
|
|
162
195
|
autoComplete: "tel-national",
|
|
163
196
|
name: "phoneNumber",
|
|
164
197
|
inputMode: "numeric",
|
|
@@ -166,6 +199,7 @@ const PhoneNumberInput = ({
|
|
|
166
199
|
disabled: disabled,
|
|
167
200
|
required: required,
|
|
168
201
|
placeholder: placeholder,
|
|
202
|
+
"aria-labelledby": ids.phoneNumber.label,
|
|
169
203
|
onChange: onSuffixChange,
|
|
170
204
|
onPaste: onPaste,
|
|
171
205
|
onFocus: onFocus,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneNumberInput.mjs","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\n\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n explodeNumberModel,\n isValidPhoneNumber,\n cleanNumber,\n setDefaultPrefix,\n sortArrayByProperty,\n groupCountriesByPrefix,\n excludeCountries,\n findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\nimport { Input } from '../inputs/Input';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n id?: string;\n 'aria-labelledby'?: string;\n required?: boolean;\n disabled?: boolean;\n initialValue?: string;\n onChange: (value: string | null, prefix: string) => void;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: () => void;\n countryCode?: string;\n searchPlaceholder?: string;\n size?: SizeSmall | SizeMedium | SizeLarge;\n placeholder?: string;\n selectProps?: Partial<SelectInputProps<string | null>>;\n /** List of iso3 codes of countries to remove from the list */\n disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n id,\n 'aria-labelledby': ariaLabelledByProp,\n required,\n disabled,\n initialValue,\n onChange,\n onFocus,\n onBlur,\n countryCode,\n searchPlaceholder = 'Prefix',\n size = Size.MEDIUM,\n placeholder,\n selectProps = defaultSelectProps,\n disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {\n return {\n prefix: setDefaultPrefix(locale, countryCode),\n suffix: '',\n };\n }\n\n return explodeNumberModel(cleanValue);\n });\n const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);\n\n const [suffixDirty, setSuffixDirty] = useState(false);\n useEffect(() => {\n if (internalValue.suffix) {\n setSuffixDirty(true);\n }\n }, [internalValue.suffix]);\n\n const countriesByPrefix = useMemo(\n () =>\n groupCountriesByPrefix(\n sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n ),\n [disabledCountries],\n );\n\n const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n const suffix = event.target.value;\n if (ALLOWED_PHONE_CHARS.test(suffix)) {\n setInternalValue((prev) => ({ ...prev, suffix }));\n }\n };\n\n const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n if (!event.nativeEvent.clipboardData) {\n return;\n }\n\n const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n /(\\s|-)+/g,\n '',\n );\n const pastedNumber = explodeNumberModel(pastedValue);\n\n if (\n pastedNumber.prefix != null &&\n countriesByPrefix.has(pastedNumber.prefix) &&\n ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n ) {\n setInternalValue(pastedNumber);\n }\n };\n\n useEffect(() => {\n if (broadcastedValue === null) {\n setBroadcastedValue(internalValue);\n return;\n }\n\n const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;\n\n if (internalPhoneNumber === broadcastedPhoneNumber) {\n return;\n }\n\n const newValue = isValidPhoneNumber(internalPhoneNumber)\n ? cleanNumber(internalPhoneNumber)\n : null;\n\n onChange(\n newValue,\n internalValue.prefix ?? '', // TODO: Allow `null` in public API\n );\n setBroadcastedValue(internalValue);\n }, [onChange, broadcastedValue, internalValue]);\n\n return (\n <div\n role=\"group\"\n {...inputAttributes}\n aria-labelledby={ariaLabelledBy}\n className=\"tw-telephone\"\n >\n <div className=\"tw-telephone__country-select\">\n <SelectInput\n placeholder={formatMessage(messages.selectInputPlaceholder)}\n items={[...countriesByPrefix].map(([prefix, countries]) => ({\n type: 'option',\n value: prefix,\n filterMatchers: [\n prefix,\n ...countries.map((country) => country.name),\n ...countries.map((country) => country.iso3),\n ],\n }))}\n value={internalValue.prefix}\n renderValue={(prefix, withinTrigger) => (\n <SelectInputOptionContent\n title={prefix}\n note={\n withinTrigger\n ? undefined\n : countriesByPrefix\n .get(prefix)\n ?.map((country) => country.iso3)\n .join(', ')\n }\n />\n )}\n filterable\n filterPlaceholder={searchPlaceholder}\n disabled={disabled}\n size={size}\n onChange={(prefix) => {\n const country = prefix != null ? findCountryByPrefix(prefix) : null;\n setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n }}\n onClose={() => {\n if (suffixDirty) {\n onBlur?.();\n }\n }}\n {...selectProps}\n />\n </div>\n <div className=\"tw-telephone__number-input\">\n <div className={`input-group input-group-${size}`}>\n <Input\n id={id}\n autoComplete=\"tel-national\"\n name=\"phoneNumber\"\n inputMode=\"numeric\"\n value={internalValue.suffix}\n disabled={disabled}\n required={required}\n placeholder={placeholder}\n onChange={onSuffixChange}\n onPaste={onPaste}\n onFocus={onFocus}\n onBlur={() => onBlur?.()}\n />\n </div>\n </div>\n </div>\n );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","newValue","_jsxs","role","className","children","_jsx","SelectInput","messages","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","findCountryByPrefix","format","phoneFormat","onClose","Input","autoComplete","inputMode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PhoneNumberInput.mjs","sources":["../../src/phoneNumberInput/PhoneNumberInput.tsx"],"sourcesContent":["import { useState, useEffect, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\nimport { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';\nimport messages from './PhoneNumberInput.messages';\nimport countries from './data/countries';\nimport {\n explodeNumberModel,\n isValidPhoneNumber,\n cleanNumber,\n setDefaultPrefix,\n sortArrayByProperty,\n groupCountriesByPrefix,\n excludeCountries,\n findCountryByPrefix,\n} from './utils';\nimport { PhoneNumber } from './utils/explodeNumberModel';\nimport { Input } from '../inputs/Input';\n\nconst ALLOWED_PHONE_CHARS = /^$|^[\\d-\\s]+$/;\n\nexport interface PhoneNumberInputProps {\n id?: string;\n 'aria-labelledby'?: string;\n required?: boolean;\n disabled?: boolean;\n initialValue?: string;\n onChange: (value: string | null, prefix: string) => void;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onBlur?: () => void;\n countryCode?: string;\n searchPlaceholder?: string;\n size?: SizeSmall | SizeMedium | SizeLarge;\n placeholder?: string;\n selectProps?: Partial<SelectInputProps<string | null>>;\n /** List of iso3 codes of countries to remove from the list */\n disabledCountries?: readonly string[];\n}\n\nconst defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];\nconst defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];\n\nconst PhoneNumberInput = ({\n id,\n 'aria-labelledby': ariaLabelledByProp,\n required,\n disabled,\n initialValue,\n onChange,\n onFocus,\n onBlur,\n countryCode,\n searchPlaceholder = 'Prefix',\n size = Size.MEDIUM,\n placeholder,\n selectProps = defaultSelectProps,\n disabledCountries = defaultDisabledCountries,\n}: PhoneNumberInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const createId = (customID: string | undefined, backup: string): string => {\n if (customID) {\n return customID + (backup ? `-${backup}` : '');\n }\n const random = Math.random().toString(36).slice(2, 8);\n return `${backup}-${random}`;\n };\n\n const ids = {\n countryCode: {\n label: createId(id, 'country-code-label'),\n select: createId(id, 'country-code-select'),\n },\n phoneNumber: {\n label: createId(id, 'phone-number-label'),\n input: createId(id, id ? '' : 'phone-number-input'),\n },\n };\n\n const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {\n const cleanValue = initialValue ? cleanNumber(initialValue) : null;\n\n if (!cleanValue || !isValidPhoneNumber(cleanValue, 1)) {\n return {\n prefix: setDefaultPrefix(locale, countryCode),\n suffix: '',\n };\n }\n\n return explodeNumberModel(cleanValue);\n });\n const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);\n\n const [suffixDirty, setSuffixDirty] = useState(false);\n useEffect(() => {\n if (internalValue.suffix) {\n setSuffixDirty(true);\n }\n }, [internalValue.suffix]);\n\n const countriesByPrefix = useMemo(\n () =>\n groupCountriesByPrefix(\n sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),\n ),\n [disabledCountries],\n );\n\n const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {\n const suffix = event.target.value;\n if (ALLOWED_PHONE_CHARS.test(suffix)) {\n setInternalValue((prev) => ({ ...prev, suffix }));\n }\n };\n\n const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {\n if (!event.nativeEvent.clipboardData) {\n return;\n }\n\n const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(\n /(\\s|-)+/g,\n '',\n );\n const pastedNumber = explodeNumberModel(pastedValue);\n\n if (\n pastedNumber.prefix != null &&\n countriesByPrefix.has(pastedNumber.prefix) &&\n ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)\n ) {\n setInternalValue(pastedNumber);\n }\n };\n\n useEffect(() => {\n if (broadcastedValue === null) {\n setBroadcastedValue(internalValue);\n return;\n }\n\n const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;\n const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;\n\n if (internalPhoneNumber === broadcastedPhoneNumber) {\n return;\n }\n\n const newValue = isValidPhoneNumber(internalPhoneNumber)\n ? cleanNumber(internalPhoneNumber)\n : null;\n\n onChange(\n newValue,\n internalValue.prefix ?? '', // TODO: Allow `null` in public API\n );\n setBroadcastedValue(internalValue);\n }, [onChange, broadcastedValue, internalValue]);\n\n return (\n <div\n role=\"group\"\n {...inputAttributes}\n aria-labelledby={ariaLabelledBy}\n className=\"tw-telephone\"\n >\n <label className=\"sr-only\" id={ids.countryCode.label}>\n {formatMessage(messages.countryCodeLabel)}\n </label>\n <div className=\"tw-telephone__country-select\">\n <SelectInput\n placeholder={formatMessage(messages.selectInputPlaceholder)}\n items={[...countriesByPrefix].map(([prefix, countries]) => ({\n type: 'option',\n value: prefix,\n filterMatchers: [\n prefix,\n ...countries.map((country) => country.name),\n ...countries.map((country) => country.iso3),\n ],\n }))}\n value={internalValue.prefix}\n renderValue={(prefix, withinTrigger) => (\n <SelectInputOptionContent\n title={prefix}\n note={\n withinTrigger\n ? undefined\n : countriesByPrefix\n .get(prefix)\n ?.map((country) => country.iso3)\n .join(', ')\n }\n />\n )}\n filterable\n filterPlaceholder={searchPlaceholder}\n disabled={disabled}\n size={size}\n id={ids.countryCode.select}\n UNSAFE_triggerButtonProps={{\n id: ids.countryCode.select,\n 'aria-labelledby': ids.countryCode.label,\n 'aria-describedby': undefined,\n 'aria-invalid': undefined,\n }}\n onChange={(prefix) => {\n const country = prefix != null ? findCountryByPrefix(prefix) : null;\n setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));\n }}\n onClose={() => {\n if (suffixDirty) {\n onBlur?.();\n }\n }}\n {...selectProps}\n />\n </div>\n <label className=\"sr-only\" id={ids.phoneNumber.label} htmlFor={ids.phoneNumber.input}>\n {formatMessage(messages.phoneNumberLabel)}\n </label>\n <div className=\"tw-telephone__number-input\">\n <div className={`input-group input-group-${size}`}>\n <Input\n id={ids.phoneNumber.input}\n autoComplete=\"tel-national\"\n name=\"phoneNumber\"\n inputMode=\"numeric\"\n value={internalValue.suffix}\n disabled={disabled}\n required={required}\n placeholder={placeholder}\n aria-labelledby={ids.phoneNumber.label}\n onChange={onSuffixChange}\n onPaste={onPaste}\n onFocus={onFocus}\n onBlur={() => onBlur?.()}\n />\n </div>\n </div>\n </div>\n );\n};\n\nexport default PhoneNumberInput;\n"],"names":["ALLOWED_PHONE_CHARS","defaultSelectProps","defaultDisabledCountries","PhoneNumberInput","id","ariaLabelledByProp","required","disabled","initialValue","onChange","onFocus","onBlur","countryCode","searchPlaceholder","size","Size","MEDIUM","placeholder","selectProps","disabledCountries","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","createId","customID","backup","random","Math","toString","slice","ids","label","select","phoneNumber","input","internalValue","setInternalValue","useState","cleanValue","cleanNumber","isValidPhoneNumber","prefix","setDefaultPrefix","suffix","explodeNumberModel","broadcastedValue","setBroadcastedValue","suffixDirty","setSuffixDirty","useEffect","countriesByPrefix","useMemo","groupCountriesByPrefix","sortArrayByProperty","excludeCountries","countries","onSuffixChange","event","target","value","test","prev","onPaste","nativeEvent","clipboardData","pastedValue","getData","replace","pastedNumber","has","internalPhoneNumber","broadcastedPhoneNumber","newValue","_jsxs","role","className","children","_jsx","messages","countryCodeLabel","SelectInput","selectInputPlaceholder","items","map","type","filterMatchers","country","name","iso3","renderValue","withinTrigger","SelectInputOptionContent","title","note","undefined","get","join","filterable","filterPlaceholder","UNSAFE_triggerButtonProps","findCountryByPrefix","format","phoneFormat","onClose","htmlFor","phoneNumberLabel","Input","autoComplete","inputMode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,mBAAmB,GAAG,eAAe;AAoB3C,MAAMC,kBAAkB,GAAG,EAAiD;AAC5E,MAAMC,wBAAwB,GAAG,EAAuD;AAElFC,MAAAA,gBAAgB,GAAGA,CAAC;EACxBC,EAAE;AACF,EAAA,iBAAiB,EAAEC,kBAAkB;EACrCC,QAAQ;EACRC,QAAQ;EACRC,YAAY;EACZC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACNC,WAAW;AACXC,EAAAA,iBAAiB,GAAG,QAAQ;EAC5BC,IAAI,GAAGC,IAAI,CAACC,MAAM;EAClBC,WAAW;AACXC,EAAAA,WAAW,GAAGjB,kBAAkB;AAChCkB,EAAAA,iBAAiB,GAAGjB;AACE,CAAA,KAAI;EAC1B,MAAMkB,eAAe,GAAGC,kBAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAM,GAAA,CAAC;AAClE,EAAA,MAAMC,cAAc,GAAGlB,kBAAkB,IAAIe,eAAe,CAAC,iBAAiB,CAAC;EAE/E,MAAM;IAAEI,MAAM;AAAEC,IAAAA;GAAe,GAAGC,OAAO,EAAE;AAE3C,EAAA,MAAMC,QAAQ,GAAGA,CAACC,QAA4B,EAAEC,MAAc,KAAY;AACxE,IAAA,IAAID,QAAQ,EAAE;MACZ,OAAOA,QAAQ,IAAIC,MAAM,GAAG,IAAIA,MAAM,CAAA,CAAE,GAAG,EAAE,CAAC;AAChD;AACA,IAAA,MAAMC,MAAM,GAAGC,IAAI,CAACD,MAAM,EAAE,CAACE,QAAQ,CAAC,EAAE,CAAC,CAACC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;AACrD,IAAA,OAAO,CAAGJ,EAAAA,MAAM,CAAIC,CAAAA,EAAAA,MAAM,CAAE,CAAA;GAC7B;AAED,EAAA,MAAMI,GAAG,GAAG;AACVtB,IAAAA,WAAW,EAAE;AACXuB,MAAAA,KAAK,EAAER,QAAQ,CAACvB,EAAE,EAAE,oBAAoB,CAAC;AACzCgC,MAAAA,MAAM,EAAET,QAAQ,CAACvB,EAAE,EAAE,qBAAqB;KAC3C;AACDiC,IAAAA,WAAW,EAAE;AACXF,MAAAA,KAAK,EAAER,QAAQ,CAACvB,EAAE,EAAE,oBAAoB,CAAC;MACzCkC,KAAK,EAAEX,QAAQ,CAACvB,EAAE,EAAEA,EAAE,GAAG,EAAE,GAAG,oBAAoB;AACnD;GACF;EAED,MAAM,CAACmC,aAAa,EAAEC,gBAAgB,CAAC,GAAGC,QAAQ,CAAc,MAAK;IACnE,MAAMC,UAAU,GAAGlC,YAAY,GAAGmC,WAAW,CAACnC,YAAY,CAAC,GAAG,IAAI;IAElE,IAAI,CAACkC,UAAU,IAAI,CAACE,kBAAkB,CAACF,UAAU,EAAE,CAAC,CAAC,EAAE;MACrD,OAAO;AACLG,QAAAA,MAAM,EAAEC,gBAAgB,CAACtB,MAAM,EAAEZ,WAAW,CAAC;AAC7CmC,QAAAA,MAAM,EAAE;OACT;AACH;IAEA,OAAOC,kBAAkB,CAACN,UAAU,CAAC;AACvC,GAAC,CAAC;EACF,MAAM,CAACO,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGT,QAAQ,CAAqB,IAAI,CAAC;EAElF,MAAM,CAACU,WAAW,EAAEC,cAAc,CAAC,GAAGX,QAAQ,CAAC,KAAK,CAAC;AACrDY,EAAAA,SAAS,CAAC,MAAK;IACb,IAAId,aAAa,CAACQ,MAAM,EAAE;MACxBK,cAAc,CAAC,IAAI,CAAC;AACtB;AACF,GAAC,EAAE,CAACb,aAAa,CAACQ,MAAM,CAAC,CAAC;EAE1B,MAAMO,iBAAiB,GAAGC,OAAO,CAC/B,MACEC,sBAAsB,CACpBC,mBAAmB,CAACC,gBAAgB,CAACC,SAAS,EAAExC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAC5E,EACH,CAACA,iBAAiB,CAAC,CACpB;EAED,MAAMyC,cAAc,GAAgDC,KAAK,IAAI;AAC3E,IAAA,MAAMd,MAAM,GAAGc,KAAK,CAACC,MAAM,CAACC,KAAK;AACjC,IAAA,IAAI/D,mBAAmB,CAACgE,IAAI,CAACjB,MAAM,CAAC,EAAE;MACpCP,gBAAgB,CAAEyB,IAAI,KAAM;AAAE,QAAA,GAAGA,IAAI;AAAElB,QAAAA;AAAQ,OAAA,CAAC,CAAC;AACnD;GACD;EAED,MAAMmB,OAAO,GAAmDL,KAAK,IAAI;AACvE,IAAA,IAAI,CAACA,KAAK,CAACM,WAAW,CAACC,aAAa,EAAE;AACpC,MAAA;AACF;IAEA,MAAMC,WAAW,GAAG,CAACR,KAAK,CAACM,WAAW,CAACC,aAAa,CAACE,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,EAAEC,OAAO,CACvF,UAAU,EACV,EAAE,CACH;AACD,IAAA,MAAMC,YAAY,GAAGxB,kBAAkB,CAACqB,WAAW,CAAC;IAEpD,IACEG,YAAY,CAAC3B,MAAM,IAAI,IAAI,IAC3BS,iBAAiB,CAACmB,GAAG,CAACD,YAAY,CAAC3B,MAAM,CAAC,IAC1C7C,mBAAmB,CAACgE,IAAI,CAACQ,YAAY,CAACzB,MAAM,CAAC,EAC7C;MACAP,gBAAgB,CAACgC,YAAY,CAAC;AAChC;GACD;AAEDnB,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIJ,gBAAgB,KAAK,IAAI,EAAE;MAC7BC,mBAAmB,CAACX,aAAa,CAAC;AAClC,MAAA;AACF;AAEA,IAAA,MAAMmC,mBAAmB,GAAG,CAAGnC,EAAAA,aAAa,CAACM,MAAM,IAAI,EAAE,CAAGN,EAAAA,aAAa,CAACQ,MAAM,CAAE,CAAA;AAClF,IAAA,MAAM4B,sBAAsB,GAAG,CAAG1B,EAAAA,gBAAgB,CAACJ,MAAM,IAAI,EAAE,CAAGI,EAAAA,gBAAgB,CAACF,MAAM,CAAE,CAAA;IAE3F,IAAI2B,mBAAmB,KAAKC,sBAAsB,EAAE;AAClD,MAAA;AACF;AAEA,IAAA,MAAMC,QAAQ,GAAGhC,kBAAkB,CAAC8B,mBAAmB,CAAC,GACpD/B,WAAW,CAAC+B,mBAAmB,CAAC,GAChC,IAAI;IAERjE,QAAQ,CACNmE,QAAQ,EACRrC,aAAa,CAACM,MAAM,IAAI,EAAE,CAC3B;IACDK,mBAAmB,CAACX,aAAa,CAAC;GACnC,EAAE,CAAC9B,QAAQ,EAAEwC,gBAAgB,EAAEV,aAAa,CAAC,CAAC;AAE/C,EAAA,oBACEsC,IAAA,CAAA,KAAA,EAAA;AACEC,IAAAA,IAAI,EAAC,OAAO;AAAA,IAAA,GACR1D,eAAe;AACnB,IAAA,iBAAA,EAAiBG,cAAe;AAChCwD,IAAAA,SAAS,EAAC,cAAc;AAAAC,IAAAA,QAAA,gBAExBC,GAAA,CAAA,OAAA,EAAA;AAAOF,MAAAA,SAAS,EAAC,SAAS;AAAC3E,MAAAA,EAAE,EAAE8B,GAAG,CAACtB,WAAW,CAACuB,KAAM;AAAA6C,MAAAA,QAAA,EAClDvD,aAAa,CAACyD,QAAQ,CAACC,gBAAgB;KACnC,CACP,eAAAF,GAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,8BAA8B;MAAAC,QAAA,eAC3CC,GAAA,CAACG,WAAW,EAAA;AACVnE,QAAAA,WAAW,EAAEQ,aAAa,CAACyD,QAAQ,CAACG,sBAAsB,CAAE;AAC5DC,QAAAA,KAAK,EAAE,CAAC,GAAGhC,iBAAiB,CAAC,CAACiC,GAAG,CAAC,CAAC,CAAC1C,MAAM,EAAEc,SAAS,CAAC,MAAM;AAC1D6B,UAAAA,IAAI,EAAE,QAAQ;AACdzB,UAAAA,KAAK,EAAElB,MAAM;UACb4C,cAAc,EAAE,CACd5C,MAAM,EACN,GAAGc,SAAS,CAAC4B,GAAG,CAAEG,OAAO,IAAKA,OAAO,CAACC,IAAI,CAAC,EAC3C,GAAGhC,SAAS,CAAC4B,GAAG,CAAEG,OAAO,IAAKA,OAAO,CAACE,IAAI,CAAC;AAE9C,SAAA,CAAC,CAAE;QACJ7B,KAAK,EAAExB,aAAa,CAACM,MAAO;QAC5BgD,WAAW,EAAEA,CAAChD,MAAM,EAAEiD,aAAa,kBACjCb,GAAA,CAACc,wBAAwB,EAAA;AACvBC,UAAAA,KAAK,EAAEnD,MAAO;UACdoD,IAAI,EACFH,aAAa,GACTI,SAAS,GACT5C,iBAAiB,CACd6C,GAAG,CAACtD,MAAM,CAAC,EACV0C,GAAG,CAAEG,OAAO,IAAKA,OAAO,CAACE,IAAI,CAAC,CAC/BQ,IAAI,CAAC,IAAI;AACjB,SACD,CACF;QACFC,UAAU,EAAA,IAAA;AACVC,QAAAA,iBAAiB,EAAEzF,iBAAkB;AACrCN,QAAAA,QAAQ,EAAEA,QAAS;AACnBO,QAAAA,IAAI,EAAEA,IAAK;AACXV,QAAAA,EAAE,EAAE8B,GAAG,CAACtB,WAAW,CAACwB,MAAO;AAC3BmE,QAAAA,yBAAyB,EAAE;AACzBnG,UAAAA,EAAE,EAAE8B,GAAG,CAACtB,WAAW,CAACwB,MAAM;AAC1B,UAAA,iBAAiB,EAAEF,GAAG,CAACtB,WAAW,CAACuB,KAAK;AACxC,UAAA,kBAAkB,EAAE+D,SAAS;AAC7B,UAAA,cAAc,EAAEA;SAChB;QACFzF,QAAQ,EAAGoC,MAAM,IAAI;UACnB,MAAM6C,OAAO,GAAG7C,MAAM,IAAI,IAAI,GAAG2D,mBAAmB,CAAC3D,MAAM,CAAC,GAAG,IAAI;UACnEL,gBAAgB,CAAEyB,IAAI,KAAM;AAAE,YAAA,GAAGA,IAAI;YAAEpB,MAAM;YAAE4D,MAAM,EAAEf,OAAO,EAAEgB;AAAW,WAAE,CAAC,CAAC;SAC/E;QACFC,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAIxD,WAAW,EAAE;AACfxC,YAAAA,MAAM,IAAI;AACZ;SACA;QAAA,GACEO;OAER;KAAK,CACL,eAAA+D,GAAA,CAAA,OAAA,EAAA;AAAOF,MAAAA,SAAS,EAAC,SAAS;AAAC3E,MAAAA,EAAE,EAAE8B,GAAG,CAACG,WAAW,CAACF,KAAM;AAACyE,MAAAA,OAAO,EAAE1E,GAAG,CAACG,WAAW,CAACC,KAAM;AAAA0C,MAAAA,QAAA,EAClFvD,aAAa,CAACyD,QAAQ,CAAC2B,gBAAgB;KACnC,CACP,eAAA5B,GAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,4BAA4B;AAAAC,MAAAA,QAAA,eACzCC,GAAA,CAAA,KAAA,EAAA;QAAKF,SAAS,EAAE,CAA2BjE,wBAAAA,EAAAA,IAAI,CAAG,CAAA;QAAAkE,QAAA,eAChDC,GAAA,CAAC6B,KAAK,EAAA;AACJ1G,UAAAA,EAAE,EAAE8B,GAAG,CAACG,WAAW,CAACC,KAAM;AAC1ByE,UAAAA,YAAY,EAAC,cAAc;AAC3BpB,UAAAA,IAAI,EAAC,aAAa;AAClBqB,UAAAA,SAAS,EAAC,SAAS;UACnBjD,KAAK,EAAExB,aAAa,CAACQ,MAAO;AAC5BxC,UAAAA,QAAQ,EAAEA,QAAS;AACnBD,UAAAA,QAAQ,EAAEA,QAAS;AACnBW,UAAAA,WAAW,EAAEA,WAAY;AACzB,UAAA,iBAAA,EAAiBiB,GAAG,CAACG,WAAW,CAACF,KAAM;AACvC1B,UAAAA,QAAQ,EAAEmD,cAAe;AACzBM,UAAAA,OAAO,EAAEA,OAAQ;AACjBxD,UAAAA,OAAO,EAAEA,OAAQ;AACjBC,UAAAA,MAAM,EAAEA,MAAMA,MAAM;SAExB;OAAK;AACP,KAAK,CACP;AAAA,GAAK,CAAC;AAEV;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/phoneNumberInput/PhoneNumberInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEnE,OAAO,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/phoneNumberInput/PhoneNumberInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEnE,OAAO,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAkBhG,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACvD,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CACvC;AAKD,QAAA,MAAM,gBAAgB,GAAI,gMAevB,qBAAqB,gCA4LvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -3,6 +3,14 @@ declare const _default: {
|
|
|
3
3
|
id: string;
|
|
4
4
|
defaultMessage: string;
|
|
5
5
|
};
|
|
6
|
+
countryCodeLabel: {
|
|
7
|
+
id: string;
|
|
8
|
+
defaultMessage: string;
|
|
9
|
+
};
|
|
10
|
+
phoneNumberLabel: {
|
|
11
|
+
id: string;
|
|
12
|
+
defaultMessage: string;
|
|
13
|
+
};
|
|
6
14
|
};
|
|
7
15
|
export default _default;
|
|
8
16
|
//# sourceMappingURL=PhoneNumberInput.messages.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneNumberInput.messages.d.ts","sourceRoot":"","sources":["../../../src/phoneNumberInput/PhoneNumberInput.messages.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PhoneNumberInput.messages.d.ts","sourceRoot":"","sources":["../../../src/phoneNumberInput/PhoneNumberInput.messages.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAEA,wBAaG"}
|
|
@@ -33,6 +33,8 @@ declare function customRender(ui: ReactElement, { locale, messages, ...renderOpt
|
|
|
33
33
|
"neptune.MoneyInput.Select.placeholder": string;
|
|
34
34
|
"neptune.MoneyInput.Select.selectCurrencyLabel": string;
|
|
35
35
|
"neptune.PhoneNumberInput.SelectInput.placeholder": string;
|
|
36
|
+
"neptune.PhoneNumberInput.countryCodeLabel": string;
|
|
37
|
+
"neptune.PhoneNumberInput.phoneNumberLabel": string;
|
|
36
38
|
"neptune.Select.searchPlaceholder": string;
|
|
37
39
|
"neptune.SelectInput.noResultsFound": string;
|
|
38
40
|
"neptune.SelectOption.action.label": string;
|
|
@@ -113,6 +115,8 @@ declare function customRenderHook(callback: () => unknown, { locale, messages }?
|
|
|
113
115
|
"neptune.MoneyInput.Select.placeholder": string;
|
|
114
116
|
"neptune.MoneyInput.Select.selectCurrencyLabel": string;
|
|
115
117
|
"neptune.PhoneNumberInput.SelectInput.placeholder": string;
|
|
118
|
+
"neptune.PhoneNumberInput.countryCodeLabel": string;
|
|
119
|
+
"neptune.PhoneNumberInput.phoneNumberLabel": string;
|
|
116
120
|
"neptune.Select.searchPlaceholder": string;
|
|
117
121
|
"neptune.SelectInput.noResultsFound": string;
|
|
118
122
|
"neptune.SelectOption.action.label": string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadInput.d.ts","sourceRoot":"","sources":["../../../src/uploadInput/UploadInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAiC,MAAM,WAAW,CAAC;AAOvE,OAAO,EAAE,YAAY,EAAe,cAAc,EAAE,MAAM,SAAS,CAAC;AACpE,OAAqB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAE9E,OAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAEhC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAE9D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAErD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAEjD;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QAEf;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAEvB;;WAEG;QACH,WAAW,CAAC,EAAE,MAAM,CAAC;QAErB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,GAAG,IAAI,CACN,iBAAiB,EACjB,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,IAAI,GAAG,mBAAmB,CACjG,GAAG;IAAE,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;CAAE,GAAG,WAAW,CAAC;AAgCjE;;;;;;;;GAQG;AACH,QAAA,MAAM,WAAW,GAAI,oQAoBlB,gBAAgB,
|
|
1
|
+
{"version":3,"file":"UploadInput.d.ts","sourceRoot":"","sources":["../../../src/uploadInput/UploadInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAiC,MAAM,WAAW,CAAC;AAOvE,OAAO,EAAE,YAAY,EAAe,cAAc,EAAE,MAAM,SAAS,CAAC;AACpE,OAAqB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAE9E,OAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAEhC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,YAAY,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAE9D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IAErD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAEjD;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,aAAa,CAAC,EAAE;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QAEf;;WAEG;QACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAEvB;;WAEG;QACH,WAAW,CAAC,EAAE,MAAM,CAAC;QAErB;;WAEG;QACH,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IAEF;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,GAAG,IAAI,CACN,iBAAiB,EACjB,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,IAAI,GAAG,mBAAmB,CACjG,GAAG;IAAE,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;CAAE,GAAG,WAAW,CAAC;AAgCjE;;;;;;;;GAQG;AACH,QAAA,MAAM,WAAW,GAAI,oQAoBlB,gBAAgB,gCAkTlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -7,7 +7,7 @@ export type UploadItemProps = React.JSX.IntrinsicAttributes & {
|
|
|
7
7
|
singleFileUpload: boolean;
|
|
8
8
|
canDelete: boolean;
|
|
9
9
|
onDelete: () => void;
|
|
10
|
-
onFocus: (
|
|
10
|
+
onFocus: () => void;
|
|
11
11
|
/**
|
|
12
12
|
* Callback to be called when the file link is clicked.
|
|
13
13
|
* When provided, you need to manually trigger actions to load/download the file.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UploadItem.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAe,MAAM,UAAU,CAAC;AAKrD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,mBAAmB,GAAG;IAC5D,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"UploadItem.d.ts","sourceRoot":"","sources":["../../../../src/uploadInput/uploadItem/UploadItem.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAe,MAAM,UAAU,CAAC;AAKrD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,mBAAmB,GAAG;IAC5D,IAAI,EAAE,YAAY,CAAC;IACnB;;OAEG;IACH,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;CAChC,CAAC;AACF,UAAU,aAAa;IACrB;;;OAGG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAElB;;OAEG;IACH,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,oBAAY,QAAQ;IAClB,UAAU,eAAe;IACzB,SAAS,cAAc;IACvB,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAED,QAAA,MAAM,UAAU,wHAyJf,CAAC;AAIF,eAAe,UAAU,CAAC"}
|
|
@@ -79,7 +79,6 @@ const UploadInput = ({
|
|
|
79
79
|
nonLabelable: true
|
|
80
80
|
});
|
|
81
81
|
const [markedFileForDelete, setMarkedFileForDelete] = React.useState(null);
|
|
82
|
-
const [lastAttemptedDeleteId, setLastAttemptedDeleteId] = React.useState(null);
|
|
83
82
|
const [mounted, setMounted] = React.useState(false);
|
|
84
83
|
const {
|
|
85
84
|
formatMessage
|
|
@@ -228,13 +227,6 @@ const UploadInput = ({
|
|
|
228
227
|
});
|
|
229
228
|
const filesCount = fileRefs.length;
|
|
230
229
|
let next = uploadInputRef.current;
|
|
231
|
-
let focusTarget = 'button';
|
|
232
|
-
// If there will be no files left after deletion, focus the upload button
|
|
233
|
-
if (filesCount === 1) {
|
|
234
|
-
next = uploadInputRef.current;
|
|
235
|
-
setNextFocusable(next);
|
|
236
|
-
return;
|
|
237
|
-
}
|
|
238
230
|
if (filesCount > 1) {
|
|
239
231
|
const currentFileIndex = fileRefs.findIndex(file => file?.id === fileId);
|
|
240
232
|
const currentFileId = fileRefs?.[currentFileIndex]?.id;
|
|
@@ -245,50 +237,14 @@ const UploadInput = ({
|
|
|
245
237
|
} else {
|
|
246
238
|
next = fileRefs[currentFileIndex + 1];
|
|
247
239
|
}
|
|
248
|
-
// If next is an UploadItemRef, check if it has a URL (succeeded)
|
|
249
|
-
if (next && 'status' in next) {
|
|
250
|
-
// Find the file object for this ref
|
|
251
|
-
const fileObj = uploadedFiles.find(f => f.id === next?.id);
|
|
252
|
-
if (fileObj && (fileObj.status === status.Status.SUCCEEDED || fileObj.status === status.Status.DONE) && fileObj.url) {
|
|
253
|
-
focusTarget = 'link';
|
|
254
|
-
}
|
|
255
|
-
}
|
|
256
|
-
setNextFocusable(() => {
|
|
257
|
-
if (next && typeof next.focus === 'function') {
|
|
258
|
-
return {
|
|
259
|
-
ref: next,
|
|
260
|
-
target: focusTarget
|
|
261
|
-
};
|
|
262
|
-
}
|
|
263
|
-
return next;
|
|
264
|
-
});
|
|
265
240
|
}
|
|
241
|
+
setNextFocusable(next);
|
|
266
242
|
};
|
|
267
243
|
const handleRefocus = () => {
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
}
|
|
273
|
-
if (focusTarget) {
|
|
274
|
-
// If there are no files left, focus the upload button
|
|
275
|
-
if (uploadedFiles.length === 0 && uploadInputRef.current && typeof uploadInputRef.current.focus === 'function') {
|
|
276
|
-
setTimeout(() => {
|
|
277
|
-
uploadInputRef.current.focus();
|
|
278
|
-
}, 0);
|
|
279
|
-
} else if (typeof focusTarget === 'object' && 'ref' in focusTarget && focusTarget.ref && typeof focusTarget.ref.focus === 'function') {
|
|
280
|
-
setTimeout(() => {
|
|
281
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
|
|
282
|
-
if (focusTarget.ref && typeof focusTarget.ref.focus === 'function') {
|
|
283
|
-
// @ts-expect-error: focus may not exist on all possible ref types, but is safe here
|
|
284
|
-
focusTarget.ref.focus(focusTarget.target);
|
|
285
|
-
}
|
|
286
|
-
}, 0);
|
|
287
|
-
} else if (focusTarget && typeof focusTarget.focus === 'function') {
|
|
288
|
-
setTimeout(() => {
|
|
289
|
-
focusTarget.focus();
|
|
290
|
-
}, 0);
|
|
291
|
-
}
|
|
244
|
+
if (nextFocusable && 'focus' in nextFocusable && typeof nextFocusable.focus === 'function') {
|
|
245
|
+
setTimeout(() => {
|
|
246
|
+
nextFocusable.focus();
|
|
247
|
+
}, 0);
|
|
292
248
|
}
|
|
293
249
|
};
|
|
294
250
|
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
@@ -313,13 +269,9 @@ const UploadInput = ({
|
|
|
313
269
|
singleFileUpload: !multiple,
|
|
314
270
|
canDelete: (!!onDeleteFile || file.status === status.Status.FAILED) && (!file.status || !PROGRESS_STATUSES.has(file.status)),
|
|
315
271
|
onDelete: file.status === status.Status.FAILED ? async () => {
|
|
316
|
-
setLastAttemptedDeleteId(file.id);
|
|
317
272
|
await removeFile(file);
|
|
318
273
|
handleRefocus();
|
|
319
|
-
} : () =>
|
|
320
|
-
setLastAttemptedDeleteId(file.id);
|
|
321
|
-
setMarkedFileForDelete(file);
|
|
322
|
-
},
|
|
274
|
+
} : () => setMarkedFileForDelete(file),
|
|
323
275
|
onDownload: onDownload,
|
|
324
276
|
onFocus: () => handleFocus(file.id)
|
|
325
277
|
}, file.id))
|
|
@@ -360,7 +312,6 @@ const UploadInput = ({
|
|
|
360
312
|
void removeFile(markedFileForDelete);
|
|
361
313
|
}
|
|
362
314
|
setMarkedFileForDelete(null);
|
|
363
|
-
setLastAttemptedDeleteId(null);
|
|
364
315
|
},
|
|
365
316
|
children: deleteConfirm?.confirmText || formatMessage(UploadInput_messages.default.deleteModalConfirmButtonText)
|
|
366
317
|
})]
|