@bigbinary/neetoui 5.1.16 → 5.1.17

package/index.js

@@ -19839,6 +19839,7 @@ var ColorPicker = function ColorPicker(_ref) {
     _useState2 = _slicedToArray$2(_useState, 2),
     colorInternal = _useState2[0],
     setColorInternal = _useState2[1];
+  var isInputChanged = useRef(false);
   var _useEyeDropper = useEyeDropper({
       pickRadius: 3
       // cursorActive: CSS Cursors,
@@ -19852,15 +19853,31 @@ var ColorPicker = function ColorPicker(_ref) {
   var PickerComponent = showTransparencyControl ? ne : Z;
   var colorValue = (_ref2 = color !== null && color !== void 0 ? color : colorInternal) !== null && _ref2 !== void 0 ? _ref2 : "";
   var onChangeInternal = onChange || setColorInternal;
-  var onColorChange = function onColorChange(hex) {
+  var getColor = function getColor(colorValue) {
+    var color = tinycolor(colorValue);
+    return {
+      hex: showTransparencyControl ? color.toHex8String() : color.toHexString(),
+      rgb: color.toRgb()
+    };
+  };
+  var onColorInputChange = function onColorInputChange(hex) {
     var color = tinycolor(hex);
     var rgb = color.toRgb();
-    var hexValue = showTransparencyControl ? color.toHex8String() : color.toHexString();
+    isInputChanged.current = true;
     onChangeInternal({
-      hex: hexValue,
+      hex: hex,
       rgb: rgb
     });
   };
+  var onPickerChange = function onPickerChange(hex) {
+    return onChangeInternal(getColor(hex));
+  };
+  var onBlur = function onBlur() {
+    // If input is not changed, don't call onChange on blur
+    if (!isInputChanged.current) return;
+    isInputChanged.current = false;
+    onChangeInternal(getColor(colorValue));
+  };
   var pickColor = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
       var colorResponse, colorHex;
@@ -19873,7 +19890,7 @@ var ColorPicker = function ColorPicker(_ref) {
           case 3:
             colorResponse = _context.sent;
             colorHex = tinycolor(colorResponse.sRGBHex).toHexString();
-            onColorChange(colorHex);
+            onPickerChange(colorHex);
             _context.next = 10;
             break;
           case 8:
@@ -19929,7 +19946,7 @@ var ColorPicker = function ColorPicker(_ref) {
     className: "neeto-ui-colorpicker__pointer"
   }, /*#__PURE__*/React__default.createElement(PickerComponent, {
     color: colorValue,
-    onChange: onColorChange
+    onChange: onPickerChange
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-mt-2 neeto-ui-gap-2"
   }, showEyeDropper && isSupported() && /*#__PURE__*/React__default.createElement(Button, {
@@ -19947,7 +19964,8 @@ var ColorPicker = function ColorPicker(_ref) {
   }, /*#__PURE__*/React__default.createElement(Oe, {
     alpha: !!showTransparencyControl,
     color: colorValue,
-    onChange: onColorChange
+    onBlur: onBlur,
+    onChange: onColorInputChange
   })))), colorPaletteProps && /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-colorpicker__palette-wrapper",
     "data-testid": "color-palette"