@connectif/ui-components 5.0.1 → 5.0.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [5.0.2] - 2026-01-23
+
+### Fixed
+
+- Fixed bug in `ColorPicker` component that prevented selecting and setting black color via mouse
+- Fixed `Autocomplete` component overriding `data-testid` prop when passed through `textFieldProps`
+
 ## [5.0.1] - 2026-01-23
 
 ### Fixed

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

@@ -49,7 +49,7 @@ export type TextFieldContainerProps = React.PropsWithChildren<{
     /**
      * Settled directly in DOM element, for testing easy location purposes.
      */
-    'data-test'?: string;
+    'data-testid'?: string;
 }>;
 /**
  * A TextFieldContainer is just a Box with the visual styles that uses the TextField component.
@@ -104,7 +104,7 @@ declare const TextFieldContainer: React.ForwardRefExoticComponent<{
     /**
      * Settled directly in DOM element, for testing easy location purposes.
      */
-    'data-test'?: string;
+    'data-testid'?: string;
 } & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/index.js

@@ -18967,7 +18967,7 @@ var TextFieldContainer = React48.forwardRef(function TextFieldContainer2({
   onClick,
   className = "",
   sx,
-  "data-test": dataTest,
+  "data-testid": dataTestId,
   onMouseEnter,
   onMouseLeave
 }, ref) {
@@ -19017,8 +19017,8 @@ var TextFieldContainer = React48.forwardRef(function TextFieldContainer2({
         ...sx
       },
       ref,
-      ...dataTest && {
-        "data-test": dataTest
+      ...dataTestId && {
+        "data-testid": dataTestId
       },
       onMouseEnter,
       onMouseLeave,
@@ -19261,7 +19261,7 @@ var TextField = React51.forwardRef(function TextField2({
       ref: containerRef,
       className: `Cn-TextField ${className}`,
       ...dataTestId && {
-        "data-test": `${dataTestId}-container`
+        "data-testid": `${dataTestId}-container`
       },
       onMouseEnter,
       onMouseLeave,
@@ -21648,26 +21648,23 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
   const [internalPickerValue, setInternalPickerValue] = React62.useState(
     value || white
   );
-  const [textFieldValue, setTextFieldValue] = React62.useState(value ?? "");
+  const [textFieldValue, setTextFieldValue] = React62.useState(
+    value ? allowAlpha ? value : rgbToHex(value) : ""
+  );
+  const [isValidPickerChange, setValidPickerChange] = React62.useState(false);
+  const [colorChangeOccurred, setColorChangeOccurred] = React62.useState(false);
+  const [isPopoverInputFocused, setIsPopoverInputFocused] = React62.useState(false);
   const [anchorEl, setAnchorEl] = React62.useState();
+  const containerRef = React62.useRef(null);
   const handleTextFieldChange = (event) => {
     const newValue = event.target.value;
+    setValidPickerChange(false);
     setTextFieldValue(newValue);
     if (isValidColor(newValue) || allowEmpty && newValue === "") {
       setInternalPickerValue(newValue);
       onChange(newValue);
     }
   };
-  const rgbToHex = (rgb) => {
-    const rgbValues = rgb.match(/\d+/g);
-    if (!rgbValues || rgbValues.length !== 3 && rgbValues.length !== 4) {
-      return rgb;
-    }
-    return "#" + rgbValues.slice(0, 3).map((val) => {
-      const hex = parseInt(val, 10).toString(16);
-      return hex.length === 1 ? "0" + hex : hex;
-    }).join("");
-  };
   const normalizeBlack = (color2) => {
     const rgb = color2.match(/\d+/g);
     if (!rgb) {
@@ -21679,13 +21676,6 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
     }
     return color2;
   };
-  const commitColor = React62.useCallback(() => {
-    const finalValue = allowAlpha ? internalPickerValue : rgbToHex(internalPickerValue);
-    setInternalPickerValue(finalValue);
-    setTextFieldValue(finalValue);
-    setPreviousColors((prev) => [finalValue, ...prev.slice(0, 17)]);
-    onChange(finalValue);
-  }, [internalPickerValue, allowAlpha, onChange]);
   const iconColor = /* @__PURE__ */ jsx117(
     IconButton_default,
     {
@@ -21697,6 +21687,56 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
       sx: { color: value || grey600 }
     }
   );
+  React62.useEffect(() => {
+    const handleColorChange = (color2) => {
+      setPreviousColors((prev) => [color2, ...prev.slice(0, 17)]);
+      setTextFieldValue(rgbToHex(color2));
+      onChange(color2);
+      setValidPickerChange(false);
+      setColorChangeOccurred(false);
+    };
+    if (colorChangeOccurred && (isValidPickerChange || isPopoverInputFocused) && internalPickerValue && internalPickerValue !== value) {
+      handleColorChange(internalPickerValue);
+    }
+  }, [
+    value,
+    internalPickerValue,
+    onChange,
+    isValidPickerChange,
+    colorChangeOccurred,
+    isPopoverInputFocused
+  ]);
+  React62.useEffect(() => {
+    if (anchorEl) {
+      const handleFocus = () => {
+        setIsPopoverInputFocused(true);
+      };
+      const handleBlur = () => {
+        setIsPopoverInputFocused(false);
+      };
+      let inputs;
+      const timeoutId = setTimeout(() => {
+        if (containerRef.current) {
+          inputs = containerRef.current.querySelectorAll(
+            "input#rbgcp-input, input#rbgcp-hex-input"
+          );
+          inputs.forEach((input) => {
+            input.addEventListener("focus", handleFocus);
+            input.addEventListener("blur", handleBlur);
+          });
+        }
+      }, 0);
+      return () => {
+        clearTimeout(timeoutId);
+        if (inputs) {
+          inputs.forEach((input) => {
+            input.removeEventListener("focus", handleFocus);
+            input.removeEventListener("blur", handleBlur);
+          });
+        }
+      };
+    }
+  }, [anchorEl]);
   return /* @__PURE__ */ jsxs53(Fragment23, { children: [
     /* @__PURE__ */ jsx117(
       TextField_default,
@@ -21729,11 +21769,13 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
         anchorEl,
         onClose: () => setAnchorEl(void 0),
         sx: { zIndex: popoverZIndex },
-        onMouseUp: commitColor,
+        onMouseUp: () => setValidPickerChange(true),
         children: /* @__PURE__ */ jsx117(
           Box_default2,
           {
+            ref: containerRef,
             className: "Cn-Color-Gradient-Box",
+            onMouseUp: () => setValidPickerChange(true),
             sx: {
               "&.Cn-Color-Gradient-Box": {
                 backgroundColor: "white !important",
@@ -21783,7 +21825,7 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
                   const normalized = normalizeBlack(newColor);
                   const preview = allowAlpha ? normalized : rgbToHex(normalized);
                   setInternalPickerValue(preview);
-                  setTextFieldValue(preview);
+                  setColorChangeOccurred(true);
                 },
                 hideAdvancedSliders: true,
                 hideColorGuide: true,
@@ -21800,6 +21842,16 @@ var ColorPicker = React62.forwardRef(function ColorPickerWrapper({
   ] });
 });
 var ColorPicker_default = ColorPicker;
+var rgbToHex = (rgb) => {
+  const rgbValues = rgb.match(/\d+/g);
+  if (!rgbValues || rgbValues.length !== 3 && rgbValues.length !== 4) {
+    return rgb;
+  }
+  return "#" + rgbValues.slice(0, 3).map((val) => {
+    const hex = parseInt(val, 10).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  }).join("");
+};
 
 // src/components/input/UploadClickableArea.tsx
 import { Box as Box3 } from "@mui/material";
@@ -23009,8 +23061,7 @@ var AutocompleteInput = function AutocompleteInput2({
       ),
       autoComplete: "off",
       onMouseEnter: () => setIsHover(true),
-      onMouseLeave: () => setIsHover(false),
-      "data-testid": "autocomplete-input"
+      onMouseLeave: () => setIsHover(false)
     }
   ) });
 };
@@ -26667,7 +26718,7 @@ import MuiTabs from "@mui/material/Tabs";
 
 // src/components/layout/SwipeableViews.tsx
 import * as React87 from "react";
-import { useEffect as useEffect22, useRef as useRef26, useState as useState34 } from "react";
+import { useEffect as useEffect23, useRef as useRef27, useState as useState34 } from "react";
 import { jsx as jsx155 } from "react/jsx-runtime";
 var styles = {
   container: {
@@ -26701,12 +26752,12 @@ function SwipeableViews({
   disableScroll = false,
   ...rootProps
 }) {
-  const containerRef = useRef26(null);
-  const scrollTimeout = useRef26();
-  const scrollingMethod = useRef26("none");
+  const containerRef = useRef27(null);
+  const scrollTimeout = useRef27();
+  const scrollingMethod = useRef27("none");
   const [previousIndex, setPreviousIndex] = useState34(index);
-  const hideScrollAnimation = useRef26(true);
-  useEffect22(() => {
+  const hideScrollAnimation = useRef27(true);
+  useEffect23(() => {
     if (containerRef.current) {
       if (scrollingMethod.current === "manual") {
         scrollingMethod.current = "none";
@@ -27866,31 +27917,31 @@ var MinimizableWindow = React92.forwardRef(function MinimizableWindow2({
 var MinimizableWindow_default = MinimizableWindow;
 
 // src/hooks/useFormatters.ts
-import { useCallback as useCallback23, useContext as useContext16 } from "react";
+import { useCallback as useCallback22, useContext as useContext16 } from "react";
 var useFormatters = () => {
   const { locale, currency, timezone } = useContext16(IntlContext);
   return {
-    formatCompactNumber: useCallback23(
+    formatCompactNumber: useCallback22(
       (value) => formatCompactNumber(value, locale),
       [locale]
     ),
-    formatNumber: useCallback23(
+    formatNumber: useCallback22(
       (value, fractionSize) => formatNumber(value, locale, fractionSize),
       [locale]
     ),
-    formatPercentage: useCallback23(
+    formatPercentage: useCallback22(
       (value, fractionSize) => formatPercentage(value, locale, fractionSize),
       [locale]
     ),
-    formatCurrency: useCallback23(
+    formatCurrency: useCallback22(
       (value, notation) => formatCurrency(value, locale, currency, notation),
       [currency, locale]
     ),
-    formatDate: useCallback23(
+    formatDate: useCallback22(
       (date, format2) => formatDate(date, locale, timezone, format2),
       [locale, timezone]
     ),
-    formatPhone: useCallback23(
+    formatPhone: useCallback22(
       (phone, format2) => formatPhone(phone, format2),
       []
     )