@synerise/ds-color-picker 1.3.0 → 1.3.2

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
 
 

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.0",
+  "version": "1.3.2",
   "description": "Color-Picker Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,13 +35,14 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.0",
-    "@synerise/ds-divider": "^1.2.1",
-    "@synerise/ds-dropdown": "^1.1.0",
-    "@synerise/ds-icon": "^1.8.0",
-    "@synerise/ds-input": "^1.5.0",
-    "@synerise/ds-tags": "^1.5.0",
-    "@synerise/ds-tooltip": "^1.3.0",
+    "@synerise/ds-button": "^1.5.1",
+    "@synerise/ds-copy-icon": "^1.0.1",
+    "@synerise/ds-divider": "^1.2.2",
+    "@synerise/ds-dropdown": "^1.1.2",
+    "@synerise/ds-icon": "^1.9.0",
+    "@synerise/ds-input": "^1.5.1",
+    "@synerise/ds-tags": "^1.5.2",
+    "@synerise/ds-tooltip": "^1.3.1",
     "@synerise/ds-utils": "^1.5.0",
     "copy-to-clipboard": "^3.3.1",
     "react-colorful": "^5.2.0"
@@ -52,5 +53,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "cbbb7d9f155735bcc4035d8fd8a7813878d6e051"
+  "gitHead": "d5bd7fbc9d840ac30e2b79b36c451b486e178445"
 }