@transferwise/components 45.27.0 → 45.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.esm.js +1290 -1240
- package/build/index.esm.js.map +1 -1
- package/build/index.js +1289 -1239
- package/build/index.js.map +1 -1
- package/build/main.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/styles/moneyInput/MoneyInput.css +1 -1
- package/build/types/inputs/SelectInput.d.ts +2 -1
- package/build/types/inputs/SelectInput.d.ts.map +1 -1
- package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/inputs/SelectInput.tsx +8 -0
- package/src/main.css +1 -1
- package/src/moneyInput/MoneyInput.css +1 -1
- package/src/moneyInput/MoneyInput.js +85 -42
- package/src/moneyInput/MoneyInput.less +40 -159
- package/src/moneyInput/MoneyInput.rtl.spec.js +71 -0
- package/src/moneyInput/MoneyInput.spec.js +247 -116
- package/src/moneyInput/MoneyInput.story.tsx +54 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.tw-money-input .tw-money-input__fixed-currency{padding-left:0!important}[dir=rtl] .tw-money-input .tw-money-input__fixed-currency{padding-left:0!important;padding-right:0!important}.tw-money-input .tw-money-input__fixed-currency
|
|
1
|
+
.tw-money-input{display:flex}.tw-money-input .tw-money-input__fixed-currency{padding-left:0!important}[dir=rtl] .tw-money-input .tw-money-input__fixed-currency{padding-left:0!important;padding-right:0!important}.tw-money-input .tw-money-input__fixed-currency .np-text-title-subsection{color:#768e9c;color:var(--color-content-tertiary);font-weight:600;font-weight:var(--font-weight-semi-bold)}.tw-money-input.input-group-sm .form-control{min-height:34px}.tw-money-input.input-group-sm .np-text-title-subsection{font-size:.875rem;font-size:var(--font-size-14)}.tw-money-input.input-group-md .form-control{min-height:53px}.tw-money-input.input-group-md .np-text-title-subsection{font-size:1rem;font-size:var(--font-size-16)}.tw-money-input .input-group-addon{flex-shrink:0}.tw-money-input .input-group-addon:not(.amount-currency-select-btn){align-items:center;display:flex;flex-shrink:0;width:auto}.tw-money-input .amount-currency-select-btn{flex-shrink:0;line-height:normal;width:auto}.tw-money-input .np-button-input{border-bottom-right-radius:10px!important;border-bottom-right-radius:var(--radius-small)!important;border-top-right-radius:10px!important;border-top-right-radius:var(--radius-small)!important}.tw-money-input .np-button-input:not(.disabled,:disabled):focus-visible{border-radius:10px!important;border-radius:var(--radius-small)!important}.has-error .tw-money-input .np-button-input,.has-error .tw-money-input .np-button-input:not(.disabled,:disabled):hover,.tw-money-input .np-button-input,.tw-money-input .np-button-input:active,.tw-money-input .np-button-input:not(.disabled,:disabled):hover{box-shadow:none}.tw-money-input:not(.disabled,:disabled):not(.np-button-input:active):has(.np-button-input:focus-visible){box-shadow:inset 0 0 0 1px #c9cbce!important;box-shadow:inset 0 0 0 1px var(--color-interactive-secondary)!important}
|
|
@@ -41,9 +41,10 @@ export interface SelectInputProps<T = string> {
|
|
|
41
41
|
size?: 'md' | 'lg';
|
|
42
42
|
className?: string;
|
|
43
43
|
onChange?: (value: T) => void;
|
|
44
|
+
onSearchChange?: (query: string) => void;
|
|
44
45
|
onClear?: () => void;
|
|
45
46
|
}
|
|
46
|
-
export declare function SelectInput<T = string>({ name, placeholder, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, disabled, size, className, onChange, onClear, }: SelectInputProps<T>): import("react").JSX.Element;
|
|
47
|
+
export declare function SelectInput<T = string>({ name, placeholder, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, disabled, size, className, onChange, onSearchChange, onClear, }: SelectInputProps<T>): import("react").JSX.Element;
|
|
47
48
|
type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
|
|
48
49
|
export type SelectInputTriggerButtonProps<T extends SelectInputTriggerButtonElementType = 'button'> = Merge<React.ComponentPropsWithoutRef<T>, {
|
|
49
50
|
as?: T;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAkCjC,MAAM,WAAW,qBAAqB,CAAC,CAAC,GAAG,MAAM;IAC/C,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,CAAC,CAAC;IACT,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,GAAG,MAAM;IAC9C,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;CAC9C;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,MAAM,IAClC,qBAAqB,CAAC,CAAC,CAAC,GACxB,oBAAoB,CAAC,CAAC,CAAC,GACvB,wBAAwB,CAAC;AAyD7B,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,MAAM;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,KAAK,EAAE,SAAS,eAAe,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,aAAa,CAAC,EACV,CAAC,MAAM,WAAW,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAC/B,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,CAAC,GAAG,SAAS,KAAK,OAAO,CAAC,CAAC;IACtD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACjF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QACpB,YAAY,EAAE,OAAO,CAAC;QACtB,eAAe,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;KAC5C,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE;QACrB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,gBAAgB,EAAE,OAAO,CAAC;QAC1B,KAAK,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;QAChC,QAAQ,EAAE,OAAO,CAAC;QAClB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;QAClB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;KAC/B,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAqDD,wBAAgB,WAAW,CAAC,CAAC,GAAG,MAAM,EAAE,EACtC,IAAI,EACJ,WAAW,EACX,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,WAA4B,EAC5B,YAAY,EACZ,aAAoC,EACpC,UAAU,EACV,iBAAiB,EACjB,QAAQ,EACR,IAAW,EACX,SAAS,EACT,QAAQ,EACR,OAAO,GACR,EAAE,gBAAgB,CAAC,CAAC,CAAC,+
|
|
1
|
+
{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.js"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.js"],"names":[],"mappings":";;;;AA+DA;IACE,wBAeC;IAZC,mBAAkD;IAClD;;;;;MAUC;IAGH,uDAaC;IAED,+CAWE;IAEF,oCAIE;IAEF,kCAyBE;IAEF,qCAgBE;IAEF,yBAGE;IAFA,mCAA0B;IAI5B,0BAEE;IAEF;;;;MAME;IAEF,0BAuBC;IAED,kBAsBC;IAED,yCAIE;IAEF,+BAKE;IAEF,+CAQE;IAEF,+BAAqE;IAErE,sCAmIC;CACF"}
|
package/package.json
CHANGED
|
@@ -153,6 +153,7 @@ export interface SelectInputProps<T = string> {
|
|
|
153
153
|
size?: 'md' | 'lg';
|
|
154
154
|
className?: string;
|
|
155
155
|
onChange?: (value: T) => void;
|
|
156
|
+
onSearchChange?: (query: string) => void;
|
|
156
157
|
onClear?: () => void;
|
|
157
158
|
}
|
|
158
159
|
|
|
@@ -223,6 +224,7 @@ export function SelectInput<T = string>({
|
|
|
223
224
|
size = 'md',
|
|
224
225
|
className,
|
|
225
226
|
onChange,
|
|
227
|
+
onSearchChange,
|
|
226
228
|
onClear,
|
|
227
229
|
}: SelectInputProps<T>) {
|
|
228
230
|
const [open, setOpen] = useState(false);
|
|
@@ -306,6 +308,7 @@ export function SelectInput<T = string>({
|
|
|
306
308
|
filterPlaceholder={filterPlaceholder}
|
|
307
309
|
searchInputRef={searchInputRef}
|
|
308
310
|
listboxRef={listboxRef}
|
|
311
|
+
onSearchChange={onSearchChange}
|
|
309
312
|
/>
|
|
310
313
|
</OptionsOverlay>
|
|
311
314
|
)}
|
|
@@ -390,6 +393,7 @@ interface SelectInputOptionsProps<T = string>
|
|
|
390
393
|
> {
|
|
391
394
|
searchInputRef: React.RefObject<HTMLInputElement>;
|
|
392
395
|
listboxRef: React.RefObject<HTMLDivElement>;
|
|
396
|
+
onSearchChange?: (query: string) => void;
|
|
393
397
|
}
|
|
394
398
|
|
|
395
399
|
function SelectInputOptions<T = string>({
|
|
@@ -400,6 +404,7 @@ function SelectInputOptions<T = string>({
|
|
|
400
404
|
filterPlaceholder,
|
|
401
405
|
searchInputRef,
|
|
402
406
|
listboxRef,
|
|
407
|
+
onSearchChange,
|
|
403
408
|
}: SelectInputOptionsProps<T>) {
|
|
404
409
|
const intl = useIntl();
|
|
405
410
|
|
|
@@ -461,6 +466,9 @@ function SelectInputOptions<T = string>({
|
|
|
461
466
|
}}
|
|
462
467
|
onChange={(event) => {
|
|
463
468
|
setQuery(event.currentTarget.value);
|
|
469
|
+
if (onSearchChange) {
|
|
470
|
+
onSearchChange(event.currentTarget.value);
|
|
471
|
+
}
|
|
464
472
|
}}
|
|
465
473
|
/>
|
|
466
474
|
</div>
|