-
Notifications
You must be signed in to change notification settings - Fork 4k
/
types.ts
124 lines (116 loc) · 2.65 KB
/
types.ts
1
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
43
44
45
46
47
48
49
50
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
/**
* External dependencies
*/
import type { CSSProperties, ReactNode } from 'react';
/**
* Internal dependencies
*/
import type { DropdownProps } from '../dropdown/types';
import type { HeadingSize } from '../heading/types';
export type ColorObject = {
name: string;
color: NonNullable< CSSProperties[ 'color' ] >;
};
export type PaletteObject = {
name: string;
colors: ColorObject[];
};
type PaletteProps = {
className?: string;
clearColor: () => void;
/**
* Callback called when a color is selected.
*/
onChange: ( newColor?: string, index?: number ) => void;
value?: string;
actions?: ReactNode;
headingLevel?: HeadingSize;
};
export type SinglePaletteProps = PaletteProps & {
colors: ColorObject[];
};
export type MultiplePalettesProps = PaletteProps & {
colors: PaletteObject[];
};
export type CustomColorPickerDropdownProps = DropdownProps & {
isRenderedInSidebar: boolean;
};
export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {
/**
* Whether the palette should have a clearing button.
*
* @default true
*/
clearable?: boolean;
/**
* Array with the colors to be shown. When displaying multiple color palettes
* to choose from, the format of the array changes from an array of colors
* objects, to an array of color palettes.
*
* @default []
*/
colors?: PaletteObject[] | ColorObject[];
/**
* Whether to allow the user to pick a custom color on top of the predefined
* choices (defined via the `colors` prop).
*
* @default false
*/
disableCustomColors?: boolean;
/**
* This controls whether the alpha channel will be offered when selecting
* custom colors.
*
* @default false
*/
enableAlpha?: boolean;
/**
* The heading level.
*
* @default 2
*/
headingLevel?: HeadingSize;
/**
* Currently active value.
*/
value?: string;
/**
* Whether the control should present as a set of buttons,
* each with its own tab stop.
*
* @default false
*/
asButtons?: boolean;
/**
* Prevents keyboard interaction from wrapping around.
* Only used when `asButtons` is not true.
*
* @default true
*/
loop?: boolean;
/**
* Whether this is rendered in the sidebar.
*
* @default false
*/
__experimentalIsRenderedInSidebar?: boolean;
} & (
| {
/**
* A label to identify the purpose of the control.
*
* @todo [#54055] Either this or `aria-labelledby` should be required
*/
'aria-label'?: string;
'aria-labelledby'?: never;
}
| {
/**
* An ID of an element to provide a label for the control.
*
* @todo [#54055] Either this or `aria-label` should be required
*/
'aria-labelledby'?: string;
'aria-label'?: never;
}
);