@connectif/ui-components 5.5.1 → 5.6.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [5.6.0] - 2026-03-12
+
+### Added
+
+- Added an `input` variant to `DateIntervalPicker`.
+- Added `selectableItemComponent`, `itemsPerRow`, and `itemsTitle` props to the `SelectPopover` component.
+
 ## [5.5.1] - 2026-03-10
 
 ### Fixed

package/dist/components/button/Button.d.ts

@@ -114,6 +114,10 @@ export type ButtonProps = Pick<MuiButtonProps, 'id' | 'disabled' | 'onClick' | '
      * The link element type to be used if this button is a link.
      */
     link?: React.ElementType;
+    /**
+     * Optional data-testid for testing purposes.
+     */
+    'data-testid'?: string;
 };
 /**
  * A component that displays a button with text and icon.
@@ -173,5 +177,9 @@ declare const Button: React.ForwardRefExoticComponent<Pick<MuiButtonProps, "id"
      * The link element type to be used if this button is a link.
      */
     link?: React.ElementType;
+    /**
+     * Optional data-testid for testing purposes.
+     */
+    'data-testid'?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/components/button/ButtonWithActions.d.ts

@@ -43,6 +43,7 @@ declare const ButtonWithActions: React.ForwardRefExoticComponent<Pick<MuiButtonP
     badgeLeft?: boolean;
     children?: React.ReactElement<"input">;
     link?: React.ElementType;
