@synerise/ds-color-picker 1.3.25 → 1.3.27
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/CHANGELOG.md +8 -0
- package/README.md +5 -5
- package/dist/ColorPicker.d.ts +2 -2
- package/dist/ColorPicker.js +108 -175
- package/dist/ColorPicker.styles.d.ts +80 -80
- package/dist/ColorPicker.styles.js +59 -68
- package/dist/ColorPicker.types.d.ts +3 -3
- package/dist/ColorPicker.types.js +9 -6
- package/dist/index.d.ts +1 -1
- package/dist/index.js +4 -1
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/dist/utils.js +22 -37
- package/package.json +16 -16
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.3.27](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.3.26...@synerise/ds-color-picker@1.3.27) (2026-03-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-color-picker
|
|
9
|
+
|
|
10
|
+
## [1.3.26](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.3.25...@synerise/ds-color-picker@1.3.26) (2026-03-20)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-color-picker
|
|
13
|
+
|
|
6
14
|
## [1.3.25](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.3.24...@synerise/ds-color-picker@1.3.25) (2026-03-09)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-color-picker
|
package/README.md
CHANGED
|
@@ -32,16 +32,16 @@ import ColorPicker from '@synerise/ds-color-picker'
|
|
|
32
32
|
|
|
33
33
|
| Property | Description | Type | Default |
|
|
34
34
|
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------- |
|
|
35
|
-
| maxWidth | Picker overlay max width
|
|
35
|
+
| maxWidth | Picker overlay max width. Only applied when value is >= 228. | number | - |
|
|
36
36
|
| value | picker value | string | - |
|
|
37
37
|
| onChange | value change handler | (color: string) => void | - |
|
|
38
|
-
| colors | Array of color swatches to render
|
|
38
|
+
| colors | Array of color swatches to render (initialises local state on mount) | string[] | [] |
|
|
39
39
|
| onSaveColors | change swatches handler | (colors: string[]) => void | - |
|
|
40
40
|
| infix | used for inlining implementation of other ways of selecting/showing color value (select with converting to other color notations) | (colorHooks?: Partial<ColorHookType>) => JSX.Element | - |
|
|
41
|
-
| maxSavedColors | max number of allowed swatches | number |
|
|
41
|
+
| maxSavedColors | max number of allowed swatches | number | 9 |
|
|
42
42
|
| tooltip | copy color tooltip text | { copy: string; copied: string; } | - |
|
|
43
43
|
| isShownSavedColors | controls rendering of swtches | boolean | - |
|
|
44
|
-
| size |
|
|
44
|
+
| size | height of the color picker panel (S=136px, M=168px, L=200px) | 'S' / 'M' / 'L' | 'M' |
|
|
45
45
|
| readOnly | renders readOnly styled input | boolean | - |
|
|
46
46
|
| disabled | renders disabled input | boolean | - |
|
|
47
47
|
| error | renders error styled input | boolean | - |
|
|
@@ -49,4 +49,4 @@ import ColorPicker from '@synerise/ds-color-picker'
|
|
|
49
49
|
| description | renders description below trigger | string | - |
|
|
50
50
|
| placeholder | Input placeholder text | string | - |
|
|
51
51
|
| getPopupContainer | function to find DOM node in which the overlay should be rendered | (triggerNode: HTMLElement) => HTMLElement | - |
|
|
52
|
-
| inputProps | subset of InputProps - see ds-input
|
|
52
|
+
| inputProps | subset of InputProps - see ds-input (value, onChange, placeholder, disabled, readOnly, prefix and FormFieldCommonProps are excluded) | Omit<InputProps, ...> | - |
|
package/dist/ColorPicker.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ColorPickerProps } from './ColorPicker.types';
|
|
3
3
|
declare const ColorPicker: ({ maxWidth, value, onChange, colors, onSaveColors, infix, getPopupContainer, placeholder, inputProps, maxSavedColors, isShownSavedColors, size, errorText, description, disabled, error, readOnly, tooltip, }: ColorPickerProps) => React.JSX.Element;
|
|
4
4
|
export default ColorPicker;
|
package/dist/ColorPicker.js
CHANGED
|
@@ -1,111 +1,92 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import { HexColorPicker
|
|
4
|
-
import Divider from
|
|
5
|
-
import Dropdown from
|
|
6
|
-
import Icon, { FormulaPlusM } from
|
|
7
|
-
import Tags, {
|
|
8
|
-
import Tooltip from
|
|
9
|
-
import {
|
|
10
|
-
import
|
|
11
|
-
import {
|
|
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
|
-
colorTextInput = _useState[0],
|
|
42
|
-
setColorTextInput = _useState[1];
|
|
43
|
-
var _useState2 = useState(value),
|
|
44
|
-
colorHexInput = _useState2[0],
|
|
45
|
-
setColorHexInput = _useState2[1];
|
|
46
|
-
var _useState3 = useState(value),
|
|
47
|
-
lastValidHexColor = _useState3[0],
|
|
48
|
-
setLastValidHexColor = _useState3[1];
|
|
49
|
-
var _useState4 = useState(-1),
|
|
50
|
-
pressed = _useState4[0],
|
|
51
|
-
setPressed = _useState4[1];
|
|
52
|
-
var _useState5 = useState(false),
|
|
53
|
-
dropdownVisible = _useState5[0],
|
|
54
|
-
setDropdownVisible = _useState5[1];
|
|
55
|
-
var _useState6 = useState(colors),
|
|
56
|
-
savedColors = _useState6[0],
|
|
57
|
-
setSavedColors = _useState6[1];
|
|
58
|
-
var setLocalValues = useCallback(function (colorValue) {
|
|
1
|
+
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useCallback, useEffect, useRef, useMemo } from "react";
|
|
3
|
+
import { HexColorPicker } from "react-colorful";
|
|
4
|
+
import Divider from "@synerise/ds-divider";
|
|
5
|
+
import Dropdown from "@synerise/ds-dropdown";
|
|
6
|
+
import Icon, { FormulaPlusM } from "@synerise/ds-icon";
|
|
7
|
+
import Tags, { TagShape, Tag } from "@synerise/ds-tags";
|
|
8
|
+
import Tooltip from "@synerise/ds-tooltip";
|
|
9
|
+
import { useOnClickOutside, getPopupContainer } from "@synerise/ds-utils";
|
|
10
|
+
import { SwatchSectionWrapper, AddColorButton, TagDot, Container, PrefixTag, SubContainer, ColorPickerInput, StyledCopyIcon, PreffixWrapper, ColorPickerSelect, ColorTag, ColorPickerModalStyle } from "./ColorPicker.styles.js";
|
|
11
|
+
import { isValidTextColor, standardizeColor, isValidHexColor, convert3DigitHexTo6Digit, filterAlphanumeric } from "./utils.js";
|
|
12
|
+
const DEFAULT_MAX_WIDTH_PICKER = 228;
|
|
13
|
+
const DEFAULT_COLOR = "#ffffff";
|
|
14
|
+
const ColorPicker = ({
|
|
15
|
+
maxWidth,
|
|
16
|
+
value,
|
|
17
|
+
onChange,
|
|
18
|
+
colors = [],
|
|
19
|
+
onSaveColors,
|
|
20
|
+
infix = () => /* @__PURE__ */ jsx(Fragment, {}),
|
|
21
|
+
getPopupContainer: getPopupContainer$1 = getPopupContainer,
|
|
22
|
+
placeholder,
|
|
23
|
+
inputProps,
|
|
24
|
+
maxSavedColors = 9,
|
|
25
|
+
isShownSavedColors,
|
|
26
|
+
size = "M",
|
|
27
|
+
errorText,
|
|
28
|
+
description,
|
|
29
|
+
disabled,
|
|
30
|
+
error,
|
|
31
|
+
readOnly,
|
|
32
|
+
tooltip
|
|
33
|
+
}) => {
|
|
34
|
+
const [colorTextInput, setColorTextInput] = useState(value);
|
|
35
|
+
const [colorHexInput, setColorHexInput] = useState(value);
|
|
36
|
+
const [lastValidHexColor, setLastValidHexColor] = useState(value);
|
|
37
|
+
const [pressed, setPressed] = useState(-1);
|
|
38
|
+
const [dropdownVisible, setDropdownVisible] = useState(false);
|
|
39
|
+
const [savedColors, setSavedColors] = useState(colors);
|
|
40
|
+
const setLocalValues = useCallback((colorValue) => {
|
|
59
41
|
setColorTextInput(colorValue);
|
|
60
42
|
if (isValidTextColor(colorValue)) {
|
|
61
|
-
|
|
43
|
+
const standardizedColor = standardizeColor(colorValue);
|
|
62
44
|
setColorHexInput(standardizedColor);
|
|
63
45
|
setLastValidHexColor(standardizedColor);
|
|
64
46
|
} else if (isValidHexColor(colorValue)) {
|
|
65
|
-
|
|
47
|
+
const fullHexColor = convert3DigitHexTo6Digit(colorValue);
|
|
66
48
|
setColorHexInput(fullHexColor);
|
|
67
49
|
setLastValidHexColor(fullHexColor);
|
|
68
50
|
}
|
|
69
51
|
setPressed(-1);
|
|
70
52
|
}, []);
|
|
71
|
-
|
|
53
|
+
const onChangeTextColor = useCallback((colorValue) => {
|
|
72
54
|
setColorTextInput(colorValue);
|
|
73
55
|
setLocalValues(colorValue);
|
|
74
56
|
if (isValidTextColor(colorValue)) {
|
|
75
|
-
|
|
57
|
+
const standardizedColor = standardizeColor(colorValue);
|
|
76
58
|
onChange && onChange(standardizedColor);
|
|
77
59
|
} else if (isValidHexColor(colorValue)) {
|
|
78
|
-
|
|
60
|
+
const fullHexColor = convert3DigitHexTo6Digit(colorValue);
|
|
79
61
|
onChange && onChange(fullHexColor);
|
|
80
62
|
}
|
|
81
63
|
setPressed(-1);
|
|
82
64
|
}, [onChange, setLocalValues]);
|
|
83
|
-
|
|
65
|
+
const onChangeHexColor = useCallback((colorValue) => {
|
|
84
66
|
setColorHexInput(colorValue);
|
|
85
67
|
if (isValidHexColor(colorValue)) {
|
|
86
|
-
|
|
68
|
+
const fullHexColor = convert3DigitHexTo6Digit(colorValue);
|
|
87
69
|
setColorTextInput(fullHexColor);
|
|
88
70
|
setLastValidHexColor(fullHexColor);
|
|
89
71
|
onChange && onChange(fullHexColor);
|
|
90
72
|
}
|
|
91
73
|
setPressed(-1);
|
|
92
74
|
}, [onChange]);
|
|
93
|
-
|
|
75
|
+
const onBlurHandler = useCallback(() => {
|
|
94
76
|
setColorTextInput(lastValidHexColor);
|
|
95
77
|
setColorHexInput(lastValidHexColor);
|
|
96
78
|
}, [lastValidHexColor]);
|
|
97
|
-
|
|
79
|
+
const onClickHandler = useCallback(() => {
|
|
98
80
|
setDropdownVisible(!dropdownVisible);
|
|
99
81
|
}, [dropdownVisible]);
|
|
100
|
-
useEffect(
|
|
82
|
+
useEffect(() => {
|
|
101
83
|
if (value && (isValidHexColor(value) || isValidTextColor(value))) {
|
|
102
84
|
setLocalValues(value);
|
|
103
85
|
} else {
|
|
104
86
|
setLocalValues(DEFAULT_COLOR);
|
|
105
87
|
}
|
|
106
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
107
88
|
}, []);
|
|
108
|
-
|
|
89
|
+
const heightOfDropdown = useCallback(() => {
|
|
109
90
|
if (errorText || description) {
|
|
110
91
|
if (errorText && description) {
|
|
111
92
|
return -40;
|
|
@@ -114,123 +95,75 @@ var ColorPicker = function ColorPicker(_ref) {
|
|
|
114
95
|
}
|
|
115
96
|
return 4;
|
|
116
97
|
}, [errorText, description]);
|
|
117
|
-
|
|
118
|
-
useOnClickOutside(ref,
|
|
98
|
+
const ref = useRef(null);
|
|
99
|
+
useOnClickOutside(ref, () => {
|
|
119
100
|
setDropdownVisible(false);
|
|
120
101
|
});
|
|
121
|
-
|
|
122
|
-
setSavedColors(
|
|
123
|
-
|
|
102
|
+
const saveColor = () => {
|
|
103
|
+
setSavedColors((ar) => {
|
|
104
|
+
const colorsArray = (lastValidHexColor ? [lastValidHexColor, ...ar] : ar).slice(0, maxSavedColors);
|
|
124
105
|
onSaveColors && onSaveColors(colorsArray);
|
|
125
106
|
return colorsArray;
|
|
126
107
|
});
|
|
127
108
|
};
|
|
128
|
-
|
|
109
|
+
const onChangeHandler = useCallback((event) => {
|
|
129
110
|
onChangeTextColor(event.target.value);
|
|
130
111
|
}, [onChangeTextColor]);
|
|
131
|
-
|
|
132
|
-
title: "Save color swatch"
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
name: /*#__PURE__*/React.createElement(Tooltip, {
|
|
152
|
-
title: colorEntry
|
|
153
|
-
}, /*#__PURE__*/React.createElement(S.TagDot, {
|
|
154
|
-
pressed: i === pressed
|
|
155
|
-
})),
|
|
156
|
-
color: colorEntry,
|
|
157
|
-
onClick: function onClick() {
|
|
158
|
-
onChangeHexColor(colorEntry);
|
|
159
|
-
setPressed(i);
|
|
160
|
-
}
|
|
161
|
-
};
|
|
162
|
-
})
|
|
163
|
-
}));
|
|
164
|
-
var dropdown = /*#__PURE__*/React.createElement(S.Container, {
|
|
165
|
-
ref: ref,
|
|
166
|
-
size: size
|
|
167
|
-
}, /*#__PURE__*/React.createElement(ReactColorful, {
|
|
168
|
-
color: lastValidHexColor,
|
|
169
|
-
onChange: onChangeHexColor
|
|
170
|
-
}), /*#__PURE__*/React.createElement(S.PrefixTag, {
|
|
171
|
-
height: isShownSavedColors,
|
|
172
|
-
size: size
|
|
173
|
-
}, /*#__PURE__*/React.createElement(Tag, {
|
|
174
|
-
shape: TagShape.SINGLE_CHARACTER_SQUARE,
|
|
175
|
-
color: lastValidHexColor
|
|
176
|
-
})), /*#__PURE__*/React.createElement(S.SubContainer, {
|
|
177
|
-
savedColors: isShownSavedColors
|
|
178
|
-
}, /*#__PURE__*/React.createElement(S.ColorPickerInput, {
|
|
179
|
-
value: colorHexInput && filterAlphanumeric(colorHexInput),
|
|
180
|
-
prefixel: /*#__PURE__*/React.createElement(S.PreffixWrapper, null, "#"),
|
|
181
|
-
onChange: function onChange(ev) {
|
|
182
|
-
onChangeHexColor("#" + ev.target.value);
|
|
183
|
-
},
|
|
184
|
-
onBlur: onBlurHandler,
|
|
185
|
-
placeholder: placeholder,
|
|
186
|
-
icon1: /*#__PURE__*/React.createElement(S.StyledCopyIcon, {
|
|
187
|
-
copyValue: lastValidHexColor != null ? lastValidHexColor : '',
|
|
188
|
-
texts: {
|
|
189
|
-
copyTooltip: tooltip == null ? void 0 : tooltip.copy,
|
|
190
|
-
copiedTooltip: tooltip == null ? void 0 : tooltip.copied
|
|
112
|
+
const swatchSection = /* @__PURE__ */ jsxs(SwatchSectionWrapper, { children: [
|
|
113
|
+
/* @__PURE__ */ jsx(Tooltip, { title: "Save color swatch", children: /* @__PURE__ */ jsx(AddColorButton, { mode: "single-icon", type: "ghost", onClick: saveColor, children: /* @__PURE__ */ jsx(Icon, { size: 16, component: /* @__PURE__ */ jsx(FormulaPlusM, {}) }) }) }),
|
|
114
|
+
infix({
|
|
115
|
+
color: colorTextInput,
|
|
116
|
+
setColor: onChangeTextColor
|
|
117
|
+
}),
|
|
118
|
+
savedColors.length > 0 && /* @__PURE__ */ jsx(
|
|
119
|
+
Tags,
|
|
120
|
+
{
|
|
121
|
+
tagShape: TagShape.SINGLE_CHARACTER_SQUARE,
|
|
122
|
+
selected: savedColors.map((colorEntry, i) => ({
|
|
123
|
+
id: i,
|
|
124
|
+
key: `color-${i}`,
|
|
125
|
+
name: /* @__PURE__ */ jsx(Tooltip, { title: colorEntry, children: /* @__PURE__ */ jsx(TagDot, { pressed: i === pressed }) }),
|
|
126
|
+
color: colorEntry,
|
|
127
|
+
onClick() {
|
|
128
|
+
onChangeHexColor(colorEntry);
|
|
129
|
+
setPressed(i);
|
|
130
|
+
}
|
|
131
|
+
}))
|
|
191
132
|
}
|
|
192
|
-
|
|
193
|
-
})
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
error: error
|
|
214
|
-
}, inputProps));
|
|
133
|
+
)
|
|
134
|
+
] });
|
|
135
|
+
const dropdown = /* @__PURE__ */ jsxs(Container, { ref, size, children: [
|
|
136
|
+
/* @__PURE__ */ jsx(HexColorPicker, { color: lastValidHexColor, onChange: onChangeHexColor }),
|
|
137
|
+
/* @__PURE__ */ jsx(PrefixTag, { height: isShownSavedColors, size, children: /* @__PURE__ */ jsx(Tag, { shape: TagShape.SINGLE_CHARACTER_SQUARE, color: lastValidHexColor }) }),
|
|
138
|
+
/* @__PURE__ */ jsxs(SubContainer, { savedColors: isShownSavedColors, children: [
|
|
139
|
+
/* @__PURE__ */ jsx(ColorPickerInput, { value: colorHexInput && filterAlphanumeric(colorHexInput), prefixel: /* @__PURE__ */ jsx(PreffixWrapper, { children: "#" }), onChange: (ev) => {
|
|
140
|
+
onChangeHexColor(`#${ev.target.value}`);
|
|
141
|
+
}, onBlur: onBlurHandler, placeholder, icon1: /* @__PURE__ */ jsx(StyledCopyIcon, { copyValue: lastValidHexColor ?? "", texts: {
|
|
142
|
+
copyTooltip: tooltip?.copy,
|
|
143
|
+
copiedTooltip: tooltip?.copied
|
|
144
|
+
} }) }),
|
|
145
|
+
isShownSavedColors && /* @__PURE__ */ jsxs("div", { children: [
|
|
146
|
+
/* @__PURE__ */ jsx(Divider, {}),
|
|
147
|
+
swatchSection
|
|
148
|
+
] })
|
|
149
|
+
] })
|
|
150
|
+
] });
|
|
151
|
+
const trigger = useMemo(() => {
|
|
152
|
+
const isClickable = !disabled && !readOnly;
|
|
153
|
+
return /* @__PURE__ */ jsx(ColorPickerSelect, { "data-testid": "color-picker", disabled, readOnly, prefix: /* @__PURE__ */ jsx(ColorTag, { shape: TagShape.SINGLE_CHARACTER_ROUND, color: lastValidHexColor, disabled: false, onClick: isClickable ? onClickHandler : void 0 }), onClick: isClickable ? onClickHandler : void 0, onChange: isClickable ? onChangeHandler : void 0, onBlur: onBlurHandler, placeholder, value: colorTextInput, description, errorText, error, ...inputProps });
|
|
215
154
|
}, [disabled, error, readOnly, onClickHandler, onChangeHandler, onBlurHandler, lastValidHexColor, placeholder, colorTextInput, description, errorText, inputProps]);
|
|
216
155
|
if (readOnly || disabled) {
|
|
217
156
|
return trigger;
|
|
218
157
|
}
|
|
219
|
-
return
|
|
220
|
-
maxWidth
|
|
221
|
-
|
|
222
|
-
className: "color-picker-overlay",
|
|
223
|
-
align: {
|
|
158
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
159
|
+
maxWidth && maxWidth >= DEFAULT_MAX_WIDTH_PICKER && /* @__PURE__ */ jsx(ColorPickerModalStyle, { maxWidth }),
|
|
160
|
+
/* @__PURE__ */ jsx(Dropdown, { className: "color-picker-overlay", align: {
|
|
224
161
|
offset: [0, heightOfDropdown()]
|
|
225
|
-
},
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
testId: 'color-picker'
|
|
233
|
-
}
|
|
234
|
-
}, trigger));
|
|
162
|
+
}, open: dropdownVisible, overlay: dropdown, placement: "bottomLeft", asChild: true, getPopupContainer: getPopupContainer$1, popoverProps: {
|
|
163
|
+
testId: "color-picker"
|
|
164
|
+
}, children: trigger })
|
|
165
|
+
] });
|
|
166
|
+
};
|
|
167
|
+
export {
|
|
168
|
+
ColorPicker as default
|
|
235
169
|
};
|
|
236
|
-
export default ColorPicker;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
export declare const TagDot: import(
|
|
1
|
+
export declare const TagDot: import('styled-components').StyledComponent<"div", any, {
|
|
2
2
|
pressed?: boolean;
|
|
3
3
|
}, never>;
|
|
4
|
-
export declare const Container: import(
|
|
4
|
+
export declare const Container: import('styled-components').StyledComponent<"div", any, {
|
|
5
5
|
size?: "S" | "M" | "L";
|
|
6
6
|
}, never>;
|
|
7
|
-
export declare const SubContainer: import(
|
|
7
|
+
export declare const SubContainer: import('styled-components').StyledComponent<"div", any, {
|
|
8
8
|
savedColors?: boolean;
|
|
9
9
|
}, never>;
|
|
10
|
-
export declare const ColorTag: import(
|
|
10
|
+
export declare const ColorTag: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<{
|
|
11
11
|
id?: string | number;
|
|
12
12
|
name?: string;
|
|
13
13
|
textColor?: string;
|
|
14
14
|
color?: string;
|
|
15
15
|
image?: string;
|
|
16
|
-
shape?: import(
|
|
16
|
+
shape?: import('@synerise/ds-tags').TagShape;
|
|
17
17
|
removable?: boolean;
|
|
18
18
|
className?: string;
|
|
19
19
|
disabled?: boolean;
|
|
@@ -21,41 +21,41 @@ export declare const ColorTag: import("styled-components").StyledComponent<impor
|
|
|
21
21
|
onRemove?: (tag: string | number) => void;
|
|
22
22
|
prefixel?: React.ReactNode;
|
|
23
23
|
suffixel?: React.ReactNode;
|
|
24
|
-
texts?: import(
|
|
24
|
+
texts?: import('@synerise/ds-tags').TagTexts;
|
|
25
25
|
asPill?: boolean;
|
|
26
26
|
dashed?: boolean;
|
|
27
|
-
tooltipProps?: import(
|
|
28
|
-
} & Omit<import(
|
|
29
|
-
export declare const AddColorButton: import(
|
|
27
|
+
tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
|
|
28
|
+
} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "id" | "disabled" | "name" | "className" | "color" | "onClick" | "prefixel" | "suffixel" | "image" | "shape" | "textColor" | "removable" | "onRemove" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
29
|
+
export declare const AddColorButton: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<Omit<Partial<{
|
|
30
30
|
href: string;
|
|
31
31
|
target?: string;
|
|
32
32
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
33
|
-
} & import(
|
|
34
|
-
htmlType?: import(
|
|
33
|
+
} & import('antd/lib/button/button').BaseButtonProps & Omit<import('react').AnchorHTMLAttributes<any>, "type" | "onClick"> & {
|
|
34
|
+
htmlType?: import('antd/lib/button/button').ButtonHTMLType;
|
|
35
35
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
36
|
-
} & Omit<import(
|
|
37
|
-
type?: import(
|
|
38
|
-
mode?: import(
|
|
39
|
-
color?: import(
|
|
40
|
-
groupVariant?: import(
|
|
36
|
+
} & Omit<import('react').ButtonHTMLAttributes<any>, "type" | "onClick">>, "type" | "ghost"> & {
|
|
37
|
+
type?: import('@synerise/ds-utils').LiteralStringUnion<import('@synerise/ds-button/dist/Button.types').ButtonType>;
|
|
38
|
+
mode?: import('@synerise/ds-utils').LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
|
|
39
|
+
color?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
|
|
40
|
+
groupVariant?: import('@synerise/ds-utils').LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
|
|
41
41
|
justifyContent?: string;
|
|
42
42
|
loading?: boolean | {
|
|
43
43
|
delay?: number;
|
|
44
44
|
};
|
|
45
|
-
onClick?: (event: import(
|
|
46
|
-
iconColor?: import(
|
|
45
|
+
onClick?: (event: import('react').MouseEvent<HTMLElement>) => void;
|
|
46
|
+
iconColor?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
|
|
47
47
|
error?: boolean;
|
|
48
48
|
readOnly?: boolean;
|
|
49
|
-
tagProps?: import(
|
|
50
|
-
tooltipProps?: import(
|
|
51
|
-
} & import(
|
|
52
|
-
Creator: import(
|
|
53
|
-
Expander: ({ size, expanded, disabled, onClick, className, }: import(
|
|
54
|
-
Star: (props: import(
|
|
55
|
-
Checkbox: (props: import(
|
|
49
|
+
tagProps?: import('@synerise/ds-tags').TagProps;
|
|
50
|
+
tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
|
|
51
|
+
} & import('react').RefAttributes<HTMLButtonElement>> & {
|
|
52
|
+
Creator: import('react').ForwardRefExoticComponent<Omit<import('@synerise/ds-button').CreatorProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
|
|
53
|
+
Expander: ({ size, expanded, disabled, onClick, className, }: import('@synerise/ds-button').ExpanderProps) => import("react").JSX.Element;
|
|
54
|
+
Star: (props: import('@synerise/ds-button').StarButtonProps) => React.ReactElement;
|
|
55
|
+
Checkbox: (props: import('@synerise/ds-button').CheckboxButtonProps) => React.ReactElement;
|
|
56
56
|
}, any, {}, never>;
|
|
57
|
-
export declare const StyledCopyIcon: import(
|
|
58
|
-
export declare const ColorPickerInput: import(
|
|
57
|
+
export declare const StyledCopyIcon: import('styled-components').StyledComponent<({ copyValue, texts, onMouseEnter, onMouseLeave, icon, placement, onCopy, onClick, ...rest }: import('@synerise/ds-copy-icon').CopyIconProps) => React.JSX.Element, any, {}, never>;
|
|
58
|
+
export declare const ColorPickerInput: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<{
|
|
59
59
|
error?: boolean;
|
|
60
60
|
className?: string;
|
|
61
61
|
counterLimit?: number;
|
|
@@ -68,12 +68,12 @@ export declare const ColorPickerInput: import("styled-components").StyledCompone
|
|
|
68
68
|
handleInputRef?: ((ref: React.MutableRefObject<HTMLInputElement | null>) => void) | undefined;
|
|
69
69
|
prefixel?: React.ReactNode;
|
|
70
70
|
suffixel?: React.ReactNode;
|
|
71
|
-
autoResize?: import(
|
|
72
|
-
autoResizeProps?: Partial<Pick<import(
|
|
71
|
+
autoResize?: import('@synerise/ds-input').AutoResizeProp;
|
|
72
|
+
autoResizeProps?: Partial<Pick<import('@synerise/ds-input').AutosizeInputProps, "placeholderIsMinWidth" | "wrapperClassName" | "wrapperStyle" | "extraWidth">>;
|
|
73
73
|
expandable?: boolean;
|
|
74
74
|
expandableTooltip?: React.ReactNode;
|
|
75
|
-
} & Omit<import(
|
|
76
|
-
export declare const ColorPickerSelect: import(
|
|
75
|
+
} & Omit<import('@synerise/ds-form-field').ContentAboveProps, "id" | "rightSide"> & import('@synerise/ds-form-field').ContentBelowProps & import('antd').InputProps & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
76
|
+
export declare const ColorPickerSelect: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<{
|
|
77
77
|
error?: boolean;
|
|
78
78
|
className?: string;
|
|
79
79
|
counterLimit?: number;
|
|
@@ -86,35 +86,35 @@ export declare const ColorPickerSelect: import("styled-components").StyledCompon
|
|
|
86
86
|
handleInputRef?: ((ref: React.MutableRefObject<HTMLInputElement | null>) => void) | undefined;
|
|
87
87
|
prefixel?: React.ReactNode;
|
|
88
88
|
suffixel?: React.ReactNode;
|
|
89
|
-
autoResize?: import(
|
|
90
|
-
autoResizeProps?: Partial<Pick<import(
|
|
89
|
+
autoResize?: import('@synerise/ds-input').AutoResizeProp;
|
|
90
|
+
autoResizeProps?: Partial<Pick<import('@synerise/ds-input').AutosizeInputProps, "placeholderIsMinWidth" | "wrapperClassName" | "wrapperStyle" | "extraWidth">>;
|
|
91
91
|
expandable?: boolean;
|
|
92
92
|
expandableTooltip?: React.ReactNode;
|
|
93
|
-
} & Omit<import(
|
|
94
|
-
export declare const PrefixTag: import(
|
|
93
|
+
} & Omit<import('@synerise/ds-form-field').ContentAboveProps, "id" | "rightSide"> & import('@synerise/ds-form-field').ContentBelowProps & import('antd').InputProps & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
94
|
+
export declare const PrefixTag: import('styled-components').StyledComponent<"div", any, {
|
|
95
95
|
height?: boolean;
|
|
96
96
|
size?: "S" | "M" | "L";
|
|
97
97
|
}, never>;
|
|
98
|
-
export declare const SwatchSectionWrapper: import(
|
|
99
|
-
export declare const PreffixWrapper: import(
|
|
100
|
-
export declare const ValueWrapper: import(
|
|
101
|
-
export declare const ColorPickerModalStyle: import(
|
|
98
|
+
export declare const SwatchSectionWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
99
|
+
export declare const PreffixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
100
|
+
export declare const ValueWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
101
|
+
export declare const ColorPickerModalStyle: import('styled-components').GlobalStyleComponent<{
|
|
102
102
|
maxWidth: number;
|
|
103
|
-
}, import(
|
|
103
|
+
}, import('styled-components').DefaultTheme>;
|
|
104
104
|
declare const _default: {
|
|
105
|
-
Container: import(
|
|
105
|
+
Container: import('styled-components').StyledComponent<"div", any, {
|
|
106
106
|
size?: "S" | "M" | "L";
|
|
107
107
|
}, never>;
|
|
108
|
-
SubContainer: import(
|
|
108
|
+
SubContainer: import('styled-components').StyledComponent<"div", any, {
|
|
109
109
|
savedColors?: boolean;
|
|
110
110
|
}, never>;
|
|
111
|
-
ColorTag: import(
|
|
111
|
+
ColorTag: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<{
|
|
112
112
|
id?: string | number;
|
|
113
113
|
name?: string;
|
|
114
114
|
textColor?: string;
|
|
115
115
|
color?: string;
|
|
116
116
|
image?: string;
|
|
117
|
-
shape?: import(
|
|
117
|
+
shape?: import('@synerise/ds-tags').TagShape;
|
|
118
118
|
removable?: boolean;
|
|
119
119
|
className?: string;
|
|
120
120
|
disabled?: boolean;
|
|
@@ -122,48 +122,48 @@ declare const _default: {
|
|
|
122
122
|
onRemove?: (tag: string | number) => void;
|
|
123
123
|
prefixel?: React.ReactNode;
|
|
124
124
|
suffixel?: React.ReactNode;
|
|
125
|
-
texts?: import(
|
|
125
|
+
texts?: import('@synerise/ds-tags').TagTexts;
|
|
126
126
|
asPill?: boolean;
|
|
127
127
|
dashed?: boolean;
|
|
128
|
-
tooltipProps?: import(
|
|
129
|
-
} & Omit<import(
|
|
130
|
-
PrefixTag: import(
|
|
128
|
+
tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
|
|
129
|
+
} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "id" | "disabled" | "name" | "className" | "color" | "onClick" | "prefixel" | "suffixel" | "image" | "shape" | "textColor" | "removable" | "onRemove" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
130
|
+
PrefixTag: import('styled-components').StyledComponent<"div", any, {
|
|
131
131
|
height?: boolean;
|
|
132
132
|
size?: "S" | "M" | "L";
|
|
133
133
|
}, never>;
|
|
134
|
-
AddColorButton: import(
|
|
134
|
+
AddColorButton: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<Omit<Partial<{
|
|
135
135
|
href: string;
|
|
136
136
|
target?: string;
|
|
137
137
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
138
|
-
} & import(
|
|
139
|
-
htmlType?: import(
|
|
138
|
+
} & import('antd/lib/button/button').BaseButtonProps & Omit<import('react').AnchorHTMLAttributes<any>, "type" | "onClick"> & {
|
|
139
|
+
htmlType?: import('antd/lib/button/button').ButtonHTMLType;
|
|
140
140
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
141
|
-
} & Omit<import(
|
|
142
|
-
type?: import(
|
|
143
|
-
mode?: import(
|
|
144
|
-
color?: import(
|
|
145
|
-
groupVariant?: import(
|
|
141
|
+
} & Omit<import('react').ButtonHTMLAttributes<any>, "type" | "onClick">>, "type" | "ghost"> & {
|
|
142
|
+
type?: import('@synerise/ds-utils').LiteralStringUnion<import('@synerise/ds-button/dist/Button.types').ButtonType>;
|
|
143
|
+
mode?: import('@synerise/ds-utils').LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
|
|
144
|
+
color?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
|
|
145
|
+
groupVariant?: import('@synerise/ds-utils').LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
|
|
146
146
|
justifyContent?: string;
|
|
147
147
|
loading?: boolean | {
|
|
148
148
|
delay?: number;
|
|
149
149
|
};
|
|
150
|
-
onClick?: (event: import(
|
|
151
|
-
iconColor?: import(
|
|
150
|
+
onClick?: (event: import('react').MouseEvent<HTMLElement>) => void;
|
|
151
|
+
iconColor?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
|
|
152
152
|
error?: boolean;
|
|
153
153
|
readOnly?: boolean;
|
|
154
|
-
tagProps?: import(
|
|
155
|
-
tooltipProps?: import(
|
|
156
|
-
} & import(
|
|
157
|
-
Creator: import(
|
|
158
|
-
Expander: ({ size, expanded, disabled, onClick, className, }: import(
|
|
159
|
-
Star: (props: import(
|
|
160
|
-
Checkbox: (props: import(
|
|
154
|
+
tagProps?: import('@synerise/ds-tags').TagProps;
|
|
155
|
+
tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
|
|
156
|
+
} & import('react').RefAttributes<HTMLButtonElement>> & {
|
|
157
|
+
Creator: import('react').ForwardRefExoticComponent<Omit<import('@synerise/ds-button').CreatorProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
|
|
158
|
+
Expander: ({ size, expanded, disabled, onClick, className, }: import('@synerise/ds-button').ExpanderProps) => import("react").JSX.Element;
|
|
159
|
+
Star: (props: import('@synerise/ds-button').StarButtonProps) => React.ReactElement;
|
|
160
|
+
Checkbox: (props: import('@synerise/ds-button').CheckboxButtonProps) => React.ReactElement;
|
|
161
161
|
}, any, {}, never>;
|
|
162
|
-
SwatchSectionWrapper: import(
|
|
163
|
-
PreffixWrapper: import(
|
|
164
|
-
ValueWrapper: import(
|
|
165
|
-
CopyIcon: ({ copyValue, texts, onMouseEnter, onMouseLeave, icon, placement, onCopy, onClick, ...rest }: import(
|
|
166
|
-
ColorPickerInput: import(
|
|
162
|
+
SwatchSectionWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
163
|
+
PreffixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
164
|
+
ValueWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
165
|
+
CopyIcon: ({ copyValue, texts, onMouseEnter, onMouseLeave, icon, placement, onCopy, onClick, ...rest }: import('@synerise/ds-copy-icon').CopyIconProps) => React.JSX.Element;
|
|
166
|
+
ColorPickerInput: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<{
|
|
167
167
|
error?: boolean;
|
|
168
168
|
className?: string;
|
|
169
169
|
counterLimit?: number;
|
|
@@ -176,15 +176,15 @@ declare const _default: {
|
|
|
176
176
|
handleInputRef?: ((ref: React.MutableRefObject<HTMLInputElement | null>) => void) | undefined;
|
|
177
177
|
prefixel?: React.ReactNode;
|
|
178
178
|
suffixel?: React.ReactNode;
|
|
179
|
-
autoResize?: import(
|
|
180
|
-
autoResizeProps?: Partial<Pick<import(
|
|
179
|
+
autoResize?: import('@synerise/ds-input').AutoResizeProp;
|
|
180
|
+
autoResizeProps?: Partial<Pick<import('@synerise/ds-input').AutosizeInputProps, "placeholderIsMinWidth" | "wrapperClassName" | "wrapperStyle" | "extraWidth">>;
|
|
181
181
|
expandable?: boolean;
|
|
182
182
|
expandableTooltip?: React.ReactNode;
|
|
183
|
-
} & Omit<import(
|
|
184
|
-
TagDot: import(
|
|
183
|
+
} & Omit<import('@synerise/ds-form-field').ContentAboveProps, "id" | "rightSide"> & import('@synerise/ds-form-field').ContentBelowProps & import('antd').InputProps & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
184
|
+
TagDot: import('styled-components').StyledComponent<"div", any, {
|
|
185
185
|
pressed?: boolean;
|
|
186
186
|
}, never>;
|
|
187
|
-
ColorPickerSelect: import(
|
|
187
|
+
ColorPickerSelect: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<{
|
|
188
188
|
error?: boolean;
|
|
189
189
|
className?: string;
|
|
190
190
|
counterLimit?: number;
|
|
@@ -197,13 +197,13 @@ declare const _default: {
|
|
|
197
197
|
handleInputRef?: ((ref: React.MutableRefObject<HTMLInputElement | null>) => void) | undefined;
|
|
198
198
|
prefixel?: React.ReactNode;
|
|
199
199
|
suffixel?: React.ReactNode;
|
|
200
|
-
autoResize?: import(
|
|
201
|
-
autoResizeProps?: Partial<Pick<import(
|
|
200
|
+
autoResize?: import('@synerise/ds-input').AutoResizeProp;
|
|
201
|
+
autoResizeProps?: Partial<Pick<import('@synerise/ds-input').AutosizeInputProps, "placeholderIsMinWidth" | "wrapperClassName" | "wrapperStyle" | "extraWidth">>;
|
|
202
202
|
expandable?: boolean;
|
|
203
203
|
expandableTooltip?: React.ReactNode;
|
|
204
|
-
} & Omit<import(
|
|
205
|
-
ColorPickerModalStyle: import(
|
|
204
|
+
} & Omit<import('@synerise/ds-form-field').ContentAboveProps, "id" | "rightSide"> & import('@synerise/ds-form-field').ContentBelowProps & import('antd').InputProps & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
205
|
+
ColorPickerModalStyle: import('styled-components').GlobalStyleComponent<{
|
|
206
206
|
maxWidth: number;
|
|
207
|
-
}, import(
|
|
207
|
+
}, import('styled-components').DefaultTheme>;
|
|
208
208
|
};
|
|
209
209
|
export default _default;
|
|
@@ -1,98 +1,89 @@
|
|
|
1
|
-
import styled, { createGlobalStyle } from
|
|
2
|
-
import Button from
|
|
3
|
-
import CopyIcon from
|
|
4
|
-
import { Input } from
|
|
5
|
-
import {
|
|
6
|
-
import { ColorPickerSize } from
|
|
7
|
-
|
|
1
|
+
import styled, { createGlobalStyle } from "styled-components";
|
|
2
|
+
import Button from "@synerise/ds-button";
|
|
3
|
+
import CopyIcon from "@synerise/ds-copy-icon";
|
|
4
|
+
import { Input } from "@synerise/ds-input";
|
|
5
|
+
import { TagsStyles, Tag } from "@synerise/ds-tags";
|
|
6
|
+
import { ColorPickerSize } from "./ColorPicker.types.js";
|
|
7
|
+
const TagDot = /* @__PURE__ */ styled.div.withConfig({
|
|
8
8
|
displayName: "ColorPickerstyles__TagDot",
|
|
9
9
|
componentId: "sc-1iu8b6j-0"
|
|
10
|
-
})(["display:", ";width:4px;height:4px;background-color:", ";border-radius:50%;"],
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
return props.theme.palette.white;
|
|
14
|
-
});
|
|
15
|
-
var SIZE_DEFAULT = 168;
|
|
16
|
-
export var Container = styled.div.withConfig({
|
|
10
|
+
})(["display:", ";width:4px;height:4px;background-color:", ";border-radius:50%;"], (props) => props.pressed ? "flex" : "none", (props) => props.theme.palette.white);
|
|
11
|
+
const SIZE_DEFAULT = 168;
|
|
12
|
+
const Container = /* @__PURE__ */ styled.div.withConfig({
|
|
17
13
|
displayName: "ColorPickerstyles__Container",
|
|
18
14
|
componentId: "sc-1iu8b6j-1"
|
|
19
|
-
})(["width:100%;@media (min-width:200px){min-width:200px;background-color:", ";}.react-colorful__last-control{margin:24px 56px 8px 17px;border-radius:4px;height:8px;}.react-colorful__saturation{border-bottom:0px;border-radius:4px 4px 0 0;height:96px;.react-colorful__interactive{width:100%;height:100%;}}&&& .ds-tag{width:16px;height:16px;border:1px solid ", ";margin:0 0 0 4px;&:hover{", "{display:flex;}}}.react-colorful__pointer{width:16px;height:16px;}.react-colorful{width:100%;height:", "px;}.react-colorful__hue-pointer{border:1px solid ", ";box-shadow:none !important;.react-colorful__pointer-fill{background-color:", " !important;}}.ant-divider-horizontal{margin:16px 0px;}", "{margin-bottom:-8px;}"],
|
|
20
|
-
|
|
21
|
-
}, function (props) {
|
|
22
|
-
return props.theme.palette['grey-300'];
|
|
23
|
-
}, TagDot, function (props) {
|
|
24
|
-
return props.size ? ColorPickerSize[props.size] : SIZE_DEFAULT;
|
|
25
|
-
}, function (props) {
|
|
26
|
-
return props.theme.palette['grey-300'];
|
|
27
|
-
}, function (props) {
|
|
28
|
-
return props.theme.palette.white;
|
|
29
|
-
}, TagsStyles.Container);
|
|
30
|
-
export var SubContainer = styled.div.withConfig({
|
|
15
|
+
})(["width:100%;@media (min-width:200px){min-width:200px;background-color:", ";}.react-colorful__last-control{margin:24px 56px 8px 17px;border-radius:4px;height:8px;}.react-colorful__saturation{border-bottom:0px;border-radius:4px 4px 0 0;height:96px;.react-colorful__interactive{width:100%;height:100%;}}&&& .ds-tag{width:16px;height:16px;border:1px solid ", ";margin:0 0 0 4px;&:hover{", "{display:flex;}}}.react-colorful__pointer{width:16px;height:16px;}.react-colorful{width:100%;height:", "px;}.react-colorful__hue-pointer{border:1px solid ", ";box-shadow:none !important;.react-colorful__pointer-fill{background-color:", " !important;}}.ant-divider-horizontal{margin:16px 0px;}", "{margin-bottom:-8px;}"], (props) => props.theme.palette.white, (props) => props.theme.palette["grey-300"], TagDot, (props) => props.size ? ColorPickerSize[props.size] : SIZE_DEFAULT, (props) => props.theme.palette["grey-300"], (props) => props.theme.palette.white, TagsStyles.Container);
|
|
16
|
+
const SubContainer = /* @__PURE__ */ styled.div.withConfig({
|
|
31
17
|
displayName: "ColorPickerstyles__SubContainer",
|
|
32
18
|
componentId: "sc-1iu8b6j-2"
|
|
33
|
-
})(["padding:8px 16px 16px;margin-bottom:", ";"],
|
|
34
|
-
|
|
35
|
-
});
|
|
36
|
-
export var ColorTag = styled(Tag).withConfig({
|
|
19
|
+
})(["padding:8px 16px 16px;margin-bottom:", ";"], (props) => props.savedColors ? `0` : `-16px`);
|
|
20
|
+
const ColorTag = /* @__PURE__ */ styled(Tag).withConfig({
|
|
37
21
|
displayName: "ColorPickerstyles__ColorTag",
|
|
38
22
|
componentId: "sc-1iu8b6j-3"
|
|
39
|
-
})(["width:16px;height:16px;border:1px solid ", ";"],
|
|
40
|
-
|
|
41
|
-
});
|
|
42
|
-
export var AddColorButton = styled(Button).withConfig({
|
|
23
|
+
})(["width:16px;height:16px;border:1px solid ", ";"], (props) => props.theme.palette["grey-300"]);
|
|
24
|
+
const AddColorButton = /* @__PURE__ */ styled(Button).withConfig({
|
|
43
25
|
displayName: "ColorPickerstyles__AddColorButton",
|
|
44
26
|
componentId: "sc-1iu8b6j-4"
|
|
45
27
|
})(["&&&.ant-btn{width:16px;height:16px;margin-right:0;}"]);
|
|
46
|
-
|
|
28
|
+
const StyledCopyIcon = /* @__PURE__ */ styled(CopyIcon).withConfig({
|
|
47
29
|
displayName: "ColorPickerstyles__StyledCopyIcon",
|
|
48
30
|
componentId: "sc-1iu8b6j-5"
|
|
49
31
|
})(["display:none;"]);
|
|
50
|
-
|
|
32
|
+
const ColorPickerInput = /* @__PURE__ */ styled(Input).withConfig({
|
|
51
33
|
displayName: "ColorPickerstyles__ColorPickerInput",
|
|
52
34
|
componentId: "sc-1iu8b6j-6"
|
|
53
35
|
})(["&:hover{", "{display:flex;}}"], StyledCopyIcon);
|
|
54
|
-
|
|
36
|
+
const ColorPickerSelect = /* @__PURE__ */ styled(Input).withConfig({
|
|
55
37
|
displayName: "ColorPickerstyles__ColorPickerSelect",
|
|
56
38
|
componentId: "sc-1iu8b6j-7"
|
|
57
39
|
})(["&&&{.ant-input-affix-wrapper{padding:4px 4px;}.ant-input-prefix{margin-right:8px;}.ant-input{padding-right:4px;box-shadow:none;}width:100px;}"]);
|
|
58
|
-
|
|
40
|
+
const PrefixTag = /* @__PURE__ */ styled.div.withConfig({
|
|
59
41
|
displayName: "ColorPickerstyles__PrefixTag",
|
|
60
42
|
componentId: "sc-1iu8b6j-8"
|
|
61
|
-
})(["&&& .ds-tag{margin:0;width:24px;height:24px;border:1px solid ", ";cursor:auto;&:hover:before{cursor:auto;filter:brightness(100%);}}position:absolute;right:16px;top:", "px;z-index:2;cursor:auto;"],
|
|
62
|
-
|
|
63
|
-
}, function (props) {
|
|
64
|
-
return (props.size ? ColorPickerSize[props.size] : SIZE_DEFAULT) - 25;
|
|
65
|
-
});
|
|
66
|
-
export var SwatchSectionWrapper = styled.div.withConfig({
|
|
43
|
+
})(["&&& .ds-tag{margin:0;width:24px;height:24px;border:1px solid ", ";cursor:auto;&:hover:before{cursor:auto;filter:brightness(100%);}}position:absolute;right:16px;top:", "px;z-index:2;cursor:auto;"], (props) => props.theme.palette["grey-300"], (props) => (props.size ? ColorPickerSize[props.size] : SIZE_DEFAULT) - 25);
|
|
44
|
+
const SwatchSectionWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
67
45
|
displayName: "ColorPickerstyles__SwatchSectionWrapper",
|
|
68
46
|
componentId: "sc-1iu8b6j-9"
|
|
69
47
|
})(["display:flex;alignitems:center;"]);
|
|
70
|
-
|
|
48
|
+
const PreffixWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
71
49
|
displayName: "ColorPickerstyles__PreffixWrapper",
|
|
72
50
|
componentId: "sc-1iu8b6j-10"
|
|
73
|
-
})(["margin:0px 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:", ";"],
|
|
74
|
-
|
|
75
|
-
});
|
|
76
|
-
export var ValueWrapper = styled.div.withConfig({
|
|
51
|
+
})(["margin:0px 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:", ";"], (props) => props.theme.palette["grey-500"]);
|
|
52
|
+
const ValueWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
77
53
|
displayName: "ColorPickerstyles__ValueWrapper",
|
|
78
54
|
componentId: "sc-1iu8b6j-11"
|
|
79
55
|
})(["display:flex;font-size:12px;"]);
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
56
|
+
const ColorPickerModalStyle = /* @__PURE__ */ createGlobalStyle([".color-picker-overlay{min-width:unset !important;max-width:", "px;width:100%;}"], ({
|
|
57
|
+
maxWidth
|
|
58
|
+
}) => maxWidth);
|
|
59
|
+
const ColorPicker_styles = {
|
|
60
|
+
Container,
|
|
61
|
+
SubContainer,
|
|
62
|
+
ColorTag,
|
|
63
|
+
PrefixTag,
|
|
64
|
+
AddColorButton,
|
|
65
|
+
SwatchSectionWrapper,
|
|
66
|
+
PreffixWrapper,
|
|
67
|
+
ValueWrapper,
|
|
68
|
+
CopyIcon,
|
|
69
|
+
ColorPickerInput,
|
|
70
|
+
TagDot,
|
|
71
|
+
ColorPickerSelect,
|
|
72
|
+
ColorPickerModalStyle
|
|
73
|
+
};
|
|
74
|
+
export {
|
|
75
|
+
AddColorButton,
|
|
76
|
+
ColorPickerInput,
|
|
77
|
+
ColorPickerModalStyle,
|
|
78
|
+
ColorPickerSelect,
|
|
79
|
+
ColorTag,
|
|
80
|
+
Container,
|
|
81
|
+
PreffixWrapper,
|
|
82
|
+
PrefixTag,
|
|
83
|
+
StyledCopyIcon,
|
|
84
|
+
SubContainer,
|
|
85
|
+
SwatchSectionWrapper,
|
|
86
|
+
TagDot,
|
|
87
|
+
ValueWrapper,
|
|
88
|
+
ColorPicker_styles as default
|
|
89
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { DropdownProps } from '@synerise/ds-dropdown';
|
|
2
|
+
import { FormFieldCommonProps } from '@synerise/ds-form-field';
|
|
3
|
+
import { InputProps } from '@synerise/ds-input';
|
|
4
4
|
export type ColorHookType = {
|
|
5
5
|
color: string;
|
|
6
6
|
setColor: (color: string) => void;
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
return
|
|
6
|
-
}({});
|
|
1
|
+
var ColorPickerSize = /* @__PURE__ */ ((ColorPickerSize2) => {
|
|
2
|
+
ColorPickerSize2[ColorPickerSize2["S"] = 136] = "S";
|
|
3
|
+
ColorPickerSize2[ColorPickerSize2["M"] = 168] = "M";
|
|
4
|
+
ColorPickerSize2[ColorPickerSize2["L"] = 200] = "L";
|
|
5
|
+
return ColorPickerSize2;
|
|
6
|
+
})(ColorPickerSize || {});
|
|
7
|
+
export {
|
|
8
|
+
ColorPickerSize
|
|
9
|
+
};
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/modules.d.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
File without changes
|
package/dist/utils.js
CHANGED
|
@@ -1,53 +1,38 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
export var isValidHexColor = function isValidHexColor(hex) {
|
|
7
|
-
return hexColorRegex.test(hex);
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
*
|
|
12
|
-
* Method that creates an option element and then assigns a colour to its styles.
|
|
13
|
-
* If the colour is correct, it is assigned to the element and can then be checked against the input data.
|
|
14
|
-
*
|
|
15
|
-
* @param {string} strColor
|
|
16
|
-
* @returns {boolean}
|
|
17
|
-
*/
|
|
18
|
-
export var isValidTextColor = function isValidTextColor(strColor) {
|
|
1
|
+
const alphanumericRegex = /[^a-zA-Z0-9]+/g;
|
|
2
|
+
const hexColorRegex = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/;
|
|
3
|
+
const filterAlphanumeric = (colorValue) => colorValue.replace(alphanumericRegex, "");
|
|
4
|
+
const isValidHexColor = (hex) => hexColorRegex.test(hex);
|
|
5
|
+
const isValidTextColor = (strColor) => {
|
|
19
6
|
if (!strColor) {
|
|
20
7
|
return false;
|
|
21
8
|
}
|
|
22
|
-
|
|
9
|
+
const s = new Option().style;
|
|
23
10
|
s.color = strColor;
|
|
24
11
|
return s.color === strColor;
|
|
25
12
|
};
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
*
|
|
29
|
-
* A method that converts color in user-understandable notation to HEX notation.
|
|
30
|
-
* It uses the canvas element for this
|
|
31
|
-
*
|
|
32
|
-
* @param {string} color
|
|
33
|
-
* @returns {string}
|
|
34
|
-
*/
|
|
35
|
-
export var standardizeColor = function standardizeColor(color) {
|
|
36
|
-
var ctx = document.createElement('canvas').getContext('2d');
|
|
13
|
+
const standardizeColor = (color) => {
|
|
14
|
+
const ctx = document.createElement("canvas").getContext("2d");
|
|
37
15
|
if (ctx) {
|
|
38
16
|
ctx.fillStyle = color;
|
|
39
17
|
return ctx.fillStyle;
|
|
40
18
|
}
|
|
41
|
-
return
|
|
19
|
+
return "";
|
|
42
20
|
};
|
|
43
|
-
|
|
44
|
-
|
|
21
|
+
const convert3DigitHexTo6Digit = (hexColor) => {
|
|
22
|
+
const alphaHexColor = filterAlphanumeric(hexColor);
|
|
45
23
|
if (alphaHexColor.length === 3) {
|
|
46
|
-
|
|
47
|
-
for (
|
|
24
|
+
let newAlphaHexColor = "";
|
|
25
|
+
for (let i = 0; i < alphaHexColor.length; i++) {
|
|
48
26
|
newAlphaHexColor += alphaHexColor[i] + alphaHexColor[i];
|
|
49
27
|
}
|
|
50
|
-
return
|
|
28
|
+
return `#${newAlphaHexColor}`;
|
|
51
29
|
}
|
|
52
30
|
return hexColor;
|
|
53
|
-
};
|
|
31
|
+
};
|
|
32
|
+
export {
|
|
33
|
+
convert3DigitHexTo6Digit,
|
|
34
|
+
filterAlphanumeric,
|
|
35
|
+
isValidHexColor,
|
|
36
|
+
isValidTextColor,
|
|
37
|
+
standardizeColor
|
|
38
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-color-picker",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.27",
|
|
4
4
|
"description": "Color-Picker Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -16,15 +16,15 @@
|
|
|
16
16
|
"access": "public"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
|
-
"build": "
|
|
19
|
+
"build": "vite build",
|
|
20
20
|
"build:css": "node ../../../scripts/style/less.js",
|
|
21
21
|
"build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
|
|
22
|
-
"build:watch": "
|
|
22
|
+
"build:watch": "vite build --watch",
|
|
23
23
|
"defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
|
|
24
24
|
"pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
|
|
25
25
|
"prepublish": "pnpm run build",
|
|
26
|
-
"test": "vitest",
|
|
27
|
-
"test:watch": "
|
|
26
|
+
"test": "vitest run",
|
|
27
|
+
"test:watch": "vitest",
|
|
28
28
|
"types": "tsc --noEmit",
|
|
29
29
|
"check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
|
|
30
30
|
"upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
|
|
@@ -35,16 +35,16 @@
|
|
|
35
35
|
],
|
|
36
36
|
"types": "dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@synerise/ds-button": "^1.5.
|
|
39
|
-
"@synerise/ds-copy-icon": "^1.2.
|
|
40
|
-
"@synerise/ds-divider": "^1.3.
|
|
41
|
-
"@synerise/ds-dropdown": "^1.3.
|
|
42
|
-
"@synerise/ds-form-field": "^1.3.
|
|
43
|
-
"@synerise/ds-icon": "^1.
|
|
44
|
-
"@synerise/ds-input": "^1.6.
|
|
45
|
-
"@synerise/ds-tags": "^1.5.
|
|
46
|
-
"@synerise/ds-tooltip": "^1.4.
|
|
47
|
-
"@synerise/ds-utils": "^1.
|
|
38
|
+
"@synerise/ds-button": "^1.5.18",
|
|
39
|
+
"@synerise/ds-copy-icon": "^1.2.2",
|
|
40
|
+
"@synerise/ds-divider": "^1.3.2",
|
|
41
|
+
"@synerise/ds-dropdown": "^1.3.2",
|
|
42
|
+
"@synerise/ds-form-field": "^1.3.10",
|
|
43
|
+
"@synerise/ds-icon": "^1.15.1",
|
|
44
|
+
"@synerise/ds-input": "^1.6.10",
|
|
45
|
+
"@synerise/ds-tags": "^1.5.27",
|
|
46
|
+
"@synerise/ds-tooltip": "^1.4.10",
|
|
47
|
+
"@synerise/ds-utils": "^1.7.1",
|
|
48
48
|
"react-colorful": "^5.2.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"react": ">=16.9.0 <= 18.3.1",
|
|
57
57
|
"styled-components": "^5.3.3"
|
|
58
58
|
},
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
|
|
60
60
|
}
|