@transferwise/components 46.11.0 → 46.13.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/i18n/zh-HK.json +2 -2
- package/build/index.esm.js +67 -153
- package/build/index.esm.js.map +1 -1
- package/build/index.js +67 -153
- package/build/index.js.map +1 -1
- package/build/types/drawer/Drawer.d.ts.map +1 -1
- package/build/types/index.d.ts +1 -0
- package/build/types/index.d.ts.map +1 -1
- package/build/types/modal/Modal.d.ts.map +1 -1
- package/build/types/popover/Popover.d.ts +1 -0
- package/build/types/popover/Popover.d.ts.map +1 -1
- package/build/types/typeahead/Typeahead.d.ts +95 -57
- package/build/types/typeahead/Typeahead.d.ts.map +1 -1
- package/build/types/typeahead/index.d.ts +2 -2
- package/build/types/typeahead/index.d.ts.map +1 -1
- package/build/types/typeahead/typeaheadInput/TypeaheadInput.d.ts +23 -41
- package/build/types/typeahead/typeaheadInput/TypeaheadInput.d.ts.map +1 -1
- package/build/types/typeahead/typeaheadOption/TypeaheadOption.d.ts +9 -17
- package/build/types/typeahead/typeaheadOption/TypeaheadOption.d.ts.map +1 -1
- package/build/types/typeahead/util/highlight.d.ts +2 -1
- package/build/types/typeahead/util/highlight.d.ts.map +1 -1
- package/package.json +5 -2
- package/src/drawer/Drawer.js +13 -2
- package/src/drawer/__snapshots__/Drawer.rtl.spec.js.snap +1 -0
- package/src/i18n/zh-HK.json +2 -2
- package/src/index.ts +1 -0
- package/src/modal/Modal.tsx +6 -3
- package/src/popover/Popover.js +7 -3
- package/src/popover/Popover.spec.js +16 -8
- package/src/popover/__snapshots__/Popover.spec.js.snap +0 -56
- package/src/typeahead/{Typeahead.story.js → Typeahead.story.tsx} +8 -7
- package/src/typeahead/{Typeahead.js → Typeahead.tsx} +110 -111
- package/src/typeahead/index.ts +2 -0
- package/src/typeahead/typeaheadInput/TypeaheadInput.spec.js +1 -0
- package/src/typeahead/typeaheadInput/{TypeaheadInput.js → TypeaheadInput.tsx} +35 -46
- package/src/typeahead/typeaheadOption/{TypeaheadOption.js → TypeaheadOption.tsx} +10 -20
- package/src/typeahead/util/{highlight.js → highlight.tsx} +1 -1
- package/src/typeahead/index.js +0 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.js"],"names":[],"mappings":";AAYA;;;;;;;;gCAoCC"}
|
package/build/types/index.d.ts
CHANGED
|
@@ -16,6 +16,7 @@ export type { ModalProps } from './modal';
|
|
|
16
16
|
export type { CurrencyHeaderItem, CurrencyItem, CurrencyOptionItem, MoneyInputProps, } from './moneyInput';
|
|
17
17
|
export type { LayoutDirection, TypographyTypes, TitleTypes, BodyTypes, LinkTypes, DisplayTypes, } from './common';
|
|
18
18
|
export type { SegmentedControlProps } from './segmentedControl';
|
|
19
|
+
export type { TypeaheadProps, TypeaheadOption } from './typeahead';
|
|
19
20
|
/**
|
|
20
21
|
* Components
|
|
21
22
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAC5E,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EACV,oBAAoB,EACpB,eAAe,EACf,6BAA6B,EAC7B,qBAAqB,EACrB,gBAAgB,EAChB,wBAAwB,EACxB,6BAA6B,GAC9B,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,YAAY,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACjF,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EAAE,8BAA8B,EAAE,MAAM,6BAA6B,CAAC;AAClF,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrF,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EACV,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,EAClB,eAAe,GAChB,MAAM,cAAc,CAAC;AACtB,YAAY,EACV,eAAe,EACf,eAAe,EACf,UAAU,EACV,SAAS,EACT,SAAS,EACT,YAAY,GACb,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/modal/Modal.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/modal/Modal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAG1C,OAAO,EAGL,WAAW,EACX,cAAc,EAEd,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,EAEf,MAAM,WAAW,CAAC;AASnB,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,aAAa,GAAG,cAAc,CAAC;IACxC,QAAQ,CAAC,EAAE,WAAW,GAAG,cAAc,CAAC;IACxC,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAEF,QAAA,MAAM,KAAK,wHAYR,UAAU,gCAmHZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/popover/Popover.js"],"names":[],"mappings":";AAUA
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/popover/Popover.js"],"names":[],"mappings":";AAUA;;;;;;;gCA8CC"}
|
|
@@ -1,57 +1,95 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
validateChip?: (
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
1
|
+
import { DebouncedFunc } from 'lodash';
|
|
2
|
+
import { Component, ReactNode } from 'react';
|
|
3
|
+
import { Size, SizeMedium, SizeLarge } from '../common';
|
|
4
|
+
import { InlineAlertProps } from '../inlineAlert/InlineAlert';
|
|
5
|
+
import TypeaheadOption from './typeaheadOption/TypeaheadOption';
|
|
6
|
+
export type TypeaheadOption<T = string> = {
|
|
7
|
+
label: string;
|
|
8
|
+
note?: string;
|
|
9
|
+
secondary?: string;
|
|
10
|
+
value?: T;
|
|
11
|
+
};
|
|
12
|
+
export interface TypeaheadProps<T> {
|
|
13
|
+
id: string;
|
|
14
|
+
name: string;
|
|
15
|
+
addon?: ReactNode;
|
|
16
|
+
alert?: {
|
|
17
|
+
message: InlineAlertProps['children'];
|
|
18
|
+
type?: InlineAlertProps['type'];
|
|
19
|
+
};
|
|
20
|
+
allowNew?: boolean;
|
|
21
|
+
autoFillOnBlur?: boolean;
|
|
22
|
+
autoFocus?: boolean;
|
|
23
|
+
chipSeparators?: string[];
|
|
24
|
+
clearable?: boolean;
|
|
25
|
+
footer?: ReactNode;
|
|
26
|
+
initialValue?: TypeaheadOption<T>[];
|
|
27
|
+
inputAutoComplete?: string;
|
|
28
|
+
maxHeight?: number;
|
|
29
|
+
minQueryLength?: number;
|
|
30
|
+
placeholder?: string;
|
|
31
|
+
multiple?: boolean;
|
|
32
|
+
options: TypeaheadOption<T>[];
|
|
33
|
+
searchDelay?: number;
|
|
34
|
+
showSuggestions?: boolean;
|
|
35
|
+
showNewEntry?: boolean;
|
|
36
|
+
size?: SizeMedium | SizeLarge;
|
|
37
|
+
onBlur?: () => void;
|
|
38
|
+
onChange: (options: TypeaheadOption<T>[]) => void;
|
|
39
|
+
onFocus?: () => void;
|
|
40
|
+
onInputChange?: (query: string) => void;
|
|
41
|
+
onSearch?: (query: string) => void;
|
|
42
|
+
validateChip?: (chip: TypeaheadOption<T>) => boolean;
|
|
43
|
+
}
|
|
44
|
+
type TypeaheadState<T> = {
|
|
45
|
+
selected: TypeaheadOption<T>[];
|
|
46
|
+
keyboardFocusedOptionIndex: number | null;
|
|
47
|
+
errorState: boolean;
|
|
48
|
+
query: string;
|
|
49
|
+
optionsShown: boolean;
|
|
50
|
+
isFocused: boolean;
|
|
51
|
+
};
|
|
52
|
+
export default class Typeahead<T> extends Component<TypeaheadProps<T>, TypeaheadState<T>> {
|
|
53
|
+
props: TypeaheadProps<T> & Required<Pick<TypeaheadProps<T>, keyof typeof Typeahead.defaultProps>>;
|
|
54
|
+
static defaultProps: {
|
|
55
|
+
allowNew: false;
|
|
56
|
+
autoFillOnBlur: true;
|
|
57
|
+
autoFocus: false;
|
|
58
|
+
chipSeparators: never[];
|
|
59
|
+
clearable: true;
|
|
60
|
+
initialValue: never[];
|
|
61
|
+
inputAutoComplete: string;
|
|
62
|
+
minQueryLength: number;
|
|
63
|
+
multiple: false;
|
|
64
|
+
searchDelay: number;
|
|
65
|
+
showSuggestions: true;
|
|
66
|
+
showNewEntry: true;
|
|
67
|
+
size: Size.MEDIUM;
|
|
68
|
+
validateChip: () => true;
|
|
69
|
+
};
|
|
70
|
+
constructor(props: TypeaheadProps<T>);
|
|
71
|
+
handleSearchDebounced: DebouncedFunc<Typeahead<T>['handleSearch']>;
|
|
72
|
+
UNSAFE_componentWillReceiveProps(nextProps: TypeaheadProps<T>): void;
|
|
73
|
+
componentWillUnmount(): void;
|
|
74
|
+
handleOnFocus: () => void;
|
|
75
|
+
onOptionSelected: (event: React.MouseEvent, item: TypeaheadOption<T>) => void;
|
|
76
|
+
handleOnChange: React.ChangeEventHandler<HTMLInputElement>;
|
|
77
|
+
handleOnPaste: React.ClipboardEventHandler<HTMLInputElement>;
|
|
78
|
+
handleOnKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
|
|
79
|
+
moveFocusedOption(offset: number): void;
|
|
80
|
+
selectItem: (item: TypeaheadOption<T>) => void;
|
|
81
|
+
handleSearch: (query: string) => void;
|
|
82
|
+
handleDocumentClick: () => void;
|
|
83
|
+
showMenu: () => void;
|
|
84
|
+
hideMenu: () => void;
|
|
85
|
+
updateSelectedValue: (selected: TypeaheadOption<T>[]) => void;
|
|
86
|
+
clear: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
87
|
+
removeChip: (option: TypeaheadOption<T>) => void;
|
|
88
|
+
renderChip: (option: TypeaheadOption<T>, idx: number) => ReactNode;
|
|
89
|
+
renderMenu: ({ footer, options, id, keyboardFocusedOptionIndex, query, allowNew, showNewEntry, dropdownOpen, }: Pick<TypeaheadProps<T>, "id" | "footer" | "options" | "allowNew" | "showNewEntry"> & Pick<TypeaheadState<T>, "query" | "keyboardFocusedOptionIndex"> & {
|
|
90
|
+
dropdownOpen: boolean;
|
|
91
|
+
}) => import("react").JSX.Element;
|
|
92
|
+
render(): import("react").JSX.Element;
|
|
93
|
+
}
|
|
94
|
+
export {};
|
|
95
|
+
//# sourceMappingURL=Typeahead.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/typeahead/Typeahead.
|
|
1
|
+
{"version":3,"file":"Typeahead.d.ts","sourceRoot":"","sources":["../../../src/typeahead/Typeahead.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export default Typeahead;
|
|
2
|
-
|
|
1
|
+
export { default } from './Typeahead';
|
|
2
|
+
export type { TypeaheadOption, TypeaheadProps } from './Typeahead';
|
|
3
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/typeahead/index.
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/typeahead/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -1,47 +1,29 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { Component, ReactNode } from 'react';
|
|
2
|
+
import { TypeaheadOption, TypeaheadProps } from '../Typeahead';
|
|
3
|
+
export type TypeaheadInputProps<T> = {
|
|
4
|
+
typeaheadId: string;
|
|
5
|
+
value: string;
|
|
6
|
+
selected: TypeaheadOption<T>[];
|
|
7
|
+
optionsShown?: boolean;
|
|
8
|
+
autoComplete: string;
|
|
9
|
+
onChange: React.ChangeEventHandler<HTMLInputElement>;
|
|
10
|
+
onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
|
|
11
|
+
onFocus: () => void;
|
|
12
|
+
onPaste: React.ClipboardEventHandler<HTMLInputElement>;
|
|
13
|
+
renderChip: (chip: TypeaheadOption<T>, index: number) => ReactNode;
|
|
14
|
+
} & Pick<TypeaheadProps<T>, 'id' | 'name' | 'autoFocus' | 'multiple' | 'placeholder' | 'maxHeight'>;
|
|
15
|
+
type TypeaheadInputState = {
|
|
16
|
+
inputWidth: number;
|
|
17
|
+
};
|
|
18
|
+
export default class TypeaheadInput<T> extends Component<TypeaheadInputProps<T>, TypeaheadInputState> {
|
|
19
|
+
inputRef: import("react").RefObject<HTMLInputElement>;
|
|
20
|
+
sizerRef: import("react").RefObject<HTMLDivElement>;
|
|
21
|
+
constructor(props: TypeaheadInputProps<T>);
|
|
6
22
|
componentDidMount(): void;
|
|
7
|
-
componentDidUpdate(previousProps:
|
|
23
|
+
componentDidUpdate(previousProps: TypeaheadInputProps<T>): void;
|
|
8
24
|
recalculateWidth: () => void;
|
|
9
25
|
renderInput: () => import("react").JSX.Element;
|
|
10
|
-
inputRef: HTMLInputElement | null | undefined;
|
|
11
26
|
render(): import("react").JSX.Element;
|
|
12
|
-
sizerRef: HTMLDivElement | null | undefined;
|
|
13
27
|
}
|
|
14
|
-
|
|
15
|
-
namespace propTypes {
|
|
16
|
-
const typeaheadId: any;
|
|
17
|
-
const name: any;
|
|
18
|
-
const autoFocus: any;
|
|
19
|
-
const multiple: any;
|
|
20
|
-
const value: any;
|
|
21
|
-
const selected: any;
|
|
22
|
-
const placeholder: any;
|
|
23
|
-
const optionsShown: any;
|
|
24
|
-
const maxHeight: any;
|
|
25
|
-
const autoComplete: any;
|
|
26
|
-
const onChange: any;
|
|
27
|
-
const renderChip: any;
|
|
28
|
-
const onKeyDown: any;
|
|
29
|
-
const onFocus: any;
|
|
30
|
-
const onPaste: any;
|
|
31
|
-
}
|
|
32
|
-
namespace defaultProps {
|
|
33
|
-
const autoFocus_1: boolean;
|
|
34
|
-
export { autoFocus_1 as autoFocus };
|
|
35
|
-
const maxHeight_1: null;
|
|
36
|
-
export { maxHeight_1 as maxHeight };
|
|
37
|
-
const placeholder_1: string;
|
|
38
|
-
export { placeholder_1 as placeholder };
|
|
39
|
-
const optionsShown_1: boolean;
|
|
40
|
-
export { optionsShown_1 as optionsShown };
|
|
41
|
-
const selected_1: never[];
|
|
42
|
-
export { selected_1 as selected };
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
export default TypeaheadInput;
|
|
46
|
-
import { Component } from "react";
|
|
28
|
+
export {};
|
|
47
29
|
//# sourceMappingURL=TypeaheadInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TypeaheadInput.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/typeaheadInput/TypeaheadInput.
|
|
1
|
+
{"version":3,"file":"TypeaheadInput.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/typeaheadInput/TypeaheadInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI/D,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACrD,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,KAAK,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;IACvD,UAAU,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CACpE,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,GAAG,WAAW,CAAC,CAAC;AAEpG,KAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAAC,CAAC,CAAE,SAAQ,SAAS,CACtD,mBAAmB,CAAC,CAAC,CAAC,EACtB,mBAAmB,CACpB;IACC,QAAQ,8CAAiC;IACzC,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAOzC,iBAAiB;IAOjB,kBAAkB,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAMxD,gBAAgB,aAMd;IAEF,WAAW,oCA0CT;IAEF,MAAM;CAyBP"}
|
|
@@ -1,19 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { TypeaheadOption } from '../Typeahead';
|
|
3
|
+
export type TypeaheadOptionProps<T> = {
|
|
4
|
+
option: TypeaheadOption<T>;
|
|
5
|
+
selected?: boolean;
|
|
6
|
+
onClick?: React.MouseEventHandler;
|
|
7
|
+
query?: string;
|
|
8
|
+
};
|
|
9
|
+
declare const Option: <T>(props: TypeaheadOptionProps<T>) => import("react").JSX.Element;
|
|
1
10
|
export default Option;
|
|
2
|
-
declare function Option(props: any): import("react").JSX.Element;
|
|
3
|
-
declare namespace Option {
|
|
4
|
-
namespace propTypes {
|
|
5
|
-
const option: any;
|
|
6
|
-
const query: any;
|
|
7
|
-
const selected: any;
|
|
8
|
-
const onClick: any;
|
|
9
|
-
}
|
|
10
|
-
namespace defaultProps {
|
|
11
|
-
const selected_1: boolean;
|
|
12
|
-
export { selected_1 as selected };
|
|
13
|
-
const query_1: string;
|
|
14
|
-
export { query_1 as query };
|
|
15
|
-
export function onClick_1(): void;
|
|
16
|
-
export { onClick_1 as onClick };
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
11
|
//# sourceMappingURL=TypeaheadOption.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TypeaheadOption.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/typeaheadOption/TypeaheadOption.
|
|
1
|
+
{"version":3,"file":"TypeaheadOption.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/typeaheadOption/TypeaheadOption.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,MAAM,MAAM,oBAAoB,CAAC,CAAC,IAAI;IACpC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,QAAA,MAAM,MAAM,oEAqBX,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/util/highlight.
|
|
1
|
+
{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/util/highlight.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,wCAe7D"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.
|
|
3
|
+
"version": "46.13.0",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -70,6 +70,10 @@
|
|
|
70
70
|
"@tsconfig/recommended": "^1.0.2",
|
|
71
71
|
"@types/babel__core": "^7.20.1",
|
|
72
72
|
"@types/jest": "^29.5.12",
|
|
73
|
+
"@types/lodash": "4.14.202",
|
|
74
|
+
"@types/lodash.clamp": "^4.0.9",
|
|
75
|
+
"@types/lodash.debounce": "^4.0.9",
|
|
76
|
+
"@types/lodash.throttle": "^4.1.7",
|
|
73
77
|
"@types/node": "^14.14.31",
|
|
74
78
|
"@types/react": "^17.0.65",
|
|
75
79
|
"@types/react-dom": "^17.0.20",
|
|
@@ -113,7 +117,6 @@
|
|
|
113
117
|
"@react-spring/web": "~9.6.1",
|
|
114
118
|
"@transferwise/formatting": "^2.1.0",
|
|
115
119
|
"@transferwise/neptune-validation": "^3.1.0",
|
|
116
|
-
"@types/lodash.throttle": "^4.1.7",
|
|
117
120
|
"classnames": "^2.2.6",
|
|
118
121
|
"commonmark": "0.29.1",
|
|
119
122
|
"core-js": "^3.8.0",
|
package/src/drawer/Drawer.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { useId } from '@radix-ui/react-id';
|
|
1
2
|
import classNames from 'classnames';
|
|
2
3
|
import PropTypes from 'prop-types';
|
|
3
4
|
|
|
@@ -16,17 +17,27 @@ const Drawer = ({ children, className, footerContent, headerTitle, onClose, open
|
|
|
16
17
|
);
|
|
17
18
|
|
|
18
19
|
const { isMobile } = useLayout();
|
|
20
|
+
const titleId = useId();
|
|
19
21
|
|
|
20
22
|
return (
|
|
21
23
|
<Dimmer open={open} onClose={onClose}>
|
|
22
24
|
<SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>
|
|
23
|
-
<div
|
|
25
|
+
<div
|
|
26
|
+
role="dialog"
|
|
27
|
+
aria-modal
|
|
28
|
+
aria-labelledby={headerTitle ? titleId : undefined}
|
|
29
|
+
className={classNames('np-drawer', className)}
|
|
30
|
+
>
|
|
24
31
|
<div
|
|
25
32
|
className={classNames('np-drawer-header', {
|
|
26
33
|
'np-drawer-header--withborder': headerTitle,
|
|
27
34
|
})}
|
|
28
35
|
>
|
|
29
|
-
{headerTitle &&
|
|
36
|
+
{headerTitle && (
|
|
37
|
+
<Title id={titleId} type={Typography.TITLE_BODY}>
|
|
38
|
+
{headerTitle}
|
|
39
|
+
</Title>
|
|
40
|
+
)}
|
|
30
41
|
<CloseButton onClick={onClose} />
|
|
31
42
|
</div>
|
|
32
43
|
{children && <div className={classNames('np-drawer-content')}>{children}</div>}
|
package/src/i18n/zh-HK.json
CHANGED
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
"neptune.ClearButton.ariaLabel": "清除",
|
|
5
5
|
"neptune.CloseButton.ariaLabel": "關閉",
|
|
6
6
|
"neptune.DateInput.day.label": "日",
|
|
7
|
-
"neptune.DateInput.day.placeholder": "
|
|
7
|
+
"neptune.DateInput.day.placeholder": "DD",
|
|
8
8
|
"neptune.DateInput.month.label": "月",
|
|
9
9
|
"neptune.DateInput.year.label": "年",
|
|
10
|
-
"neptune.DateInput.year.placeholder": "
|
|
10
|
+
"neptune.DateInput.year.placeholder": "YYYY",
|
|
11
11
|
"neptune.DateLookup.day": "日",
|
|
12
12
|
"neptune.DateLookup.goTo20YearView": "切換至20年視圖",
|
|
13
13
|
"neptune.DateLookup.month": "月",
|
package/src/index.ts
CHANGED
package/src/modal/Modal.tsx
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { useId } from '@radix-ui/react-id';
|
|
1
2
|
import classNames from 'classnames';
|
|
2
3
|
import { ReactNode, useRef } from 'react';
|
|
3
4
|
import { CSSTransition } from 'react-transition-group';
|
|
@@ -59,6 +60,7 @@ const Modal = ({
|
|
|
59
60
|
const noDivider = checkSpecialClasses('no-divider');
|
|
60
61
|
|
|
61
62
|
const contentReference = useRef<HTMLDivElement>(null);
|
|
63
|
+
const titleId = useId();
|
|
62
64
|
|
|
63
65
|
return !isMedium ? (
|
|
64
66
|
<Drawer
|
|
@@ -99,11 +101,12 @@ const Modal = ({
|
|
|
99
101
|
{...otherProps}
|
|
100
102
|
>
|
|
101
103
|
<div
|
|
104
|
+
role="dialog"
|
|
105
|
+
aria-modal
|
|
106
|
+
aria-labelledby={titleId}
|
|
102
107
|
className={classNames('tw-modal-dialog', 'd-flex', {
|
|
103
108
|
[`tw-modal-${size}`]: size,
|
|
104
109
|
})}
|
|
105
|
-
aria-modal
|
|
106
|
-
role="dialog"
|
|
107
110
|
>
|
|
108
111
|
<div
|
|
109
112
|
className={classNames(
|
|
@@ -129,7 +132,7 @@ const Modal = ({
|
|
|
129
132
|
},
|
|
130
133
|
)}
|
|
131
134
|
>
|
|
132
|
-
<Title type={Typography.TITLE_BODY} className="tw-modal-title">
|
|
135
|
+
<Title id={titleId} type={Typography.TITLE_BODY} className="tw-modal-title">
|
|
133
136
|
{title}
|
|
134
137
|
</Title>
|
|
135
138
|
<CloseButton onClick={onClose} />
|
package/src/popover/Popover.js
CHANGED
|
@@ -8,13 +8,16 @@ import ResponsivePanel from '../common/responsivePanel';
|
|
|
8
8
|
import Title from '../title';
|
|
9
9
|
import { logActionRequiredIf } from '../utilities';
|
|
10
10
|
|
|
11
|
-
const Popover = ({ children, className, content, preferredPlacement, title }) => {
|
|
11
|
+
const Popover = ({ children, className, content, preferredPlacement, title, onClose }) => {
|
|
12
12
|
logActionRequired({ preferredPlacement });
|
|
13
13
|
const anchorReference = useRef(null);
|
|
14
14
|
const [open, setOpen] = useState(false);
|
|
15
15
|
const { isModern } = useTheme();
|
|
16
16
|
|
|
17
|
-
const
|
|
17
|
+
const handleOnClose = () => {
|
|
18
|
+
setOpen(false);
|
|
19
|
+
onClose?.();
|
|
20
|
+
};
|
|
18
21
|
|
|
19
22
|
return (
|
|
20
23
|
<span className={classnames('np-popover', className)}>
|
|
@@ -34,7 +37,7 @@ const Popover = ({ children, className, content, preferredPlacement, title }) =>
|
|
|
34
37
|
position={deprecatedPlacements[preferredPlacement] || preferredPlacement}
|
|
35
38
|
arrow
|
|
36
39
|
className="np-popover__container"
|
|
37
|
-
onClose={
|
|
40
|
+
onClose={handleOnClose}
|
|
38
41
|
>
|
|
39
42
|
<div
|
|
40
43
|
className={isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content'}
|
|
@@ -84,6 +87,7 @@ Popover.propTypes = {
|
|
|
84
87
|
'bottom-right',
|
|
85
88
|
'bottom-left',
|
|
86
89
|
]),
|
|
90
|
+
onClose: PropTypes.func,
|
|
87
91
|
title: PropTypes.node,
|
|
88
92
|
};
|
|
89
93
|
|
|
@@ -10,14 +10,6 @@ jest.mock('react-transition-group', () => ({
|
|
|
10
10
|
CSSTransition: (props) => (props.in ? props.children : null),
|
|
11
11
|
}));
|
|
12
12
|
|
|
13
|
-
jest.mock(
|
|
14
|
-
'../dimmer',
|
|
15
|
-
() =>
|
|
16
|
-
function ({ open, children }) {
|
|
17
|
-
return open ? <div className="dimmer">{children}</div> : null;
|
|
18
|
-
},
|
|
19
|
-
);
|
|
20
|
-
|
|
21
13
|
describe('Popover', () => {
|
|
22
14
|
const props = {
|
|
23
15
|
arrow: true,
|
|
@@ -114,7 +106,23 @@ describe('Popover', () => {
|
|
|
114
106
|
});
|
|
115
107
|
});
|
|
116
108
|
|
|
109
|
+
it('onClose fires when close Popover', async () => {
|
|
110
|
+
const handleOnClose = jest.fn();
|
|
111
|
+
render(
|
|
112
|
+
<Popover {...props} onClose={handleOnClose}>
|
|
113
|
+
<button type="button">Open</button>
|
|
114
|
+
</Popover>,
|
|
115
|
+
);
|
|
116
|
+
|
|
117
|
+
expect(handleOnClose).not.toHaveBeenCalled();
|
|
118
|
+
userEvent.click(screen.getByText('Open'));
|
|
119
|
+
await waitForPanel();
|
|
120
|
+
userEvent.click(getDimmer());
|
|
121
|
+
expect(handleOnClose).toHaveBeenCalledTimes(1);
|
|
122
|
+
});
|
|
123
|
+
|
|
117
124
|
const waitForPanel = async () => screen.findByText('content');
|
|
125
|
+
const getDimmer = () => document.querySelector('.dimmer');
|
|
118
126
|
const getPanel = () => document.querySelector('.np-panel');
|
|
119
127
|
const getBottomSheet = () => document.querySelector('.np-bottom-sheet');
|
|
120
128
|
const getTitle = () => screen.queryByText('title');
|
|
@@ -45,62 +45,6 @@ exports[`Popover on mobile renders when is open 1`] = `
|
|
|
45
45
|
Open
|
|
46
46
|
</button>
|
|
47
47
|
</span>
|
|
48
|
-
<div
|
|
49
|
-
class="dimmer"
|
|
50
|
-
>
|
|
51
|
-
<div
|
|
52
|
-
class="sliding-panel sliding-panel--open-bottom np-bottom-sheet np-popover__container"
|
|
53
|
-
>
|
|
54
|
-
<div
|
|
55
|
-
class="np-bottom-sheet--top-bar"
|
|
56
|
-
>
|
|
57
|
-
<div
|
|
58
|
-
class="np-bottom-sheet--handler"
|
|
59
|
-
/>
|
|
60
|
-
<button
|
|
61
|
-
aria-label="Close"
|
|
62
|
-
class="np-close-button close btn-link text-no-decoration sr-only np-bottom-sheet--close-btn"
|
|
63
|
-
type="button"
|
|
64
|
-
>
|
|
65
|
-
<span
|
|
66
|
-
aria-hidden="true"
|
|
67
|
-
class="tw-icon tw-icon-cross "
|
|
68
|
-
data-testid="cross-icon"
|
|
69
|
-
role="presentation"
|
|
70
|
-
>
|
|
71
|
-
<svg
|
|
72
|
-
fill="currentColor"
|
|
73
|
-
focusable="false"
|
|
74
|
-
height="16"
|
|
75
|
-
viewBox="0 0 24 24"
|
|
76
|
-
width="16"
|
|
77
|
-
>
|
|
78
|
-
<path
|
|
79
|
-
d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
|
|
80
|
-
/>
|
|
81
|
-
</svg>
|
|
82
|
-
</span>
|
|
83
|
-
</button>
|
|
84
|
-
</div>
|
|
85
|
-
<div
|
|
86
|
-
class="np-bottom-sheet--content"
|
|
87
|
-
style="max-height: calc(768px - 64px - 32px);"
|
|
88
|
-
>
|
|
89
|
-
<div
|
|
90
|
-
aria-hidden="false"
|
|
91
|
-
class="np-popover__content"
|
|
92
|
-
role="dialog"
|
|
93
|
-
>
|
|
94
|
-
<h4
|
|
95
|
-
class="np-text-title-body m-b-1"
|
|
96
|
-
>
|
|
97
|
-
title
|
|
98
|
-
</h4>
|
|
99
|
-
content
|
|
100
|
-
</div>
|
|
101
|
-
</div>
|
|
102
|
-
</div>
|
|
103
|
-
</div>
|
|
104
48
|
</span>
|
|
105
49
|
</div>
|
|
106
50
|
`;
|