@zendeskgarden/react-colorpickers 8.69.1 → 8.69.3

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.
Files changed (38) hide show
  1. package/dist/index.cjs.js +22 -22
  2. package/dist/index.esm.js +22 -22
  3. package/dist/typings/elements/ColorSwatch/index.d.ts +12 -12
  4. package/dist/typings/elements/ColorSwatchDialog/index.d.ts +12 -12
  5. package/dist/typings/elements/Colorpicker/ColorWell.d.ts +16 -16
  6. package/dist/typings/elements/Colorpicker/index.d.ts +12 -12
  7. package/dist/typings/elements/Colorpicker/reducer.d.ts +48 -48
  8. package/dist/typings/elements/ColorpickerDialog/index.d.ts +12 -12
  9. package/dist/typings/index.d.ts +11 -11
  10. package/dist/typings/styled/ColorSwatch/StyledCell.d.ts +10 -10
  11. package/dist/typings/styled/ColorSwatch/StyledColorSwatch.d.ts +14 -14
  12. package/dist/typings/styled/ColorSwatch/StyledIcon.d.ts +12 -12
  13. package/dist/typings/styled/ColorSwatch/StyledSwatchButton.d.ts +8 -8
  14. package/dist/typings/styled/Colorpicker/StyledAlphaRange.d.ts +9 -9
  15. package/dist/typings/styled/Colorpicker/StyledColorPicker.d.ts +15 -15
  16. package/dist/typings/styled/Colorpicker/StyledColorWell.d.ts +12 -12
  17. package/dist/typings/styled/Colorpicker/StyledColorWellThumb.d.ts +13 -13
  18. package/dist/typings/styled/Colorpicker/StyledHexField.d.ts +14 -14
  19. package/dist/typings/styled/Colorpicker/StyledHueRange.d.ts +11 -11
  20. package/dist/typings/styled/Colorpicker/StyledInput.d.ts +11 -11
  21. package/dist/typings/styled/Colorpicker/StyledInputGroup.d.ts +10 -10
  22. package/dist/typings/styled/Colorpicker/StyledLabel.d.ts +10 -10
  23. package/dist/typings/styled/Colorpicker/StyledPreview.d.ts +13 -13
  24. package/dist/typings/styled/Colorpicker/StyledRGBAField.d.ts +11 -11
  25. package/dist/typings/styled/Colorpicker/StyledSliderGroup.d.ts +10 -10
  26. package/dist/typings/styled/Colorpicker/StyledSliders.d.ts +14 -14
  27. package/dist/typings/styled/ColorpickerDialog/StyledButton.d.ts +15 -15
  28. package/dist/typings/styled/ColorpickerDialog/StyledButtonPreview.d.ts +12 -12
  29. package/dist/typings/styled/ColorpickerDialog/StyledTooltipBody.d.ts +10 -10
  30. package/dist/typings/styled/ColorpickerDialog/StyledTooltipModal.d.ts +13 -13
  31. package/dist/typings/styled/common/StyledRange.d.ts +18 -18
  32. package/dist/typings/styled/common/checkeredBackground.d.ts +8 -8
  33. package/dist/typings/styled/index.d.ts +27 -27
  34. package/dist/typings/types/index.d.ts +176 -176
  35. package/dist/typings/utils/conversion.d.ts +16 -16
  36. package/dist/typings/utils/saturation.d.ts +13 -13
  37. package/dist/typings/utils/validation.d.ts +7 -7
  38. package/package.json +7 -7
