react-iro-gradient-picker 1.1.5 → 1.1.7

package/README.md

@@ -59,12 +59,22 @@ yarn add react-iro-gradient-picker
 pnpm add react-iro-gradient-picker
 ```
 
+### ⚠️ **IMPORTANT: Import CSS Styles**
+
+**You MUST import the CSS file for the component to work properly:**
+
+```tsx
+import 'react-iro-gradient-picker/dist/index.css';
+```
+
+Add this import at the top of your main App.js/App.tsx file or in your main CSS/SCSS file.
+
 ### Basic Usage
 
 ```tsx
 import React, { useState } from 'react';
 import ColorPicker from 'react-iro-gradient-picker';
-import 'react-iro-gradient-picker/dist/index.css'; // Import CSS styles
+import 'react-iro-gradient-picker/dist/index.css'; // ⚠️ REQUIRED CSS import
 
 function App() {
   const [color, setColor] = useState('#3B82F6');
@@ -89,6 +99,7 @@ export default App;
 ```tsx
 import React, { useState } from 'react';
 import ColorPicker from 'react-iro-gradient-picker';
+import 'react-iro-gradient-picker/dist/index.css'; // ⚠️ REQUIRED CSS import
 
 function App() {
   const [color, setColor] = useState('#3B82F6');

package/dist/index.es.js

@@ -7632,39 +7632,22 @@ var useDebounce = (function (value, delay) {
 });
 
 var IroGradient = function (_a) {
-    var _b;
-    var _c = _a.value, value = _c === void 0 ? 'linear-gradient(90deg, #ffffff 0%, #000000 100%)' : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { return ({}); } : _d, _e = _a.format, format = _e === void 0 ? 'rgb' : _e, _f = _a.debounceMS, debounceMS = _f === void 0 ? 300 : _f, _g = _a.debounce, debounce = _g === void 0 ? true : _g, _h = _a.showAlpha, showAlpha = _h === void 0 ? true : _h, _j = _a.showInputs, showInputs = _j === void 0 ? true : _j, _k = _a.showGradientResult, showGradientResult = _k === void 0 ? true : _k, _l = _a.showGradientStops, showGradientStops = _l === void 0 ? true : _l, _m = _a.showGradientMode, showGradientMode = _m === void 0 ? true : _m, _o = _a.showGradientAngle, showGradientAngle = _o === void 0 ? true : _o, _p = _a.showGradientPosition, showGradientPosition = _p === void 0 ? true : _p, _q = _a.allowAddGradientStops, allowAddGradientStops = _q === void 0 ? true : _q, _r = _a.colorBoardHeight, colorBoardHeight = _r === void 0 ? 120 : _r, defaultColors = _a.defaultColors, _s = _a.showReset, showReset = _s === void 0 ? false : _s, onReset = _a.onReset;
+    var _b = _a.value, value = _b === void 0 ? 'linear-gradient(90deg, #ffffff 0%, #000000 100%)' : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { return ({}); } : _c, _d = _a.format, format = _d === void 0 ? 'rgb' : _d, _e = _a.debounceMS, debounceMS = _e === void 0 ? 300 : _e, _f = _a.debounce, debounce = _f === void 0 ? true : _f, _g = _a.showAlpha, showAlpha = _g === void 0 ? true : _g, _h = _a.showInputs, showInputs = _h === void 0 ? true : _h, _j = _a.showGradientResult, showGradientResult = _j === void 0 ? true : _j, _k = _a.showGradientStops, showGradientStops = _k === void 0 ? true : _k, _l = _a.showGradientMode, showGradientMode = _l === void 0 ? true : _l, _m = _a.showGradientAngle, showGradientAngle = _m === void 0 ? true : _m, _o = _a.showGradientPosition, showGradientPosition = _o === void 0 ? true : _o, _p = _a.allowAddGradientStops, allowAddGradientStops = _p === void 0 ? true : _p, _q = _a.colorBoardHeight, colorBoardHeight = _q === void 0 ? 120 : _q, defaultColors = _a.defaultColors, _r = _a.showReset, showReset = _r === void 0 ? false : _r, onReset = _a.onReset;
     // Store the initial value for reset functionality
     var initialValue = useRef(value);
     var parsedColors = useCallback(function () {
         return parseGradient(value);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
-    var _t = parsedColors(), stops = _t.stops, type = _t.type, modifier = _t.modifier;
-    // Safely extract active stop information with fallbacks
-    var safeStops = stops && stops.length > 0
-        ? stops
-        : [
-            ['rgba(255,255,255,1)', 0],
-            ['rgba(0,0,0,1)', 100]
-        ];
-    var activeStopIndex = safeStops.length - 1;
-    var activeStop = '#ffffff';
-    var activeAlpha = 100;
-    try {
-        var lastStop = rgbaToArray(safeStops[activeStopIndex][0]);
-        if (lastStop && lastStop.length >= 4) {
-            activeStop = rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]);
-            activeAlpha = Math.round((lastStop[3] || 1) * 100);
-        }
-    }
-    catch (error) {
-        console.warn('⚠️ Error parsing gradient stops, using defaults:', error);
-    }
+    var _s = parsedColors(), stops = _s.stops, type = _s.type, modifier = _s.modifier;
+    var lastStop = rgbaToArray(stops[stops.length - 1][0]);
+    var activeStopIndex = stops.length - 1;
+    var activeStop = rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]);
+    var activeAlpha = Math.round(lastStop[3] * 100);
     var iroPickerRef = useRef(null);
     var containerRef = useRef(null);
     var isUpdatingFromGradientStop = useRef(false);
-    var _u = __read(useState(200), 2), pickerWidth = _u[0], setPickerWidth = _u[1];
+    var _t = __read(useState(200), 2), pickerWidth = _t[0], setPickerWidth = _t[1];
     // Responsive width for IroColorPicker - match solid picker logic
     useEffect(function () {
         if (!containerRef.current)
@@ -7703,39 +7686,27 @@ var IroGradient = function (_a) {
         resizeObserver.observe(containerRef.current);
         return function () { return resizeObserver.disconnect(); };
     }, []);
-    var _v = __read(useState({
+    var _u = __read(useState({
         gradient: value,
         type: type,
         modifier: modifier,
-        stops: safeStops
-    }), 2), color = _v[0], setColor = _v[1];
-    var _w = __read(useState({
-        hex: activeStop || '#ffffff',
-        alpha: activeAlpha !== null && activeAlpha !== void 0 ? activeAlpha : 100,
-        loc: ((_b = safeStops[activeStopIndex]) === null || _b === void 0 ? void 0 : _b[1]) || 0,
-        index: activeStopIndex || 0
-    }), 2), activeColor = _w[0], setActiveColor = _w[1];
+        stops: stops
+    }), 2), color = _u[0], setColor = _u[1];
+    var _v = __read(useState({
+        hex: activeStop,
+        alpha: activeAlpha,
+        loc: stops[activeStopIndex][1],
+        index: activeStopIndex
+    }), 2), activeColor = _v[0], setActiveColor = _v[1];
     var debounceColor = useDebounce(color, debounceMS);
     // Update iro picker color
     var updateIroPickerColor = useCallback(function (colorData, retryCount) {
         if (retryCount === void 0) { retryCount = 0; }
         var maxRetries = 5;
-        // Validate input data before proceeding
-        if (!colorData || !colorData.hex || colorData.alpha == null) {
-            console.warn('❌ Invalid color data provided to updateIroPickerColor:', colorData);
-            return;
-        }
-        // Ensure hex is valid (starts with # and has proper length)
-        if (!/^#[0-9A-Fa-f]{6}$/i.test(colorData.hex)) {
-            console.warn('❌ Invalid hex format provided:', colorData.hex);
-            return;
-        }
-        // Ensure alpha is a valid number between 0 and 100
-        if (isNaN(colorData.alpha) ||
-            colorData.alpha < 0 ||
-            colorData.alpha > 100) {
-            console.warn('❌ Invalid alpha value provided:', colorData.alpha);
-            return;
+        // Validate input data
+        if (!colorData || !colorData.hex || typeof colorData.alpha !== 'number') {
+            console.log('❌ Invalid color data provided to updateIroPickerColor:', colorData);
+            return; // Early return if invalid data
         }
         var updateColor = function () {
             var _a, _b, _c, _d, _e, _f;
@@ -7813,7 +7784,9 @@ var IroGradient = function (_a) {
     useEffect(function () {
         var initializeIroPicker = function () {
             var _a, _b;
-            if (((_b = (_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) === null || _b === void 0 ? void 0 : _b.color) && activeColor.hex) {
+            if (((_b = (_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) === null || _b === void 0 ? void 0 : _b.color) &&
+                activeColor.hex &&
+                typeof activeColor.alpha === 'number') {
                 console.log('🚀 Initializing iro picker with activeColor:', activeColor);
                 // Wait a bit for the picker to be fully ready, then update
                 setTimeout(function () {
@@ -7834,13 +7807,19 @@ var IroGradient = function (_a) {
     var handleSetActiveColor = useCallback(function (newActiveColor) {
         console.log('🎯 Gradient stop clicked, setting active color:', newActiveColor);
         setActiveColor(newActiveColor);
-        // Force immediate update of iro picker with longer delay for first-time reliability
-        setTimeout(function () {
-            updateIroPickerColor({
-                hex: newActiveColor.hex,
-                alpha: newActiveColor.alpha
-            });
-        }, 50); // Increased from 5ms to 50ms for better first-time success
+        // Validate before updating iro picker
+        if (newActiveColor.hex && typeof newActiveColor.alpha === 'number') {
+            // Force immediate update of iro picker with longer delay for first-time reliability
+            setTimeout(function () {
+                updateIroPickerColor({
+                    hex: newActiveColor.hex,
+                    alpha: newActiveColor.alpha
+                });
+            }, 50); // Increased from 5ms to 50ms for better first-time success
+        }
+        else {
+            console.log('⚠️ Skipping iro picker update in handleSetActiveColor - invalid data:', newActiveColor);
+        }
     }, [updateIroPickerColor]);
     // Update iro picker when activeColor changes (e.g., clicking gradient stops)
     useEffect(function () {
@@ -7850,18 +7829,14 @@ var IroGradient = function (_a) {
             index: activeColor.index,
             loc: activeColor.loc
         });
+        // Validate activeColor before proceeding
+        if (!activeColor.hex || typeof activeColor.alpha !== 'number') {
+            console.log('⚠️ Skipping iro picker update - invalid activeColor:', activeColor);
+            return;
+        }
         // Add a small delay to ensure the activeColor state has fully updated
         var timeoutId = setTimeout(function () {
-            // Only call updateIroPickerColor if we have valid hex and alpha values
-            if (activeColor.hex && activeColor.alpha != null) {
-                updateIroPickerColor({
-                    hex: activeColor.hex,
-                    alpha: activeColor.alpha
-                });
-            }
-            else {
-                console.warn('⚠️ Skipping iro picker update due to invalid activeColor:', activeColor);
-            }
+            updateIroPickerColor({ hex: activeColor.hex, alpha: activeColor.alpha });
         }, 10);
         return function () { return clearTimeout(timeoutId); };
     }, [activeColor, updateIroPickerColor]);
@@ -7939,7 +7914,10 @@ var IroGradient = function (_a) {
         setActiveColor(newActiveColor);
         // Update iro picker if available
         if ((_a = iroPickerRef.current) === null || _a === void 0 ? void 0 : _a.colorPicker) {
-            updateIroPickerColor(newActiveColor);
+            updateIroPickerColor({
+                hex: newActiveColor.hex,
+                alpha: newActiveColor.alpha
+            });
         }
         // Call onChange with initial value
         onChange(initialValue.current);
@@ -7950,17 +7928,20 @@ var IroGradient = function (_a) {
     var handleColorFromPanel = function (newColor) {
         setColor(newColor);
         if (newColor === null || newColor === void 0 ? void 0 : newColor.stops) {
-            var lastStop = rgbaToArray(newColor.stops[newColor.stops.length - 1][0]);
-            var activeStop_1 = rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]);
+            var lastStop_1 = rgbaToArray(newColor.stops[newColor.stops.length - 1][0]);
+            var activeStop_1 = rgbaToHex([lastStop_1[0], lastStop_1[1], lastStop_1[2]]);
             var newActiveColor = {
                 hex: activeStop_1,
-                alpha: Math.round(lastStop[3] * 100),
+                alpha: Math.round(lastStop_1[3] * 100),
                 loc: newColor.stops[newColor.stops.length - 1][1],
                 index: newColor.stops.length - 1
             };
             setActiveColor(newActiveColor);
             // Update the iro color picker
-            updateIroPickerColor(newActiveColor);
+            updateIroPickerColor({
+                hex: newActiveColor.hex,
+                alpha: newActiveColor.alpha
+            });
         }
     };
     var handleIroColorChange = function (iroColor) {