react-iro-gradient-picker 1.2.3 → 1.2.5

package/dist/index.js

@@ -6438,10 +6438,20 @@ var validGradient = (function (input) {
         var colorStops = [];
         // Determine if first part is direction/angle or color stop
         var firstPart = parts[0];
-        var isDirection = /^\d+deg$/i.test(firstPart) ||
-            /^to\s+/.test(firstPart) ||
-            /^(?:circle|ellipse)/.test(firstPart) ||
-            /at\s+/.test(firstPart);
+        var isDirection = false;
+        if (type === 'linear') {
+            isDirection =
+                /^\d+deg$/i.test(firstPart) ||
+                    /^to\s+/.test(firstPart);
+        }
+        else if (type === 'radial') {
+            // For radial gradients, check for size, shape, or position keywords
+            isDirection =
+                /^(?:circle|ellipse)/.test(firstPart) ||
+                    /at\s+/.test(firstPart) ||
+                    /^(?:closest-side|closest-corner|farthest-side|farthest-corner)$/i.test(firstPart) ||
+                    /^\d+(?:%|px|em|rem)?$/i.test(firstPart); // Size values like "70", "70%", "70px"
+        }
         if (isDirection) {
             if (type === 'linear') {
                 if (/^\d+deg$/i.test(firstPart)) {
@@ -6478,10 +6488,11 @@ var validGradient = (function (input) {
         var stops_1 = [];
         for (var i = 0; i < colorStops.length; i++) {
             var stopString = colorStops[i].trim();
-            // Try to extract color and position
-            var stopMatch = stopString.match(/^(.+?)(?:\s+(\d+(?:\.\d+)?)(%)?)?$/);
+            // Improved regex to handle various gradient stop formats
+            // Matches: color position%, color position, or just color
+            var stopMatch = stopString.match(/^(.+?)(?:\s+([\d.]+)(%|px|em|rem)?)?$/);
             if (stopMatch) {
-                var _b = __read(stopMatch, 4), colorStr = _b[1], positionStr = _b[2], isPercent = _b[3];
+                var _b = __read(stopMatch, 4), colorStr = _b[1], positionStr = _b[2], unit = _b[3];
                 var tinyColorInstance = tinycolor(colorStr.trim());
                 if (tinyColorInstance.isValid()) {
                     var stop_1 = {
@@ -6489,14 +6500,21 @@ var validGradient = (function (input) {
                     };
                     if (positionStr) {
                         var position = parseFloat(positionStr);
-                        // Assume percentage if no unit specified
-                        if (isPercent || !isPercent) {
+                        // Convert percentage to decimal (0-1 range)
+                        if (unit === '%' || !unit) {
+                            // If no unit specified, assume percentage
                             position = position / 100;
                         }
                         stop_1.position = Math.max(0, Math.min(1, position));
                     }
                     stops_1.push(stop_1);
                 }
+                else {
+                    console.warn('Invalid color in gradient stop:', colorStr.trim());
+                }
+            }
+            else {
+                console.warn('Could not parse gradient stop:', stopString);
             }
         }
         // Auto-assign positions if missing
@@ -6594,7 +6612,7 @@ var parseGradient = (function (str) {
         var helperAngle = type === 'linear' ? '180' : 'circle at center';
         var modifier = findF || angle_1 || helperAngle;
         return {
-            gradient: "".concat(type, "-gradient(").concat(typeof gradient !== 'string' ? gradient.original : str, ")"),
+            gradient: typeof gradient !== 'string' ? gradient.original : str,
             type: type,
             modifier: modifier.match(/\d+/) !== null
                 ? Number((_b = modifier.match(/\d+/)) === null || _b === void 0 ? void 0 : _b.join(''))
@@ -6611,7 +6629,7 @@ var parseGradient = (function (str) {
 });
 
 /**
- * Convert gradient object to CSS gradient string
+ * Convert gradient object to CSS gradient string (strict typing)
  */
 function gradientObjectToCss(gradientData) {
     var type = gradientData.type, _a = gradientData.angle, angle = _a === void 0 ? 90 : _a, stops = gradientData.stops;
@@ -6630,6 +6648,38 @@ function gradientObjectToCss(gradientData) {
         return "radial-gradient(circle, ".concat(cssStops, ")");
     }
 }
+/**
+ * Convert flexible gradient object to CSS gradient string (loose typing)
+ */
+function flexibleGradientToCss(gradientData) {
+    var _a = gradientData.type, type = _a === void 0 ? 'linear' : _a, angle = gradientData.angle, direction = gradientData.direction, position = gradientData.position, stops = gradientData.stops;
+    // Convert stops to CSS format with flexible position handling
+    var cssStops = stops
+        .map(function (stop) {
+        var color = tinycolor(stop.color);
+        var positionStr = '';
+        if (stop.position !== undefined) {
+            if (typeof stop.position === 'string') {
+                positionStr = " ".concat(stop.position);
+            }
+            else {
+                positionStr = " ".concat(stop.position, "%");
+            }
+        }
+        return "".concat(color.toRgbString()).concat(positionStr);
+    })
+        .join(', ');
+    if (type === 'linear') {
+        // Use direction if provided, otherwise use angle
+        var gradientDirection = direction || (angle ? "".concat(angle, "deg") : '90deg');
+        return "linear-gradient(".concat(gradientDirection, ", ").concat(cssStops, ")");
+    }
+    else {
+        // Handle radial gradients with flexible positioning
+        var radialPosition = position || 'circle';
+        return "radial-gradient(".concat(radialPosition, ", ").concat(cssStops, ")");
+    }
+}
 /**
  * Convert CSS gradient string to gradient object
  */
@@ -7219,9 +7269,22 @@ var DefaultColorPanel = function (_a) {
     var _d = __read(React.useState([]), 2), formatedDefColors = _d[0], setFormatedDefColors = _d[1];
     React.useEffect(function () {
         if (colorType === 'gradient') {
-            setFormatedDefColors(checkValidColorsArray(defaultColors, 'grad').map(function (item) {
-                return parseGradient(item);
-            }));
+            var validGradients = checkValidColorsArray(defaultColors, 'grad');
+            // For popular colors display, create minimal IColor objects using original CSS strings
+            // This avoids complex parsing issues while still providing functional display
+            var displayGradients = validGradients.map(function (gradientString) {
+                return {
+                    gradient: gradientString, // Use the original CSS string directly for display
+                    type: gradientString.startsWith('radial-') ? 'radial' : 'linear',
+                    modifier: 180, // Default value, not critical for display
+                    stops: [
+                        // Dummy stops that help identify display objects in onChooseColor
+                        ['rgba(255, 0, 0, 1)', 0, 0],
+                        ['rgba(0, 255, 0, 1)', 1, 1]
+                    ]
+                };
+            });
+            setFormatedDefColors(displayGradients);
         }
         else {
             setFormatedDefColors(checkValidColorsArray(defaultColors, 'solid'));
@@ -7233,6 +7296,41 @@ var DefaultColorPanel = function (_a) {
             return;
         }
         if (colorType === 'gradient' && typeof item !== 'string') {
+            // If this is a simplified display object (identified by dummy stops), parse the gradient properly
+            if (item.stops.length === 2 &&
+                item.stops[0][0] === 'rgba(255, 0, 0, 1)') {
+                try {
+                    var properlyParsed = parseGradient(item.gradient);
+                    if (properlyParsed &&
+                        properlyParsed.stops &&
+                        properlyParsed.stops.length > 0) {
+                        var stops_1 = properlyParsed.stops;
+                        var lastStop_1 = rgbaToArray(stops_1[stops_1.length - 1][0]);
+                        var lastStopLoc_1 = stops_1[stops_1.length - 1][1];
+                        var activeStop_1 = rgbaToHex([
+                            lastStop_1[0],
+                            lastStop_1[1],
+                            lastStop_1[2]
+                        ]);
+                        var activeIdx_1 = stops_1[stops_1.length - 1][2];
+                        setInit(false);
+                        setColor(properlyParsed);
+                        setActiveColor &&
+                            setActiveColor({
+                                hex: activeStop_1,
+                                alpha: Number(Math.round(lastStop_1[3] * 100)),
+                                loc: lastStopLoc_1,
+                                index: activeIdx_1
+                            });
+                        setActive(index);
+                        return;
+                    }
+                }
+                catch (error) {
+                    console.warn('Failed to parse popular gradient on click:', item.gradient, error);
+                }
+            }
+            // Normal gradient object processing (fallback)
             var stops = item.stops;
             var lastStop = rgbaToArray(stops[stops.length - 1][0]);
             var lastStopLoc = stops[stops.length - 1][1];
@@ -7375,9 +7473,18 @@ var Markers = function (_a) {
     };
     var onDrag = function (e) {
         var _a;
-        var x = e.clientX;
-        var y = e.clientY;
+        // Defensive check for event object
+        if (!e) {
+            console.warn('onDrag called with undefined event object');
+            return;
+        }
+        var x = e.clientX || 0;
+        var y = e.clientY || 0;
         var rect = (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect) {
+            console.warn('Unable to get bounding rect for drag operation');
+            return;
+        }
         var rootDistance = y - rect.y;
         // Now we know user is actually dragging
         setIsDragging(true);
@@ -7632,10 +7739,15 @@ var GradientPanel = function (_a) {
         }
     };
     var onDrag = function (e) {
-        var x = e.clientX;
-        var y = e.clientY;
-        var shiftKey = e.shiftKey;
-        var ctrlKey = e.ctrlKey * 2;
+        // Defensive check for event object
+        if (!e) {
+            console.warn('onDrag called with undefined event object');
+            return;
+        }
+        var x = e.clientX || 0;
+        var y = e.clientY || 0;
+        var shiftKey = e.shiftKey || false;
+        var ctrlKey = (e.ctrlKey || false) * 2;
         pointMoveTo({
             x: x,
             y: y,
@@ -7772,25 +7884,81 @@ var IroGradient = function (_a) {
             // If parsing failed, return fallback gradient
             if (typeof parsed === 'string') {
                 console.warn('Gradient parsing failed, using fallback:', parsed);
-                return parseGradient('linear-gradient(90deg, #ffffff 0%, #000000 100%)');
+                var fallback = parseGradient('linear-gradient(90deg, #ffffff 0%, #000000 100%)');
+                // Ensure fallback has valid structure
+                if (fallback &&
+                    typeof fallback === 'object' &&
+                    Array.isArray(fallback.stops) &&
+                    fallback.stops.length > 0) {
+                    return fallback;
+                }
+                // Ultimate fallback with guaranteed structure
+                return {
+                    stops: [
+                        ['rgba(255, 255, 255, 1)', 0, 0],
+                        ['rgba(0, 0, 0, 1)', 1, 1]
+                    ],
+                    gradient: 'linear-gradient(90deg, #ffffff 0%, #000000 100%)',
+                    modifier: 90,
+                    type: 'linear'
+                };
+            }
+            // Validate parsed result has required structure
+            if (parsed &&
+                typeof parsed === 'object' &&
+                Array.isArray(parsed.stops) &&
+                parsed.stops.length > 0) {
+                return parsed;
             }
-            return parsed;
+            // If parsed result is invalid, use ultimate fallback
+            console.warn('Parsed gradient has invalid structure:', parsed);
+            return {
+                stops: [
+                    ['rgba(255, 255, 255, 1)', 0, 0],
+                    ['rgba(0, 0, 0, 1)', 1, 1]
+                ],
+                gradient: 'linear-gradient(90deg, #ffffff 0%, #000000 100%)',
+                modifier: 90,
+                type: 'linear'
+            };
         }
         catch (error) {
-            console.warn('Error parsing gradient, using fallback:', error);
-            return parseGradient('linear-gradient(90deg, #ffffff 0%, #000000 100%)');
+            console.warn('Error parsing gradient, using ultimate fallback:', error);
+            return {
+                stops: [
+                    ['rgba(255, 255, 255, 1)', 0, 0],
+                    ['rgba(0, 0, 0, 1)', 1, 1]
+                ],
+                gradient: 'linear-gradient(90deg, #ffffff 0%, #000000 100%)',
+                modifier: 90,
+                type: 'linear'
+            };
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
     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 = React.useRef(null);
     var containerRef = React.useRef(null);
     var isUpdatingFromGradientStop = React.useRef(false);
     var _t = __read(React.useState(200), 2), pickerWidth = _t[0], setPickerWidth = _t[1];
+    // Safe extraction of stop data with fallbacks
+    var safeStops = Array.isArray(stops) && stops.length > 0
+        ? stops
+        : [
+            ['rgba(255, 255, 255, 1)', 0, 0],
+            ['rgba(0, 0, 0, 1)', 1, 1]
+        ];
+    var safeLastStop = rgbaToArray(safeStops[safeStops.length - 1][0]);
+    var safeParsedLastStop = Array.isArray(safeLastStop) && safeLastStop.length >= 4
+        ? safeLastStop
+        : [255, 255, 255, 1];
+    var activeStopIndex = safeStops.length - 1;
+    var activeStop = rgbaToHex([
+        safeParsedLastStop[0],
+        safeParsedLastStop[1],
+        safeParsedLastStop[2]
+    ]);
+    var activeAlpha = Math.round(safeParsedLastStop[3] * 100);
     // Responsive width for IroColorPicker - match solid picker logic
     React.useEffect(function () {
         if (!containerRef.current)
@@ -7833,12 +8001,12 @@ var IroGradient = function (_a) {
         gradient: value,
         type: type,
         modifier: modifier,
-        stops: stops
+        stops: safeStops
     }), 2), color = _u[0], setColor = _u[1];
     var _v = __read(React.useState({
         hex: activeStop,
         alpha: activeAlpha,
-        loc: stops[activeStopIndex][1],
+        loc: safeStops[activeStopIndex][1],
         index: activeStopIndex
     }), 2), activeColor = _v[0], setActiveColor = _v[1];
     var debounceColor = useDebounce(color, debounceMS);
@@ -8071,11 +8239,11 @@ var IroGradient = function (_a) {
     var handleColorFromPanel = function (newColor) {
         setColor(newColor);
         if (newColor === null || newColor === void 0 ? void 0 : newColor.stops) {
-            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 lastStop = rgbaToArray(newColor.stops[newColor.stops.length - 1][0]);
+            var activeStop_1 = rgbaToHex([lastStop[0], lastStop[1], lastStop[2]]);
             var newActiveColor = {
                 hex: activeStop_1,
-                alpha: Math.round(lastStop_1[3] * 100),
+                alpha: Math.round(lastStop[3] * 100),
                 loc: newColor.stops[newColor.stops.length - 1][1],
                 index: newColor.stops.length - 1
             };
@@ -8536,6 +8704,7 @@ exports.checkFormat = checkFormat;
 exports.cn = cn;
 exports.cssToGradientObject = cssToGradientObject;
 exports["default"] = ColorPicker;
+exports.flexibleGradientToCss = flexibleGradientToCss;
 exports.getGradient = getGradient;
 exports.getHexAlpha = getHexAlpha;
 exports.gradientObjectToCss = gradientObjectToCss;