@connectif/ui-components 9.0.4 → 9.0.6

package/CHANGELOG.md

@@ -1,11 +1,37 @@
 # Changelog
 
+## [9.0.6] - 2026-06-23
+
+### Added
+
+- `Autocomplete`: added optional `exclusiveOption` property.
+
+## [9.0.5] - 2026-06-19
+
+### Added
+
+- `InputLabel`: added focused visual state — the label color switches to `primary.main` when the associated input (linked via `htmlFor`) is focused.
+- `InputLabel`: added `focused` prop to allow external control of the focused visual state, overriding the internal focus tracking.
+- `InputLabel`: added `onClick` prop forwarded to the underlying `<label>` element.
+- `ColorPicker`: added `disabled` prop.
+
+### Changed
+
+- `Toolbar` story `ToolbarInDrawer`: drawer now starts closed, with an open button and a close button in the toolbar actions.
+- `Dialog` story: dialog now starts closed, with a centered "Open Dialog" button to open it.
+- `ConfirmationDialog` story: dialogs now start closed, with a centered "Open Dialog" button to open them.
+- `Snackbar` story: removed the `Dialog` wrapper — buttons now render directly.
+
 ## [9.0.4] - 2026-06-08
 
 ### Changed
 
 - `LineChart`: now the secondary metric is positioned in left side of the chart.
 
+### Fixed
+
+- `Stepper`: Stepper connector fixed when only label is specified in steps
+
 ## [9.0.3] - 2026-06-02
 
 ### Added

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

@@ -53,6 +53,11 @@ export type ColorPickerProps = {
      * @default 'auto'
      */
     mode?: ColorPickerMode;
+    /**
+     * (optional) Whether the color picker is disabled.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * A function to update color value
      */

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

@@ -21,6 +21,15 @@ export type InputLabelProps = React.PropsWithChildren<{
      * Show an info icon with the text as tooltip
      */
     infoText?: TooltipProps['title'];
+    /**
+     * Override the focused visual state. When provided, takes
+     * precedence over the internal focus tracking via `htmlFor`.
+     */
+    focused?: boolean;
+    /**
+     * Click handler for the label element.
+     */
+    onClick?: React.MouseEventHandler<HTMLLabelElement>;
 }>;
 /**
  * A label text to be shown along with form fields, like Select or TextFields, usually
@@ -44,6 +53,15 @@ declare const InputLabel: React.ForwardRefExoticComponent<{
      * Show an info icon with the text as tooltip
      */
     infoText?: TooltipProps["title"];
+    /**
+     * Override the focused visual state. When provided, takes
+     * precedence over the internal focus tracking via `htmlFor`.
+     */
+    focused?: boolean;
+    /**
+     * Click handler for the label element.
+     */
+    onClick?: React.MouseEventHandler<HTMLLabelElement>;
 } & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLLabelElement>>;

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

@@ -19343,7 +19343,7 @@ function useDebouncedCallback(callback, wait) {
 }
 
 // src/components/input/DebouncedTextField.tsx
-import { useEffect as useEffect12, useState as useState17 } from "react";
+import { useEffect as useEffect13, useState as useState18 } from "react";
 
 // src/components/input/TextField.tsx
 import * as React52 from "react";