@@ -1,176 +1,176 @@
1
- /**
2
- * Copyright Zendesk, Inc.
3
- *
4
- * Use of this source code is governed under the Apache License, Version 2.0
5
- * found at http://www.apache.org/licenses/LICENSE-2.0.
6
- */
7
- import { HTMLAttributes } from 'react';
8
- import { ITooltipModalProps } from '@zendeskgarden/react-modals';
9
- export interface IColor {
10
- hex: string;
11
- hue: number;
12
- saturation: number;
13
- lightness: number;
14
- red: number;
15
- green: number;
16
- blue: number;
17
- alpha: number;
18
- }
19
- export interface IHSVColor {
20
- h: number;
21
- s: number;
22
- v: number;
23
- }
24
- export interface IHSLColor {
25
- h: number;
26
- s: number;
27
- l: number;
28
- a?: number;
29
- }
30
- export interface IRGBColor {
31
- red: number;
32
- green: number;
33
- blue: number;
34
- alpha?: number;
35
- }
36
- export interface IColorpickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'> {
37
- /** Sets the color for an uncontrolled color picker */
38
- defaultColor?: string | IColor;
39
- /** Sets the color for a controlled color picker */
40
- color?: string | IColor;
41
- /** Hides alpha transparency fields */
42
- isOpaque?: boolean;
43
- /**
44
- * Handles color picker changes
45
- *
46
- * @param {Object} color A color picker state
47
- */
48
- onChange?: (color: IColor) => void;
49
- /** Replaces label text within the color picker */
50
- labels?: {
51
- hueSlider?: string;
52
- alphaSlider?: string;
53
- hex?: string;
54
- red?: string;
55
- green?: string;
56
- blue?: string;
57
- alpha?: string;
58
- };
59
- /** @ignore */
60
- autofocus?: boolean;
61
- }
62
- export interface IColorpickerDialogProps extends IColorpickerProps {
63
- /**
64
- * Handles close actions. Can be triggered from the backdrop.
65
- *
66
- * @param {Object} color A color picker state
67
- */
68
- onClose?: (color: IColor) => void;
69
- /** Adjusts the placement of the color dialog */
70
- placement?: ITooltipModalProps['placement'];
71
- /** Disables the color dialog button */
72
- disabled?: boolean;
73
- /**
74
- * Modifies [Popper instance](https://popper.js.org/docs/v2/modifiers/) to customize positioning logic
75
- */
76
- popperModifiers?: ITooltipModalProps['popperModifiers'];
77
- /**
78
- * Sets the `z-index` of the color dialog
79
- */
80
- zIndex?: ITooltipModalProps['zIndex'];
81
- /**
82
- * Adds an arrow to the color dialog
83
- */
84
- hasArrow?: ITooltipModalProps['hasArrow'];
85
- /**
86
- * Animates the color dialog
87
- */
88
- isAnimated?: ITooltipModalProps['isAnimated'];
89
- /**
90
- * Opens the dialog in a controlled color picker dialog
91
- */
92
- isOpen?: boolean;
93
- /**
94
- * Applies inset `box-shadow` styling on focus
95
- */
96
- focusInset?: boolean;
97
- /**
98
- * Passes HTML attributes to the color dialog button element
99
- */
100
- buttonProps?: HTMLAttributes<HTMLButtonElement>;
101
- /**
102
- * Handles dialog changes
103
- *
104
- * @param {Object} changes The changed dialog state
105
- */
106
- onDialogChange?: (changes: {
107
- isOpen: boolean;
108
- }) => void;
109
- }
110
- export interface ILabeledColor {
111
- value: string;
112
- label: string;
113
- }
114
- export interface IColorSwatchProps extends Omit<HTMLAttributes<HTMLTableElement>, 'onChange' | 'onSelect'> {
115
- /** Sets the two-dimension array of labeled HEX and RGB/A string colors */
116
- colors: {
117
- value: string;
118
- label: string;
119
- }[][];
120
- /** Sets the focused row index in a controlled color swatch */
121
- rowIndex?: number;
122
- /** Sets the focused column index in a controlled color swatch.
123
- * Can be set to `-1` to clear the row focus.
124
- */
125
- colIndex?: number;
126
- /** Sets the selected row index in a controlled color swatch.
127
- * Can be set to `-1` to clear the column focus.
128
- */
129
- selectedRowIndex?: number;
130
- /** Sets the selected column index in a controlled color swatch.
131
- * Can be set to `-1` to clear the row selection.
132
- */
133
- selectedColIndex?: number;
134
- /** Sets the default focused row index in an uncontrolled color swatch.
135
- * Can be set to `-1` to clear the column selection.
136
- */
137
- defaultRowIndex?: number;
138
- /** Sets the default focused column index in an uncontrolled color swatch */
139
- defaultColIndex?: number;
140
- /** Sets the default selected row index in an uncontrolled color swatch */
141
- defaultSelectedRowIndex?: number;
142
- /** Sets the default selected column index in an uncontrolled color swatch */
143
- defaultSelectedColIndex?: number;
144
- /** Handles color swatch changes */
145
- onChange?: (rowIndex: number, colIndex: number) => void;
146
- /** Handles color swatch select event */
147
- onSelect?: (rowIndex: number, colIndex: number) => void;
148
- }
149
- export interface IColorSwatchDialogProps extends IColorSwatchProps {
150
- /** Adjusts the placement of the color dialog */
151
- placement?: ITooltipModalProps['placement'];
152
- /** Disables the color dialog button */
153
- disabled?: boolean;
154
- /** Modifies [Popper instance](https://popper.js.org/docs/v2/modifiers/) to customize positioning logic */
155
- popperModifiers?: ITooltipModalProps['popperModifiers'];
156
- /** Sets the `z-index` of the color dialog */
157
- zIndex?: ITooltipModalProps['zIndex'];
158
- /** Adds an arrow to the color dialog */
159
- hasArrow?: ITooltipModalProps['hasArrow'];
160
- /** Animates the color dialog */
161
- isAnimated?: ITooltipModalProps['isAnimated'];
162
- /** Applies inset `box-shadow` styling on focus */
163
- focusInset?: boolean;
164
- /** Passes HTML attributes to the color dialog button element */
165
- buttonProps?: HTMLAttributes<HTMLButtonElement>;
166
- /** Opens the dialog in a controlled color swatch dialog */
167
- isOpen?: boolean;
168
- /**
169
- * Handles dialog changes
170
- *
171
- * @param {Object} changes The changed dialog state
172
- */
173
- onDialogChange?: (changes: {
174
- isOpen: boolean;
175
- }) => void;
176
- }
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import { HTMLAttributes } from 'react';
8
+ import { ITooltipModalProps } from '@zendeskgarden/react-modals';
9
+ export interface IColor {
10
+ hex: string;
11
+ hue: number;
12
+ saturation: number;
13
+ lightness: number;
14
+ red: number;
15
+ green: number;
16
+ blue: number;
17
+ alpha: number;
18
+ }
19
+ export interface IHSVColor {
20
+ h: number;
21
+ s: number;
22
+ v: number;
23
+ }
24
+ export interface IHSLColor {
25
+ h: number;
26
+ s: number;
27
+ l: number;
28
+ a?: number;
29
+ }
30
+ export interface IRGBColor {
31
+ red: number;
32
+ green: number;
33
+ blue: number;
34
+ alpha?: number;
35
+ }
36
+ export interface IColorpickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'> {
37
+ /** Sets the color for an uncontrolled color picker */
38
+ defaultColor?: string | IColor;
39
+ /** Sets the color for a controlled color picker */
40
+ color?: string | IColor;
41
+ /** Hides alpha transparency fields */
42
+ isOpaque?: boolean;
43
+ /**
44
+ * Handles color picker changes
45
+ *
46
+ * @param {Object} color A color picker state
47
+ */
48
+ onChange?: (color: IColor) => void;
49
+ /** Replaces label text within the color picker */
50
+ labels?: {
51
+ hueSlider?: string;
52
+ alphaSlider?: string;
53
+ hex?: string;
54
+ red?: string;
55
+ green?: string;
56
+ blue?: string;
57
+ alpha?: string;
58
+ };
59
+ /** @ignore */
60
+ autofocus?: boolean;
61
+ }
62
+ export interface IColorpickerDialogProps extends IColorpickerProps {
63
+ /**
64
+ * Handles close actions. Can be triggered from the backdrop.
65
+ *
66
+ * @param {Object} color A color picker state
67
+ */
68
+ onClose?: (color: IColor) => void;
69
+ /** Adjusts the placement of the color dialog */
70
+ placement?: ITooltipModalProps['placement'];
71
+ /** Disables the color dialog button */
72
+ disabled?: boolean;
73
+ /**
74
+ * Modifies [Popper instance](https://popper.js.org/docs/v2/modifiers/) to customize positioning logic
75
+ */
76
+ popperModifiers?: ITooltipModalProps['popperModifiers'];
77
+ /**
78
+ * Sets the `z-index` of the color dialog
79
+ */
80
+ zIndex?: ITooltipModalProps['zIndex'];
81
+ /**
82
+ * Adds an arrow to the color dialog
83
+ */
84
+ hasArrow?: ITooltipModalProps['hasArrow'];
85
+ /**
86
+ * Animates the color dialog
87
+ */
88
+ isAnimated?: ITooltipModalProps['isAnimated'];
89
+ /**
90
+ * Opens the dialog in a controlled color picker dialog
91
+ */
92
+ isOpen?: boolean;
93
+ /**
94
+ * Applies inset `box-shadow` styling on focus
95
+ */
96
+ focusInset?: boolean;
97
+ /**
98
+ * Passes HTML attributes to the color dialog button element
99
+ */
100
+ buttonProps?: HTMLAttributes<HTMLButtonElement>;
101
+ /**
102
+ * Handles dialog changes
103
+ *
104
+ * @param {Object} changes The changed dialog state
105
+ */
106
+ onDialogChange?: (changes: {
107
+ isOpen: boolean;
108
+ }) => void;
109
+ }
110
+ export interface ILabeledColor {
111
+ value: string;
112
+ label: string;
113
+ }
114
+ export interface IColorSwatchProps extends Omit<HTMLAttributes<HTMLTableElement>, 'onChange' | 'onSelect'> {
115
+ /** Sets the two-dimension array of labeled HEX and RGB/A string colors */
116
+ colors: {
117
+ value: string;
118
+ label: string;
119
+ }[][];
120
+ /** Sets the focused row index in a controlled color swatch */
121
+ rowIndex?: number;
122
+ /** Sets the focused column index in a controlled color swatch.
123
+ * Can be set to `-1` to clear the row focus.
124
+ */
125
+ colIndex?: number;
126
+ /** Sets the selected row index in a controlled color swatch.
127
+ * Can be set to `-1` to clear the column focus.
128
+ */
129
+ selectedRowIndex?: number;
130
+ /** Sets the selected column index in a controlled color swatch.
131
+ * Can be set to `-1` to clear the row selection.
132
+ */
133
+ selectedColIndex?: number;
134
+ /** Sets the default focused row index in an uncontrolled color swatch.
135
+ * Can be set to `-1` to clear the column selection.
136
+ */
137
+ defaultRowIndex?: number;
138
+ /** Sets the default focused column index in an uncontrolled color swatch */
139
+ defaultColIndex?: number;
140
+ /** Sets the default selected row index in an uncontrolled color swatch */
141
+ defaultSelectedRowIndex?: number;
142
+ /** Sets the default selected column index in an uncontrolled color swatch */
143
+ defaultSelectedColIndex?: number;
144
+ /** Handles color swatch changes */
145
+ onChange?: (rowIndex: number, colIndex: number) => void;
146
+ /** Handles color swatch select event */
147
+ onSelect?: (rowIndex: number, colIndex: number) => void;
148
+ }
149
+ export interface IColorSwatchDialogProps extends IColorSwatchProps {
150
+ /** Adjusts the placement of the color dialog */
151
+ placement?: ITooltipModalProps['placement'];
152
+ /** Disables the color dialog button */
153
+ disabled?: boolean;
154
+ /** Modifies [Popper instance](https://popper.js.org/docs/v2/modifiers/) to customize positioning logic */
155
+ popperModifiers?: ITooltipModalProps['popperModifiers'];
156
+ /** Sets the `z-index` of the color dialog */
157
+ zIndex?: ITooltipModalProps['zIndex'];
158
+ /** Adds an arrow to the color dialog */
159
+ hasArrow?: ITooltipModalProps['hasArrow'];
160
+ /** Animates the color dialog */
161
+ isAnimated?: ITooltipModalProps['isAnimated'];
162
+ /** Applies inset `box-shadow` styling on focus */
163
+ focusInset?: boolean;
164
+ /** Passes HTML attributes to the color dialog button element */
165
+ buttonProps?: HTMLAttributes<HTMLButtonElement>;
166
+ /** Opens the dialog in a controlled color swatch dialog */
167
+ isOpen?: boolean;
168
+ /**
169
+ * Handles dialog changes
170
+ *
171
+ * @param {Object} changes The changed dialog state
172
+ */
173
+ onDialogChange?: (changes: {
174
+ isOpen: boolean;
175
+ }) => void;
176
+ }
@@ -1,16 +1,16 @@
1
- /**
2
- * Copyright Zendesk, Inc.
3
- *
4
- * Use of this source code is governed under the Apache License, Version 2.0
5
- * found at http://www.apache.org/licenses/LICENSE-2.0.
6
- */
7
- export declare function hslToHsv(h: number, s: number, l: number): {
8
- h: number;
9
- s: number;
10
- v: number;
11
- };
12
- export declare function hsvToHsl(h: number, s: number, v: number): {
13
- h: number;
14
- s: number;
15
- l: number;
16
- };
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ export declare function hslToHsv(h: number, s: number, l: number): {
8
+ h: number;
9
+ s: number;
10
+ v: number;
11
+ };
12
+ export declare function hsvToHsl(h: number, s: number, v: number): {
13
+ h: number;
14
+ s: number;
15
+ l: number;
16
+ };
@@ -1,13 +1,13 @@
1
- /**
2
- * Copyright Zendesk, Inc.
3
- *
4
- * Use of this source code is governed under the Apache License, Version 2.0
5
- * found at http://www.apache.org/licenses/LICENSE-2.0.
6
- */
7
- import { IHSVColor } from '../types';
8
- export declare function limit(value: number, max: number, min?: number): number;
9
- export declare function getNextHsv(e: MouseEvent, hue: number, container: HTMLDivElement, rtl: boolean): IHSVColor;
10
- export declare const getThumbPosition: (x: number, y: number, rtl: boolean, container: React.RefObject<HTMLDivElement>) => {
11
- topFromMouse: number;
12
- leftFromMouse: number;
13
- };
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import { IHSVColor } from '../types';
8
+ export declare function limit(value: number, max: number, min?: number): number;
9
+ export declare function getNextHsv(e: MouseEvent, hue: number, container: HTMLDivElement, rtl: boolean): IHSVColor;
10
+ export declare const getThumbPosition: (x: number, y: number, rtl: boolean, container: React.RefObject<HTMLDivElement>) => {
11
+ topFromMouse: number;
12
+ leftFromMouse: number;
13
+ };
@@ -1,7 +1,7 @@
1
- /**
2
- * Copyright Zendesk, Inc.
3
- *
4
- * Use of this source code is governed under the Apache License, Version 2.0
5
- * found at http://www.apache.org/licenses/LICENSE-2.0.
6
- */
7
- export declare const isValidHex: (hexString: string) => boolean;
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ export declare const isValidHex: (hexString: string) => boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-colorpickers",
3
- "version": "8.69.1",
3
+ "version": "8.69.3",
4
4
  "description": "Components related to color pickers in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,10 +23,10 @@
