@connectif/ui-components 8.1.1 → 9.0.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## [9.0.1] - 2026-05-28
+
+### Added
+
+- Added `minMenuWidth` prop to `Select` component to set a minimum width for the dropdown menu.
+- Added `maxMenuWidth` prop to `Select` component to cap the dropdown menu's natural width.
+- Added `view-week-outline` icon.
+
+### Changed
+
+- `Select` dropdown menu no longer matches the trigger element's width. The menu now sizes to its content, constrained by `minMenuWidth` and `maxMenuWidth`
+
+## [9.0.0] - 2026-05-21
+
+### Added
+
+- Added `file-document-outline` icon
+- Added `containerSx` prop to `Table` component to allow styling the `TableContainer` wrapper
+
+### Changed
+
+- Removed `DateIntervalPicker` `variant` prop (breaking change).
+- Improved `PageSelector` default text calculation to avoid wrong number of elements being shown.
+
+### Fixed
+
+- Fixed `ChipViewer` not recalculating visible chips when the container is resized.
+
 ## [8.1.1] - 2026-05-11
 
 ### Fixed

package/dist/components/icon/icons.d.ts

@@ -709,6 +709,7 @@ export declare const icons: {
     'file-delimited': string;
     'file-document': string;
     'file-document-box': string;
+    'file-document-outline': string;
     'file-excel': string;
     'file-excel-box': string;
     'file-export': string;
@@ -1859,6 +1860,7 @@ export declare const icons: {
     'view-sequential': string;
     'view-stream': string;
     'view-week': string;
+    'view-week-outline': string;
     vimeo: string;
     vine: string;
     violin: string;

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

@@ -75,6 +75,17 @@ export type SelectProps<T extends string | number | undefined, Multiple extends
      * The max height of the menu when open
      */
     menuMaxHeight?: string;
+    /**
+     * The minimum width (in px) of the dropdown menu.
+     * Defaults to 200.
+     */
+    minMenuWidth?: number;
+    /**
+     * The maximum width (in px) of the dropdown menu. Defaults to 400.
+     * When `virtualized=true`, the menu width is fixed to `minMenuWidth` by default,
+     * but `maxMenuWidth` still acts as an upper cap if `virtualizedProps.width` exceeds it.
+     */
+    maxMenuWidth?: number;
     /**
      * Ref to inner HTMLSelectElement
      */

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

@@ -1,6 +1,5 @@
 import { DateInterval } from '../../../models/DateInterval';
 import { ComparisonInterval } from '../../../models/ComparisonInterval';
-export declare const dateIntervalPickerVariants: readonly ["default", "input"];
 export type DateIntervalValues = {
     interval: DateInterval;
     startDate: Date;
@@ -9,11 +8,7 @@ export type DateIntervalValues = {
     comparisonStartDate: Date | null;
     comparisonEndDate: Date | null;
 };
-type DateIntervalPickerDefault = {
-    /**
-     * Component variant.
-     */
-    variant?: 'default';
+export type DateIntervalPickerProps = {
     /**
      * The start date of the date interval
      */
@@ -58,30 +53,6 @@ type DateIntervalPickerDefault = {
      * Color to be used when represent intersection of intervals
      */
     intersectionColor?: string;
-    /**
-     * Function to be called when the date interval changes
-     */
-    onChange?: (values: DateIntervalValues) => void;
-};
-type DateIntervalPickerInput = {
-    /**
-     * Component variant.
-     */
-    variant: 'input';
-    /**
-     * The start date of the date interval
-     */
-    startDate?: Date;
-    /**
-     * The end date of the date interval
-     */
-    endDate?: Date;
-    /**
-     * Function to be called when the date interval changes
-     */
-    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.
      */
@@ -96,21 +67,21 @@ export type DateIntervalPickerProps = (DateIntervalPickerDefault | DateIntervalP
     disabled?: boolean;
     /**
      * The minimum date allowed to be selected in the date interval.
-     * By default:
-     * Input variant: it will allow selecting dates from 1900-01-01 in input.
-     * Other variant: it will be the maxDate minus the maxSelectableDays
+     * 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:
-     * Input variant: it will be the current date, or 2100-12-31 when maxDate is not provided.
-     * Other variant: it will be the current date
+     * By default it will be the current date.
      */
     maxDate?: Date;
+    /**
+     * Function to be called when the date interval changes
+     */
+    onChange?: (values: DateIntervalValues) => void;
 };
 /**
  * Date interval picker component, which allows to select an interval between two Dates.
  */
-declare const DateIntervalPicker: ({ color, maxSelectableDays, disabled, minDate, maxDate, ...rest }: DateIntervalPickerProps) => import("react/jsx-runtime").JSX.Element;
+declare const DateIntervalPicker: ({ color, maxSelectableDays, disabled, minDate, maxDate, startDate, endDate, interval, allowCompare, showTime, allowedIntervals, comparisonInterval, comparisonStartDate, comparisonEndDate, comparisonColor, intersectionColor, onChange }: DateIntervalPickerProps) => import("react/jsx-runtime").JSX.Element;
 export default DateIntervalPicker;

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

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

package/dist/components/input/date-range-picker/DateRangePicker.d.ts

@@ -1,4 +1,3 @@
-import { DateIntervalValues } from '../date-interval-picker/DateIntervalPicker';
 export type DateRangePickerProps = {
     /**
      * The start date of the date interval
@@ -11,7 +10,10 @@ export type DateRangePickerProps = {
     /**
      * Function to be called when the date interval changes
      */
-    onChange: (values: Partial<Pick<DateIntervalValues, 'startDate' | 'endDate'>>) => void;
+    onChange: (values: {
+        startDate?: Date;
+        endDate?: Date;
+    }) => void;
     /**
      * The color to mark the selected interval. If not provided, the Theme primary color will be used.
      */

package/dist/components/input/date-range-picker/DateRangePickerButton.d.ts

@@ -0,0 +1,10 @@
+type DateRangePickerButtonProps = {
+    startDate?: Date;
+    endDate?: Date;
+    disabled?: boolean;
+    isPopoverOpen: boolean;
+    isEndDateVisible: boolean;
+    onClick: (anchorEl: HTMLInputElement) => void;
+};
+declare const DateRangePickerButton: ({ startDate, endDate, disabled, isPopoverOpen, isEndDateVisible, onClick }: DateRangePickerButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default DateRangePickerButton;

package/dist/components/table/Table.d.ts

@@ -1,4 +1,6 @@
-import { TableProps as MuiTableProps } from '@mui/material';
-export type TableProps = Pick<MuiTableProps, 'sx' | 'children' | 'className'>;
-declare const Table: ({ children, sx, className }: TableProps) => import("react/jsx-runtime").JSX.Element;
+import { TableProps as MuiTableProps, TableContainerProps } from '@mui/material';
+export type TableProps = Pick<MuiTableProps, 'sx' | 'children' | 'className'> & {
+    containerSx?: TableContainerProps['sx'];
+};
+declare const Table: ({ children, sx, className, containerSx }: TableProps) => import("react/jsx-runtime").JSX.Element;
 export default Table;