@connectif/ui-components 3.0.4 → 4.0.0

package/CHANGELOG.md

@@ -1,43 +1,51 @@
 # Changelog
 
-## [2.4.3] - 2025-11-25
+## [4.0.0] - 2026-01-13
 
 ### Added
 
-- Added changelog file in package.
-- Added optional centeredInScreen and paddingContent props to the SelectPopover component.
-- Modified emptyListPlaceholder prop to receive string | React.ReactNode in SelectPopover component.
-- Added optional sx, onMouseEnter, and onMouseLeave props to the EnhancedCard component.
-- Added new cellphone-off, filter-off and tag-hidden icons.
-- Added new Carousel component.
-- Added optional showTime prop in DateIntervalPicker component.
-- Added optional keepMounted prop in TabContent.
-- Added optional disableContentScroll prop in Tabs component.
+- `ChipViewer` component has been added.
 
-## [3.0.0] - 2025-12-11
+### 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
 
-- `Tabs` now supports a `hideScrollButtons` and `hideLineTabs` prop.
+- Added full month date format.
+- Added "brain", "tools" and "sitemap-outline" icons.
 
-### Changed
+## [3.0.4] - 2025-12-23
 
-- `Tabs` changes its styles to match the new design.
-- `DateIntervalPicker` changes buttons styles.
+### Added
 
-### Fixed
+- Added "rotate-3d-variant" icon.
 
-- Fixed an issue where reloading the `Tabs` component on a non-first tab caused an unwanted scroll effect.
-- Fixed change interval when showTime is true.
+## [3.0.3] - 2025-12-22
 
-### Security
+### Added
 
-- Upgrade to Typescript 5.9
-- Upgrade cspell to 6.0.0 (latest)
+- Added "minimizeIconId", "closeIconId" and "backIconId" props to MinimizableWindow component.
 
-### Removed
+## [3.0.2] - 2025-12-16
 
-- `TabButton` no longer accepts the `disableUppercase` prop; Text always will be lowercase.
+### Added
+
+- Added new styles for `Tabs`.
+
+### Fixed
+
+- Fixed bug with timezone in `DateIntervalPicker`
 
 ## [3.0.1] - 2025-12-12
 
@@ -50,24 +58,41 @@
 
 - Fixed bug with timezone in `DateIntervalPicker`
 
-## [3.0.2] - 2025-12-16
+## [3.0.0] - 2025-12-11
 
 ### Added
 
-- Added new styles for `Tabs`.
+- `Tabs` now supports a `hideScrollButtons` and `hideLineTabs` prop.
+
+### Changed
+
+- `Tabs` changes its styles to match the new design.
+- `DateIntervalPicker` changes buttons styles.
 
 ### Fixed
 
-- Fixed bug with timezone in `DateIntervalPicker`
+- Fixed an issue where reloading the `Tabs` component on a non-first tab caused an unwanted scroll effect.
+- Fixed change interval when showTime is true.
 
-## [3.0.3] - 2025-12-22
+### Security
 
-### Added
+- Upgrade to Typescript 5.9
+- Upgrade cspell to 6.0.0 (latest)
 
-- Added "minimizeIconId", "closeIconId" and "backIconId" props to MinimizableWindow component.
+### Removed
 
-## [3.0.4] - 2025-12-23
+- `TabButton` no longer accepts the `disableUppercase` prop; Text always will be lowercase.
+
+## [2.4.3] - 2025-11-25
 
 ### Added
 
-- Added "rotate-3d-variant" icon.
+- Added changelog file in package.
+- Added optional centeredInScreen and paddingContent props to the SelectPopover component.
+- Modified emptyListPlaceholder prop to receive string | React.ReactNode in SelectPopover component.
+- Added optional sx, onMouseEnter, and onMouseLeave props to the EnhancedCard component.
+- Added new cellphone-off, filter-off and tag-hidden icons.
+- Added new Carousel component.
+- Added optional showTime prop in DateIntervalPicker component.
+- Added optional keepMounted prop in TabContent.
+- Added optional disableContentScroll prop in Tabs component.

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/icon/icons.d.ts

@@ -270,6 +270,7 @@ export declare const icons: {
     box: string;
     'box-cutter': string;
     'box-shadow': string;
+    brain: string;
     bridge: string;
     briefcase: string;
     'briefcase-check': string;
@@ -1583,6 +1584,7 @@ export declare const icons: {
     'sim-alert': string;
     'sim-off': string;
     sitemap: string;
+    'sitemap-outline': string;
     'skip-backward': string;
     'skip-forward': string;
     'skip-next': string;
@@ -1750,6 +1752,7 @@ export declare const icons: {
     timetable: string;
     'toggle-switch': string;
     'toggle-switch-off': string;
+    tools: string;
     tooltip: string;
     'tooltip-edit': string;
     'tooltip-image': string;

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';