@uiw/react-color-saturation - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

lib/cjs/index.d.ts

 import React from 'react';
 import { HsvaColor } from '@uiw/color-convert';
 export * from '@uiw/color-convert';
-interface ColorSaturationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface ColorSaturationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     prefixCls?: string;
+    /** hsva => `{ h: 0, s: 75, v: 82, a: 1 }` */
     hsva: HsvaColor;
-    onChange: (newColor: HsvaColor) => void;
+    onChange?: (newColor: HsvaColor) => void;
 }
 declare const _default: React.ForwardRefExoticComponent<ColorSaturationProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

lib/cjs/index.js

@@ -5,4 +5,2 @@ "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
@@ -16,5 +14,7 @@ value: true
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
@@ -35,35 +35,47 @@ var _colorConvert = require("@uiw/color-convert");
 
+var _reactDragEventInteractive = _interopRequireDefault(require("@uiw/react-drag-event-interactive"));
+
 var _Pointer = require("./Pointer");
 
-var _utils = require("./utils");
+var _excluded = ["prefixCls", "className", "style", "hsva", "onChange"];
 
-var _excluded = ["prefixCls", "hsva", "onChange"];
-
 var _default = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$prefixCls = props.prefixCls,
       prefixCls = _props$prefixCls === void 0 ? 'w-color-saturation' : _props$prefixCls,
+      className = props.className,
+      style = props.style,
       hsva = props.hsva,
       onChange = props.onChange,
       other = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var container = (0, _react.useRef)(null);
