@connectif/ui-components 9.0.5 → 9.0.6

package/CHANGELOG.md

@@ -1,6 +1,12 @@
 # Changelog
 
-## [9.0.5] - 2026-06- 19
+## [9.0.6] - 2026-06-23
+
+### Added
+
+- `Autocomplete`: added optional `exclusiveOption` property.
+
+## [9.0.5] - 2026-06-19
 
 ### Added
 

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

@@ -124,9 +124,19 @@ export type AutocompleteProps<T extends string, Multiple extends boolean | undef
      * Ref to the inner HTMLInputElement
      */
     ref?: React.Ref<HTMLInputElement>;
+    /**
+     * When provided, this option is always displayed as the first item in the
+     * dropdown, separated from the rest by a divider. Selecting it clears all
+     * other selections; selecting any other option deselects this one.
+     * In multiple mode, while this option is active the input renders as plain
+     * text (no chips).
+     */
+    exclusiveOption?: AutocompleteOption<T> & {
+        label?: string;
+    };
 };
 /**
  * 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, startIconId, onClose, onOpen, disableClear, disableCloseOnClickAway, size }: 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, disableCloseOnClickAway, size, exclusiveOption }: AutocompleteProps<T, Multiple, Value>) => import("react/jsx-runtime").JSX.Element;
 export default Autocomplete;

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

@@ -67,9 +67,19 @@ export type AutocompleteInputProps<T extends string, Multiple extends boolean |
     onSearchValueChange: (event: React.SyntheticEvent, searchValue: string) => void;
     onPressEnter: (event: React.SyntheticEvent, inputValue: string) => void;
     onRemoveValue: (event: React.SyntheticEvent, value: Value) => void;
+    /**
+     * When true (exclusive option selected in multiple mode), chips are hidden
+     * and the input displays as a plain text field.
+     */
+    exclusiveOptionSelected?: boolean;
+    /**
+     * Label to display in the text field when the exclusive option is selected
+     * and the component is in multiple mode.
+     */
+    exclusiveOptionLabel?: string;
 };
 /**
  * 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, startIconId, size, 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, size, onSearchValueChange, onPressEnter, onRemoveValue, exclusiveOptionSelected, exclusiveOptionLabel }: AutocompleteInputProps<T, Multiple, Value>) => import("react/jsx-runtime").JSX.Element;
 export default AutocompleteInput;

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

@@ -30,10 +30,19 @@ type AutocompleteListProps<T extends string, Multiple extends boolean | undefine
     highlightedIndex: number;
     onAddSelectedValue: (event: React.MouseEvent<HTMLElement, MouseEvent>, option: AutocompleteLabeledOption<T>) => void;
     onClickAwayPopover: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /**
+     * Option that is always shown first, separated by a divider, and when selected
+     * clears all other selections (and vice versa).
+     */
+    exclusiveOption?: AutocompleteLabeledOption<T>;
+    /**
+     * Whether the exclusive option is currently selected.
+     */
+    isExclusiveSelected?: boolean;
 };
 export declare const AUTOCOMPLETE_ITEM_HEIGHT = 44;
 /**
  * Powered autocomplete list.
  */
-declare const AutocompleteList: <T extends string, Multiple extends boolean | undefined = undefined>({ options, isLoading, loadingText, noOptionsText, addNewValueText, inputContainerRef, isOpen, selectedIndex, highlightedIndex, virtualListRef, filteredOptions, onAddSelectedValue, onClickAwayPopover }: AutocompleteListProps<T, Multiple>) => import("react/jsx-runtime").JSX.Element;
+declare const AutocompleteList: <T extends string, Multiple extends boolean | undefined = undefined>({ options, isLoading, loadingText, noOptionsText, addNewValueText, inputContainerRef, isOpen, selectedIndex, highlightedIndex, virtualListRef, filteredOptions, onAddSelectedValue, onClickAwayPopover, exclusiveOption, isExclusiveSelected }: AutocompleteListProps<T, Multiple>) => import("react/jsx-runtime").JSX.Element;
 export default AutocompleteList;

package/dist/index.js

