@connectif/ui-components 5.1.0 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 5.2.0
+
+### Fixed
+
+- Fixed `Autocomplete` component error when `allowFreeText` option was enabled and clicking outside the dropdown after typing.
+
+### Added
+
+- New `startIconId` prop in `Autocomplete` component
+
+## [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/components/input/autocomplete/Autocomplete.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { AutocompleteOption, AutocompleteValue, TextFieldFilteredProps } from '../../../models/Autocomplete';
+import { IconId } from '../../icon';
 export type AutocompleteProps<T extends string, Multiple extends boolean | undefined, Value = AutocompleteValue<T, Multiple>, Option = AutocompleteOption<T>> = {
     /**
      * The variant of the Autocomplete
@@ -100,6 +101,10 @@ export type AutocompleteProps<T extends string, Multiple extends boolean | undef
      * Disables clear button at the end of the component when field is dirty.
      */
     disableClear?: boolean;
+    /**
+     * start icon in autocomplete
+     */
+    startIconId?: IconId;
     /**
      * Ref to the inner HTMLInputElement
      */
@@ -108,5 +113,5 @@ export type AutocompleteProps<T extends string, Multiple extends boolean | undef
 /**
  * Powered TextField with the ability to select from a predefined list of options, allowing to select one or multiple values.
  */
-declare const Autocomplete: <T extends string, Multiple extends boolean | undefined = undefined, Value = AutocompleteValue<T, Multiple>>({ variant, value, multiple, textFieldProps, options, disabled, mode, isCaseSensitive, isDiacriticSensitive, onChange, renderLabel, isLoading, onSearch, loadingText, noOptionsText, allowFreeText, addNewValueText, closeOnSelect, maxValueLength, maxValues, maxValuesText, onClose, onOpen, disableClear }: AutocompleteProps<T, Multiple, Value>) => import("react/jsx-runtime").JSX.Element;
+declare const Autocomplete: <T extends string, Multiple extends boolean | undefined = undefined, Value = AutocompleteValue<T, Multiple>>({ variant, value, multiple, textFieldProps, options, disabled, mode, isCaseSensitive, isDiacriticSensitive, onChange, renderLabel, isLoading, onSearch, loadingText, noOptionsText, allowFreeText, addNewValueText, closeOnSelect, maxValueLength, maxValues, maxValuesText, startIconId, onClose, onOpen, disableClear }: AutocompleteProps<T, Multiple, Value>) => import("react/jsx-runtime").JSX.Element;
 export default Autocomplete;

package/dist/components/input/autocomplete/AutocompleteInput.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { AutocompleteValue, TextFieldFilteredProps } from '../../../models/Autocomplete';
+import { IconId } from '../../icon';
 export type AutocompleteInputProps<T extends string, Multiple extends boolean | undefined, Value = AutocompleteValue<T, Multiple>> = {
     /**
      * The variant of the Autocomplete
@@ -48,11 +49,15 @@ export type AutocompleteInputProps<T extends string, Multiple extends boolean |
      */
     disableClear?: boolean;
     isOpenPopover: boolean;
+    /**
+     * start icon in input
+     */
+    startIconId?: IconId;
     /**
      * Ref to the outer HTMLDivElement
      */
-    containerRef: React.RefObject<HTMLDivElement | null>;
-    inputRef: React.RefObject<HTMLInputElement | null>;
+    containerRef?: React.RefObject<HTMLDivElement | null>;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
     inputValue: string;
     setInputValue: (value: string) => void;
     placeholder: string;
@@ -65,5 +70,5 @@ export type AutocompleteInputProps<T extends string, Multiple extends boolean |
 /**
  * Powered TextField Input.
  */
-declare const AutocompleteInput: <T extends string, Multiple extends boolean | undefined = undefined, Value = AutocompleteValue<T, Multiple>>({ variant, value, multiple, textFieldProps, hasFilteredOptions, disabled, renderLabel, maxValueLength, canAddValues, maxValuesText, disableClear, containerRef, inputRef, onClosePopover, onOpenPopover, isOpenPopover, inputValue, setInputValue, placeholder, onSearchValueChange, onPressEnter, onRemoveValue }: AutocompleteInputProps<T, Multiple, Value>) => import("react/jsx-runtime").JSX.Element;
+declare const AutocompleteInput: <T extends string, Multiple extends boolean | undefined = undefined, Value = AutocompleteValue<T, Multiple>>({ variant, value, multiple, textFieldProps, hasFilteredOptions, disabled, renderLabel, maxValueLength, canAddValues, maxValuesText, disableClear, containerRef, inputRef, onClosePopover, onOpenPopover, isOpenPopover, inputValue, setInputValue, placeholder, startIconId, onSearchValueChange, onPressEnter, onRemoveValue }: AutocompleteInputProps<T, Multiple, Value>) => import("react/jsx-runtime").JSX.Element;
 export default AutocompleteInput;

package/dist/components/input/autocomplete/AutocompleteInputSelection.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { AutocompleteValue } from '../../../models/Autocomplete';
+import { IconId } from '../../icon';
 export type AutocompleteInputSelectionProps<T extends string, Multiple extends boolean | undefined, Value = AutocompleteValue<T, Multiple>> = {
     /**
      * The value handled by this Autocomplete component. If multiple=true, it should be an array of ids.
@@ -14,6 +15,10 @@ export type AutocompleteInputSelectionProps<T extends string, Multiple extends b
      * Whether the autocomplete is disabled or not.
      */
     disabled?: boolean;
+    /**
+     * start icon in input
+     */
+    startIconId?: IconId;
     /**
      * Use this function to render the desired text for each id. Leave it empty if the id is also the label.
      */
@@ -21,5 +26,5 @@ export type AutocompleteInputSelectionProps<T extends string, Multiple extends b
     onOpenPopover: () => void;
     onRemoveValue: (event: React.SyntheticEvent, value: Value) => void;
 };
-declare const AutocompleteInputSelection: <T extends string, Multiple extends boolean | undefined = undefined, Value = AutocompleteValue<T, Multiple>>({ value, canAddValues, disabled, renderLabel, onOpenPopover, onRemoveValue }: AutocompleteInputSelectionProps<T, Multiple, Value>) => import("react/jsx-runtime").JSX.Element;
+declare const AutocompleteInputSelection: <T extends string, Multiple extends boolean | undefined = undefined, Value = AutocompleteValue<T, Multiple>>({ value, canAddValues, disabled, startIconId, renderLabel, onOpenPopover, onRemoveValue }: AutocompleteInputSelectionProps<T, Multiple, Value>) => import("react/jsx-runtime").JSX.Element;
 export default AutocompleteInputSelection;

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";
@@ -22824,6 +22838,7 @@ var AutocompleteInputSelection = function AutocompleteInputSelection2({
   value,
   canAddValues,
   disabled = false,
+  startIconId,
   renderLabel,
   onOpenPopover,
   onRemoveValue
@@ -22842,10 +22857,10 @@ var AutocompleteInputSelection = function AutocompleteInputSelection2({
         maxWidth: `calc(100% - ${AUTOCOMPLETE_PADDING_RIGHT}px)`
       },
       children: [
-        /* @__PURE__ */ jsx122(
+        !!startIconId && /* @__PURE__ */ jsx122(
           IconButton_default,
           {
-            iconId: "plus",
+            iconId: startIconId,
             size: "S",
             disabled: disabled || !canAddValues,
             sx: {
@@ -22910,6 +22925,7 @@ var AutocompleteInput = function AutocompleteInput2({
   inputValue,
   setInputValue,
   placeholder,
+  startIconId,
   onSearchValueChange,
   onPressEnter,
   onRemoveValue
@@ -23001,6 +23017,7 @@ var AutocompleteInput = function AutocompleteInput2({
         AutocompleteInputSelection_default,
         {
           value,
+          startIconId,
           canAddValues,
           renderLabel,
           onOpenPopover,
@@ -23272,6 +23289,7 @@ var Autocomplete = function Autocomplete2({
   maxValueLength,
   maxValues,
   maxValuesText,
+  startIconId,
   onClose = () => ({}),
   onOpen = () => ({}),
   disableClear
@@ -23551,11 +23569,7 @@ var Autocomplete = function Autocomplete2({
       anchorRef.current,
       event.target
     )) {
-      if (allowFreeText && inputValue) {
-        onSelectValueSingle(inputValue, event);
-      } else {
-        closePopover();
-      }
+      closePopover();
       if (inputValue) {
         onSearch && onSearch("");
       } else {
@@ -23584,6 +23598,7 @@ var Autocomplete = function Autocomplete2({
         },
         disableClear,
         disabled,
+        startIconId,
         hasFilteredOptions: options.length > 0,
         value,
         maxValueLength,