@transferwise/components 46.32.0 → 46.34.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.js +71 -39
- package/build/index.js.map +1 -1
- package/build/index.mjs +71 -39
- package/build/index.mjs.map +1 -1
- package/build/types/alert/Alert.d.ts +3 -2
- package/build/types/alert/Alert.d.ts.map +1 -1
- package/build/types/common/domHelpers/documentIosClick.d.ts +0 -1
- package/build/types/common/domHelpers/documentIosClick.d.ts.map +1 -1
- package/build/types/common/domHelpers/index.d.ts +1 -1
- package/build/types/common/domHelpers/index.d.ts.map +1 -1
- package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
- package/build/types/moneyInput/MoneyInput.d.ts +4 -2
- package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
- package/build/types/phoneNumberInput/PhoneNumberInput.d.ts +1 -1
- package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map +1 -1
- package/build/types/select/Select.d.ts +7 -7
- package/build/types/select/Select.d.ts.map +1 -1
- package/build/types/typeahead/Typeahead.d.ts +4 -55
- package/build/types/typeahead/Typeahead.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/alert/Alert.spec.tsx +12 -0
- package/src/alert/Alert.story.tsx +11 -1
- package/src/alert/Alert.tsx +33 -14
- package/src/common/domHelpers/documentIosClick.ts +0 -5
- package/src/common/domHelpers/index.ts +0 -1
- package/src/dateLookup/DateLookup.rtl.spec.tsx +2 -3
- package/src/dateLookup/DateLookup.tsx +1 -3
- package/src/inputs/SelectInput.spec.tsx +1 -1
- package/src/moneyInput/MoneyInput.rtl.spec.tsx +10 -0
- package/src/moneyInput/MoneyInput.spec.js +10 -5
- package/src/moneyInput/MoneyInput.tsx +21 -14
- package/src/phoneNumberInput/PhoneNumberInput.rtl.spec.tsx +10 -0
- package/src/phoneNumberInput/PhoneNumberInput.tsx +11 -2
- package/src/select/Select.js +18 -15
- package/src/select/Select.rtl.spec.tsx +17 -0
- package/src/select/Select.spec.js +2 -7
- package/src/typeahead/Typeahead.rtl.spec.tsx +16 -0
- package/src/typeahead/Typeahead.tsx +21 -7
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
import { Sentiment, Size, Variant } from '../common';
|
|
3
3
|
export type AlertAction = {
|
|
4
4
|
'aria-label'?: string;
|
|
5
|
-
href
|
|
5
|
+
href?: string;
|
|
6
6
|
target?: string;
|
|
7
7
|
text: React.ReactNode;
|
|
8
|
+
onClick?: () => void;
|
|
8
9
|
};
|
|
9
10
|
/** @deprecated Use `"top" | "bottom"` instead. */
|
|
10
11
|
type AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;
|
|
@@ -26,7 +27,7 @@ export interface AlertProps {
|
|
|
26
27
|
icon?: React.ReactElement;
|
|
27
28
|
/** Title for the alert component */
|
|
28
29
|
title?: string;
|
|
29
|
-
/** The main body of the alert. Accepts plain text and bold words specified with **double stars*/
|
|
30
|
+
/** The main body of the alert. Accepts plain text and bold words specified with **double stars */
|
|
30
31
|
message?: string;
|
|
31
32
|
/** The presence of the onDismiss handler will trigger the visibility of the close button */
|
|
32
33
|
onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AASjE,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AASjE,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACvB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,WAAW,EACX,IAAI,EACJ,SAAS,EACT,OAAO,EACP,IAAI,EACJ,KAAK,EACL,IAAgB,EAChB,OAAmB,GACpB,EAAE,UAAU,+BAqGZ"}
|
|
@@ -4,5 +4,4 @@ export declare function removeClickClassFromDocumentOnIos(): void;
|
|
|
4
4
|
export declare function isServerSide(): boolean;
|
|
5
5
|
export declare function isBrowser(): boolean;
|
|
6
6
|
export declare function stopPropagation(event: SyntheticEvent): void;
|
|
7
|
-
export declare function getSimpleRandomId(prefix: string): string;
|
|
8
7
|
//# sourceMappingURL=documentIosClick.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"documentIosClick.d.ts","sourceRoot":"","sources":["../../../../src/common/domHelpers/documentIosClick.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAUvC,wBAAgB,4BAA4B,SAI3C;AAED,wBAAgB,iCAAiC,SAIhD;AAED,wBAAgB,YAAY,IAAI,OAAO,CAEtC;AAED,wBAAgB,SAAS,IAAI,OAAO,CAEnC;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,QAMpD
|
|
1
|
+
{"version":3,"file":"documentIosClick.d.ts","sourceRoot":"","sources":["../../../../src/common/domHelpers/documentIosClick.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAUvC,wBAAgB,4BAA4B,SAI3C;AAED,wBAAgB,iCAAiC,SAIhD;AAED,wBAAgB,YAAY,IAAI,OAAO,CAEtC;AAED,wBAAgB,SAAS,IAAI,OAAO,CAEnC;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,QAMpD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { addClickClassToDocumentOnIos,
|
|
1
|
+
export { addClickClassToDocumentOnIos, isBrowser, isServerSide, removeClickClassFromDocumentOnIos, stopPropagation, } from './documentIosClick';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/domHelpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,4BAA4B,EAC5B,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/common/domHelpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,4BAA4B,EAC5B,SAAS,EACT,YAAY,EACZ,iCAAiC,EACjC,eAAe,GAChB,MAAM,oBAAoB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateLookup.d.ts","sourceRoot":"","sources":["../../../src/dateLookup/DateLookup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,aAAa,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EACL,IAAI,EACJ,WAAW,EAGX,SAAS,EACT,UAAU,EACV,SAAS,EACV,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,wBAAwB,EAAuB,MAAM,oBAAoB,CAAC;AAOnF,MAAM,WAAW,eAAe;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,KAAK,kCAAkC,GAAG,eAAe,GAAG,OAAO,CAAC,wBAAwB,CAAC,CAAC;AAE9F,UAAU,eAAe;IACvB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,cAAM,UAAW,SAAQ,aAAa,CAAC,kCAAkC,EAAE,eAAe,CAAC;IACjF,KAAK,EAAE,kCAAkC,GAC/C,QAAQ,CAAC,IAAI,CAAC,kCAAkC,EAAE,MAAM,OAAO,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC;IAE3F,MAAM,CAAC,YAAY;;;;;;;;;;MAUqC;IAExD,OAAO,4CAA+B;IACtC,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC;IAetC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,eAAe;;;;;;;IAwBlF,kBAAkB,CAAC,aAAa,EAAE,kCAAkC;IAQpE,oBAAoB;IAKpB,IAAI,aAOF;IAEF,OAAO,aAML;IAEF,KAAK,aAMH;IAEF,aAAa,UAAW,cAAc,cAAc,CAAC,UA6CnD;IAEF,UAAU,cAAe,MAAM,eAAe,MAAM,cAAc,MAAM,UAqBtE;IAEF,OAAO,qBAAsB,MAAM,oBAAoB,MAAM,UAO3D;IAEF,UAAU,SAAU,KAAK,GAAG,OAAO,GAAG,MAAM,UAI1C;IAEF,YAAY,aAAgC;IAE5C,cAAc,aAAkC;IAEhD,aAAa,aAAiC;IAE9C,wBAAwB,iBAAkB,IAAI,UAM5C;IAEF,oBAAoB;;;eAElB;IAEF,WAAW,oCA2CT;IAEF,WAAW,aAGT;IAEF,MAAM;CAiDP;AAED,eAAO,MAAM,gCAAgC,mBAAa,CAAC;;;;;AAE3D,
|
|
1
|
+
{"version":3,"file":"DateLookup.d.ts","sourceRoot":"","sources":["../../../src/dateLookup/DateLookup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,aAAa,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EACL,IAAI,EACJ,WAAW,EAGX,SAAS,EACT,UAAU,EACV,SAAS,EACV,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,wBAAwB,EAAuB,MAAM,oBAAoB,CAAC;AAOnF,MAAM,WAAW,eAAe;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,KAAK,kCAAkC,GAAG,eAAe,GAAG,OAAO,CAAC,wBAAwB,CAAC,CAAC;AAE9F,UAAU,eAAe;IACvB,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,cAAM,UAAW,SAAQ,aAAa,CAAC,kCAAkC,EAAE,eAAe,CAAC;IACjF,KAAK,EAAE,kCAAkC,GAC/C,QAAQ,CAAC,IAAI,CAAC,kCAAkC,EAAE,MAAM,OAAO,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC;IAE3F,MAAM,CAAC,YAAY;;;;;;;;;;MAUqC;IAExD,OAAO,4CAA+B;IACtC,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC;IAetC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,eAAe;;;;;;;IAwBlF,kBAAkB,CAAC,aAAa,EAAE,kCAAkC;IAQpE,oBAAoB;IAKpB,IAAI,aAOF;IAEF,OAAO,aAML;IAEF,KAAK,aAMH;IAEF,aAAa,UAAW,cAAc,cAAc,CAAC,UA6CnD;IAEF,UAAU,cAAe,MAAM,eAAe,MAAM,cAAc,MAAM,UAqBtE;IAEF,OAAO,qBAAsB,MAAM,oBAAoB,MAAM,UAO3D;IAEF,UAAU,SAAU,KAAK,GAAG,OAAO,GAAG,MAAM,UAI1C;IAEF,YAAY,aAAgC;IAE5C,cAAc,aAAkC;IAEhD,aAAa,aAAiC;IAE9C,wBAAwB,iBAAkB,IAAI,UAM5C;IAEF,oBAAoB;;;eAElB;IAEF,WAAW,oCA2CT;IAEF,WAAW,aAGT;IAEF,MAAM;CAiDP;AAED,eAAO,MAAM,gCAAgC,mBAAa,CAAC;;;;;AAE3D,wBAGE"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { WrappedComponentProps } from 'react-intl';
|
|
3
3
|
import { SizeLarge, SizeMedium, SizeSmall } from '../common/propsValues/size';
|
|
4
|
+
import { WithInputAttributesProps } from '../inputs/contexts';
|
|
4
5
|
import { SelectInputProps } from '../inputs/SelectInput';
|
|
5
6
|
export interface CurrencyOptionItem {
|
|
6
7
|
header?: never;
|
|
@@ -39,8 +40,9 @@ export interface MoneyInputProps extends WrappedComponentProps {
|
|
|
39
40
|
selectProps?: Partial<SelectInputProps<CurrencyOptionItem>>;
|
|
40
41
|
maxLengthOverride?: number;
|
|
41
42
|
}
|
|
42
|
-
|
|
43
|
-
|
|
43
|
+
type MoneyInputPropsWithInputAttributes = MoneyInputProps & Partial<WithInputAttributesProps>;
|
|
44
|
+
declare const _default: import("react").FC<import("react-intl").WithIntlProps<Omit<MoneyInputPropsWithInputAttributes, "inputAttributes">>> & {
|
|
45
|
+
WrappedComponent: import("react").ComponentType<Omit<MoneyInputPropsWithInputAttributes, "inputAttributes">>;
|
|
44
46
|
};
|
|
45
47
|
export default _default;
|
|
46
48
|
//# sourceMappingURL=MoneyInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAG/D,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAc,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAG/D,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAuB,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnF,OAAO,EAKL,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAM/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;AAuDnE,MAAM,WAAW,eAAgB,SAAQ,qBAAqB;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,SAAS,YAAY,EAAE,CAAC;IACpC,gBAAgB,EAAE,kBAAkB,CAAC;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,eAAe,EAAE,YAAY,EAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3F,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,KAAK,kCAAkC,GAAG,eAAe,GAAG,OAAO,CAAC,wBAAwB,CAAC,CAAC;;;;AAmZ9F,wBAAmF"}
|
|
@@ -18,6 +18,6 @@ export interface PhoneNumberInputProps {
|
|
|
18
18
|
/** List of iso3 codes of countries to remove from the list */
|
|
19
19
|
disabledCountries?: readonly string[];
|
|
20
20
|
}
|
|
21
|
-
declare const PhoneNumberInput: ({ id, "aria-labelledby":
|
|
21
|
+
declare const PhoneNumberInput: ({ id, "aria-labelledby": ariaLabelledByProp, required, disabled, initialValue, onChange, onFocus, onBlur, countryCode, searchPlaceholder, size, placeholder, selectProps, disabledCountries, }: PhoneNumberInputProps) => import("react").JSX.Element;
|
|
22
22
|
export default PhoneNumberInput;
|
|
23
23
|
//# sourceMappingURL=PhoneNumberInput.d.ts.map
|
|
@@ -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;
|
|
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,mMAenB,qBAAqB,gCA4JvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -47,21 +47,21 @@ export interface SelectProps {
|
|
|
47
47
|
* if `function` you can define your own search function to implement custom search experience. This search function used while filtering the options array. The custom search function takes two parameters. First is the option the second is the keyword.
|
|
48
48
|
*/
|
|
49
49
|
search?: SelectSearch;
|
|
50
|
+
options: SelectOptions[];
|
|
51
|
+
searchValue?: string;
|
|
52
|
+
searchPlaceholder?: string;
|
|
53
|
+
classNames?: any;
|
|
54
|
+
dropdownUp?: boolean;
|
|
55
|
+
buttonProps?: Object;
|
|
56
|
+
dropdownProps?: Object;
|
|
50
57
|
onChange: (...args: any[])=>any;
|
|
51
58
|
onFocus?: (...args: any[])=>any;
|
|
52
59
|
onBlur?: (...args: any[])=>any;
|
|
53
|
-
options: SelectOptions[];
|
|
54
60
|
/**
|
|
55
61
|
* To have full control of your search value and response use `onSearchChange` function combined with `searchValue` and custom filtering on the options array.
|
|
56
62
|
* DO NOT USE TOGETHER WITH `search` PROPERTY
|
|
57
63
|
*/
|
|
58
64
|
onSearchChange?: (...args: any[])=>any;
|
|
59
|
-
searchValue?: string;
|
|
60
|
-
searchPlaceholder?: string;
|
|
61
|
-
classNames?: any;
|
|
62
|
-
dropdownUp?: boolean;
|
|
63
|
-
buttonProps?: Object;
|
|
64
|
-
dropdownProps?: Object;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
declare const Select: React.FC<SelectProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA+EA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;gCAkeC"}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { Size, SizeMedium, SizeLarge } from '../common';
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { SizeMedium, SizeLarge } from '../common';
|
|
4
3
|
import { InlineAlertProps } from '../inlineAlert/InlineAlert';
|
|
5
|
-
import TypeaheadOption from './typeaheadOption/TypeaheadOption';
|
|
6
4
|
export type TypeaheadOption<T = string> = {
|
|
7
5
|
label: string;
|
|
8
6
|
note?: string;
|
|
@@ -43,55 +41,6 @@ export interface TypeaheadProps<T> {
|
|
|
43
41
|
onSearch?: (query: string) => void;
|
|
44
42
|
validateChip?: (chip: TypeaheadOption<T>) => boolean;
|
|
45
43
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
keyboardFocusedOptionIndex: number | null;
|
|
49
|
-
errorState: boolean;
|
|
50
|
-
query: string;
|
|
51
|
-
optionsShown: boolean;
|
|
52
|
-
isFocused: boolean;
|
|
53
|
-
};
|
|
54
|
-
export default class Typeahead<T> extends Component<TypeaheadProps<T>, TypeaheadState<T>> {
|
|
55
|
-
props: TypeaheadProps<T> & Required<Pick<TypeaheadProps<T>, keyof typeof Typeahead.defaultProps>>;
|
|
56
|
-
static defaultProps: {
|
|
57
|
-
allowNew: false;
|
|
58
|
-
autoFillOnBlur: true;
|
|
59
|
-
autoFocus: false;
|
|
60
|
-
chipSeparators: never[];
|
|
61
|
-
clearable: true;
|
|
62
|
-
initialValue: never[];
|
|
63
|
-
inputAutoComplete: string;
|
|
64
|
-
minQueryLength: number;
|
|
65
|
-
multiple: false;
|
|
66
|
-
searchDelay: number;
|
|
67
|
-
showSuggestions: true;
|
|
68
|
-
showNewEntry: true;
|
|
69
|
-
size: Size.MEDIUM;
|
|
70
|
-
validateChip: () => true;
|
|
71
|
-
};
|
|
72
|
-
constructor(props: TypeaheadProps<T>);
|
|
73
|
-
handleSearchDebounced: DebouncedFunc<Typeahead<T>['handleSearch']>;
|
|
74
|
-
UNSAFE_componentWillReceiveProps(nextProps: TypeaheadProps<T>): void;
|
|
75
|
-
componentWillUnmount(): void;
|
|
76
|
-
handleOnFocus: () => void;
|
|
77
|
-
onOptionSelected: (event: React.MouseEvent, item: TypeaheadOption<T>) => void;
|
|
78
|
-
handleOnChange: React.ChangeEventHandler<HTMLInputElement>;
|
|
79
|
-
handleOnPaste: React.ClipboardEventHandler<HTMLInputElement>;
|
|
80
|
-
handleOnKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
|
|
81
|
-
moveFocusedOption(offset: number): void;
|
|
82
|
-
selectItem: (item: TypeaheadOption<T>) => void;
|
|
83
|
-
handleSearch: (query: string) => void;
|
|
84
|
-
handleDocumentClick: () => void;
|
|
85
|
-
showMenu: () => void;
|
|
86
|
-
hideMenu: () => void;
|
|
87
|
-
updateSelectedValue: (selected: readonly TypeaheadOption<T>[]) => void;
|
|
88
|
-
clear: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
89
|
-
removeChip: (option: TypeaheadOption<T>) => void;
|
|
90
|
-
renderChip: (option: TypeaheadOption<T>, idx: number) => ReactNode;
|
|
91
|
-
renderMenu: ({ footer, options, id, keyboardFocusedOptionIndex, query, allowNew, showNewEntry, dropdownOpen, }: Pick<TypeaheadProps<T>, "footer" | "id" | "options" | "allowNew" | "showNewEntry"> & Pick<TypeaheadState<T>, "query" | "keyboardFocusedOptionIndex"> & {
|
|
92
|
-
dropdownOpen: boolean;
|
|
93
|
-
}) => import("react").JSX.Element;
|
|
94
|
-
render(): import("react").JSX.Element;
|
|
95
|
-
}
|
|
96
|
-
export {};
|
|
44
|
+
declare const _default: <T>(props: TypeaheadProps<T>) => React.ReactElement;
|
|
45
|
+
export default _default;
|
|
97
46
|
//# sourceMappingURL=Typeahead.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/typeahead/Typeahead.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/typeahead/Typeahead.tsx"],"names":[],"mappings":"AASA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAmB,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAOnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAS9D,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,MAAM,IAAI;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,cAAc,CAAC,CAAC;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE;QACN,OAAO,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;KACjC,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,SAAS,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAE9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC;CACtD;yDA6cI,MAAM,YAAY;AAFvB,wBAEwB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.
|
|
3
|
+
"version": "46.34.0",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -96,9 +96,9 @@
|
|
|
96
96
|
"react-intl": "^6.6.6",
|
|
97
97
|
"rollup": "^4.17.2",
|
|
98
98
|
"storybook": "^7.6.19",
|
|
99
|
-
"@transferwise/
|
|
99
|
+
"@transferwise/less-config": "3.1.0",
|
|
100
100
|
"@wise/components-theming": "1.2.2",
|
|
101
|
-
"@transferwise/
|
|
101
|
+
"@transferwise/neptune-css": "14.10.0"
|
|
102
102
|
},
|
|
103
103
|
"peerDependencies": {
|
|
104
104
|
"@transferwise/icons": "^3.7.0",
|
package/src/alert/Alert.spec.tsx
CHANGED
|
@@ -175,6 +175,18 @@ describe('Alert', () => {
|
|
|
175
175
|
expect(element).not.toHaveAttribute('target');
|
|
176
176
|
});
|
|
177
177
|
|
|
178
|
+
it('sets text and onClick', () => {
|
|
179
|
+
action = {
|
|
180
|
+
onClick: jest.fn(),
|
|
181
|
+
text: 'Learn more',
|
|
182
|
+
};
|
|
183
|
+
render(<Alert action={action} message={message} />);
|
|
184
|
+
|
|
185
|
+
userEvent.click(screen.getByText('Learn more'));
|
|
186
|
+
|
|
187
|
+
expect(action.onClick).toHaveBeenCalled();
|
|
188
|
+
});
|
|
189
|
+
|
|
178
190
|
it('adds additional attributes', () => {
|
|
179
191
|
action = {
|
|
180
192
|
'aria-label': 'Learn more about fluffy kittens',
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/* eslint-disable no-alert */
|
|
2
2
|
import { Meta, StoryObj } from '@storybook/react';
|
|
3
|
+
import { action } from '@storybook/addon-actions';
|
|
3
4
|
import { ClockBorderless } from '@transferwise/icons';
|
|
4
5
|
|
|
5
6
|
import { Sentiment } from '../common';
|
|
@@ -46,7 +47,7 @@ export const Basic: Story = {
|
|
|
46
47
|
},
|
|
47
48
|
};
|
|
48
49
|
|
|
49
|
-
export const
|
|
50
|
+
export const WithLinkAction: Story = {
|
|
50
51
|
args: {
|
|
51
52
|
action: {
|
|
52
53
|
href: '/',
|
|
@@ -55,6 +56,15 @@ export const WithAction: Story = {
|
|
|
55
56
|
},
|
|
56
57
|
};
|
|
57
58
|
|
|
59
|
+
export const WithButtonAction: Story = {
|
|
60
|
+
args: {
|
|
61
|
+
action: {
|
|
62
|
+
onClick: action('alert action clicked'),
|
|
63
|
+
text: 'Open',
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
};
|
|
67
|
+
|
|
58
68
|
export const WithArrow: Story = {
|
|
59
69
|
args: {
|
|
60
70
|
arrow: AlertArrowPosition.TOP_LEFT,
|
package/src/alert/Alert.tsx
CHANGED
|
@@ -13,9 +13,10 @@ import InlineMarkdown from './inlineMarkdown';
|
|
|
13
13
|
|
|
14
14
|
export type AlertAction = {
|
|
15
15
|
'aria-label'?: string;
|
|
16
|
-
href
|
|
16
|
+
href?: string;
|
|
17
17
|
target?: string;
|
|
18
18
|
text: React.ReactNode;
|
|
19
|
+
onClick?: () => void;
|
|
19
20
|
};
|
|
20
21
|
|
|
21
22
|
/** @deprecated Use `"top" | "bottom"` instead. */
|
|
@@ -44,7 +45,7 @@ export interface AlertProps {
|
|
|
44
45
|
icon?: React.ReactElement;
|
|
45
46
|
/** Title for the alert component */
|
|
46
47
|
title?: string;
|
|
47
|
-
/** The main body of the alert. Accepts plain text and bold words specified with **double stars*/
|
|
48
|
+
/** The main body of the alert. Accepts plain text and bold words specified with **double stars */
|
|
48
49
|
message?: string;
|
|
49
50
|
/** The presence of the onDismiss handler will trigger the visibility of the close button */
|
|
50
51
|
onDismiss?: React.MouseEventHandler<HTMLButtonElement>;
|
|
@@ -144,7 +145,7 @@ export default function Alert({
|
|
|
144
145
|
onTouchEnd={(event) => {
|
|
145
146
|
if (
|
|
146
147
|
shouldFire &&
|
|
147
|
-
action &&
|
|
148
|
+
action?.href &&
|
|
148
149
|
// Check if current event is triggered from closeButton
|
|
149
150
|
event.target instanceof Node &&
|
|
150
151
|
closeButtonReference.current &&
|
|
@@ -180,17 +181,7 @@ export default function Alert({
|
|
|
180
181
|
{children || <InlineMarkdown>{message}</InlineMarkdown>}
|
|
181
182
|
</Body>
|
|
182
183
|
</div>
|
|
183
|
-
{action &&
|
|
184
|
-
<Link
|
|
185
|
-
href={action.href}
|
|
186
|
-
className="m-t-1"
|
|
187
|
-
aria-label={action['aria-label']}
|
|
188
|
-
target={action.target}
|
|
189
|
-
type={Typography.LINK_LARGE}
|
|
190
|
-
>
|
|
191
|
-
{action.text}
|
|
192
|
-
</Link>
|
|
193
|
-
)}
|
|
184
|
+
{action && <Action action={action} />}
|
|
194
185
|
</div>
|
|
195
186
|
</div>
|
|
196
187
|
{onDismiss && (
|
|
@@ -217,3 +208,31 @@ function alertArrowClassNames(arrow: `${AlertArrowPosition}`) {
|
|
|
217
208
|
return 'arrow';
|
|
218
209
|
}
|
|
219
210
|
}
|
|
211
|
+
|
|
212
|
+
function Action({ action }: { action: AlertAction }) {
|
|
213
|
+
if ('href' in action) {
|
|
214
|
+
return (
|
|
215
|
+
<Link
|
|
216
|
+
href={action.href}
|
|
217
|
+
className="m-t-1"
|
|
218
|
+
aria-label={action['aria-label']}
|
|
219
|
+
target={action.target}
|
|
220
|
+
type={Typography.LINK_LARGE}
|
|
221
|
+
onClick={action.onClick}
|
|
222
|
+
>
|
|
223
|
+
{action.text}
|
|
224
|
+
</Link>
|
|
225
|
+
);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
return (
|
|
229
|
+
<button
|
|
230
|
+
type="button"
|
|
231
|
+
aria-label={action['aria-label']}
|
|
232
|
+
className="btn-unstyled np-text-link-large m-t-1"
|
|
233
|
+
onClick={action.onClick}
|
|
234
|
+
>
|
|
235
|
+
{action.text}
|
|
236
|
+
</button>
|
|
237
|
+
);
|
|
238
|
+
}
|
|
@@ -35,8 +35,3 @@ export function stopPropagation(event: SyntheticEvent) {
|
|
|
35
35
|
event.nativeEvent.stopImmediatePropagation();
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
|
-
|
|
39
|
-
export function getSimpleRandomId(prefix: string): string {
|
|
40
|
-
const random = Math.ceil(Math.random() * 999999);
|
|
41
|
-
return `${prefix}${random}`;
|
|
42
|
-
}
|
|
@@ -14,8 +14,7 @@ describe('DateLookup', () => {
|
|
|
14
14
|
<DateLookup value={now} onChange={() => {}} />
|
|
15
15
|
</Field>,
|
|
16
16
|
);
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
);
|
|
17
|
+
// TODO: Replace with `.toHaveAttribute('aria-haspopup')`
|
|
18
|
+
expect(screen.getByLabelText('Date of birth')).toHaveTextContent(now.getFullYear().toString());
|
|
20
19
|
});
|
|
21
20
|
});
|
|
@@ -235,6 +235,6 @@ describe('SelectInput', () => {
|
|
|
235
235
|
<SelectInput items={[{ type: 'option', value: 'USD' }]} value="USD" />
|
|
236
236
|
</Field>,
|
|
237
237
|
);
|
|
238
|
-
expect(screen.getByLabelText('Currency')).
|
|
238
|
+
expect(screen.getByLabelText('Currency')).toHaveAttribute('aria-haspopup');
|
|
239
239
|
});
|
|
240
240
|
});
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Field } from '../field/Field';
|
|
1
2
|
import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../test-utils';
|
|
2
3
|
|
|
3
4
|
import MoneyInput from './MoneyInput';
|
|
@@ -80,4 +81,13 @@ describe('MoneyInput', () => {
|
|
|
80
81
|
|
|
81
82
|
expect(screen.getByLabelText('Prioritized label')).toHaveClass('input-group');
|
|
82
83
|
});
|
|
84
|
+
|
|
85
|
+
it('supports `Field` for labeling', () => {
|
|
86
|
+
render(
|
|
87
|
+
<Field label="Recipient gets">
|
|
88
|
+
<MoneyInput {...props} />
|
|
89
|
+
</Field>,
|
|
90
|
+
);
|
|
91
|
+
expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Recipient gets/);
|
|
92
|
+
});
|
|
83
93
|
});
|
|
@@ -6,6 +6,11 @@ import { mockMatchMedia, mockResizeObserver } from '../test-utils';
|
|
|
6
6
|
mockMatchMedia();
|
|
7
7
|
mockResizeObserver();
|
|
8
8
|
|
|
9
|
+
jest.mock('../inputs/contexts', () => ({
|
|
10
|
+
...jest.requireActual('../inputs/contexts'),
|
|
11
|
+
withInputAttributes: (Component) => Component,
|
|
12
|
+
}));
|
|
13
|
+
|
|
9
14
|
jest.mock('./currencyFormatting', () => ({
|
|
10
15
|
parseAmount: jest.fn(),
|
|
11
16
|
formatAmount: jest.fn(),
|
|
@@ -18,11 +23,11 @@ jest.mock('react-intl', () => ({
|
|
|
18
23
|
injectIntl: (Component) =>
|
|
19
24
|
function (props) {
|
|
20
25
|
return (
|
|
21
|
-
<Component {...props} intl={{ locale: defaultLocale, formatMessage: (id) =>
|
|
26
|
+
<Component {...props} intl={{ locale: defaultLocale, formatMessage: (id) => String(id) }} />
|
|
22
27
|
);
|
|
23
28
|
},
|
|
24
29
|
defineMessages: (translations) => translations,
|
|
25
|
-
useIntl: () => ({ locale: defaultLocale, formatMessage: (id) =>
|
|
30
|
+
useIntl: () => ({ locale: defaultLocale, formatMessage: (id) => String(id) }),
|
|
26
31
|
}));
|
|
27
32
|
|
|
28
33
|
describe('Money Input', () => {
|
|
@@ -510,7 +515,7 @@ describe('Money Input', () => {
|
|
|
510
515
|
|
|
511
516
|
it('formats the number you input after you blur it', () => {
|
|
512
517
|
component.setProps({ numberFormatPrecision: 3 });
|
|
513
|
-
jest.spyOn(numberFormatting, 'parseAmount').mockImplementation(parseFloat);
|
|
518
|
+
jest.spyOn(numberFormatting, 'parseAmount').mockImplementation(Number.parseFloat);
|
|
514
519
|
enterAmount('123.45');
|
|
515
520
|
expect(amountInput().prop('value')).toBe('123.45');
|
|
516
521
|
|
|
@@ -535,7 +540,7 @@ describe('Money Input', () => {
|
|
|
535
540
|
enterAmount('500.1234');
|
|
536
541
|
expect(onAmountChange).toHaveBeenCalledTimes(1);
|
|
537
542
|
expect(onAmountChange).toHaveBeenLastCalledWith(500.1);
|
|
538
|
-
expect(assertions).
|
|
543
|
+
expect(assertions).toBe(1);
|
|
539
544
|
});
|
|
540
545
|
|
|
541
546
|
it('does call onAmountChange when input value is empty', () => {
|
|
@@ -565,7 +570,7 @@ describe('Money Input', () => {
|
|
|
565
570
|
);
|
|
566
571
|
|
|
567
572
|
it('passes the id given to the input element', () => {
|
|
568
|
-
expect(amountInput().prop('id')).
|
|
573
|
+
expect(amountInput().prop('id')).toBeUndefined();
|
|
569
574
|
component.setProps({ id: 'some-id' });
|
|
570
575
|
|
|
571
576
|
expect(amountInput().prop('id')).toBe('some-id');
|
|
@@ -6,6 +6,7 @@ import { injectIntl, WrappedComponentProps } from 'react-intl';
|
|
|
6
6
|
|
|
7
7
|
import { Typography } from '../common';
|
|
8
8
|
import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common/propsValues/size';
|
|
9
|
+
import { withInputAttributes, WithInputAttributesProps } from '../inputs/contexts';
|
|
9
10
|
import { Input } from '../inputs/Input';
|
|
10
11
|
import {
|
|
11
12
|
SelectInput,
|
|
@@ -49,9 +50,8 @@ const formatAmountIfSet = ({
|
|
|
49
50
|
}) => {
|
|
50
51
|
if (maxLengthOverride) {
|
|
51
52
|
return amount != null ? String(amount) : '';
|
|
52
|
-
} else {
|
|
53
|
-
return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
|
|
54
53
|
}
|
|
54
|
+
return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
|
|
55
55
|
};
|
|
56
56
|
|
|
57
57
|
const parseNumber = ({
|
|
@@ -111,21 +111,23 @@ export interface MoneyInputProps extends WrappedComponentProps {
|
|
|
111
111
|
maxLengthOverride?: number;
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
+
type MoneyInputPropsWithInputAttributes = MoneyInputProps & Partial<WithInputAttributesProps>;
|
|
115
|
+
|
|
114
116
|
interface MoneyInputState {
|
|
115
117
|
searchQuery: string;
|
|
116
118
|
formattedAmount: string;
|
|
117
119
|
locale: string;
|
|
118
120
|
}
|
|
119
121
|
|
|
120
|
-
class MoneyInput extends Component<
|
|
121
|
-
declare props:
|
|
122
|
-
Required<Pick<
|
|
122
|
+
class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInputState> {
|
|
123
|
+
declare props: MoneyInputPropsWithInputAttributes &
|
|
124
|
+
Required<Pick<MoneyInputPropsWithInputAttributes, keyof typeof MoneyInput.defaultProps>>;
|
|
123
125
|
|
|
124
126
|
static defaultProps = {
|
|
125
127
|
size: Size.LARGE,
|
|
126
128
|
classNames: {},
|
|
127
129
|
selectProps: {},
|
|
128
|
-
} satisfies Partial<
|
|
130
|
+
} satisfies Partial<MoneyInputPropsWithInputAttributes>;
|
|
129
131
|
|
|
130
132
|
amountFocused = false;
|
|
131
133
|
|
|
@@ -160,7 +162,7 @@ class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
|
|
|
160
162
|
|
|
161
163
|
isInputAllowedForKeyEvent = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
|
162
164
|
const { metaKey, key, ctrlKey } = event;
|
|
163
|
-
const isNumberKey = isNumber(parseInt(key, 10));
|
|
165
|
+
const isNumberKey = isNumber(Number.parseInt(key, 10));
|
|
164
166
|
|
|
165
167
|
return isNumberKey || metaKey || ctrlKey || allowedInputKeys.has(key);
|
|
166
168
|
};
|
|
@@ -179,7 +181,7 @@ class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
|
|
|
179
181
|
: parseNumber({
|
|
180
182
|
amount: paste,
|
|
181
183
|
currency: this.props.selectedCurrency.currency,
|
|
182
|
-
locale
|
|
184
|
+
locale,
|
|
183
185
|
maxLengthOverride: this.props.maxLengthOverride,
|
|
184
186
|
});
|
|
185
187
|
|
|
@@ -188,7 +190,7 @@ class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
|
|
|
188
190
|
formattedAmount: formatAmountIfSet({
|
|
189
191
|
amount: parsed,
|
|
190
192
|
currency: this.props.selectedCurrency.currency,
|
|
191
|
-
locale
|
|
193
|
+
locale,
|
|
192
194
|
maxLengthOverride: this.props.maxLengthOverride,
|
|
193
195
|
}),
|
|
194
196
|
});
|
|
@@ -297,15 +299,18 @@ class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
|
|
|
297
299
|
|
|
298
300
|
render() {
|
|
299
301
|
const {
|
|
302
|
+
inputAttributes,
|
|
303
|
+
id: amountInputId,
|
|
304
|
+
'aria-labelledby': ariaLabelledByProp,
|
|
300
305
|
selectedCurrency,
|
|
301
306
|
onCurrencyChange,
|
|
302
307
|
size,
|
|
303
308
|
addon,
|
|
304
|
-
id,
|
|
305
|
-
'aria-labelledby': ariaLabelledBy,
|
|
306
309
|
selectProps,
|
|
307
310
|
maxLengthOverride,
|
|
308
311
|
} = this.props;
|
|
312
|
+
const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes?.['aria-labelledby'];
|
|
313
|
+
|
|
309
314
|
const selectOptions = this.getSelectOptions();
|
|
310
315
|
|
|
311
316
|
const hasSingleCurrency = () => {
|
|
@@ -335,6 +340,8 @@ class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
|
|
|
335
340
|
const disabled = !this.props.onAmountChange;
|
|
336
341
|
return (
|
|
337
342
|
<div
|
|
343
|
+
role="group"
|
|
344
|
+
{...inputAttributes}
|
|
338
345
|
aria-labelledby={ariaLabelledBy}
|
|
339
346
|
className={classNames(
|
|
340
347
|
this.style('tw-money-input'),
|
|
@@ -343,7 +350,7 @@ class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
|
|
|
343
350
|
)}
|
|
344
351
|
>
|
|
345
352
|
<Input
|
|
346
|
-
id={
|
|
353
|
+
id={amountInputId}
|
|
347
354
|
value={this.state.formattedAmount}
|
|
348
355
|
inputMode="decimal"
|
|
349
356
|
disabled={disabled}
|
|
@@ -486,7 +493,7 @@ function currencyOptionFitsQuery(option: CurrencyOptionItem, query: string) {
|
|
|
486
493
|
}
|
|
487
494
|
|
|
488
495
|
function contains(property: string | undefined, query: string) {
|
|
489
|
-
return property
|
|
496
|
+
return property?.toLowerCase().includes(query.toLowerCase());
|
|
490
497
|
}
|
|
491
498
|
|
|
492
499
|
function sortOptionsLabelsToFirst(options: readonly CurrencyOptionItem[], query: string) {
|
|
@@ -507,4 +514,4 @@ function sortOptionsLabelsToFirst(options: readonly CurrencyOptionItem[], query:
|
|
|
507
514
|
});
|
|
508
515
|
}
|
|
509
516
|
|
|
510
|
-
export default injectIntl(MoneyInput);
|
|
517
|
+
export default injectIntl(withInputAttributes(MoneyInput, { nonLabelable: true }));
|