@@ -24321,7 +24321,9 @@ var AutocompleteInput = function AutocompleteInput2({
   size,
   onSearchValueChange,
   onPressEnter,
-  onRemoveValue
+  onRemoveValue,
+  exclusiveOptionSelected = false,
+  exclusiveOptionLabel
 }) {
   const { palette: palette2 } = useCustomTheme();
   const { t } = useTranslation();
@@ -24367,7 +24369,7 @@ var AutocompleteInput = function AutocompleteInput2({
       },
       maxLength: maxValueLength,
       placeholder: !canAddValues ? maxValuesText || t("AUTOCOMPLETE.MAX_VALUES") : Array.isArray(value) && value.length > 0 || !Array.isArray(value) && !!value ? "" : placeholder,
-      value: inputValue || (!Array.isArray(value) ? renderLabel(value) : ""),
+      value: inputValue || exclusiveOptionLabel || (!Array.isArray(value) ? renderLabel(value) : ""),
       multiline: false,
       disabled: disabled || !canAddValues,
       onChange: (event) => {
@@ -24405,7 +24407,7 @@ var AutocompleteInput = function AutocompleteInput2({
         }
       },
       containerRef,
-      startAdornment: multiple ? /* @__PURE__ */ jsx135(
+      startAdornment: multiple && !exclusiveOptionSelected ? /* @__PURE__ */ jsx135(
         AutocompleteInputSelection_default,
         {
           value,
@@ -24537,11 +24539,14 @@ var AutocompleteList = function AutocompleteList2({
   virtualListRef,
   filteredOptions,
   onAddSelectedValue,
-  onClickAwayPopover
+  onClickAwayPopover,
+  exclusiveOption,
+  isExclusiveSelected
 }) {
   const { palette: palette2 } = useCustomTheme();
   const { t } = useTranslation();
   const listRef = React76.useRef(null);
+  const popoverWidth = inputContainerRef.current?.clientWidth;
   const getText = (option) => {
     const isInOptions = options.some((elem) => elem.id === option.id);
     if (!isInOptions) {
@@ -24598,58 +24603,90 @@ var AutocompleteList = function AutocompleteList2({
           anchorEl: inputContainerRef.current,
           open: isOpen,
           sx: { zIndex: 3e3 },
-          children: /* @__PURE__ */ jsx136(Paper_default, { sx: { boxShadow: shadows[1], borderRadius: "8px" }, children: /* @__PURE__ */ jsxs66(
-            Box_default2,
+          children: /* @__PURE__ */ jsxs66(
+            Paper_default,
             {
               sx: {
-                maxHeight: "40vh",
-                height: !isLoading && filteredOptions.length ? filteredOptions.length * 44 : "auto",
-                width: inputContainerRef.current ? inputContainerRef.current.clientWidth : null,
-                borderRadius: "8px"
+                boxShadow: shadows[1],
+                borderRadius: "8px",
+                width: popoverWidth ?? "auto"
               },
-              className: "Slim-Vertical-Scroll",
-              ref: listRef,
               children: [
-                isLoading && /* @__PURE__ */ jsx136(
-                  ListItem_default,
-                  {
-                    text: loadingText ?? t("AUTOCOMPLETE.LOADING")
-                  }
-                ),
-                !isLoading && filteredOptions.length === 0 && /* @__PURE__ */ jsx136(
-                  ListItem_default,
-                  {
-                    text: noOptionsText ?? t("AUTOCOMPLETE.NO_OPTIONS")
-                  }
-                ),
-                !isLoading && filteredOptions.length > 0 && /* @__PURE__ */ jsx136(AutoSizer5, { children: ({
-                  height: height2,
-                  width: width2
-                }) => /* @__PURE__ */ jsx136(
-                  FixedSizeList3,
+                exclusiveOption && /* @__PURE__ */ jsxs66(Fragment34, { children: [
+                  /* @__PURE__ */ jsx136(
+                    ListItemButton_default,
+                    {
+                      selected: isExclusiveSelected,
+                      tabIndex: -1,
+                      role: "option",
+                      baseSx: {
+                        color: palette2.grey[900]
+                      },
+                      text: exclusiveOption.label,
+                      onClick: (event) => onAddSelectedValue(
+                        event,
+                        exclusiveOption
+                      ),
+                      "data-testid": `autocomplete-option-${exclusiveOption.id}`
+                    }
+                  ),
+                  /* @__PURE__ */ jsx136(Divider_default, {})
+                ] }),
+                (!exclusiveOption || filteredOptions.length > 0 || isLoading) && /* @__PURE__ */ jsxs66(
+                  Box_default2,
                   {
-                    overscanCount: 3,
-                    height: height2,
-                    itemCount: filteredOptions.length,
-                    itemSize: AUTOCOMPLETE_ITEM_HEIGHT,
-                    width: width2,
+                    sx: {
+                      maxHeight: "40vh",
+                      height: !isLoading && filteredOptions.length ? filteredOptions.length * 44 : "auto",
+                      width: "100%",
+                      borderRadius: "8px"
+                    },
                     className: "Slim-Vertical-Scroll",
-                    ref: virtualListRef,
-                    initialScrollOffset: getInitialListScroll(
-                      {
-                        itemHeight: AUTOCOMPLETE_ITEM_HEIGHT,
-                        containerHeight: listRef.current?.clientHeight ?? 0,
-                        highlightedIndex,
-                        selectedIndex,
-                        totalItems: filteredOptions.length
-                      }
-                    ),
-                    children: ListItemButtonWrapper
+                    ref: listRef,
+                    children: [
+                      isLoading && /* @__PURE__ */ jsx136(
+                        ListItem_default,
+                        {
+                          text: loadingText ?? t("AUTOCOMPLETE.LOADING")
+                        }
+                      ),
+                      !isLoading && filteredOptions.length === 0 && /* @__PURE__ */ jsx136(
+                        ListItem_default,
+                        {
+                          text: noOptionsText ?? t("AUTOCOMPLETE.NO_OPTIONS")
+                        }
+                      ),
+                      !isLoading && filteredOptions.length > 0 && /* @__PURE__ */ jsx136(AutoSizer5, { children: ({
+                        height: height2,
+                        width: width2
+                      }) => /* @__PURE__ */ jsx136(
+                        FixedSizeList3,
+                        {
+                          overscanCount: 3,
+                          height: height2,
+                          itemCount: filteredOptions.length,
+                          itemSize: AUTOCOMPLETE_ITEM_HEIGHT,
+                          width: width2,
+                          className: "Slim-Vertical-Scroll",
+                          ref: virtualListRef,
+                          initialScrollOffset: getInitialListScroll(
+                            {
+                              itemHeight: AUTOCOMPLETE_ITEM_HEIGHT,
+                              containerHeight: listRef.current?.clientHeight ?? 0,
+                              highlightedIndex,
+                              selectedIndex,
+                              totalItems: filteredOptions.length
+                            }
+                          ),
+                          children: ListItemButtonWrapper
+                        }
+                      ) })
+                    ]
                   }
-                ) })
+                )
               ]
             }
-          ) })
+          )
         }
       )
     }
@@ -24687,7 +24724,8 @@ var Autocomplete = function Autocomplete2({
   onOpen = () => ({}),
   disableClear,
   disableCloseOnClickAway = false,
-  size = "S"
+  size = "S",
+  exclusiveOption
 }) {
   const anchorRef = React77.useRef(null);
   const inputRef = React77.useRef(null);
@@ -24697,6 +24735,24 @@ var Autocomplete = function Autocomplete2({
   const _renderLabel = React77.useCallback((id) => id, []);
   const [inputValue, setInputValue] = React77.useState("");
   const [isDirty, setDirty] = React77.useState(false);
+  const labeledExclusiveOption = React77.useMemo(() => {
+    if (!exclusiveOption) {
+      return void 0;
+    }
+    return {
+      ...exclusiveOption,
+      label: exclusiveOption.label ?? (renderLabel ?? _renderLabel)(exclusiveOption.id)
+    };
+  }, [exclusiveOption, renderLabel, _renderLabel]);
+  const isExclusiveSelected = React77.useMemo(() => {
+    if (!exclusiveOption) {
+      return false;
+    }
+    if (Array.isArray(value)) {
+      return value.includes(exclusiveOption.id);
+    }
+    return value === exclusiveOption.id;
+  }, [exclusiveOption, value]);
   const getOptionsLabeled = React77.useCallback(
     (options2, inputValue2 = "") => {
       const searchValue = escapeRegExp2(inputValue2.trim());
@@ -24898,28 +24954,43 @@ var Autocomplete = function Autocomplete2({
     onChange && onChange(event, newValue);
     onClosePopoverAfterSelect(newValue, newFilteredOptions);
   };
-  const onSelectValueMultiple = (newValue, value2, event) => {
+  const onSelectValueMultiple = (newValue, value2, event, options2) => {
     if (!onChange) {
       return;
     }
     let newValues = [];
-    if (value2.includes(newValue)) {
+    const exclusiveCurrentlySelected = exclusiveOption && value2.includes(exclusiveOption.id);
+    const selectingExclusive = exclusiveOption && newValue === exclusiveOption.id;
+    if (selectingExclusive && !value2.includes(newValue)) {
+      newValues = [newValue];
+    } else if (value2.includes(newValue)) {
       newValues = value2.filter((v) => v !== newValue);
     } else if (newValue) {
       newValues = [...value2, newValue];
+      if (exclusiveCurrentlySelected) {
+        newValues = newValues.filter((v) => v !== exclusiveOption.id);
+      }
     }
     onChange(event, newValues);
-    onClosePopoverAfterSelect(newValues);
+    onClosePopoverAfterSelect(
+      newValues,
+      void 0,
+      options2
+    );
   };
-  const onSelectValueSingle = (newValue, event) => {
+  const onSelectValueSingle = (newValue, event, options2) => {
     if (!onChange) {
       return;
     }
     onChange(event, newValue);
-    onClosePopoverAfterSelect(newValue);
+    onClosePopoverAfterSelect(
+      newValue,
+      void 0,
+      options2
+    );
   };
-  const onClosePopoverAfterSelect = (selectedValue, newFilteredOptions) => {
-    if (closeOnSelect) {
+  const onClosePopoverAfterSelect = (selectedValue, newFilteredOptions, options2) => {
+    if (closeOnSelect || options2?.forceClose) {
       closePopover();
     } else {
       setNextIndexByValue(selectedValue, newFilteredOptions);
@@ -24930,10 +25001,22 @@ var Autocomplete = function Autocomplete2({
     if (!onChange) {
       return;
     }
+    const isSelectingExclusiveOption = !!exclusiveOption && option.id === exclusiveOption.id && (!Array.isArray(value) || !value.includes(option.id));
+    if (isSelectingExclusiveOption) {
+      setInputValue("");
+      setDirty(false);
+      setPlaceholder(textFieldProps?.placeholder ?? "");
+      setFilteredOptions(getOptionsLabeled([...options]));
+      onSearch && onSearch("");
+    }
     if (Array.isArray(value)) {
-      onSelectValueMultiple(option.id, value, event);
+      onSelectValueMultiple(option.id, value, event, {
+        forceClose: isSelectingExclusiveOption
+      });
     } else {
-      onSelectValueSingle(option.id, event);
+      onSelectValueSingle(option.id, event, {
+        forceClose: isSelectingExclusiveOption
+      });
     }
     setPlaceholder(textFieldProps?.placeholder ?? "");
   };
@@ -25013,7 +25096,9 @@ var Autocomplete = function Autocomplete2({
         setInputValue,
         placeholder,
         size,
-        onRemoveValue: onRemoveInputValue
+        onRemoveValue: onRemoveInputValue,
+        exclusiveOptionSelected: !!multiple && isExclusiveSelected,
+        exclusiveOptionLabel: isExclusiveSelected ? labeledExclusiveOption?.label : void 0
       }
     ),
     /* @__PURE__ */ jsx137(
@@ -25031,7 +25116,9 @@ var Autocomplete = function Autocomplete2({
         highlightedIndex,
         inputContainerRef: anchorRef,
         onAddSelectedValue: handleSelectValue,
-        onClickAwayPopover
+        onClickAwayPopover,
+        exclusiveOption: labeledExclusiveOption,
+        isExclusiveSelected
       }
     )
   ] });