@storybook/components 6.2.0-rc.6 → 6.2.0

package/dist/esm/controls/Color.js

@@ -1,26 +1,20 @@
 import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.array.every.js";
 import "core-js/modules/es.array.filter.js";
 import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.some.js";
 import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.object.assign.js";
+import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.object.values.js";
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.string.match.js";
 import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.string.split.js";
 import "core-js/modules/es.string.starts-with.js";
 
-function _extends() { _extends = Object.assign || 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); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+var _ColorPicker, _fallbackColor;
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -34,7 +28,15 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _extends() { _extends = Object.assign || 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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useCallback, useMemo, useState } from 'react';
 import { HexColorPicker, HslaStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
 import convert from 'color-convert';
 import throttle from 'lodash/throttle';
@@ -43,11 +45,103 @@ import { TooltipNote } from '../tooltip/TooltipNote';
 import { WithTooltip } from '../tooltip/lazy-WithTooltip';
 import { Form } from '../form';
 import { Icons } from '../icon/icon';
+var Wrapper = styled.div({
+  position: 'relative',
+  maxWidth: 250
+});
+var PickerTooltip = styled(WithTooltip)({
+  position: 'absolute',
+  zIndex: 1,
+  top: 4,
+  left: 4
+});
+var TooltipContent = styled.div({
+  width: 200,
+  margin: 5,
+  '.react-colorful__saturation': {
+    borderRadius: '4px 4px 0 0'
+  },
+  '.react-colorful__hue': {
+    boxShadow: 'inset 0 0 0 1px rgb(0 0 0 / 5%)'
+  },
+  '.react-colorful__last-control': {
+    borderRadius: '0 0 4px 4px'
+  }
+});
+var Note = styled(TooltipNote)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontFamily: theme.typography.fonts.base
+  };
+});
+var Swatches = styled.div({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(9, 16px)',
+  gap: 6,
+  padding: 3,
+  marginTop: 5,
+  width: 200
+});
+var SwatchColor = styled.div(function (_ref2) {
+  var theme = _ref2.theme,
+      active = _ref2.active;
+  return {
+    width: 16,
+    height: 16,
+    boxShadow: active ? "".concat(theme.appBorderColor, " 0 0 0 1px inset, ").concat(theme.color.mediumdark, "50 0 0 0 4px") : "".concat(theme.appBorderColor, " 0 0 0 1px inset"),
+    borderRadius: theme.appBorderRadius
+  };
+});
+var swatchBackground = "url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill-opacity=\".05\"><path d=\"M8 0h8v8H8zM0 8h8v8H0z\"/></svg>')";
+
+var Swatch = function Swatch(_ref3) {
+  var value = _ref3.value,
+      active = _ref3.active,
+      onClick = _ref3.onClick,
+      style = _ref3.style,
+      props = _objectWithoutProperties(_ref3, ["value", "active", "onClick", "style"]);
+
+  var backgroundImage = "linear-gradient(".concat(value, ", ").concat(value, "), ").concat(swatchBackground, ", linear-gradient(#fff, #fff)");
+  return /*#__PURE__*/React.createElement(SwatchColor, _extends({}, props, {
+    active: active,
+    onClick: onClick,
+    style: Object.assign({}, style, {
+      backgroundImage: backgroundImage
+    })
+  }));
+};
+
+Swatch.displayName = "Swatch";
+var Input = styled(Form.Input)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    width: '100%',
+    paddingLeft: 30,
+    paddingRight: 30,
+    boxSizing: 'border-box',
+    fontFamily: theme.typography.fonts.base
+  };
+});
+var ToggleIcon = styled(Icons)(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    position: 'absolute',
+    zIndex: 1,
+    top: 6,
+    right: 7,
+    width: 20,
+    height: 20,
+    padding: 4,
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    color: theme.input.color
+  };
+});
 var ColorSpace;
 
 (function (ColorSpace) {
-  ColorSpace["RGBA"] = "rgb";
-  ColorSpace["HSLA"] = "hsl";
+  ColorSpace["RGB"] = "rgb";
+  ColorSpace["HSL"] = "hsl";
   ColorSpace["HEX"] = "hex";
 })(ColorSpace || (ColorSpace = {}));
 