-  (0, _react.useImperativeHandle)(ref, function () {
-    return container.current;
-  });
-  var containerStyle = {
+  var containerStyle = (0, _objectSpread2.default)((0, _objectSpread2.default)({
     width: 200,
-    height: 200,
+    height: 200
+  }, style), {}, {
     position: 'relative',
     backgroundColor: "hsl(".concat(hsva.h, ",100%, 50%)")
+  });
+
+  var handleChange = function handleChange(interaction, event) {
+    onChange && onChange({
+      h: hsva.h,
+      s: interaction.left * 100,
+      v: (1 - interaction.top) * 100,
+      a: hsva.a // source: 'hsv',
+
+    });
   };
+
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    className: prefixCls,
+    className: "".concat(prefixCls, " ").concat(className || ''),
     style: containerStyle,
-    ref: container
-  }, other, {
-    onMouseDown: function onMouseDown(event) {
-      var rect = (0, _utils.calculateChange)(event, hsva, container.current);
-      onChange && onChange(rect);
-    }
-  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref
+  }, other), /*#__PURE__*/_react.default.createElement(_reactDragEventInteractive.default, {
     style: {
+      position: 'absolute',
+      inset: 0
+    },
+    onMove: handleChange,
+    onDown: handleChange
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
       inset: 0,
@@ -84,6 +96,6 @@ background: 'linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0))',
     color: (0, _colorConvert.hsvaToHslaString)(hsva)
-  }))));
+  })))));
 });
 
 exports.default = _default;
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9pbmRleC50c3giXSwibmFtZXMiOlsiUmVhY3QiLCJmb3J3YXJkUmVmIiwicHJvcHMiLCJyZWYiLCJwcmVmaXhDbHMiLCJoc3ZhIiwib25DaGFuZ2UiLCJvdGhlciIsImNvbnRhaW5lciIsImN1cnJlbnQiLCJjb250YWluZXJTdHlsZSIsIndpZHRoIiwiaGVpZ2h0IiwicG9zaXRpb24iLCJiYWNrZ3JvdW5kQ29sb3IiLCJoIiwiZXZlbnQiLCJyZWN0IiwiaW5zZXQiLCJiYWNrZ3JvdW5kIiwidiIsInMiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQTs7QUFDQTs7QUFJQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBOztBQUhBOztBQUNBOzs7OzRCQVdlQSxlQUFNQyxVQUFOLENBQ2IsVUFBQ0MsS0FBRCxFQUFRQyxHQUFSLEVBQWdCO0FBQ2QseUJBS0lELEtBTEosQ0FDRUUsU0FERjtBQUFBLE1BQ0VBLFNBREYsaUNBQ2Msb0JBRGQ7QUFBQSxNQUVFQyxJQUZGLEdBS0lILEtBTEosQ0FFRUcsSUFGRjtBQUFBLE1BR0VDLFFBSEYsR0FLSUosS0FMSixDQUdFSSxRQUhGO0FBQUEsTUFJS0MsS0FKTCwwQ0FLSUwsS0FMSjtBQU1BLE1BQU1NLFNBQVMsR0FBRyxtQkFBdUIsSUFBdkIsQ0FBbEI7QUFFQSxrQ0FBb0JMLEdBQXBCLEVBQXlCO0FBQUEsV0FBTUssU0FBUyxDQUFDQyxPQUFoQjtBQUFBLEdBQXpCO0FBQ0EsTUFBTUMsY0FBbUMsR0FBRztBQUMxQ0MsSUFBQUEsS0FBSyxFQUFFLEdBRG1DO0FBRTFDQyxJQUFBQSxNQUFNLEVBQUUsR0FGa0M7QUFHMUNDLElBQUFBLFFBQVEsRUFBRSxVQUhnQztBQUkxQ0MsSUFBQUEsZUFBZSxnQkFBU1QsSUFBSSxDQUFDVSxDQUFkO0FBSjJCLEdBQTVDO0FBTUEsc0JBQ0U7QUFDRSxJQUFBLFNBQVMsRUFBRVgsU0FEYjtBQUVFLElBQUEsS0FBSyxFQUFFTSxjQUZUO0FBR0UsSUFBQSxHQUFHLEVBQUVGO0FBSFAsS0FJTUQsS0FKTjtBQUtFLElBQUEsV0FBVyxFQUFFLHFCQUFDUyxLQUFELEVBQVc7QUFDdEIsVUFBTUMsSUFBSSxHQUFHLDRCQUFnQkQsS0FBaEIsRUFBOEJYLElBQTlCLEVBQW9DRyxTQUFTLENBQUNDLE9BQTlDLENBQWI7QUFDQUgsTUFBQUEsUUFBUSxJQUFJQSxRQUFRLENBQUNXLElBQUQsQ0FBcEI7QUFDRDtBQVJILG1CQVVFO0FBQ0UsSUFBQSxLQUFLLEVBQUU7QUFDTEMsTUFBQUEsS0FBSyxFQUFFLENBREY7QUFFTEMsTUFBQUEsVUFBVSxFQUNSLHVFQUhHO0FBSUxOLE1BQUFBLFFBQVEsRUFBRTtBQUpMO0FBRFQsa0JBUUU7QUFDRSxJQUFBLEtBQUssRUFBRTtBQUNMSyxNQUFBQSxLQUFLLEVBQUUsQ0FERjtBQUVMQyxNQUFBQSxVQUFVLEVBQ1IseURBSEc7QUFJTE4sTUFBQUEsUUFBUSxFQUFFO0FBSkw7QUFEVCxrQkFRRSw2QkFBQyxnQkFBRDtBQUNFLElBQUEsU0FBUyxFQUFFVCxTQURiO0FBRUUsSUFBQSxHQUFHLFlBQUssTUFBTUMsSUFBSSxDQUFDZSxDQUFoQixNQUZMO0FBR0UsSUFBQSxJQUFJLFlBQUtmLElBQUksQ0FBQ2dCLENBQVYsTUFITjtBQUlFLElBQUEsS0FBSyxFQUFFLG9DQUFpQmhCLElBQWpCO0FBSlQsSUFSRixDQVJGLENBVkYsQ0FERjtBQXFDRCxDQXREWSxDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZVJlZiwgdXNlSW1wZXJhdGl2ZUhhbmRsZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IEhzdmFDb2xvciwgaHN2YVRvSHNsYVN0cmluZyB9IGZyb20gJ0B1aXcvY29sb3ItY29udmVydCc7XG5pbXBvcnQgeyBQb2ludGVyIH0gZnJvbSAnLi9Qb2ludGVyJztcbmltcG9ydCB7IGNhbGN1bGF0ZUNoYW5nZSB9IGZyb20gJy4vdXRpbHMnO1xuXG5leHBvcnQgKiBmcm9tICdAdWl3L2NvbG9yLWNvbnZlcnQnO1xuXG5pbnRlcmZhY2UgQ29sb3JTYXR1cmF0aW9uUHJvcHNcbiAgZXh0ZW5kcyBPbWl0PFJlYWN0LkhUTUxBdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50PiwgJ29uQ2hhbmdlJz4ge1xuICBwcmVmaXhDbHM/OiBzdHJpbmc7XG4gIGhzdmE6IEhzdmFDb2xvcjtcbiAgb25DaGFuZ2U6IChuZXdDb2xvcjogSHN2YUNvbG9yKSA9PiB2b2lkO1xufVxuXG5leHBvcnQgZGVmYXVsdCBSZWFjdC5mb3J3YXJkUmVmPEhUTUxEaXZFbGVtZW50LCBDb2xvclNhdHVyYXRpb25Qcm9wcz4oXG4gIChwcm9wcywgcmVmKSA9PiB7XG4gICAgY29uc3Qge1xuICAgICAgcHJlZml4Q2xzID0gJ3ctY29sb3Itc2F0dXJhdGlvbicsXG4gICAgICBoc3ZhLFxuICAgICAgb25DaGFuZ2UsXG4gICAgICAuLi5vdGhlclxuICAgIH0gPSBwcm9wcztcbiAgICBjb25zdCBjb250YWluZXIgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuXG4gICAgdXNlSW1wZXJhdGl2ZUhhbmRsZShyZWYsICgpID0+IGNvbnRhaW5lci5jdXJyZW50ISk7XG4gICAgY29uc3QgY29udGFpbmVyU3R5bGU6IFJlYWN0LkNTU1Byb3BlcnRpZXMgPSB7XG4gICAgICB3aWR0aDogMjAwLFxuICAgICAgaGVpZ2h0OiAyMDAsXG4gICAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICAgIGJhY2tncm91bmRDb2xvcjogYGhzbCgke2hzdmEuaH0sMTAwJSwgNTAlKWAsXG4gICAgfTtcbiAgICByZXR1cm4gKFxuICAgICAgPGRpdlxuICAgICAgICBjbGFzc05hbWU9e3ByZWZpeENsc31cbiAgICAgICAgc3R5bGU9e2NvbnRhaW5lclN0eWxlfVxuICAgICAgICByZWY9e2NvbnRhaW5lcn1cbiAgICAgICAgey4uLm90aGVyfVxuICAgICAgICBvbk1vdXNlRG93bj17KGV2ZW50KSA9PiB7XG4gICAgICAgICAgY29uc3QgcmVjdCA9IGNhbGN1bGF0ZUNoYW5nZShldmVudCBhcyBhbnksIGhzdmEsIGNvbnRhaW5lci5jdXJyZW50ISk7XG4gICAgICAgICAgb25DaGFuZ2UgJiYgb25DaGFuZ2UocmVjdCk7XG4gICAgICAgIH19XG4gICAgICA+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgaW5zZXQ6IDAsXG4gICAgICAgICAgICBiYWNrZ3JvdW5kOlxuICAgICAgICAgICAgICAnbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LCByZ2IoMjU1LCAyNTUsIDI1NSksIHJnYmEoMjU1LCAyNTUsIDI1NSwgMCkpJyxcbiAgICAgICAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgICAgIH19XG4gICAgICAgID5cbiAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgICBpbnNldDogMCxcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDpcbiAgICAgICAgICAgICAgICAnbGluZWFyLWdyYWRpZW50KHRvIHRvcCwgcmdiKDAsIDAsIDApLCByZ2JhKDAsIDAsIDAsIDApKScsXG4gICAgICAgICAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgICAgICAgfX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICA8UG9pbnRlclxuICAgICAgICAgICAgICBwcmVmaXhDbHM9e3ByZWZpeENsc31cbiAgICAgICAgICAgICAgdG9wPXtgJHsxMDAgLSBoc3ZhLnZ9JWB9XG4gICAgICAgICAgICAgIGxlZnQ9e2Ake2hzdmEuc30lYH1cbiAgICAgICAgICAgICAgY29sb3I9e2hzdmFUb0hzbGFTdHJpbmcoaHN2YSl9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH0sXG4pO1xuIl19
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9pbmRleC50c3giXSwibmFtZXMiOlsiUmVhY3QiLCJmb3J3YXJkUmVmIiwicHJvcHMiLCJyZWYiLCJwcmVmaXhDbHMiLCJjbGFzc05hbWUiLCJzdHlsZSIsImhzdmEiLCJvbkNoYW5nZSIsIm90aGVyIiwiY29udGFpbmVyU3R5bGUiLCJ3aWR0aCIsImhlaWdodCIsInBvc2l0aW9uIiwiYmFja2dyb3VuZENvbG9yIiwiaCIsImhhbmRsZUNoYW5nZSIsImludGVyYWN0aW9uIiwiZXZlbnQiLCJzIiwibGVmdCIsInYiLCJ0b3AiLCJhIiwiaW5zZXQiLCJiYWNrZ3JvdW5kIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7O0FBQUE7O0FBQ0E7O0FBSUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTs7QUFIQTs7QUFDQTs7Ozs0QkFXZUEsZUFBTUMsVUFBTixDQUF1RCxVQUFDQyxLQUFELEVBQVFDLEdBQVIsRUFBZ0I7QUFDcEYseUJBQXlGRCxLQUF6RixDQUFRRSxTQUFSO0FBQUEsTUFBUUEsU0FBUixpQ0FBb0Isb0JBQXBCO0FBQUEsTUFBMENDLFNBQTFDLEdBQXlGSCxLQUF6RixDQUEwQ0csU0FBMUM7QUFBQSxNQUFxREMsS0FBckQsR0FBeUZKLEtBQXpGLENBQXFESSxLQUFyRDtBQUFBLE1BQTREQyxJQUE1RCxHQUF5RkwsS0FBekYsQ0FBNERLLElBQTVEO0FBQUEsTUFBa0VDLFFBQWxFLEdBQXlGTixLQUF6RixDQUFrRU0sUUFBbEU7QUFBQSxNQUErRUMsS0FBL0UsMENBQXlGUCxLQUF6RjtBQUNBLE1BQU1RLGNBQW1DO0FBQ3ZDQyxJQUFBQSxLQUFLLEVBQUUsR0FEZ0M7QUFFdkNDLElBQUFBLE1BQU0sRUFBRTtBQUYrQixLQUdwQ04sS0FIb0M7QUFJdkNPLElBQUFBLFFBQVEsRUFBRSxVQUo2QjtBQUt2Q0MsSUFBQUEsZUFBZSxnQkFBU1AsSUFBSSxDQUFDUSxDQUFkO0FBTHdCLElBQXpDOztBQVFBLE1BQU1DLFlBQVksR0FBRyxTQUFmQSxZQUFlLENBQUNDLFdBQUQsRUFBMkJDLEtBQTNCLEVBQThEO0FBQ2pGVixJQUFBQSxRQUFRLElBQ05BLFFBQVEsQ0FBQztBQUNQTyxNQUFBQSxDQUFDLEVBQUVSLElBQUksQ0FBQ1EsQ0FERDtBQUVQSSxNQUFBQSxDQUFDLEVBQUVGLFdBQVcsQ0FBQ0csSUFBWixHQUFtQixHQUZmO0FBR1BDLE1BQUFBLENBQUMsRUFBRSxDQUFDLElBQUlKLFdBQVcsQ0FBQ0ssR0FBakIsSUFBd0IsR0FIcEI7QUFJUEMsTUFBQUEsQ0FBQyxFQUFFaEIsSUFBSSxDQUFDZ0IsQ0FKRCxDQUtQOztBQUxPLEtBQUQsQ0FEVjtBQVFELEdBVEQ7O0FBV0Esc0JBQ0U7QUFBSyxJQUFBLFNBQVMsWUFBS25CLFNBQUwsY0FBa0JDLFNBQVMsSUFBSSxFQUEvQixDQUFkO0FBQW1ELElBQUEsS0FBSyxFQUFFSyxjQUExRDtBQUEwRSxJQUFBLEdBQUcsRUFBRVA7QUFBL0UsS0FBd0ZNLEtBQXhGLGdCQUNFLDZCQUFDLGtDQUFEO0FBQ0UsSUFBQSxLQUFLLEVBQUU7QUFDTEksTUFBQUEsUUFBUSxFQUFFLFVBREw7QUFFTFcsTUFBQUEsS0FBSyxFQUFFO0FBRkYsS0FEVDtBQUtFLElBQUEsTUFBTSxFQUFFUixZQUxWO0FBTUUsSUFBQSxNQUFNLEVBQUVBO0FBTlYsa0JBUUU7QUFDRSxJQUFBLEtBQUssRUFBRTtBQUNMUSxNQUFBQSxLQUFLLEVBQUUsQ0FERjtBQUVMQyxNQUFBQSxVQUFVLEVBQUUsdUVBRlA7QUFHTFosTUFBQUEsUUFBUSxFQUFFO0FBSEw7QUFEVCxrQkFPRTtBQUNFLElBQUEsS0FBSyxFQUFFO0FBQ0xXLE1BQUFBLEtBQUssRUFBRSxDQURGO0FBRUxDLE1BQUFBLFVBQVUsRUFBRSx5REFGUDtBQUdMWixNQUFBQSxRQUFRLEVBQUU7QUFITDtBQURULGtCQU9FLDZCQUFDLGdCQUFEO0FBQVMsSUFBQSxTQUFTLEVBQUVULFNBQXBCO0FBQStCLElBQUEsR0FBRyxZQUFLLE1BQU1HLElBQUksQ0FBQ2MsQ0FBaEIsTUFBbEM7QUFBd0QsSUFBQSxJQUFJLFlBQUtkLElBQUksQ0FBQ1ksQ0FBVixNQUE1RDtBQUE0RSxJQUFBLEtBQUssRUFBRSxvQ0FBaUJaLElBQWpCO0FBQW5GLElBUEYsQ0FQRixDQVJGLENBREYsQ0FERjtBQThCRCxDQW5EYyxDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IEhzdmFDb2xvciwgaHN2YVRvSHNsYVN0cmluZyB9IGZyb20gJ0B1aXcvY29sb3ItY29udmVydCc7XG5pbXBvcnQgSW50ZXJhY3RpdmUsIHsgSW50ZXJhY3Rpb24gfSBmcm9tICdAdWl3L3JlYWN0LWRyYWctZXZlbnQtaW50ZXJhY3RpdmUnO1xuaW1wb3J0IHsgUG9pbnRlciB9IGZyb20gJy4vUG9pbnRlcic7XG5cbmV4cG9ydCAqIGZyb20gJ0B1aXcvY29sb3ItY29udmVydCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgQ29sb3JTYXR1cmF0aW9uUHJvcHMgZXh0ZW5kcyBPbWl0PFJlYWN0LkhUTUxBdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50PiwgJ29uQ2hhbmdlJz4ge1xuICBwcmVmaXhDbHM/OiBzdHJpbmc7XG4gIC8qKiBoc3ZhID0+IGB7IGg6IDAsIHM6IDc1LCB2OiA4MiwgYTogMSB9YCAqL1xuICBoc3ZhOiBIc3ZhQ29sb3I7XG4gIG9uQ2hhbmdlPzogKG5ld0NvbG9yOiBIc3ZhQ29sb3IpID0+IHZvaWQ7XG59XG5cbmV4cG9ydCBkZWZhdWx0IFJlYWN0LmZvcndhcmRSZWY8SFRNTERpdkVsZW1lbnQsIENvbG9yU2F0dXJhdGlvblByb3BzPigocHJvcHMsIHJlZikgPT4ge1xuICBjb25zdCB7IHByZWZpeENscyA9ICd3LWNvbG9yLXNhdHVyYXRpb24nLCBjbGFzc05hbWUsIHN0eWxlLCBoc3ZhLCBvbkNoYW5nZSwgLi4ub3RoZXIgfSA9IHByb3BzO1xuICBjb25zdCBjb250YWluZXJTdHlsZTogUmVhY3QuQ1NTUHJvcGVydGllcyA9IHtcbiAgICB3aWR0aDogMjAwLFxuICAgIGhlaWdodDogMjAwLFxuICAgIC4uLnN0eWxlLFxuICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgIGJhY2tncm91bmRDb2xvcjogYGhzbCgke2hzdmEuaH0sMTAwJSwgNTAlKWAsXG4gIH07XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gKGludGVyYWN0aW9uOiBJbnRlcmFjdGlvbiwgZXZlbnQ6IE1vdXNlRXZlbnQgfCBUb3VjaEV2ZW50KSA9PiB7XG4gICAgb25DaGFuZ2UgJiZcbiAgICAgIG9uQ2hhbmdlKHtcbiAgICAgICAgaDogaHN2YS5oLFxuICAgICAgICBzOiBpbnRlcmFjdGlvbi5sZWZ0ICogMTAwLFxuICAgICAgICB2OiAoMSAtIGludGVyYWN0aW9uLnRvcCkgKiAxMDAsXG4gICAgICAgIGE6IGhzdmEuYSxcbiAgICAgICAgLy8gc291cmNlOiAnaHN2JyxcbiAgICAgIH0pO1xuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWU9e2Ake3ByZWZpeENsc30gJHtjbGFzc05hbWUgfHwgJyd9YH0gc3R5bGU9e2NvbnRhaW5lclN0eWxlfSByZWY9e3JlZn0gey4uLm90aGVyfT5cbiAgICAgIDxJbnRlcmFjdGl2ZVxuICAgICAgICBzdHlsZT17e1xuICAgICAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgICAgIGluc2V0OiAwLFxuICAgICAgICB9fVxuICAgICAgICBvbk1vdmU9e2hhbmRsZUNoYW5nZX1cbiAgICAgICAgb25Eb3duPXtoYW5kbGVDaGFuZ2V9XG4gICAgICA+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgaW5zZXQ6IDAsXG4gICAgICAgICAgICBiYWNrZ3JvdW5kOiAnbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LCByZ2IoMjU1LCAyNTUsIDI1NSksIHJnYmEoMjU1LCAyNTUsIDI1NSwgMCkpJyxcbiAgICAgICAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgICAgIH19XG4gICAgICAgID5cbiAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgICBpbnNldDogMCxcbiAgICAgICAgICAgICAgYmFja2dyb3VuZDogJ2xpbmVhci1ncmFkaWVudCh0byB0b3AsIHJnYigwLCAwLCAwKSwgcmdiYSgwLCAwLCAwLCAwKSknLFxuICAgICAgICAgICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgICAgICAgIH19XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPFBvaW50ZXIgcHJlZml4Q2xzPXtwcmVmaXhDbHN9IHRvcD17YCR7MTAwIC0gaHN2YS52fSVgfSBsZWZ0PXtgJHtoc3ZhLnN9JWB9IGNvbG9yPXtoc3ZhVG9Ic2xhU3RyaW5nKGhzdmEpfSAvPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvSW50ZXJhY3RpdmU+XG4gICAgPC9kaXY+XG4gICk7XG59KTtcbiJdfQ==