23
23
  "dependencies": {
24
24
  "@zendeskgarden/container-grid": "^0.1.1",
25
25
  "@zendeskgarden/container-utilities": "^1.0.0",
26
- "@zendeskgarden/react-buttons": "^8.69.1",
27
- "@zendeskgarden/react-forms": "^8.69.1",
28
- "@zendeskgarden/react-modals": "^8.69.1",
29
- "@zendeskgarden/react-tooltips": "^8.69.1",
26
+ "@zendeskgarden/react-buttons": "^8.69.3",
27
+ "@zendeskgarden/react-forms": "^8.69.3",
28
+ "@zendeskgarden/react-modals": "^8.69.3",
29
+ "@zendeskgarden/react-tooltips": "^8.69.3",
30
30
  "lodash.isequal": "^4.5.0",
31
31
  "lodash.throttle": "^4.1.1",
32
32
  "polished": "^4.0.0",
@@ -41,7 +41,7 @@
41
41
  "devDependencies": {
42
42
  "@types/lodash.isequal": "4.5.6",
43
43
  "@types/lodash.throttle": "4.1.7",
44
- "@zendeskgarden/react-theming": "^8.69.1",
44
+ "@zendeskgarden/react-theming": "^8.69.3",
45
45
  "@zendeskgarden/svg-icons": "6.33.0"
46
46
  },
47
47
  "keywords": [
@@ -55,5 +55,5 @@
55
55
  "access": "public"
56
56
  },
57
57
  "zendeskgarden:src": "src/index.ts",
58
- "gitHead": "ab010f00c7f957856d49b9507543dbb6e07e3228"
58
+ "gitHead": "c861fbeb70120b66b05d2ce3a26ccf3047659aa0"
59
59
  }