@bigbinary/neetoui 5.1.15 → 5.1.17

package/README.md

@@ -25,7 +25,7 @@ working, please import the neetoUI stylesheet to your main `scss` entry point.
 properly. Install the peer dependencies using the below command:
 
 ```
-yarn add react-toastify@9.0.1 formik@2.2.0 react-router-dom@5.2.0
+yarn add react-toastify@9.0.1 formik@2.2.0 react-router-dom@5.2.0 @bigbinary/neeto-icons antd@4.24.3 i18next@21.7.0
 ```
 
 ### `react-toastify`

package/index.cjs.js

@@ -19869,6 +19869,7 @@ var ColorPicker = function ColorPicker(_ref) {
     _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 +19883,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 = 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 +19920,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:
@@ -19959,7 +19976,7 @@ var ColorPicker = function ColorPicker(_ref) {
     className: "neeto-ui-colorpicker__pointer"
   }, /*#__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,7 +19994,8 @@ var ColorPicker = function ColorPicker(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(Oe, {
     alpha: !!showTransparencyControl,
     color: colorValue,
-    onChange: onColorChange
+    onBlur: onBlur,
+    onChange: onColorInputChange
   })))), colorPaletteProps && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-colorpicker__palette-wrapper",
     "data-testid": "color-palette"