lib/cjs/Pointer.d.ts

 import React from 'react';
-interface PointerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface PointerProps extends React.HTMLAttributes<HTMLDivElement> {
     prefixCls?: string;
@@ -8,3 +8,2 @@ top?: string;
 }
-export declare const Pointer: ({ className, color, left, top, prefixCls, }: PointerProps) => JSX.Element;
-export {};
+export declare const Pointer: ({ className, color, left, top, prefixCls }: PointerProps) => JSX.Element;

lib/cjs/Pointer.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 
@@ -10,4 +10,6 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
+var BOXSHADOW = 'rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px';
+
 var Pointer = function Pointer(_ref) {
@@ -24,19 +26,28 @@ var className = _ref.className,
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(prefixCls, "-pointer ").concat(className || ''),
-    style: style
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(prefixCls, "-fill"),
-    style: {
-      width: 5,
-      height: 5,
-      transform: 'translate(-3px, -3px)',
-      boxShadow: 'rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px',
-      borderRadius: '50%',
-      backgroundColor: color
-    }
-  }));
+  return (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-pointer ").concat(className || ''),
+      style: style
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-fill"),
+      style: {
+        width: 5,
+        height: 5,
+        transform: 'translate(-3px, -3px)',
+        boxShadow: BOXSHADOW,
+        borderRadius: '50%',
+        backgroundColor: '#fff'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        inset: 0,
+        borderRadius: '50%',
+        position: 'absolute',
+        backgroundColor: color
+      }
+    })));
+  }, [top, left, color, className, prefixCls]);
 };
 
 exports.Pointer = Pointer;
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Qb2ludGVyLnRzeCJdLCJuYW1lcyI6WyJQb2ludGVyIiwiY2xhc3NOYW1lIiwiY29sb3IiLCJsZWZ0IiwidG9wIiwicHJlZml4Q2xzIiwic3R5bGUiLCJwb3NpdGlvbiIsIndpZHRoIiwiaGVpZ2h0IiwidHJhbnNmb3JtIiwiYm94U2hhZG93IiwiYm9yZGVyUmFkaXVzIiwiYmFja2dyb3VuZENvbG9yIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQTs7QUFTTyxJQUFNQSxPQUFPLEdBQUcsU0FBVkEsT0FBVSxPQU1VO0FBQUEsTUFML0JDLFNBSytCLFFBTC9CQSxTQUsrQjtBQUFBLE1BSi9CQyxLQUkrQixRQUovQkEsS0FJK0I7QUFBQSxNQUgvQkMsSUFHK0IsUUFIL0JBLElBRytCO0FBQUEsTUFGL0JDLEdBRStCLFFBRi9CQSxHQUUrQjtBQUFBLE1BRC9CQyxTQUMrQixRQUQvQkEsU0FDK0I7QUFDL0IsTUFBTUMsS0FBMEIsR0FBRztBQUNqQ0MsSUFBQUEsUUFBUSxFQUFFLFVBRHVCO0FBRWpDSCxJQUFBQSxHQUFHLEVBQUhBLEdBRmlDO0FBR2pDRCxJQUFBQSxJQUFJLEVBQUpBO0FBSGlDLEdBQW5DO0FBTUEsc0JBQ0U7QUFBSyxJQUFBLFNBQVMsWUFBS0UsU0FBTCxzQkFBMEJKLFNBQVMsSUFBSSxFQUF2QyxDQUFkO0FBQTJELElBQUEsS0FBSyxFQUFFSztBQUFsRSxrQkFDRTtBQUNFLElBQUEsU0FBUyxZQUFLRCxTQUFMLFVBRFg7QUFFRSxJQUFBLEtBQUssRUFBRTtBQUNMRyxNQUFBQSxLQUFLLEVBQUUsQ0FERjtBQUVMQyxNQUFBQSxNQUFNLEVBQUUsQ0FGSDtBQUdMQyxNQUFBQSxTQUFTLEVBQUUsdUJBSE47QUFJTEMsTUFBQUEsU0FBUyxFQUNQLDhHQUxHO0FBTUxDLE1BQUFBLFlBQVksRUFBRSxLQU5UO0FBT0xDLE1BQUFBLGVBQWUsRUFBRVg7QUFQWjtBQUZULElBREYsQ0FERjtBQWdCRCxDQTdCTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5cbmludGVyZmFjZSBQb2ludGVyUHJvcHMgZXh0ZW5kcyBSZWFjdC5IVE1MQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD4ge1xuICBwcmVmaXhDbHM/OiBzdHJpbmc7XG4gIHRvcD86IHN0cmluZztcbiAgbGVmdDogc3RyaW5nO1xuICBjb2xvcj86IHN0cmluZztcbn1cblxuZXhwb3J0IGNvbnN0IFBvaW50ZXIgPSAoe1xuICBjbGFzc05hbWUsXG4gIGNvbG9yLFxuICBsZWZ0LFxuICB0b3AsXG4gIHByZWZpeENscyxcbn06IFBvaW50ZXJQcm9wcyk6IEpTWC5FbGVtZW50ID0+IHtcbiAgY29uc3Qgc3R5bGU6IFJlYWN0LkNTU1Byb3BlcnRpZXMgPSB7XG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgdG9wLFxuICAgIGxlZnQsXG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IGNsYXNzTmFtZT17YCR7cHJlZml4Q2xzfS1wb2ludGVyICR7Y2xhc3NOYW1lIHx8ICcnfWB9IHN0eWxlPXtzdHlsZX0+XG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17YCR7cHJlZml4Q2xzfS1maWxsYH1cbiAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICB3aWR0aDogNSxcbiAgICAgICAgICBoZWlnaHQ6IDUsXG4gICAgICAgICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlKC0zcHgsIC0zcHgpJyxcbiAgICAgICAgICBib3hTaGFkb3c6XG4gICAgICAgICAgICAncmdiKDI1NSAyNTUgMjU1KSAwcHggMHB4IDBweCAxLjVweCwgcmdiKDAgMCAwIC8gMzAlKSAwcHggMHB4IDFweCAxcHggaW5zZXQsIHJnYigwIDAgMCAvIDQwJSkgMHB4IDBweCAxcHggMnB4JyxcbiAgICAgICAgICBib3JkZXJSYWRpdXM6ICc1MCUnLFxuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogY29sb3IsXG4gICAgICAgIH19XG4gICAgICAvPlxuICAgIDwvZGl2PlxuICApO1xufTtcbiJdfQ==
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Qb2ludGVyLnRzeCJdLCJuYW1lcyI6WyJCT1hTSEFET1ciLCJQb2ludGVyIiwiY2xhc3NOYW1lIiwiY29sb3IiLCJsZWZ0IiwidG9wIiwicHJlZml4Q2xzIiwic3R5bGUiLCJwb3NpdGlvbiIsIndpZHRoIiwiaGVpZ2h0IiwidHJhbnNmb3JtIiwiYm94U2hhZG93IiwiYm9yZGVyUmFkaXVzIiwiYmFja2dyb3VuZENvbG9yIiwiaW5zZXQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBOztBQVVBLElBQU1BLFNBQVMsR0FBRyw4R0FBbEI7O0FBRU8sSUFBTUMsT0FBTyxHQUFHLFNBQVZBLE9BQVUsT0FBMkU7QUFBQSxNQUF4RUMsU0FBd0UsUUFBeEVBLFNBQXdFO0FBQUEsTUFBN0RDLEtBQTZELFFBQTdEQSxLQUE2RDtBQUFBLE1BQXREQyxJQUFzRCxRQUF0REEsSUFBc0Q7QUFBQSxNQUFoREMsR0FBZ0QsUUFBaERBLEdBQWdEO0FBQUEsTUFBM0NDLFNBQTJDLFFBQTNDQSxTQUEyQztBQUNoRyxNQUFNQyxLQUEwQixHQUFHO0FBQ2pDQyxJQUFBQSxRQUFRLEVBQUUsVUFEdUI7QUFFakNILElBQUFBLEdBQUcsRUFBSEEsR0FGaUM7QUFHakNELElBQUFBLElBQUksRUFBSkE7QUFIaUMsR0FBbkM7QUFLQSxTQUFPLG9CQUNMO0FBQUEsd0JBQ0U7QUFBSyxNQUFBLFNBQVMsWUFBS0UsU0FBTCxzQkFBMEJKLFNBQVMsSUFBSSxFQUF2QyxDQUFkO0FBQTJELE1BQUEsS0FBSyxFQUFFSztBQUFsRSxvQkFDRTtBQUNFLE1BQUEsU0FBUyxZQUFLRCxTQUFMLFVBRFg7QUFFRSxNQUFBLEtBQUssRUFBRTtBQUNMRyxRQUFBQSxLQUFLLEVBQUUsQ0FERjtBQUVMQyxRQUFBQSxNQUFNLEVBQUUsQ0FGSDtBQUdMQyxRQUFBQSxTQUFTLEVBQUUsdUJBSE47QUFJTEMsUUFBQUEsU0FBUyxFQUFFWixTQUpOO0FBS0xhLFFBQUFBLFlBQVksRUFBRSxLQUxUO0FBTUxDLFFBQUFBLGVBQWUsRUFBRTtBQU5aO0FBRlQsb0JBV0U7QUFDRSxNQUFBLEtBQUssRUFBRTtBQUNMQyxRQUFBQSxLQUFLLEVBQUUsQ0FERjtBQUVMRixRQUFBQSxZQUFZLEVBQUUsS0FGVDtBQUdMTCxRQUFBQSxRQUFRLEVBQUUsVUFITDtBQUlMTSxRQUFBQSxlQUFlLEVBQUVYO0FBSlo7QUFEVCxNQVhGLENBREYsQ0FERjtBQUFBLEdBREssRUF5QkwsQ0FBQ0UsR0FBRCxFQUFNRCxJQUFOLEVBQVlELEtBQVosRUFBbUJELFNBQW5CLEVBQThCSSxTQUE5QixDQXpCSyxDQUFQO0FBMkJELENBakNNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZU1lbW8gfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUG9pbnRlclByb3BzIGV4dGVuZHMgUmVhY3QuSFRNTEF0dHJpYnV0ZXM8SFRNTERpdkVsZW1lbnQ+IHtcbiAgcHJlZml4Q2xzPzogc3RyaW5nO1xuICB0b3A/OiBzdHJpbmc7XG4gIGxlZnQ6IHN0cmluZztcbiAgY29sb3I/OiBzdHJpbmc7XG59XG5cbmNvbnN0IEJPWFNIQURPVyA9ICdyZ2IoMjU1IDI1NSAyNTUpIDBweCAwcHggMHB4IDEuNXB4LCByZ2IoMCAwIDAgLyAzMCUpIDBweCAwcHggMXB4IDFweCBpbnNldCwgcmdiKDAgMCAwIC8gNDAlKSAwcHggMHB4IDFweCAycHgnO1xuXG5leHBvcnQgY29uc3QgUG9pbnRlciA9ICh7IGNsYXNzTmFtZSwgY29sb3IsIGxlZnQsIHRvcCwgcHJlZml4Q2xzIH06IFBvaW50ZXJQcm9wcyk6IEpTWC5FbGVtZW50ID0+IHtcbiAgY29uc3Qgc3R5bGU6IFJlYWN0LkNTU1Byb3BlcnRpZXMgPSB7XG4gICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgdG9wLFxuICAgIGxlZnQsXG4gIH07XG4gIHJldHVybiB1c2VNZW1vKFxuICAgICgpID0+IChcbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtgJHtwcmVmaXhDbHN9LXBvaW50ZXIgJHtjbGFzc05hbWUgfHwgJyd9YH0gc3R5bGU9e3N0eWxlfT5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNsYXNzTmFtZT17YCR7cHJlZml4Q2xzfS1maWxsYH1cbiAgICAgICAgICBzdHlsZT17e1xuICAgICAgICAgICAgd2lkdGg6IDUsXG4gICAgICAgICAgICBoZWlnaHQ6IDUsXG4gICAgICAgICAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGUoLTNweCwgLTNweCknLFxuICAgICAgICAgICAgYm94U2hhZG93OiBCT1hTSEFET1csXG4gICAgICAgICAgICBib3JkZXJSYWRpdXM6ICc1MCUnLFxuICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2ZmZicsXG4gICAgICAgICAgfX1cbiAgICAgICAgPlxuICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICAgIGluc2V0OiAwLFxuICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6ICc1MCUnLFxuICAgICAgICAgICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiBjb2xvcixcbiAgICAgICAgICAgIH19XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICApLFxuICAgIFt0b3AsIGxlZnQsIGNvbG9yLCBjbGFzc05hbWUsIHByZWZpeENsc10sXG4gICk7XG59O1xuIl19

