@connectif/ui-components 3.0.5 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [4.0.1] - 2026-01-13
+
+### Fixed
+
+- Fixed bug in `Autocomplete` component, where the placeholder was hidden when multiple prop was enabled and no value was selected.
+
+## [4.0.0] - 2026-01-13
+
+### Added
+
+- `ChipViewer` component has been added.
+
+### Fixed
+
+- Fixed bug with select selection in `Select` component.
+
+### Changed
+
+- `TextField` changes its background color for readonly state.
+
+### Deprecated
+
+- `Autocomplete` component removes limitValueTags prop.
+
 ## [3.0.5] - 2025-12-29
 
 ### Added

package/dist/components/chip/ChipContainer.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { ThemeTypography } from '../../theme';
+export declare const DEFAULT_DATA_TEST_ID = "chip-container";
+export declare const TOOLTIP_DATA_TEST_ID = "chip-container-tooltip";
+export declare const COUNTER_LABEL_DATA_TEST_ID = "chip-counter-label";
+export declare const PLACEHOLDER_DATA_TEST_ID = "chip-container-placeholder";
+type ChipContainerProps = {
+    containerRef: React.MutableRefObject<HTMLDivElement | null>;
+    visibleChips: string[];
+    hiddenChips: string[];
+    gap: string;
+    height: string;
+    typographyVariant?: ThemeTypography.TypographyVariant;
+    reserveHeight?: true;
+    placeholder?: string;
+    clickable?: boolean;
+    preventHiddenChipsTooltip?: true;
+    isDeletable?: boolean;
+    dataTestId?: string;
+    renderChip: (data: {
+        chipName: string;
+        index?: number;
+        maxWidth?: string;
+        isCounterLabel?: boolean;
+    }) => React.ReactNode;
+};
+declare const ChipContainer: ({ containerRef, gap, visibleChips, hiddenChips, placeholder, isDeletable, height, typographyVariant, reserveHeight, clickable, preventHiddenChipsTooltip, dataTestId, renderChip }: ChipContainerProps) => import("react/jsx-runtime").JSX.Element;
+export default ChipContainer;

package/dist/components/chip/ChipViewer.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { ThemeTypography } from '../../theme';
+import { ChipProps } from './Chip';
+import { SxProps } from '@mui/material';
+export declare const CHIP_DATA_TEST_ID = "chip-viewer-chip";
+declare const chipViewerStyle: {
+    circle: {
+        borderRadius: string;
+        backgroundColor: string;
+        color: string;
+    };
+    square: {
+        borderRadius: string;
+        backgroundColor: string;
+        color: string;
+    };
+};
+export type ChipViewerProps = {
+    values: string[];
+    chipSx?: SxProps;
+    chipSize?: ChipProps['size'];
+    chipVariant?: ChipProps['variant'];
+    placeholder?: string;
+    numberLines?: number;
+    reserveHeight?: true;
+    variant?: keyof typeof chipViewerStyle;
+    typographyVariant?: ThemeTypography.TypographyVariant;
+    preventHiddenChipsTooltip?: true;
+    /**
+     * Property to adjust maximum width. If property is null, maxWidth will be containerRef.current.offsetWidth
+     */
+    maxWidth?: number;
+    /**
+     * Function to set custom chip name
+     * @param id
+     * @returns
+     */
+    renderChipLabel?: (chipName: string) => string;
+    onClickChip?: (chip: string) => void;
+    onRemoveChip?: (event: React.SyntheticEvent, id: string) => void;
+    onHasHiddenChipsChange?: (hasHiddenChips: boolean) => void;
+};
+declare const ChipViewer: ({ values, chipSx, chipSize, chipVariant, placeholder, numberLines, reserveHeight, variant, preventHiddenChipsTooltip, typographyVariant, maxWidth, renderChipLabel, onRemoveChip, onClickChip, onHasHiddenChipsChange }: ChipViewerProps) => import("react/jsx-runtime").JSX.Element;
+export default ChipViewer;

package/dist/components/chip/index.d.ts

@@ -1,6 +1,8 @@
 export { default as Chip } from './Chip';
 export { default as ChipList } from './ChipList';
 export { default as MenuChip } from './MenuChip';
+export { default as ChipViewer } from './ChipViewer';
 export type { ChipProps } from './Chip';
 export type { ChipListProps } from './ChipList';
 export type { MenuChipProps } from './MenuChip';
+export type { ChipViewerProps } from './ChipViewer';

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

