@synerise/ds-color-picker 0.1.7 → 0.1.8

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@0.1.7...@synerise/ds-color-picker@0.1.8) (2023-01-30)
+
+
+### Bug Fixes
+
+* **color-picker:** bugs ([9702cad](https://github.com/Synerise/synerise-design/commit/9702cada1d33b94275681b905cba291684cf7732))
+* **color-picker:** main wrapper for the color-picker component ([6c3ad7e](https://github.com/Synerise/synerise-design/commit/6c3ad7ea4d1b2a4a089a0494126a2f12962588df))
+* **color-picker:** max-width of dropdown overlay ([42d2f60](https://github.com/Synerise/synerise-design/commit/42d2f60a7be3f63d486c8f27029f5602650fe1c7))
+* **color-picker:** utils for colorPicker component ([d78395d](https://github.com/Synerise/synerise-design/commit/d78395d29b366f2a3edf06edc83351865e7bb875))
+
+
+
+
+
 ## [0.1.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-color-picker@0.1.6...@synerise/ds-color-picker@0.1.7) (2023-01-12)
 
 **Note:** Version bump only for package @synerise/ds-color-picker

package/dist/ColorPicker.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { ColorPickerProps } from './ColorPicker.types';
-export declare function ColorPicker({ value, onChange, colors, onSaveColors, infix, placeholder, inputProps, maxSavedColors, tooltipText, isShownSavedColors, size, errorText, description, }: ColorPickerProps): JSX.Element;
+declare const ColorPicker: ({ maxWidth, value, onChange, colors, onSaveColors, infix, placeholder, inputProps, maxSavedColors, tooltipText, isShownSavedColors, size, errorText, description, }: ColorPickerProps) => JSX.Element;
 export default ColorPicker;

package/dist/ColorPicker.js

@@ -9,9 +9,14 @@ import * as copy from 'copy-to-clipboard';
 import Tooltip from '@synerise/ds-tooltip';
 import Dropdown from '@synerise/ds-dropdown';
 import { useOnClickOutside } from '@synerise/ds-utils';
+import { isValidHexColor, convert3DigitHexTo6Digit, filterAlphanumeric } from './utils';
 import ColorPickerStyles from './ColorPicker.styles';
-export function ColorPicker(_ref) {
-  var _ref$value = _ref.value,
+var hash = '#';
+var DEFAULT_MAX_WIDTH_PICKER = 228;
+
+var ColorPicker = function ColorPicker(_ref) {
+  var maxWidth = _ref.maxWidth,
+      _ref$value = _ref.value,
       value = _ref$value === void 0 ? '#ffffff' : _ref$value,
       onChange = _ref.onChange,
       _ref$colors = _ref.colors,
@@ -36,15 +41,34 @@ export function ColorPicker(_ref) {
       color = _React$useState[0],
       setColor = _React$useState[1];
 
-  var _React$useState2 = React.useState(-1),
-      pressed = _React$useState2[0],
-      setPressed = _React$useState2[1];
+  var _React$useState2 = React.useState(value),
+      validHexColor = _React$useState2[0],
+      setValidHexColor = _React$useState2[1];
+
+  var _React$useState3 = React.useState(-1),
+      pressed = _React$useState3[0],
+      setPressed = _React$useState3[1];
+
+  var _React$useState4 = React.useState(false),
+      dropdownVisible = _React$useState4[0],
+      setDropdownVisible = _React$useState4[1];
 
-  var onChangeColor = function onChangeColor(colorValue) {
+  var _React$useState5 = React.useState(colors),
+      savedColors = _React$useState5[0],
+      setSavedColors = _React$useState5[1];
+
+  var onChangeColor = React.useCallback(function (colorValue) {
     setColor(colorValue);
-    onChange && onChange(colorValue);
-  };
 
+    if (isValidHexColor(colorValue)) {
+      var c = convert3DigitHexTo6Digit(colorValue);
+      setValidHexColor(c);
+      onChange && onChange(c);
+    }
+  }, [onChange]);
+  var onBlurHandler = React.useCallback(function () {
+    setColor(validHexColor);
+  }, [validHexColor]);
   var heightOfDropdown = React.useCallback(function () {
     if (errorText || description) {
       if (errorText && description) {
@@ -56,22 +80,11 @@ export function ColorPicker(_ref) {
 
     return 4;
   }, [errorText, description]);
-
-  var _React$useState3 = React.useState(false),
-      dropdownVisible = _React$useState3[0],
-      setDropdownVisible = _React$useState3[1];
-
   var ref = React.useRef(null);
   useOnClickOutside(ref, function () {
     setDropdownVisible(false);
   });
 
-  var _React$useState4 = React.useState(colors),
-      savedColors = _React$useState4[0],
-      setSavedColors = _React$useState4[1];
-
-  var hash = '#';
-
   var saveColor = function saveColor() {
     setSavedColors(function (ar) {
       var colorsArray = (color ? [color].concat(ar) : ar).slice(0, maxSavedColors);
@@ -118,22 +131,25 @@ export function ColorPicker(_ref) {
     ref: ref,
     size: size
   }, /*#__PURE__*/React.createElement(ReactColorful, {
-    color: color,
+    color: validHexColor,
     onChange: onChangeColor
   }), /*#__PURE__*/React.createElement(ColorPickerStyles.PrefixTag, {
-    height: isShownSavedColors
+    height: isShownSavedColors,
+    size: size
   }, /*#__PURE__*/React.createElement(Tag, {
     shape: TagShape.SINGLE_CHARACTER_SQUARE,
-    color: color,
+    color: validHexColor,
     disabled: false
   })), /*#__PURE__*/React.createElement(ColorPickerStyles.SubContainer, {
     savedColors: isShownSavedColors
   }, /*#__PURE__*/React.createElement(ColorPickerStyles.ColorPickerInput, {
-    value: color.substr(1),
+    value: filterAlphanumeric(color),
     prefixel: /*#__PURE__*/React.createElement(ColorPickerStyles.PreffixWrapper, null, "#"),
     onChange: function onChange(ev) {
-      return setColor(hash + ev.target.value);
+      var hexValue = hash + filterAlphanumeric(ev.target.value);
+      onChangeColor(hexValue);
     },
+    onBlur: onBlurHandler,
     placeholder: placeholder,
     icon1: /*#__PURE__*/React.createElement(ColorPickerStyles.CopyIcon, {
       onClick: function onClick() {
@@ -141,9 +157,12 @@ export function ColorPicker(_ref) {
       },
       component: /*#__PURE__*/React.createElement(CopyClipboardM, null)
     }),
-    icon1Tooltip: /*#__PURE__*/React.createElement("span", null, tooltipText)
+    icon1Tooltip: /*#__PURE__*/React.createElement("span", null, tooltipText || 'Copy to clipboard')
   }), isShownSavedColors && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Divider, null), swatchSection)));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, maxWidth && maxWidth >= DEFAULT_MAX_WIDTH_PICKER && /*#__PURE__*/React.createElement(ColorPickerStyles.ColorPickerModalStyle, {
+    maxWidth: maxWidth
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    overlayClassName: "color-picker-overlay",
     align: {
       offset: [0, heightOfDropdown()]
     },
@@ -153,19 +172,22 @@ export function ColorPicker(_ref) {
   }, /*#__PURE__*/React.createElement(ColorPickerStyles.ColorPickerSelect, _extends({
     prefix: /*#__PURE__*/React.createElement(ColorPickerStyles.ColorTag, {
       shape: TagShape.SINGLE_CHARACTER_ROUND,
-      color: color,
-      disabled: false
+      color: validHexColor,
+      disabled: false,
+      onClick: function onClick() {
+        return setDropdownVisible(!dropdownVisible);
+      }
     }),
     onChange: function onChange(ev) {
-      return setColor(ev.target.value);
+      var hexValue = hash + filterAlphanumeric(ev.target.value);
+      onChangeColor(hexValue);
     },
+    onBlur: onBlurHandler,
     placeholder: placeholder,
-    onClick: function onClick() {
-      return setDropdownVisible(!dropdownVisible);
-    },
     value: color,
     description: description,
     errorText: errorText
   }, inputProps))));
-}
+};
+
 export default ColorPicker;

package/dist/ColorPicker.styles.d.ts

@@ -38,10 +38,14 @@ export declare const ColorPickerSelect: import("styled-components").StyledCompon
 }), any, {}, never>;
 export declare const PrefixTag: import("styled-components").StyledComponent<"div", any, {
     height?: boolean | undefined;
+    size?: "S" | "M" | "L" | undefined;
 }, never>;
 export declare const SwatchSectionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PreffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ValueWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ColorPickerModalStyle: import("styled-components").GlobalStyleComponent<{
+    maxWidth: number;
+}, import("styled-components").DefaultTheme>;
 declare const _default: {
     Container: import("styled-components").StyledComponent<"div", any, {
         size?: "S" | "M" | "L" | undefined;
@@ -52,6 +56,7 @@ declare const _default: {
     ColorTag: import("styled-components").StyledComponent<import("react").FC<import("@synerise/ds-tags/dist/Tag/Tag.types").Props>, any, {}, never>;
     PrefixTag: import("styled-components").StyledComponent<"div", any, {
         height?: boolean | undefined;
+        size?: "S" | "M" | "L" | undefined;
     }, never>;
     AddColorButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
     SwatchSectionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -91,5 +96,8 @@ declare const _default: {
     })> & {
         displayName: string;
     }), any, {}, never>;
+    ColorPickerModalStyle: import("styled-components").GlobalStyleComponent<{
+        maxWidth: number;
+    }, import("styled-components").DefaultTheme>;
 };
 export default _default;

package/dist/ColorPicker.styles.js

@@ -1,4 +1,8 @@
-import styled from 'styled-components'; // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+var _templateObject;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import styled, { createGlobalStyle } from 'styled-components'; // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
 
 import { TagsStyles, Tag } from '@synerise/ds-tags';
@@ -14,11 +18,11 @@ export var TagDot = styled.div.withConfig({
 }, function (props) {
   return props.theme.palette.white;
 });
-var SIZE_DEFAULT = 167;
+var SIZE_DEFAULT = 168;
 var Container = styled.div.withConfig({
   displayName: "ColorPickerstyles__Container",
   componentId: "sc-1iu8b6j-1"
-})(["@media (min-width:200px){min-width:200px;margin:-8px;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{height:96px;}}&&& .ds-tag{width:16px;height:16px;margin:0px 4px 8px;border:1px solid ", ";&:hover{", "{display:flex;}}}.react-colorful__pointer{width:16px;height:16px;}.react-colorful{width:268px;max-width:268px;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;}"], function (props) {
+})(["width:100%;@media (min-width:200px){min-width:200px;margin:-8px;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;}"], function (props) {
   return props.theme.palette.white;
 }, function (props) {
   return props.theme.palette['grey-300'];
@@ -32,8 +36,8 @@ var Container = styled.div.withConfig({
 var SubContainer = styled.div.withConfig({
   displayName: "ColorPickerstyles__SubContainer",
   componentId: "sc-1iu8b6j-2"
-})(["padding:", ";"], function (props) {
-  return props.savedColors ? '8px 16px 16px' : '8px 16px 0;';
+})(["padding:8px 16px 16px;margin-bottom:", ";"], function (props) {
+  return props.savedColors ? "0" : "-16px";
 });
 export var ColorTag = styled(Tag).withConfig({
   displayName: "ColorPickerstyles__ColorTag",
@@ -44,7 +48,7 @@ export var ColorTag = styled(Tag).withConfig({
 export var AddColorButton = styled(Button).withConfig({
   displayName: "ColorPickerstyles__AddColorButton",
   componentId: "sc-1iu8b6j-4"
-})(["&&&.ant-btn{width:16px;height:16px;margin-right:2px;}"]);
+})(["&&&.ant-btn{width:16px;height:16px;margin-right:0;}"]);
 export var CopyIcon = styled(Icon).withConfig({
   displayName: "ColorPickerstyles__CopyIcon",
   componentId: "sc-1iu8b6j-5"
@@ -60,12 +64,10 @@ export var ColorPickerSelect = styled(Input).withConfig({
 export var PrefixTag = styled.div.withConfig({
   displayName: "ColorPickerstyles__PrefixTag",
   componentId: "sc-1iu8b6j-8"
-})(["&&& .ds-tag{width:24px;height:24px;border:1px solid ", ";cursor:auto;&:hover:before{cursor:auto;filter:brightness(100%);}}position:absolute;right:", ";bottom:", ";z-index:2;cursor:auto;"], function (props) {
+})(["&&& .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;"], function (props) {
   return props.theme.palette['grey-300'];
 }, function (props) {
-  return props.height ? '12px' : '12px';
-}, function (props) {
-  return props.height ? '97px' : '48px';
+  return (ColorPickerSize[props.size] || SIZE_DEFAULT) - 25;
 });
 export var SwatchSectionWrapper = styled.div.withConfig({
   displayName: "ColorPickerstyles__SwatchSectionWrapper",
@@ -74,11 +76,17 @@ export var SwatchSectionWrapper = styled.div.withConfig({
 export var PreffixWrapper = styled.div.withConfig({
   displayName: "ColorPickerstyles__PreffixWrapper",
   componentId: "sc-1iu8b6j-10"
-})(["padding:6px 12px;"]);
+})(["margin:0px 12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:", ";"], function (props) {
+  return props.theme.palette['grey-500'];
+});
 export var ValueWrapper = styled.div.withConfig({
   displayName: "ColorPickerstyles__ValueWrapper",
   componentId: "sc-1iu8b6j-11"
 })(["display:flex;font-size:12px;"]);
+export var ColorPickerModalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n.color-picker-overlay {\n  min-width: unset !important;\n  max-width: ", "px; \n  width: 100%;\n}"])), function (_ref) {
+  var maxWidth = _ref.maxWidth;
+  return maxWidth;
+});
 export default {
   Container: Container,
   SubContainer: SubContainer,
@@ -91,5 +99,6 @@ export default {
   CopyIcon: CopyIcon,
   ColorPickerInput: ColorPickerInput,
   TagDot: TagDot,
-  ColorPickerSelect: ColorPickerSelect
+  ColorPickerSelect: ColorPickerSelect,
+  ColorPickerModalStyle: ColorPickerModalStyle
 };

package/dist/ColorPicker.types.d.ts

@@ -5,11 +5,12 @@ export declare type ColorHookType = {
     setColor: (color: string) => void;
 };
 export declare enum ColorPickerSize {
-    'S' = 135,
-    'M' = 167,
-    'L' = 199
+    'S' = 136,
+    'M' = 168,
+    'L' = 200
 }
 export interface ColorPickerProps extends Partial<Pick<HTMLInputElement, 'placeholder'>> {
+    maxWidth?: number;
     value?: string;
     onChange?: (color: string) => void;
     colors?: string[];

package/dist/ColorPicker.types.js

@@ -1,7 +1,7 @@
 export var ColorPickerSize;
 
 (function (ColorPickerSize) {
-  ColorPickerSize[ColorPickerSize["S"] = 135] = "S";
-  ColorPickerSize[ColorPickerSize["M"] = 167] = "M";
-  ColorPickerSize[ColorPickerSize["L"] = 199] = "L";
+  ColorPickerSize[ColorPickerSize["S"] = 136] = "S";
+  ColorPickerSize[ColorPickerSize["M"] = 168] = "M";
+  ColorPickerSize[ColorPickerSize["L"] = 200] = "L";
 })(ColorPickerSize || (ColorPickerSize = {}));

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+export declare const filterAlphanumeric: (colorValue: string) => string;
+export declare const isValidHexColor: (hex: string) => boolean;
+export declare const convert3DigitHexTo6Digit: (hexColor: string) => string;

package/dist/utils.js

@@ -0,0 +1,23 @@
+var alphanumericRegex = /[^a-zA-Z0-9]+/g;
+var hexColorRegex = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/;
+export var filterAlphanumeric = function filterAlphanumeric(colorValue) {
+  return colorValue.replace(alphanumericRegex, '');
+};
+export var isValidHexColor = function isValidHexColor(hex) {
+  return hexColorRegex.test(hex);
+};
+export var convert3DigitHexTo6Digit = function convert3DigitHexTo6Digit(hexColor) {
+  var alphaHexColor = filterAlphanumeric(hexColor);
+
+  if (alphaHexColor.length === 3) {
+    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.1.7",
+  "version": "0.1.8",
   "description": "Color-Picker Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -45,5 +45,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "f7e3eb0af66bff4d1bdec91b30d2075cc0799567"
+  "gitHead": "09992e7b69930b5357e169418af91e29d1cba5ee"
 }