lib/esm/index.d.ts

 import React from 'react';
 import { HsvaColor } from '@uiw/color-convert';
 export * from '@uiw/color-convert';
-interface ColorSaturationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface ColorSaturationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     prefixCls?: string;
+    /** hsva => `{ h: 0, s: 75, v: 82, a: 1 }` */
     hsva: HsvaColor;
-    onChange: (newColor: HsvaColor) => void;
+    onChange?: (newColor: HsvaColor) => void;
 }
 declare const _default: React.ForwardRefExoticComponent<ColorSaturationProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;

lib/esm/index.js

 import _extends from "@babel/runtime/helpers/extends";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["prefixCls", "hsva", "onChange"];
-import React, { useRef, useImperativeHandle } from 'react';
+var _excluded = ["prefixCls", "className", "style", "hsva", "onChange"];
+import React from 'react';
 import { hsvaToHslaString } from '@uiw/color-convert';
+import Interactive from '@uiw/react-drag-event-interactive';
 import { Pointer } from './Pointer';
-import { calculateChange } from './utils';
 export * from '@uiw/color-convert';
@@ -12,2 +13,4 @@ export default /*#__PURE__*/React.forwardRef(function (props, ref) {
       prefixCls = _props$prefixCls === void 0 ? 'w-color-saturation' : _props$prefixCls,
+      className = props.className,
+      style = props.style,
       hsva = props.hsva,
@@ -17,23 +20,33 @@ onChange = props.onChange,
 
-  var container = useRef(null);
-  useImperativeHandle(ref, function () {
-    return container.current;
-  });
-  var containerStyle = {
+  var containerStyle = _objectSpread(_objectSpread({
     width: 200,
-    height: 200,
+    height: 200
+  }, style), {}, {
     position: 'relative',
     backgroundColor: "hsl(".concat(hsva.h, ",100%, 50%)")
+  });
+
+  var handleChange = function handleChange(interaction, event) {
+    onChange && onChange({
+      h: hsva.h,
+      s: interaction.left * 100,
+      v: (1 - interaction.top) * 100,
+      a: hsva.a // source: 'hsv',
+
+    });
   };
+
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: prefixCls,
+    className: "".concat(prefixCls, " ").concat(className || ''),
     style: containerStyle,
-    ref: container
-  }, other, {
-    onMouseDown: function onMouseDown(event) {
-      var rect = calculateChange(event, hsva, container.current);
-      onChange && onChange(rect);
-    }
-  }), /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, other), /*#__PURE__*/React.createElement(Interactive, {
     style: {
+      position: 'absolute',
+      inset: 0
+    },
+    onMove: handleChange,
+    onDown: handleChange
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
       inset: 0,
@@ -54,4 +67,4 @@ background: 'linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0))',
     color: hsvaToHslaString(hsva)
-  }))));
+  })))));
 });
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9pbmRleC50c3giXSwibmFtZXMiOlsiUmVhY3QiLCJ1c2VSZWYiLCJ1c2VJbXBlcmF0aXZlSGFuZGxlIiwiaHN2YVRvSHNsYVN0cmluZyIsIlBvaW50ZXIiLCJjYWxjdWxhdGVDaGFuZ2UiLCJmb3J3YXJkUmVmIiwicHJvcHMiLCJyZWYiLCJwcmVmaXhDbHMiLCJoc3ZhIiwib25DaGFuZ2UiLCJvdGhlciIsImNvbnRhaW5lciIsImN1cnJlbnQiLCJjb250YWluZXJTdHlsZSIsIndpZHRoIiwiaGVpZ2h0IiwicG9zaXRpb24iLCJiYWNrZ3JvdW5kQ29sb3IiLCJoIiwiZXZlbnQiLCJyZWN0IiwiaW5zZXQiLCJiYWNrZ3JvdW5kIiwidiIsInMiXSwibWFwcGluZ3MiOiI7OztBQUFBLE9BQU9BLEtBQVAsSUFBZ0JDLE1BQWhCLEVBQXdCQyxtQkFBeEIsUUFBbUQsT0FBbkQ7QUFDQSxTQUFvQkMsZ0JBQXBCLFFBQTRDLG9CQUE1QztBQUNBLFNBQVNDLE9BQVQsUUFBd0IsV0FBeEI7QUFDQSxTQUFTQyxlQUFULFFBQWdDLFNBQWhDO0FBRUEsY0FBYyxvQkFBZDtBQVNBLDRCQUFlTCxLQUFLLENBQUNNLFVBQU4sQ0FDYixVQUFDQyxLQUFELEVBQVFDLEdBQVIsRUFBZ0I7QUFDZCx5QkFLSUQsS0FMSixDQUNFRSxTQURGO0FBQUEsTUFDRUEsU0FERixpQ0FDYyxvQkFEZDtBQUFBLE1BRUVDLElBRkYsR0FLSUgsS0FMSixDQUVFRyxJQUZGO0FBQUEsTUFHRUMsUUFIRixHQUtJSixLQUxKLENBR0VJLFFBSEY7QUFBQSxNQUlLQyxLQUpMLDRCQUtJTCxLQUxKOztBQU1BLE1BQU1NLFNBQVMsR0FBR1osTUFBTSxDQUFpQixJQUFqQixDQUF4QjtBQUVBQyxFQUFBQSxtQkFBbUIsQ0FBQ00sR0FBRCxFQUFNO0FBQUEsV0FBTUssU0FBUyxDQUFDQyxPQUFoQjtBQUFBLEdBQU4sQ0FBbkI7QUFDQSxNQUFNQyxjQUFtQyxHQUFHO0FBQzFDQyxJQUFBQSxLQUFLLEVBQUUsR0FEbUM7QUFFMUNDLElBQUFBLE1BQU0sRUFBRSxHQUZrQztBQUcxQ0MsSUFBQUEsUUFBUSxFQUFFLFVBSGdDO0FBSTFDQyxJQUFBQSxlQUFlLGdCQUFTVCxJQUFJLENBQUNVLENBQWQ7QUFKMkIsR0FBNUM7QUFNQSxzQkFDRTtBQUNFLElBQUEsU0FBUyxFQUFFWCxTQURiO0FBRUUsSUFBQSxLQUFLLEVBQUVNLGNBRlQ7QUFHRSxJQUFBLEdBQUcsRUFBRUY7QUFIUCxLQUlNRCxLQUpOO0FBS0UsSUFBQSxXQUFXLEVBQUUscUJBQUNTLEtBQUQsRUFBVztBQUN0QixVQUFNQyxJQUFJLEdBQUdqQixlQUFlLENBQUNnQixLQUFELEVBQWVYLElBQWYsRUFBcUJHLFNBQVMsQ0FBQ0MsT0FBL0IsQ0FBNUI7QUFDQUgsTUFBQUEsUUFBUSxJQUFJQSxRQUFRLENBQUNXLElBQUQsQ0FBcEI7QUFDRDtBQVJILG1CQVVFO0FBQ0UsSUFBQSxLQUFLLEVBQUU7QUFDTEMsTUFBQUEsS0FBSyxFQUFFLENBREY7QUFFTEMsTUFBQUEsVUFBVSxFQUNSLHVFQUhHO0FBSUxOLE1BQUFBLFFBQVEsRUFBRTtBQUpMO0FBRFQsa0JBUUU7QUFDRSxJQUFBLEtBQUssRUFBRTtBQUNMSyxNQUFBQSxLQUFLLEVBQUUsQ0FERjtBQUVMQyxNQUFBQSxVQUFVLEVBQ1IseURBSEc7QUFJTE4sTUFBQUEsUUFBUSxFQUFFO0FBSkw7QUFEVCxrQkFRRSxvQkFBQyxPQUFEO0FBQ0UsSUFBQSxTQUFTLEVBQUVULFNBRGI7QUFFRSxJQUFBLEdBQUcsWUFBSyxNQUFNQyxJQUFJLENBQUNlLENBQWhCLE1BRkw7QUFHRSxJQUFBLElBQUksWUFBS2YsSUFBSSxDQUFDZ0IsQ0FBVixNQUhOO0FBSUUsSUFBQSxLQUFLLEVBQUV2QixnQkFBZ0IsQ0FBQ08sSUFBRDtBQUp6QixJQVJGLENBUkYsQ0FWRixDQURGO0FBcUNELENBdERZLENBQWYiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlUmVmLCB1c2VJbXBlcmF0aXZlSGFuZGxlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgSHN2YUNvbG9yLCBoc3ZhVG9Ic2xhU3RyaW5nIH0gZnJvbSAnQHVpdy9jb2xvci1jb252ZXJ0JztcbmltcG9ydCB7IFBvaW50ZXIgfSBmcm9tICcuL1BvaW50ZXInO1xuaW1wb3J0IHsgY2FsY3VsYXRlQ2hhbmdlIH0gZnJvbSAnLi91dGlscyc7XG5cbmV4cG9ydCAqIGZyb20gJ0B1aXcvY29sb3ItY29udmVydCc7XG5cbmludGVyZmFjZSBDb2xvclNhdHVyYXRpb25Qcm9wc1xuICBleHRlbmRzIE9taXQ8UmVhY3QuSFRNTEF0dHJpYnV0ZXM8SFRNTERpdkVsZW1lbnQ+LCAnb25DaGFuZ2UnPiB7XG4gIHByZWZpeENscz86IHN0cmluZztcbiAgaHN2YTogSHN2YUNvbG9yO1xuICBvbkNoYW5nZTogKG5ld0NvbG9yOiBIc3ZhQ29sb3IpID0+IHZvaWQ7XG59XG5cbmV4cG9ydCBkZWZhdWx0IFJlYWN0LmZvcndhcmRSZWY8SFRNTERpdkVsZW1lbnQsIENvbG9yU2F0dXJhdGlvblByb3BzPihcbiAgKHByb3BzLCByZWYpID0+IHtcbiAgICBjb25zdCB7XG4gICAgICBwcmVmaXhDbHMgPSAndy1jb2xvci1zYXR1cmF0aW9uJyxcbiAgICAgIGhzdmEsXG4gICAgICBvbkNoYW5nZSxcbiAgICAgIC4uLm90aGVyXG4gICAgfSA9IHByb3BzO1xuICAgIGNvbnN0IGNvbnRhaW5lciA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG5cbiAgICB1c2VJbXBlcmF0aXZlSGFuZGxlKHJlZiwgKCkgPT4gY29udGFpbmVyLmN1cnJlbnQhKTtcbiAgICBjb25zdCBjb250YWluZXJTdHlsZTogUmVhY3QuQ1NTUHJvcGVydGllcyA9IHtcbiAgICAgIHdpZHRoOiAyMDAsXG4gICAgICBoZWlnaHQ6IDIwMCxcbiAgICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiBgaHNsKCR7aHN2YS5ofSwxMDAlLCA1MCUpYCxcbiAgICB9O1xuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17cHJlZml4Q2xzfVxuICAgICAgICBzdHlsZT17Y29udGFpbmVyU3R5bGV9XG4gICAgICAgIHJlZj17Y29udGFpbmVyfVxuICAgICAgICB7Li4ub3RoZXJ9XG4gICAgICAgIG9uTW91c2VEb3duPXsoZXZlbnQpID0+IHtcbiAgICAgICAgICBjb25zdCByZWN0ID0gY2FsY3VsYXRlQ2hhbmdlKGV2ZW50IGFzIGFueSwgaHN2YSwgY29udGFpbmVyLmN1cnJlbnQhKTtcbiAgICAgICAgICBvbkNoYW5nZSAmJiBvbkNoYW5nZShyZWN0KTtcbiAgICAgICAgfX1cbiAgICAgID5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICBpbnNldDogMCxcbiAgICAgICAgICAgIGJhY2tncm91bmQ6XG4gICAgICAgICAgICAgICdsaW5lYXItZ3JhZGllbnQodG8gcmlnaHQsIHJnYigyNTUsIDI1NSwgMjU1KSwgcmdiYSgyNTUsIDI1NSwgMjU1LCAwKSknLFxuICAgICAgICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICAgICAgfX1cbiAgICAgICAgPlxuICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICAgIGluc2V0OiAwLFxuICAgICAgICAgICAgICBiYWNrZ3JvdW5kOlxuICAgICAgICAgICAgICAgICdsaW5lYXItZ3JhZGllbnQodG8gdG9wLCByZ2IoMCwgMCwgMCksIHJnYmEoMCwgMCwgMCwgMCkpJyxcbiAgICAgICAgICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICAgICAgICB9fVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxQb2ludGVyXG4gICAgICAgICAgICAgIHByZWZpeENscz17cHJlZml4Q2xzfVxuICAgICAgICAgICAgICB0b3A9e2AkezEwMCAtIGhzdmEudn0lYH1cbiAgICAgICAgICAgICAgbGVmdD17YCR7aHN2YS5zfSVgfVxuICAgICAgICAgICAgICBjb2xvcj17aHN2YVRvSHNsYVN0cmluZyhoc3ZhKX1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfSxcbik7XG4iXX0=
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9pbmRleC50c3giXSwibmFtZXMiOlsiUmVhY3QiLCJoc3ZhVG9Ic2xhU3RyaW5nIiwiSW50ZXJhY3RpdmUiLCJQb2ludGVyIiwiZm9yd2FyZFJlZiIsInByb3BzIiwicmVmIiwicHJlZml4Q2xzIiwiY2xhc3NOYW1lIiwic3R5bGUiLCJoc3ZhIiwib25DaGFuZ2UiLCJvdGhlciIsImNvbnRhaW5lclN0eWxlIiwid2lkdGgiLCJoZWlnaHQiLCJwb3NpdGlvbiIsImJhY2tncm91bmRDb2xvciIsImgiLCJoYW5kbGVDaGFuZ2UiLCJpbnRlcmFjdGlvbiIsImV2ZW50IiwicyIsImxlZnQiLCJ2IiwidG9wIiwiYSIsImluc2V0IiwiYmFja2dyb3VuZCJdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU9BLEtBQVAsTUFBa0IsT0FBbEI7QUFDQSxTQUFvQkMsZ0JBQXBCLFFBQTRDLG9CQUE1QztBQUNBLE9BQU9DLFdBQVAsTUFBeUMsbUNBQXpDO0FBQ0EsU0FBU0MsT0FBVCxRQUF3QixXQUF4QjtBQUVBLGNBQWMsb0JBQWQ7QUFTQSw0QkFBZUgsS0FBSyxDQUFDSSxVQUFOLENBQXVELFVBQUNDLEtBQUQsRUFBUUMsR0FBUixFQUFnQjtBQUNwRix5QkFBeUZELEtBQXpGLENBQVFFLFNBQVI7QUFBQSxNQUFRQSxTQUFSLGlDQUFvQixvQkFBcEI7QUFBQSxNQUEwQ0MsU0FBMUMsR0FBeUZILEtBQXpGLENBQTBDRyxTQUExQztBQUFBLE1BQXFEQyxLQUFyRCxHQUF5RkosS0FBekYsQ0FBcURJLEtBQXJEO0FBQUEsTUFBNERDLElBQTVELEdBQXlGTCxLQUF6RixDQUE0REssSUFBNUQ7QUFBQSxNQUFrRUMsUUFBbEUsR0FBeUZOLEtBQXpGLENBQWtFTSxRQUFsRTtBQUFBLE1BQStFQyxLQUEvRSw0QkFBeUZQLEtBQXpGOztBQUNBLE1BQU1RLGNBQW1DO0FBQ3ZDQyxJQUFBQSxLQUFLLEVBQUUsR0FEZ0M7QUFFdkNDLElBQUFBLE1BQU0sRUFBRTtBQUYrQixLQUdwQ04sS0FIb0M7QUFJdkNPLElBQUFBLFFBQVEsRUFBRSxVQUo2QjtBQUt2Q0MsSUFBQUEsZUFBZSxnQkFBU1AsSUFBSSxDQUFDUSxDQUFkO0FBTHdCLElBQXpDOztBQVFBLE1BQU1DLFlBQVksR0FBRyxTQUFmQSxZQUFlLENBQUNDLFdBQUQsRUFBMkJDLEtBQTNCLEVBQThEO0FBQ2pGVixJQUFBQSxRQUFRLElBQ05BLFFBQVEsQ0FBQztBQUNQTyxNQUFBQSxDQUFDLEVBQUVSLElBQUksQ0FBQ1EsQ0FERDtBQUVQSSxNQUFBQSxDQUFDLEVBQUVGLFdBQVcsQ0FBQ0csSUFBWixHQUFtQixHQUZmO0FBR1BDLE1BQUFBLENBQUMsRUFBRSxDQUFDLElBQUlKLFdBQVcsQ0FBQ0ssR0FBakIsSUFBd0IsR0FIcEI7QUFJUEMsTUFBQUEsQ0FBQyxFQUFFaEIsSUFBSSxDQUFDZ0IsQ0FKRCxDQUtQOztBQUxPLEtBQUQsQ0FEVjtBQVFELEdBVEQ7O0FBV0Esc0JBQ0U7QUFBSyxJQUFBLFNBQVMsWUFBS25CLFNBQUwsY0FBa0JDLFNBQVMsSUFBSSxFQUEvQixDQUFkO0FBQW1ELElBQUEsS0FBSyxFQUFFSyxjQUExRDtBQUEwRSxJQUFBLEdBQUcsRUFBRVA7QUFBL0UsS0FBd0ZNLEtBQXhGLGdCQUNFLG9CQUFDLFdBQUQ7QUFDRSxJQUFBLEtBQUssRUFBRTtBQUNMSSxNQUFBQSxRQUFRLEVBQUUsVUFETDtBQUVMVyxNQUFBQSxLQUFLLEVBQUU7QUFGRixLQURUO0FBS0UsSUFBQSxNQUFNLEVBQUVSLFlBTFY7QUFNRSxJQUFBLE1BQU0sRUFBRUE7QUFOVixrQkFRRTtBQUNFLElBQUEsS0FBSyxFQUFFO0FBQ0xRLE1BQUFBLEtBQUssRUFBRSxDQURGO0FBRUxDLE1BQUFBLFVBQVUsRUFBRSx1RUFGUDtBQUdMWixNQUFBQSxRQUFRLEVBQUU7QUFITDtBQURULGtCQU9FO0FBQ0UsSUFBQSxLQUFLLEVBQUU7QUFDTFcsTUFBQUEsS0FBSyxFQUFFLENBREY7QUFFTEMsTUFBQUEsVUFBVSxFQUFFLHlEQUZQO0FBR0xaLE1BQUFBLFFBQVEsRUFBRTtBQUhMO0FBRFQsa0JBT0Usb0JBQUMsT0FBRDtBQUFTLElBQUEsU0FBUyxFQUFFVCxTQUFwQjtBQUErQixJQUFBLEdBQUcsWUFBSyxNQUFNRyxJQUFJLENBQUNjLENBQWhCLE1BQWxDO0FBQXdELElBQUEsSUFBSSxZQUFLZCxJQUFJLENBQUNZLENBQVYsTUFBNUQ7QUFBNEUsSUFBQSxLQUFLLEVBQUVyQixnQkFBZ0IsQ0FBQ1MsSUFBRDtBQUFuRyxJQVBGLENBUEYsQ0FSRixDQURGLENBREY7QUE4QkQsQ0FuRGMsQ0FBZiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBIc3ZhQ29sb3IsIGhzdmFUb0hzbGFTdHJpbmcgfSBmcm9tICdAdWl3L2NvbG9yLWNvbnZlcnQnO1xuaW1wb3J0IEludGVyYWN0aXZlLCB7IEludGVyYWN0aW9uIH0gZnJvbSAnQHVpdy9yZWFjdC1kcmFnLWV2ZW50LWludGVyYWN0aXZlJztcbmltcG9ydCB7IFBvaW50ZXIgfSBmcm9tICcuL1BvaW50ZXInO1xuXG5leHBvcnQgKiBmcm9tICdAdWl3L2NvbG9yLWNvbnZlcnQnO1xuXG5leHBvcnQgaW50ZXJmYWNlIENvbG9yU2F0dXJhdGlvblByb3BzIGV4dGVuZHMgT21pdDxSZWFjdC5IVE1MQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD4sICdvbkNoYW5nZSc+IHtcbiAgcHJlZml4Q2xzPzogc3RyaW5nO1xuICAvKiogaHN2YSA9PiBgeyBoOiAwLCBzOiA3NSwgdjogODIsIGE6IDEgfWAgKi9cbiAgaHN2YTogSHN2YUNvbG9yO1xuICBvbkNoYW5nZT86IChuZXdDb2xvcjogSHN2YUNvbG9yKSA9PiB2b2lkO1xufVxuXG5leHBvcnQgZGVmYXVsdCBSZWFjdC5mb3J3YXJkUmVmPEhUTUxEaXZFbGVtZW50LCBDb2xvclNhdHVyYXRpb25Qcm9wcz4oKHByb3BzLCByZWYpID0+IHtcbiAgY29uc3QgeyBwcmVmaXhDbHMgPSAndy1jb2xvci1zYXR1cmF0aW9uJywgY2xhc3NOYW1lLCBzdHlsZSwgaHN2YSwgb25DaGFuZ2UsIC4uLm90aGVyIH0gPSBwcm9wcztcbiAgY29uc3QgY29udGFpbmVyU3R5bGU6IFJlYWN0LkNTU1Byb3BlcnRpZXMgPSB7XG4gICAgd2lkdGg6IDIwMCxcbiAgICBoZWlnaHQ6IDIwMCxcbiAgICAuLi5zdHlsZSxcbiAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IGBoc2woJHtoc3ZhLmh9LDEwMCUsIDUwJSlgLFxuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUNoYW5nZSA9IChpbnRlcmFjdGlvbjogSW50ZXJhY3Rpb24sIGV2ZW50OiBNb3VzZUV2ZW50IHwgVG91Y2hFdmVudCkgPT4ge1xuICAgIG9uQ2hhbmdlICYmXG4gICAgICBvbkNoYW5nZSh7XG4gICAgICAgIGg6IGhzdmEuaCxcbiAgICAgICAgczogaW50ZXJhY3Rpb24ubGVmdCAqIDEwMCxcbiAgICAgICAgdjogKDEgLSBpbnRlcmFjdGlvbi50b3ApICogMTAwLFxuICAgICAgICBhOiBoc3ZhLmEsXG4gICAgICAgIC8vIHNvdXJjZTogJ2hzdicsXG4gICAgICB9KTtcbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDxkaXYgY2xhc3NOYW1lPXtgJHtwcmVmaXhDbHN9ICR7Y2xhc3NOYW1lIHx8ICcnfWB9IHN0eWxlPXtjb250YWluZXJTdHlsZX0gcmVmPXtyZWZ9IHsuLi5vdGhlcn0+XG4gICAgICA8SW50ZXJhY3RpdmVcbiAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgICAgICBpbnNldDogMCxcbiAgICAgICAgfX1cbiAgICAgICAgb25Nb3ZlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uRG93bj17aGFuZGxlQ2hhbmdlfVxuICAgICAgPlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgIGluc2V0OiAwLFxuICAgICAgICAgICAgYmFja2dyb3VuZDogJ2xpbmVhci1ncmFkaWVudCh0byByaWdodCwgcmdiKDI1NSwgMjU1LCAyNTUpLCByZ2JhKDI1NSwgMjU1LCAyNTUsIDApKScsXG4gICAgICAgICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgICAgICB9fVxuICAgICAgICA+XG4gICAgICAgICAgPGRpdlxuICAgICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgICAgaW5zZXQ6IDAsXG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6ICdsaW5lYXItZ3JhZGllbnQodG8gdG9wLCByZ2IoMCwgMCwgMCksIHJnYmEoMCwgMCwgMCwgMCkpJyxcbiAgICAgICAgICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICAgICAgICB9fVxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxQb2ludGVyIHByZWZpeENscz17cHJlZml4Q2xzfSB0b3A9e2AkezEwMCAtIGhzdmEudn0lYH0gbGVmdD17YCR7aHN2YS5zfSVgfSBjb2xvcj17aHN2YVRvSHNsYVN0cmluZyhoc3ZhKX0gLz5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L0ludGVyYWN0aXZlPlxuICAgIDwvZGl2PlxuICApO1xufSk7XG4iXX0=

