@connectif/ui-components 5.1.0 → 5.1.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [5.1.1] - 2026-01-26
+
+### Fixed
+
+- ColorPicker component now converts rgb to hex properly. Also mode property (hex or auto) has been added.
+
 ## [5.1.0] - 2026-01-26
 
 ### Changed

package/dist/components/input/ColorPicker.d.ts

@@ -47,6 +47,12 @@ export type ColorPickerProps = {
      * (optional) The width of the input field
      */
     inputWidthStyle?: string;
+    /**
+     * (optional) The color format mode, 'hex' to force hex format in the "onChange" call. 'auto' to switch between hex and rgba depending on user input.
+     * rgba will be used when alpha is allowed and the color has transparency even in hex mode.
+     * @default 'auto'
+     */
+    mode?: 'hex' | 'auto';
     /**
      * A function to update color value
      */

package/dist/index.js

@@ -21651,6 +21651,7 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
   allowAlpha = false,
   popoverZIndex,
   inputWidthStyle = "150px",
+  mode = "auto",
   onChange
 }, ref) {
   const { t } = useTranslation();
@@ -21675,20 +21676,9 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
     setTextFieldValue(newValue);
     if (isValidColor(newValue) || allowEmpty && newValue === "") {
       setInternalPickerValue(newValue);
-      onChange(newValue);
+      onChange(mode === "hex" ? rgbToHex(newValue) : newValue);
     }
   };
-  const normalizeBlack = (color2) => {
-    const rgb = color2.match(/\d+/g);
-    if (!rgb) {
-      return color2;
-    }
-    const [r2, g, b] = rgb.map(Number);
-    if (r2 <= 1 && g <= 1 && b <= 1) {
-      return "rgb(0,0,0)";
-    }
-    return color2;
-  };
   const iconColor = /* @__PURE__ */ jsx117(
     IconButton_default,
     {
@@ -21703,8 +21693,8 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
   React62.useEffect(() => {
     const handleInternalColorChange = (color2) => {
       setPreviousColors((prev) => [color2, ...prev.slice(0, 17)]);
-      setTextFieldValue(rgbToHex(color2));
-      onChange(color2);
+      setTextFieldValue(mode === "hex" ? rgbToHex(color2) : color2);
+      onChange(mode === "hex" ? rgbToHex(color2) : color2);
       setValidPickerChange(false);
       setColorChangeOccurred(false);
     };
@@ -21717,7 +21707,8 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
     onChange,
     isValidPickerChange,
     colorChangeOccurred,
-    isPopoverInputFocused
+    isPopoverInputFocused,
+    mode
   ]);
   React62.useEffect(() => {
     const handleExternalColorChange = (color2) => {
@@ -21862,7 +21853,19 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
 });
 var ColorPicker_default = ColorPicker;
 var rgbToHex = (rgb) => {
-  const rgbValues = rgb.match(/\d+/g);
+  if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(rgb) || !rgb.startsWith("rgb")) {
+    return rgb;
+  }
+  if (rgb.includes("rgba")) {
+    const alphaMatch = rgb.match(
+      /rgba\(\d{1,3}, {0,1}\d{1,3}, {0,1}\d{1,3}, {0,1}([01]|0?\.\d+)\)/
+    );
+    if (alphaMatch && alphaMatch[1] === "0") {
+      return "transparent";
+    }
+  }
+  const normalized = normalizeBlack(rgb);
+  const rgbValues = normalized.match(/\d+/g);
   if (!rgbValues || rgbValues.length !== 3 && rgbValues.length !== 4) {
     return rgb;
   }
@@ -21871,6 +21874,17 @@ var rgbToHex = (rgb) => {
     return hex.length === 1 ? "0" + hex : hex;
   }).join("");
 };
+var normalizeBlack = (color2) => {
+  const rgb = color2.match(/\d+/g);
+  if (!rgb) {
+    return color2;
+  }
+  const [r2, g, b] = rgb.map(Number);
+  if (r2 <= 1 && g <= 1 && b <= 1) {
+    return "rgb(0,0,0)";
+  }
+  return color2;
+};
 
 // src/components/input/UploadClickableArea.tsx
 import { Box as Box3 } from "@mui/material";