@synerise/ds-color-picker 0.3.98 → 0.3.100

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.
 
+## [0.3.100](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@0.3.99...@synerise/ds-color-picker@0.3.100) (2024-11-28)
+
+**Note:** Version bump only for package @synerise/ds-color-picker
+
+
+
+
+
+## [0.3.99](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@0.3.98...@synerise/ds-color-picker@0.3.99) (2024-11-21)
+
+**Note:** Version bump only for package @synerise/ds-color-picker
+
+
+
+
+
 ## [0.3.98](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@0.3.97...@synerise/ds-color-picker@0.3.98) (2024-11-12)
 
 **Note:** Version bump only for package @synerise/ds-color-picker

package/dist/ColorPicker.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import { HexColorPicker as ReactColorful } from 'react-colorful';
 import Divider from '@synerise/ds-divider';
@@ -13,60 +12,50 @@ import { isValidHexColor, isValidTextColor, convert3DigitHexTo6Digit, filterAlph
 import ColorPickerStyles from './ColorPicker.styles';
 var DEFAULT_MAX_WIDTH_PICKER = 228;
 var DEFAULT_COLOR = '#ffffff';
-
 var ColorPicker = function ColorPicker(_ref) {
   var maxWidth = _ref.maxWidth,
-      value = _ref.value,
-      onChange = _ref.onChange,
-      _ref$colors = _ref.colors,
-      colors = _ref$colors === void 0 ? [] : _ref$colors,
-      onSaveColors = _ref.onSaveColors,
-      _ref$infix = _ref.infix,
-      infix = _ref$infix === void 0 ? function () {
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
-  } : _ref$infix,
-      placeholder = _ref.placeholder,
-      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,
-      errorText = _ref.errorText,
-      description = _ref.description;
-
+    value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$colors = _ref.colors,
+    colors = _ref$colors === void 0 ? [] : _ref$colors,
+    onSaveColors = _ref.onSaveColors,
+    _ref$infix = _ref.infix,
+    infix = _ref$infix === void 0 ? function () {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    } : _ref$infix,
+    placeholder = _ref.placeholder,
+    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,
+    errorText = _ref.errorText,
+    description = _ref.description;
   var _React$useState = React.useState(value),
-      colorTextInput = _React$useState[0],
-      setColorTextInput = _React$useState[1];
-
+    colorTextInput = _React$useState[0],
+    setColorTextInput = _React$useState[1];
   var _React$useState2 = React.useState(value),
-      colorHexInput = _React$useState2[0],
-      setColorHexInput = _React$useState2[1];
-
+    colorHexInput = _React$useState2[0],
+    setColorHexInput = _React$useState2[1];
   var _React$useState3 = React.useState(value),
-      lastValidHexColor = _React$useState3[0],
-      setLastValidHexColor = _React$useState3[1];
-
+    lastValidHexColor = _React$useState3[0],
+    setLastValidHexColor = _React$useState3[1];
   var _React$useState4 = React.useState(-1),
-      pressed = _React$useState4[0],
-      setPressed = _React$useState4[1];
-
+    pressed = _React$useState4[0],
+    setPressed = _React$useState4[1];
   var _React$useState5 = React.useState(false),
-      dropdownVisible = _React$useState5[0],
-      setDropdownVisible = _React$useState5[1];
-
+    dropdownVisible = _React$useState5[0],
+    setDropdownVisible = _React$useState5[1];
   var _React$useState6 = React.useState(colors),
-      savedColors = _React$useState6[0],
-      setSavedColors = _React$useState6[1];
-
+    savedColors = _React$useState6[0],
+    setSavedColors = _React$useState6[1];
   var _React$useState7 = React.useState(tooltip == null ? void 0 : tooltip.copy),
-      tooltipText = _React$useState7[0],
-      setTooltipText = _React$useState7[1];
-
+    tooltipText = _React$useState7[0],
+    setTooltipText = _React$useState7[1];
   var onChangeTextColor = React.useCallback(function (colorValue) {
     setColorTextInput(colorValue);
-
     if (isValidTextColor(colorValue)) {
       var standardizedColor = standardizeColor(colorValue);
       setColorHexInput(standardizedColor);
@@ -78,19 +67,16 @@ var ColorPicker = function ColorPicker(_ref) {
       setLastValidHexColor(fullHexColor);
       onChange && onChange(fullHexColor);
     }
-
     setPressed(-1);
   }, [onChange]);
   var onChangeHexColor = React.useCallback(function (colorValue) {
     setColorHexInput(colorValue);
-
     if (isValidHexColor(colorValue)) {
       var fullHexColor = convert3DigitHexTo6Digit(colorValue);
       setColorTextInput(fullHexColor);
       setLastValidHexColor(fullHexColor);
       onChange && onChange(fullHexColor);
     }
-
     setPressed(-1);
   }, [onChange]);
   var onBlurHandler = React.useCallback(function () {
@@ -112,25 +98,22 @@ var ColorPicker = function ColorPicker(_ref) {
       onChangeTextColor(value);
     } else {
       onChangeTextColor(DEFAULT_COLOR);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var heightOfDropdown = React.useCallback(function () {
     if (errorText || description) {
       if (errorText && description) {
         return -40;
       }
-
       return -20;
     }
-
     return 4;
   }, [errorText, description]);
   var ref = React.useRef(null);
   useOnClickOutside(ref, function () {
     setDropdownVisible(false);
   });
-
   var saveColor = function saveColor() {
     setSavedColors(function (ar) {
       var colorsArray = (lastValidHexColor ? [lastValidHexColor].concat(ar) : ar).slice(0, maxSavedColors);
@@ -138,7 +121,6 @@ var ColorPicker = function ColorPicker(_ref) {
       return colorsArray;
     });
   };
-
   var swatchSection = /*#__PURE__*/React.createElement(ColorPickerStyles.SwatchSectionWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
     title: "Save color swatch"
   }, /*#__PURE__*/React.createElement(ColorPickerStyles.AddColorButton, {
@@ -152,7 +134,8 @@ var ColorPicker = function ColorPicker(_ref) {
     color: colorTextInput,
     setColor: onChangeTextColor
   }), savedColors.length > 0 && /*#__PURE__*/React.createElement(Tags, {
-    tagShape: TagShape.SINGLE_CHARACTER_SQUARE // @ts-ignore
+    tagShape: TagShape.SINGLE_CHARACTER_SQUARE
+    // @ts-ignore
     ,
     selected: savedColors.map(function (colorEntry, i) {
       return {
@@ -228,5 +211,4 @@ var ColorPicker = function ColorPicker(_ref) {
     errorText: errorText
   }, inputProps))));
 };
-
 export default ColorPicker;

package/dist/ColorPicker.styles.d.ts

@@ -10,7 +10,7 @@ export declare const ColorTag: import("styled-components").StyledComponent<{
     };
 }, any, {}, never>;
 export declare const AddColorButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
-export declare const CopyIcon: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-icon").IconProps>, any, {}, never>;
+export declare const CopyIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => import("react").JSX.Element, any, {}, never>;
 export declare const ColorPickerInput: import("styled-components").StyledComponent<import("react").ComponentType<import("@synerise/ds-input").BaseProps<HTMLInputElement> & import("antd/lib/input").InputProps>, any, {}, never>;
 export declare const ColorPickerSelect: import("styled-components").StyledComponent<import("react").ComponentType<import("@synerise/ds-input").BaseProps<HTMLInputElement> & import("antd/lib/input").InputProps>, any, {}, never>;
 export declare const PrefixTag: import("styled-components").StyledComponent<"div", any, {
@@ -44,7 +44,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").FC<import("@synerise/ds-icon").IconProps>, any, {}, never>;
+    CopyIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => import("react").JSX.Element, any, {}, never>;
     ColorPickerInput: import("styled-components").StyledComponent<import("react").ComponentType<import("@synerise/ds-input").BaseProps<HTMLInputElement> & import("antd/lib/input").InputProps>, any, {}, never>;
     TagDot: import("styled-components").StyledComponent<"div", any, {
         pressed?: boolean | undefined;

package/dist/ColorPicker.styles.js

@@ -1,9 +1,7 @@
 var _templateObject;
-
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import styled, { createGlobalStyle } from 'styled-components'; // @ts-ignore
-
+import styled, { createGlobalStyle } from 'styled-components';
+// @ts-ignore
 import { TagsStyles, Tag } from '@synerise/ds-tags';
 import Button from '@synerise/ds-button';
 import Icon from '@synerise/ds-icon';

package/dist/ColorPicker.types.js

@@ -1,5 +1,4 @@
 export var ColorPickerSize;
-
 (function (ColorPickerSize) {
   ColorPickerSize[ColorPickerSize["S"] = 136] = "S";
   ColorPickerSize[ColorPickerSize["M"] = 168] = "M";

package/dist/utils.js

@@ -6,6 +6,7 @@ export var filterAlphanumeric = function filterAlphanumeric(colorValue) {
 export var isValidHexColor = function isValidHexColor(hex) {
   return hexColorRegex.test(hex);
 };
+
 /**
  *
  * Method that creates an option element and then assigns a colour to its styles.
@@ -14,14 +15,14 @@ export var isValidHexColor = function isValidHexColor(hex) {
  * @param {string} strColor
  * @returns {boolean}
  */
-
 export var isValidTextColor = function isValidTextColor(strColor) {
-  if (!strColor) return false; // eslint-disable-next-line no-undef
-
+  if (!strColor) return false;
+  // eslint-disable-next-line no-undef
   var s = new Option().style;
   s.color = strColor;
   return s.color === strColor;
 };
+
 /**
  *
  * A method that converts color in user-understandable notation to HEX notation.
@@ -30,29 +31,23 @@ export var isValidTextColor = function isValidTextColor(strColor) {
  * @param {string} color
  * @returns {string}
  */
-
 export var standardizeColor = function standardizeColor(color) {
   var ctx = document.createElement('canvas').getContext('2d');
-
   if (ctx) {
     ctx.fillStyle = color;
     return ctx.fillStyle;
   }
-
   return '';
 };
 export var convert3DigitHexTo6Digit = function convert3DigitHexTo6Digit(hexColor) {
   var alphaHexColor = filterAlphanumeric(hexColor);
-
   if (alphaHexColor.length === 3) {
-    var newAlphaHexColor = ''; // eslint-disable-next-line no-plusplus
-
+    var newAlphaHexColor = '';
+    // eslint-disable-next-line no-plusplus
     for (var i = 0; i < alphaHexColor.length; i++) {
       newAlphaHexColor += alphaHexColor[i] + alphaHexColor[i];
     }
-
     return "#" + newAlphaHexColor;
   }
-
   return hexColor;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-color-picker",
-  "version": "0.3.98",
+  "version": "0.3.100",
   "description": "Color-Picker Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,14 +34,14 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.21.18",
-    "@synerise/ds-divider": "^0.7.14",
-    "@synerise/ds-dropdown": "^0.18.23",
-    "@synerise/ds-icon": "^0.66.4",
-    "@synerise/ds-input": "^0.24.13",
-    "@synerise/ds-tags": "^0.10.17",
-    "@synerise/ds-tooltip": "^0.14.48",
-    "@synerise/ds-utils": "^0.31.1",
+    "@synerise/ds-button": "^0.21.20",
+    "@synerise/ds-divider": "^0.7.16",
+    "@synerise/ds-dropdown": "^0.18.25",
+    "@synerise/ds-icon": "^0.67.1",
+    "@synerise/ds-input": "^0.24.15",
+    "@synerise/ds-tags": "^0.10.19",
+    "@synerise/ds-tooltip": "^0.14.50",
+    "@synerise/ds-utils": "^0.31.2",
     "copy-to-clipboard": "^3.3.1",
     "react-colorful": "^5.2.0"
   },
@@ -51,5 +51,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "8d26191fc0475407e0691b9b183761ad3cd7c87d"
+  "gitHead": "4a56ee7ef816c22341ce704154dc7aa65b7d1dcc"
 }