@bigbinary/neetoui 5.1.16 → 5.1.18

package/index.cjs.js

@@ -19857,18 +19857,20 @@ var ColorPicker = function ColorPicker(_ref) {
     size = _ref$size === void 0 ? TARGET_SIZES.large : _ref$size,
     _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? noop$2 : _ref$onChange,
-    _ref$colorPaletteProp = _ref.colorPaletteProps,
-    colorPaletteProps = _ref$colorPaletteProp === void 0 ? null : _ref$colorPaletteProp,
+    colorPaletteProps = _ref.colorPaletteProps,
     _ref$showEyeDropper = _ref.showEyeDropper,
     showEyeDropper = _ref$showEyeDropper === void 0 ? false : _ref$showEyeDropper,
     _ref$showHexValue = _ref.showHexValue,
     showHexValue = _ref$showHexValue === void 0 ? false : _ref$showHexValue,
     _ref$showTransparency = _ref.showTransparencyControl,
-    showTransparencyControl = _ref$showTransparency === void 0 ? false : _ref$showTransparency;
+    showTransparencyControl = _ref$showTransparency === void 0 ? false : _ref$showTransparency,
+    _ref$showPicker = _ref.showPicker,
+    showPicker = _ref$showPicker === void 0 ? true : _ref$showPicker;
   var _useState = React$5.useState(color),
     _useState2 = _slicedToArray$2(_useState, 2),
     colorInternal = _useState2[0],
     setColorInternal = _useState2[1];
+  var isInputChanged = React$5.useRef(false);
   var _useEyeDropper = useEyeDropper({
       pickRadius: 3
       // cursorActive: CSS Cursors,
@@ -19882,15 +19884,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;
@@ -19903,7 +19921,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:
@@ -19955,11 +19973,12 @@ var ColorPicker = function ColorPicker(_ref) {
     position: "bottom-start"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-colorpicker__popover"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-colorpicker__pointer"
+  }, showPicker && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-ui-colorpicker__pointer",
+    "data-testid": "neeto-color-picker-section"
   }, /*#__PURE__*/React__default["default"].createElement(PickerComponent, {
     color: colorValue,
-    onChange: onColorChange
+    onChange: onPickerChange
   })), /*#__PURE__*/React__default["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["default"].createElement(Button, {
@@ -19977,10 +19996,13 @@ var ColorPicker = function ColorPicker(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(Oe, {
     alpha: !!showTransparencyControl,
     color: colorValue,
-    onChange: onColorChange
-  })))), colorPaletteProps && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-colorpicker__palette-wrapper",
-    "data-testid": "color-palette"
+    onBlur: onBlur,
+    onChange: onColorInputChange
+  }))))), colorPaletteProps && /*#__PURE__*/React__default["default"].createElement("div", {
+    "data-testid": "color-palette",
+    className: classnames$1("neeto-ui-colorpicker__palette-wrapper", {
+      "neeto-ui-colorpicker__palette-wrapper--hidden-picker": !showPicker
+    })
   }, /*#__PURE__*/React__default["default"].createElement(Palette, colorPaletteProps))));
 };