@cgi-learning-hub/ui/dist/index.d.ts

React component library for Hub's design system, built on Material UI with custom and extended components.

import { default as Accordion } from '@mui/material/Accordion';
import { default as AccordionActions } from '@mui/material/AccordionActions';
import { default as AccordionDetails } from '@mui/material/AccordionDetails';
import { default as AccordionSummary } from '@mui/material/AccordionSummary';
import { AlertProps as AlertProps_2 } from '@mui/material/Alert';
import { default as AlertTitle } from '@mui/material/AlertTitle';
import { default as AppBar } from '@mui/material/AppBar';
import { default as Autocomplete } from '@mui/material/Autocomplete';
import { default as Avatar } from '@mui/material/Avatar';
import { default as Backdrop } from '@mui/material/Backdrop';
import { BackdropProps } from '@mui/material/Backdrop';
import { default as Badge } from '@mui/material/Badge';
import { default as Box } from '@mui/material/Box';
import { BoxProps } from '@mui/material/Box';
import { default as Breadcrumbs } from '@mui/material/Breadcrumbs';
import { default as Button } from '@mui/material/Button';
import { default as ButtonGroup } from '@mui/material/ButtonGroup';
import { ButtonProps } from '@mui/material/Button';
import { default as Card } from '@mui/material/Card';
import { default as CardActionArea } from '@mui/material/CardActionArea';
import { default as CardActions } from '@mui/material/CardActions';
import { default as CardContent } from '@mui/material/CardContent';
import { default as CardHeader } from '@mui/material/CardHeader';
import { default as CardMedia } from '@mui/material/CardMedia';
import { default as Checkbox } from '@mui/material/Checkbox';
import { default as Chip } from '@mui/material/Chip';
import { CircleProps } from '@uiw/react-color-circle';
import { default as CircularProgress } from '@mui/material/CircularProgress';
import { default as ClickAwayListener } from '@mui/material/ClickAwayListener';
import { ClickAwayListenerProps } from '@mui/material/ClickAwayListener';
import { default as Collapse } from '@mui/material/Collapse';
import { Color } from '@mui/material/styles';
import { default as Container } from '@mui/material/Container';
import { DatePickerProps as DatePickerProps_2 } from '@mui/x-date-pickers/DatePicker';
import { default as DialogActions } from '@mui/material/DialogActions';
import { default as DialogContent } from '@mui/material/DialogContent';
import { default as DialogContentText } from '@mui/material/DialogContentText';
import { DialogProps as DialogProps_2 } from '@mui/material/Dialog';
import { default as DialogTitle } from '@mui/material/DialogTitle';
import { default as Divider } from '@mui/material/Divider';
import { default as Drawer } from '@mui/material/Drawer';
import { DropzoneProps as DropzoneProps_2 } from 'react-dropzone';
import { default as F } from '@mui/material/InputBase';
import { default as Fade } from '@mui/material/Fade';
import { FC } from 'react';
import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
import { default as FormControl } from '@mui/material/FormControl';
import { default as FormControlLabel } from '@mui/material/FormControlLabel';
import { default as FormGroup } from '@mui/material/FormGroup';
import { default as FormHelperText } from '@mui/material/FormHelperText';
import { default as FormLabel } from '@mui/material/FormLabel';
import { default as GlobalStyles } from '@mui/material/GlobalStyles';
import { default as Grid } from '@mui/material/Grid';
import { default as Grow } from '@mui/material/Grow';
import { default as IconButton } from '@mui/material/IconButton';
import { ImgHTMLAttributes } from 'react';
import { default as Input } from '@mui/material/Input';
import { InputBaseProps } from '@mui/material/InputBase';
import { InputHTMLAttributes } from 'react';
import { default as InputLabel } from '@mui/material/InputLabel';
import { JSX } from 'react';
import { default as LinearProgress } from '@mui/material/LinearProgress';
import { default as Link } from '@mui/material/Link';
import { default as List } from '@mui/material/List';
import { default as ListItem } from '@mui/material/ListItem';
import { default as ListItemButton } from '@mui/material/ListItemButton';
import { default as ListItemIcon } from '@mui/material/ListItemIcon';
import { default as ListItemText } from '@mui/material/ListItemText';
import { default as ListSubheader } from '@mui/material/ListSubheader';
import { default as Menu } from '@mui/material/Menu';
import { default as MenuItem } from '@mui/material/MenuItem';
import { default as MobileStepper } from '@mui/material/MobileStepper';
import { default as Modal } from '@mui/material/Modal';
import { default as Pagination } from '@mui/material/Pagination';
import { default as Paper } from '@mui/material/Paper';
import { default as Popover } from '@mui/material/Popover';
import { default as Radio } from '@mui/material/Radio';
import { default as RadioGroup } from '@mui/material/RadioGroup';
import { ReactNode } from 'react';
import { default as Select } from '@mui/material/Select';
import { SerializedError } from '@reduxjs/toolkit';
import { default as Skeleton } from '@mui/material/Skeleton';
import { default as Slide } from '@mui/material/Slide';
import { default as Slider } from '@mui/material/Slider';
import { default as Snackbar } from '@mui/material/Snackbar';
import { default as Stack } from '@mui/material/Stack';
import { StackProps } from '@mui/material/Stack';
import { default as Step } from '@mui/material/Step';
import { default as StepButton } from '@mui/material/StepButton';
import { default as StepLabel } from '@mui/material/StepLabel';
import { default as Stepper } from '@mui/material/Stepper';
import { SVGAttributes } from 'react';
import { default as SvgIcon } from '@mui/material/SvgIcon';
import { SvgIconComponent } from '@mui/icons-material';
import { SvgIconProps } from '@mui/material/SvgIcon';
import { default as Switch } from '@mui/material/Switch';
import { SyntheticEvent } from 'react';
import { default as Tab } from '@mui/material/Tab';
import { default as TabContext } from '@mui/lab/TabContext';
import { default as Table } from '@mui/material/Table';
import { default as TableBody } from '@mui/material/TableBody';
import { default as TableCell } from '@mui/material/TableCell';
import { default as TableContainer } from '@mui/material/TableContainer';
import { default as TableFooter } from '@mui/material/TableFooter';
import { default as TableHead } from '@mui/material/TableHead';
import { default as TablePagination } from '@mui/material/TablePagination';
import { default as TableRow } from '@mui/material/TableRow';
import { default as TableSortLabel } from '@mui/material/TableSortLabel';
import { default as TabList } from '@mui/lab/TabList';
import { default as TabPanel } from '@mui/lab/TabPanel';
import { default as Tabs } from '@mui/material/Tabs';
import { default as TextField } from '@mui/material/TextField';
import { TextFieldProps } from '@mui/material/TextField';
import { TimePickerProps as TimePickerProps_2 } from '@mui/x-date-pickers/TimePicker';
import { default as ToggleButton } from '@mui/material/ToggleButton';
import { default as ToggleButtonGroup } from '@mui/material/ToggleButtonGroup';
import { default as Toolbar } from '@mui/material/Toolbar';
import { default as Tooltip } from '@mui/material/Tooltip';
import { TooltipProps } from '@mui/material/Tooltip';
import { TreeItemProps } from '@mui/x-tree-view/TreeItem';
import { default as Typography } from '@mui/material/Typography';
import { TypographyProps } from '@mui/material/Typography';
import { default as useMediaQuery } from '@mui/material/useMediaQuery';
import { default as Zoom } from '@mui/material/Zoom';