+    'data-testid'?: string;
 } & Pick<PopoverProps, "horizontalAlign" | "anchorHorizontalOrigin"> & {
     /**
      * The options to show in button submenu

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

@@ -13,6 +13,7 @@ export type CalendarMonthProps = {
     intersectionColor?: string;
     onSelect?: (day: number) => void;
     allowKeyboardNavigation?: boolean;
+    focusedDate?: SimpleDate | null;
 };
-declare const CalendarMonth: ({ minDate, maxDate, year, month, selections, intersectionColor, onSelect, allowKeyboardNavigation }: CalendarMonthProps) => import("react/jsx-runtime").JSX.Element;
+declare const CalendarMonth: ({ minDate, maxDate, year, month, selections, intersectionColor, onSelect, allowKeyboardNavigation, focusedDate }: CalendarMonthProps) => import("react/jsx-runtime").JSX.Element;
 export default CalendarMonth;

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

@@ -1,4 +1,5 @@
 import { SelectPopoverProps } from './SelectPopover';
+import { SelectableItem } from '../../models/SelectableItem';
 export type ItemSelectorItem = {
     id: string;
 };
@@ -21,6 +22,6 @@ export type ItemSelectorProps<T extends ItemSelectorItem> = {
     onChange: (value: T[]) => void;
     onClose?: () => void;
     onLoadMore?: (searchText: string) => void;
-} & Pick<SelectPopoverProps, 'applyButtonText' | 'emptyListPlaceholder' | 'hasMore' | 'isLoading' | 'isLoadingSubtitle2' | 'maxSelectedItems' | 'onSearch' | 'requiredSelectedItemsToApply' | 'disableApplyWithoutChanges' | 'popoverWidth'>;
+} & Pick<SelectPopoverProps<SelectableItem>, 'applyButtonText' | 'emptyListPlaceholder' | 'hasMore' | 'isLoading' | 'isLoadingSubtitle2' | 'maxSelectedItems' | 'onSearch' | 'requiredSelectedItemsToApply' | 'disableApplyWithoutChanges' | 'popoverWidth'>;
 declare const ItemSelector: <T extends ItemSelectorItem>({ items, selectedItems, maxSelectedItems, variant, placeholder, disabled, helperText, isError, limitItemChips, itemChipWidth, isLoading, isLoadingSubtitle2, hasMore, applyButtonText, emptyListPlaceholder, requiredSelectedItemsToApply, disableApplyWithoutChanges, popoverWidth, renderChipLabel, renderItem, onChange, onLoadMore, onSearch, onClose }: ItemSelectorProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default ItemSelector;

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

@@ -1,24 +1,11 @@
 import * as React from 'react';
 import { PopoverProps } from '../popover/Popover';
-import { IconId } from '../icon';
-export type SelectableItem = {
-    id: string;
-    name: string;
-    subtitle1?: string;
-    subtitle2?: string;
-    disabled?: boolean;
-    selected: boolean;
-    color?: string;
-    iconId?: IconId;
-    chipText?: string;
-    tooltip?: string;
-    isLoadingSubtitle2?: boolean;
-};
-export type SelectPopoverProps = Pick<PopoverProps, 'anchorEl'> & {
+import { SelectableItem } from '../../models/SelectableItem';
+export type SelectPopoverProps<T extends SelectableItem> = Pick<PopoverProps, 'anchorEl'> & {
     /**
      * Called every time the popover apply changes.
      */
-    onApply: (selectedItemsIds: string[]) => void;
+    onApply: (selectedItemsIds: T['id'][]) => void;
     /**
      * Called every time the popover cancel changes.
      */
@@ -54,7 +41,7 @@ export type SelectPopoverProps = Pick<PopoverProps, 'anchorEl'> & {
     /**
      * The selectable items.
      */
-    items: SelectableItem[];
+    items: T[];
     /**
      * Elements colors depending on state.
      */
@@ -65,7 +52,7 @@ export type SelectPopoverProps = Pick<PopoverProps, 'anchorEl'> & {
     /**
      * The selected items.
      */
-    selectedItemsIds: string[];
+    selectedItemsIds: T['id'][];
     popoverWidth?: React.CSSProperties['width'];
     /** If `true`, the modal will not restore focus to previously focused element once modal is hidden or unmounted.*/
     disableRestoreFocus?: boolean;
@@ -103,9 +90,21 @@ export type SelectPopoverProps = Pick<PopoverProps, 'anchorEl'> & {
     centeredInScreen?: boolean;
     /** Padding for div content*/
     paddingContent?: string;
+    /**
+     * Component to override rendered item
+     */
+    selectableItemComponent?: React.ComponentType<T>;
+    /**
+     * Item number per row
+     */
+    itemsPerRow?: number;
+    /**
+     * Node as show as item children title
+     */
+    itemsTitle?: React.ReactNode;
 };
 /**
  * SelectPopover is a components that renders a complex selector with DataDisplayItems and is multiselectable, infinite scroll and search input.
  */
-declare const SelectPopover: ({ onApply, onCancel, onLoadMore, onSearch, debounce, multiple, hasMore, isLoading, isLoadingSubtitle2, requiredSelectedItemsToApply, searchPlaceholder, items, anchorEl, itemsColorStyles, selectedItemsIds, popoverWidth, disableRestoreFocus, applyButtonText, maxSelectedItems, keepCurrentSelectionOnSearch, emptyListPlaceholder, disableApplyWithoutChanges, centeredInScreen, paddingContent }: SelectPopoverProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectPopover: <T extends SelectableItem = SelectableItem>({ onApply, onCancel, onLoadMore, onSearch, debounce, multiple, hasMore, isLoading, isLoadingSubtitle2, requiredSelectedItemsToApply, searchPlaceholder, items, anchorEl, itemsColorStyles, selectedItemsIds, popoverWidth, disableRestoreFocus, applyButtonText, maxSelectedItems, keepCurrentSelectionOnSearch, emptyListPlaceholder, disableApplyWithoutChanges, centeredInScreen, paddingContent, selectableItemComponent, itemsPerRow, itemsTitle }: SelectPopoverProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SelectPopover;

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

@@ -1,16 +1,9 @@
-import { IconId } from '../icon';
-export type SelectPopoverItemProps = {
-    id: string;
-    name: string;
-    subtitle1?: string;
-    subtitle2?: string;
-    disabled?: boolean;
-    iconId?: IconId;
-    chipText?: string;
-    color?: string;
-    tooltip?: string;
-    isLoadingSubtitle2?: boolean;
+import * as React from 'react';
+import { SelectableItem } from '../../models/SelectableItem';
+export type SelectPopoverItemProps<T extends SelectableItem> = T & {
+    itemsPerRow?: number;
     onClick?: () => void;
+    selectableItemComponent?: React.ComponentType<T>;
 };
-declare const SelectPopoverItem: ({ id, name, subtitle1, subtitle2, disabled, iconId, chipText, color, tooltip, isLoadingSubtitle2, onClick }: SelectPopoverItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectPopoverItem: <T extends SelectableItem>({ onClick, itemsPerRow, selectableItemComponent, ...rest }: SelectPopoverItemProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default SelectPopoverItem;

package/dist/components/input/{DateIntervalPicker.d.ts → date-interval-picker/DateIntervalPicker.d.ts}

@@ -1,5 +1,5 @@
-import { DateInterval } from '../../models/DateInterval';
-import { ComparisonInterval } from '../../models/ComparisonInterval';
+import { DateInterval } from '../../../models/DateInterval';
+import { ComparisonInterval } from '../../../models/ComparisonInterval';
 export type DateIntervalValues = {
     interval: DateInterval;
     startDate: Date;
@@ -8,11 +8,11 @@ export type DateIntervalValues = {
     comparisonStartDate: Date | null;
     comparisonEndDate: Date | null;
 };
-export type DateIntervalPickerProps = {
+type DateIntervalPickerDefault = {
     /**
-     * The identifier of the interval.
+     * Component variant.
      */
-    interval: DateInterval;
+    variant?: 'default';
     /**
      * The start date of the date interval
      */
@@ -22,21 +22,21 @@ export type DateIntervalPickerProps = {
      */
     endDate: Date;
     /**
-     * The color to mark the selected interval. If not provided, the Theme primary color will be used.
+     * The identifier of the interval.
      */
-    color?: string;
+    interval: DateInterval;
     /**
-     * The maximum quantity of days allowed to be selected in the date interval
+     * Whether it should allow comparison of intervals
      */
-    maxSelectableDays: number;
+    allowCompare?: boolean;
     /**
-     * Whether the date interval picker is disabled
+     * Also show time
      */
-    disabled?: boolean;
+    showTime?: boolean;
     /**
-     * Whether it should allow comparison of intervals
+     * Set of intervals to show at the DateIntervalPicker popover. All showed by default.
      */
-    allowCompare?: boolean;
+    allowedIntervals?: DateInterval[];
     /**
      * The identifier of the comparison interval.
      */
@@ -58,30 +58,54 @@ export type DateIntervalPickerProps = {
      */
     intersectionColor?: string;
     /**
-     * The minimum date allowed to be selected in the date interval.
-     * By default it will be the maxDate minus the maxSelectableDays
+     * Function to be called when the date interval changes
      */
-    minDate?: Date;
+    onChange?: (values: DateIntervalValues) => void;
+};
+type DateIntervalPickerInput = {
     /**
-     * The maximum date allowed to be selected in the date interval.
-     * By default it will be the current date
+     * Component variant.
      */
-    maxDate?: Date;
+    variant: 'input';
     /**
-     * Set of intervals to show at the DateIntervalPicker popover. All showed by default.
+     * The start date of the date interval
      */
-    allowedIntervals?: DateInterval[];
+    startDate?: Date;
     /**
-     * Also show time
+     * The end date of the date interval
      */
-    showTime?: boolean;
+    endDate?: Date;
     /**
      * Function to be called when the date interval changes
      */
-    onChange?: (values: DateIntervalValues) => void;
+    onChange: (values: Partial<Pick<DateIntervalValues, 'startDate' | 'endDate'>>) => void;
+};
+export type DateIntervalPickerProps = (DateIntervalPickerDefault | DateIntervalPickerInput) & {
+    /**
+     * The color to mark the selected interval. If not provided, the Theme primary color will be used.
+     */
+    color?: string;
+    /**
+     * The maximum quantity of days allowed to be selected in the date interval
+     */
+    maxSelectableDays: number;
+    /**
+     * Whether the date interval picker is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The minimum date allowed to be selected in the date interval.
+     * By default it will be the maxDate minus the maxSelectableDays
+     */
+    minDate?: Date;
+    /**
+     * The maximum date allowed to be selected in the date interval.
+     * By default it will be the current date
+     */
+    maxDate?: Date;
 };
 /**
  * Date interval picker component, which allows to select an interval between two Dates.
  */
-declare const DateIntervalPicker: ({ interval, startDate, endDate, color, maxSelectableDays, disabled, allowCompare, comparisonInterval, comparisonStartDate, comparisonEndDate, comparisonColor, intersectionColor, minDate, maxDate, allowedIntervals, showTime, onChange }: DateIntervalPickerProps) => import("react/jsx-runtime").JSX.Element;
+declare const DateIntervalPicker: ({ color, maxSelectableDays, disabled, minDate, maxDate, ...rest }: DateIntervalPickerProps) => import("react/jsx-runtime").JSX.Element;
 export default DateIntervalPicker;

package/dist/components/input/date-interval-picker/DateIntervalPickerDefaultButton.d.ts

@@ -0,0 +1,9 @@
+import { DateIntervalPickerProps } from './DateIntervalPicker';
+type DateIntervalPickerDefaultButtonProps = Pick<Exclude<DateIntervalPickerProps, {
+    variant: 'input';
+}>, 'startDate' | 'endDate' | 'interval' | 'showTime' | 'comparisonStartDate' | 'comparisonEndDate' | 'disabled'> & {
+    isEndDateVisible: boolean;
+    onClick: (anchorEl: HTMLButtonElement) => void;
+};
+declare const DateIntervalPickerDefaultButton: ({ interval, startDate, endDate, disabled, comparisonStartDate, comparisonEndDate, showTime, isEndDateVisible, onClick }: DateIntervalPickerDefaultButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default DateIntervalPickerDefaultButton;

package/dist/components/input/date-interval-picker/DateIntervalPickerInputButton.d.ts

@@ -0,0 +1,10 @@
+import { DateIntervalPickerProps } from './DateIntervalPicker';
+type DateIntervalPickerInputButtonProps = Pick<Extract<DateIntervalPickerProps, {
+    variant: 'input';
+}>, 'startDate' | 'endDate' | 'disabled'> & {
+    isPopoverOpen: boolean;
+    isEndDateVisible: boolean;
+    onClick: (anchorEl: HTMLInputElement) => void;
+};
+declare const DateIntervalPickerInputButton: ({ startDate, endDate, disabled, isPopoverOpen, isEndDateVisible, onClick }: DateIntervalPickerInputButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default DateIntervalPickerInputButton;

package/dist/components/input/{DateIntervalPickerInputs.d.ts → date-interval-picker/DateIntervalPickerInputs.d.ts}

@@ -1,9 +1,9 @@
 export type FocusableInputDate = 'startDate' | 'endDate' | 'comparisonStartDate' | 'comparisonEndDate';
 export type DateIntervalPickerInputsProps = {
-    startDate: string;
-    startTime: Date;
-    endDate: string;
-    endTime: Date;
+    startDate?: string;
+    startTime?: Date;
+    endDate?: string;
+    endTime?: Date;
     comparisonStartDate: string;
     comparisonStartTime: Date;
     comparisonEndDate: string;

package/dist/components/input/{DateIntervalPickerList.d.ts → date-interval-picker/DateIntervalPickerList.d.ts}

@@ -1,5 +1,5 @@
-import { ComparisonInterval } from '../../models/ComparisonInterval';
-import { DateInterval } from '../../models/DateInterval';
+import { ComparisonInterval } from '../../../models/ComparisonInterval';
+import { DateInterval } from '../../../models/DateInterval';
 export declare const dateIntervals: {
     readonly today: "TODAY";
     readonly yesterday: "YESTERDAY";

package/dist/components/input/date-interval-picker/DateIntervalPickerPopover.d.ts

@@ -0,0 +1,54 @@
+import { SimpleDate } from '../../../models/SimpleDate';
+import { FocusableInputDate } from './DateIntervalPickerInputs';
+import { DateInterval } from '../../../models/DateInterval';
+import { ComparisonInterval } from '../../../models/ComparisonInterval';
+export type DateIntervalPickerState = {
+    interval?: DateInterval;
+    highlightedInput: FocusableInputDate;
+    focusedDateInCalendar: SimpleDate | null;
+    startDate?: string;
+    startTime?: Date;
+    startSimpleDate: SimpleDate | null;
+    endDate?: string;
+    endTime?: Date;
+    endSimpleDate: SimpleDate | null;
+    comparisonInterval: ComparisonInterval;
+    comparisonStartDate: string;
+    comparisonStartTime: Date;
+    comparisonStartSimpleDate: SimpleDate | null;
+    comparisonEndDate: string;
+    comparisonEndTime: Date;
+    comparisonEndSimpleDate: SimpleDate | null;
+    isComparing: boolean | undefined;
+};
+export type DateIntervalPickerPopoverProps = {
+    variant?: 'default' | 'input';
+    interval: DateInterval;
+    startDate?: Date;
+    endDate?: Date;
+    color: string;
+    maxSelectableDays: number;
+    disabled?: boolean;
+    allowCompare?: boolean;
+    comparisonInterval?: ComparisonInterval | null;
+    comparisonStartDate?: Date | null;
+    comparisonEndDate?: Date | null;
+    comparisonColor: string;
+    intersectionColor: string;
+    minDate: Date;
+    maxDate: Date;
+    allowedIntervals?: DateInterval[];
+    anchorEl?: HTMLElement | null;
+    showTime?: boolean;
+    onApply: (values: {
+        interval: DateInterval;
+        startDate: Date;
+        endDate: Date;
+        comparisonInterval: ComparisonInterval | null;
+        comparisonStartDate: Date | null;
+        comparisonEndDate: Date | null;
+    }) => void;
+    onCancel: () => void;
+};
+declare const DateIntervalPickerPopover: ({ variant, interval, startDate, endDate, color, maxSelectableDays, allowCompare, comparisonInterval, comparisonStartDate, comparisonEndDate, comparisonColor, intersectionColor, anchorEl, minDate, maxDate, allowedIntervals, showTime, onApply, onCancel }: DateIntervalPickerPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export default DateIntervalPickerPopover;

package/dist/components/input/date-interval-picker/DateIntervalRangeSelector.d.ts

@@ -0,0 +1,13 @@
+import { DateIntervalPickerState } from './DateIntervalPickerPopover';
+export type DateIntervalRangeSelectorProps = {
+    state: DateIntervalPickerState;
+    color: string;
+    minDate: Date;
+    maxDate: Date;
+    comparisonColor: string;
+    intersectionColor: string;
+    showTime: boolean;
+    onChange: (state: DateIntervalPickerState) => void;
+};
+declare const DateIntervalRangeSelector: ({ state, color, minDate, maxDate, comparisonColor, intersectionColor, showTime, onChange }: DateIntervalRangeSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export default DateIntervalRangeSelector;

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

@@ -4,8 +4,8 @@ export { default as DebouncedTextField } from './DebouncedTextField';
 export type { DebouncedTextFieldProps } from './DebouncedTextField';
 export { default as InputHelperText } from './InputHelperText';
 export type { InputHelperTextProps } from './InputHelperText';
-export { default as DateIntervalPicker } from './DateIntervalPicker';
-export type { DateIntervalPickerProps, DateIntervalValues } from './DateIntervalPicker';
+export { default as DateIntervalPicker } from './date-interval-picker/DateIntervalPicker';
+export type { DateIntervalPickerProps, DateIntervalValues } from './date-interval-picker/DateIntervalPicker';
 export { default as SelectPopoverItem } from './SelectPopoverItem';
 export type { SelectPopoverItemProps } from './SelectPopoverItem';
 export { default as TimezoneSelector } from './TimezoneSelector';
@@ -46,7 +46,8 @@ export type { PhoneFieldProps } from './PhoneField';
 export type { NumberFieldProps } from './NumberField';
 export type { DatePickerProps } from './DatePicker';
 export type { InputLabelProps } from './InputLabel';
-export type { SelectPopoverProps, SelectableItem } from './SelectPopover';
+export type { SelectPopoverProps } from './SelectPopover';
+export type { SelectableItem } from '../../models/SelectableItem';
 export type { CheckboxProps } from './Checkbox';
 export type { RadioProps } from './Radio';
 export type { PageSelectorProps } from './PageSelector';