@connectif/ui-components 7.0.1 → 8.1.0

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

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { ChipProps } from './Chip';
+/**
+ * @deprecated Use `ChipViewer` instead.
+ */
 export type ChipListProps = React.PropsWithChildren<{
     /**
      * The chips to display.
@@ -7,6 +10,8 @@ export type ChipListProps = React.PropsWithChildren<{
     chips: ChipProps[];
 }>;
 /**
+ * @deprecated Use `ChipViewer` instead.
+ *
  * Shows a list of chips, in a horizontal layout.
  * If chips doesn't fit in the available space, they will be overflow to multiline.
  */

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

@@ -1,33 +1,24 @@
 import * as React from 'react';
-import { ThemeTypography } from '../../theme';
 import { ChipProps } from './Chip';
-import { SxProps } from '@mui/material';
+import { TypographyProps } from '../typography';
+import { TypographyVariant } from '../../theme/Typography';
 export declare const CHIP_DATA_TEST_ID = "chip-viewer-chip";
 export declare const CHIP_VIEWER_ROOT_ID = "chip-viewer-root";
-declare const chipViewerStyle: {
-    circle: {
-        borderRadius: string;
-        backgroundColor: string;
-        color: string;
-    };
-    square: {
-        borderRadius: string;
-        backgroundColor: string;
-        color: string;
-    };
-};
+export declare const chipViewerVariants: readonly ["circle", "square"];
+type ChipViewerVariant = (typeof chipViewerVariants)[number];
 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;
+    variant?: ChipViewerVariant;
+    typographyVariant?: TypographyVariant;
+    preventHiddenChipsTooltip?: boolean;
     forceRecalculate?: boolean;
+    slotProps?: {
+        chip?: Partial<Pick<ChipProps, 'variant' | 'size' | 'sx'>>;
+        typography?: Partial<Pick<TypographyProps, 'variant'>>;
+    };
     /**
      * Function to set custom chip name
      * @param id
@@ -42,5 +33,5 @@ export type ChipViewerProps = {
     onRemoveChip?: (event: React.SyntheticEvent, id: string) => void;
     onHasHiddenChipsChange?: (hasHiddenChips: boolean) => void;
 };
-declare const ChipViewer: ({ values, chipSx, chipSize, chipVariant, placeholder, numberLines, reserveHeight, variant, preventHiddenChipsTooltip, typographyVariant, forceRecalculate, renderChipLabel, onRemoveChip, onClickChip, onHasHiddenChipsChange, getWarningTooltip }: ChipViewerProps) => import("react/jsx-runtime").JSX.Element;
+declare const ChipViewer: ({ values, placeholder, numberLines, reserveHeight, variant, preventHiddenChipsTooltip, forceRecalculate, slotProps, renderChipLabel, onRemoveChip, onClickChip, onHasHiddenChipsChange, getWarningTooltip }: ChipViewerProps) => import("react/jsx-runtime").JSX.Element;
 export default ChipViewer;

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { ChipProps } from './Chip';
 import { PopoverProps } from '../popover';
+export declare const menuChipPlacements: readonly ["top", "bottom"];
+type MenuChipPlacement = (typeof menuChipPlacements)[number];
 export type MenuChipProps = Omit<ChipProps, 'children' | 'component'> & Pick<PopoverProps, 'anchorHorizontalOrigin' | 'horizontalAlign'> & {
     /**
      * The list of menu items to display.
@@ -19,7 +21,7 @@ export type MenuChipProps = Omit<ChipProps, 'children' | 'component'> & Pick<Pop
      * To show menu on the top of de chip.
      * @default bottom
      */
-    placement?: 'top' | 'bottom';
+    placement?: MenuChipPlacement;
     /**
      * Called when the menuChip is closed by Escape key, Tab key or click outside.
      */
@@ -47,7 +49,7 @@ declare const MenuChip: React.ForwardRefExoticComponent<Omit<ChipProps, "childre
      * To show menu on the top of de chip.
      * @default bottom
      */
-    placement?: "top" | "bottom";
+    placement?: MenuChipPlacement;
     /**
      * Called when the menuChip is closed by Escape key, Tab key or click outside.
      */

package/dist/components/dialog/ConfirmationDialog.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { DialogProps } from './Dialog';
-export type ConfirmationDialogVariant = 'primary' | 'warning';
+export declare const confirmationDialogVariants: readonly ["primary", "warning"];
+export type ConfirmationDialogVariant = (typeof confirmationDialogVariants)[number];
 export type ConfirmationDialogProps = Pick<DialogProps, 'title' | 'open' | 'children' | 'TransitionProps' | 'size' | 'fullScreen'> & {
     /**
      * Text to override the accept button default text

package/dist/components/dialog/Dialog.d.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { DialogProps as MuiDialogProps } from '@mui/material';
+export declare const dialogSizes: readonly ["S", "M", "L", "XL", "XXL"];
+type DialogSize = (typeof dialogSizes)[number];
 export type DialogProps = Pick<MuiDialogProps, 'open' | 'sx' | 'children' | 'TransitionProps' | 'fullScreen'> & {
     /**
      * The title of the Dialog
      */
     title: string | React.ReactNode;
-    size?: 'S' | 'M' | 'L' | 'XL' | 'XXL';
+    size?: DialogSize;
     noPadding?: boolean;
     noPaddingTitle?: boolean;
     wrapChildren?: boolean;

package/dist/components/divider/Divider.d.ts

@@ -1,9 +1,12 @@
 import { DividerProps as MuiDividerProps } from '@mui/material';
+export declare const dividerVariants: readonly ["fullWidth", "middle"];
+type DividerVariant = (typeof dividerVariants)[number];
+export declare const dividerOrientations: readonly ["horizontal", "vertical"];
 export type DividerProps = Pick<MuiDividerProps, 'orientation' | 'flexItem' | 'sx'> & {
     /**
      * The variant to use for the divider.
      */
-    variant?: 'fullWidth' | 'middle';
+    variant?: DividerVariant;
     /**
      * The color of the divider. By default, the divider will use the color of
      * grey300

package/dist/components/formatter/CurrencyFormatter.d.ts

@@ -1,3 +1,5 @@
+export declare const currencyNotations: readonly ["compact"];
+type CurrencyNotation = (typeof currencyNotations)[number];
 export type CurrencyFormatterProps = {
     /**
      * Amount to format
@@ -6,7 +8,7 @@ export type CurrencyFormatterProps = {
     /**
      * Notation to use
      */
-    notation?: 'compact';
+    notation?: CurrencyNotation;
     /**
      * Ignore context Currency and use this one instead
      */

package/dist/components/formatter/PercentageFormatter.d.ts

@@ -1,3 +1,5 @@
+export declare const percentageFractionSizes: readonly [0, 1, 2, 3];
+type PercentageFractionSize = (typeof percentageFractionSizes)[number];
 export type PercentageFormatterProps = {
     /**
      * Value to format
@@ -6,7 +8,7 @@ export type PercentageFormatterProps = {
     /**
      * Quantity of decimals to use
      */
-    fractionSize?: 0 | 1 | 2 | 3;
+    fractionSize?: PercentageFractionSize;
 };
 /**
  * Component to format any currency amount.

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

@@ -11,6 +11,8 @@ export declare const iconSizes: {
     readonly XL: 48;
     readonly XXL: 72;
 };
+export declare const iconSizeNames: (keyof typeof iconSizes)[];
+export type IconSize = (typeof iconSizeNames)[number];
 export type IconProps = Pick<SvgIconProps, 'sx'> & {
     /**
      * The ID of the icon to display.
@@ -19,7 +21,7 @@ export type IconProps = Pick<SvgIconProps, 'sx'> & {
     /**
      * The size of the icon to display.
      */
-    size?: 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL';
+    size?: IconSize;
     /**
      * Classes of this icon
      */
@@ -38,7 +40,7 @@ declare const Icon: React.ForwardRefExoticComponent<Pick<SvgIconProps, "sx"> & {
     /**
      * The size of the icon to display.
      */
-    size?: "XXS" | "XS" | "S" | "M" | "L" | "XL" | "XXL";
+    size?: IconSize;
     /**
      * Classes of this icon
      */

package/dist/components/info/InfoBox.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { SxProps } from '@mui/material';
-type InfoBoxVariant = 'default';
+export declare const infoBoxVariants: readonly ["default"];
+type InfoBoxVariant = (typeof infoBoxVariants)[number];
 export type InfoBoxProps = {
     children: React.ReactNode;
     variant?: InfoBoxVariant;

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

@@ -1,4 +1,6 @@
 import { CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';
+export declare const checkboxLabelPlacements: readonly ["start", "end"];
+type CheckboxLabelPlacement = (typeof checkboxLabelPlacements)[number];
 export type CheckboxProps = Pick<MuiCheckboxProps, 'checked' | 'tabIndex' | 'indeterminate'> & {
     /**
      * Whether the checkbox is checked or not.
@@ -19,7 +21,7 @@ export type CheckboxProps = Pick<MuiCheckboxProps, 'checked' | 'tabIndex' | 'ind
     /**
      * Where to put the `label` text, if any.
      */
-    labelPlacement?: 'start' | 'end';
+    labelPlacement?: CheckboxLabelPlacement;
     /**
      * Optional class in the input of the checkbox.
      */

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

@@ -52,12 +52,14 @@ export type ColorPickerProps = {
      * rgba will be used when alpha is allowed and the color has transparency even in hex mode.
      * @default 'auto'
      */
-    mode?: 'hex' | 'auto';
+    mode?: ColorPickerMode;
     /**
      * A function to update color value
      */
     onChange: (value: string) => void;
 };
+export declare const colorPickerModes: readonly ["hex", "auto"];
+type ColorPickerMode = (typeof colorPickerModes)[number];
 export declare const colorPickerDefaultColors: string[];
 /**
  * A component that displays color picker from react-best-gradient-color-picker.

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

@@ -1,10 +1,12 @@
 import { SxProps } from '@mui/material';
 import * as React from 'react';
+export declare const inputHelperTextSeverities: readonly ["info", "error"];
+type InputHelperTextSeverity = (typeof inputHelperTextSeverities)[number];
 export type InputHelperTextProps = React.PropsWithChildren<{
     /**
      * The severity of this text
      */
-    severity?: 'info' | 'error';
+    severity?: InputHelperTextSeverity;
     /**
      * Styles to custom main Box component
      */
@@ -18,7 +20,7 @@ declare const InputHelperText: React.ForwardRefExoticComponent<{
     /**
      * The severity of this text
      */
-    severity?: "info" | "error";
+    severity?: InputHelperTextSeverity;
     /**
      * Styles to custom main Box component
      */

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { SxProps } from '@mui/material';
 import { TooltipProps } from '../tooltip/Tooltip';
+export declare const inputLabelSeverities: readonly ["info", "error"];
+type InputLabelSeverity = (typeof inputLabelSeverities)[number];
 export type InputLabelProps = React.PropsWithChildren<{
     /**
      * The `for` native attribute. Set here the `id` of the related
@@ -14,7 +16,7 @@ export type InputLabelProps = React.PropsWithChildren<{
     /**
      * The severity of this label
      */
-    severity?: 'info' | 'error';
+    severity?: InputLabelSeverity;
     /**
      * Show an info icon with the text as tooltip
      */
@@ -37,7 +39,7 @@ declare const InputLabel: React.ForwardRefExoticComponent<{
     /**
      * The severity of this label
      */
-    severity?: "info" | "error";
+    severity?: InputLabelSeverity;
     /**
      * Show an info icon with the text as tooltip
      */

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

@@ -1,12 +1,14 @@
 import { SelectPopoverProps } from './SelectPopover';
 import { SelectableItem } from '../../models/SelectableItem';
+export declare const itemSelectorVariants: readonly ["circular", "rounded", "transparent"];
+type ItemSelectorVariant = (typeof itemSelectorVariants)[number];
 export type ItemSelectorItem = {
     id: string;
 };
 export type ItemSelectorProps<T extends ItemSelectorItem> = {
     items: T[];
     selectedItems: T[];
-    variant?: 'circular' | 'rounded' | 'transparent';
+    variant?: ItemSelectorVariant;
     placeholder?: string;
     disabled?: boolean;
     helperText?: string;

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { TextFieldProps } from './TextField';
+export declare const numberFieldTypes: readonly ["integer", "decimal"];
+type NumberFieldType = (typeof numberFieldTypes)[number];
 export type NumberFieldProps = Omit<TextFieldProps, 'value' | 'onChange' | 'multiline' | 'onScroll' | 'type' | 'defaultValue'> & {
     /**
      * The numeric value of this input.
@@ -9,7 +11,7 @@ export type NumberFieldProps = Omit<TextFieldProps, 'value' | 'onChange' | 'mult
      * The numerical set to which the field belongs.
      * * @default integer
      */
-    type?: 'integer' | 'decimal';
+    type?: NumberFieldType;
     /**
      * Called when value is changed internally (both with user typing or
      * by using arrowUp/arrowDown keyboard keys)
@@ -65,7 +67,7 @@ declare const NumberField: React.ForwardRefExoticComponent<Omit<TextFieldProps,
      * The numerical set to which the field belongs.
      * * @default integer
      */
-    type?: "integer" | "decimal";
+    type?: NumberFieldType;
     /**
      * Called when value is changed internally (both with user typing or
      * by using arrowUp/arrowDown keyboard keys)

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

@@ -16,8 +16,14 @@ export type PageSelectorProps = {
     /**
      * The text to display next to the page selector.
      * It will be rendered as HTML, so make sure to sanitize it.
+     * When omitted or empty, a default internationalized text is shown.
      */
     text?: string;
+    /**
+     * When true, hides the text next to the page selector.
+     * @default false
+     */
+    hideText?: boolean;
     /**
      * The function to call when the page is changed by the user.
      */

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

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { RadioProps as MuiRadioProps } from '@mui/material/Radio';
 import { SxProps } from '@mui/material';
+export declare const radioLabelPlacements: readonly ["start", "end"];
+type RadioLabelPlacement = (typeof radioLabelPlacements)[number];
+export declare const radioSizes: readonly ["S", "M"];
+type RadioSize = (typeof radioSizes)[number];
 export type RadioProps<T extends string = string> = {
     /**
      * Wheather the radio is checked or not.
@@ -21,7 +25,7 @@ export type RadioProps<T extends string = string> = {
     /**
      * Where to put the `label` text, if any.
      */
-    labelPlacement?: 'start' | 'end';
+    labelPlacement?: RadioLabelPlacement;
     /**
      * Callback fired when the state is changed.
      */
@@ -33,7 +37,7 @@ export type RadioProps<T extends string = string> = {
     /**
      * The size of the radio
      */
-    size?: 'S' | 'M';
+    size?: RadioSize;
     /**
      * Settled directly in DOM element, for testing easy location purposes.
      */

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { SelectProps as MuiSelectProps } from '@mui/material/Select';
 import { ListItemButtonProps } from '../list/ListItemButton';
+export declare const selectVariants: readonly ["rounded", "circular", "transparent"];
+export declare const selectSizes: readonly ["S", "M"];
 type Colors = {
     backgroundColor?: string;
     color?: string;
@@ -18,7 +20,7 @@ type SelectValue<T extends string | number | undefined, Multiple extends boolean
  * https://github.com/Microsoft/TypeScript/issues/29340
  */
 export type SelectProps<T extends string | number | undefined, Multiple extends boolean | undefined, Value = SelectValue<T, Multiple>> = Pick<MuiSelectProps<T>, 'id' | 'children' | 'sx' | 'disabled' | 'onClose'> & {
-    variant?: 'rounded' | 'circular' | 'transparent';
+    variant?: (typeof selectVariants)[number];
     /**
      * The placeholder to put in this Select when no value is selected.
      */
@@ -77,7 +79,7 @@ export type SelectProps<T extends string | number | undefined, Multiple extends
      * Ref to inner HTMLSelectElement
      */
     ref?: React.Ref<HTMLSelectElement>;
-    size?: 'S' | 'M';
+    size?: (typeof selectSizes)[number];
     className?: string;
     paperClassName?: string;
     'data-testid'?: string;

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

@@ -26,6 +26,8 @@ type CustomToolbarGroup = {
 type CustomToolbarGroups = {
     [key: string]: CustomToolbarGroup;
 };
+export declare const textEditorVariants: readonly ["normal", "simple", "reduced"];
+type TextEditorVariant = (typeof textEditorVariants)[number];
 export type TextEditorProps = Omit<IAllProps, 'value' | 'onEditorChange' | 'onChange' | 'onDirty'> & Pick<CodeEditorPopupProps, 'linterFunction'> & {
     /**
      * This bool turn on/off the top menuBar on the textEditor
@@ -42,7 +44,7 @@ export type TextEditorProps = Omit<IAllProps, 'value' | 'onEditorChange' | 'onCh
      * options from more complete to less complete.
      * @default 'normal'
      */
-    variant?: 'normal' | 'simple' | 'reduced';
+    variant?: TextEditorVariant;
     /**
      *  Custom component's height
      * @default undefined

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

@@ -3,11 +3,17 @@ import { SxProps } from '@mui/material';
 import { TypographyVariant } from '../../theme/Typography';
 import { InputLabelProps } from './InputLabel';
 import { IconId } from '../icon';
+export declare const textFieldTypes: readonly ["text", "password"];
+type TextFieldType = (typeof textFieldTypes)[number];
+export declare const textFieldAutoCompletes: readonly ["off", "new-password"];
+type TextFieldAutoComplete = (typeof textFieldAutoCompletes)[number];
+export declare const textFieldVariants: readonly ["default", "transparent"];
+type TextFieldVariant = (typeof textFieldVariants)[number];
 export type TextFieldProps = {
     /**
      * Type of inner input. Only apply if this field is single line.
      */
-    type?: 'text' | 'password';
+    type?: TextFieldType;
     /**
      * The native `id` of input or textarea. If not supplied, a random id
      * will be established.
@@ -18,7 +24,7 @@ export type TextFieldProps = {
      * you probably want to use `transparent` variant. Also you have `sx` and `inputSx` props for any
      * customization.
      */
-    variant?: 'default' | 'transparent';
+    variant?: TextFieldVariant;
     /**
      * Whether the input is disabled or not.
      */
@@ -101,7 +107,7 @@ export type TextFieldProps = {
      * Settled directly in DOM element, for testing easy location purposes.
      */
     'data-testid'?: string;
-    autoComplete?: 'off' | 'new-password';
+    autoComplete?: TextFieldAutoComplete;
     containerRef?: React.Ref<HTMLDivElement>;
     /**
      * Adornment components to be placed at the start of the input

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

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { BoxProps, SxProps } from '@mui/material';
+export declare const textFieldContainerVariants: readonly ["default", "transparent"];
+type TextFieldContainerVariant = (typeof textFieldContainerVariants)[number];
 export type TextFieldContainerProps = React.PropsWithChildren<{
     /**
      * The variant of this component.
      */
-    variant?: 'default' | 'transparent';
+    variant?: TextFieldContainerVariant;
     /**
      * Custom styles to override.
      */
@@ -59,7 +61,7 @@ declare const TextFieldContainer: React.ForwardRefExoticComponent<{
     /**
      * The variant of this component.
      */
-    variant?: "default" | "transparent";
+    variant?: TextFieldContainerVariant;
     /**
      * Custom styles to override.
      */

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

@@ -1,11 +1,17 @@
 import * as React from 'react';
 import { AutocompleteOption, AutocompleteValue, TextFieldFilteredProps } from '../../../models/Autocomplete';
 import { IconId } from '../../icon';
+export declare const autocompleteVariants: readonly ["default", "text"];
+type AutocompleteVariant = (typeof autocompleteVariants)[number];
+export declare const autocompleteModes: readonly ["startsWith", "contains", "endsWith"];
+type AutocompleteMode = (typeof autocompleteModes)[number];
+export declare const autocompleteSizes: readonly ["S", "XS"];
+type AutocompleteSize = (typeof autocompleteSizes)[number];
 export type AutocompleteProps<T extends string, Multiple extends boolean | undefined, Value = AutocompleteValue<T, Multiple>, Option = AutocompleteOption<T>> = {
     /**
      * The variant of the Autocomplete
      */
-    variant?: 'default' | 'text';
+    variant?: AutocompleteVariant;
     /**
      * 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.
@@ -43,7 +49,7 @@ export type AutocompleteProps<T extends string, Multiple extends boolean | undef
     /**
      * The mode to search within the options.
      */
-    mode?: 'startsWith' | 'contains' | 'endsWith';
+    mode?: AutocompleteMode;
     /**
      * Use this function to render the desired text for each id. Leave it empty if the id is also the label.
      */
@@ -113,7 +119,7 @@ export type AutocompleteProps<T extends string, Multiple extends boolean | undef
     /**
      * Define min with that autocomplete can have. S => 328px. XS => 248px. @default 'S'
      */
-    size?: 'S' | 'XS';
+    size?: AutocompleteSize;
     /**
      * Ref to the inner HTMLInputElement
      */

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

@@ -1,5 +1,6 @@
 import { DateInterval } from '../../../models/DateInterval';
 import { ComparisonInterval } from '../../../models/ComparisonInterval';
+export declare const dateIntervalPickerVariants: readonly ["default", "input"];
 export type DateIntervalValues = {
     interval: DateInterval;
     startDate: Date;

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

@@ -22,10 +22,9 @@ export type DateIntervalPickerState = {
     isComparing: boolean | undefined;
 };
 export type DateIntervalPickerPopoverProps = {
-    variant?: 'default' | 'input';
     interval: DateInterval;
-    startDate?: Date;
-    endDate?: Date;
+    startDate: Date;
+    endDate: Date;
     color: string;
     maxSelectableDays: number;
     disabled?: boolean;
@@ -50,5 +49,5 @@ export type DateIntervalPickerPopoverProps = {
     }) => 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;
+declare const DateIntervalPickerPopover: ({ 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-range-picker/DateRangePicker.d.ts

@@ -0,0 +1,40 @@
+import { DateIntervalValues } from '../date-interval-picker/DateIntervalPicker';
+export type DateRangePickerProps = {
+    /**
+     * 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;
+    /**
+     * 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 range picker is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The minimum date allowed to be selected. Defaults to 1900-01-01.
+     */
+    minDate?: Date;
+    /**
+     * The maximum date allowed to be selected. Defaults to 2100-12-31.
+     */
+    maxDate?: Date;
+};
+/**
+ * Date range picker component, which allows to select a date range via a text input trigger.
+ */
+declare const DateRangePicker: ({ startDate, endDate, onChange, color, maxSelectableDays, disabled, minDate, maxDate }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+export default DateRangePicker;

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

@@ -0,0 +1,16 @@
+export type DateRangePickerPopoverProps = {
+    startDate?: Date;
+    endDate?: Date;
+    color: string;
+    maxSelectableDays: number;
+    minDate: Date;
+    maxDate: Date;
+    anchorEl?: HTMLElement | null;
+    onApply: (values: {
+        startDate: Date;
+        endDate: Date;
+    }) => void;
+    onCancel: () => void;
+};
+declare const DateRangePickerPopover: ({ startDate, endDate, color, maxSelectableDays, minDate, maxDate, anchorEl, onApply, onCancel }: DateRangePickerPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export default DateRangePickerPopover;

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

@@ -6,6 +6,8 @@ export { default as InputHelperText } from './InputHelperText';
 export type { InputHelperTextProps } from './InputHelperText';
 export { default as DateIntervalPicker } from './date-interval-picker/DateIntervalPicker';
 export type { DateIntervalPickerProps, DateIntervalValues } from './date-interval-picker/DateIntervalPicker';
+export { default as DateRangePicker } from './date-range-picker/DateRangePicker';
+export type { DateRangePickerProps } from './date-range-picker/DateRangePicker';
 export { default as SelectPopoverItem } from './SelectPopoverItem';
 export type { SelectPopoverItemProps } from './SelectPopoverItem';
 export { default as TimezoneSelector } from './TimezoneSelector';

package/dist/components/layout/CollapsiblePanel.d.ts

@@ -2,6 +2,8 @@ import { SxProps } from '@mui/material';
 import * as React from 'react';
 import { ListItemButtonProps } from '../list/ListItemButton';
 import { DividerProps } from '../divider';
+export declare const collapsiblePanelCollapseDirections: readonly ["down", "up"];
+type CollapsiblePanelCollapseDirection = (typeof collapsiblePanelCollapseDirections)[number];
 export type CollapsiblePanelProps = React.PropsWithChildren<{
     sx?: SxProps;
     /**
@@ -34,7 +36,7 @@ export type CollapsiblePanelProps = React.PropsWithChildren<{
     /**
      * Whether the collapse will be placed down or up from the header.
      */
-    collapseDirection?: 'down' | 'up';
+    collapseDirection?: CollapsiblePanelCollapseDirection;
     /**
      * Whether to add a Divider between header and panel or not. Default is false.
      */