export { Accordion }

export { AccordionActions }

export { AccordionDetails }

export { AccordionSummary }

export declare const ActionBar: FC<ActionBarProps>;

declare type ActionBarButton = {
    label: string;
    action: () => void;
};

declare type ActionBarProps = {
    leftActions: ActionBarButton[];
    rightActions: ActionBarButton[];
    slotProps?: {
        leftActions?: ButtonProps;
        leftActionsContainer?: StackProps;
        rightActions?: ButtonProps;
        rightActionsContainer?: StackProps;
        root?: StackProps;
    };
};

export declare const Alert: FC<AlertProps>;

export declare type AlertProps = {
    title?: string;
} & Omit<AlertProps_2, "color">;

export { AlertTitle }

export { AppBar }

export { Autocomplete }

export { Avatar }

export { Backdrop }

export { Badge }

export { Box }

export { Breadcrumbs }

export { Button }

export { ButtonGroup }

export { Card }

export { CardActionArea }

export { CardActions }

export { CardContent }

export { CardHeader }

export { CardMedia }

export { Checkbox }

export { Chip }

export { CircularProgress }

export { ClickAwayListener }

export { Collapse }

export declare type ColorOption = {
    color: string;
    showBorder?: boolean;
};

export declare const ColorPicker: FC<ColorPickerProps>;

export declare type ColorPickerProps = {
    value: HexaColor;
    disabled?: boolean;
    options?: string[] | ColorOption[];
    slotProps?: ColorPickerSlotProps;
    onChange: (value: HexaColor) => void;
    useCheckmarkSwatch?: boolean;
};

