@transferwise/components 0.0.0-experimental-4aed95c → 0.0.0-experimental-c95da69
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 +2 -0
- package/build/index.js.map +1 -1
- package/build/index.mjs +2 -0
- package/build/index.mjs.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/circularButton/CircularButton.story.tsx +53 -84
- package/src/inputs/SelectInput.tsx +4 -1
|
@@ -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": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-c95da69",
|
|
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",
|
|
@@ -1,97 +1,66 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { boolean, select, text } from '@storybook/addon-knobs';
|
|
3
|
-
import { Freeze, Plus, Whatsapp } from '@transferwise/icons';
|
|
1
|
+
import * as Icons from '@transferwise/icons';
|
|
4
2
|
|
|
5
|
-
import {
|
|
3
|
+
import { ControlType, Priority } from '../common';
|
|
6
4
|
|
|
5
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
7
6
|
import CircularButton from './CircularButton';
|
|
8
7
|
|
|
9
8
|
export default {
|
|
10
9
|
component: CircularButton,
|
|
11
10
|
title: 'Actions/CircularButton',
|
|
12
|
-
|
|
11
|
+
args: {
|
|
12
|
+
children: 'Button text',
|
|
13
|
+
// Needs to be cast because we're mapping icon names to components
|
|
14
|
+
icon: 'Freeze' as unknown as React.ReactElement,
|
|
15
|
+
},
|
|
16
|
+
argTypes: {
|
|
17
|
+
icon: {
|
|
18
|
+
options: Object.keys(Icons),
|
|
19
|
+
mapping: Object.fromEntries(
|
|
20
|
+
Object.entries(Icons).map(([name, Icon]) => [name, <Icon key={name} />]),
|
|
21
|
+
),
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
} satisfies Meta<typeof CircularButton>;
|
|
13
25
|
|
|
14
|
-
|
|
15
|
-
plus: <Plus />,
|
|
16
|
-
freeze: <Freeze />,
|
|
17
|
-
whatsapp: <Whatsapp />,
|
|
18
|
-
};
|
|
26
|
+
type Story = StoryObj<typeof CircularButton>;
|
|
19
27
|
|
|
20
|
-
export const Basic =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const background = select('theme', ['light', 'blue'], 'light');
|
|
27
|
-
return (
|
|
28
|
-
<div className={background === 'blue' ? 'bg--dark p-a-3' : ''}>
|
|
29
|
-
<CircularButton
|
|
30
|
-
icon={icons[icon]}
|
|
31
|
-
priority={priority}
|
|
32
|
-
type={type}
|
|
33
|
-
disabled={disabled}
|
|
34
|
-
onClick={action('Button Clicked')}
|
|
35
|
-
>
|
|
36
|
-
{label}
|
|
37
|
-
</CircularButton>
|
|
38
|
-
</div>
|
|
39
|
-
);
|
|
28
|
+
export const Basic: Story = {
|
|
29
|
+
args: {
|
|
30
|
+
priority: Priority.PRIMARY,
|
|
31
|
+
type: ControlType.ACCENT,
|
|
32
|
+
disabled: false,
|
|
33
|
+
},
|
|
40
34
|
};
|
|
41
35
|
|
|
42
|
-
export const
|
|
43
|
-
|
|
44
|
-
const disabled = boolean('disabled', false);
|
|
45
|
-
const label = text('label', 'Button text');
|
|
46
|
-
const background = select('theme', ['light', 'blue'], 'light');
|
|
47
|
-
|
|
48
|
-
const commonProps = {
|
|
49
|
-
label,
|
|
36
|
+
export const All: Story = {
|
|
37
|
+
args: {
|
|
50
38
|
className: 'm-r-2',
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
<
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
<div className="title-4 m-b-1">Negative</div>
|
|
79
|
-
<CircularButton priority={Priority.PRIMARY} type={ControlType.NEGATIVE} {...commonProps}>
|
|
80
|
-
{label}
|
|
81
|
-
</CircularButton>
|
|
82
|
-
<CircularButton priority={Priority.SECONDARY} type={ControlType.NEGATIVE} {...commonProps}>
|
|
83
|
-
{label}
|
|
84
|
-
</CircularButton>
|
|
85
|
-
</div>
|
|
86
|
-
<div className="m-b-2">
|
|
87
|
-
<div className="title-4 m-b-1">Disabled</div>
|
|
88
|
-
<CircularButton {...commonProps} disabled>
|
|
89
|
-
{label}
|
|
90
|
-
</CircularButton>
|
|
91
|
-
<CircularButton {...commonProps} priority={Priority.SECONDARY} disabled>
|
|
92
|
-
{label}
|
|
93
|
-
</CircularButton>
|
|
94
|
-
</div>
|
|
95
|
-
</div>
|
|
96
|
-
);
|
|
39
|
+
},
|
|
40
|
+
render: (props) => {
|
|
41
|
+
return (
|
|
42
|
+
<>
|
|
43
|
+
<div className="m-b-2">
|
|
44
|
+
<div className="title-4 m-b-1">Accent</div>
|
|
45
|
+
<CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.ACCENT} />
|
|
46
|
+
<CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.ACCENT} />
|
|
47
|
+
</div>
|
|
48
|
+
<div className="m-b-2">
|
|
49
|
+
<div className="title-4 m-b-1">Positive</div>
|
|
50
|
+
<CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.POSITIVE} />
|
|
51
|
+
<CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.POSITIVE} />
|
|
52
|
+
</div>
|
|
53
|
+
<div className="m-b-2">
|
|
54
|
+
<div className="title-4 m-b-1">Negative</div>
|
|
55
|
+
<CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
|
|
56
|
+
<CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
|
|
57
|
+
</div>
|
|
58
|
+
<div className="m-b-2">
|
|
59
|
+
<div className="title-4 m-b-1">Disabled</div>
|
|
60
|
+
<CircularButton {...props} disabled />
|
|
61
|
+
<CircularButton {...props} priority={Priority.SECONDARY} disabled />
|
|
62
|
+
</div>
|
|
63
|
+
</>
|
|
64
|
+
);
|
|
65
|
+
},
|
|
97
66
|
};
|
|
@@ -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
|
{
|