@transferwise/components 46.42.1 → 46.43.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 +37 -15
- package/build/index.js.map +1 -1
- package/build/index.mjs +37 -15
- package/build/index.mjs.map +1 -1
- package/build/types/inputs/InputGroup.d.ts.map +1 -1
- package/build/types/inputs/SelectInput.d.ts +3 -1
- package/build/types/inputs/SelectInput.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/inputs/InputGroup.spec.tsx +26 -0
- package/src/inputs/InputGroup.tsx +35 -13
- package/src/inputs/SearchInput.spec.tsx +16 -0
- package/src/inputs/SelectInput.spec.tsx +1 -1
- package/src/inputs/SelectInput.tsx +4 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../src/inputs/InputGroup.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../src/inputs/InputGroup.tsx"],"names":[],"mappings":"AAsBA,wBAAgB,gBAAgB;;;EAQ/B;AAED,UAAU,eAAe;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAiBD,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAkCjB"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Merge } from '../utils';
|
|
2
|
+
import { WithInputAttributesProps } from './contexts';
|
|
2
3
|
export interface SelectInputOptionItem<T = string> {
|
|
3
4
|
type: 'option';
|
|
4
5
|
value: T;
|
|
@@ -41,6 +42,7 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
|
|
|
41
42
|
disabled?: boolean;
|
|
42
43
|
size?: 'sm' | 'md' | 'lg';
|
|
43
44
|
className?: string;
|
|
45
|
+
UNSAFE_triggerButtonProps?: WithInputAttributesProps['inputAttributes'];
|
|
44
46
|
onFilterChange?: (args: {
|
|
45
47
|
query: string;
|
|
46
48
|
queryNormalized: string | null;
|
|
@@ -49,7 +51,7 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
|
|
|
49
51
|
onClose?: () => void;
|
|
50
52
|
onClear?: () => void;
|
|
51
53
|
}
|
|
52
|
-
export declare function SelectInput<T = string, M extends boolean = false>({ id: idProp, name, multiple, placeholder, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, disabled, size, className, onFilterChange, onChange, onClose, onClear, }: SelectInputProps<T, M>): import("react").JSX.Element;
|
|
54
|
+
export declare function SelectInput<T = string, M extends boolean = false>({ id: idProp, name, multiple, placeholder, items, defaultValue, value: controlledValue, compareValues, renderValue, renderFooter, renderTrigger, filterable, filterPlaceholder, disabled, size, className, UNSAFE_triggerButtonProps, onFilterChange, onChange, onClose, onClear, }: SelectInputProps<T, M>): import("react").JSX.Element;
|
|
53
55
|
type SelectInputTriggerButtonElementType = 'button' | React.ComponentType;
|
|
54
56
|
export type SelectInputTriggerButtonProps<T extends SelectInputTriggerButtonElementType = 'button'> = Merge<React.ComponentPropsWithoutRef<T>, {
|
|
55
57
|
as?: T;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../src/inputs/SelectInput.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.
|
|
3
|
+
"version": "46.43.0",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -93,8 +93,8 @@
|
|
|
93
93
|
"rollup": "^4.17.2",
|
|
94
94
|
"storybook": "^8.1.10",
|
|
95
95
|
"@transferwise/less-config": "3.1.0",
|
|
96
|
-
"@
|
|
97
|
-
"@
|
|
96
|
+
"@wise/components-theming": "1.3.0",
|
|
97
|
+
"@transferwise/neptune-css": "14.12.0"
|
|
98
98
|
},
|
|
99
99
|
"peerDependencies": {
|
|
100
100
|
"@transferwise/icons": "^3.7.0",
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { Search } from '@transferwise/icons';
|
|
2
|
+
|
|
3
|
+
import { Field } from '../field/Field';
|
|
4
|
+
import { mockResizeObserver, render, screen } from '../test-utils';
|
|
5
|
+
import { Input } from './Input';
|
|
6
|
+
import { InputGroup } from './InputGroup';
|
|
7
|
+
|
|
8
|
+
mockResizeObserver();
|
|
9
|
+
|
|
10
|
+
describe('InputGroup', () => {
|
|
11
|
+
it('supports `Field` for labeling', () => {
|
|
12
|
+
render(
|
|
13
|
+
<Field label="Search…">
|
|
14
|
+
<InputGroup
|
|
15
|
+
addonStart={{
|
|
16
|
+
content: <Search size={24} />,
|
|
17
|
+
initialContentWidth: 24,
|
|
18
|
+
}}
|
|
19
|
+
>
|
|
20
|
+
<Input />
|
|
21
|
+
</InputGroup>
|
|
22
|
+
</Field>,
|
|
23
|
+
);
|
|
24
|
+
expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Search…/);
|
|
25
|
+
});
|
|
26
|
+
});
|
|
@@ -3,6 +3,13 @@ import { createContext, useContext, useMemo, useRef, useState } from 'react';
|
|
|
3
3
|
|
|
4
4
|
import { useResizeObserver } from '../common/hooks/useResizeObserver';
|
|
5
5
|
import { cssValueWithUnit } from '../utilities/cssValueWithUnit';
|
|
6
|
+
import {
|
|
7
|
+
FieldLabelIdContextProvider,
|
|
8
|
+
InputDescribedByProvider,
|
|
9
|
+
InputIdContextProvider,
|
|
10
|
+
InputInvalidProvider,
|
|
11
|
+
useInputAttributes,
|
|
12
|
+
} from './contexts';
|
|
6
13
|
|
|
7
14
|
type InputPaddingContextType = [
|
|
8
15
|
number | string | undefined,
|
|
@@ -60,23 +67,38 @@ export function InputGroup({
|
|
|
60
67
|
className,
|
|
61
68
|
children,
|
|
62
69
|
}: InputGroupProps) {
|
|
70
|
+
const inputAttributes = useInputAttributes({ nonLabelable: true });
|
|
71
|
+
|
|
63
72
|
const [paddingStart, setPaddingStart] = useState(inputPaddingInitialState(addonStart));
|
|
64
73
|
const [paddingEnd, setPaddingEnd] = useState(inputPaddingInitialState(addonEnd));
|
|
65
74
|
|
|
66
75
|
return (
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
76
|
+
/* Prevent nested controls from being labeled redundantly */
|
|
77
|
+
<FieldLabelIdContextProvider value={undefined}>
|
|
78
|
+
<InputIdContextProvider value={undefined}>
|
|
79
|
+
<InputDescribedByProvider value={undefined}>
|
|
80
|
+
<InputInvalidProvider value={undefined}>
|
|
81
|
+
<InputPaddingStartContext.Provider
|
|
82
|
+
value={useMemo(() => [paddingStart, setPaddingStart], [paddingStart])}
|
|
83
|
+
>
|
|
84
|
+
<InputPaddingEndContext.Provider
|
|
85
|
+
value={useMemo(() => [paddingEnd, setPaddingEnd], [paddingEnd])}
|
|
86
|
+
>
|
|
87
|
+
<fieldset
|
|
88
|
+
{...inputAttributes}
|
|
89
|
+
disabled={disabled}
|
|
90
|
+
className={classNames(className, 'np-input-group')}
|
|
91
|
+
>
|
|
92
|
+
{addonStart != null ? <InputAddon placement="start" {...addonStart} /> : null}
|
|
93
|
+
{children}
|
|
94
|
+
{addonEnd != null ? <InputAddon placement="end" {...addonEnd} /> : null}
|
|
95
|
+
</fieldset>
|
|
96
|
+
</InputPaddingEndContext.Provider>
|
|
97
|
+
</InputPaddingStartContext.Provider>
|
|
98
|
+
</InputInvalidProvider>
|
|
99
|
+
</InputDescribedByProvider>
|
|
100
|
+
</InputIdContextProvider>
|
|
101
|
+
</FieldLabelIdContextProvider>
|
|
80
102
|
);
|
|
81
103
|
}
|
|
82
104
|
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Field } from '../field/Field';
|
|
2
|
+
import { mockResizeObserver, render, screen } from '../test-utils';
|
|
3
|
+
import { SearchInput } from './SearchInput';
|
|
4
|
+
|
|
5
|
+
mockResizeObserver();
|
|
6
|
+
|
|
7
|
+
describe('SearchInput', () => {
|
|
8
|
+
it('supports `Field` for labeling', () => {
|
|
9
|
+
render(
|
|
10
|
+
<Field label="Search…">
|
|
11
|
+
<SearchInput />
|
|
12
|
+
</Field>,
|
|
13
|
+
);
|
|
14
|
+
expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Search…/);
|
|
15
|
+
});
|
|
16
|
+
});
|
|
@@ -214,6 +214,6 @@ describe('SelectInput', () => {
|
|
|
214
214
|
<SelectInput items={[{ type: 'option', value: 'USD' }]} value="USD" />
|
|
215
215
|
</Field>,
|
|
216
216
|
);
|
|
217
|
-
expect(screen.
|
|
217
|
+
expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Currency/);
|
|
218
218
|
});
|
|
219
219
|
});
|
|
@@ -24,7 +24,7 @@ import { Merge } from '../utils';
|
|
|
24
24
|
import { BottomSheet } from './_BottomSheet';
|
|
25
25
|
import { ButtonInput } from './_ButtonInput';
|
|
26
26
|
import { Popover } from './_Popover';
|
|
27
|
-
import { useInputAttributes } from './contexts';
|
|
27
|
+
import { useInputAttributes, WithInputAttributesProps } from './contexts';
|
|
28
28
|
import { InputGroup } from './InputGroup';
|
|
29
29
|
import { SearchInput } from './SearchInput';
|
|
30
30
|
import messages from './SelectInput.messages';
|
|
@@ -162,6 +162,7 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
|
|
|
162
162
|
disabled?: boolean;
|
|
163
163
|
size?: 'sm' | 'md' | 'lg';
|
|
164
164
|
className?: string;
|
|
165
|
+
UNSAFE_triggerButtonProps?: WithInputAttributesProps['inputAttributes'];
|
|
165
166
|
onFilterChange?: (args: { query: string; queryNormalized: string | null }) => void;
|
|
166
167
|
onChange?: (value: M extends true ? T[] : T) => void;
|
|
167
168
|
onClose?: () => void;
|
|
@@ -246,6 +247,7 @@ export function SelectInput<T = string, M extends boolean = false>({
|
|
|
246
247
|
disabled,
|
|
247
248
|
size = 'md',
|
|
248
249
|
className,
|
|
250
|
+
UNSAFE_triggerButtonProps,
|
|
249
251
|
onFilterChange = noop,
|
|
250
252
|
onChange,
|
|
251
253
|
onClose,
|
|
@@ -321,6 +323,7 @@ export function SelectInput<T = string, M extends boolean = false>({
|
|
|
321
323
|
triggerRef.current = node;
|
|
322
324
|
},
|
|
323
325
|
...inputAttributes,
|
|
326
|
+
...UNSAFE_triggerButtonProps,
|
|
324
327
|
id,
|
|
325
328
|
...mergeProps(
|
|
326
329
|
{
|