export declare type ColorPickerSlotProps = {
    clickAwayListener?: Omit<ClickAwayListenerProps, "onClickAway" | "children">;
    circlePicker?: Omit<CircleProps, "colors" | "color" | "onChange">;
    circlePickerBox?: BoxProps;
};

export { Container }

export declare interface CustomFile {
    name: string;
    size: number;
    isLoading?: boolean;
    isDeletable?: boolean;
    isDownloadable?: boolean;
    ownerName?: string;
}

export declare type CustomSVGProps = SVGAttributes<SVGSVGElement>;

export declare type CustomTreeViewItem = {
    internalId: string;
    label: string;
    iconType?: IconType;
    customIcon?: SvgIconComponent;
    children?: CustomTreeViewItem[];
};

export declare const DatePicker: FC<DatePickerProps>;

export declare type DatePickerProps = {
    adapterLocale?: string;
} & DatePickerProps_2;

export declare const DEFAULT_COLOR_OPTIONS: ColorOption[];

export declare const Dialog: FC<DialogProps>;

export { DialogActions }

export { DialogContent }

export { DialogContentText }

export declare type DialogProps = {
    showCloseButton?: boolean;
} & DialogProps_2;

export { DialogTitle }

export { Divider }

export { Drawer }

export declare const Dropzone: FC<DropzoneProps>;

export declare type DropzoneProps = {
    defaultLabel?: string;
    dragLabel?: string;
    information?: string;
    width?: string;
    height?: string;
    slotProps?: DropZoneSlotProps;
} & DropzoneProps_2;

declare type DropZoneSlotProps = {
    root?: StackProps;
    input?: InputHTMLAttributes<HTMLInputElement>;
    icon?: SvgIconProps;
    label?: TypographyProps;
    information?: TypographyProps;
};

export declare const EllipsisWithTooltip: FC<EllipsisWithTooltipProps>;

export declare type EllipsisWithTooltipProps = {
    children: ReactNode;
    slotProps?: {
        text?: Omit<TypographyProps, "noWrap" | "overflow" | "textOverflow">;
        tooltip?: Omit<TooltipProps, "children" | "title">;
    };
};

export declare const EmptyState: FC<EmptyStateProps>;

export declare type EmptyStateProps = ({
    image: ReactNode;
    imageSrc?: never;
} | {
    image?: never;
    imageSrc: string;
}) & {
    imageHeight?: string | number;
    title: ReactNode;
    description?: ReactNode;
    footer?: ReactNode;
    slotProps?: {
        root?: StackProps;
        image?: ImgHTMLAttributes<HTMLImageElement>;
        title?: TypographyProps;
        description?: TypographyProps;
    };
} & StackProps;

export declare interface ExtendedTreeItemProps extends TreeItemProps {
    itemData?: CustomTreeViewItem;
    hasNoIcons: boolean;
    iconColor?: "disabled" | "primary" | "inherit" | "action" | "secondary" | "error" | "info" | "success" | "warning";
}

export { F }

export { Fade }

declare const FileList_2: <T extends CustomFile>({ files, onDelete, onClick, onDownload, }: FileListProps<T>) => JSX.Element;
export { FileList_2 as FileList }

export declare const FileListItem: <T extends CustomFile>({ file, onDelete, onClick, onDownload, }: FileListItemProps<T>) => JSX.Element | null;

export declare interface FileListItemProps<T extends CustomFile> {
    file: T;
    onDelete?: (file: T) => void;
    onClick?: (file: T) => void;
    onDownload?: (file: T) => void;
}

export declare interface FileListProps<T extends CustomFile> {
    files: T[];
    onDelete?: (file: T) => void;
    onClick?: (file: T) => void;
    onDownload?: (file: T) => void;
}

export declare const FolderCard: FC<FolderCardProps>;

export declare type FolderCardProps = {
    isSelected?: boolean;
    onSelect?: () => void;
    title: string;
    subtitle?: string;
    width?: string;
    onClick?: () => void;
    iconSize?: string;
    hasNoButtonOnFocus?: boolean;
};

export { FormControl }

export { FormControlLabel }

export { FormGroup }

export { FormHelperText }

export { FormLabel }

export { GlobalStyles }

export { Grid }

export { Grow }

export declare const Heading: FC<HeadingProps>;

export declare type HeadingProps = {
    title: string;
    IconComponent?: SvgIconComponent;
    iconColor?: Color;
    slotProps?: {
        root?: StackProps;
        icon?: SvgIconProps;
        text?: TypographyProps;
    };
    iconSize?: number;
} & StackProps;

