@connectif/ui-components 7.0.1 → 8.1.0

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

@@ -1,12 +1,16 @@
 import { SxProps } from '@mui/material';
 import * as React from 'react';
 import { ListItemButtonProps } from '../list/ListItemButton';
+export declare const collapsiblePanelSwitcherVariants: readonly ["sortable-move", "sortable-arrow"];
+type CollapsiblePanelSwitcherVariant = (typeof collapsiblePanelSwitcherVariants)[number];
+export declare const collapsiblePanelSwitcherDirections: readonly ["down", "up"];
+type CollapsiblePanelSwitcherDirection = (typeof collapsiblePanelSwitcherDirections)[number];
 export type CollapsiblePanelSwitcherProps = React.PropsWithChildren<{
     sx?: SxProps;
     /**
      * The variant of the CollapsiblePanel. Default 'sortable-move'
      */
-    variant?: 'sortable-move' | 'sortable-arrow';
+    variant?: CollapsiblePanelSwitcherVariant;
     /**
      * Whether the panel is collapsed or not. If not supplied, the panel is not collapsed by default.
      */
@@ -49,7 +53,7 @@ export type CollapsiblePanelSwitcherProps = React.PropsWithChildren<{
     /**
      * Whether the collapse will be placed down or up from the header.
      */
-    collapseDirection?: 'down' | 'up';
+    collapseDirection?: CollapsiblePanelSwitcherDirection;
     /**
      * Set border separator dashed between. Default false
      */

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

@@ -1,4 +1,5 @@
 import { ContainerProps as MuiContainerProps } from '@mui/material/Container';
+export declare const containerMaxWidths: readonly ["xs", "sm", "md", "lg", "xl", false];
 export type ContainerProps = Pick<MuiContainerProps, 'sx' | 'children' | 'maxWidth'>;
 declare const Container: ({ maxWidth, ...rest }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
 export default Container;

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { StepperProps as MuiStepperProps } from '@mui/material';
+export declare const stepperOrientations: readonly ["horizontal", "vertical"];
+type StepperOrientation = (typeof stepperOrientations)[number];
 export type StepperProps = {
     /**
      * Select active step
@@ -8,7 +9,7 @@ export type StepperProps = {
     /**
      * Select stepper orientation
      */
-    orientation?: MuiStepperProps['orientation'];
+    orientation?: StepperOrientation;
     /**
      * Steps info
      */

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { BoxProps } from '@mui/material';
-type ToolBoxSize = 'L' | 'M';
+export declare const toolBoxSizes: readonly ["L", "M"];
+type ToolBoxSize = (typeof toolBoxSizes)[number];
 export type ToolBoxProps = React.PropsWithChildren<{
     className?: BoxProps['className'];
     header?: React.ReactNode;

package/dist/components/list/BaseListItem.d.ts

@@ -1,13 +1,18 @@
 import { SxProps } from '@mui/material';
 import * as React from 'react';
-import { TypographyVariant } from '../../theme/Typography';
 import { IconId } from '../icon/Icon';
 import { TypographyProps } from '../typography/Typography';
+export declare const baseListItemColors: readonly ["default", "primary"];
+type BaseListItemColor = (typeof baseListItemColors)[number];
+export declare const baseListItemVariants: readonly ["default", "circular"];
+type BaseListItemVariant = (typeof baseListItemVariants)[number];
+export declare const baseListItemTypographyVariants: readonly ["body1", "body2", "body1-semibold"];
+type BaseListItemTypographyVariant = (typeof baseListItemTypographyVariants)[number];
 export type BaseListItemProps = {
     /**
      * The color variant of the list item.
      */
-    color?: 'default' | 'primary';
+    color?: BaseListItemColor;
     /**
      * Adornment components to be placed at the start of the input.
      */
@@ -30,7 +35,7 @@ export type BaseListItemProps = {
      * The variant to be used for main `text` prop. If supplied prop `children`
      * this text will be ignored.
      */
-    typographyVariant?: Extract<TypographyVariant, 'body1' | 'body2' | 'body1-semibold'>;
+    typographyVariant?: BaseListItemTypographyVariant;
     /**
      * The text to be placed in main ListItem area. If supplied prop `children`
      * this text will be ignored.
@@ -57,7 +62,7 @@ export type BaseListItemProps = {
     /**
      * The variant of the list item.
      */
-    variant?: 'default' | 'circular';
+    variant?: BaseListItemVariant;
     /**
      * Class to override .MuiTooltip-popper styles
      */

package/dist/components/list/ListItemButton.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ListItemButtonProps as MuiListItemButtonProps, SxProps } from '@mui/material';
 import { BaseListItemProps } from './BaseListItem';
 import { TypographyProps } from '../typography/Typography';
-export type ListItemButtonProps = Pick<MuiListItemButtonProps, 'onClick' | 'tabIndex' | 'role' | 'onMouseDown' | 'onMouseUp' | 'onMouseEnter' | 'onMouseLeave' | 'className'> & {
+export type ListItemButtonProps = Pick<MuiListItemButtonProps, 'onClick' | 'tabIndex' | 'role' | 'onMouseDown' | 'onMouseUp' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseMove' | 'className'> & {
     /**
      * If `true`, the onClick callback will also be triggered on aux click. Default is `false`.
      */
@@ -27,7 +27,7 @@ export type ListItemButtonProps = Pick<MuiListItemButtonProps, 'onClick' | 'tabI
     'data-testid'?: string;
     buttonDataTestId?: string;
 } & BaseListItemProps;
-declare const ListItemButton: React.ForwardRefExoticComponent<Pick<MuiListItemButtonProps, "className" | "role" | "tabIndex" | "onClick" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseUp"> & {
+declare const ListItemButton: React.ForwardRefExoticComponent<Pick<MuiListItemButtonProps, "className" | "role" | "tabIndex" | "onClick" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseUp"> & {
     /**
      * If `true`, the onClick callback will also be triggered on aux click. Default is `false`.
      */

package/dist/components/loader/Loader.d.ts

@@ -1,5 +1,5 @@
-import { CircularProgressProps } from '../progress';
 import { BoxProps } from '@mui/material/Box';
+import { CircularProgressSize } from '../progress/CircularProgress';
 export type LoaderProps = {
     /**
      * Wheather the loader is visible or not
@@ -12,7 +12,7 @@ export type LoaderProps = {
     /**
      * The size of the circular progress.
      */
-    size?: CircularProgressProps['size'];
+    size?: CircularProgressSize;
     /**
      * Whether to hide the progress circle or not
      * @default false

package/dist/components/overlay/DonutFocusOverlay.d.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
+export declare const donutFocusOverlayChipPositions: readonly ["left", "right"];
+type DonutFocusOverlayChipPosition = (typeof donutFocusOverlayChipPositions)[number];
 export type DonutFocusOverlayProps = {
     isVisible: boolean;
     elementRef?: React.RefObject<HTMLElement | null>;
     padding?: number;
     donutWidth?: number;
     chipLabel?: string;
-    chipPosition?: 'left' | 'right';
+    chipPosition?: DonutFocusOverlayChipPosition;
 };
 declare const DonutFocusOverlay: ({ isVisible, elementRef, padding, donutWidth, chipLabel, chipPosition }: DonutFocusOverlayProps) => import("react/jsx-runtime").JSX.Element | null;
 export default DonutFocusOverlay;

package/dist/components/popover/Popover.d.ts

@@ -1,4 +1,8 @@
 import { PopoverProps as MuiPopoverProps } from '@mui/material/Popover';
+export declare const popoverHorizontalPositions: readonly ["left", "center", "right"];
+type PopoverAnchorHorizontalPosition = (typeof popoverHorizontalPositions)[number];
+export declare const popoverVerticalPositions: readonly ["top", "center", "bottom"];
+type PopoverAnchorVerticalPosition = (typeof popoverVerticalPositions)[number];
 export type PopoverProps = Pick<MuiPopoverProps, 'children' | 'anchorEl' | 'sx' | 'disableEscapeKeyDown' | 'onTransitionEnd' | 'onMouseUp'> & {
     /**
      * The event triggered when clicking on the backdrop or Escape key is pushed.
@@ -6,13 +10,13 @@ export type PopoverProps = Pick<MuiPopoverProps, 'children' | 'anchorEl' | 'sx'
      */
     onClose: (event: object, reason: 'backdropClick' | 'escapeKeyDown') => void;
     /** This prop is used to indicate the horizontal direction in which you want the popover to open having as reference point the origin of the popover. */
-    horizontalAlign?: 'left' | 'center' | 'right';
+    horizontalAlign?: PopoverAnchorHorizontalPosition;
     /** This prop is used to indicate the horizontal origin position as reference point the origin of the popover. */
-    anchorHorizontalOrigin?: 'left' | 'center' | 'right';
+    anchorHorizontalOrigin?: PopoverAnchorHorizontalPosition;
     /** This prop is used to indicate the vertical direction in which you want the popover to open having as reference point the origin of the popover. */
-    verticalAlign?: 'bottom' | 'center' | 'top';
+    verticalAlign?: PopoverAnchorVerticalPosition;
     /** This prop is used to indicate the vertical origin position as reference point the origin of the popover. */
-    anchorVerticalAlign?: 'bottom' | 'center' | 'top';
+    anchorVerticalAlign?: PopoverAnchorVerticalPosition;
     /** If `true`, the modal will not restore focus to previously focused element once modal is hidden or unmounted.*/
     disableRestoreFocus?: boolean;
     /** Popover will be centered in screen */

package/dist/components/progress/CircularProgress.d.ts

@@ -1,13 +1,10 @@
 import * as React from 'react';
 import { CircularProgressProps as MuiCircularProgressProps } from '@mui/material/CircularProgress';
 import { TypographyVariant } from '../../theme/Typography';
-declare const circularSizes: {
-    readonly XS: "20px";
-    readonly SM: "24px";
-    readonly MD: "40px";
-    readonly LG: "48px";
-    readonly XL: "64px";
-};
+export declare const circularProgressSizes: readonly ["XS", "SM", "MD", "LG", "XL"];
+export type CircularProgressSize = (typeof circularProgressSizes)[number];
+export declare const circularProgressVariants: readonly ["determinate", "indeterminate"];
+type CircularProgressVariant = (typeof circularProgressVariants)[number];
 export type CircularProgressProps = Pick<MuiCircularProgressProps, 'thickness'> & {
     /**
      * The value to fill the circular progress bar. Only applied with determinate variant
@@ -20,12 +17,12 @@ export type CircularProgressProps = Pick<MuiCircularProgressProps, 'thickness'>
     /**
      * The size of the circle.
      */
-    size?: keyof typeof circularSizes;
+    size?: CircularProgressSize;
     /**
      * Whether the progress is indeterminate or not.
      * If indeterminate, the value prop is ignored.
      */
-    variant?: 'determinate' | 'indeterminate';
+    variant?: CircularProgressVariant;
     /**
      * The color of the circular progress.
      */

package/dist/components/progress/DonutProgress.d.ts

@@ -25,6 +25,8 @@ declare const variants: {
         readonly labelChipColor: "#B71C1C";
     };
 };
+export declare const donutProgressVariants: (keyof typeof variants)[];
+type DonutProgressVariant = (typeof donutProgressVariants)[number];
 export type DonutProgressProps = Pick<CircularProgressProps, 'size'> & {
     /**
      * The percentage to fill the donut progress bar. Value is from 0 to 100.
@@ -33,7 +35,7 @@ export type DonutProgressProps = Pick<CircularProgressProps, 'size'> & {
     /**
      *  The variant of the donut progress.
      */
-    variant: keyof typeof variants;
+    variant: DonutProgressVariant;
     /**
      * The label to set on the donut progress.
      */

package/dist/components/progress/LinearProgress.d.ts

@@ -1,10 +1,12 @@
 import { LinearProgressProps as MuiLinearProgressProps } from '@mui/material/LinearProgress';
+export declare const linearProgressVariants: readonly ["determinate", "indeterminate"];
+type LinearProgressVariant = (typeof linearProgressVariants)[number];
 export type LinearProgressProps = Pick<MuiLinearProgressProps, 'value'> & {
     /**
      * Whether the progress is indeterminate or not.
      * If indeterminate, the value prop is ignored.
      */
-    variant?: 'determinate' | 'indeterminate';
+    variant?: LinearProgressVariant;
     /**
      * The color of the progress bar.
      */

package/dist/components/scrollable/Carousel.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
+export declare const carouselAlignments: readonly ["left", "center"];
+type CarouselAlignment = (typeof carouselAlignments)[number];
 export type CarouselProps<T> = {
     items: T[];
     renderItem: (item: T, index: number) => React.ReactNode;
     gap?: number;
     padding?: number;
-    alignment?: 'left' | 'center';
+    alignment?: CarouselAlignment;
 };
 declare function Carousel<T>({ items, renderItem, gap, padding, alignment }: CarouselProps<T>): import("react/jsx-runtime").JSX.Element;
 export default Carousel;

package/dist/components/skeleton/Skeleton.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { SkeletonProps as MuiSkeletonProps } from '@mui/material/Skeleton';
-type SkeletonColorVariantId = 'default' | 'primary';
+export declare const skeletonColorVariants: readonly ["default", "primary"];
+type SkeletonColorVariantId = (typeof skeletonColorVariants)[number];
+export declare const skeletonVariants: readonly ["text", "rectangular", "circular", "rounded"];
+export declare const skeletonAnimations: readonly ["pulse", "wave", false];
 export type SkeletonProps = Pick<MuiSkeletonProps, 'variant' | 'width' | 'height' | 'sx' | 'animation'> & {
     colorVariant?: SkeletonColorVariantId;
 };

package/dist/components/snackbar/Snackbar.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { SnackbarKey, SnackbarMessage } from 'notistack';
-type SnackbarSize = 'M' | 'L';
-type SnackbarSeverity = 'success' | 'info' | 'error' | 'warning';
+export declare const snackbarSizes: readonly ["M", "L"];
+type SnackbarSize = (typeof snackbarSizes)[number];
+export declare const snackbarSeverities: readonly ["success", "info", "error", "warning"];
+type SnackbarSeverity = (typeof snackbarSeverities)[number];
 export type SnackbarProps = {
     /**
      * Unique key associated to this snackbar. It will be used to close this

package/dist/components/tab/TabButton.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+export declare const tabButtonTextAligns: readonly ["left", "center"];
+type TabButtonTextAlign = (typeof tabButtonTextAligns)[number];
 export type TabButtonProps = React.PropsWithChildren<{
     /**
      * Whether the tab button is disabled.
@@ -9,7 +11,7 @@ export type TabButtonProps = React.PropsWithChildren<{
      * @default left
      *
      */
-    textAlign?: 'left' | 'center';
+    textAlign?: TabButtonTextAlign;
     /**
      * Right margin of the tab
      */

package/dist/components/tab/Tabs.d.ts

@@ -1,4 +1,8 @@
 import * as React from 'react';
+export declare const tabsVariants: readonly ["scrollable", "fullWidth"];
+type TabsVariant = (typeof tabsVariants)[number];
+export declare const tabsScrollbarGutters: readonly ["stable", "auto"];
+type TabsScrollbarGutter = (typeof tabsScrollbarGutters)[number];
 export type TabsProps = {
     /**
      * An array with the tab buttons. Make sure it is the correlative order
@@ -23,7 +27,7 @@ export type TabsProps = {
      * 'scrollable' is the default value, and it stacks the tabs horizontally to left.
      * 'fullWith' distributes the tabs horizontally to fit the full width.
      */
-    variant?: 'scrollable' | 'fullWidth';
+    variant?: TabsVariant;
     /**
      * If true, it sets the main tabs container style to have height=100%, which will be adapted to the parent height
      * according to general css rules (i.e. the parent height should be extablished to a fixed or relative value)
@@ -37,7 +41,7 @@ export type TabsProps = {
     /**
      * Set the scrollbarGutter property for each slide of the SwipeableViews component.
      */
-    scrollbarGutter?: 'stable' | 'auto';
+    scrollbarGutter?: TabsScrollbarGutter;
     /**
      * Hide scroll in tab content
      */

package/dist/components/toolbar/ToolbarTitle.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
+export declare const toolbarTitleAligns: readonly ["left", "right"];
+type ToolbarTitleAlign = (typeof toolbarTitleAligns)[number];
 export type ToolbarTitleProps = {
     /**
      * The title to display.
@@ -8,7 +10,7 @@ export type ToolbarTitleProps = {
     /**
      * Title text alignment.
      */
-    align?: 'left' | 'right';
+    align?: ToolbarTitleAlign;
     className?: string;
     /**
      * Actions to show on hover.

package/dist/components/tooltip/Tooltip.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { TooltipProps as MuiTooltipProps } from '@mui/material';
 import { TypographyProps } from '../typography/Typography';
-export type TooltipVariant = 'default' | 'white' | 'error' | 'blue';
+export declare const tooltipVariants: readonly ["default", "white", "error", "blue"];
+type TooltipVariant = (typeof tooltipVariants)[number];
+export declare const tooltipPlacements: readonly ["top", "bottom", "left", "right"];
+type TooltipPlacement = (typeof tooltipPlacements)[number];
 export type TooltipProps = Pick<MuiTooltipProps, 'children' | 'disableHoverListener' | 'open'> & {
     /**
      * The content to display in the tooltip.
@@ -10,7 +13,7 @@ export type TooltipProps = Pick<MuiTooltipProps, 'children' | 'disableHoverListe
     /**
      * The placement of the tooltip.
      */
-    placement?: 'top' | 'bottom' | 'left' | 'right';
+    placement?: TooltipPlacement;
     /**
      * If set, it won't close when the user hovers over the tooltip
      */
@@ -63,7 +66,7 @@ declare const Tooltip: React.ForwardRefExoticComponent<Pick<MuiTooltipProps, "op
     /**
      * The placement of the tooltip.
      */
-    placement?: "top" | "bottom" | "left" | "right";
+    placement?: TooltipPlacement;
     /**
      * If set, it won't close when the user hovers over the tooltip
      */

package/dist/components/typography/TextMarker.d.ts

@@ -1,3 +1,5 @@
+export declare const textMarkerModes: readonly ["startsWith", "contains", "endsWith"];
+type TextMarkerMode = (typeof textMarkerModes)[number];
 export type TextMarkerProps = {
     /**
      * The background color to be used as marker color
@@ -18,7 +20,7 @@ export type TextMarkerProps = {
     /**
      * The mode to search within the children.
      */
-    mode?: 'startsWith' | 'contains' | 'endsWith';
+    mode?: TextMarkerMode;
     /**
      * The separator to split the searchText in multiple tokens.
      */

package/dist/components/widget/WidgetLegendItem.d.ts

@@ -1,6 +1,10 @@
 import { SxProps } from '@mui/material';
 import { IconId } from '../icon/Icon';
 import { IncrementLabelType } from '../../propTypes/IncrementLabel';
+export declare const legendDirections: readonly ["column", "row"];
+type LegendDirection = (typeof legendDirections)[number];
+export declare const widgetLegendIconSizes: readonly ["XS", "S", "M", "L", "XL"];
+type WidgetLegendIconSize = (typeof widgetLegendIconSizes)[number];
 export type WidgetLegendItemProps = {
     /**
      * The label to display at the top of the group of items
@@ -9,7 +13,7 @@ export type WidgetLegendItemProps = {
     /**
      * The direction to display the group of items
      */
-    legendDirection?: 'column' | 'row';
+    legendDirection?: LegendDirection;
     /**
      * The items to display in this WidgetLegendItem. It could be more than one.
      */
@@ -34,7 +38,7 @@ export type WidgetLegendItemProps = {
         /**
          * The icon size
          */
-        iconSize?: 'XS' | 'S' | 'M' | 'L' | 'XL';
+        iconSize?: WidgetLegendIconSize;
         /**
          * The primary value as text for this item
          */

package/dist/components/window/MinimizableWindow.d.ts

@@ -6,12 +6,14 @@ declare const sizes: {
     L: number;
     XL: number;
 };
+export declare const minimizableWindowSizes: (keyof typeof sizes)[];
+type MinimizableWindowSize = (typeof minimizableWindowSizes)[number];
 export type MinimizableWindowProps = React.PropsWithChildren<{
     /**
      * The title of the MinimizableWindow
      */
     title: string | React.ReactNode;
-    size?: keyof typeof sizes;
+    size?: MinimizableWindowSize;
     /**
      * If true, the MinimizableWindow is open.
      */
@@ -73,7 +75,7 @@ declare const MinimizableWindow: React.ForwardRefExoticComponent<{
      * The title of the MinimizableWindow
      */
     title: string | React.ReactNode;
-    size?: keyof typeof sizes;
+    size?: MinimizableWindowSize;
     /**
      * If true, the MinimizableWindow is open.
      */

package/dist/i18n/en.d.ts

@@ -182,6 +182,9 @@ export declare const en: {
         START_DATE: string;
         START_HOUR: string;
     };
+    PAGE_SELECTOR: {
+        SHOWING_ITEMS: string;
+    };
     SELECT_POPOVER: {
         APPLY: string;
         CANCEL: string;

package/dist/i18n/es.d.ts

@@ -182,6 +182,9 @@ export declare const es: {
         START_DATE: string;
         START_HOUR: string;
     };
+    PAGE_SELECTOR: {
+        SHOWING_ITEMS: string;
+    };
     SELECT_POPOVER: {
         APPLY: string;
         CANCEL: string;

package/dist/i18n/fr.d.ts

@@ -182,6 +182,9 @@ export declare const fr: {
         START_DATE: string;
         START_HOUR: string;
     };
+    PAGE_SELECTOR: {
+        SHOWING_ITEMS: string;
+    };
     SELECT_POPOVER: {
         APPLY: string;
         CANCEL: string;

package/dist/i18n/it.d.ts

@@ -182,6 +182,9 @@ export declare const it: {
         START_DATE: string;
         START_HOUR: string;
     };
+    PAGE_SELECTOR: {
+        SHOWING_ITEMS: string;
+    };
     SELECT_POPOVER: {
         APPLY: string;
         CANCEL: string;

package/dist/i18n/pt.d.ts

@@ -182,6 +182,9 @@ export declare const pt: {
         START_DATE: string;
         START_HOUR: string;
     };
+    PAGE_SELECTOR: {
+        SHOWING_ITEMS: string;
+    };
     SELECT_POPOVER: {
         APPLY: string;
         CANCEL: string;