@connectif/ui-components 5.1.1 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # 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

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

@@ -22838,6 +22838,7 @@ var AutocompleteInputSelection = function AutocompleteInputSelection2({
   value,
   canAddValues,
   disabled = false,
+  startIconId,
   renderLabel,
   onOpenPopover,
   onRemoveValue
@@ -22856,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: {
@@ -22924,6 +22925,7 @@ var AutocompleteInput = function AutocompleteInput2({
   inputValue,
   setInputValue,
   placeholder,
+  startIconId,
   onSearchValueChange,
   onPressEnter,
   onRemoveValue
@@ -23015,6 +23017,7 @@ var AutocompleteInput = function AutocompleteInput2({
         AutocompleteInputSelection_default,
         {
           value,
+          startIconId,
           canAddValues,
           renderLabel,
           onOpenPopover,
@@ -23286,6 +23289,7 @@ var Autocomplete = function Autocomplete2({
   maxValueLength,
   maxValues,
   maxValuesText,
+  startIconId,
   onClose = () => ({}),
   onOpen = () => ({}),
   disableClear
@@ -23565,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 {
@@ -23598,6 +23598,7 @@ var Autocomplete = function Autocomplete2({
         },
         disableClear,
         disabled,
+        startIconId,
         hasFilteredOptions: options.length > 0,
         value,
         maxValueLength,