lib/esm/Pointer.d.ts

 import React from 'react';
-interface PointerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface PointerProps extends React.HTMLAttributes<HTMLDivElement> {
     prefixCls?: string;
@@ -8,3 +8,2 @@ top?: string;
 }
-export declare const Pointer: ({ className, color, left, top, prefixCls, }: PointerProps) => JSX.Element;
-export {};
+export declare const Pointer: ({ className, color, left, top, prefixCls }: PointerProps) => JSX.Element;

lib/esm/Pointer.js

 import React from 'react';
+import { useMemo } from 'react';
+var BOXSHADOW = 'rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px';
 export var Pointer = function Pointer(_ref) {
@@ -13,17 +15,26 @@ var className = _ref.className,
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-pointer ").concat(className || ''),
-    style: style
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-fill"),
-    style: {
-      width: 5,
-      height: 5,
-      transform: 'translate(-3px, -3px)',
-      boxShadow: 'rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px',
-      borderRadius: '50%',
-      backgroundColor: color
-    }
-  }));
+  return useMemo(function () {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-pointer ").concat(className || ''),
+      style: style
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-fill"),
+      style: {
+        width: 5,
+        height: 5,
+        transform: 'translate(-3px, -3px)',
+        boxShadow: BOXSHADOW,
+        borderRadius: '50%',
+        backgroundColor: '#fff'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        inset: 0,
+        borderRadius: '50%',
+        position: 'absolute',
+        backgroundColor: color
+      }
+    })));
+  }, [top, left, color, className, prefixCls]);
 };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Qb2ludGVyLnRzeCJdLCJuYW1lcyI6WyJSZWFjdCIsIlBvaW50ZXIiLCJjbGFzc05hbWUiLCJjb2xvciIsImxlZnQiLCJ0b3AiLCJwcmVmaXhDbHMiLCJzdHlsZSIsInBvc2l0aW9uIiwid2lkdGgiLCJoZWlnaHQiLCJ0cmFuc2Zvcm0iLCJib3hTaGFkb3ciLCJib3JkZXJSYWRpdXMiLCJiYWNrZ3JvdW5kQ29sb3IiXSwibWFwcGluZ3MiOiJBQUFBLE9BQU9BLEtBQVAsTUFBa0IsT0FBbEI7QUFTQSxPQUFPLElBQU1DLE9BQU8sR0FBRyxTQUFWQSxPQUFVLE9BTVU7QUFBQSxNQUwvQkMsU0FLK0IsUUFML0JBLFNBSytCO0FBQUEsTUFKL0JDLEtBSStCLFFBSi9CQSxLQUkrQjtBQUFBLE1BSC9CQyxJQUcrQixRQUgvQkEsSUFHK0I7QUFBQSxNQUYvQkMsR0FFK0IsUUFGL0JBLEdBRStCO0FBQUEsTUFEL0JDLFNBQytCLFFBRC9CQSxTQUMrQjtBQUMvQixNQUFNQyxLQUEwQixHQUFHO0FBQ2pDQyxJQUFBQSxRQUFRLEVBQUUsVUFEdUI7QUFFakNILElBQUFBLEdBQUcsRUFBSEEsR0FGaUM7QUFHakNELElBQUFBLElBQUksRUFBSkE7QUFIaUMsR0FBbkM7QUFNQSxzQkFDRTtBQUFLLElBQUEsU0FBUyxZQUFLRSxTQUFMLHNCQUEwQkosU0FBUyxJQUFJLEVBQXZDLENBQWQ7QUFBMkQsSUFBQSxLQUFLLEVBQUVLO0FBQWxFLGtCQUNFO0FBQ0UsSUFBQSxTQUFTLFlBQUtELFNBQUwsVUFEWDtBQUVFLElBQUEsS0FBSyxFQUFFO0FBQ0xHLE1BQUFBLEtBQUssRUFBRSxDQURGO0FBRUxDLE1BQUFBLE1BQU0sRUFBRSxDQUZIO0FBR0xDLE1BQUFBLFNBQVMsRUFBRSx1QkFITjtBQUlMQyxNQUFBQSxTQUFTLEVBQ1AsOEdBTEc7QUFNTEMsTUFBQUEsWUFBWSxFQUFFLEtBTlQ7QUFPTEMsTUFBQUEsZUFBZSxFQUFFWDtBQVBaO0FBRlQsSUFERixDQURGO0FBZ0JELENBN0JNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW50ZXJmYWNlIFBvaW50ZXJQcm9wcyBleHRlbmRzIFJlYWN0LkhUTUxBdHRyaWJ1dGVzPEhUTUxEaXZFbGVtZW50PiB7XG4gIHByZWZpeENscz86IHN0cmluZztcbiAgdG9wPzogc3RyaW5nO1xuICBsZWZ0OiBzdHJpbmc7XG4gIGNvbG9yPzogc3RyaW5nO1xufVxuXG5leHBvcnQgY29uc3QgUG9pbnRlciA9ICh7XG4gIGNsYXNzTmFtZSxcbiAgY29sb3IsXG4gIGxlZnQsXG4gIHRvcCxcbiAgcHJlZml4Q2xzLFxufTogUG9pbnRlclByb3BzKTogSlNYLkVsZW1lbnQgPT4ge1xuICBjb25zdCBzdHlsZTogUmVhY3QuQ1NTUHJvcGVydGllcyA9IHtcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3AsXG4gICAgbGVmdCxcbiAgfTtcblxuICByZXR1cm4gKFxuICAgIDxkaXYgY2xhc3NOYW1lPXtgJHtwcmVmaXhDbHN9LXBvaW50ZXIgJHtjbGFzc05hbWUgfHwgJyd9YH0gc3R5bGU9e3N0eWxlfT5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3NOYW1lPXtgJHtwcmVmaXhDbHN9LWZpbGxgfVxuICAgICAgICBzdHlsZT17e1xuICAgICAgICAgIHdpZHRoOiA1LFxuICAgICAgICAgIGhlaWdodDogNSxcbiAgICAgICAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGUoLTNweCwgLTNweCknLFxuICAgICAgICAgIGJveFNoYWRvdzpcbiAgICAgICAgICAgICdyZ2IoMjU1IDI1NSAyNTUpIDBweCAwcHggMHB4IDEuNXB4LCByZ2IoMCAwIDAgLyAzMCUpIDBweCAwcHggMXB4IDFweCBpbnNldCwgcmdiKDAgMCAwIC8gNDAlKSAwcHggMHB4IDFweCAycHgnLFxuICAgICAgICAgIGJvcmRlclJhZGl1czogJzUwJScsXG4gICAgICAgICAgYmFja2dyb3VuZENvbG9yOiBjb2xvcixcbiAgICAgICAgfX1cbiAgICAgIC8+XG4gICAgPC9kaXY+XG4gICk7XG59O1xuIl19
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Qb2ludGVyLnRzeCJdLCJuYW1lcyI6WyJSZWFjdCIsInVzZU1lbW8iLCJCT1hTSEFET1ciLCJQb2ludGVyIiwiY2xhc3NOYW1lIiwiY29sb3IiLCJsZWZ0IiwidG9wIiwicHJlZml4Q2xzIiwic3R5bGUiLCJwb3NpdGlvbiIsIndpZHRoIiwiaGVpZ2h0IiwidHJhbnNmb3JtIiwiYm94U2hhZG93IiwiYm9yZGVyUmFkaXVzIiwiYmFja2dyb3VuZENvbG9yIiwiaW5zZXQiXSwibWFwcGluZ3MiOiJBQUFBLE9BQU9BLEtBQVAsTUFBa0IsT0FBbEI7QUFDQSxTQUFTQyxPQUFULFFBQXdCLE9BQXhCO0FBU0EsSUFBTUMsU0FBUyxHQUFHLDhHQUFsQjtBQUVBLE9BQU8sSUFBTUMsT0FBTyxHQUFHLFNBQVZBLE9BQVUsT0FBMkU7QUFBQSxNQUF4RUMsU0FBd0UsUUFBeEVBLFNBQXdFO0FBQUEsTUFBN0RDLEtBQTZELFFBQTdEQSxLQUE2RDtBQUFBLE1BQXREQyxJQUFzRCxRQUF0REEsSUFBc0Q7QUFBQSxNQUFoREMsR0FBZ0QsUUFBaERBLEdBQWdEO0FBQUEsTUFBM0NDLFNBQTJDLFFBQTNDQSxTQUEyQztBQUNoRyxNQUFNQyxLQUEwQixHQUFHO0FBQ2pDQyxJQUFBQSxRQUFRLEVBQUUsVUFEdUI7QUFFakNILElBQUFBLEdBQUcsRUFBSEEsR0FGaUM7QUFHakNELElBQUFBLElBQUksRUFBSkE7QUFIaUMsR0FBbkM7QUFLQSxTQUFPTCxPQUFPLENBQ1o7QUFBQSx3QkFDRTtBQUFLLE1BQUEsU0FBUyxZQUFLTyxTQUFMLHNCQUEwQkosU0FBUyxJQUFJLEVBQXZDLENBQWQ7QUFBMkQsTUFBQSxLQUFLLEVBQUVLO0FBQWxFLG9CQUNFO0FBQ0UsTUFBQSxTQUFTLFlBQUtELFNBQUwsVUFEWDtBQUVFLE1BQUEsS0FBSyxFQUFFO0FBQ0xHLFFBQUFBLEtBQUssRUFBRSxDQURGO0FBRUxDLFFBQUFBLE1BQU0sRUFBRSxDQUZIO0FBR0xDLFFBQUFBLFNBQVMsRUFBRSx1QkFITjtBQUlMQyxRQUFBQSxTQUFTLEVBQUVaLFNBSk47QUFLTGEsUUFBQUEsWUFBWSxFQUFFLEtBTFQ7QUFNTEMsUUFBQUEsZUFBZSxFQUFFO0FBTlo7QUFGVCxvQkFXRTtBQUNFLE1BQUEsS0FBSyxFQUFFO0FBQ0xDLFFBQUFBLEtBQUssRUFBRSxDQURGO0FBRUxGLFFBQUFBLFlBQVksRUFBRSxLQUZUO0FBR0xMLFFBQUFBLFFBQVEsRUFBRSxVQUhMO0FBSUxNLFFBQUFBLGVBQWUsRUFBRVg7QUFKWjtBQURULE1BWEYsQ0FERixDQURGO0FBQUEsR0FEWSxFQXlCWixDQUFDRSxHQUFELEVBQU1ELElBQU4sRUFBWUQsS0FBWixFQUFtQkQsU0FBbkIsRUFBOEJJLFNBQTlCLENBekJZLENBQWQ7QUEyQkQsQ0FqQ00iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGludGVyZmFjZSBQb2ludGVyUHJvcHMgZXh0ZW5kcyBSZWFjdC5IVE1MQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD4ge1xuICBwcmVmaXhDbHM/OiBzdHJpbmc7XG4gIHRvcD86IHN0cmluZztcbiAgbGVmdDogc3RyaW5nO1xuICBjb2xvcj86IHN0cmluZztcbn1cblxuY29uc3QgQk9YU0hBRE9XID0gJ3JnYigyNTUgMjU1IDI1NSkgMHB4IDBweCAwcHggMS41cHgsIHJnYigwIDAgMCAvIDMwJSkgMHB4IDBweCAxcHggMXB4IGluc2V0LCByZ2IoMCAwIDAgLyA0MCUpIDBweCAwcHggMXB4IDJweCc7XG5cbmV4cG9ydCBjb25zdCBQb2ludGVyID0gKHsgY2xhc3NOYW1lLCBjb2xvciwgbGVmdCwgdG9wLCBwcmVmaXhDbHMgfTogUG9pbnRlclByb3BzKTogSlNYLkVsZW1lbnQgPT4ge1xuICBjb25zdCBzdHlsZTogUmVhY3QuQ1NTUHJvcGVydGllcyA9IHtcbiAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICB0b3AsXG4gICAgbGVmdCxcbiAgfTtcbiAgcmV0dXJuIHVzZU1lbW8oXG4gICAgKCkgPT4gKFxuICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake3ByZWZpeENsc30tcG9pbnRlciAke2NsYXNzTmFtZSB8fCAnJ31gfSBzdHlsZT17c3R5bGV9PlxuICAgICAgICA8ZGl2XG4gICAgICAgICAgY2xhc3NOYW1lPXtgJHtwcmVmaXhDbHN9LWZpbGxgfVxuICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICB3aWR0aDogNSxcbiAgICAgICAgICAgIGhlaWdodDogNSxcbiAgICAgICAgICAgIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZSgtM3B4LCAtM3B4KScsXG4gICAgICAgICAgICBib3hTaGFkb3c6IEJPWFNIQURPVyxcbiAgICAgICAgICAgIGJvcmRlclJhZGl1czogJzUwJScsXG4gICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6ICcjZmZmJyxcbiAgICAgICAgICB9fVxuICAgICAgICA+XG4gICAgICAgICAgPGRpdlxuICAgICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgICAgaW5zZXQ6IDAsXG4gICAgICAgICAgICAgIGJvcmRlclJhZGl1czogJzUwJScsXG4gICAgICAgICAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IGNvbG9yLFxuICAgICAgICAgICAgfX1cbiAgICAgICAgICAvPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICksXG4gICAgW3RvcCwgbGVmdCwgY29sb3IsIGNsYXNzTmFtZSwgcHJlZml4Q2xzXSxcbiAgKTtcbn07XG4iXX0=