@@ -133,6 +133,14 @@ export type TextFieldProps = {
      * Called when text area scroll.
      */
     onScroll?: (scrollTop: number) => void;
+    /**
+     * Called when mouse enters in text field.
+     */
+    onMouseEnter?: () => void;
+    /**
+     * Called when mouse leaves in text field.
+     */
+    onMouseLeave?: () => void;
     /**
      * Set if input is readonly
      */

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

@@ -37,6 +37,14 @@ export type TextFieldContainerProps = React.PropsWithChildren<{
      * Called on click on this component
      */
     onClick?: BoxProps['onClick'];
+    /**
+     * Called when mouse enters in text field.
+     */
+    onMouseEnter?: () => void;
+    /**
+     * Called when mouse leaves in text field.
+     */
+    onMouseLeave?: () => void;
     className?: string;
     /**
      * Settled directly in DOM element, for testing easy location purposes.
@@ -84,6 +92,14 @@ declare const TextFieldContainer: React.ForwardRefExoticComponent<{
      * Called on click on this component
      */
     onClick?: BoxProps["onClick"];
+    /**
+     * Called when mouse enters in text field.
+     */
+    onMouseEnter?: () => void;
+    /**
+     * Called when mouse leaves in text field.
+     */
+    onMouseLeave?: () => void;
     className?: string;
     /**
      * Settled directly in DOM element, for testing easy location purposes.

package/dist/components/input/{Autocomplete.d.ts → autocomplete/Autocomplete.d.ts}

@@ -1,10 +1,5 @@
 import * as React from 'react';
-import { DebouncedTextFieldProps } from './DebouncedTextField';
-export type AutocompleteValue<T, Multiple> = Multiple extends undefined | false ? T | '' : T[];
-type TextFieldFilteredProps = Pick<DebouncedTextFieldProps, 'autoFocus' | 'activeColor' | 'data-testid' | 'helperText' | 'highlighted' | 'iconId' | 'isError' | 'label' | 'placeholder' | 'debounce' | 'sx' | 'inputSx' | 'maxLength' | 'id' | 'endAdornment'>;
-export type AutocompleteOption<T extends string> = {
-    readonly id: T;
-};
+import { AutocompleteOption, AutocompleteValue, TextFieldFilteredProps } from '../../../models/Autocomplete';
 export type AutocompleteProps<T extends string, Multiple extends boolean | undefined, Value = AutocompleteValue<T, Multiple>, Option = AutocompleteOption<T>> = {
     /**
      * The variant of the Autocomplete
@@ -93,10 +88,6 @@ export type AutocompleteProps<T extends string, Multiple extends boolean | undef
      * Custom text to be shown when number of values reaches maxValues.
      */
     maxValuesText?: string;
-    /**
-     * Number of selected values to be shown when multiple is enabled. Default value is 0, which shows all selected values tags.
-     */
-    limitValueTags?: number;
     /**
      * Callback when options list popover is opened.
      */
@@ -117,6 +108,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, limitValueTags, onClose, onOpen, disableClear }: AutocompleteProps<T, Multiple, Value>, ref: React.Ref<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element;
-declare const _default: typeof Autocomplete;
-export default _default;
+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;
+export default Autocomplete;

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

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { AutocompleteValue, TextFieldFilteredProps } from '../../../models/Autocomplete';
+export type AutocompleteInputProps<T extends string, Multiple extends boolean | undefined, Value = AutocompleteValue<T, Multiple>> = {
+    /**
+     * The variant of the Autocomplete
+     */
+    variant?: 'default' | 'text';
+    /**
+     * The value handled by this Autocomplete component. If multiple=true, it should be an array of ids.
+     * If multiple=false (by default) it should be a string.
+     */
+    value: Value;
+    /**
+     * If has filtered options in dropdown
+     */
+    hasFilteredOptions: boolean;
+    /**
+     * Whether the autocomplete is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Whether this component is working in multiple mode or single mode. By default it is single mode.
+     * See `value` prop description for more info.
+     */
+    multiple?: Multiple;
+    /**
+     * Properties to be pass through inner TextField component.
+     */
+    textFieldProps?: TextFieldFilteredProps;
+    /**
+     * Use this function to render the desired text for each id. Leave it empty if the id is also the label.
+     */
+    renderLabel: (id: T) => string;
+    /**
+     * Maximum length for allowFreeText value
+     */
+    maxValueLength?: number;
+    /**
+     * Maximum amount of values allowed when multiple is enabled. If not set, there is no limit.
+     */
+    maxValues?: number;
+    /**
+     * Custom text to be shown when number of values reaches maxValues.
+     */
+    maxValuesText?: string;
+    /**
+     * Disables clear button at the end of the component when field is dirty.
+     */
+    disableClear?: boolean;
+    isOpenPopover: boolean;
+    /**
+     * Ref to the outer HTMLDivElement
+     */
+    containerRef: React.RefObject<HTMLDivElement>;
+    inputRef: React.RefObject<HTMLInputElement>;
+    inputValue: string;
+    setInputValue: (value: string) => void;
+    placeholder: string;
+    onClosePopover: () => void;
+    onOpenPopover: () => void;
+    onSearchValueChange: (event: React.SyntheticEvent, searchValue: string) => void;
+    onPressEnter: (event: React.SyntheticEvent, inputValue: string) => void;
+    onRemoveValue: (event: React.SyntheticEvent, value: Value) => void;
+};
+/**
+ * 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, maxValues, maxValuesText, disableClear, containerRef, inputRef, onClosePopover, onOpenPopover, isOpenPopover, inputValue, setInputValue, placeholder, onSearchValueChange, onPressEnter, onRemoveValue }: AutocompleteInputProps<T, Multiple, Value>) => import("react/jsx-runtime").JSX.Element;
+export default AutocompleteInput;

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { AutocompleteValue } from '../../../models/Autocomplete';
+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.
+     * If multiple=false (by default) it should be a string.
+     */
+    value: Value;
+    /**
+     * Whether the autocomplete is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Use this function to render the desired text for each id. Leave it empty if the id is also the label.
+     */
+    renderLabel: (id: T) => string;
+    /**
+     * Disables clear button at the end of the component when field is dirty.
+     */
+    disableClear?: boolean;
+    isOpenPopover: boolean;
+    inputValue: string;
+    isHover: boolean;
+    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, disabled, renderLabel, disableClear, onOpenPopover, isOpenPopover, inputValue, isHover, onRemoveValue }: AutocompleteInputSelectionProps<T, Multiple, Value>) => import("react/jsx-runtime").JSX.Element;
+export default AutocompleteInputSelection;

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { FixedSizeList } from 'react-window';
+import { AutocompleteLabeledOption, AutocompleteOption, SelectedIndex } from '../../../models/Autocomplete';
+type AutocompleteListProps<T extends string, Multiple extends boolean | undefined, Option = AutocompleteOption<T>> = {
+    /**
+     * The available options to be shown on dropdown
+     */
+    options: readonly Option[];
+    filteredOptions: AutocompleteLabeledOption<T>[];
+    /**
+     * Whether the autocomplete options are loading or not. Use only on initial load or if using async search approach
+     */
+    isLoading?: boolean;
+    /**
+     * Custom text to be shown when autocomplete options are loading by the `isLoading` prop.
+     */
+    loadingText?: string;
+    /**
+     * Custom text to be shown when no options are available to be selected.
+     */
+    noOptionsText?: string;
+    /**
+     * Custom text to be shown when allowFreeText feature is enabled and written text is a new value to add.
+     */
+    addNewValueText?: string;
+    inputContainerRef: React.RefObject<HTMLDivElement>;
+    virtualListRef: React.RefObject<FixedSizeList<unknown>>;
+    listRef: React.RefObject<HTMLDivElement>;
+    isOpen: boolean;
+    selectedIndex: SelectedIndex<Multiple>;
+    highlightedIndex: number;
+    onAddSelectedValue: (event: React.MouseEvent<HTMLElement, MouseEvent>, option: AutocompleteLabeledOption<T>) => void;
+    onClickAwayPopover: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+};
+/**
+ * Powered autocomplete list.
+ */
+declare const AutocompleteList: <T extends string, Multiple extends boolean | undefined = undefined>({ options, isLoading, loadingText, noOptionsText, addNewValueText, inputContainerRef, isOpen, selectedIndex, highlightedIndex, virtualListRef, listRef, filteredOptions, onAddSelectedValue, onClickAwayPopover }: AutocompleteListProps<T, Multiple>) => import("react/jsx-runtime").JSX.Element;
+export default AutocompleteList;

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

@@ -20,7 +20,7 @@ export { default as CategorizedPicker } from './CategorizedPicker';
 export type { CategorizedPickerProps } from './CategorizedPicker';
 export { default as ItemSelector } from './ItemSelector';
 export type { ItemSelectorProps, ItemSelectorItem } from './ItemSelector';
-export { default as Autocomplete } from './Autocomplete';
+export { default as Autocomplete } from './autocomplete/Autocomplete';
 export { default as Select } from './Select';
 export { default as Switch } from './Switch';
 export { default as TextField } from './TextField';
@@ -35,7 +35,7 @@ export { default as SelectPopover } from './SelectPopover';
 export { default as Checkbox } from './Checkbox';
 export { default as Radio } from './Radio';
 export { default as PageSelector } from './PageSelector';
-export type { AutocompleteProps } from './Autocomplete';
+export type { AutocompleteProps } from './autocomplete/Autocomplete';
 export type { SelectProps } from './Select';
 export type { SwitchProps } from './Switch';
 export type { TextFieldProps } from './TextField';