@chaoswise/ui 2.5.4 → 2.5.6

package/lib/ColorPicker/SketchPicker/components/common/EditableInput.js

@@ -0,0 +1,172 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { Component, PureComponent } from 'react';
+import reactCSS from 'reactcss';
+var DEFAULT_ARROW_OFFSET = 1;
+var UP_KEY_CODE = 38;
+var DOWN_KEY_CODE = 40;
+var VALID_KEY_CODES = [UP_KEY_CODE, DOWN_KEY_CODE];
+var isValidKeyCode = function isValidKeyCode(keyCode) {
+  return VALID_KEY_CODES.indexOf(keyCode) > -1;
+};
+var getNumberValue = function getNumberValue(value) {
+  return Number(String(value).replace(/%/g, ''));
+};
+var idCounter = 1;
+export var EditableInput = /*#__PURE__*/function (_ref) {
+  _inherits(EditableInput, _ref);
+  function EditableInput(props) {
+    var _this;
+    _classCallCheck(this, EditableInput);
+    _this = _callSuper(this, EditableInput);
+    _defineProperty(_assertThisInitialized(_this), "handleBlur", function () {
+      if (_this.state.blurValue) {
+        _this.setState({
+          value: _this.state.blurValue,
+          blurValue: null
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (e) {
+      _this.setUpdatedValue(e.target.value, e);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
+      // In case `e.target.value` is a percentage remove the `%` character
+      // and update accordingly with a percentage
+      // https://github.com/casesandberg/react-color/issues/383
+      var value = getNumberValue(e.target.value);
+      if (!isNaN(value) && isValidKeyCode(e.keyCode)) {
+        var offset = _this.getArrowOffset();
+        var updatedValue = e.keyCode === UP_KEY_CODE ? value + offset : value - offset;
+        _this.setUpdatedValue(updatedValue, e);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleDrag", function (e) {
+      if (_this.props.dragLabel) {
+        var newValue = Math.round(_this.props.value + e.movementX);
+        if (newValue >= 0 && newValue <= _this.props.dragMax) {
+          _this.props.onChange && _this.props.onChange(_this.getValueObjectWithLabel(newValue), e);
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function (e) {
+      if (_this.props.dragLabel) {
+        e.preventDefault();
+        _this.handleDrag(e);
+        window.addEventListener('mousemove', _this.handleDrag);
+        window.addEventListener('mouseup', _this.handleMouseUp);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseUp", function () {
+      _this.unbindEventListeners();
+    });
+    _defineProperty(_assertThisInitialized(_this), "unbindEventListeners", function () {
+      window.removeEventListener('mousemove', _this.handleDrag);
+      window.removeEventListener('mouseup', _this.handleMouseUp);
+    });
+    _this.state = {
+      value: String(props.value).toUpperCase(),
+      blurValue: String(props.value).toUpperCase()
+    };
+    _this.inputId = "rc-editable-input-".concat(idCounter++);
+    return _this;
+  }
+  _createClass(EditableInput, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (this.props.value !== this.state.value && (prevProps.value !== this.props.value || prevState.value !== this.state.value)) {
+        if (this.input === document.activeElement) {
+          this.setState({
+            blurValue: String(this.props.value).toUpperCase()
+          });
+        } else {
+          this.setState({
+            value: String(this.props.value).toUpperCase(),
+            blurValue: !this.state.blurValue && String(this.props.value).toUpperCase()
+          });
+        }
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.unbindEventListeners();
+    }
+  }, {
+    key: "getValueObjectWithLabel",
+    value: function getValueObjectWithLabel(value) {
+      return _defineProperty({}, this.props.label, value);
+    }
+  }, {
+    key: "getArrowOffset",
+    value: function getArrowOffset() {
+      return this.props.arrowOffset || DEFAULT_ARROW_OFFSET;
+    }
+  }, {
+    key: "setUpdatedValue",
+    value: function setUpdatedValue(value, e) {
+      var onChangeValue = this.props.label ? this.getValueObjectWithLabel(value) : value;
+      this.props.onChange && this.props.onChange(onChangeValue, e);
+      this.setState({
+        value: value
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var styles = reactCSS({
+        'default': {
+          wrap: {
+            position: 'relative'
+          }
+        },
+        'user-override': {
+          wrap: this.props.style && this.props.style.wrap ? this.props.style.wrap : {},
+          input: this.props.style && this.props.style.input ? this.props.style.input : {},
+          label: this.props.style && this.props.style.label ? this.props.style.label : {}
+        },
+        'dragLabel-true': {
+          label: {
+            cursor: 'ew-resize'
+          }
+        }
+      }, {
+        'user-override': true
+      }, this.props);
+      return /*#__PURE__*/React.createElement("div", {
+        style: styles.wrap
+      }, /*#__PURE__*/React.createElement("input", {
+        id: this.inputId,
+        style: styles.input,
+        ref: function ref(input) {
+          return _this2.input = input;
+        },
+        value: this.state.value,
+        onKeyDown: this.handleKeyDown,
+        onChange: this.handleChange,
+        onBlur: this.handleBlur,
+        placeholder: this.props.placeholder,
+        spellCheck: "false"
+      }), this.props.label && !this.props.hideLabel ? /*#__PURE__*/React.createElement("label", {
+        htmlFor: this.inputId,
+        style: styles.label,
+        onMouseDown: this.handleMouseDown
+      }, this.props.label) : null);
+    }
+  }]);
+  return EditableInput;
+}(PureComponent || Component);
+export default EditableInput;

package/lib/ColorPicker/SketchPicker/components/common/Hue.js

@@ -0,0 +1,118 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { Component, PureComponent } from "react";
+import reactCSS from "reactcss";
+import * as hue from "../../helpers/hue";
+import { floor, round } from "@chaoswise/utils";
+export var Hue = /*#__PURE__*/function (_ref) {
+  _inherits(Hue, _ref);
+  function Hue() {
+    var _this;
+    _classCallCheck(this, Hue);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, Hue, [].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (e) {
+      var change = hue.calculateChange(e, _this.props.direction, _this.props.hsl, _this.container);
+      change && typeof _this.props.onChange === "function" && _this.props.onChange(change, e);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function (e) {
+      _this.handleChange(e);
+      window.addEventListener("mousemove", _this.handleChange);
+      window.addEventListener("mouseup", _this.handleMouseUp);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseUp", function () {
+      _this.unbindEventListeners();
+    });
+    return _this;
+  }
+  _createClass(Hue, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.unbindEventListeners();
+    }
+  }, {
+    key: "unbindEventListeners",
+    value: function unbindEventListeners() {
+      window.removeEventListener("mousemove", this.handleChange);
+      window.removeEventListener("mouseup", this.handleMouseUp);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props$direction = this.props.direction,
+        direction = _this$props$direction === void 0 ? "horizontal" : _this$props$direction;
+      var leftValue = this.props.hsl.h * 100 / 360;
+      var resLeft = floor(leftValue) === 0 ? 0 : round(leftValue);
+      var styles = reactCSS({
+        "default": {
+          hue: {
+            absolute: "0px 0px 0px 0px",
+            borderRadius: this.props.radius,
+            boxShadow: this.props.shadow
+          },
+          container: {
+            margin: "0 3px",
+            position: "relative",
+            height: "100%",
+            borderRadius: this.props.radius
+          },
+          pointer: {
+            position: "absolute",
+            left: "".concat(resLeft, "%")
+          },
+          slider: {
+            marginTop: "1px",
+            width: "4px",
+            borderRadius: "1px",
+            height: "8px",
+            boxShadow: "0 0 2px rgba(0, 0, 0, .6)",
+            background: "#fff",
+            transform: "translateX(-2px)"
+          }
+        },
+        vertical: {
+          pointer: {
+            left: "0px",
+            top: "".concat(-(this.props.hsl.h * 100 / 360) + 100, "%")
+          }
+        }
+      }, {
+        vertical: direction === "vertical"
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        style: styles.hue,
+        className: "hue-".concat(direction, "-custom")
+      }, /*#__PURE__*/React.createElement("style", null, "\n            .hue-horizontal-custom {\n              background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0\n                33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n              background: -webkit-linear-gradient(to right, #f00 0%, #ff0\n                17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n            }\n\n            .hue-vertical {\n              background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,\n                #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n              background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,\n                #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n            }\n          "), /*#__PURE__*/React.createElement("div", {
+        className: "hue-".concat(direction),
+        style: styles.container,
+        ref: function ref(container) {
+          return _this2.container = container;
+        },
+        onMouseDown: this.handleMouseDown,
+        onTouchMove: this.handleChange,
+        onTouchStart: this.handleChange
+      }, /*#__PURE__*/React.createElement("div", {
+        style: styles.pointer
+      }, this.props.pointer ? /*#__PURE__*/React.createElement(this.props.pointer, this.props) : /*#__PURE__*/React.createElement("div", {
+        style: styles.slider
+      }))));
+    }
+  }]);
+  return Hue;
+}(PureComponent || Component);
+export default Hue;

package/lib/ColorPicker/SketchPicker/components/common/Raised.js

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactCSS from 'reactcss';
+import merge from 'lodash/merge';
+export var Raised = function Raised(_ref) {
+  var zDepth = _ref.zDepth,
+    radius = _ref.radius,
+    background = _ref.background,
+    children = _ref.children,
+    _ref$styles = _ref.styles,
+    passedStyles = _ref$styles === void 0 ? {} : _ref$styles;
+  var styles = reactCSS(merge({
+    'default': {
+      wrap: {
+        position: 'relative',
+        display: 'inline-block'
+      },
+      content: {
+        position: 'relative'
+      },
+      bg: {
+        absolute: '0px 0px 0px 0px',
+        boxShadow: "0 ".concat(zDepth, "px ").concat(zDepth * 4, "px rgba(0,0,0,.24)"),
+        borderRadius: radius,
+        background: background
+      }
+    },
+    'zDepth-0': {
+      bg: {
+        boxShadow: 'none'
+      }
+    },
+    'zDepth-1': {
+      bg: {
+        boxShadow: '0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)'
+      }
+    },
+    'zDepth-2': {
+      bg: {
+        boxShadow: '0 6px 20px rgba(0,0,0,.19), 0 8px 17px rgba(0,0,0,.2)'
+      }
+    },
+    'zDepth-3': {
+      bg: {
+        boxShadow: '0 17px 50px rgba(0,0,0,.19), 0 12px 15px rgba(0,0,0,.24)'
+      }
+    },
+    'zDepth-4': {
+      bg: {
+        boxShadow: '0 25px 55px rgba(0,0,0,.21), 0 16px 28px rgba(0,0,0,.22)'
+      }
+    },
+    'zDepth-5': {
+      bg: {
+        boxShadow: '0 40px 77px rgba(0,0,0,.22), 0 27px 24px rgba(0,0,0,.2)'
+      }
+    },
+    'square': {
+      bg: {
+        borderRadius: '0'
+      }
+    },
+    'circle': {
+      bg: {
+        borderRadius: '50%'
+      }
+    }
+  }, passedStyles), {
+    'zDepth-1': zDepth === 1
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: styles.wrap
+  }, /*#__PURE__*/React.createElement("div", {
+    style: styles.bg
+  }), /*#__PURE__*/React.createElement("div", {
+    style: styles.content
+  }, children));
+};
+Raised.propTypes = {
+  background: PropTypes.string,
+  zDepth: PropTypes.oneOf([0, 1, 2, 3, 4, 5]),
+  radius: PropTypes.number,
+  styles: PropTypes.object
+};
+Raised.defaultProps = {
+  background: '#fff',
+  zDepth: 1,
+  radius: 2,
+  styles: {}
+};
+export default Raised;

package/lib/ColorPicker/SketchPicker/components/common/Saturation.js

@@ -0,0 +1,139 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { Component, PureComponent } from 'react';
+import reactCSS from 'reactcss';
+import throttle from 'lodash/throttle';
+import * as saturation from '../../helpers/saturation';
+export var Saturation = /*#__PURE__*/function (_ref) {
+  _inherits(Saturation, _ref);
+  function Saturation(props) {
+    var _this;
+    _classCallCheck(this, Saturation);
+    _this = _callSuper(this, Saturation, [props]);
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (e) {
+      typeof _this.props.onChange === 'function' && _this.throttle(_this.props.onChange, saturation.calculateChange(e, _this.props.hsl, _this.container), e);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function (e) {
+      _this.handleChange(e);
+      var renderWindow = _this.getContainerRenderWindow();
+      renderWindow.addEventListener('mousemove', _this.handleChange);
+      renderWindow.addEventListener('mouseup', _this.handleMouseUp);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleMouseUp", function () {
+      _this.unbindEventListeners();
+    });
+    _this.throttle = throttle(function (fn, data, e) {
+      fn(data, e);
+    }, 50);
+    return _this;
+  }
+  _createClass(Saturation, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.throttle.cancel();
+      this.unbindEventListeners();
+    }
+  }, {
+    key: "getContainerRenderWindow",
+    value: function getContainerRenderWindow() {
+      var container = this.container;
+      var renderWindow = window;
+      while (!renderWindow.document.contains(container) && renderWindow.parent !== renderWindow) {
+        renderWindow = renderWindow.parent;
+      }
+      return renderWindow;
+    }
+  }, {
+    key: "unbindEventListeners",
+    value: function unbindEventListeners() {
+      var renderWindow = this.getContainerRenderWindow();
+      renderWindow.removeEventListener('mousemove', this.handleChange);
+      renderWindow.removeEventListener('mouseup', this.handleMouseUp);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _ref2 = this.props.style || {},
+        color = _ref2.color,
+        white = _ref2.white,
+        black = _ref2.black,
+        pointer = _ref2.pointer,
+        circle = _ref2.circle;
+      var styles = reactCSS({
+        'default': {
+          color: {
+            absolute: '0px 0px 0px 0px',
+            background: "hsl(".concat(this.props.hsl.h, ",100%, 50%)"),
+            borderRadius: this.props.radius
+          },
+          white: {
+            absolute: '0px 0px 0px 0px',
+            borderRadius: this.props.radius
+          },
+          black: {
+            absolute: '0px 0px 0px 0px',
+            boxShadow: this.props.shadow,
+            borderRadius: this.props.radius
+          },
+          pointer: {
+            position: 'absolute',
+            top: "".concat(-(this.props.hsv.v * 100) + 100, "%"),
+            left: "".concat(this.props.hsv.s * 100, "%"),
+            cursor: 'default'
+          },
+          circle: {
+            width: '4px',
+            height: '4px',
+            boxShadow: "0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n            0 0 1px 2px rgba(0,0,0,.4)",
+            borderRadius: '50%',
+            cursor: 'hand',
+            transform: 'translate(-2px, -2px)'
+          }
+        },
+        'custom': {
+          color: color,
+          white: white,
+          black: black,
+          pointer: pointer,
+          circle: circle
+        }
+      }, {
+        'custom': !!this.props.style
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        style: styles.color,
+        ref: function ref(container) {
+          return _this2.container = container;
+        },
+        onMouseDown: this.handleMouseDown,
+        onTouchMove: this.handleChange,
+        onTouchStart: this.handleChange
+      }, /*#__PURE__*/React.createElement("style", null, "\n          .saturation-white {\n            background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));\n            background: linear-gradient(to right, #fff, rgba(255,255,255,0));\n          }\n          .saturation-black {\n            background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));\n            background: linear-gradient(to top, #000, rgba(0,0,0,0));\n          }\n        "), /*#__PURE__*/React.createElement("div", {
+        style: styles.white,
+        className: "saturation-white"
+      }, /*#__PURE__*/React.createElement("div", {
+        style: styles.black,
+        className: "saturation-black"
+      }), /*#__PURE__*/React.createElement("div", {
+        style: styles.pointer
+      }, this.props.pointer ? /*#__PURE__*/React.createElement(this.props.pointer, this.props) : /*#__PURE__*/React.createElement("div", {
+        style: styles.circle
+      }))));
+    }
+  }]);
+  return Saturation;
+}(PureComponent || Component);
+export default Saturation;

package/lib/ColorPicker/SketchPicker/components/common/Swatch.js

@@ -0,0 +1,62 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import reactCSS from 'reactcss';
+import { handleFocus } from '../../helpers/interaction';
+import Checkboard from './Checkboard';
+var ENTER = 13;
+export var Swatch = function Swatch(_ref) {
+  var color = _ref.color,
+    style = _ref.style,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    onHover = _ref.onHover,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? color : _ref$title,
+    children = _ref.children,
+    focus = _ref.focus,
+    _ref$focusStyle = _ref.focusStyle,
+    focusStyle = _ref$focusStyle === void 0 ? {} : _ref$focusStyle;
+  var transparent = color === 'transparent';
+  var styles = reactCSS({
+    "default": {
+      swatch: _objectSpread(_objectSpread({
+        background: color,
+        height: '100%',
+        width: '100%',
+        cursor: 'pointer',
+        position: 'relative',
+        outline: 'none'
+      }, style), focus ? focusStyle : {})
+    }
+  });
+  var handleClick = function handleClick(e) {
+    return onClick(color, e);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    return e.keyCode === ENTER && onClick(color, e);
+  };
+  var handleHover = function handleHover(e) {
+    return onHover(color, e);
+  };
+  var optionalEvents = {};
+  if (onHover) {
+    optionalEvents.onMouseOver = handleHover;
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({
+    style: styles.swatch,
+    onClick: handleClick,
+    title: title,
+    tabIndex: 0,
+    onKeyDown: handleKeyDown
+  }, optionalEvents), children, transparent && /*#__PURE__*/React.createElement(Checkboard, {
+    borderRadius: styles.swatch.borderRadius,
+    boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.1)"
+  }));
+};
+export default handleFocus(Swatch);

package/lib/ColorPicker/SketchPicker/components/common/index.js

@@ -0,0 +1,8 @@
+export { default as Alpha } from './Alpha';
+export { default as Checkboard } from './Checkboard';
+export { default as EditableInput } from './EditableInput';
+export { default as Hue } from './Hue';
+export { default as Raised } from './Raised';
+export { default as Saturation } from './Saturation';
+export { default as ColorWrap } from './ColorWrap';
+export { default as Swatch } from './Swatch';