package.json

 {
   "name": "@uiw/react-color-saturation",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Color Saturation",
@@ -9,2 +9,6 @@ "author": "Kenny Wong <[e-mail]>",
   "keywords": [
+    "react",
+    "react-color",
+    "react-color-saturation",
+    "saturation",
     "color",
@@ -24,3 +28,4 @@ "convert"
     "@babel/runtime": "7.14.6",
-    "@uiw/color-convert": "0.0.1"
+    "@uiw/color-convert": "^0.0.2",
+    "@uiw/react-drag-event-interactive": "^0.0.2"
   },
@@ -34,3 +39,4 @@ "devDependencies": {
     "react-test-renderer": "17.0.2"
-  }
+  },
+  "gitHead": "9505befd9da79920b371501b8cf2a320f3ab70c7"
 }

README.md

@@ -13,7 +13,13 @@ Color Saturation
 ```js
-import ColorSaturation from '@uiw/react-color-saturation';
+import Saturation from '@uiw/react-color-saturation';
 
 function Demo() {
+  const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
   return (
-    <ColorSaturation hsva={{ h: 0, s: 75, v: 82, a: 1 }} />
+    <Saturation
+      hsva={hsva}
+      onChange={(newColor) => {
+        setHsva({ ...hsva, ...newColor, a: hsva.a });
+      }}
+    />
   );
@@ -20,0 +26,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

38

increased by18.75%

Worsened metrics

Total package byte prevSize

32201

decreased by-15.25%

Dependency count

5

increased by25%

Number of package files

12

decreased by-29.41%

Lines of code

366

decreased by-16.44%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@uiw/react-drag-event-interactive@^0.0.2

• + Added@uiw/color-convert@0.0.2(transitive)

• + Added@uiw/react-drag-event-interactive@0.0.2(transitive)

• - Removed@uiw/color-convert@0.0.1(transitive)

• Updated@uiw/color-convert@^0.0.2