353 lines
11 KiB
TypeScript
353 lines
11 KiB
TypeScript
type Ref<T = HTMLElement> = React.RefCallback<T | null> | React.RefObject<T | null> | null;
|
|
type CommonProps<T = HTMLElement> = React.DOMAttributes<T> & {
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
[k: `aria-${string}`]: any;
|
|
[k: `data-${string}`]: any;
|
|
};
|
|
export interface AutocompleteFilterOptionsState<Value> {
|
|
inputValue: string;
|
|
getOptionLabel: (option: Value) => string;
|
|
}
|
|
type AcValueMap<FreeSolo> = FreeSolo extends true ? string : never;
|
|
type AcValue<Value, Multiple, DisableClearable, FreeSolo> = Multiple extends true ? Array<Value | AcValueMap<FreeSolo>> : DisableClearable extends true ? NonNullable<Value | AcValueMap<FreeSolo>> : Value | null | AcValueMap<FreeSolo>;
|
|
export type AutocompleteProps<Value = string, Multiple extends boolean = false, DisableClearable extends boolean = false, FreeSolo extends boolean = false> = {
|
|
id?: string;
|
|
/** Allow multiple selection. */
|
|
multiple?: Multiple;
|
|
/** Allow to add new options. */
|
|
freeSolo?: FreeSolo;
|
|
value?: AcValue<Value, Multiple, DisableClearable, FreeSolo>;
|
|
options: ReadonlyArray<Value>;
|
|
/**
|
|
* Used to determine the string value for a given option.
|
|
* It's used to fill the input (and the list box options if `renderOption` is not provided).
|
|
*
|
|
* If used in free solo mode, it must accept both the type of the options and a string.
|
|
*
|
|
* @param {Value} option The option
|
|
* @returns {string} The label
|
|
* @default (option) => option.label ?? option
|
|
*/
|
|
getOptionLabel?: (option: Value | AcValueMap<FreeSolo>) => string;
|
|
/**
|
|
* Used to determine if the option represents the given value.
|
|
* Uses strict equality by default.
|
|
* ⚠️ Both arguments need to be handled, an option can only match with one value.
|
|
*
|
|
* @param {Value} option The option to test.
|
|
* @param {Value} value The value to test against.
|
|
* @returns {boolean} true if value matches
|
|
*/
|
|
isOptionEqualToValue?: (option: Value, value: Value) => boolean;
|
|
/**
|
|
* Callback fired when the value changes.
|
|
*
|
|
* @param {React.SyntheticEvent} event The event source of the callback.
|
|
* @param {Value|Value[]} value The new value of the component.
|
|
*/
|
|
onChange?: (event: React.SyntheticEvent, value: AcValue<Value, Multiple, DisableClearable, FreeSolo>) => void;
|
|
/**
|
|
* Callback fired when the input value changes.
|
|
*
|
|
* @param {React.SyntheticEvent} event The event source of the callback.
|
|
* @param {string} value The new value of the input.
|
|
*/
|
|
onInputChange?: (event: React.SyntheticEvent, value: string) => void;
|
|
/** Control the popup open state. */
|
|
open?: boolean;
|
|
/**
|
|
* Callback fired when the popup requests to be opened.
|
|
* @param {React.SyntheticEvent} event The event source of the callback.
|
|
*/
|
|
onOpen?: (event: React.SyntheticEvent) => void;
|
|
/**
|
|
* Callback fired when the popup requests to be closed.
|
|
* @param {React.SyntheticEvent} event The event source of the callback.
|
|
* @param {string} reason The reason for closing.
|
|
*/
|
|
onClose?: (event: React.SyntheticEvent, reason: string) => void;
|
|
/** If true, the popup won't close when a value is selected. */
|
|
disableCloseOnSelect?: boolean;
|
|
/** If true, the popup opens when the input is focused. */
|
|
openOnFocus?: boolean;
|
|
/**
|
|
* Render the option, use `getOptionLabel` by default.
|
|
* @param {React.HTMLAttributes<HTMLLIElement> & { key: any }} props The props to apply on the li element.
|
|
* @param {Value} option The option to render.
|
|
* @param {object} state The state of each option.
|
|
* @param {string} state.inputValue The input value.
|
|
* @param {number} state.index The index of the option in the list.
|
|
* @param {boolean} state.selected Whether the option is selected.
|
|
* @returns {React.ReactNode} react node to render
|
|
*/
|
|
renderOption?: (props: React.HTMLAttributes<HTMLLIElement> & {
|
|
key: any;
|
|
}, option: Value, state: {
|
|
inputValue: string;
|
|
index: number;
|
|
selected: boolean;
|
|
}) => React.ReactNode;
|
|
label?: React.ReactNode;
|
|
placeholder?: string;
|
|
slotProps?: {
|
|
textField: TextFieldProps;
|
|
chip?: ChipProps | ((value: Value, index: number) => ChipProps);
|
|
};
|
|
};
|
|
export type BadgeProps = CommonProps & {
|
|
badgeContent?: React.ReactNode;
|
|
children?: React.ReactNode;
|
|
color?: 'primary' | 'default' | 'error';
|
|
invisible?: boolean;
|
|
overlap?: 'circular';
|
|
variant?: 'dot';
|
|
style?: React.CSSProperties;
|
|
};
|
|
export type ButtonProps = CommonProps & {
|
|
ref?: Ref<HTMLButtonElement>;
|
|
children?: React.ReactNode;
|
|
disabled?: boolean;
|
|
id?: string;
|
|
role?: string;
|
|
size?: 'small' | 'medium' | 'large';
|
|
startIcon?: React.ReactNode;
|
|
tabIndex?: number;
|
|
title?: string;
|
|
touchRippleRef?: any;
|
|
};
|
|
export type CheckboxProps = CommonProps & {
|
|
ref?: Ref<HTMLButtonElement>;
|
|
id?: string;
|
|
autoFocus?: boolean;
|
|
checked?: boolean;
|
|
disabled?: boolean;
|
|
fullWidth?: boolean;
|
|
indeterminate?: boolean;
|
|
inputRef?: React.Ref<HTMLInputElement>;
|
|
name?: string;
|
|
label?: React.ReactNode;
|
|
onChange?: React.ChangeEventHandler;
|
|
size?: 'small' | 'medium';
|
|
density?: 'standard' | 'compact';
|
|
slotProps?: {
|
|
htmlInput?: React.InputHTMLAttributes<HTMLInputElement> & {
|
|
ref?: React.Ref<HTMLInputElement>;
|
|
};
|
|
};
|
|
style?: React.CSSProperties;
|
|
tabIndex?: number;
|
|
touchRippleRef?: any;
|
|
};
|
|
export type ChipProps = CommonProps & {
|
|
ref?: Ref<HTMLDivElement>;
|
|
id?: string;
|
|
label: string;
|
|
size?: 'small' | 'medium';
|
|
icon?: React.ReactElement;
|
|
children?: null;
|
|
variant?: 'filled' | 'outlined';
|
|
};
|
|
export type IconButtonProps = Omit<ButtonProps, 'startIcon'> & {
|
|
label?: string;
|
|
color?: 'default' | 'inherit' | 'primary';
|
|
edge?: 'start' | 'end' | false;
|
|
};
|
|
export type ToggleButtonProps = Omit<CommonProps, 'onChange'> & {
|
|
selected?: boolean;
|
|
value: string;
|
|
};
|
|
export type DividerProps = {
|
|
className?: string;
|
|
orientation?: 'horizontal' | 'vertical';
|
|
};
|
|
export type MenuListProps = CommonProps & {
|
|
ref?: Ref<HTMLUListElement>;
|
|
id?: string;
|
|
children?: React.ReactNode;
|
|
autoFocus?: boolean;
|
|
autoFocusItem?: boolean;
|
|
};
|
|
export type MenuItemProps = CommonProps & {
|
|
autoFocus?: boolean;
|
|
children?: React.ReactNode;
|
|
/** For items that aren't interactive themselves (but may contain an interactive widget) */
|
|
inert?: boolean;
|
|
disabled?: boolean;
|
|
iconStart?: React.ReactNode;
|
|
iconEnd?: React.ReactNode;
|
|
selected?: boolean;
|
|
value?: number | string | readonly string[];
|
|
style?: React.CSSProperties;
|
|
};
|
|
type BasePlacement = 'top' | 'bottom' | 'left' | 'right';
|
|
type VariationPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end';
|
|
type AutoPlacement = 'auto' | 'auto-start' | 'auto-end';
|
|
type Placement = AutoPlacement | BasePlacement | VariationPlacement;
|
|
type ClickAwayMouseEventHandler = 'onClick' | 'onMouseDown' | 'onMouseUp' | 'onPointerDown' | 'onPointerUp';
|
|
type ClickAwayTouchEventHandler = 'onTouchStart' | 'onTouchEnd';
|
|
export type PaginationProps = CommonProps & {
|
|
count: number;
|
|
page: number;
|
|
rowsPerPage: number;
|
|
rowsPerPageOptions?: readonly (number | {
|
|
value: number;
|
|
label: string;
|
|
})[];
|
|
onPageChange: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
|
|
onRowsPerPageChange?: (rowsPerPage: number) => void;
|
|
disabled?: boolean;
|
|
};
|
|
export type PopperProps = CommonProps & {
|
|
role?: string;
|
|
ref?: Ref<HTMLDivElement>;
|
|
open: boolean;
|
|
children?: React.ReactNode;
|
|
clickAwayTouchEvent?: false | ClickAwayTouchEventHandler;
|
|
clickAwayMouseEvent?: false | ClickAwayMouseEventHandler;
|
|
flip?: boolean;
|
|
focusTrap?: boolean;
|
|
onExited?: (node: HTMLElement | null) => void;
|
|
onClickAway?: (event: MouseEvent | TouchEvent) => void;
|
|
onDidShow?: () => void;
|
|
onDidHide?: () => void;
|
|
id?: string;
|
|
target?: Element | null;
|
|
transition?: boolean;
|
|
/** @default 'bottom' */
|
|
placement?: Placement;
|
|
};
|
|
export type ModalProps = CommonProps & {
|
|
open: boolean;
|
|
children: React.ReactElement<unknown>;
|
|
onClose?: (event: object, reason: 'backdropClick' | 'escapeKeyDown') => void;
|
|
keepMounted?: boolean;
|
|
disableAutoFocus?: boolean;
|
|
disableEnforceFocus?: boolean;
|
|
disableRestoreFocus?: boolean;
|
|
};
|
|
export type CircularProgressProps = CommonProps & {
|
|
/**
|
|
* Pixels or CSS value.
|
|
* @default 40
|
|
*/
|
|
size?: number | string;
|
|
/** @default 'primary' */
|
|
color?: 'inherit' | 'primary';
|
|
};
|
|
export type LinearProgressProps = CommonProps & {};
|
|
export type InputProps = CommonProps & {
|
|
ref?: React.Ref<HTMLElement>;
|
|
inputRef?: React.Ref<HTMLInputElement>;
|
|
fullWidth?: boolean;
|
|
type?: React.HTMLInputTypeAttribute;
|
|
value?: string;
|
|
onChange: React.ChangeEventHandler;
|
|
disabled?: boolean;
|
|
endAdornment?: React.ReactNode;
|
|
startAdornment?: React.ReactNode;
|
|
slotProps?: {
|
|
htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
|
|
};
|
|
};
|
|
export type TextareaProps = CommonProps & {
|
|
ref?: React.Ref<HTMLTextAreaElement>;
|
|
inputRef?: React.Ref<HTMLTextAreaElement>;
|
|
fullWidth?: boolean;
|
|
value?: string;
|
|
onChange: React.ChangeEventHandler<HTMLTextAreaElement>;
|
|
onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
|
|
disabled?: boolean;
|
|
autoFocus?: boolean;
|
|
minRows?: number;
|
|
maxRows?: number;
|
|
};
|
|
export type SelectProps = CommonProps & {
|
|
ref?: Ref;
|
|
id?: string;
|
|
value?: any;
|
|
open?: boolean;
|
|
error?: boolean;
|
|
disabled?: boolean;
|
|
multiple?: boolean;
|
|
onChange?: React.ChangeEventHandler;
|
|
onOpen?: (event: React.SyntheticEvent) => void;
|
|
onClose?: (event: React.KeyboardEvent, reason: 'backdropClick' | 'escapeKeyDown' | 'tabKeyDown') => void;
|
|
renderValue?: (value: any) => React.ReactNode;
|
|
label?: React.ReactNode;
|
|
labelId?: string;
|
|
native?: boolean;
|
|
fullWidth?: boolean;
|
|
size?: 'small' | 'medium';
|
|
slotProps?: {
|
|
htmlInput?: {
|
|
ref?: Ref;
|
|
} & React.InputHTMLAttributes<HTMLInputElement>;
|
|
};
|
|
children?: React.ReactNode;
|
|
};
|
|
export type SelectOptionProps = CommonProps & {
|
|
native: boolean;
|
|
value: any;
|
|
children?: React.ReactNode;
|
|
};
|
|
export type SkeletonProps = CommonProps & {
|
|
variant?: 'circular' | 'text';
|
|
width?: number | string;
|
|
height?: number | string;
|
|
};
|
|
export type SwitchProps = CommonProps & {
|
|
checked?: boolean;
|
|
onChange?: React.ChangeEventHandler;
|
|
size?: 'small' | 'medium';
|
|
label?: React.ReactNode;
|
|
disabled?: boolean;
|
|
title?: string;
|
|
};
|
|
export type TabsProps = Omit<CommonProps, 'onChange'> & {
|
|
items: {
|
|
value: string;
|
|
label: string;
|
|
children: React.ReactNode;
|
|
}[];
|
|
value: string;
|
|
onChange: (event: React.SyntheticEvent, value: string) => void;
|
|
};
|
|
export type TextFieldProps = CommonProps & {
|
|
role?: string;
|
|
autoComplete?: string;
|
|
color?: 'primary' | 'error';
|
|
disabled?: boolean;
|
|
error?: boolean;
|
|
fullWidth?: boolean;
|
|
helperText?: string | null;
|
|
id?: string;
|
|
inputRef?: React.Ref<HTMLInputElement>;
|
|
label?: React.ReactNode;
|
|
onChange?: React.ChangeEventHandler;
|
|
placeholder?: string;
|
|
size?: 'small' | 'medium';
|
|
slotProps?: {
|
|
input?: Omit<Partial<InputProps>, 'slotProps'>;
|
|
inputLabel?: {};
|
|
htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
|
|
};
|
|
tabIndex?: number;
|
|
type?: React.HTMLInputTypeAttribute;
|
|
value?: string;
|
|
ref?: Ref<HTMLInputElement>;
|
|
multiline?: boolean;
|
|
autoFocus?: boolean;
|
|
};
|
|
export type TooltipProps = CommonProps & {
|
|
children: React.ReactElement<any, any>;
|
|
enterDelay?: number;
|
|
title: React.ReactNode;
|
|
disableInteractive?: boolean;
|
|
};
|
|
export type IconProps = CommonProps<SVGSVGElement> & {
|
|
fontSize?: 'small' | 'medium' | 'large' | 'inherit';
|
|
color?: 'action' | string;
|
|
titleAccess?: string;
|
|
};
|
|
export {}; |