export declare type HexaColor = `#${string}`;

export declare enum ICON_TYPE {
    FOLDER = "FOLDER",
    SHARE = "SHARE",
    TRASH = "TRASH",
    CUSTOM = "CUSTOM"
}

export { IconButton }

export declare type IconType = ICON_TYPE | SvgIconComponent;

export declare const ImagePicker: FC<ImagePickerProps>;

export declare type ImagePickerProps = {
    defaultLabel?: ReactNode;
    dragLabel?: ReactNode;
    information?: string;
    onFileChange?: (file: File | null) => void;
    width?: string;
    height?: string;
    initialFile?: string | File;
    disabled?: boolean;
} & DropzoneProps_2;

export declare type InfoItem = {
    text: string;
    icon: ReactNode;
};

export { Input }

export { InputLabel }

export declare interface ItemDataMap {
    [key: string]: CustomTreeViewItem;
}

export { LinearProgress }

export { Link }

export { List }

export { ListItem }

export { ListItemButton }

export { ListItemIcon }

export { ListItemText }

export { ListSubheader }

export declare const Loader: FC<LoaderProps>;

export declare const LoaderBackdrop: FC<LoaderBackdropProps>;

export declare type LoaderBackdropProps = {
    slotProps?: {
        backdrop?: Omit<BackdropProps, "open" | "children">;
        loader?: BoxProps;
    };
};

export declare type LoaderProps = BoxProps;

export { Menu }

export { MenuItem }

export { MobileStepper }

export { Modal }

export { Pagination }

export { Paper }

export declare const PasswordInput: FC<PasswordInputProps>;

export declare type PasswordInputProps = Omit<TextFieldProps, "type">;

export declare type PickerBackGroundBoxProps = {
    disabled?: boolean;
};

export { Popover }

export declare type PropertyItem = {
    text: ReactNode;
    icon?: ReactNode;
};

export declare const QueryError: FC<QueryErrorProps>;

export declare type QueryErrorProps = {
    error: FetchBaseQueryError | SerializedError | undefined;
    statusPrefix?: string;
};

export { Radio }

export { RadioGroup }

export declare const ResourceCard: FC<ResourceCardProps>;

export declare type ResourceCardProps = {
    isSelected?: boolean;
    onSelect?: () => void;
    image?: string;
    defaultImage: string;
    title: string;
    propertyItems?: PropertyItem[];
    infoIcons?: InfoItem[];
    size?: ResourceCardSize;
    width?: string;
    maxWidth?: string;
    onClick?: () => void;
    hasNoButtonOnFocus?: boolean;
};

export declare type ResourceCardSize = "md" | "sm";

export declare const SearchInput: FC<SearchInputProps>;

export declare type SearchInputProps = InputBaseProps & {
    loading?: boolean;
};

export { Select }

export { Skeleton }

export { Slide }

export { Slider }

export { Snackbar }

export { Stack }

export { Step }

export { StepButton }

export { StepLabel }

export { Stepper }

export declare interface StyledSwatchBoxProps {
    showBorder?: boolean;
    backgroundColor?: string;
}

export { SvgIcon }

export declare type SwatchProps = {
    color: string;
    onClick: () => void;
    active: boolean;
    showBorder?: boolean;
};

export { Switch }

export { Tab }

export { TabContext }

export { Table }

export { TableBody }

export { TableCell }

export { TableContainer }

export { TableFooter }

export { TableHead }

export { TablePagination }

export { TableRow }

export { TableSortLabel }

export { TabList }

export { TabPanel }

export { Tabs }

export { TextField }

export declare const TimePicker: FC<TimePickerProps>;

export declare type TimePickerProps = {
    adapterLocale?: string;
} & TimePickerProps_2;

export { ToggleButton }

export { ToggleButtonGroup }

export { Toolbar }

export { Tooltip }

export declare interface TreeContainerProps {
    maxHeight: number | string;
}

export declare const TreeView: FC<TreeViewProps>;

export declare type TreeViewItemId = string;

export declare type TreeViewItemsReorderingAction = "reorder-above" | "reorder-below" | "make-child" | "move-to-parent";

export declare interface TreeViewProps {
    items: CustomTreeViewItem[];
    selectedItemId: string;
    handleSelectedItemChange: (event: SyntheticEvent | null, itemIds: string | null) => void;
    iconColor?: string;
    maxHeight?: string | number;
    hasNoIcons?: boolean;
    defaultExpandedItems?: string[];
}

export { Typography }

export { useMediaQuery }