@@ -19355,23 +19355,49 @@ import { styled as styled4 } from "@mui/material";
 import { jsx as jsx99, jsxs as jsxs44 } from "react/jsx-runtime";
 var getSeverityColor = ({ palette: palette2 }, severity) => severity === "error" ? palette2.error.main : palette2.grey[900];
 var StyledLabel = styled4("label", {
-  shouldForwardProp: (prop) => prop !== "severity"
+  shouldForwardProp: (prop) => prop !== "severity" && prop !== "focused"
 })(
-  ({ severity, theme: theme2 }) => theme2.unstable_sx({
+  ({ severity, focused, theme: theme2 }) => theme2.unstable_sx({
     display: "block",
     padding: "4px 0",
     ...variants["caption"],
-    color: getSeverityColor(theme2, severity)
+    color: focused && severity !== "error" ? theme2.palette.primary.main : getSeverityColor(theme2, severity)
   })
 );
 var InputLabel = React50.forwardRef(
-  function InputLabel2({ htmlFor, sx, children, severity = "info", infoText }, ref) {
+  function InputLabel2({
+    htmlFor,
+    sx,
+    children,
+    severity = "info",
+    infoText,
+    focused: focusedProp,
+    onClick
+  }, ref) {
+    const [internalFocused, setInternalFocused] = React50.useState(false);
+    const focused = focusedProp ?? internalFocused;
+    React50.useEffect(() => {
+      const input = htmlFor ? document.getElementById(htmlFor) : null;
+      if (!input) {
+        return;
+      }
+      const handleFocus = () => setInternalFocused(true);
+      const handleBlur = () => setInternalFocused(false);
+      input.addEventListener("focus", handleFocus);
+      input.addEventListener("blur", handleBlur);
+      return () => {
+        input.removeEventListener("focus", handleFocus);
+        input.removeEventListener("blur", handleBlur);
+      };
+    }, [htmlFor]);
     return /* @__PURE__ */ jsxs44(
       StyledLabel,
       {
         htmlFor,
         sx,
         severity,
+        focused,
+        onClick,
         ref,
         children: [
           children,
@@ -19749,7 +19775,7 @@ var TextField_default = TextField;
 // src/components/input/DebouncedTextField.tsx
 import { jsx as jsx102 } from "react/jsx-runtime";
 var DebouncedTextField = React53.forwardRef(function DebouncedTextField2({ value, onChange, debounce = 100, ...rest }, ref) {
-  const [text, setText] = useState17(value ?? "");
+  const [text, setText] = useState18(value ?? "");
   const expectedChangeRef = React53.useRef(void 0);
   const onChangeDebounced = useDebouncedCallback(
     (e) => {
@@ -19760,7 +19786,7 @@ var DebouncedTextField = React53.forwardRef(function DebouncedTextField2({ value
     },
     debounce
   );
-  useEffect12(() => {
+  useEffect13(() => {
     if (expectedChangeRef.current === value) {
       expectedChangeRef.current = void 0;
     } else {
@@ -22552,6 +22578,7 @@ var ColorPicker = React67.forwardRef(function ColorPickerWrapper({
   popoverZIndex,
   inputWidthStyle = "150px",
   mode = "auto",
+  disabled = false,
   onChange
 }, ref) {
   const { t } = useTranslation();
@@ -22584,6 +22611,7 @@ var ColorPicker = React67.forwardRef(function ColorPickerWrapper({
     {
       iconId: value ? "color-square" : "transparent",
       size: "M",
+      disabled,
       onClick: (event) => {
         setAnchorEl(event.currentTarget);
       },
@@ -22626,6 +22654,11 @@ var ColorPicker = React67.forwardRef(function ColorPickerWrapper({
       );
     }
   }, [value, internalPickerValue, colorChangeOccurred, allowEmpty, mode]);
+  React67.useEffect(() => {
+    if (disabled) {
+      setAnchorEl(void 0);
+    }
+  }, [disabled]);
   React67.useEffect(() => {
     if (anchorEl) {
       const handleFocus = () => {
@@ -22663,14 +22696,14 @@ var ColorPicker = React67.forwardRef(function ColorPickerWrapper({
       {
         value: textFieldValue,
         label,
+        disabled,
         sx: {
           width: inputWidthStyle,
           height: "36px !important"
         },
         inputSx: {
           fontFamily: "Source Sans Pro, sans-serif",
-          fontWeight: "400",
-          color: grey900
+          fontWeight: "400"
         },
         placeholder: t("COLOR_PICKER.VALUE_NOT_DEFINED"),
         onChange: handleTextFieldChange,
@@ -23538,7 +23571,7 @@ import * as React73 from "react";
 // src/components/input/SelectPopover.tsx
 import * as React72 from "react";
 import { Grid as Grid4, Stack as Stack12 } from "@mui/material";
-import { useState as useState30 } from "react";
+import { useState as useState31 } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { jsx as jsx132, jsxs as jsxs62 } from "react/jsx-runtime";
 var defaultItemsColorStyles = {
@@ -23576,9 +23609,9 @@ var SelectPopover = function SelectPopover2({
   itemsTitle
 }) {
   const { t } = useTranslation();
-  const [searchText, setSearchText] = useState30("");
-  const [isScrollBottom, setIsScrollBottom] = useState30(false);
-  const [currentItems, setCurrentItems] = useState30([]);
+  const [searchText, setSearchText] = useState31("");
+  const [isScrollBottom, setIsScrollBottom] = useState31(false);
+  const [currentItems, setCurrentItems] = useState31([]);
   const [currentSelectedItems, setCurrentSelectedItems] = React72.useState([]);
   const prevSelectedItemsIdsRef = React72.useRef([]);
   const onSearchTextChanged = (text) => {
@@ -24288,7 +24321,9 @@ var AutocompleteInput = function AutocompleteInput2({
   size,
   onSearchValueChange,
   onPressEnter,
-  onRemoveValue
+  onRemoveValue,
+  exclusiveOptionSelected = false,
+  exclusiveOptionLabel
 }) {
   const { palette: palette2 } = useCustomTheme();
   const { t } = useTranslation();
@@ -24334,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) => {
@@ -24372,7 +24407,7 @@ var AutocompleteInput = function AutocompleteInput2({
         }
       },
       containerRef,
-      startAdornment: multiple ? /* @__PURE__ */ jsx135(
+      startAdornment: multiple && !exclusiveOptionSelected ? /* @__PURE__ */ jsx135(
         AutocompleteInputSelection_default,
         {
           value,
@@ -24504,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) {
@@ -24565,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
+                        }
+                      ) })
+                    ]
                   }
-                ) })
+                )
               ]
             }
-          ) })
+          )
         }
       )
     }
@@ -24654,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);
@@ -24664,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());
@@ -24865,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);
@@ -24897,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 ?? "");
   };
@@ -24980,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(
@@ -24998,7 +25116,9 @@ var Autocomplete = function Autocomplete2({
         highlightedIndex,
         inputContainerRef: anchorRef,
         onAddSelectedValue: handleSelectValue,
-        onClickAwayPopover
+        onClickAwayPopover,
+        exclusiveOption: labeledExclusiveOption,
+        isExclusiveSelected
       }
     )
   ] });
@@ -28142,7 +28262,7 @@ import MuiTabs from "@mui/material/Tabs";
 
 // src/components/layout/SwipeableViews.tsx
 import * as React95 from "react";
-import { useEffect as useEffect28, useRef as useRef33, useState as useState41 } from "react";
+import { useEffect as useEffect29, useRef as useRef33, useState as useState42 } from "react";
 import { jsx as jsx167 } from "react/jsx-runtime";
 var styles = {
   container: {
@@ -28179,9 +28299,9 @@ function SwipeableViews({
   const containerRef = useRef33(null);
   const scrollTimeout = useRef33(null);
   const scrollingMethod = useRef33("none");
-  const [previousIndex, setPreviousIndex] = useState41(index);
+  const [previousIndex, setPreviousIndex] = useState42(index);
   const hideScrollAnimation = useRef33(true);
-  useEffect28(() => {
+  useEffect29(() => {
     if (containerRef.current) {
       if (scrollingMethod.current === "manual") {
         scrollingMethod.current = "none";
@@ -28806,7 +28926,7 @@ var Toolbar_default = Toolbar;
 
 // src/components/toolbar/ToolbarTitle.tsx
 import * as React99 from "react";
-import { useState as useState44 } from "react";
+import { useState as useState45 } from "react";
 import { jsx as jsx182, jsxs as jsxs89 } from "react/jsx-runtime";
 var ToolbarTitle = React99.forwardRef(function ToolbarTitle2({
   title,
@@ -28818,7 +28938,7 @@ var ToolbarTitle = React99.forwardRef(function ToolbarTitle2({
   const textElementRef = React99.useRef(
     null
   );
-  const [showHoverActions, setShowHoverActions] = useState44(false);
+  const [showHoverActions, setShowHoverActions] = useState45(false);
   return /* @__PURE__ */ jsx182(Box_default2, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx182(
     TextEllipsisTooltip_default,
     {