@synerise/ds-color-picker 1.2.34 → 1.3.1

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 (4) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/ColorPicker.js +7 -3
  3. package/dist/ColorPicker.styles.d.ts +168 -11
  4. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
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.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.3.0...@synerise/ds-color-picker@1.3.1) (2025-11-13)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-color-picker
9
+
10
+
11
+
12
+
13
+
14
+ # [1.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.34...@synerise/ds-color-picker@1.3.0) (2025-11-06)
15
+
16
+
17
+ ### Features
18
+
19
+ * **dropdown:** dropdownMenu component ([f0ec827](https://github.com/Synerise/synerise-design/commit/f0ec82792cdcb021fa9a454912f6e7a892e53895))
20
+
21
+
22
+
23
+
24
+
6
25
  ## [1.2.34](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.33...@synerise/ds-color-picker@1.2.34) (2025-10-31)
7
26
 
8
27
  **Note:** Version bump only for package @synerise/ds-color-picker
package/dist/ColorPicker.js CHANGED
@@ -228,14 +228,18 @@ var ColorPicker = function ColorPicker(_ref) {
228
228
  return /*#__PURE__*/React.createElement(React.Fragment, null, maxWidth && maxWidth >= DEFAULT_MAX_WIDTH_PICKER && /*#__PURE__*/React.createElement(S.ColorPickerModalStyle, {
229
229
  maxWidth: maxWidth
230
230
  }), /*#__PURE__*/React.createElement(Dropdown, {
231
- overlayClassName: "color-picker-overlay",
231
+ className: "color-picker-overlay",
232
232
  align: {
233
233
  offset: [0, heightOfDropdown()]
234
234
  },
235
- visible: dropdownVisible,
235
+ open: dropdownVisible,
236
236
  overlay: dropdown,
237
237
  placement: "bottomLeft",
238
- getPopupContainer: getPopupContainer
238
+ asChild: true,
239
+ getPopupContainer: getPopupContainer,
240
+ popoverProps: {
241
+ testId: 'color-picker'
242
+ }
239
243
  }, trigger));
240
244
  };
241
245
  export default ColorPicker;
package/dist/ColorPicker.styles.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import Button from '@synerise/ds-button';
2
1
  export declare const TagDot: import("styled-components").StyledComponent<"div", any, {
3
2
  pressed?: boolean;
4
3
  }, never>;
@@ -8,11 +7,90 @@ export declare const Container: import("styled-components").StyledComponent<"div
8
7
  export declare const SubContainer: import("styled-components").StyledComponent<"div", any, {
9
8
  savedColors?: boolean;
10
9
  }, never>;
11
- export declare const ColorTag: import("styled-components").StyledComponent<({ id, name, className, disabled, removable, image, shape, color, textColor, onRemove, onClick, prefixel, suffixel, texts, asPill, dashed, tooltipProps, ...htmlAttributes }: import("@synerise/ds-tags").TagProps) => React.JSX.Element, any, {}, never>;
12
- export declare const AddColorButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
13
- export declare const CopyIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => React.JSX.Element, any, {}, never>;
14
- export declare const ColorPickerInput: import("styled-components").StyledComponent<({ className, errorText, label, description, counterLimit, tooltip, tooltipConfig, icon1, icon1Tooltip, autoResize, icon2, icon2Tooltip, resetMargin, handleInputRef, prefixel, suffixel, error, expandable, expandableTooltip, renderCustomCounter, autoResizeProps, ...antdInputProps }: import("@synerise/ds-input").InputProps) => React.JSX.Element, any, {}, never>;
15
- export declare const ColorPickerSelect: import("styled-components").StyledComponent<({ className, errorText, label, description, counterLimit, tooltip, tooltipConfig, icon1, icon1Tooltip, autoResize, icon2, icon2Tooltip, resetMargin, handleInputRef, prefixel, suffixel, error, expandable, expandableTooltip, renderCustomCounter, autoResizeProps, ...antdInputProps }: import("@synerise/ds-input").InputProps) => React.JSX.Element, any, {}, never>;
10
+ export declare const ColorTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
11
+ id?: string | number;
12
+ name?: string;
13
+ textColor?: string;
14
+ color?: string;
15
+ image?: string;
16
+ shape?: import("@synerise/ds-tags").TagShape;
17
+ removable?: boolean;
18
+ className?: string;
19
+ disabled?: boolean;
20
+ onClick?: () => void;
21
+ onRemove?: (tag: string | number) => void;
22
+ prefixel?: React.ReactNode;
23
+ suffixel?: React.ReactNode;
24
+ texts?: import("@synerise/ds-tags").TagTexts;
25
+ asPill?: boolean;
26
+ dashed?: boolean;
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
+ href: string;
31
+ target?: string;
32
+ onClick?: React.MouseEventHandler<HTMLElement>;
33
+ } & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "type" | "onClick"> & {
34
+ htmlType?: import("antd/lib/button/button").ButtonHTMLType;
35
+ onClick?: React.MouseEventHandler<HTMLElement>;
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
+ justifyContent?: string;
42
+ loading?: boolean | {
43
+ delay?: number;
44
+ };
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
+ error?: boolean;
48
+ readOnly?: boolean;
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
+ }, any, {}, never>;
57
+ export declare const CopyIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@synerise/ds-icon").BaseIconProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("@synerise/ds-icon").BaseIconProps> & import("@synerise/ds-utils").DataAttributes & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
58
+ export declare const ColorPickerInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
59
+ error?: boolean;
60
+ className?: string;
61
+ counterLimit?: number;
62
+ renderCustomCounter?: (count?: number) => React.ReactNode;
63
+ icon1?: React.ReactElement;
64
+ icon1Tooltip?: React.ReactElement;
65
+ icon2?: React.ReactElement;
66
+ icon2Tooltip?: React.ReactElement;
67
+ resetMargin?: boolean;
68
+ handleInputRef?: ((ref: React.MutableRefObject<HTMLInputElement | null>) => void) | undefined;
69
+ prefixel?: React.ReactNode;
70
+ suffixel?: React.ReactNode;
71
+ autoResize?: import("@synerise/ds-input").AutoResizeProp;
72
+ autoResizeProps?: Partial<Pick<import("@synerise/ds-input").AutosizeInputProps, "placeholderIsMinWidth" | "wrapperClassName" | "wrapperStyle" | "extraWidth">>;
73
+ expandable?: boolean;
74
+ expandableTooltip?: React.ReactNode;
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
+ error?: boolean;
78
+ className?: string;
79
+ counterLimit?: number;
80
+ renderCustomCounter?: (count?: number) => React.ReactNode;
81
+ icon1?: React.ReactElement;
82
+ icon1Tooltip?: React.ReactElement;
83
+ icon2?: React.ReactElement;
84
+ icon2Tooltip?: React.ReactElement;
85
+ resetMargin?: boolean;
86
+ handleInputRef?: ((ref: React.MutableRefObject<HTMLInputElement | null>) => void) | undefined;
87
+ prefixel?: React.ReactNode;
88
+ suffixel?: React.ReactNode;
89
+ autoResize?: import("@synerise/ds-input").AutoResizeProp;
90
+ autoResizeProps?: Partial<Pick<import("@synerise/ds-input").AutosizeInputProps, "placeholderIsMinWidth" | "wrapperClassName" | "wrapperStyle" | "extraWidth">>;
91
+ expandable?: boolean;
92
+ expandableTooltip?: React.ReactNode;
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>;
16
94
  export declare const PrefixTag: import("styled-components").StyledComponent<"div", any, {
17
95
  height?: boolean;
18
96
  size?: "S" | "M" | "L";
@@ -30,21 +108,100 @@ declare const _default: {
30
108
  SubContainer: import("styled-components").StyledComponent<"div", any, {
31
109
  savedColors?: boolean;
32
110
  }, never>;
33
- ColorTag: import("styled-components").StyledComponent<({ id, name, className, disabled, removable, image, shape, color, textColor, onRemove, onClick, prefixel, suffixel, texts, asPill, dashed, tooltipProps, ...htmlAttributes }: import("@synerise/ds-tags").TagProps) => React.JSX.Element, any, {}, never>;
111
+ ColorTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
112
+ id?: string | number;
113
+ name?: string;
114
+ textColor?: string;
115
+ color?: string;
116
+ image?: string;
117
+ shape?: import("@synerise/ds-tags").TagShape;
118
+ removable?: boolean;
119
+ className?: string;
120
+ disabled?: boolean;
121
+ onClick?: () => void;
122
+ onRemove?: (tag: string | number) => void;
123
+ prefixel?: React.ReactNode;
124
+ suffixel?: React.ReactNode;
125
+ texts?: import("@synerise/ds-tags").TagTexts;
126
+ asPill?: boolean;
127
+ dashed?: boolean;
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>;
34
130
  PrefixTag: import("styled-components").StyledComponent<"div", any, {
35
131
  height?: boolean;
36
132
  size?: "S" | "M" | "L";
37
133
  }, never>;
38
- AddColorButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
134
+ AddColorButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Partial<{
135
+ href: string;
136
+ target?: string;
137
+ onClick?: React.MouseEventHandler<HTMLElement>;
138
+ } & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "type" | "onClick"> & {
139
+ htmlType?: import("antd/lib/button/button").ButtonHTMLType;
140
+ onClick?: React.MouseEventHandler<HTMLElement>;
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
+ justifyContent?: string;
147
+ loading?: boolean | {
148
+ delay?: number;
149
+ };
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
+ error?: boolean;
153
+ readOnly?: boolean;
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
+ }, any, {}, never>;
39
162
  SwatchSectionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
40
163
  PreffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
41
164
  ValueWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
42
- CopyIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => React.JSX.Element, any, {}, never>;
43
- ColorPickerInput: import("styled-components").StyledComponent<({ className, errorText, label, description, counterLimit, tooltip, tooltipConfig, icon1, icon1Tooltip, autoResize, icon2, icon2Tooltip, resetMargin, handleInputRef, prefixel, suffixel, error, expandable, expandableTooltip, renderCustomCounter, autoResizeProps, ...antdInputProps }: import("@synerise/ds-input").InputProps) => React.JSX.Element, any, {}, never>;
165
+ CopyIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@synerise/ds-icon").BaseIconProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("@synerise/ds-icon").BaseIconProps> & import("@synerise/ds-utils").DataAttributes & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
166
+ ColorPickerInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
167
+ error?: boolean;
168
+ className?: string;
169
+ counterLimit?: number;
170
+ renderCustomCounter?: (count?: number) => React.ReactNode;
171
+ icon1?: React.ReactElement;
172
+ icon1Tooltip?: React.ReactElement;
173
+ icon2?: React.ReactElement;
174
+ icon2Tooltip?: React.ReactElement;
175
+ resetMargin?: boolean;
176
+ handleInputRef?: ((ref: React.MutableRefObject<HTMLInputElement | null>) => void) | undefined;
177
+ prefixel?: React.ReactNode;
178
+ suffixel?: React.ReactNode;
179
+ autoResize?: import("@synerise/ds-input").AutoResizeProp;
180
+ autoResizeProps?: Partial<Pick<import("@synerise/ds-input").AutosizeInputProps, "placeholderIsMinWidth" | "wrapperClassName" | "wrapperStyle" | "extraWidth">>;
181
+ expandable?: boolean;
182
+ expandableTooltip?: React.ReactNode;
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>;
44
184
  TagDot: import("styled-components").StyledComponent<"div", any, {
45
185
  pressed?: boolean;
46
186
  }, never>;
47
- ColorPickerSelect: import("styled-components").StyledComponent<({ className, errorText, label, description, counterLimit, tooltip, tooltipConfig, icon1, icon1Tooltip, autoResize, icon2, icon2Tooltip, resetMargin, handleInputRef, prefixel, suffixel, error, expandable, expandableTooltip, renderCustomCounter, autoResizeProps, ...antdInputProps }: import("@synerise/ds-input").InputProps) => React.JSX.Element, any, {}, never>;
187
+ ColorPickerSelect: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
188
+ error?: boolean;
189
+ className?: string;
190
+ counterLimit?: number;
191
+ renderCustomCounter?: (count?: number) => React.ReactNode;
192
+ icon1?: React.ReactElement;
193
+ icon1Tooltip?: React.ReactElement;
194
+ icon2?: React.ReactElement;
195
+ icon2Tooltip?: React.ReactElement;
196
+ resetMargin?: boolean;
197
+ handleInputRef?: ((ref: React.MutableRefObject<HTMLInputElement | null>) => void) | undefined;
198
+ prefixel?: React.ReactNode;
199
+ suffixel?: React.ReactNode;
200
+ autoResize?: import("@synerise/ds-input").AutoResizeProp;
201
+ autoResizeProps?: Partial<Pick<import("@synerise/ds-input").AutosizeInputProps, "placeholderIsMinWidth" | "wrapperClassName" | "wrapperStyle" | "extraWidth">>;
202
+ expandable?: boolean;
203
+ expandableTooltip?: React.ReactNode;
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>;
48
205
  ColorPickerModalStyle: import("styled-components").GlobalStyleComponent<{
49
206
  maxWidth: number;
50
207
  }, import("styled-components").DefaultTheme>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-color-picker",
3
- "version": "1.2.34",
3
+ "version": "1.3.1",
4
4
  "description": "Color-Picker Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -35,13 +35,13 @@
35
35
  ],
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
- "@synerise/ds-button": "^1.4.16",
39
- "@synerise/ds-divider": "^1.2.0",
40
- "@synerise/ds-dropdown": "^1.0.34",
41
- "@synerise/ds-icon": "^1.7.3",
42
- "@synerise/ds-input": "^1.4.2",
43
- "@synerise/ds-tags": "^1.4.10",
44
- "@synerise/ds-tooltip": "^1.2.1",
38
+ "@synerise/ds-button": "^1.5.0",
39
+ "@synerise/ds-divider": "^1.2.1",
40
+ "@synerise/ds-dropdown": "^1.1.1",
41
+ "@synerise/ds-icon": "^1.8.0",
42
+ "@synerise/ds-input": "^1.5.0",
43
+ "@synerise/ds-tags": "^1.5.1",
44
+ "@synerise/ds-tooltip": "^1.3.0",
45
45
  "@synerise/ds-utils": "^1.5.0",
46
46
  "copy-to-clipboard": "^3.3.1",
47
47
  "react-colorful": "^5.2.0"
@@ -52,5 +52,5 @@
52
52
  "react": ">=16.9.0 <= 18.3.1",
53
53
  "styled-components": "^5.3.3"
54
54
  },
55
- "gitHead": "73989f3707121812fcd54f3e89e80f6228298689"
55
+ "gitHead": "085189e79075b23a8fb86ce9b7d930f6ac7b3d23"
56
56
  }