export { Zoom }

export declare const ZoomControl: FC<ZoomControlProps>;

declare interface ZoomControlProps {
    step?: number;
    value: number;
    onChange: (value: number) => void;
    max?: number;
    min?: number;
    label?: string;
    opacity?: number;
    slotProps?: {
        root?: BoxProps;
    };
}


export * from "@mui/lab/TabContext";
export * from "@mui/lab/TabList";
export * from "@mui/lab/TabPanel";
export * from "@mui/material/Accordion";
export * from "@mui/material/AccordionActions";
export * from "@mui/material/AccordionDetails";
export * from "@mui/material/AccordionSummary";
export * from "@mui/material/AlertTitle";
export * from "@mui/material/AppBar";
export * from "@mui/material/Autocomplete";
export * from "@mui/material/Avatar";
export * from "@mui/material/Backdrop";
export * from "@mui/material/Badge";
export * from "@mui/material/Box";
export * from "@mui/material/Breadcrumbs";
export * from "@mui/material/Button";
export * from "@mui/material/ButtonGroup";
export * from "@mui/material/Card";
export * from "@mui/material/CardActionArea";
export * from "@mui/material/CardActions";
export * from "@mui/material/CardContent";
export * from "@mui/material/CardHeader";
export * from "@mui/material/CardMedia";
export * from "@mui/material/Checkbox";
export * from "@mui/material/Chip";
export * from "@mui/material/CircularProgress";
export * from "@mui/material/ClickAwayListener";
export * from "@mui/material/Collapse";
export * from "@mui/material/Container";
export * from "@mui/material/DialogActions";
export * from "@mui/material/DialogContent";
export * from "@mui/material/DialogContentText";
export * from "@mui/material/DialogTitle";
export * from "@mui/material/Divider";
export * from "@mui/material/Drawer";
export * from "@mui/material/Fade";
export * from "@mui/material/FormControl";
export * from "@mui/material/FormControlLabel";
export * from "@mui/material/FormGroup";
export * from "@mui/material/FormHelperText";
export * from "@mui/material/FormLabel";
export * from "@mui/material/GlobalStyles";
export * from "@mui/material/Grid";
export * from "@mui/material/Grow";
export * from "@mui/material/IconButton";
export * from "@mui/material/Input";
export * from "@mui/material/InputBase";
export * from "@mui/material/InputLabel";
export * from "@mui/material/LinearProgress";
export * from "@mui/material/Link";
export * from "@mui/material/List";
export * from "@mui/material/ListItem";
export * from "@mui/material/ListItemButton";
export * from "@mui/material/ListItemIcon";
export * from "@mui/material/ListItemText";
export * from "@mui/material/ListSubheader";
export * from "@mui/material/Menu";
export * from "@mui/material/MenuItem";
export * from "@mui/material/MobileStepper";
export * from "@mui/material/Modal";
export * from "@mui/material/Pagination";
export * from "@mui/material/Paper";
export * from "@mui/material/Popover";
export * from "@mui/material/Radio";
export * from "@mui/material/RadioGroup";
export * from "@mui/material/Select";
export * from "@mui/material/Skeleton";
export * from "@mui/material/Slide";
export * from "@mui/material/Slider";
export * from "@mui/material/Snackbar";
export * from "@mui/material/Stack";
export * from "@mui/material/Step";
export * from "@mui/material/StepButton";
export * from "@mui/material/StepLabel";
export * from "@mui/material/Stepper";
export * from "@mui/material/SvgIcon";
export * from "@mui/material/Switch";
export * from "@mui/material/Tab";
export * from "@mui/material/Table";
export * from "@mui/material/TableBody";
export * from "@mui/material/TableCell";
export * from "@mui/material/TableContainer";
export * from "@mui/material/TableFooter";
export * from "@mui/material/TableHead";
export * from "@mui/material/TablePagination";
export * from "@mui/material/TableRow";
export * from "@mui/material/TableSortLabel";
export * from "@mui/material/Tabs";
export * from "@mui/material/TextField";
export * from "@mui/material/ToggleButton";
export * from "@mui/material/ToggleButtonGroup";
export * from "@mui/material/Toolbar";
export * from "@mui/material/Tooltip";
export * from "@mui/material/Typography";
export * from "@mui/material/Zoom";
export * from "@mui/material/colors";
export * from "@mui/material/styles";
export * from "@mui/material/useMediaQuery";

export { }


declare module "@mui/x-tree-view/TreeItem" {
    interface TreeItemProps {
        itemData?: CustomTreeViewItem;
    }
}