@@ -55,8 +149,10 @@ var COLOR_SPACES = Object.values(ColorSpace);
 var COLOR_REGEXP = /\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/;
 var RGB_REGEXP = /^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i;
 var HSL_REGEXP = /^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i;
-var HEX_REGEXP = /^\s*#([0-9a-f]{1,2})([0-9a-f]{1,2})([0-9a-f]{1,2})\s*$/i;
-var SHORTHEX_REGEXP = /^\s*#([0-9a-f])([0-9a-f])([0-9a-f])\s*$/i;
+var HEX_REGEXP = /^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i;
+var SHORTHEX_REGEXP = /^\s*#?([0-9a-f]{3})\s*$/i;
+var ColorPicker = (_ColorPicker = {}, _defineProperty(_ColorPicker, ColorSpace.HEX, HexColorPicker), _defineProperty(_ColorPicker, ColorSpace.RGB, RgbaStringColorPicker), _defineProperty(_ColorPicker, ColorSpace.HSL, HslaStringColorPicker), _ColorPicker);
+var fallbackColor = (_fallbackColor = {}, _defineProperty(_fallbackColor, ColorSpace.HEX, 'transparent'), _defineProperty(_fallbackColor, ColorSpace.RGB, 'rgba(0, 0, 0, 0)'), _defineProperty(_fallbackColor, ColorSpace.HSL, 'hsla(0, 0%, 0%, 0)'), _fallbackColor);
 
 var stringToArgs = function stringToArgs(value) {
   var match = value === null || value === void 0 ? void 0 : value.match(COLOR_REGEXP);
@@ -72,264 +168,247 @@ var stringToArgs = function stringToArgs(value) {
   return [x, y, z, a].map(Number);
 };
 
-var expandShorthand = function expandShorthand(value) {
-  if (!value) return '#000000';
-
-  if (!value.startsWith('#')) {
-    try {
-      return "#".concat(convert.keyword.hex(value));
-    } catch (e) {
-      return value;
-    }
-  }
-
-  if (value.length > 4) return value;
-  var match = value.match(SHORTHEX_REGEXP);
-  if (!match) return value;
-
-  var _match2 = _slicedToArray(match, 4),
-      r = _match2[1],
-      g = _match2[2],
-      b = _match2[3];
-
-  return "#".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b);
-};
-
-var parseValue = function parseValue(input) {
-  var _ref8;
-
-  var _ref = _typeof(input) === 'object' ? input : {
-    color: input,
-    title: undefined
-  },
-      color = _ref.color,
-      title = _ref.title;
+var parseValue = function parseValue(value) {
+  var _ref12;
 
-  if (!color) return undefined;
+  if (!value) return undefined;
+  var valid = true;
 
-  if (RGB_REGEXP.test(color)) {
-    var _ref4;
+  if (RGB_REGEXP.test(value)) {
+    var _ref8;
 
-    var _stringToArgs = stringToArgs(color),
+    var _stringToArgs = stringToArgs(value),
         _stringToArgs2 = _slicedToArray(_stringToArgs, 4),
         r = _stringToArgs2[0],
         g = _stringToArgs2[1],
         b = _stringToArgs2[2],
         a = _stringToArgs2[3];
 
-    var _ref2 = convert.rgb.hsl([r, g, b]) || [0, 0, 0],
-        _ref3 = _slicedToArray(_ref2, 3),
-        h = _ref3[0],
-        s = _ref3[1],
-        l = _ref3[2];
-
-    return _ref4 = {
-      value: color,
-      title: title || convert.rgb.keyword([r, g, b]) || color,
-      colorSpace: ColorSpace.RGBA
-    }, _defineProperty(_ref4, ColorSpace.RGBA, color), _defineProperty(_ref4, ColorSpace.HSLA, "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(a, ")")), _defineProperty(_ref4, ColorSpace.HEX, "#".concat(convert.rgb.hex([r, g, b]))), _ref4;
+    var _ref6 = convert.rgb.hsl([r, g, b]) || [0, 0, 0],
+        _ref7 = _slicedToArray(_ref6, 3),
+        h = _ref7[0],
+        s = _ref7[1],
+        l = _ref7[2];
+
+    return _ref8 = {
+      valid: valid,
+      value: value,
+      keyword: convert.rgb.keyword([r, g, b]),
+      colorSpace: ColorSpace.RGB
+    }, _defineProperty(_ref8, ColorSpace.RGB, value), _defineProperty(_ref8, ColorSpace.HSL, "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(a, ")")), _defineProperty(_ref8, ColorSpace.HEX, "#".concat(convert.rgb.hex([r, g, b]).toLowerCase())), _ref8;
   }
 
-  if (HSL_REGEXP.test(color)) {
-    var _ref7;
+  if (HSL_REGEXP.test(value)) {
+    var _ref11;
 
-    var _stringToArgs3 = stringToArgs(color),
+    var _stringToArgs3 = stringToArgs(value),
         _stringToArgs4 = _slicedToArray(_stringToArgs3, 4),
         _h = _stringToArgs4[0],
         _s2 = _stringToArgs4[1],
         _l = _stringToArgs4[2],
         _a = _stringToArgs4[3];
 
-    var _ref5 = convert.hsl.rgb([_h, _s2, _l]) || [0, 0, 0],
-        _ref6 = _slicedToArray(_ref5, 3),
-        _r = _ref6[0],
-        _g = _ref6[1],
-        _b = _ref6[2];
-
-    return _ref7 = {
-      value: color,
-      title: title || convert.rgb.keyword([_r, _g, _b]) || color,
-      colorSpace: ColorSpace.HSLA
-    }, _defineProperty(_ref7, ColorSpace.RGBA, "rgba(".concat(_r, ", ").concat(_g, ", ").concat(_b, ", ").concat(_a, ")")), _defineProperty(_ref7, ColorSpace.HSLA, color), _defineProperty(_ref7, ColorSpace.HEX, "#".concat(convert.hsl.hex([_h, _s2, _l]))), _ref7;
+    var _ref9 = convert.hsl.rgb([_h, _s2, _l]) || [0, 0, 0],
+        _ref10 = _slicedToArray(_ref9, 3),
+        _r = _ref10[0],
+        _g = _ref10[1],
+        _b = _ref10[2];
+
+    return _ref11 = {
+      valid: valid,
+      value: value,
+      keyword: convert.hsl.keyword([_h, _s2, _l]),
+      colorSpace: ColorSpace.HSL
+    }, _defineProperty(_ref11, ColorSpace.RGB, "rgba(".concat(_r, ", ").concat(_g, ", ").concat(_b, ", ").concat(_a, ")")), _defineProperty(_ref11, ColorSpace.HSL, value), _defineProperty(_ref11, ColorSpace.HEX, "#".concat(convert.hsl.hex([_h, _s2, _l]).toLowerCase())), _ref11;
   }
 
-  var convertTo = HEX_REGEXP.test(color) ? convert.hex : convert.keyword;
-  var rgb = convertTo.rgb(color.replace('#', ''));
-  var hsl = rgb && convert.rgb.hsl(rgb);
-  return _ref8 = {
-    value: color,
-    title: title || convert.rgb.keyword(rgb) || color,
+  var plain = value.replace('#', '');
+  var rgb = convert.keyword.rgb(plain) || convert.hex.rgb(plain);
+  var hsl = convert.rgb.hsl(rgb);
+  var mapped = value;
+  if (/[^#a-f0-9]/i.test(value)) mapped = plain;else if (HEX_REGEXP.test(value)) mapped = "#".concat(plain);
+
+  if (mapped.startsWith('#')) {
+    valid = HEX_REGEXP.test(mapped);
+  } else {
+    try {
+      convert.keyword.hex(mapped);
+    } catch (e) {
+      valid = false;
+    }
+  }
+
+  return _ref12 = {
+    valid: valid,
+    value: mapped,
+    keyword: convert.rgb.keyword(rgb),
     colorSpace: ColorSpace.HEX
-  }, _defineProperty(_ref8, ColorSpace.RGBA, rgb && "rgba(".concat(rgb[0], ", ").concat(rgb[1], ", ").concat(rgb[2], ", 1)")), _defineProperty(_ref8, ColorSpace.HSLA, hsl && "hsla(".concat(hsl[0], ", ").concat(hsl[1], "%, ").concat(hsl[2], "%, 1)")), _defineProperty(_ref8, ColorSpace.HEX, color), _ref8;
+  }, _defineProperty(_ref12, ColorSpace.RGB, "rgba(".concat(rgb[0], ", ").concat(rgb[1], ", ").concat(rgb[2], ", 1)")), _defineProperty(_ref12, ColorSpace.HSL, "hsla(".concat(hsl[0], ", ").concat(hsl[1], "%, ").concat(hsl[2], "%, 1)")), _defineProperty(_ref12, ColorSpace.HEX, mapped), _ref12;
 };
 
-var Wrapper = styled.div({
-  position: 'relative',
-  maxWidth: 250
-});
-var PickerTooltip = styled(WithTooltip)({
-  position: 'absolute',
-  zIndex: 1,
-  top: 4,
-  left: 4
-});
-var TooltipContent = styled.div({
-  margin: 5,
-  '.react-colorful__saturation': {
-    borderRadius: '4px 4px 0 0'
-  },
-  '.react-colorful__hue': {
-    boxShadow: 'inset 0 0 0 1px rgb(0 0 0 / 5%)'
-  },
-  '.react-colorful__last-control': {
-    borderRadius: '0 0 4px 4px'
-  }
-});
-var Swatches = styled.div({
-  display: 'grid',
-  gridTemplateColumns: 'repeat(9, 15px)',
-  gap: 7,
-  padding: 3,
-  marginTop: 5,
-  width: 200
-});
-var Swatch = styled.div(function (_ref9) {
-  var theme = _ref9.theme,
-      active = _ref9.active,
-      round = _ref9.round;
-  return {
-    width: round ? 16 : 15,
-    height: round ? 16 : 15,
-    margin: round ? 4 : 0,
-    boxShadow: active ? "".concat(theme.appBorderColor, " 0 0 0 1px inset, ").concat(theme.color.mediumdark, "55 0 0 0 4px") : "".concat(theme.appBorderColor, " 0 0 0 1px inset"),
-    borderRadius: round ? 16 : theme.appBorderRadius,
-    cursor: 'pointer'
-  };
-});
-var Input = styled(Form.Input)({
-  width: '100%',
-  paddingLeft: 30,
-  paddingRight: 30
-});
-var ToggleIcon = styled(Icons)(function (_ref10) {
-  var theme = _ref10.theme;
-  return {
-    position: 'absolute',
-    zIndex: 1,
-    top: 6,
-    right: 7,
-    width: 20,
-    height: 20,
-    padding: 4,
-    cursor: 'pointer',
-    color: theme.input.color
-  };
-});
-var SmartPicker = /*#__PURE__*/React.memo(function (_ref11) {
-  var value = _ref11.value,
-      colorSpace = _ref11.colorSpace,
-      props = _objectWithoutProperties(_ref11, ["value", "colorSpace"]);
-
-  switch (colorSpace) {
-    case ColorSpace.RGBA:
-      return /*#__PURE__*/React.createElement(RgbaStringColorPicker, _extends({
-        color: value
-      }, props));
-
-    case ColorSpace.HSLA:
-      return /*#__PURE__*/React.createElement(HslaStringColorPicker, _extends({
-        color: value
-      }, props));
-
-    default:
-      return /*#__PURE__*/React.createElement(HexColorPicker, _extends({
-        color: expandShorthand(value)
-      }, props));
+var getRealValue = function getRealValue(value, color, colorSpace) {
+  if (!value || !(color !== null && color !== void 0 && color.valid)) return fallbackColor[colorSpace];
+  if (colorSpace !== ColorSpace.HEX) return (color === null || color === void 0 ? void 0 : color[colorSpace]) || fallbackColor[colorSpace];
+
+  if (!color.hex.startsWith('#')) {
+    try {
+      return "#".concat(convert.keyword.hex(color.hex));
+    } catch (e) {
+      return fallbackColor.hex;
+    }
   }
-});
-export var ColorControl = function ColorControl(_ref12) {
-  var name = _ref12.name,
-      value = _ref12.value,
-      _onChange = _ref12.onChange,
-      onFocus = _ref12.onFocus,
-      onBlur = _ref12.onBlur,
-      presetColors = _ref12.presetColors,
-      startOpen = _ref12.startOpen;
-  var color = useMemo(function () {
-    return parseValue(value);
-  }, [value]);
-  var update = useMemo(function () {
-    return throttle(_onChange, 200);
-  }, []);
 
-  var _useState = useState((color === null || color === void 0 ? void 0 : color.colorSpace) || ColorSpace.HEX),
+  var short = color.hex.match(SHORTHEX_REGEXP);
+  if (!short) return HEX_REGEXP.test(color.hex) ? color.hex : fallbackColor.hex;
+
+  var _short$1$split = short[1].split(''),
+      _short$1$split2 = _slicedToArray(_short$1$split, 3),
+      r = _short$1$split2[0],
+      g = _short$1$split2[1],
+      b = _short$1$split2[2];
+
+  return "#".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b);
+};
+
+var useColorInput = function useColorInput(initialValue, onChange) {
+  var _useState = useState(initialValue || ''),
       _useState2 = _slicedToArray(_useState, 2),
-      colorSpace = _useState2[0],
-      setColorSpace = _useState2[1];
+      value = _useState2[0],
+      setValue = _useState2[1];
 
-  var currentValue = (color === null || color === void 0 ? void 0 : color[colorSpace]) || '';
-  useEffect(function () {
-    if (color) setColorSpace(color.colorSpace);
-  }, [color === null || color === void 0 ? void 0 : color.colorSpace]);
+  var _useState3 = useState(function () {
+    return parseValue(value);
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      color = _useState4[0],
+      setColor = _useState4[1];
+
+  var _useState5 = useState((color === null || color === void 0 ? void 0 : color.colorSpace) || ColorSpace.HEX),
+      _useState6 = _slicedToArray(_useState5, 2),
+      colorSpace = _useState6[0],
+      setColorSpace = _useState6[1];
+
+  var realValue = useMemo(function () {
+    return getRealValue(value, color, colorSpace).toLowerCase();
+  }, [value, color, colorSpace]);
+  var updateValue = useCallback(function (update) {
+    var parsed = parseValue(update);
+    setValue((parsed === null || parsed === void 0 ? void 0 : parsed.value) || update || '');
+    if (!parsed) return;
+    setColor(parsed);
+    setColorSpace(parsed.colorSpace);
+    onChange(parsed.value);
+  }, []);
   var cycleColorSpace = useCallback(function () {
     var next = COLOR_SPACES.indexOf(colorSpace) + 1;
     if (next >= COLOR_SPACES.length) next = 0;
     setColorSpace(COLOR_SPACES[next]);
-  }, [colorSpace]);
+    var update = (color === null || color === void 0 ? void 0 : color[COLOR_SPACES[next]]) || '';
+    setValue(update);
+    onChange(update);
+  }, [color, colorSpace]);
+  return {
+    value: value,
+    realValue: realValue,
+    updateValue: updateValue,
+    color: color,
+    colorSpace: colorSpace,
+    cycleColorSpace: cycleColorSpace
+  };
+};
 
-  var _useState3 = useState(function () {
-    return (presetColors || []).map(parseValue).concat(color).filter(Boolean).slice(0, 27);
-  }),
-      _useState4 = _slicedToArray(_useState3, 2),
-      presets = _useState4[0],
-      setPresets = _useState4[1];
-
-  var addPreset = useCallback(function (preset) {
-    setPresets(function (arr) {
-      return preset !== null && preset !== void 0 && preset.rgb && arr.every(function (item) {
-        return item.rgb !== preset.rgb;
-      }) ? arr.concat(preset).slice(-27) : arr;
+var id = function id(value) {
+  return value.replace(/\s*/, '').toLowerCase();
+};
+
+var usePresets = function usePresets(presetColors, currentColor, colorSpace) {
+  var _useState7 = useState(currentColor !== null && currentColor !== void 0 && currentColor.valid ? [currentColor] : []),
+      _useState8 = _slicedToArray(_useState7, 2),
+      selectedColors = _useState8[0],
+      setSelectedColors = _useState8[1];
+
+  var presets = useMemo(function () {
+    var initialPresets = (presetColors || []).map(function (preset) {
+      if (typeof preset === 'string') return parseValue(preset);
+      if (preset.title) return Object.assign({}, parseValue(preset.color), {
+        keyword: preset.title
+      });
+      return parseValue(preset.color);
     });
-  }, []);
+    return initialPresets.concat(selectedColors).filter(Boolean).slice(-27);
+  }, [presetColors, selectedColors]);
+  var addPreset = useCallback(function (color) {
+    if (!(color !== null && color !== void 0 && color.valid)) return;
+    if (presets.some(function (preset) {
+      return id(preset[colorSpace]) === id(color[colorSpace]);
+    })) return;
+    setSelectedColors(function (arr) {
+      return arr.concat(color);
+    });
+  }, [colorSpace, presets]);
+  return {
+    presets: presets,
+    addPreset: addPreset
+  };
+};
+
+export var ColorControl = function ColorControl(_ref13) {
+  var initialValue = _ref13.value,
+      onChange = _ref13.onChange,
+      onFocus = _ref13.onFocus,
+      onBlur = _ref13.onBlur,
+      presetColors = _ref13.presetColors,
+      startOpen = _ref13.startOpen;
+
+  var _useColorInput = useColorInput(initialValue, throttle(onChange, 200)),
+      value = _useColorInput.value,
+      realValue = _useColorInput.realValue,
+      updateValue = _useColorInput.updateValue,
+      color = _useColorInput.color,
+      colorSpace = _useColorInput.colorSpace,
+      cycleColorSpace = _useColorInput.cycleColorSpace;
+
+  var _usePresets = usePresets(presetColors, color, colorSpace),
+      presets = _usePresets.presets,
+      addPreset = _usePresets.addPreset;
+
+  var Picker = ColorPicker[colorSpace];
   return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(PickerTooltip, {
     trigger: "click",
     startOpen: startOpen,
     closeOnClick: true,
     onVisibilityChange: function onVisibilityChange() {
-      return color && addPreset(color);
+      return addPreset(color);
     },
-    tooltip: /*#__PURE__*/React.createElement(TooltipContent, null, /*#__PURE__*/React.createElement(SmartPicker, {
-      value: currentValue,
-      colorSpace: colorSpace,
-      onChange: update,
+    tooltip: /*#__PURE__*/React.createElement(TooltipContent, null, /*#__PURE__*/React.createElement(Picker, {
+      color: realValue === 'transparent' ? '#000000' : realValue,
+      onChange: updateValue,
       onFocus: onFocus,
       onBlur: onBlur
     }), presets.length > 0 && /*#__PURE__*/React.createElement(Swatches, null, presets.map(function (preset) {
       return /*#__PURE__*/React.createElement(WithTooltip, {
         key: preset.value,
         hasChrome: false,
-        tooltip: /*#__PURE__*/React.createElement(TooltipNote, {
-          note: preset.title
+        tooltip: /*#__PURE__*/React.createElement(Note, {
+          note: preset.keyword || preset.value
         })
       }, /*#__PURE__*/React.createElement(Swatch, {
-        style: {
-          background: preset[colorSpace]
-        },
-        active: (color === null || color === void 0 ? void 0 : color.rgb) === preset.rgb,
+        value: preset[colorSpace],
+        active: color && id(preset[colorSpace]) === id(color[colorSpace]),
         onClick: function onClick() {
-          return _onChange(preset[colorSpace]);
+          return updateValue(preset.value);
         }
       }));
     })))
   }, /*#__PURE__*/React.createElement(Swatch, {
-    round: true,
+    value: realValue,
     style: {
-      background: currentValue || '#000000'
+      margin: 4
     }
   })), /*#__PURE__*/React.createElement(Input, {
-    value: currentValue,
+    value: value,
     onChange: function onChange(e) {
-      return _onChange(e.target.value);
+      return updateValue(e.target.value);
     },
     onFocus: function onFocus(e) {
       return e.target.select();

package/dist/esm/controls/Date.js

@@ -28,9 +28,7 @@ var parseDate = function parseDate(value) {
       day = _value$split2[2];
 
   var result = new Date();
-  result.setFullYear(parseInt(year, 10));
-  result.setMonth(parseInt(month, 10) - 1);
-  result.setDate(parseInt(day, 10));
+  result.setFullYear(parseInt(year, 10), parseInt(month, 10) - 1, parseInt(day, 10));
   return result;
 };
 
@@ -111,9 +109,7 @@ export var DateControl = function DateControl(_ref2) {
   var onDateChange = function onDateChange(e) {
     var parsed = parseDate(e.target.value);
     var result = new Date(value);
-    result.setFullYear(parsed.getFullYear());
-    result.setMonth(parsed.getMonth());
-    result.setDate(parsed.getDate());
+    result.setFullYear(parsed.getFullYear(), parsed.getMonth(), parsed.getDate());
     var time = result.getTime();
     if (time) onChange(time);
     setValid(!!time);

package/dist/esm/controls/Object.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.function.name.js";
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -17,7 +18,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import React, { useCallback, useMemo, useState } from 'react';
 import { styled, useTheme } from '@storybook/theming'; // @ts-ignore
 
-import { JsonTree } from './react-editable-json-tree';
+import { JsonTree, getObjectType } from './react-editable-json-tree';
 import { Form } from '../form';
 import { Icons } from '../icon/icon';
 import { IconButton } from '../bar/button';
@@ -294,7 +295,7 @@ export var ObjectControl = function ObjectControl(_ref7) {
     placeholder: "Enter JSON string",
     valid: parseError ? 'error' : null
   });
-  return /*#__PURE__*/React.createElement(Wrapper, null, hasData && /*#__PURE__*/React.createElement(RawButton, {
+  return /*#__PURE__*/React.createElement(Wrapper, null, hasData && ['Object', 'Array'].includes(getObjectType(data)) && /*#__PURE__*/React.createElement(RawButton, {
     onClick: function onClick() {
       return setShowRaw(function (v) {
         return !v;

package/dist/esm/controls/react-editable-json-tree/index.js

@@ -252,6 +252,7 @@ JsonTree.defaultProps = {
   fallback: null
 };
 export { JsonTree };
+export { getObjectType };
 export { ADD_DELTA_TYPE };
 export { REMOVE_DELTA_TYPE };
 export { UPDATE_DELTA_TYPE };