@synerise/ds-color-picker 1.3.1 → 1.3.3

package/CHANGELOG.md

@@ -3,243 +3,133 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [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)
+## [1.3.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.3.2...@synerise/ds-color-picker@1.3.3) (2025-12-15)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
+## [1.3.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.3.1...@synerise/ds-color-picker@1.3.2) (2025-11-28)
 
+**Note:** Version bump only for package @synerise/ds-color-picker
 
+## [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)
 
+**Note:** Version bump only for package @synerise/ds-color-picker
 
 # [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)
 
-
 ### Features
 
-* **dropdown:** dropdownMenu component ([f0ec827](https://github.com/Synerise/synerise-design/commit/f0ec82792cdcb021fa9a454912f6e7a892e53895))
-
-
-
-
+- **dropdown:** dropdownMenu component ([f0ec827](https://github.com/Synerise/synerise-design/commit/f0ec82792cdcb021fa9a454912f6e7a892e53895))
 
 ## [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)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.33](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.32...@synerise/ds-color-picker@1.2.33) (2025-10-27)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.32](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.31...@synerise/ds-color-picker@1.2.32) (2025-10-22)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.31](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.30...@synerise/ds-color-picker@1.2.31) (2025-10-16)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.30](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.29...@synerise/ds-color-picker@1.2.30) (2025-10-10)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.29](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.28...@synerise/ds-color-picker@1.2.29) (2025-10-08)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.28](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.27...@synerise/ds-color-picker@1.2.28) (2025-10-03)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.27](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.26...@synerise/ds-color-picker@1.2.27) (2025-09-30)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.26](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.25...@synerise/ds-color-picker@1.2.26) (2025-09-30)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.25](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.24...@synerise/ds-color-picker@1.2.25) (2025-09-26)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.23...@synerise/ds-color-picker@1.2.24) (2025-09-25)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.22...@synerise/ds-color-picker@1.2.23) (2025-09-24)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.22](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.21...@synerise/ds-color-picker@1.2.22) (2025-09-23)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.21](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.20...@synerise/ds-color-picker@1.2.21) (2025-09-19)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.20](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.19...@synerise/ds-color-picker@1.2.20) (2025-09-16)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.19](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.18...@synerise/ds-color-picker@1.2.19) (2025-09-02)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.18](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.17...@synerise/ds-color-picker@1.2.18) (2025-08-28)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.17](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.16...@synerise/ds-color-picker@1.2.17) (2025-08-20)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.15...@synerise/ds-color-picker@1.2.16) (2025-08-14)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.14...@synerise/ds-color-picker@1.2.15) (2025-07-24)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.13...@synerise/ds-color-picker@1.2.14) (2025-07-24)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.12...@synerise/ds-color-picker@1.2.13) (2025-07-17)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.11...@synerise/ds-color-picker@1.2.12) (2025-07-15)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.10...@synerise/ds-color-picker@1.2.11) (2025-07-08)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.9...@synerise/ds-color-picker@1.2.10) (2025-07-01)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.8...@synerise/ds-color-picker@1.2.9) (2025-06-26)
 
 **Note:** Version bump only for package @synerise/ds-color-picker
 
-
-
-
-
 ## [1.2.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.7...@synerise/ds-color-picker@1.2.8) (2025-06-24)
 
-
 ### Bug Fixes
 
-* **color-picker:** prevent triggering onchange handler ([bc663d0](https://github.com/Synerise/synerise-design/commit/bc663d03c15cbbbc78641329ed66b0c46491b0fb))
-
-
-
-
+- **color-picker:** prevent triggering onchange handler ([bc663d0](https://github.com/Synerise/synerise-design/commit/bc663d03c15cbbbc78641329ed66b0c46491b0fb))
 
 ## [1.2.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@1.2.6...@synerise/ds-color-picker@1.2.7) (2025-06-12)
 

package/dist/ColorPicker.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type ColorPickerProps } from './ColorPicker.types';
-declare const ColorPicker: ({ maxWidth, value, onChange, colors, onSaveColors, infix, getPopupContainer, placeholder, inputProps, maxSavedColors, tooltip, isShownSavedColors, size, errorText, description, disabled, error, readOnly, }: ColorPickerProps) => React.JSX.Element;
+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;
 export default ColorPicker;

package/dist/ColorPicker.js

@@ -1,10 +1,9 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import copy from 'copy-to-clipboard';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { HexColorPicker as ReactColorful } from 'react-colorful';
 import Divider from '@synerise/ds-divider';
 import Dropdown from '@synerise/ds-dropdown';
-import Icon, { CopyClipboardM, FormulaPlusM } from '@synerise/ds-icon';
+import Icon, { FormulaPlusM } from '@synerise/ds-icon';
 import Tags, { Tag, TagShape } from '@synerise/ds-tags';
 import Tooltip from '@synerise/ds-tooltip';
 import { getPopupContainer as defaultGetPopupContainer, useOnClickOutside } from '@synerise/ds-utils';
@@ -29,7 +28,6 @@ var ColorPicker = function ColorPicker(_ref) {
     inputProps = _ref.inputProps,
     _ref$maxSavedColors = _ref.maxSavedColors,
     maxSavedColors = _ref$maxSavedColors === void 0 ? 9 : _ref$maxSavedColors,
-    tooltip = _ref.tooltip,
     isShownSavedColors = _ref.isShownSavedColors,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'M' : _ref$size,
@@ -37,7 +35,8 @@ var ColorPicker = function ColorPicker(_ref) {
     description = _ref.description,
     disabled = _ref.disabled,
     error = _ref.error,
-    readOnly = _ref.readOnly;
+    readOnly = _ref.readOnly,
+    tooltip = _ref.tooltip;
   var _useState = useState(value),
     colorTextInput = _useState[0],
     setColorTextInput = _useState[1];
@@ -56,9 +55,6 @@ var ColorPicker = function ColorPicker(_ref) {
   var _useState6 = useState(colors),
     savedColors = _useState6[0],
     setSavedColors = _useState6[1];
-  var _useState7 = useState(tooltip == null ? void 0 : tooltip.copy),
-    tooltipText = _useState7[0],
-    setTooltipText = _useState7[1];
   var setLocalValues = useCallback(function (colorValue) {
     setColorTextInput(colorValue);
     if (isValidTextColor(colorValue)) {
@@ -101,13 +97,6 @@ var ColorPicker = function ColorPicker(_ref) {
   var onClickHandler = useCallback(function () {
     setDropdownVisible(!dropdownVisible);
   }, [dropdownVisible]);
-  var copyHandler = useCallback(function () {
-    lastValidHexColor && copy(lastValidHexColor);
-    setTooltipText(tooltip == null ? void 0 : tooltip.copied);
-    setTimeout(function () {
-      setTooltipText(tooltip == null ? void 0 : tooltip.copy);
-    }, 3000);
-  }, [lastValidHexColor, tooltip]);
   useEffect(function () {
     if (value && (isValidHexColor(value) || isValidTextColor(value))) {
       setLocalValues(value);
@@ -194,11 +183,13 @@ var ColorPicker = function ColorPicker(_ref) {
     },
     onBlur: onBlurHandler,
     placeholder: placeholder,
-    icon1: tooltipText ? /*#__PURE__*/React.createElement(S.CopyIcon, {
-      onClick: copyHandler,
-      component: /*#__PURE__*/React.createElement(CopyClipboardM, null)
-    }) : undefined,
-    icon1Tooltip: tooltipText ? /*#__PURE__*/React.createElement("span", null, tooltipText) : undefined
+    icon1: /*#__PURE__*/React.createElement(S.StyledCopyIcon, {
+      copyValue: lastValidHexColor != null ? lastValidHexColor : '',
+      texts: {
+        copyTooltip: tooltip == null ? void 0 : tooltip.copy,
+        copiedTooltip: tooltip == null ? void 0 : tooltip.copied
+      }
+    })
   }), isShownSavedColors && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Divider, null), swatchSection)));
   var trigger = useMemo(function () {
     var isClickable = !disabled && !readOnly;

package/dist/ColorPicker.styles.d.ts

@@ -54,7 +54,7 @@ export declare const AddColorButton: import("styled-components").StyledComponent
     Star: (props: import("@synerise/ds-button").StarButtonProps) => React.ReactElement;
     Checkbox: (props: import("@synerise/ds-button").CheckboxButtonProps) => React.ReactElement;
 }, any, {}, never>;
-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>;
+export declare const StyledCopyIcon: import("styled-components").StyledComponent<({ copyValue, texts, onMouseEnter, onMouseLeave, icon, placement, onCopy, ...rest }: import("@synerise/ds-copy-icon").CopyIconProps) => React.JSX.Element, any, {}, never>;
 export declare const ColorPickerInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     error?: boolean;
     className?: string;
@@ -162,7 +162,7 @@ declare const _default: {
     SwatchSectionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
     PreffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
     ValueWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-    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>;
+    CopyIcon: ({ copyValue, texts, onMouseEnter, onMouseLeave, icon, placement, onCopy, ...rest }: import("@synerise/ds-copy-icon").CopyIconProps) => React.JSX.Element;
     ColorPickerInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
         error?: boolean;
         className?: string;

package/dist/ColorPicker.styles.js

@@ -1,6 +1,6 @@
 import styled, { createGlobalStyle } from 'styled-components';
 import Button from '@synerise/ds-button';
-import Icon from '@synerise/ds-icon';
+import CopyIcon from '@synerise/ds-copy-icon';
 import { Input } from '@synerise/ds-input';
 import { Tag, TagsStyles } from '@synerise/ds-tags';
 import { ColorPickerSize } from './ColorPicker.types';
@@ -43,14 +43,14 @@ export var AddColorButton = styled(Button).withConfig({
   displayName: "ColorPickerstyles__AddColorButton",
   componentId: "sc-1iu8b6j-4"
 })(["&&&.ant-btn{width:16px;height:16px;margin-right:0;}"]);
-export var CopyIcon = styled(Icon).withConfig({
-  displayName: "ColorPickerstyles__CopyIcon",
+export var StyledCopyIcon = styled(CopyIcon).withConfig({
+  displayName: "ColorPickerstyles__StyledCopyIcon",
   componentId: "sc-1iu8b6j-5"
 })(["display:none;"]);
 export var ColorPickerInput = styled(Input).withConfig({
   displayName: "ColorPickerstyles__ColorPickerInput",
   componentId: "sc-1iu8b6j-6"
-})(["&:hover{", "{display:flex;}}"], CopyIcon);
+})(["&:hover{", "{display:flex;}}"], StyledCopyIcon);
 export var ColorPickerSelect = styled(Input).withConfig({
   displayName: "ColorPickerstyles__ColorPickerSelect",
   componentId: "sc-1iu8b6j-7"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-color-picker",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "Color-Picker Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -21,7 +21,7 @@
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
     "build:watch": "npm run build:js -- --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
-    "pack:ci": "npm pack --pack-destination ../../storybook/storybook-static/static",
+    "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "npm run build",
     "test": "jest",
     "test:watch": "npm run test -- --watchAll",
@@ -35,15 +35,16 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.0",
-    "@synerise/ds-divider": "^1.2.1",
-    "@synerise/ds-dropdown": "^1.1.1",
-    "@synerise/ds-icon": "^1.8.0",
-    "@synerise/ds-input": "^1.5.0",
-    "@synerise/ds-tags": "^1.5.1",
-    "@synerise/ds-tooltip": "^1.3.0",
-    "@synerise/ds-utils": "^1.5.0",
-    "copy-to-clipboard": "^3.3.1",
+    "@synerise/ds-button": "^1.5.2",
+    "@synerise/ds-copy-icon": "^1.0.2",
+    "@synerise/ds-divider": "^1.2.3",
+    "@synerise/ds-dropdown": "^1.1.3",
+    "@synerise/ds-form-field": "^1.1.21",
+    "@synerise/ds-icon": "^1.9.1",
+    "@synerise/ds-input": "^1.5.2",
+    "@synerise/ds-tags": "^1.5.3",
+    "@synerise/ds-tooltip": "^1.3.2",
+    "@synerise/ds-utils": "^1.5.1",
     "react-colorful": "^5.2.0"
   },
   "peerDependencies": {
@@ -52,5 +53,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "085189e79075b23a8fb86ce9b7d930f6ac7b3d23"
+  "gitHead": "b1279d5354132a2bf0b6f0cfa343db4c6c928f72"
 }