From 9b39a554684234c8cfb95c0cde72fac73d56148b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B3zsef=20Sebesty=C3=A9n?= Date: Wed, 30 Aug 2023 09:06:59 +0200 Subject: [PATCH] [typescript] Introduce *OwnProps interfaces for components (#36798) --- .../src/LoadingButton/LoadingButton.d.ts | 102 ++-- packages/mui-lab/src/Masonry/Masonry.d.ts | 87 +-- packages/mui-lab/src/TabList/TabList.d.ts | 26 +- packages/mui-material-next/src/Chip/Chip.d.ts | 4 +- .../mui-material-next/src/Input/Input.d.ts | 4 +- packages/mui-material-next/src/Tab/Tab.d.ts | 102 ++-- .../src/TablePagination/TablePagination.d.ts | 231 ++++---- packages/mui-material-next/src/Tabs/Tabs.d.ts | 244 ++++----- .../mui-material/src/Accordion/Accordion.d.ts | 4 +- .../AccordionSummary/AccordionSummary.d.ts | 42 +- packages/mui-material/src/AppBar/AppBar.d.ts | 64 +-- packages/mui-material/src/Avatar/Avatar.d.ts | 99 ++-- .../mui-material/src/Backdrop/Backdrop.d.ts | 172 +++--- packages/mui-material/src/Badge/Badge.d.ts | 4 +- .../BottomNavigation/BottomNavigation.d.ts | 68 +-- .../BottomNavigationAction.d.ts | 76 +-- .../src/Breadcrumbs/Breadcrumbs.d.ts | 136 ++--- packages/mui-material/src/Button/Button.d.ts | 145 +++-- .../src/ButtonBase/ButtonBase.d.ts | 164 +++--- .../src/ButtonGroup/ButtonGroup.d.ts | 142 ++--- packages/mui-material/src/Card/Card.d.ts | 37 +- .../src/CardActionArea/CardActionArea.d.ts | 28 +- .../src/CardContent/CardContent.d.ts | 34 +- .../src/CardHeader/CardHeader.d.ts | 144 ++--- .../mui-material/src/CardMedia/CardMedia.d.ts | 58 +- packages/mui-material/src/Chip/Chip.d.ts | 166 +++--- .../mui-material/src/Container/Container.d.ts | 68 +-- .../DialogContentText/DialogContentText.d.ts | 26 +- .../src/DialogTitle/DialogTitle.d.ts | 34 +- .../mui-material/src/Divider/Divider.d.ts | 99 ++-- packages/mui-material/src/Fab/Fab.d.ts | 115 ++-- .../src/FormControl/FormControl.d.ts | 146 +++--- .../src/FormHelperText/FormHelperText.d.ts | 102 ++-- .../mui-material/src/FormLabel/FormLabel.d.ts | 11 +- packages/mui-material/src/Grid/Grid.d.ts | 137 ++--- packages/mui-material/src/Icon/Icon.d.ts | 98 ++-- .../src/IconButton/IconButton.d.ts | 102 ++-- .../mui-material/src/ImageList/ImageList.d.ts | 80 +-- .../src/ImageListItem/ImageListItem.d.ts | 54 +- .../src/InputAdornment/InputAdornment.d.ts | 76 +-- .../src/InputLabel/InputLabel.d.ts | 114 ++-- packages/mui-material/src/Link/Link.d.ts | 76 ++- packages/mui-material/src/List/List.d.ts | 69 ++- .../mui-material/src/ListItem/ListItem.d.ts | 102 ++-- .../src/ListItemButton/ListItemButton.d.ts | 12 +- .../src/ListSubheader/ListSubheader.d.ts | 74 +-- .../mui-material/src/MenuItem/MenuItem.d.ts | 91 ++-- .../mui-material/src/MenuList/MenuList.d.ts | 72 +-- packages/mui-material/src/Modal/Modal.d.ts | 350 ++++++------ .../src/PaginationItem/PaginationItem.d.ts | 168 +++--- packages/mui-material/src/Paper/Paper.d.ts | 4 +- .../ScopedCssBaseline/ScopedCssBaseline.d.ts | 48 +- .../mui-material/src/Skeleton/Skeleton.d.ts | 82 +-- packages/mui-material/src/Slider/Slider.d.ts | 496 +++++++++--------- packages/mui-material/src/Stack/Stack.d.ts | 77 +-- packages/mui-material/src/Step/Step.d.ts | 90 ++-- .../src/StepButton/StepButton.d.ts | 52 +- .../mui-material/src/Stepper/Stepper.d.ts | 89 ++-- .../mui-material/src/SvgIcon/SvgIcon.d.ts | 152 +++--- packages/mui-material/src/Tab/Tab.d.ts | 102 ++-- packages/mui-material/src/Table/Table.d.ts | 68 +-- .../mui-material/src/TableBody/TableBody.d.ts | 34 +- .../src/TableContainer/TableContainer.d.ts | 34 +- .../src/TableFooter/TableFooter.d.ts | 34 +- .../mui-material/src/TableHead/TableHead.d.ts | 34 +- .../src/TablePagination/TablePagination.d.ts | 225 ++++---- .../mui-material/src/TableRow/TableRow.d.ts | 54 +- .../src/TableSortLabel/TableSortLabel.d.ts | 76 +-- packages/mui-material/src/Tabs/Tabs.d.ts | 302 +++++------ .../src/ToggleButton/ToggleButton.d.ts | 142 ++--- .../mui-material/src/Toolbar/Toolbar.d.ts | 56 +- .../src/Typography/Typography.d.ts | 4 +- packages/mui-system/src/Box/Box.d.ts | 30 +- 73 files changed, 3539 insertions(+), 3405 deletions(-) diff --git a/packages/mui-lab/src/LoadingButton/LoadingButton.d.ts b/packages/mui-lab/src/LoadingButton/LoadingButton.d.ts index e32120739a270b..8603a50e117072 100644 --- a/packages/mui-lab/src/LoadingButton/LoadingButton.d.ts +++ b/packages/mui-lab/src/LoadingButton/LoadingButton.d.ts @@ -3,55 +3,57 @@ import { OverrideProps } from '@mui/material/OverridableComponent'; import { Theme } from '@mui/material/styles'; import { SxProps } from '@mui/system'; +export interface LoadingButtonOwnProps { + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial & { + /** Styles applied to the root element. */ + root?: string; + /** Styles applied to the root element if `loading={true}`. */ + loading?: string; + /** Styles applied to the loadingIndicator element. */ + loadingIndicator?: string; + /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */ + loadingIndicatorCenter?: string; + /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */ + loadingIndicatorStart?: string; + /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */ + loadingIndicatorEnd?: string; + /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */ + endIconLoadingEnd?: string; + /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */ + startIconLoadingStart?: string; + }; + /** + * If `true`, the loading indicator is shown and the button becomes disabled. + * @default false + */ + loading?: boolean; + /** + * Element placed before the children if the button is in loading state. + * The node should contain an element with `role="progressbar"` with an accessible name. + * By default we render a `CircularProgress` that is labelled by the button itself. + * @default + */ + loadingIndicator?: React.ReactNode; + /** + * The loading indicator can be positioned on the start, end, or the center of the button. + * @default 'center' + */ + loadingPosition?: 'start' | 'end' | 'center'; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export type LoadingButtonTypeMap< - P = {}, - D extends React.ElementType = 'button', + AdditionalProps = {}, + RootComponent extends React.ElementType = 'button', > = ExtendButtonTypeMap<{ - props: P & { - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial & { - /** Styles applied to the root element. */ - root?: string; - /** Styles applied to the root element if `loading={true}`. */ - loading?: string; - /** Styles applied to the loadingIndicator element. */ - loadingIndicator?: string; - /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */ - loadingIndicatorCenter?: string; - /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */ - loadingIndicatorStart?: string; - /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */ - loadingIndicatorEnd?: string; - /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */ - endIconLoadingEnd?: string; - /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */ - startIconLoadingStart?: string; - }; - /** - * If `true`, the loading indicator is shown and the button becomes disabled. - * @default false - */ - loading?: boolean; - /** - * Element placed before the children if the button is in loading state. - * The node should contain an element with `role="progressbar"` with an accessible name. - * By default we render a `CircularProgress` that is labelled by the button itself. - * @default - */ - loadingIndicator?: React.ReactNode; - /** - * The loading indicator can be positioned on the start, end, or the center of the button. - * @default 'center' - */ - loadingPosition?: 'start' | 'end' | 'center'; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: D; + props: AdditionalProps & LoadingButtonOwnProps; + defaultComponent: RootComponent; }>; /** @@ -68,8 +70,8 @@ export type LoadingButtonTypeMap< declare const LoadingButton: ExtendButton; export type LoadingButtonProps< - D extends React.ElementType = LoadingButtonTypeMap['defaultComponent'], - P = {}, -> = OverrideProps, D>; + RootComponent extends React.ElementType = LoadingButtonTypeMap['defaultComponent'], + AdditionalProps = {}, +> = OverrideProps, RootComponent>; export default LoadingButton; diff --git a/packages/mui-lab/src/Masonry/Masonry.d.ts b/packages/mui-lab/src/Masonry/Masonry.d.ts index 2ceb37bca28cdd..7f338898e34051 100644 --- a/packages/mui-lab/src/Masonry/Masonry.d.ts +++ b/packages/mui-lab/src/Masonry/Masonry.d.ts @@ -3,44 +3,49 @@ import { OverridableComponent, OverrideProps } from '@mui/material/OverridableCo import { Theme } from '@mui/material/styles'; import { MasonryClasses } from './masonryClasses'; -export interface MasonryTypeMap

{ - props: P & { - /** - * The content of the component. - */ - children: NonNullable; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * Number of columns. - * @default 4 - */ - columns?: ResponsiveStyleValue; - /** - * The default number of columns of the component. This is provided for server-side rendering. - */ - defaultColumns?: number; - /** - * The default height of the component in px. This is provided for server-side rendering. - */ - defaultHeight?: number; - /** - * The default spacing of the component. Like `spacing`, it is a factor of the theme's spacing. This is provided for server-side rendering. - */ - defaultSpacing?: number; - /** - * Defines the space between children. It is a factor of the theme's spacing. - * @default 1 - */ - spacing?: ResponsiveStyleValue; - /** - * Allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: D; +export interface MasonryOwnProps { + /** + * The content of the component. + */ + children: NonNullable; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * Number of columns. + * @default 4 + */ + columns?: ResponsiveStyleValue; + /** + * The default number of columns of the component. This is provided for server-side rendering. + */ + defaultColumns?: number; + /** + * The default height of the component in px. This is provided for server-side rendering. + */ + defaultHeight?: number; + /** + * The default spacing of the component. Like `spacing`, it is a factor of the theme's spacing. This is provided for server-side rendering. + */ + defaultSpacing?: number; + /** + * Defines the space between children. It is a factor of the theme's spacing. + * @default 1 + */ + spacing?: ResponsiveStyleValue; + /** + * Allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + +export interface MasonryTypeMap< + AdditionalProps = {}, + RootComponent extends React.ElementType = 'div', +> { + props: AdditionalProps & MasonryOwnProps; + defaultComponent: RootComponent; } /** * @@ -55,8 +60,8 @@ export interface MasonryTypeMap

{ declare const Masonry: OverridableComponent; export type MasonryProps< - D extends React.ElementType = MasonryTypeMap['defaultComponent'], - P = {}, -> = OverrideProps, D>; + RootComponent extends React.ElementType = MasonryTypeMap['defaultComponent'], + AdditionalProps = {}, +> = OverrideProps, RootComponent>; export default Masonry; diff --git a/packages/mui-lab/src/TabList/TabList.d.ts b/packages/mui-lab/src/TabList/TabList.d.ts index 50b89137409906..cf7a6dd2381a44 100644 --- a/packages/mui-lab/src/TabList/TabList.d.ts +++ b/packages/mui-lab/src/TabList/TabList.d.ts @@ -3,17 +3,19 @@ import { TabsTypeMap } from '@mui/material/Tabs'; import { DistributiveOmit } from '@mui/types'; import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent'; +interface TabListOwnProps extends DistributiveOmit { + /** + * A list of `` elements. + */ + children?: React.ReactNode; +} + export interface TabListTypeMap< - P = {}, - D extends React.ElementType = TabsTypeMap['defaultComponent'], + AdditionalProps = {}, + RootComponent extends React.ElementType = TabsTypeMap['defaultComponent'], > { - props: P & { - /** - * A list of `` elements. - */ - children?: React.ReactNode; - } & DistributiveOmit; - defaultComponent: D; + props: AdditionalProps & TabListOwnProps; + defaultComponent: RootComponent; } /** @@ -32,8 +34,8 @@ declare const TabList: OverridableComponent; export type TabListClassKey = keyof NonNullable; export type TabListProps< - D extends React.ElementType = TabListTypeMap['defaultComponent'], - P = {}, -> = OverrideProps, D>; + RootComponent extends React.ElementType = TabListTypeMap['defaultComponent'], + AdditionalProps = {}, +> = OverrideProps, RootComponent>; export default TabList; diff --git a/packages/mui-material-next/src/Chip/Chip.d.ts b/packages/mui-material-next/src/Chip/Chip.d.ts index 5c42b0cf2c02d5..6050f86081318b 100644 --- a/packages/mui-material-next/src/Chip/Chip.d.ts +++ b/packages/mui-material-next/src/Chip/Chip.d.ts @@ -12,7 +12,7 @@ export interface ChipPropsColorOverrides {} export interface ChipTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { props: AdditionalProps & { /** @@ -94,7 +94,7 @@ export interface ChipTypeMap< */ variant?: OverridableStringUnion<'filled' | 'outlined', ChipPropsVariantOverrides>; }; - defaultComponent: DefaultComponent; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material-next/src/Input/Input.d.ts b/packages/mui-material-next/src/Input/Input.d.ts index 9f92699c6a06dc..3cc269c639798f 100644 --- a/packages/mui-material-next/src/Input/Input.d.ts +++ b/packages/mui-material-next/src/Input/Input.d.ts @@ -203,10 +203,10 @@ export interface InputOwnProps { export interface InputTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { props: AdditionalProps & InputOwnProps; - defaultComponent: DefaultComponent; + defaultComponent: RootComponent; } export type InputProps< diff --git a/packages/mui-material-next/src/Tab/Tab.d.ts b/packages/mui-material-next/src/Tab/Tab.d.ts index ccf533f72e1fe2..50dd2de45ddf01 100644 --- a/packages/mui-material-next/src/Tab/Tab.d.ts +++ b/packages/mui-material-next/src/Tab/Tab.d.ts @@ -5,59 +5,61 @@ import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '@mui/material/ButtonB import { OverrideProps } from '@mui/material/OverridableComponent'; import { TabClasses } from './tabClasses'; +export interface TabOwnProps { + /** + * This prop isn't supported. + * Use the `component` prop if you need to change the children structure. + */ + children?: null; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, the component is disabled. + * @default false + */ + disabled?: boolean; + /** + * If `true`, the keyboard focus ripple is disabled. + * @default false + */ + disableFocusRipple?: boolean; + /** + * The icon to display. + */ + icon?: string | React.ReactElement; + /** + * The position of the icon relative to the label. + * @default 'top' + */ + iconPosition?: 'top' | 'bottom' | 'start' | 'end'; + /** + * The label element. + */ + label?: React.ReactNode; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * You can provide your own value. Otherwise, we fallback to the child position index. + */ + value?: any; + /** + * Tab labels appear in a single row. + * They can use a second line if needed. + * @default false + */ + wrapped?: boolean; +} + export type TabTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > = ExtendButtonBaseTypeMap<{ - props: AdditionalProps & { - /** - * This prop isn't supported. - * Use the `component` prop if you need to change the children structure. - */ - children?: null; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * If `true`, the component is disabled. - * @default false - */ - disabled?: boolean; - /** - * If `true`, the keyboard focus ripple is disabled. - * @default false - */ - disableFocusRipple?: boolean; - /** - * The icon to display. - */ - icon?: string | React.ReactElement; - /** - * The position of the icon relative to the label. - * @default 'top' - */ - iconPosition?: 'top' | 'bottom' | 'start' | 'end'; - /** - * The label element. - */ - label?: React.ReactNode; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * You can provide your own value. Otherwise, we fallback to the child position index. - */ - value?: any; - /** - * Tab labels appear in a single row. - * They can use a second line if needed. - * @default false - */ - wrapped?: boolean; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & TabOwnProps; + defaultComponent: RootComponent; }>; /** diff --git a/packages/mui-material-next/src/TablePagination/TablePagination.d.ts b/packages/mui-material-next/src/TablePagination/TablePagination.d.ts index d86cbde6daa134..33c27a8c781729 100644 --- a/packages/mui-material-next/src/TablePagination/TablePagination.d.ts +++ b/packages/mui-material-next/src/TablePagination/TablePagination.d.ts @@ -38,116 +38,125 @@ export interface TablePaginationActionsProps extends React.HTMLAttributes { - props: AdditionalProps & - TablePaginationBaseProps & { - /** - * The component used for displaying the actions. - * Either a string to use a HTML element or a component. - * @default TablePaginationActions - */ - ActionsComponent?: React.ElementType; - /** - * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component. - */ - backIconButtonProps?: Partial; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The total number of rows. - * - * To enable server side pagination for an unknown number of items, provide -1. - */ - count: number; - /** - * Accepts a function which returns a string value that provides a user-friendly name for the current page. - * This is important for screen reader users. - * - * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/). - * @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous'). - * @returns {string} - * @default function defaultGetAriaLabel(type) { - * return `Go to ${type} page`; - * } - */ - getItemAriaLabel?: (type: 'first' | 'last' | 'next' | 'previous') => string; - /** - * Customize the displayed rows label. Invoked with a `{ from, to, count, page }` - * object. - * - * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/). - * @default function defaultLabelDisplayedRows({ from, to, count }) { - * return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`; - * } - */ - labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode; - /** - * Customize the rows per page label. - * - * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/). - * @default 'Rows per page:' - */ - labelRowsPerPage?: React.ReactNode; - /** - * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element. - */ - nextIconButtonProps?: Partial; - /** - * Callback fired when the page is changed. - * - * @param {React.MouseEvent | null} event The event source of the callback. - * @param {number} page The page selected. - */ - onPageChange: (event: React.MouseEvent | null, page: number) => void; - /** - * Callback fired when the number of rows per page is changed. - * - * @param {React.ChangeEvent} event The event source of the callback. - */ - onRowsPerPageChange?: React.ChangeEventHandler; - /** - * The zero-based index of the current page. - */ - page: number; - /** - * The number of rows per page. - * - * Set -1 to display all the rows. - */ - rowsPerPage: number; - /** - * Customizes the options of the rows per page select field. If less than two options are - * available, no select field will be displayed. - * Use -1 for the value with a custom label to show all the rows. - * @default [10, 25, 50, 100] - */ - rowsPerPageOptions?: Array; - /** - * Props applied to the rows per page [`Select`](/material-ui/api/select/) element. - * @default {} - */ - SelectProps?: Partial; - /** - * If `true`, show the first-page button. - * @default false - */ - showFirstButton?: boolean; - /** - * If `true`, show the last-page button. - * @default false - */ - showLastButton?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; +/** + * This type is kept for compatibility. Use `TablePaginationOwnProps` instead. + */ +export type TablePaginationBaseProps = Omit; + +export interface TablePaginationOwnProps extends TablePaginationBaseProps { + /** + * The component used for displaying the actions. + * Either a string to use a HTML element or a component. + * @default TablePaginationActions + */ + ActionsComponent?: React.ElementType; + /** + * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component. + */ + backIconButtonProps?: Partial; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The total number of rows. + * + * To enable server side pagination for an unknown number of items, provide -1. + */ + count: number; + /** + * Accepts a function which returns a string value that provides a user-friendly name for the current page. + * This is important for screen reader users. + * + * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/). + * @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous'). + * @returns {string} + * @default function defaultGetAriaLabel(type) { + * return `Go to ${type} page`; + * } + */ + getItemAriaLabel?: (type: 'first' | 'last' | 'next' | 'previous') => string; + /** + * Customize the displayed rows label. Invoked with a `{ from, to, count, page }` + * object. + * + * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/). + * @default function defaultLabelDisplayedRows({ from, to, count }) { + * return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`; + * } + */ + labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode; + /** + * Customize the rows per page label. + * + * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/). + * @default 'Rows per page:' + */ + labelRowsPerPage?: React.ReactNode; + /** + * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element. + */ + nextIconButtonProps?: Partial; + /** + * Callback fired when the page is changed. + * + * @param {React.MouseEvent | null} event The event source of the callback. + * @param {number} page The page selected. + */ + onPageChange: (event: React.MouseEvent | null, page: number) => void; + /** + * Callback fired when the number of rows per page is changed. + * + * @param {React.ChangeEvent} event The event source of the callback. + */ + onRowsPerPageChange?: React.ChangeEventHandler; + /** + * The zero-based index of the current page. + */ + page: number; + /** + * The number of rows per page. + * + * Set -1 to display all the rows. + */ + rowsPerPage: number; + /** + * Customizes the options of the rows per page select field. If less than two options are + * available, no select field will be displayed. + * Use -1 for the value with a custom label to show all the rows. + * @default [10, 25, 50, 100] + */ + rowsPerPageOptions?: Array< + | number + | { + value: number; + label: string; + } + >; + /** + * Props applied to the rows per page [`Select`](/material-ui/api/select/) element. + * @default {} + */ + SelectProps?: Partial; + /** + * If `true`, show the first-page button. + * @default false + */ + showFirstButton?: boolean; + /** + * If `true`, show the last-page button. + * @default false + */ + showLastButton?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + +export interface TablePaginationTypeMap { + props: AdditionalProps & TablePaginationOwnProps; + defaultComponent: RootComponent; } /** @@ -166,8 +175,6 @@ declare const TablePagination: OverridableComponent< TablePaginationTypeMap<{}, React.JSXElementConstructor> >; -export type TablePaginationBaseProps = Omit; - export type TablePaginationProps< RootComponent extends React.ElementType = React.JSXElementConstructor, AdditionalProps = {}, diff --git a/packages/mui-material-next/src/Tabs/Tabs.d.ts b/packages/mui-material-next/src/Tabs/Tabs.d.ts index 69c3457f219e51..66150dfa1be10e 100644 --- a/packages/mui-material-next/src/Tabs/Tabs.d.ts +++ b/packages/mui-material-next/src/Tabs/Tabs.d.ts @@ -6,130 +6,132 @@ import { OverridableComponent, OverrideProps } from '@mui/material/OverridableCo import { TabScrollButtonProps } from '../TabScrollButton'; import { TabsClasses } from './tabsClasses'; +export interface TabsOwnProps { + /** + * Callback fired when the component mounts. + * This is useful when you want to trigger an action programmatically. + * It supports two actions: `updateIndicator()` and `updateScrollButtons()` + * + * @param {object} actions This object contains all possible actions + * that can be triggered programmatically. + */ + action?: React.Ref; + /** + * If `true`, the scroll buttons aren't forced hidden on mobile. + * By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`. + * @default false + */ + allowScrollButtonsMobile?: boolean; + /** + * The label for the Tabs as a string. + */ + 'aria-label'?: string; + /** + * An id or list of ids separated by a space that label the Tabs. + */ + 'aria-labelledby'?: string; + /** + * If `true`, the tabs are centered. + * This prop is intended for large views. + * @default false + */ + centered?: boolean; + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * Determines the color of the indicator. + * @default 'primary' + */ + indicatorColor?: 'secondary' | 'primary'; + /** + * Callback fired when the value changes. + * + * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event. + * @param {any} value We default to the index of the child (number) + */ + onChange?: (event: React.SyntheticEvent, value: any) => void; + /** + * The component orientation (layout flow direction). + * @default 'horizontal' + */ + orientation?: 'horizontal' | 'vertical'; + /** + * The component used to render the scroll buttons. + * @default TabScrollButton + */ + ScrollButtonComponent?: React.ElementType; + /** + * Determine behavior of scroll buttons when tabs are set to scroll: + * + * - `auto` will only present them when not all the items are visible. + * - `true` will always present them. + * - `false` will never present them. + * + * By default the scroll buttons are hidden on mobile. + * This behavior can be disabled with `allowScrollButtonsMobile`. + * @default 'auto' + */ + scrollButtons?: 'auto' | true | false; + /** + * If `true` the selected tab changes on focus. Otherwise it only + * changes on activation. + */ + selectionFollowsFocus?: boolean; + /** + * Props applied to the tab indicator element. + * @default {} + */ + TabIndicatorProps?: React.HTMLAttributes; + /** + * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element. + * @default {} + */ + TabScrollButtonProps?: Partial; + /** + * Determines the color of the `Tab`. + * @default 'primary' + */ + textColor?: 'secondary' | 'primary' | 'inherit'; + /** + * The value of the currently selected `Tab`. + * If you don't want any selected `Tab`, you can set this prop to `false`. + */ + value?: any; + /** + * Determines additional display behavior of the tabs: + * + * - `scrollable` will invoke scrolling properties and allow for horizontally + * scrolling (or swiping) of the tab bar. + * -`fullWidth` will make the tabs grow to use all the available space, + * which should be used for small views, like on mobile. + * - `standard` will render the default state. + * @default 'standard' + */ + variant?: 'standard' | 'scrollable' | 'fullWidth'; + /** + * If `true`, the scrollbar is visible. It can be useful when displaying + * a long vertical list of tabs. + * @default false + */ + visibleScrollbar?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface TabsTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = typeof ButtonBase, + RootComponent extends React.ElementType = typeof ButtonBase, > { - props: AdditionalProps & { - /** - * Callback fired when the component mounts. - * This is useful when you want to trigger an action programmatically. - * It supports two actions: `updateIndicator()` and `updateScrollButtons()` - * - * @param {object} actions This object contains all possible actions - * that can be triggered programmatically. - */ - action?: React.Ref; - /** - * If `true`, the scroll buttons aren't forced hidden on mobile. - * By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`. - * @default false - */ - allowScrollButtonsMobile?: boolean; - /** - * The label for the Tabs as a string. - */ - 'aria-label'?: string; - /** - * An id or list of ids separated by a space that label the Tabs. - */ - 'aria-labelledby'?: string; - /** - * If `true`, the tabs are centered. - * This prop is intended for large views. - * @default false - */ - centered?: boolean; - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * Determines the color of the indicator. - * @default 'primary' - */ - indicatorColor?: 'secondary' | 'primary'; - /** - * Callback fired when the value changes. - * - * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event. - * @param {any} value We default to the index of the child (number) - */ - onChange?: (event: React.SyntheticEvent, value: any) => void; - /** - * The component orientation (layout flow direction). - * @default 'horizontal' - */ - orientation?: 'horizontal' | 'vertical'; - /** - * The component used to render the scroll buttons. - * @default TabScrollButton - */ - ScrollButtonComponent?: React.ElementType; - /** - * Determine behavior of scroll buttons when tabs are set to scroll: - * - * - `auto` will only present them when not all the items are visible. - * - `true` will always present them. - * - `false` will never present them. - * - * By default the scroll buttons are hidden on mobile. - * This behavior can be disabled with `allowScrollButtonsMobile`. - * @default 'auto' - */ - scrollButtons?: 'auto' | true | false; - /** - * If `true` the selected tab changes on focus. Otherwise it only - * changes on activation. - */ - selectionFollowsFocus?: boolean; - /** - * Props applied to the tab indicator element. - * @default {} - */ - TabIndicatorProps?: React.HTMLAttributes; - /** - * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element. - * @default {} - */ - TabScrollButtonProps?: Partial; - /** - * Determines the color of the `Tab`. - * @default 'primary' - */ - textColor?: 'secondary' | 'primary' | 'inherit'; - /** - * The value of the currently selected `Tab`. - * If you don't want any selected `Tab`, you can set this prop to `false`. - */ - value?: any; - /** - * Determines additional display behavior of the tabs: - * - * - `scrollable` will invoke scrolling properties and allow for horizontally - * scrolling (or swiping) of the tab bar. - * -`fullWidth` will make the tabs grow to use all the available space, - * which should be used for small views, like on mobile. - * - `standard` will render the default state. - * @default 'standard' - */ - variant?: 'standard' | 'scrollable' | 'fullWidth'; - /** - * If `true`, the scrollbar is visible. It can be useful when displaying - * a long vertical list of tabs. - * @default false - */ - visibleScrollbar?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & TabsOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/Accordion/Accordion.d.ts b/packages/mui-material/src/Accordion/Accordion.d.ts index 7d443c40476f5b..ca9becea5b1f40 100644 --- a/packages/mui-material/src/Accordion/Accordion.d.ts +++ b/packages/mui-material/src/Accordion/Accordion.d.ts @@ -8,7 +8,7 @@ import { ExtendPaperTypeMap } from '../Paper/Paper'; export type AccordionTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > = ExtendPaperTypeMap< { props: AdditionalProps & { @@ -65,7 +65,7 @@ export type AccordionTypeMap< */ TransitionProps?: TransitionProps; }; - defaultComponent: DefaultComponent; + defaultComponent: RootComponent; }, 'onChange' | 'classes' >; diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.d.ts b/packages/mui-material/src/AccordionSummary/AccordionSummary.d.ts index c015565cb62e84..daeca9e2d9b184 100644 --- a/packages/mui-material/src/AccordionSummary/AccordionSummary.d.ts +++ b/packages/mui-material/src/AccordionSummary/AccordionSummary.d.ts @@ -5,29 +5,31 @@ import { OverrideProps } from '../OverridableComponent'; import { Theme } from '..'; import { AccordionSummaryClasses } from './accordionSummaryClasses'; +export interface AccordionSummaryOwnProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The icon to display as the expand indicator. + */ + expandIcon?: React.ReactNode; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export type AccordionSummaryTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > = ExtendButtonBaseTypeMap<{ - props: AdditionalProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The icon to display as the expand indicator. - */ - expandIcon?: React.ReactNode; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & AccordionSummaryOwnProps; + defaultComponent: RootComponent; }>; /** diff --git a/packages/mui-material/src/AppBar/AppBar.d.ts b/packages/mui-material/src/AppBar/AppBar.d.ts index c6bc0104e0ced0..bd4c841ee99ec7 100644 --- a/packages/mui-material/src/AppBar/AppBar.d.ts +++ b/packages/mui-material/src/AppBar/AppBar.d.ts @@ -8,41 +8,43 @@ import { ExtendPaperTypeMap } from '../Paper/Paper'; export interface AppBarPropsColorOverrides {} +export interface AppBarOwnProps { + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The color of the component. + * It supports both default and custom theme colors, which can be added as shown in the + * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * @default 'primary' + */ + color?: OverridableStringUnion; + /** + * If true, the `color` prop is applied in dark mode. + * @default false + */ + enableColorOnDark?: boolean; + /** + * The positioning type. The behavior of the different options is described + * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). + * Note: `sticky` is not universally supported and will fall back to `static` when unavailable. + * @default 'fixed' + */ + position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative'; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export type AppBarTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'header', + RootComponent extends React.ElementType = 'header', > = ExtendPaperTypeMap< { - props: AdditionalProps & { - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The color of the component. - * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). - * @default 'primary' - */ - color?: OverridableStringUnion; - /** - * If true, the `color` prop is applied in dark mode. - * @default false - */ - enableColorOnDark?: boolean; - /** - * The positioning type. The behavior of the different options is described - * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). - * Note: `sticky` is not universally supported and will fall back to `static` when unavailable. - * @default 'fixed' - */ - position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative'; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & AppBarOwnProps; + defaultComponent: RootComponent; }, 'position' | 'color' | 'classes' >; diff --git a/packages/mui-material/src/Avatar/Avatar.d.ts b/packages/mui-material/src/Avatar/Avatar.d.ts index 2b19c9cb69c307..daa7d9afa74b57 100644 --- a/packages/mui-material/src/Avatar/Avatar.d.ts +++ b/packages/mui-material/src/Avatar/Avatar.d.ts @@ -7,59 +7,58 @@ import { AvatarClasses } from './avatarClasses'; export interface AvatarPropsVariantOverrides {} +export interface AvatarOwnProps { + /** + * Used in combination with `src` or `srcSet` to + * provide an alt attribute for the rendered `img` element. + */ + alt?: string; + /** + * Used to render icon or text elements inside the Avatar if `src` is not set. + * This can be an element, or just a string. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image. + * It can be used to listen for the loading error event. + */ + imgProps?: React.ImgHTMLAttributes & { + sx?: SxProps; + }; + /** + * The `sizes` attribute for the `img` element. + */ + sizes?: string; + /** + * The `src` attribute for the `img` element. + */ + src?: string; + /** + * The `srcSet` attribute for the `img` element. + * Use this attribute for responsive image display. + */ + srcSet?: string; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * The shape of the avatar. + * @default 'circular' + */ + variant?: OverridableStringUnion<'circular' | 'rounded' | 'square', AvatarPropsVariantOverrides>; +} + export interface AvatarTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & { - /** - * Used in combination with `src` or `srcSet` to - * provide an alt attribute for the rendered `img` element. - */ - alt?: string; - /** - * Used to render icon or text elements inside the Avatar if `src` is not set. - * This can be an element, or just a string. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image. - * It can be used to listen for the loading error event. - */ - imgProps?: React.ImgHTMLAttributes & { - sx?: SxProps; - }; - /** - * The `sizes` attribute for the `img` element. - */ - sizes?: string; - /** - * The `src` attribute for the `img` element. - */ - src?: string; - /** - * The `srcSet` attribute for the `img` element. - * Use this attribute for responsive image display. - */ - srcSet?: string; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * The shape of the avatar. - * @default 'circular' - */ - variant?: OverridableStringUnion< - 'circular' | 'rounded' | 'square', - AvatarPropsVariantOverrides - >; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & AvatarOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/Backdrop/Backdrop.d.ts b/packages/mui-material/src/Backdrop/Backdrop.d.ts index 2e0457336f11cb..f383995b8a2cbc 100644 --- a/packages/mui-material/src/Backdrop/Backdrop.d.ts +++ b/packages/mui-material/src/Backdrop/Backdrop.d.ts @@ -8,94 +8,96 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent'; export interface BackdropComponentsPropsOverrides {} +export interface BackdropOwnProps extends Partial> { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * The components used for each slot inside. + * + * This prop is an alias for the `slots` prop. + * It's recommended to use the `slots` prop instead. + * + * @default {} + */ + components?: { + Root?: React.ElementType; + }; + /** + * The extra props for the slot components. + * You can override the existing props or add new ones. + * + * This prop is an alias for the `slotProps` prop. + * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. + * + * @default {} + */ + componentsProps?: { + root?: React.HTMLAttributes & BackdropComponentsPropsOverrides; + }; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, the backdrop is invisible. + * It can be used when rendering a popover or a custom select component. + * @default false + */ + invisible?: boolean; + /** + * If `true`, the component is shown. + */ + open: boolean; + /** + * The extra props for the slot components. + * You can override the existing props or add new ones. + * + * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future. + * + * @default {} + */ + slotProps?: { + root?: React.HTMLAttributes & BackdropComponentsPropsOverrides; + }; + /** + * The components used for each slot inside. + * + * This prop is an alias for the `components` prop, which will be deprecated in the future. + * + * @default {} + */ + slots?: { + root?: React.ElementType; + }; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * The duration for the transition, in milliseconds. + * You may specify a single timeout for all transitions, or individually with an object. + */ + transitionDuration?: TransitionProps['timeout']; + /** + * The component used for the transition. + * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + * @default Fade + */ + TransitionComponent?: React.JSXElementConstructor< + TransitionProps & { + children: React.ReactElement; + } + >; +} + export interface BackdropTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & - Partial> & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * The components used for each slot inside. - * - * This prop is an alias for the `slots` prop. - * It's recommended to use the `slots` prop instead. - * - * @default {} - */ - components?: { - Root?: React.ElementType; - }; - /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * - * This prop is an alias for the `slotProps` prop. - * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. - * - * @default {} - */ - componentsProps?: { - root?: React.HTMLAttributes & BackdropComponentsPropsOverrides; - }; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * If `true`, the backdrop is invisible. - * It can be used when rendering a popover or a custom select component. - * @default false - */ - invisible?: boolean; - /** - * If `true`, the component is shown. - */ - open: boolean; - /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * - * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future. - * - * @default {} - */ - slotProps?: { - root?: React.HTMLAttributes & BackdropComponentsPropsOverrides; - }; - /** - * The components used for each slot inside. - * - * This prop is an alias for the `components` prop, which will be deprecated in the future. - * - * @default {} - */ - slots?: { - root?: React.ElementType; - }; - - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * The duration for the transition, in milliseconds. - * You may specify a single timeout for all transitions, or individually with an object. - */ - transitionDuration?: TransitionProps['timeout']; - /** - * The component used for the transition. - * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. - * @default Fade - */ - TransitionComponent?: React.JSXElementConstructor< - TransitionProps & { children: React.ReactElement } - >; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & BackdropOwnProps; + defaultComponent: RootComponent; } type BackdropRootProps = NonNullable['root']; diff --git a/packages/mui-material/src/Badge/Badge.d.ts b/packages/mui-material/src/Badge/Badge.d.ts index 459a138d0ee768..7bd1094e6c8b05 100644 --- a/packages/mui-material/src/Badge/Badge.d.ts +++ b/packages/mui-material/src/Badge/Badge.d.ts @@ -147,11 +147,11 @@ export interface BadgeOwnProps { } export interface BadgeTypeMap< - DefaultComponent extends React.ElementType = 'span', + RootComponent extends React.ElementType = 'span', AdditionalProps = {}, > { props: AdditionalProps & BadgeOwnProps; - defaultComponent: DefaultComponent; + defaultComponent: RootComponent; } type BadgeRootProps = NonNullable['root']; diff --git a/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts b/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts index 3cbec3f280a31b..b335e6e536f47e 100644 --- a/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts +++ b/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts @@ -4,42 +4,44 @@ import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { BottomNavigationClasses } from './bottomNavigationClasses'; +export interface BottomNavigationOwnProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * Callback fired when the value changes. + * + * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event. + * @param {any} value We default to the index of the child. + */ + onChange?: (event: React.SyntheticEvent, value: any) => void; + /** + * If `true`, all `BottomNavigationAction`s will show their labels. + * By default, only the selected `BottomNavigationAction` will show its label. + * @default false + */ + showLabels?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * The value of the currently selected `BottomNavigationAction`. + */ + value?: any; +} + export interface BottomNavigationTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * Callback fired when the value changes. - * - * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event. - * @param {any} value We default to the index of the child. - */ - onChange?: (event: React.SyntheticEvent, value: any) => void; - /** - * If `true`, all `BottomNavigationAction`s will show their labels. - * By default, only the selected `BottomNavigationAction` will show its label. - * @default false - */ - showLabels?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * The value of the currently selected `BottomNavigationAction`. - */ - value?: any; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & BottomNavigationOwnProps; + defaultComponent: RootComponent; } /** * diff --git a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.d.ts b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.d.ts index 08d850dddbece3..7b32550d882e61 100644 --- a/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.d.ts +++ b/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.d.ts @@ -5,46 +5,48 @@ import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '.. import { OverrideProps } from '../OverridableComponent'; import { BottomNavigationActionClasses } from './bottomNavigationActionClasses'; +export interface BottomNavigationActionOwnProps { + /** + * This prop isn't supported. + * Use the `component` prop if you need to change the children structure. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The icon to display. + */ + icon?: React.ReactNode; + /** + * The label element. + */ + label?: React.ReactNode; + /** + * If `true`, the `BottomNavigationAction` will show its label. + * By default, only the selected `BottomNavigationAction` + * inside `BottomNavigation` will show its label. + * + * The prop defaults to the value (`false`) inherited from the parent BottomNavigation component. + */ + showLabel?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * You can provide your own value. Otherwise, we fallback to the child position index. + */ + value?: any; +} + export type BottomNavigationActionTypeMap< AdditionalProps, - DefaultComponent extends React.ElementType, + RootComponent extends React.ElementType, > = ExtendButtonBaseTypeMap<{ - props: AdditionalProps & { - /** - * This prop isn't supported. - * Use the `component` prop if you need to change the children structure. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The icon to display. - */ - icon?: React.ReactNode; - /** - * The label element. - */ - label?: React.ReactNode; - /** - * If `true`, the `BottomNavigationAction` will show its label. - * By default, only the selected `BottomNavigationAction` - * inside `BottomNavigation` will show its label. - * - * The prop defaults to the value (`false`) inherited from the parent BottomNavigation component. - */ - showLabel?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * You can provide your own value. Otherwise, we fallback to the child position index. - */ - value?: any; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & BottomNavigationActionOwnProps; + defaultComponent: RootComponent; }>; /** diff --git a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.d.ts b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.d.ts index 9ce23f7a8c06a2..123891f11e4fde 100644 --- a/packages/mui-material/src/Breadcrumbs/Breadcrumbs.d.ts +++ b/packages/mui-material/src/Breadcrumbs/Breadcrumbs.d.ts @@ -12,77 +12,79 @@ export interface BreadcrumbsOwnerState extends BreadcrumbsProps { expanded: boolean; } -export interface BreadcrumbsTypeMap< - AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'nav', -> { - props: AdditionalProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The components used for each slot inside the Breadcumb. - * Either a string to use a HTML element or a component. - * @default {} - */ - slots?: { - CollapsedIcon?: React.ElementType; - }; +export interface BreadcrumbsOwnProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The components used for each slot inside the Breadcumb. + * Either a string to use a HTML element or a component. + * @default {} + */ + slots?: { + CollapsedIcon?: React.ElementType; + }; + /** + * The props used for each slot inside the Breadcumb. + * @default {} + */ + slotProps?: { /** - * The props used for each slot inside the Breadcumb. + * Props applied to the CollapsedIcon slot. * @default {} */ - slotProps?: { - /** - * Props applied to the CollapsedIcon slot. - * @default {} - */ - collapsedIcon?: SlotComponentProps< - typeof SvgIcon, - BreadcrumbsCollapsedIconSlotPropsOverrides, - BreadcrumbsOwnerState - >; - }; - /** - * Override the default label for the expand button. - * - * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/). - * @default 'Show path' - */ - expandText?: string; - /** - * If max items is exceeded, the number of items to show after the ellipsis. - * @default 1 - */ - itemsAfterCollapse?: number; - /** - * If max items is exceeded, the number of items to show before the ellipsis. - * @default 1 - */ - itemsBeforeCollapse?: number; - /** - * Specifies the maximum number of breadcrumbs to display. When there are more - * than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse` - * will be shown, with an ellipsis in between. - * @default 8 - */ - maxItems?: number; - /** - * Custom separator node. - * @default '/' - */ - separator?: React.ReactNode; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; + collapsedIcon?: SlotComponentProps< + typeof SvgIcon, + BreadcrumbsCollapsedIconSlotPropsOverrides, + BreadcrumbsOwnerState + >; }; - defaultComponent: DefaultComponent; + /** + * Override the default label for the expand button. + * + * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/). + * @default 'Show path' + */ + expandText?: string; + /** + * If max items is exceeded, the number of items to show after the ellipsis. + * @default 1 + */ + itemsAfterCollapse?: number; + /** + * If max items is exceeded, the number of items to show before the ellipsis. + * @default 1 + */ + itemsBeforeCollapse?: number; + /** + * Specifies the maximum number of breadcrumbs to display. When there are more + * than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse` + * will be shown, with an ellipsis in between. + * @default 8 + */ + maxItems?: number; + /** + * Custom separator node. + * @default '/' + */ + separator?: React.ReactNode; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + +export interface BreadcrumbsTypeMap< + AdditionalProps = {}, + RootComponent extends React.ElementType = 'nav', +> { + props: AdditionalProps & BreadcrumbsOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/Button/Button.d.ts b/packages/mui-material/src/Button/Button.d.ts index 1bd7dd18ece3d6..a3a758f65be1dd 100644 --- a/packages/mui-material/src/Button/Button.d.ts +++ b/packages/mui-material/src/Button/Button.d.ts @@ -12,82 +12,81 @@ export interface ButtonPropsColorOverrides {} export interface ButtonPropsSizeOverrides {} +export interface ButtonOwnProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The color of the component. + * It supports both default and custom theme colors, which can be added as shown in the + * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * @default 'primary' + */ + color?: OverridableStringUnion< + 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning', + ButtonPropsColorOverrides + >; + /** + * If `true`, the component is disabled. + * @default false + */ + disabled?: boolean; + /** + * If `true`, no elevation is used. + * @default false + */ + disableElevation?: boolean; + /** + * If `true`, the keyboard focus ripple is disabled. + * @default false + */ + disableFocusRipple?: boolean; + /** + * Element placed after the children. + */ + endIcon?: React.ReactNode; + /** + * If `true`, the button will take up the full width of its container. + * @default false + */ + fullWidth?: boolean; + /** + * The URL to link to when the button is clicked. + * If defined, an `a` element will be used as the root node. + */ + href?: string; + /** + * The size of the component. + * `small` is equivalent to the dense button styling. + * @default 'medium' + */ + size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonPropsSizeOverrides>; + /** + * Element placed before the children. + */ + startIcon?: React.ReactNode; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * The variant to use. + * @default 'text' + */ + variant?: OverridableStringUnion<'text' | 'outlined' | 'contained', ButtonPropsVariantOverrides>; +} + export type ButtonTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'button', + RootComponent extends React.ElementType = 'button', > = ExtendButtonBaseTypeMap<{ - props: AdditionalProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The color of the component. - * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). - * @default 'primary' - */ - color?: OverridableStringUnion< - 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning', - ButtonPropsColorOverrides - >; - /** - * If `true`, the component is disabled. - * @default false - */ - disabled?: boolean; - /** - * If `true`, no elevation is used. - * @default false - */ - disableElevation?: boolean; - /** - * If `true`, the keyboard focus ripple is disabled. - * @default false - */ - disableFocusRipple?: boolean; - /** - * Element placed after the children. - */ - endIcon?: React.ReactNode; - /** - * If `true`, the button will take up the full width of its container. - * @default false - */ - fullWidth?: boolean; - /** - * The URL to link to when the button is clicked. - * If defined, an `a` element will be used as the root node. - */ - href?: string; - /** - * The size of the component. - * `small` is equivalent to the dense button styling. - * @default 'medium' - */ - size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonPropsSizeOverrides>; - /** - * Element placed before the children. - */ - startIcon?: React.ReactNode; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * The variant to use. - * @default 'text' - */ - variant?: OverridableStringUnion< - 'text' | 'outlined' | 'contained', - ButtonPropsVariantOverrides - >; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & ButtonOwnProps; + defaultComponent: RootComponent; }>; /** diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.d.ts b/packages/mui-material/src/ButtonBase/ButtonBase.d.ts index 6a6c256d87a48d..af1edc9aa88849 100644 --- a/packages/mui-material/src/ButtonBase/ButtonBase.d.ts +++ b/packages/mui-material/src/ButtonBase/ButtonBase.d.ts @@ -5,90 +5,92 @@ import { TouchRippleActions, TouchRippleProps } from './TouchRipple'; import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent'; import { ButtonBaseClasses } from './buttonBaseClasses'; +export interface ButtonBaseOwnProps { + /** + * A ref for imperative actions. + * It currently only supports `focusVisible()` action. + */ + action?: React.Ref; + /** + * If `true`, the ripples are centered. + * They won't start at the cursor interaction position. + * @default false + */ + centerRipple?: boolean; + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, the component is disabled. + * @default false + */ + disabled?: boolean; + /** + * If `true`, the ripple effect is disabled. + * + * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure + * to highlight the element by applying separate styles with the `.Mui-focusVisible` class. + * @default false + */ + disableRipple?: boolean; + /** + * If `true`, the touch ripple effect is disabled. + * @default false + */ + disableTouchRipple?: boolean; + /** + * If `true`, the base button will have a keyboard focus ripple. + * @default false + */ + focusRipple?: boolean; + /** + * This prop can help identify which element has keyboard focus. + * The class name will be applied when the element gains the focus through keyboard interaction. + * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo). + * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md). + * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components + * if needed. + */ + focusVisibleClassName?: string; + /** + * The component used to render a link when the `href` prop is provided. + * @default 'a' + */ + LinkComponent?: React.ElementType; + /** + * Callback fired when the component is focused with a keyboard. + * We trigger a `onFocus` callback too. + */ + onFocusVisible?: React.FocusEventHandler; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * @default 0 + */ + tabIndex?: NonNullable['tabIndex']>; + /** + * Props applied to the `TouchRipple` element. + */ + TouchRippleProps?: Partial; + /** + * A ref that points to the `TouchRipple` element. + */ + touchRippleRef?: React.Ref; +} + export interface ButtonBaseTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'button', + RootComponent extends React.ElementType = 'button', > { - props: AdditionalProps & { - /** - * A ref for imperative actions. - * It currently only supports `focusVisible()` action. - */ - action?: React.Ref; - /** - * If `true`, the ripples are centered. - * They won't start at the cursor interaction position. - * @default false - */ - centerRipple?: boolean; - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * If `true`, the component is disabled. - * @default false - */ - disabled?: boolean; - /** - * If `true`, the ripple effect is disabled. - * - * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure - * to highlight the element by applying separate styles with the `.Mui-focusVisible` class. - * @default false - */ - disableRipple?: boolean; - /** - * If `true`, the touch ripple effect is disabled. - * @default false - */ - disableTouchRipple?: boolean; - /** - * If `true`, the base button will have a keyboard focus ripple. - * @default false - */ - focusRipple?: boolean; - /** - * This prop can help identify which element has keyboard focus. - * The class name will be applied when the element gains the focus through keyboard interaction. - * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo). - * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md). - * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components - * if needed. - */ - focusVisibleClassName?: string; - /** - * The component used to render a link when the `href` prop is provided. - * @default 'a' - */ - LinkComponent?: React.ElementType; - /** - * Callback fired when the component is focused with a keyboard. - * We trigger a `onFocus` callback too. - */ - onFocusVisible?: React.FocusEventHandler; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * @default 0 - */ - tabIndex?: NonNullable['tabIndex']>; - /** - * Props applied to the `TouchRipple` element. - */ - TouchRippleProps?: Partial; - /** - * A ref that points to the `TouchRipple` element. - */ - touchRippleRef?: React.Ref; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & ButtonBaseOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.d.ts b/packages/mui-material/src/ButtonGroup/ButtonGroup.d.ts index 458e7da7204f0b..9cbb6b1b51d3c9 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.d.ts +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.d.ts @@ -9,79 +9,81 @@ export interface ButtonGroupPropsColorOverrides {} export interface ButtonGroupPropsVariantOverrides {} export interface ButtonGroupPropsSizeOverrides {} +export interface ButtonGroupOwnProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The color of the component. + * It supports both default and custom theme colors, which can be added as shown in the + * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * @default 'primary' + */ + color?: OverridableStringUnion< + 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', + ButtonGroupPropsColorOverrides + >; + /** + * If `true`, the component is disabled. + * @default false + */ + disabled?: boolean; + /** + * If `true`, no elevation is used. + * @default false + */ + disableElevation?: boolean; + /** + * If `true`, the button keyboard focus ripple is disabled. + * @default false + */ + disableFocusRipple?: boolean; + /** + * If `true`, the button ripple effect is disabled. + * @default false + */ + disableRipple?: boolean; + /** + * If `true`, the buttons will take up the full width of its container. + * @default false + */ + fullWidth?: boolean; + /** + * The component orientation (layout flow direction). + * @default 'horizontal' + */ + orientation?: 'vertical' | 'horizontal'; + /** + * The size of the component. + * `small` is equivalent to the dense button styling. + * @default 'medium' + */ + size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonGroupPropsSizeOverrides>; + /** + * The variant to use. + * @default 'outlined' + */ + variant?: OverridableStringUnion< + 'text' | 'outlined' | 'contained', + ButtonGroupPropsVariantOverrides + >; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface ButtonGroupTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The color of the component. - * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). - * @default 'primary' - */ - color?: OverridableStringUnion< - 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', - ButtonGroupPropsColorOverrides - >; - /** - * If `true`, the component is disabled. - * @default false - */ - disabled?: boolean; - /** - * If `true`, no elevation is used. - * @default false - */ - disableElevation?: boolean; - /** - * If `true`, the button keyboard focus ripple is disabled. - * @default false - */ - disableFocusRipple?: boolean; - /** - * If `true`, the button ripple effect is disabled. - * @default false - */ - disableRipple?: boolean; - /** - * If `true`, the buttons will take up the full width of its container. - * @default false - */ - fullWidth?: boolean; - /** - * The component orientation (layout flow direction). - * @default 'horizontal' - */ - orientation?: 'vertical' | 'horizontal'; - /** - * The size of the component. - * `small` is equivalent to the dense button styling. - * @default 'medium' - */ - size?: OverridableStringUnion<'small' | 'medium' | 'large', ButtonGroupPropsSizeOverrides>; - /** - * The variant to use. - * @default 'outlined' - */ - variant?: OverridableStringUnion< - 'text' | 'outlined' | 'contained', - ButtonGroupPropsVariantOverrides - >; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & ButtonGroupOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/Card/Card.d.ts b/packages/mui-material/src/Card/Card.d.ts index a061e30d33494b..41d2f725d61c18 100644 --- a/packages/mui-material/src/Card/Card.d.ts +++ b/packages/mui-material/src/Card/Card.d.ts @@ -9,27 +9,28 @@ import { CardClasses } from './cardClasses'; // TODO: v6 remove this interface, it is not used export interface CardPropsColorOverrides {} +export interface CardOwnProps extends DistributiveOmit { + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, the card will use raised styling. + * @default false + */ + raised?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface CardTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & - DistributiveOmit & { - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * If `true`, the card will use raised styling. - * @default false - */ - raised?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & CardOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/CardActionArea/CardActionArea.d.ts b/packages/mui-material/src/CardActionArea/CardActionArea.d.ts index 3f0cbbb26215ff..40a01c09c76910 100644 --- a/packages/mui-material/src/CardActionArea/CardActionArea.d.ts +++ b/packages/mui-material/src/CardActionArea/CardActionArea.d.ts @@ -5,22 +5,24 @@ import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '.. import { OverrideProps } from '../OverridableComponent'; import { CardActionAreaClasses } from './cardActionAreaClasses'; +export interface CardActionAreaOwnProps { + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + focusVisibleClassName?: string; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export type CardActionAreaTypeMap< AdditionalProps, - DefaultComponent extends React.ElementType, + RootComponent extends React.ElementType, > = ExtendButtonBaseTypeMap<{ - props: AdditionalProps & { - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - focusVisibleClassName?: string; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & CardActionAreaOwnProps; + defaultComponent: RootComponent; }>; /** diff --git a/packages/mui-material/src/CardContent/CardContent.d.ts b/packages/mui-material/src/CardContent/CardContent.d.ts index e18c8a5333e731..3792c10c2d0ac5 100644 --- a/packages/mui-material/src/CardContent/CardContent.d.ts +++ b/packages/mui-material/src/CardContent/CardContent.d.ts @@ -4,25 +4,27 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { Theme } from '..'; import { CardContentClasses } from './cardContentClasses'; +export interface CardContentOwnProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface CardContentTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & CardContentOwnProps; + defaultComponent: RootComponent; } /** * diff --git a/packages/mui-material/src/CardHeader/CardHeader.d.ts b/packages/mui-material/src/CardHeader/CardHeader.d.ts index ab924b7682f27d..cfa1cfd5942f4a 100644 --- a/packages/mui-material/src/CardHeader/CardHeader.d.ts +++ b/packages/mui-material/src/CardHeader/CardHeader.d.ts @@ -5,63 +5,73 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { Theme } from '..'; import { CardHeaderClasses } from './cardHeaderClasses'; +export interface CardHeaderOwnProps< + TitleTypographyComponent extends React.ElementType = 'span', + SubheaderTypographyComponent extends React.ElementType = 'span', +> { + /** + * The action to display in the card header. + */ + action?: React.ReactNode; + /** + * The Avatar element to display. + */ + avatar?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, `subheader` and `title` won't be wrapped by a Typography component. + * This can be useful to render an alternative Typography variant by wrapping + * the `title` text, and optional `subheader` text + * with the Typography component. + * @default false + */ + disableTypography?: boolean; + /** + * The content of the component. + */ + subheader?: React.ReactNode; + /** + * These props will be forwarded to the subheader + * (as long as disableTypography is not `true`). + */ + subheaderTypographyProps?: TypographyProps< + SubheaderTypographyComponent, + { + component?: SubheaderTypographyComponent; + } + >; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * The content of the component. + */ + title?: React.ReactNode; + /** + * These props will be forwarded to the title + * (as long as disableTypography is not `true`). + */ + titleTypographyProps?: TypographyProps< + TitleTypographyComponent, + { + component?: TitleTypographyComponent; + } + >; +} + export interface CardHeaderTypeMap< - Props = {}, - DefaultComponent extends React.ElementType = 'div', + AdditionalProps = {}, + RootComponent extends React.ElementType = 'div', TitleTypographyComponent extends React.ElementType = 'span', SubheaderTypographyComponent extends React.ElementType = 'span', > { - props: Props & { - /** - * The action to display in the card header. - */ - action?: React.ReactNode; - /** - * The Avatar element to display. - */ - avatar?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * If `true`, `subheader` and `title` won't be wrapped by a Typography component. - * This can be useful to render an alternative Typography variant by wrapping - * the `title` text, and optional `subheader` text - * with the Typography component. - * @default false - */ - disableTypography?: boolean; - /** - * The content of the component. - */ - subheader?: React.ReactNode; - /** - * These props will be forwarded to the subheader - * (as long as disableTypography is not `true`). - */ - subheaderTypographyProps?: TypographyProps< - SubheaderTypographyComponent, - { component?: SubheaderTypographyComponent } - >; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * The content of the component. - */ - title?: React.ReactNode; - /** - * These props will be forwarded to the title - * (as long as disableTypography is not `true`). - */ - titleTypographyProps?: TypographyProps< - TitleTypographyComponent, - { component?: TitleTypographyComponent } - >; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & + CardHeaderOwnProps; + defaultComponent: RootComponent; } /** * @@ -77,14 +87,14 @@ declare const CardHeader: OverridableCardHeader; export interface OverridableCardHeader extends OverridableComponent { < - DefaultComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'], - Props = {}, + RootComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'], + AdditionalProps = {}, TitleTypographyComponent extends React.ElementType = 'span', SubheaderTypographyComponent extends React.ElementType = 'span', >( props: CardHeaderPropsWithComponent< - DefaultComponent, - Props, + RootComponent, + AdditionalProps, TitleTypographyComponent, SubheaderTypographyComponent >, @@ -92,23 +102,23 @@ export interface OverridableCardHeader extends OverridableComponent = OverrideProps< CardHeaderTypeMap< - Props, - DefaultComponent, + AdditionalProps, + RootComponent, TitleTypographyComponent, SubheaderTypographyComponent >, - DefaultComponent + RootComponent >; export type CardHeaderPropsWithComponent< - DefaultComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'], - Props = {}, + RootComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'], + AdditionalProps = {}, TitleTypographyComponent extends React.ElementType = 'span', SubheaderTypographyComponent extends React.ElementType = 'span', > = { @@ -116,10 +126,10 @@ export type CardHeaderPropsWithComponent< * The component used for the root node. * Either a string to use a HTML element or a component. */ - component?: DefaultComponent; + component?: RootComponent; } & CardHeaderProps< - DefaultComponent, - Props, + RootComponent, + AdditionalProps, TitleTypographyComponent, SubheaderTypographyComponent >; diff --git a/packages/mui-material/src/CardMedia/CardMedia.d.ts b/packages/mui-material/src/CardMedia/CardMedia.d.ts index f776c1bfa07aaf..59d56b2cfd5081 100644 --- a/packages/mui-material/src/CardMedia/CardMedia.d.ts +++ b/packages/mui-material/src/CardMedia/CardMedia.d.ts @@ -4,34 +4,36 @@ import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { CardMediaClasses } from './cardMediaClasses'; -export interface CardMediaTypeMap { - props: AdditionalProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * Image to be displayed as a background image. - * Either `image` or `src` prop must be specified. - * Note that caller must specify height otherwise the image will not be visible. - */ - image?: string; - /** - * An alias for `image` property. - * Available only with media components. - * Media components: `video`, `audio`, `picture`, `iframe`, `img`. - */ - src?: string; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; +export interface CardMediaOwnProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * Image to be displayed as a background image. + * Either `image` or `src` prop must be specified. + * Note that caller must specify height otherwise the image will not be visible. + */ + image?: string; + /** + * An alias for `image` property. + * Available only with media components. + * Media components: `video`, `audio`, `picture`, `iframe`, `img`. + */ + src?: string; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + +export interface CardMediaTypeMap { + props: AdditionalProps & CardMediaOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/Chip/Chip.d.ts b/packages/mui-material/src/Chip/Chip.d.ts index 686b395cf3058b..ddb1241accf9e9 100644 --- a/packages/mui-material/src/Chip/Chip.d.ts +++ b/packages/mui-material/src/Chip/Chip.d.ts @@ -11,91 +11,93 @@ export interface ChipPropsSizeOverrides {} export interface ChipPropsColorOverrides {} +export interface ChipOwnProps { + /** + * The Avatar element to display. + */ + avatar?: React.ReactElement; + /** + * This prop isn't supported. + * Use the `component` prop if you need to change the children structure. + */ + children?: null; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, the chip will appear clickable, and will raise when pressed, + * even if the onClick prop is not defined. + * If `false`, the chip will not appear clickable, even if onClick prop is defined. + * This can be used, for example, + * along with the component prop to indicate an anchor Chip is clickable. + * Note: this controls the UI and does not affect the onClick event. + */ + clickable?: boolean; + /** + * The color of the component. + * It supports both default and custom theme colors, which can be added as shown in the + * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * @default 'default' + */ + color?: OverridableStringUnion< + 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', + ChipPropsColorOverrides + >; + /** + * Override the default delete icon element. Shown only if `onDelete` is set. + */ + deleteIcon?: React.ReactElement; + /** + * If `true`, the component is disabled. + * @default false + */ + disabled?: boolean; + /** + * Icon element. + */ + icon?: React.ReactElement; + /** + * The content of the component. + */ + label?: React.ReactNode; + /** + * Callback fired when the delete icon is clicked. + * If set, the delete icon will be shown. + */ + onDelete?: React.EventHandler; + /** + * The size of the component. + * @default 'medium' + */ + size?: OverridableStringUnion<'small' | 'medium', ChipPropsSizeOverrides>; + /** + * If `true`, allows the disabled chip to escape focus. + * If `false`, allows the disabled chip to receive focus. + * @default false + */ + skipFocusWhenDisabled?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * @ignore + */ + tabIndex?: number; + /** + * The variant to use. + * @default 'filled' + */ + variant?: OverridableStringUnion<'filled' | 'outlined', ChipPropsVariantOverrides>; +} + export interface ChipTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & { - /** - * The Avatar element to display. - */ - avatar?: React.ReactElement; - /** - * This prop isn't supported. - * Use the `component` prop if you need to change the children structure. - */ - children?: null; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * If `true`, the chip will appear clickable, and will raise when pressed, - * even if the onClick prop is not defined. - * If `false`, the chip will not appear clickable, even if onClick prop is defined. - * This can be used, for example, - * along with the component prop to indicate an anchor Chip is clickable. - * Note: this controls the UI and does not affect the onClick event. - */ - clickable?: boolean; - /** - * The color of the component. - * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). - * @default 'default' - */ - color?: OverridableStringUnion< - 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', - ChipPropsColorOverrides - >; - /** - * Override the default delete icon element. Shown only if `onDelete` is set. - */ - deleteIcon?: React.ReactElement; - /** - * If `true`, the component is disabled. - * @default false - */ - disabled?: boolean; - /** - * Icon element. - */ - icon?: React.ReactElement; - /** - * The content of the component. - */ - label?: React.ReactNode; - /** - * Callback fired when the delete icon is clicked. - * If set, the delete icon will be shown. - */ - onDelete?: React.EventHandler; - /** - * The size of the component. - * @default 'medium' - */ - size?: OverridableStringUnion<'small' | 'medium', ChipPropsSizeOverrides>; - /** - * If `true`, allows the disabled chip to escape focus. - * If `false`, allows the disabled chip to receive focus. - * @default false - */ - skipFocusWhenDisabled?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * @ignore - */ - tabIndex?: number; - /** - * The variant to use. - * @default 'filled' - */ - variant?: OverridableStringUnion<'filled' | 'outlined', ChipPropsVariantOverrides>; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & ChipOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/Container/Container.d.ts b/packages/mui-material/src/Container/Container.d.ts index 8bd092b7d52557..9416144afe2943 100644 --- a/packages/mui-material/src/Container/Container.d.ts +++ b/packages/mui-material/src/Container/Container.d.ts @@ -4,42 +4,44 @@ import { Theme } from '../styles'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { ContainerClasses } from './containerClasses'; +export interface ContainerOwnProps { + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, the left and right padding is removed. + * @default false + */ + disableGutters?: boolean; + /** + * Set the max-width to match the min-width of the current breakpoint. + * This is useful if you'd prefer to design for a fixed set of sizes + * instead of trying to accommodate a fully fluid viewport. + * It's fluid by default. + * @default false + */ + fixed?: boolean; + /** + * Determine the max-width of the container. + * The container width grows with the size of the screen. + * Set to `false` to disable `maxWidth`. + * @default 'lg' + */ + maxWidth?: Breakpoint | false; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface ContainerTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & { - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * If `true`, the left and right padding is removed. - * @default false - */ - disableGutters?: boolean; - /** - * Set the max-width to match the min-width of the current breakpoint. - * This is useful if you'd prefer to design for a fixed set of sizes - * instead of trying to accommodate a fully fluid viewport. - * It's fluid by default. - * @default false - */ - fixed?: boolean; - /** - * Determine the max-width of the container. - * The container width grows with the size of the screen. - * Set to `false` to disable `maxWidth`. - * @default 'lg' - */ - maxWidth?: Breakpoint | false; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & ContainerOwnProps; + defaultComponent: RootComponent; } /** * diff --git a/packages/mui-material/src/DialogContentText/DialogContentText.d.ts b/packages/mui-material/src/DialogContentText/DialogContentText.d.ts index fae69c4d85fa22..4241654030a832 100644 --- a/packages/mui-material/src/DialogContentText/DialogContentText.d.ts +++ b/packages/mui-material/src/DialogContentText/DialogContentText.d.ts @@ -5,21 +5,23 @@ import { OverrideProps, OverridableComponent } from '../OverridableComponent'; import { Theme } from '../styles'; import { DialogContentTextClasses } from './dialogContentTextClasses'; +export interface DialogContentTextOwnProps extends Omit { + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface DialogContentTextTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = TypographyTypeMap['defaultComponent'], + RootComponent extends React.ElementType = TypographyTypeMap['defaultComponent'], > { - props: AdditionalProps & { - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - } & Omit; - defaultComponent: DefaultComponent; + props: AdditionalProps & DialogContentTextOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/DialogTitle/DialogTitle.d.ts b/packages/mui-material/src/DialogTitle/DialogTitle.d.ts index 5d86c4e3129c01..3bab5f2b0b185d 100644 --- a/packages/mui-material/src/DialogTitle/DialogTitle.d.ts +++ b/packages/mui-material/src/DialogTitle/DialogTitle.d.ts @@ -5,25 +5,27 @@ import { Theme } from '../styles'; import { TypographyTypeMap } from '../Typography'; import { DialogTitleClasses } from './dialogTitleClasses'; +export interface DialogTitleOwnProps extends Omit { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface DialogTitleTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = TypographyTypeMap['defaultComponent'], + RootComponent extends React.ElementType = TypographyTypeMap['defaultComponent'], > { - props: AdditionalProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - } & Omit; - defaultComponent: DefaultComponent; + props: AdditionalProps & DialogTitleOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/Divider/Divider.d.ts b/packages/mui-material/src/Divider/Divider.d.ts index 1b7be60ea2dcec..0c1244ba7490ca 100644 --- a/packages/mui-material/src/Divider/Divider.d.ts +++ b/packages/mui-material/src/Divider/Divider.d.ts @@ -7,59 +7,58 @@ import { DividerClasses } from './dividerClasses'; export interface DividerPropsVariantOverrides {} +export interface DividerOwnProps { + /** + * Absolutely position the element. + * @default false + */ + absolute?: boolean; + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, a vertical divider will have the correct height when used in flex container. + * (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.) + * @default false + */ + flexItem?: boolean; + /** + * If `true`, the divider will have a lighter color. + * @default false + */ + light?: boolean; + /** + * The component orientation. + * @default 'horizontal' + */ + orientation?: 'horizontal' | 'vertical'; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * The text alignment. + * @default 'center' + */ + textAlign?: 'center' | 'right' | 'left'; + /** + * The variant to use. + * @default 'fullWidth' + */ + variant?: OverridableStringUnion<'fullWidth' | 'inset' | 'middle', DividerPropsVariantOverrides>; +} + export interface DividerTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'hr', + RootComponent extends React.ElementType = 'hr', > { - props: AdditionalProps & { - /** - * Absolutely position the element. - * @default false - */ - absolute?: boolean; - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * If `true`, a vertical divider will have the correct height when used in flex container. - * (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.) - * @default false - */ - flexItem?: boolean; - /** - * If `true`, the divider will have a lighter color. - * @default false - */ - light?: boolean; - /** - * The component orientation. - * @default 'horizontal' - */ - orientation?: 'horizontal' | 'vertical'; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * The text alignment. - * @default 'center' - */ - textAlign?: 'center' | 'right' | 'left'; - /** - * The variant to use. - * @default 'fullWidth' - */ - variant?: OverridableStringUnion< - 'fullWidth' | 'inset' | 'middle', - DividerPropsVariantOverrides - >; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & DividerOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/Fab/Fab.d.ts b/packages/mui-material/src/Fab/Fab.d.ts index 5c272fee5541c4..8952dadb24eaba 100644 --- a/packages/mui-material/src/Fab/Fab.d.ts +++ b/packages/mui-material/src/Fab/Fab.d.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import { OverridableStringUnion } from '@mui/types'; import { SxProps } from '@mui/system'; import { PropTypes, Theme } from '..'; @@ -11,65 +12,67 @@ export interface FabPropsSizeOverrides {} export interface FabPropsColorOverrides {} +export interface FabOwnProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The color of the component. + * It supports both default and custom theme colors, which can be added as shown in the + * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * @default 'default' + */ + color?: OverridableStringUnion< + PropTypes.Color | 'success' | 'error' | 'info' | 'warning', + FabPropsColorOverrides + >; + /** + * If `true`, the component is disabled. + * @default false + */ + disabled?: boolean; + /** + * If `true`, the keyboard focus ripple is disabled. + * @default false + */ + disableFocusRipple?: boolean; + /** + * If `true`, the ripple effect is disabled. + */ + disableRipple?: boolean; + /** + * The URL to link to when the button is clicked. + * If defined, an `a` element will be used as the root node. + */ + href?: string; + /** + * The size of the component. + * `small` is equivalent to the dense button styling. + * @default 'large' + */ + size?: OverridableStringUnion<'small' | 'medium' | 'large', FabPropsSizeOverrides>; + /** + * The variant to use. + * @default 'circular' + */ + variant?: OverridableStringUnion<'circular' | 'extended', FabPropsVariantOverrides>; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export type FabTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'button', + RootComponent extends React.ElementType = 'button', > = ExtendButtonBaseTypeMap<{ - props: AdditionalProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The color of the component. - * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). - * @default 'default' - */ - color?: OverridableStringUnion< - PropTypes.Color | 'success' | 'error' | 'info' | 'warning', - FabPropsColorOverrides - >; - /** - * If `true`, the component is disabled. - * @default false - */ - disabled?: boolean; - /** - * If `true`, the keyboard focus ripple is disabled. - * @default false - */ - disableFocusRipple?: boolean; - /** - * If `true`, the ripple effect is disabled. - */ - disableRipple?: boolean; - /** - * The URL to link to when the button is clicked. - * If defined, an `a` element will be used as the root node. - */ - href?: string; - /** - * The size of the component. - * `small` is equivalent to the dense button styling. - * @default 'large' - */ - size?: OverridableStringUnion<'small' | 'medium' | 'large', FabPropsSizeOverrides>; - /** - * The variant to use. - * @default 'circular' - */ - variant?: OverridableStringUnion<'circular' | 'extended', FabPropsVariantOverrides>; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & FabOwnProps; + defaultComponent: RootComponent; }>; /** diff --git a/packages/mui-material/src/FormControl/FormControl.d.ts b/packages/mui-material/src/FormControl/FormControl.d.ts index f3ff6f89bd990b..e16a6d1b2f51ff 100644 --- a/packages/mui-material/src/FormControl/FormControl.d.ts +++ b/packages/mui-material/src/FormControl/FormControl.d.ts @@ -8,81 +8,83 @@ import { FormControlClasses } from './formControlClasses'; export interface FormControlPropsSizeOverrides {} export interface FormControlPropsColorOverrides {} +export interface FormControlOwnProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The color of the component. + * It supports both default and custom theme colors, which can be added as shown in the + * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * @default 'primary' + */ + color?: OverridableStringUnion< + 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', + FormControlPropsColorOverrides + >; + /** + * If `true`, the label, input and helper text should be displayed in a disabled state. + * @default false + */ + disabled?: boolean; + /** + * If `true`, the label is displayed in an error state. + * @default false + */ + error?: boolean; + /** + * If `true`, the component will take up the full width of its container. + * @default false + */ + fullWidth?: boolean; + /** + * If `true`, the component is displayed in focused state. + */ + focused?: boolean; + /** + * If `true`, the label is hidden. + * This is used to increase density for a `FilledInput`. + * Be sure to add `aria-label` to the `input` element. + * @default false + */ + hiddenLabel?: boolean; + /** + * If `dense` or `normal`, will adjust vertical spacing of this and contained components. + * @default 'none' + */ + margin?: 'dense' | 'normal' | 'none'; + /** + * If `true`, the label will indicate that the `input` is required. + * @default false + */ + required?: boolean; + /** + * The size of the component. + * @default 'medium' + */ + size?: OverridableStringUnion<'small' | 'medium', FormControlPropsSizeOverrides>; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * The variant to use. + * @default 'outlined' + */ + variant?: 'standard' | 'outlined' | 'filled'; +} + export interface FormControlTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The color of the component. - * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). - * @default 'primary' - */ - color?: OverridableStringUnion< - 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', - FormControlPropsColorOverrides - >; - /** - * If `true`, the label, input and helper text should be displayed in a disabled state. - * @default false - */ - disabled?: boolean; - /** - * If `true`, the label is displayed in an error state. - * @default false - */ - error?: boolean; - /** - * If `true`, the component will take up the full width of its container. - * @default false - */ - fullWidth?: boolean; - /** - * If `true`, the component is displayed in focused state. - */ - focused?: boolean; - /** - * If `true`, the label is hidden. - * This is used to increase density for a `FilledInput`. - * Be sure to add `aria-label` to the `input` element. - * @default false - */ - hiddenLabel?: boolean; - /** - * If `dense` or `normal`, will adjust vertical spacing of this and contained components. - * @default 'none' - */ - margin?: 'dense' | 'normal' | 'none'; - /** - * If `true`, the label will indicate that the `input` is required. - * @default false - */ - required?: boolean; - /** - * The size of the component. - * @default 'medium' - */ - size?: OverridableStringUnion<'small' | 'medium', FormControlPropsSizeOverrides>; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * The variant to use. - * @default 'outlined' - */ - variant?: 'standard' | 'outlined' | 'filled'; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & FormControlOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/FormHelperText/FormHelperText.d.ts b/packages/mui-material/src/FormHelperText/FormHelperText.d.ts index 703f00bbd7b0d1..0869db3920d6b8 100644 --- a/packages/mui-material/src/FormHelperText/FormHelperText.d.ts +++ b/packages/mui-material/src/FormHelperText/FormHelperText.d.ts @@ -7,59 +7,61 @@ import { FormHelperTextClasses } from './formHelperTextClasses'; export interface FormHelperTextPropsVariantOverrides {} +export interface FormHelperTextOwnProps { + /** + * The content of the component. + * + * If `' '` is provided, the component reserves one line height for displaying a future message. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, the helper text should be displayed in a disabled state. + */ + disabled?: boolean; + /** + * If `true`, helper text should be displayed in an error state. + */ + error?: boolean; + /** + * If `true`, the helper text should use filled classes key. + */ + filled?: boolean; + /** + * If `true`, the helper text should use focused classes key. + */ + focused?: boolean; + /** + * If `dense`, will adjust vertical spacing. This is normally obtained via context from + * FormControl. + */ + margin?: 'dense'; + /** + * If `true`, the helper text should use required classes key. + */ + required?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * The variant to use. + */ + variant?: OverridableStringUnion< + 'standard' | 'outlined' | 'filled', + FormHelperTextPropsVariantOverrides + >; +} + export interface FormHelperTextTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'p', + RootComponent extends React.ElementType = 'p', > { - props: AdditionalProps & { - /** - * The content of the component. - * - * If `' '` is provided, the component reserves one line height for displaying a future message. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * If `true`, the helper text should be displayed in a disabled state. - */ - disabled?: boolean; - /** - * If `true`, helper text should be displayed in an error state. - */ - error?: boolean; - /** - * If `true`, the helper text should use filled classes key. - */ - filled?: boolean; - /** - * If `true`, the helper text should use focused classes key. - */ - focused?: boolean; - /** - * If `dense`, will adjust vertical spacing. This is normally obtained via context from - * FormControl. - */ - margin?: 'dense'; - /** - * If `true`, the helper text should use required classes key. - */ - required?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * The variant to use. - */ - variant?: OverridableStringUnion< - 'standard' | 'outlined' | 'filled', - FormHelperTextPropsVariantOverrides - >; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & FormHelperTextOwnProps; + defaultComponent: RootComponent; } /** * diff --git a/packages/mui-material/src/FormLabel/FormLabel.d.ts b/packages/mui-material/src/FormLabel/FormLabel.d.ts index f580b7fdeaf0cc..980c088469fb5d 100644 --- a/packages/mui-material/src/FormLabel/FormLabel.d.ts +++ b/packages/mui-material/src/FormLabel/FormLabel.d.ts @@ -7,6 +7,11 @@ import { FormLabelClasses } from './formLabelClasses'; export interface FormLabelPropsColorOverrides {} +/** + * This type is kept for compatibility. Use `FormLabelOwnProps` instead. + */ +export type FormLabelBaseProps = React.LabelHTMLAttributes; + export interface FormLabelOwnProps { /** * The content of the component. @@ -53,10 +58,10 @@ export interface FormLabelOwnProps { export interface FormLabelTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'label', + RootComponent extends React.ElementType = 'label', > { props: AdditionalProps & FormLabelBaseProps & FormLabelOwnProps; - defaultComponent: DefaultComponent; + defaultComponent: RootComponent; } /** @@ -73,8 +78,6 @@ export interface FormLabelTypeMap< */ declare const FormLabel: OverridableComponent; -export type FormLabelBaseProps = React.LabelHTMLAttributes; - export interface ExtendFormLabelTypeMap { props: TypeMap['props'] & Pick; defaultComponent: TypeMap['defaultComponent']; diff --git a/packages/mui-material/src/Grid/Grid.d.ts b/packages/mui-material/src/Grid/Grid.d.ts index 4639d6ce4fffe7..8df168eec79edb 100644 --- a/packages/mui-material/src/Grid/Grid.d.ts +++ b/packages/mui-material/src/Grid/Grid.d.ts @@ -83,77 +83,78 @@ type Breakpoints = IfEquals< CustomBreakpoints >; +export interface GridOwnProps extends SystemProps, Breakpoints { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The number of columns. + * @default 12 + */ + columns?: ResponsiveStyleValue; + /** + * Defines the horizontal space between the type `item` components. + * It overrides the value of the `spacing` prop. + */ + columnSpacing?: ResponsiveStyleValue; + /** + * If `true`, the component will have the flex *container* behavior. + * You should be wrapping *items* with a *container*. + * @default false + */ + container?: boolean; + /** + * Defines the `flex-direction` style property. + * It is applied for all screen sizes. + * @default 'row' + */ + direction?: ResponsiveStyleValue; + /** + * If `true`, the component will have the flex *item* behavior. + * You should be wrapping *items* with a *container*. + * @default false + */ + item?: boolean; + /** + * Defines the vertical space between the type `item` components. + * It overrides the value of the `spacing` prop. + */ + rowSpacing?: ResponsiveStyleValue; + /** + * Defines the space between the type `item` components. + * It can only be used on a type `container` component. + * @default 0 + */ + spacing?: ResponsiveStyleValue; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * Defines the `flex-wrap` style property. + * It's applied for all screen sizes. + * @default 'wrap' + */ + wrap?: GridWrap; + /** + * If `true`, it sets `min-width: 0` on the item. + * Refer to the limitations section of the documentation to better understand the use case. + * @default false + */ + zeroMinWidth?: boolean; +} + export interface GridTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & - SystemProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The number of columns. - * @default 12 - */ - columns?: ResponsiveStyleValue; - /** - * Defines the horizontal space between the type `item` components. - * It overrides the value of the `spacing` prop. - */ - columnSpacing?: ResponsiveStyleValue; - /** - * If `true`, the component will have the flex *container* behavior. - * You should be wrapping *items* with a *container*. - * @default false - */ - container?: boolean; - /** - * Defines the `flex-direction` style property. - * It is applied for all screen sizes. - * @default 'row' - */ - direction?: ResponsiveStyleValue; - /** - * If `true`, the component will have the flex *item* behavior. - * You should be wrapping *items* with a *container*. - * @default false - */ - item?: boolean; - /** - * Defines the vertical space between the type `item` components. - * It overrides the value of the `spacing` prop. - */ - rowSpacing?: ResponsiveStyleValue; - /** - * Defines the space between the type `item` components. - * It can only be used on a type `container` component. - * @default 0 - */ - spacing?: ResponsiveStyleValue; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * Defines the `flex-wrap` style property. - * It's applied for all screen sizes. - * @default 'wrap' - */ - wrap?: GridWrap; - /** - * If `true`, it sets `min-width: 0` on the item. - * Refer to the limitations section of the documentation to better understand the use case. - * @default false - */ - zeroMinWidth?: boolean; - } & Breakpoints; - defaultComponent: DefaultComponent; + props: AdditionalProps & GridOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/Icon/Icon.d.ts b/packages/mui-material/src/Icon/Icon.d.ts index d66a87825db304..e29f7a1121e673 100644 --- a/packages/mui-material/src/Icon/Icon.d.ts +++ b/packages/mui-material/src/Icon/Icon.d.ts @@ -9,57 +9,59 @@ export interface IconPropsSizeOverrides {} export interface IconPropsColorOverrides {} +export interface IconOwnProps { + /** + * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any + * other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc). + * @default 'material-icons' + */ + baseClassName?: string; + /** + * The name of the icon font ligature. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The color of the component. + * It supports both default and custom theme colors, which can be added as shown in the + * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * @default 'inherit' + */ + color?: OverridableStringUnion< + | 'inherit' + | 'action' + | 'disabled' + | 'primary' + | 'secondary' + | 'error' + | 'info' + | 'success' + | 'warning', + IconPropsColorOverrides + >; + /** + * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. + * @default 'medium' + */ + fontSize?: OverridableStringUnion< + 'inherit' | 'large' | 'medium' | 'small', + IconPropsSizeOverrides + >; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface IconTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'span', + RootComponent extends React.ElementType = 'span', > { - props: AdditionalProps & { - /** - * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any - * other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc). - * @default 'material-icons' - */ - baseClassName?: string; - /** - * The name of the icon font ligature. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The color of the component. - * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). - * @default 'inherit' - */ - color?: OverridableStringUnion< - | 'inherit' - | 'action' - | 'disabled' - | 'primary' - | 'secondary' - | 'error' - | 'info' - | 'success' - | 'warning', - IconPropsColorOverrides - >; - /** - * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. - * @default 'medium' - */ - fontSize?: OverridableStringUnion< - 'inherit' | 'large' | 'medium' | 'small', - IconPropsSizeOverrides - >; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & IconOwnProps; + defaultComponent: RootComponent; } /** * diff --git a/packages/mui-material/src/IconButton/IconButton.d.ts b/packages/mui-material/src/IconButton/IconButton.d.ts index a764796b81bb44..09b3c4d23c52eb 100644 --- a/packages/mui-material/src/IconButton/IconButton.d.ts +++ b/packages/mui-material/src/IconButton/IconButton.d.ts @@ -10,59 +10,61 @@ export interface IconButtonPropsColorOverrides {} export interface IconButtonPropsSizeOverrides {} +export interface IconButtonOwnProps { + /** + * The icon to display. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The color of the component. + * It supports both default and custom theme colors, which can be added as shown in the + * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * @default 'default' + */ + color?: OverridableStringUnion< + 'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', + IconButtonPropsColorOverrides + >; + /** + * If `true`, the component is disabled. + * @default false + */ + disabled?: boolean; + /** + * If `true`, the keyboard focus ripple is disabled. + * @default false + */ + disableFocusRipple?: boolean; + /** + * If given, uses a negative margin to counteract the padding on one + * side (this is often helpful for aligning the left or right + * side of the icon with content above or below, without ruining the border + * size and shape). + * @default false + */ + edge?: 'start' | 'end' | false; + /** + * The size of the component. + * `small` is equivalent to the dense button styling. + * @default 'medium' + */ + size?: OverridableStringUnion<'small' | 'medium' | 'large', IconButtonPropsSizeOverrides>; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export type IconButtonTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'button', + RootComponent extends React.ElementType = 'button', > = ExtendButtonBaseTypeMap<{ - props: AdditionalProps & { - /** - * The icon to display. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The color of the component. - * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). - * @default 'default' - */ - color?: OverridableStringUnion< - 'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', - IconButtonPropsColorOverrides - >; - /** - * If `true`, the component is disabled. - * @default false - */ - disabled?: boolean; - /** - * If `true`, the keyboard focus ripple is disabled. - * @default false - */ - disableFocusRipple?: boolean; - /** - * If given, uses a negative margin to counteract the padding on one - * side (this is often helpful for aligning the left or right - * side of the icon with content above or below, without ruining the border - * size and shape). - * @default false - */ - edge?: 'start' | 'end' | false; - /** - * The size of the component. - * `small` is equivalent to the dense button styling. - * @default 'medium' - */ - size?: OverridableStringUnion<'small' | 'medium' | 'large', IconButtonPropsSizeOverrides>; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & IconButtonOwnProps; + defaultComponent: RootComponent; }>; /** diff --git a/packages/mui-material/src/ImageList/ImageList.d.ts b/packages/mui-material/src/ImageList/ImageList.d.ts index 86a93a2a399d8b..618e3cbc990531 100644 --- a/packages/mui-material/src/ImageList/ImageList.d.ts +++ b/packages/mui-material/src/ImageList/ImageList.d.ts @@ -7,48 +7,50 @@ import { ImageListClasses } from './imageListClasses'; export interface ImageListPropsVariantOverrides {} +export interface ImageListOwnProps { + /** + * The content of the component, normally `ImageListItem`s. + */ + children: NonNullable; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * Number of columns. + * @default 2 + */ + cols?: number; + /** + * The gap between items in px. + * @default 4 + */ + gap?: number; + /** + * The height of one row in px. + * @default 'auto' + */ + rowHeight?: number | 'auto'; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * The variant to use. + * @default 'standard' + */ + variant?: OverridableStringUnion< + 'masonry' | 'quilted' | 'standard' | 'woven', + ImageListPropsVariantOverrides + >; +} + export interface ImageListTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'ul', + RootComponent extends React.ElementType = 'ul', > { - props: AdditionalProps & { - /** - * The content of the component, normally `ImageListItem`s. - */ - children: NonNullable; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * Number of columns. - * @default 2 - */ - cols?: number; - /** - * The gap between items in px. - * @default 4 - */ - gap?: number; - /** - * The height of one row in px. - * @default 'auto' - */ - rowHeight?: number | 'auto'; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * The variant to use. - * @default 'standard' - */ - variant?: OverridableStringUnion< - 'masonry' | 'quilted' | 'standard' | 'woven', - ImageListPropsVariantOverrides - >; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & ImageListOwnProps; + defaultComponent: RootComponent; } /** * diff --git a/packages/mui-material/src/ImageListItem/ImageListItem.d.ts b/packages/mui-material/src/ImageListItem/ImageListItem.d.ts index acce86d80b9a50..09892699adfadb 100644 --- a/packages/mui-material/src/ImageListItem/ImageListItem.d.ts +++ b/packages/mui-material/src/ImageListItem/ImageListItem.d.ts @@ -4,35 +4,37 @@ import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { ImageListItemClasses } from './imageListItemClasses'; +export interface ImageListItemOwnProps { + /** + * The content of the component, normally an ``. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * Width of the item in number of grid columns. + * @default 1 + */ + cols?: number; + /** + * Height of the item in number of grid rows. + * @default 1 + */ + rows?: number; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface ImageListItemTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'li', + RootComponent extends React.ElementType = 'li', > { - props: AdditionalProps & { - /** - * The content of the component, normally an ``. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * Width of the item in number of grid columns. - * @default 1 - */ - cols?: number; - /** - * Height of the item in number of grid rows. - * @default 1 - */ - rows?: number; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & ImageListItemOwnProps; + defaultComponent: RootComponent; } /** * diff --git a/packages/mui-material/src/InputAdornment/InputAdornment.d.ts b/packages/mui-material/src/InputAdornment/InputAdornment.d.ts index 477b3436843f49..14ad4b05d3f00d 100644 --- a/packages/mui-material/src/InputAdornment/InputAdornment.d.ts +++ b/packages/mui-material/src/InputAdornment/InputAdornment.d.ts @@ -4,46 +4,48 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { Theme } from '..'; import { InputAdornmentClasses } from './inputAdornmentClasses'; +export interface InputAdornmentOwnProps { + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The content of the component, normally an `IconButton` or string. + */ + children?: React.ReactNode; + /** + * Disable pointer events on the root. + * This allows for the content of the adornment to focus the `input` on click. + * @default false + */ + disablePointerEvents?: boolean; + /** + * If children is a string then disable wrapping in a Typography component. + * @default false + */ + disableTypography?: boolean; + /** + * The position this adornment should appear relative to the `Input`. + */ + position: 'start' | 'end'; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * The variant to use. + * Note: If you are using the `TextField` component or the `FormControl` component + * you do not have to set this manually. + */ + variant?: 'standard' | 'outlined' | 'filled'; +} + export interface InputAdornmentTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & { - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The content of the component, normally an `IconButton` or string. - */ - children?: React.ReactNode; - /** - * Disable pointer events on the root. - * This allows for the content of the adornment to focus the `input` on click. - * @default false - */ - disablePointerEvents?: boolean; - /** - * If children is a string then disable wrapping in a Typography component. - * @default false - */ - disableTypography?: boolean; - /** - * The position this adornment should appear relative to the `Input`. - */ - position: 'start' | 'end'; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * The variant to use. - * Note: If you are using the `TextField` component or the `FormControl` component - * you do not have to set this manually. - */ - variant?: 'standard' | 'outlined' | 'filled'; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & InputAdornmentOwnProps; + defaultComponent: RootComponent; } /** * diff --git a/packages/mui-material/src/InputLabel/InputLabel.d.ts b/packages/mui-material/src/InputLabel/InputLabel.d.ts index 860db2e2d04e1f..d14ab786e97ab1 100644 --- a/packages/mui-material/src/InputLabel/InputLabel.d.ts +++ b/packages/mui-material/src/InputLabel/InputLabel.d.ts @@ -8,65 +8,67 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent'; export interface InputLabelPropsSizeOverrides {} +export interface InputLabelOwnProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + color?: FormLabelProps['color']; + /** + * If `true`, the transition animation is disabled. + * @default false + */ + disableAnimation?: boolean; + /** + * If `true`, the component is disabled. + */ + disabled?: boolean; + /** + * If `true`, the label is displayed in an error state. + */ + error?: boolean; + /** + * If `true`, the `input` of this label is focused. + */ + focused?: boolean; + /** + * If `dense`, will adjust vertical spacing. This is normally obtained via context from + * FormControl. + */ + margin?: 'dense'; + /** + * if `true`, the label will indicate that the `input` is required. + */ + required?: boolean; + /** + * If `true`, the label is shrunk. + */ + shrink?: boolean; + /** + * The size of the component. + * @default 'normal' + */ + size?: OverridableStringUnion<'small' | 'normal', InputLabelPropsSizeOverrides>; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * The variant to use. + */ + variant?: 'standard' | 'outlined' | 'filled'; +} + export type InputLabelTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'label', + RootComponent extends React.ElementType = 'label', > = ExtendFormLabelTypeMap<{ - props: AdditionalProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - color?: FormLabelProps['color']; - /** - * If `true`, the transition animation is disabled. - * @default false - */ - disableAnimation?: boolean; - /** - * If `true`, the component is disabled. - */ - disabled?: boolean; - /** - * If `true`, the label is displayed in an error state. - */ - error?: boolean; - /** - * If `true`, the `input` of this label is focused. - */ - focused?: boolean; - /** - * If `dense`, will adjust vertical spacing. This is normally obtained via context from - * FormControl. - */ - margin?: 'dense'; - /** - * if `true`, the label will indicate that the `input` is required. - */ - required?: boolean; - /** - * If `true`, the label is shrunk. - */ - shrink?: boolean; - /** - * The size of the component. - * @default 'normal' - */ - size?: OverridableStringUnion<'small' | 'normal', InputLabelPropsSizeOverrides>; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * The variant to use. - */ - variant?: 'standard' | 'outlined' | 'filled'; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & InputLabelOwnProps; + defaultComponent: RootComponent; }>; /** diff --git a/packages/mui-material/src/Link/Link.d.ts b/packages/mui-material/src/Link/Link.d.ts index 1851a2e609a0d0..99b9147a962c3a 100644 --- a/packages/mui-material/src/Link/Link.d.ts +++ b/packages/mui-material/src/Link/Link.d.ts @@ -6,45 +6,43 @@ import { Theme } from '../styles'; import { TypographyOwnProps } from '../Typography'; import { LinkClasses } from './linkClasses'; -export interface LinkTypeMap< - AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'a', -> { - props: AdditionalProps & - LinkBaseProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The color of the link. - * @default 'primary' - */ - color?: TypographyOwnProps['color']; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * `classes` prop applied to the [`Typography`](/material-ui/api/typography/) element. - */ - TypographyClasses?: TypographyOwnProps['classes']; - /** - * Controls when the link should have an underline. - * @default 'always' - */ - underline?: 'none' | 'hover' | 'always'; - /** - * Applies the theme typography styles. - * @default 'inherit' - */ - variant?: TypographyOwnProps['variant']; - }; - defaultComponent: DefaultComponent; +export interface LinkOwnProps extends DistributiveOmit { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The color of the link. + * @default 'primary' + */ + color?: TypographyOwnProps['color']; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * `classes` prop applied to the [`Typography`](/material-ui/api/typography/) element. + */ + TypographyClasses?: TypographyOwnProps['classes']; + /** + * Controls when the link should have an underline. + * @default 'always' + */ + underline?: 'none' | 'hover' | 'always'; + /** + * Applies the theme typography styles. + * @default 'inherit' + */ + variant?: TypographyOwnProps['variant']; +} + +export interface LinkTypeMap { + props: AdditionalProps & LinkOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/List/List.d.ts b/packages/mui-material/src/List/List.d.ts index b4e7430b798ced..19b0aaa68cbd94 100644 --- a/packages/mui-material/src/List/List.d.ts +++ b/packages/mui-material/src/List/List.d.ts @@ -4,41 +4,40 @@ import { Theme } from '..'; import { OverridableComponent, OverridableTypeMap, OverrideProps } from '../OverridableComponent'; import { ListClasses } from './listClasses'; -export interface ListTypeMap< - AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'ul', -> { - props: AdditionalProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * If `true`, compact vertical padding designed for keyboard and mouse input is used for - * the list and list items. - * The prop is available to descendant components as the `dense` context. - * @default false - */ - dense?: boolean; - /** - * If `true`, vertical padding is removed from the list. - * @default false - */ - disablePadding?: boolean; - /** - * The content of the subheader, normally `ListSubheader`. - */ - subheader?: React.ReactNode; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; +export interface ListOwnProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, compact vertical padding designed for keyboard and mouse input is used for + * the list and list items. + * The prop is available to descendant components as the `dense` context. + * @default false + */ + dense?: boolean; + /** + * If `true`, vertical padding is removed from the list. + * @default false + */ + disablePadding?: boolean; + /** + * The content of the subheader, normally `ListSubheader`. + */ + subheader?: React.ReactNode; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + +export interface ListTypeMap { + props: AdditionalProps & ListOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/ListItem/ListItem.d.ts b/packages/mui-material/src/ListItem/ListItem.d.ts index 7ad0ae4d34f1a6..b4e22ee6ba1c8f 100644 --- a/packages/mui-material/src/ListItem/ListItem.d.ts +++ b/packages/mui-material/src/ListItem/ListItem.d.ts @@ -7,6 +7,9 @@ import { ListItemClasses } from './listItemClasses'; export interface ListItemComponentsPropsOverrides {} +/** + * This type is kept for compatibility. Use `ListItemOwnProps` instead. + */ export interface ListItemBaseProps { /** * Defines the `align-items` style property. @@ -84,55 +87,56 @@ export interface ListItemBaseProps { sx?: SxProps; } -export interface ListItemTypeMap { - props: AdditionalProps & - ListItemBaseProps & { - /** - * The components used for each slot inside. - * - * This prop is an alias for the `slots` prop. - * It's recommended to use the `slots` prop instead. - * - * @default {} - */ - components?: { - Root?: React.ElementType; - }; - /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * - * This prop is an alias for the `slotProps` prop. - * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. - * - * @default {} - */ - componentsProps?: { - root?: React.HTMLAttributes & ListItemComponentsPropsOverrides; - }; - /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * - * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future. - * - * @default {} - */ - slotProps?: { - root?: React.HTMLAttributes & ListItemComponentsPropsOverrides; - }; - /** - * The components used for each slot inside. - * - * This prop is an alias for the `components` prop, which will be deprecated in the future. - * - * @default {} - */ - slots?: { - root?: React.ElementType; - }; - }; - defaultComponent: DefaultComponent; +export interface ListItemOwnProps extends ListItemBaseProps { + /** + * The components used for each slot inside. + * + * This prop is an alias for the `slots` prop. + * It's recommended to use the `slots` prop instead. + * + * @default {} + */ + components?: { + Root?: React.ElementType; + }; + /** + * The extra props for the slot components. + * You can override the existing props or add new ones. + * + * This prop is an alias for the `slotProps` prop. + * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. + * + * @default {} + */ + componentsProps?: { + root?: React.HTMLAttributes & ListItemComponentsPropsOverrides; + }; + /** + * The extra props for the slot components. + * You can override the existing props or add new ones. + * + * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future. + * + * @default {} + */ + slotProps?: { + root?: React.HTMLAttributes & ListItemComponentsPropsOverrides; + }; + /** + * The components used for each slot inside. + * + * This prop is an alias for the `components` prop, which will be deprecated in the future. + * + * @default {} + */ + slots?: { + root?: React.ElementType; + }; +} + +export interface ListItemTypeMap { + props: AdditionalProps & ListItemOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/ListItemButton/ListItemButton.d.ts b/packages/mui-material/src/ListItemButton/ListItemButton.d.ts index 26d3addf58f8c4..9172789eaa7ea1 100644 --- a/packages/mui-material/src/ListItemButton/ListItemButton.d.ts +++ b/packages/mui-material/src/ListItemButton/ListItemButton.d.ts @@ -5,6 +5,10 @@ import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; import { ListItemButtonClasses } from './listItemButtonClasses'; +/** + * This interface is kept for backward compatibility. To extend `LitItemButton` + * props through module augmentation, use `ListItemButtonOwnProps`. + */ export interface ListItemButtonBaseProps { /** * Defines the `align-items` style property. @@ -58,12 +62,14 @@ export interface ListItemButtonBaseProps { sx?: SxProps; } +export interface ListItemButtonOwnProps extends ListItemButtonBaseProps {} + export type ListItemButtonTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > = ExtendButtonBaseTypeMap<{ - props: AdditionalProps & ListItemButtonBaseProps; - defaultComponent: DefaultComponent; + props: AdditionalProps & ListItemButtonOwnProps; + defaultComponent: RootComponent; }>; /** diff --git a/packages/mui-material/src/ListSubheader/ListSubheader.d.ts b/packages/mui-material/src/ListSubheader/ListSubheader.d.ts index 4c2d8f9f678b4e..266cfab7118953 100644 --- a/packages/mui-material/src/ListSubheader/ListSubheader.d.ts +++ b/packages/mui-material/src/ListSubheader/ListSubheader.d.ts @@ -4,45 +4,47 @@ import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { ListSubheaderClasses } from './listSubheaderClasses'; +export interface ListSubheaderOwnProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The color of the component. It supports those theme colors that make sense for this component. + * @default 'default' + */ + color?: 'default' | 'primary' | 'inherit'; + /** + * If `true`, the List Subheader will not have gutters. + * @default false + */ + disableGutters?: boolean; + /** + * If `true`, the List Subheader will not stick to the top during scroll. + * @default false + */ + disableSticky?: boolean; + /** + * If `true`, the List Subheader is indented. + * @default false + */ + inset?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface ListSubheaderTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'li', + RootComponent extends React.ElementType = 'li', > { - props: AdditionalProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The color of the component. It supports those theme colors that make sense for this component. - * @default 'default' - */ - color?: 'default' | 'primary' | 'inherit'; - /** - * If `true`, the List Subheader will not have gutters. - * @default false - */ - disableGutters?: boolean; - /** - * If `true`, the List Subheader will not stick to the top during scroll. - * @default false - */ - disableSticky?: boolean; - /** - * If `true`, the List Subheader is indented. - * @default false - */ - inset?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & ListSubheaderOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/MenuItem/MenuItem.d.ts b/packages/mui-material/src/MenuItem/MenuItem.d.ts index b5395edad7c0a1..76f2fe665f8070 100644 --- a/packages/mui-material/src/MenuItem/MenuItem.d.ts +++ b/packages/mui-material/src/MenuItem/MenuItem.d.ts @@ -1,56 +1,59 @@ +import * as React from 'react'; import { SxProps } from '@mui/system'; import { Theme } from '../styles'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; import { MenuItemClasses } from './menuItemClasses'; +export interface MenuItemOwnProps { + /** + * If `true`, the list item is focused during the first mount. + * Focus will also be triggered if the value changes from false to true. + * @default false + */ + autoFocus?: boolean; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, compact vertical padding designed for keyboard and mouse input is used. + * The prop defaults to the value inherited from the parent Menu component. + * @default false + */ + dense?: boolean; + /** + * If `true`, the component is disabled. + * @default false + */ + disabled?: boolean; + /** + * If `true`, the left and right padding is removed. + * @default false + */ + disableGutters?: boolean; + /** + * If `true`, a 1px light border is added to the bottom of the menu item. + * @default false + */ + divider?: boolean; + /** + * If `true`, the component is selected. + * @default false + */ + selected?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export type MenuItemTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'li', + RootComponent extends React.ElementType = 'li', > = ExtendButtonBaseTypeMap<{ - props: AdditionalProps & { - /** - * If `true`, the list item is focused during the first mount. - * Focus will also be triggered if the value changes from false to true. - * @default false - */ - autoFocus?: boolean; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * If `true`, compact vertical padding designed for keyboard and mouse input is used. - * The prop defaults to the value inherited from the parent Menu component. - * @default false - */ - dense?: boolean; - /** - * If `true`, the component is disabled. - * @default false - */ - disabled?: boolean; - /** - * If `true`, the left and right padding is removed. - * @default false - */ - disableGutters?: boolean; - /** - * If `true`, a 1px light border is added to the bottom of the menu item. - * @default false - */ - divider?: boolean; - /** - * If `true`, the component is selected. - * @default false - */ - selected?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & MenuItemOwnProps; + defaultComponent: RootComponent; }>; /** diff --git a/packages/mui-material/src/MenuList/MenuList.d.ts b/packages/mui-material/src/MenuList/MenuList.d.ts index 19ff9906bcb237..f177efc71b9cb6 100644 --- a/packages/mui-material/src/MenuList/MenuList.d.ts +++ b/packages/mui-material/src/MenuList/MenuList.d.ts @@ -2,44 +2,46 @@ import * as React from 'react'; import { ExtendList, ExtendListTypeMap } from '../List'; import { OverrideProps } from '../OverridableComponent'; +export interface MenuListOwnProps { + /** + * If `true`, will focus the `[role="menu"]` container and move into tab order. + * @default false + */ + autoFocus?: boolean; + /** + * If `true`, will focus the first menuitem if `variant="menu"` or selected item + * if `variant="selectedMenu"`. + * @default false + */ + autoFocusItem?: boolean; + /** + * MenuList contents, normally `MenuItem`s. + */ + children?: React.ReactNode; + /** + * If `true`, will allow focus on disabled items. + * @default false + */ + disabledItemsFocusable?: boolean; + /** + * If `true`, the menu items will not wrap focus. + * @default false + */ + disableListWrap?: boolean; + /** + * The variant to use. Use `menu` to prevent selected items from impacting the initial focus + * and the vertical alignment relative to the anchor element. + * @default 'selectedMenu' + */ + variant?: 'menu' | 'selectedMenu'; +} + export type MenuListTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'ul', + RootComponent extends React.ElementType = 'ul', > = ExtendListTypeMap<{ - props: AdditionalProps & { - /** - * If `true`, will focus the `[role="menu"]` container and move into tab order. - * @default false - */ - autoFocus?: boolean; - /** - * If `true`, will focus the first menuitem if `variant="menu"` or selected item - * if `variant="selectedMenu"`. - * @default false - */ - autoFocusItem?: boolean; - /** - * MenuList contents, normally `MenuItem`s. - */ - children?: React.ReactNode; - /** - * If `true`, will allow focus on disabled items. - * @default false - */ - disabledItemsFocusable?: boolean; - /** - * If `true`, the menu items will not wrap focus. - * @default false - */ - disableListWrap?: boolean; - /** - * The variant to use. Use `menu` to prevent selected items from impacting the initial focus - * and the vertical alignment relative to the anchor element. - * @default 'selectedMenu' - */ - variant?: 'menu' | 'selectedMenu'; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & MenuListOwnProps; + defaultComponent: RootComponent; }>; export type MenuListClassKey = keyof NonNullable; diff --git a/packages/mui-material/src/Modal/Modal.d.ts b/packages/mui-material/src/Modal/Modal.d.ts index d0eeb3286f8ccf..db21682663aae2 100644 --- a/packages/mui-material/src/Modal/Modal.d.ts +++ b/packages/mui-material/src/Modal/Modal.d.ts @@ -26,187 +26,181 @@ export interface ModalSlots { backdrop?: React.ElementType; } +export interface ModalOwnProps { + /** + * A backdrop component. This prop enables custom backdrop rendering. + * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version. + * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI. + * @default styled(Backdrop, { + * name: 'MuiModal', + * slot: 'Backdrop', + * overridesResolver: (props, styles) => { + * return styles.backdrop; + * }, + * })({ + * zIndex: -1, + * }) + */ + BackdropComponent?: React.ElementType; + /** + * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element. + * @deprecated Use `slotProps.backdrop` instead. + */ + BackdropProps?: Partial; + /** + * A single child content element. + */ + children: React.ReactElement; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * @ignore + */ + className?: string; + /** + * When set to true the Modal waits until a nested Transition is completed before closing. + * @default false + */ + closeAfterTransition?: boolean; + /** + * The components used for each slot inside. + * + * This prop is an alias for the `slots` prop. + * It's recommended to use the `slots` prop instead. + * + * @default {} + */ + components?: { + Root?: React.ElementType; + Backdrop?: React.ElementType; + }; + /** + * The extra props for the slot components. + * You can override the existing props or add new ones. + * + * This prop is an alias for the `slotProps` prop. + * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. + * + * @default {} + */ + componentsProps?: { + root?: SlotComponentProps<'div', ModalComponentsPropsOverrides, ModalOwnerState>; + backdrop?: SlotComponentProps; + }; + /** + * An HTML element or function that returns one. + * The `container` will have the portal children appended to it. + * + * By default, it uses the body of the top-level document object, + * so it's simply `document.body` most of the time. + */ + container?: PortalProps['container']; + /** + * If `true`, the modal will not automatically shift focus to itself when it opens, and + * replace it to the last focused element when it closes. + * This also works correctly with any modal children that have the `disableAutoFocus` prop. + * + * Generally this should never be set to `true` as it makes the modal less + * accessible to assistive technologies, like screen readers. + * @default false + */ + disableAutoFocus?: boolean; + /** + * If `true`, the modal will not prevent focus from leaving the modal while open. + * + * Generally this should never be set to `true` as it makes the modal less + * accessible to assistive technologies, like screen readers. + * @default false + */ + disableEnforceFocus?: boolean; + /** + * If `true`, hitting escape will not fire the `onClose` callback. + * @default false + */ + disableEscapeKeyDown?: boolean; + /** + * The `children` will be under the DOM hierarchy of the parent component. + * @default false + */ + disablePortal?: PortalProps['disablePortal']; + /** + * If `true`, the modal will not restore focus to previously focused element once + * modal is hidden or unmounted. + * @default false + */ + disableRestoreFocus?: boolean; + /** + * Disable the scroll lock behavior. + * @default false + */ + disableScrollLock?: boolean; + /** + * If `true`, the backdrop is not rendered. + * @default false + */ + hideBackdrop?: boolean; + /** + * Always keep the children in the DOM. + * This prop can be useful in SEO situation or + * when you want to maximize the responsiveness of the Modal. + * @default false + */ + keepMounted?: boolean; + /** + * Callback fired when the backdrop is clicked. + * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events. + */ + onBackdropClick?: React.ReactEventHandler<{}>; + /** + * Callback fired when the component requests to be closed. + * The `reason` parameter can optionally be used to control the response to `onClose`. + * + * @param {object} event The event source of the callback. + * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`. + */ + onClose?: { + bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void; + }['bivarianceHack']; + /** + * A function called when a transition enters. + */ + onTransitionEnter?: () => void; + /** + * A function called when a transition has exited. + */ + onTransitionExited?: () => void; + /** + * If `true`, the component is shown. + */ + open: boolean; + /** + * The components used for each slot inside the Modal. + * Either a string to use a HTML element or a component. + * @default {} + */ + slots?: ModalSlots; + /** + * The props used for each slot inside the Modal. + * @default {} + */ + slotProps?: { + root?: SlotComponentProps<'div', ModalComponentsPropsOverrides, ModalOwnerState>; + backdrop?: SlotComponentProps; + }; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface ModalTypeMap< - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', AdditionalProps = {}, > { - props: AdditionalProps & { - /** - * A backdrop component. This prop enables custom backdrop rendering. - * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version. - * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI. - * @default styled(Backdrop, { - * name: 'MuiModal', - * slot: 'Backdrop', - * overridesResolver: (props, styles) => { - * return styles.backdrop; - * }, - * })({ - * zIndex: -1, - * }) - */ - BackdropComponent?: React.ElementType; - /** - * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element. - * @deprecated Use `slotProps.backdrop` instead. - */ - BackdropProps?: Partial; - /** - * A single child content element. - */ - children: React.ReactElement; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * @ignore - */ - className?: string; - /** - * When set to true the Modal waits until a nested Transition is completed before closing. - * @default false - */ - closeAfterTransition?: boolean; - /** - * The components used for each slot inside. - * - * This prop is an alias for the `slots` prop. - * It's recommended to use the `slots` prop instead. - * - * @default {} - */ - components?: { - Root?: React.ElementType; - Backdrop?: React.ElementType; - }; - /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * - * This prop is an alias for the `slotProps` prop. - * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. - * - * @default {} - */ - componentsProps?: { - root?: SlotComponentProps<'div', ModalComponentsPropsOverrides, ModalOwnerState>; - backdrop?: SlotComponentProps< - typeof Backdrop, - ModalComponentsPropsOverrides, - ModalOwnerState - >; - }; - /** - * An HTML element or function that returns one. - * The `container` will have the portal children appended to it. - * - * By default, it uses the body of the top-level document object, - * so it's simply `document.body` most of the time. - */ - container?: PortalProps['container']; - /** - * If `true`, the modal will not automatically shift focus to itself when it opens, and - * replace it to the last focused element when it closes. - * This also works correctly with any modal children that have the `disableAutoFocus` prop. - * - * Generally this should never be set to `true` as it makes the modal less - * accessible to assistive technologies, like screen readers. - * @default false - */ - disableAutoFocus?: boolean; - /** - * If `true`, the modal will not prevent focus from leaving the modal while open. - * - * Generally this should never be set to `true` as it makes the modal less - * accessible to assistive technologies, like screen readers. - * @default false - */ - disableEnforceFocus?: boolean; - /** - * If `true`, hitting escape will not fire the `onClose` callback. - * @default false - */ - disableEscapeKeyDown?: boolean; - /** - * The `children` will be under the DOM hierarchy of the parent component. - * @default false - */ - disablePortal?: PortalProps['disablePortal']; - /** - * If `true`, the modal will not restore focus to previously focused element once - * modal is hidden or unmounted. - * @default false - */ - disableRestoreFocus?: boolean; - /** - * Disable the scroll lock behavior. - * @default false - */ - disableScrollLock?: boolean; - /** - * If `true`, the backdrop is not rendered. - * @default false - */ - hideBackdrop?: boolean; - /** - * Always keep the children in the DOM. - * This prop can be useful in SEO situation or - * when you want to maximize the responsiveness of the Modal. - * @default false - */ - keepMounted?: boolean; - /** - * Callback fired when the backdrop is clicked. - * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events. - */ - onBackdropClick?: React.ReactEventHandler<{}>; - /** - * Callback fired when the component requests to be closed. - * The `reason` parameter can optionally be used to control the response to `onClose`. - * - * @param {object} event The event source of the callback. - * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`. - */ - onClose?: { - bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void; - }['bivarianceHack']; - /** - * A function called when a transition enters. - */ - onTransitionEnter?: () => void; - /** - * A function called when a transition has exited. - */ - onTransitionExited?: () => void; - /** - * If `true`, the component is shown. - */ - open: boolean; - /** - * The components used for each slot inside the Modal. - * Either a string to use a HTML element or a component. - * @default {} - */ - slots?: ModalSlots; - /** - * The props used for each slot inside the Modal. - * @default {} - */ - slotProps?: { - root?: SlotComponentProps<'div', ModalComponentsPropsOverrides, ModalOwnerState>; - backdrop?: SlotComponentProps< - typeof Backdrop, - ModalComponentsPropsOverrides, - ModalOwnerState - >; - }; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & ModalOwnProps; + defaultComponent: RootComponent; } type ModalRootProps = NonNullable['root']; diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.d.ts b/packages/mui-material/src/PaginationItem/PaginationItem.d.ts index 9a3b0b79f0e619..36e628047c209c 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.d.ts +++ b/packages/mui-material/src/PaginationItem/PaginationItem.d.ts @@ -12,92 +12,94 @@ export interface PaginationItemPropsSizeOverrides {} export interface PaginationItemPropsColorOverrides {} +export interface PaginationItemOwnProps { + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The active color. + * It supports both default and custom theme colors, which can be added as shown in the + * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * @default 'standard' + */ + color?: OverridableStringUnion< + 'standard' | 'primary' | 'secondary', + PaginationItemPropsColorOverrides + >; + /** + * The components used for each slot inside. + * + * This prop is an alias for the `slots` prop. + * It's recommended to use the `slots` prop instead. + * + * @default {} + */ + components?: { + first?: React.ElementType; + last?: React.ElementType; + next?: React.ElementType; + previous?: React.ElementType; + }; + /** + * If `true`, the component is disabled. + * @default false + */ + disabled?: boolean; + /** + * The current page number. + */ + page?: React.ReactNode; + /** + * If `true` the pagination item is selected. + * @default false + */ + selected?: boolean; + /** + * The shape of the pagination item. + * @default 'circular' + */ + shape?: 'circular' | 'rounded'; + /** + * The size of the component. + * @default 'medium' + */ + size?: OverridableStringUnion<'small' | 'medium' | 'large', PaginationItemPropsSizeOverrides>; + /** + * The components used for each slot inside. + * + * This prop is an alias for the `components` prop, which will be deprecated in the future. + * + * @default {} + */ + slots?: { + first?: React.ElementType; + last?: React.ElementType; + next?: React.ElementType; + previous?: React.ElementType; + }; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * The type of pagination item. + * @default 'page' + */ + type?: UsePaginationItem['type']; + /** + * The variant to use. + * @default 'text' + */ + variant?: OverridableStringUnion<'text' | 'outlined', PaginationItemPropsVariantOverrides>; +} + export interface PaginationItemTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & { - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The active color. - * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). - * @default 'standard' - */ - color?: OverridableStringUnion< - 'standard' | 'primary' | 'secondary', - PaginationItemPropsColorOverrides - >; - /** - * The components used for each slot inside. - * - * This prop is an alias for the `slots` prop. - * It's recommended to use the `slots` prop instead. - * - * @default {} - */ - components?: { - first?: React.ElementType; - last?: React.ElementType; - next?: React.ElementType; - previous?: React.ElementType; - }; - /** - * If `true`, the component is disabled. - * @default false - */ - disabled?: boolean; - /** - * The current page number. - */ - page?: React.ReactNode; - /** - * If `true` the pagination item is selected. - * @default false - */ - selected?: boolean; - /** - * The shape of the pagination item. - * @default 'circular' - */ - shape?: 'circular' | 'rounded'; - /** - * The size of the component. - * @default 'medium' - */ - size?: OverridableStringUnion<'small' | 'medium' | 'large', PaginationItemPropsSizeOverrides>; - /** - * The components used for each slot inside. - * - * This prop is an alias for the `components` prop, which will be deprecated in the future. - * - * @default {} - */ - slots?: { - first?: React.ElementType; - last?: React.ElementType; - next?: React.ElementType; - previous?: React.ElementType; - }; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * The type of pagination item. - * @default 'page' - */ - type?: UsePaginationItem['type']; - /** - * The variant to use. - * @default 'text' - */ - variant?: OverridableStringUnion<'text' | 'outlined', PaginationItemPropsVariantOverrides>; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & PaginationItemOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/Paper/Paper.d.ts b/packages/mui-material/src/Paper/Paper.d.ts index 79f83abe781a23..4c35061f6e3395 100644 --- a/packages/mui-material/src/Paper/Paper.d.ts +++ b/packages/mui-material/src/Paper/Paper.d.ts @@ -40,10 +40,10 @@ export interface PaperOwnProps { export interface PaperTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { props: AdditionalProps & PaperOwnProps; - defaultComponent: DefaultComponent; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts index 4a6844a67e5483..d4224ff66fefea 100644 --- a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts +++ b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.d.ts @@ -1,34 +1,36 @@ -import { SxProps } from '@mui/system'; import * as React from 'react'; +import { SxProps } from '@mui/system'; import { Theme } from '../styles'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { ScopedCssBaselineClasses } from './scopedCssBaselineClasses'; +export interface ScopedCssBaselineOwnProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * Enable `color-scheme` CSS property to use `theme.palette.mode`. + * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme + * For browser support, check out https://caniuse.com/?search=color-scheme + */ + enableColorScheme?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface ScopedCssBaselineTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * Enable `color-scheme` CSS property to use `theme.palette.mode`. - * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme - * For browser support, check out https://caniuse.com/?search=color-scheme - */ - enableColorScheme?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & ScopedCssBaselineOwnProps; + defaultComponent: RootComponent; } /** * diff --git a/packages/mui-material/src/Skeleton/Skeleton.d.ts b/packages/mui-material/src/Skeleton/Skeleton.d.ts index d9d23fa1b4ef71..1d4e9eda13c324 100644 --- a/packages/mui-material/src/Skeleton/Skeleton.d.ts +++ b/packages/mui-material/src/Skeleton/Skeleton.d.ts @@ -7,49 +7,51 @@ import { SkeletonClasses } from './skeletonClasses'; export interface SkeletonPropsVariantOverrides {} +export interface SkeletonOwnProps { + /** + * The animation. + * If `false` the animation effect is disabled. + * @default 'pulse' + */ + animation?: 'pulse' | 'wave' | false; + /** + * Optional children to infer width and height from. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * Height of the skeleton. + * Useful when you don't want to adapt the skeleton to a text element but for instance a card. + */ + height?: number | string; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * The type of content that will be rendered. + * @default 'text' + */ + variant?: OverridableStringUnion< + 'text' | 'rectangular' | 'rounded' | 'circular', + SkeletonPropsVariantOverrides + >; + /** + * Width of the skeleton. + * Useful when the skeleton is inside an inline element with no width of its own. + */ + width?: number | string; +} + export interface SkeletonTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'span', + RootComponent extends React.ElementType = 'span', > { - props: AdditionalProps & { - /** - * The animation. - * If `false` the animation effect is disabled. - * @default 'pulse' - */ - animation?: 'pulse' | 'wave' | false; - /** - * Optional children to infer width and height from. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * Height of the skeleton. - * Useful when you don't want to adapt the skeleton to a text element but for instance a card. - */ - height?: number | string; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * The type of content that will be rendered. - * @default 'text' - */ - variant?: OverridableStringUnion< - 'text' | 'rectangular' | 'rounded' | 'circular', - SkeletonPropsVariantOverrides - >; - /** - * Width of the skeleton. - * Useful when the skeleton is inside an inline element with no width of its own. - */ - width?: number | string; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & SkeletonOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts index 4ed6f79fa92dea..88f8fa340cc0e4 100644 --- a/packages/mui-material/src/Slider/Slider.d.ts +++ b/packages/mui-material/src/Slider/Slider.d.ts @@ -20,256 +20,258 @@ export interface SliderOwnerState extends SliderProps { focusedThumbIndex: number; } +export interface SliderOwnProps { + /** + * The label of the slider. + */ + 'aria-label'?: string; + /** + * The id of the element containing a label for the slider. + */ + 'aria-labelledby'?: string; + /** + * A string value that provides a user-friendly name for the current value of the slider. + */ + 'aria-valuetext'?: string; + /** + * The color of the component. + * It supports both default and custom theme colors, which can be added as shown in the + * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * @default 'primary' + */ + color?: OverridableStringUnion<'primary' | 'secondary', SliderPropsColorOverrides>; + /** + * The components used for each slot inside. + * + * This prop is an alias for the `slots` prop. + * It's recommended to use the `slots` prop instead. + * + * @default {} + */ + components?: { + Root?: React.ElementType; + Track?: React.ElementType; + Rail?: React.ElementType; + Thumb?: React.ElementType; + Mark?: React.ElementType; + MarkLabel?: React.ElementType; + ValueLabel?: React.ElementType; + Input?: React.ElementType; + }; + /** + * The extra props for the slot components. + * You can override the existing props or add new ones. + * + * This prop is an alias for the `slotProps` prop. + * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. + * + * @default {} + */ + componentsProps?: { + root?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; + track?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; + rail?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; + thumb?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; + mark?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; + markLabel?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; + valueLabel?: SlotComponentProps< + typeof SliderValueLabelComponent, + SliderComponentsPropsOverrides, + SliderOwnerState + >; + input?: SlotComponentProps<'input', SliderComponentsPropsOverrides, SliderOwnerState>; + }; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * @ignore + */ + className?: string; + /** + * The default value. Use when the component is not controlled. + */ + defaultValue?: number | number[]; + /** + * If `true`, the component is disabled. + * @default false + */ + disabled?: boolean; + /** + * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb. + * @default false + */ + disableSwap?: boolean; + /** + * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. + * This is important for screen reader users. + * @param {number} index The thumb label's index to format. + * @returns {string} + */ + getAriaLabel?: (index: number) => string; + /** + * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. + * This is important for screen reader users. + * @param {number} value The thumb label's value to format. + * @param {number} index The thumb label's index to format. + * @returns {string} + */ + getAriaValueText?: (value: number, index: number) => string; + /** + * Marks indicate predetermined values to which the user can move the slider. + * If `true` the marks are spaced according the value of the `step` prop. + * If an array, it should contain objects with `value` and an optional `label` keys. + * @default false + */ + marks?: boolean | Mark[]; + /** + * The maximum allowed value of the slider. + * Should not be equal to min. + * @default 100 + */ + max?: number; + /** + * The minimum allowed value of the slider. + * Should not be equal to max. + * @default 0 + */ + min?: number; + /** + * Name attribute of the hidden `input` element. + */ + name?: string; + /** + * Callback function that is fired when the slider's value changed. + * + * @param {Event} event The event source of the callback. + * You can pull out the new value by accessing `event.target.value` (any). + * **Warning**: This is a generic event not a change event. + * @param {number | number[]} value The new value. + * @param {number} activeThumb Index of the currently moved thumb. + */ + onChange?: (event: Event, value: number | number[], activeThumb: number) => void; + /** + * Callback function that is fired when the `mouseup` is triggered. + * + * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event. + * @param {number | number[]} value The new value. + */ + onChangeCommitted?: (event: React.SyntheticEvent | Event, value: number | number[]) => void; + /** + * The component orientation. + * @default 'horizontal' + */ + orientation?: 'horizontal' | 'vertical'; + /** + * A transformation function, to change the scale of the slider. + * @param {any} x + * @returns {any} + * @default function Identity(x) { + * return x; + * } + */ + scale?: (value: number) => number; + /** + * The size of the slider. + * @default 'medium' + */ + size?: OverridableStringUnion<'small' | 'medium', SliderPropsSizeOverrides>; + /** + * The props used for each slot inside the Slider. + * @default {} + */ + slotProps?: { + root?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; + track?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; + rail?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; + thumb?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; + mark?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; + markLabel?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; + valueLabel?: SlotComponentProps< + typeof SliderValueLabelComponent, + SliderComponentsPropsOverrides, + SliderOwnerState + >; + input?: SlotComponentProps<'input', SliderComponentsPropsOverrides, SliderOwnerState>; + }; + /** + * The components used for each slot inside the Slider. + * Either a string to use a HTML element or a component. + * @default {} + */ + slots?: { + root?: React.ElementType; + track?: React.ElementType; + rail?: React.ElementType; + thumb?: React.ElementType; + mark?: React.ElementType; + markLabel?: React.ElementType; + valueLabel?: React.ElementType; + input?: React.ElementType; + }; + /** + * The granularity with which the slider can step through values. (A "discrete" slider.) + * The `min` prop serves as the origin for the valid values. + * We recommend (max - min) to be evenly divisible by the step. + * + * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. + * @default 1 + */ + step?: number | null; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * Tab index attribute of the hidden `input` element. + */ + tabIndex?: number; + /** + * The track presentation: + * + * - `normal` the track will render a bar representing the slider value. + * - `inverted` the track will render a bar representing the remaining slider value. + * - `false` the track will render without a bar. + * @default 'normal' + */ + track?: 'normal' | false | 'inverted'; + /** + * The value of the slider. + * For ranged sliders, provide an array with two values. + */ + value?: number | number[]; + /** + * Controls when the value label is displayed: + * + * - `auto` the value label will display when the thumb is hovered or focused. + * - `on` will display persistently. + * - `off` will never display. + * @default 'off' + */ + valueLabelDisplay?: 'on' | 'auto' | 'off'; + /** + * The format function the value label's value. + * + * When a function is provided, it should have the following signature: + * + * - {number} value The value label's value to format + * - {number} index The value label's index to format + * @param {any} x + * @returns {any} + * @default function Identity(x) { + * return x; + * } + */ + valueLabelFormat?: string | ((value: number, index: number) => React.ReactNode); +} + export interface SliderTypeMap< - DefaultComponent extends React.ElementType = 'span', + RootComponent extends React.ElementType = 'span', AdditionalProps = {}, > { - props: AdditionalProps & { - /** - * The label of the slider. - */ - 'aria-label'?: string; - /** - * The id of the element containing a label for the slider. - */ - 'aria-labelledby'?: string; - /** - * A string value that provides a user-friendly name for the current value of the slider. - */ - 'aria-valuetext'?: string; - /** - * The color of the component. - * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). - * @default 'primary' - */ - color?: OverridableStringUnion<'primary' | 'secondary', SliderPropsColorOverrides>; - /** - * The components used for each slot inside. - * - * This prop is an alias for the `slots` prop. - * It's recommended to use the `slots` prop instead. - * - * @default {} - */ - components?: { - Root?: React.ElementType; - Track?: React.ElementType; - Rail?: React.ElementType; - Thumb?: React.ElementType; - Mark?: React.ElementType; - MarkLabel?: React.ElementType; - ValueLabel?: React.ElementType; - Input?: React.ElementType; - }; - /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * - * This prop is an alias for the `slotProps` prop. - * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future. - * - * @default {} - */ - componentsProps?: { - root?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; - track?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; - rail?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; - thumb?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; - mark?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; - markLabel?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; - valueLabel?: SlotComponentProps< - typeof SliderValueLabelComponent, - SliderComponentsPropsOverrides, - SliderOwnerState - >; - input?: SlotComponentProps<'input', SliderComponentsPropsOverrides, SliderOwnerState>; - }; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * @ignore - */ - className?: string; - /** - * The default value. Use when the component is not controlled. - */ - defaultValue?: number | number[]; - /** - * If `true`, the component is disabled. - * @default false - */ - disabled?: boolean; - /** - * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb. - * @default false - */ - disableSwap?: boolean; - /** - * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. - * This is important for screen reader users. - * @param {number} index The thumb label's index to format. - * @returns {string} - */ - getAriaLabel?: (index: number) => string; - /** - * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. - * This is important for screen reader users. - * @param {number} value The thumb label's value to format. - * @param {number} index The thumb label's index to format. - * @returns {string} - */ - getAriaValueText?: (value: number, index: number) => string; - /** - * Marks indicate predetermined values to which the user can move the slider. - * If `true` the marks are spaced according the value of the `step` prop. - * If an array, it should contain objects with `value` and an optional `label` keys. - * @default false - */ - marks?: boolean | Mark[]; - /** - * The maximum allowed value of the slider. - * Should not be equal to min. - * @default 100 - */ - max?: number; - /** - * The minimum allowed value of the slider. - * Should not be equal to max. - * @default 0 - */ - min?: number; - /** - * Name attribute of the hidden `input` element. - */ - name?: string; - /** - * Callback function that is fired when the slider's value changed. - * - * @param {Event} event The event source of the callback. - * You can pull out the new value by accessing `event.target.value` (any). - * **Warning**: This is a generic event not a change event. - * @param {number | number[]} value The new value. - * @param {number} activeThumb Index of the currently moved thumb. - */ - onChange?: (event: Event, value: number | number[], activeThumb: number) => void; - /** - * Callback function that is fired when the `mouseup` is triggered. - * - * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event. - * @param {number | number[]} value The new value. - */ - onChangeCommitted?: (event: React.SyntheticEvent | Event, value: number | number[]) => void; - /** - * The component orientation. - * @default 'horizontal' - */ - orientation?: 'horizontal' | 'vertical'; - /** - * A transformation function, to change the scale of the slider. - * @param {any} x - * @returns {any} - * @default function Identity(x) { - * return x; - * } - */ - scale?: (value: number) => number; - /** - * The size of the slider. - * @default 'medium' - */ - size?: OverridableStringUnion<'small' | 'medium', SliderPropsSizeOverrides>; - /** - * The props used for each slot inside the Slider. - * @default {} - */ - slotProps?: { - root?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; - track?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; - rail?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; - thumb?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; - mark?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; - markLabel?: SlotComponentProps<'span', SliderComponentsPropsOverrides, SliderOwnerState>; - valueLabel?: SlotComponentProps< - typeof SliderValueLabelComponent, - SliderComponentsPropsOverrides, - SliderOwnerState - >; - input?: SlotComponentProps<'input', SliderComponentsPropsOverrides, SliderOwnerState>; - }; - /** - * The components used for each slot inside the Slider. - * Either a string to use a HTML element or a component. - * @default {} - */ - slots?: { - root?: React.ElementType; - track?: React.ElementType; - rail?: React.ElementType; - thumb?: React.ElementType; - mark?: React.ElementType; - markLabel?: React.ElementType; - valueLabel?: React.ElementType; - input?: React.ElementType; - }; - /** - * The granularity with which the slider can step through values. (A "discrete" slider.) - * The `min` prop serves as the origin for the valid values. - * We recommend (max - min) to be evenly divisible by the step. - * - * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. - * @default 1 - */ - step?: number | null; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * Tab index attribute of the hidden `input` element. - */ - tabIndex?: number; - /** - * The track presentation: - * - * - `normal` the track will render a bar representing the slider value. - * - `inverted` the track will render a bar representing the remaining slider value. - * - `false` the track will render without a bar. - * @default 'normal' - */ - track?: 'normal' | false | 'inverted'; - /** - * The value of the slider. - * For ranged sliders, provide an array with two values. - */ - value?: number | number[]; - /** - * Controls when the value label is displayed: - * - * - `auto` the value label will display when the thumb is hovered or focused. - * - `on` will display persistently. - * - `off` will never display. - * @default 'off' - */ - valueLabelDisplay?: 'on' | 'auto' | 'off'; - /** - * The format function the value label's value. - * - * When a function is provided, it should have the following signature: - * - * - {number} value The value label's value to format - * - {number} index The value label's index to format - * @param {any} x - * @returns {any} - * @default function Identity(x) { - * return x; - * } - */ - valueLabelFormat?: string | ((value: number, index: number) => React.ReactNode); - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & SliderOwnProps; + defaultComponent: RootComponent; } export interface SliderValueLabelProps extends React.HTMLAttributes { diff --git a/packages/mui-material/src/Stack/Stack.d.ts b/packages/mui-material/src/Stack/Stack.d.ts index d0dfc9e4ad2f18..fe13177c0b0aae 100644 --- a/packages/mui-material/src/Stack/Stack.d.ts +++ b/packages/mui-material/src/Stack/Stack.d.ts @@ -3,47 +3,48 @@ import { ResponsiveStyleValue, SxProps, SystemProps } from '@mui/system'; import { OverrideProps, OverridableComponent } from '../OverridableComponent'; import { Theme } from '../styles/createTheme'; +export interface StackOwnProps extends SystemProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Defines the `flex-direction` style property. + * It is applied for all screen sizes. + * @default 'column' + */ + direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>; + /** + * Defines the space between immediate children. + * @default 0 + */ + spacing?: ResponsiveStyleValue; + /** + * Add an element between each child. + */ + divider?: React.ReactNode; + /** + * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children. + * + * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations), + * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag. + * + * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration. + * @default false + */ + useFlexGap?: boolean; + /** + * The system prop, which allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface StackTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & - SystemProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Defines the `flex-direction` style property. - * It is applied for all screen sizes. - * @default 'column' - */ - direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>; - /** - * Defines the space between immediate children. - * @default 0 - */ - spacing?: ResponsiveStyleValue; - /** - * Add an element between each child. - */ - divider?: React.ReactNode; - /** - * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children. - * - * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations), - * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag. - * - * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration. - * @default false - */ - useFlexGap?: boolean; - /** - * The system prop, which allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & StackOwnProps; + defaultComponent: RootComponent; } /** * diff --git a/packages/mui-material/src/Step/Step.d.ts b/packages/mui-material/src/Step/Step.d.ts index 3effa7598ebb09..ccb6f1044ff242 100644 --- a/packages/mui-material/src/Step/Step.d.ts +++ b/packages/mui-material/src/Step/Step.d.ts @@ -4,53 +4,55 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { Theme } from '../styles'; import { StepClasses } from './stepClasses'; +export interface StepOwnProps { + /** + * Sets the step as active. Is passed to child components. + */ + active?: boolean; + /** + * Should be `Step` sub-components such as `StepLabel`, `StepContent`. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * Mark the step as completed. Is passed to child components. + */ + completed?: boolean; + /** + * If `true`, the step is disabled, will also disable the button if + * `StepButton` is a child of `Step`. Is passed to child components. + */ + disabled?: boolean; + /** + * Expand the step. + * @default false + */ + expanded?: boolean; + /** + * The position of the step. + * The prop defaults to the value inherited from the parent Stepper component. + */ + index?: number; + /** + * If `true`, the Step is displayed as rendered last. + * The prop defaults to the value inherited from the parent Stepper component. + */ + last?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface StepTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & { - /** - * Sets the step as active. Is passed to child components. - */ - active?: boolean; - /** - * Should be `Step` sub-components such as `StepLabel`, `StepContent`. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * Mark the step as completed. Is passed to child components. - */ - completed?: boolean; - /** - * If `true`, the step is disabled, will also disable the button if - * `StepButton` is a child of `Step`. Is passed to child components. - */ - disabled?: boolean; - /** - * Expand the step. - * @default false - */ - expanded?: boolean; - /** - * The position of the step. - * The prop defaults to the value inherited from the parent Stepper component. - */ - index?: number; - /** - * If `true`, the Step is displayed as rendered last. - * The prop defaults to the value inherited from the parent Stepper component. - */ - last?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & StepOwnProps; + defaultComponent: RootComponent; } export type StepProps< diff --git a/packages/mui-material/src/StepButton/StepButton.d.ts b/packages/mui-material/src/StepButton/StepButton.d.ts index 6cf99d0d9541e2..e5593d63872cc2 100644 --- a/packages/mui-material/src/StepButton/StepButton.d.ts +++ b/packages/mui-material/src/StepButton/StepButton.d.ts @@ -6,37 +6,39 @@ import { Theme } from '../styles'; import { StepButtonClasses } from './stepButtonClasses'; /** - * @deprecated use `StepButtonProps['icon']` instead + * @deprecated use `StepButtonProps['icon']` instead. */ export type StepButtonIcon = React.ReactNode; +export interface StepButtonOwnProps { + /** + * Can be a `StepLabel` or a node to place inside `StepLabel` as children. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The icon displayed by the step label. + */ + icon?: React.ReactNode; + /** + * The optional node to display. + */ + optional?: React.ReactNode; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export type StepButtonTypeMap< AdditionalProps, - DefaultComponent extends React.ElementType, + RootComponent extends React.ElementType, > = ExtendButtonBaseTypeMap<{ - props: AdditionalProps & { - /** - * Can be a `StepLabel` or a node to place inside `StepLabel` as children. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The icon displayed by the step label. - */ - icon?: React.ReactNode; - /** - * The optional node to display. - */ - optional?: React.ReactNode; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & StepButtonOwnProps; + defaultComponent: RootComponent; ignoredProps: 'disabled'; }>; diff --git a/packages/mui-material/src/Stepper/Stepper.d.ts b/packages/mui-material/src/Stepper/Stepper.d.ts index 004f4d1c789a1b..05ed67c67e8662 100644 --- a/packages/mui-material/src/Stepper/Stepper.d.ts +++ b/packages/mui-material/src/Stepper/Stepper.d.ts @@ -7,53 +7,54 @@ import { StepperClasses } from './stepperClasses'; export type Orientation = 'horizontal' | 'vertical'; +export interface StepperOwnProps extends Pick { + /** + * Set the active step (zero based index). + * Set to -1 to disable all the steps. + * @default 0 + */ + activeStep?: number; + /** + * If set to 'true' and orientation is horizontal, + * then the step label will be positioned under the icon. + * @default false + */ + alternativeLabel?: boolean; + /** + * Two or more `` components. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * An element to be placed between each step. + * @default + */ + connector?: React.ReactElement | null; + /** + * If set the `Stepper` will not assist in controlling steps for linear flow. + * @default false + */ + nonLinear?: boolean; + /** + * The component orientation (layout flow direction). + * @default 'horizontal' + */ + orientation?: Orientation; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface StepperTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & - Pick & { - /** - * Set the active step (zero based index). - * Set to -1 to disable all the steps. - * @default 0 - */ - activeStep?: number; - /** - * If set to 'true' and orientation is horizontal, - * then the step label will be positioned under the icon. - * @default false - */ - alternativeLabel?: boolean; - /** - * Two or more `` components. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * An element to be placed between each step. - * @default - */ - connector?: React.ReactElement | null; - /** - * If set the `Stepper` will not assist in controlling steps for linear flow. - * @default false - */ - nonLinear?: boolean; - /** - * The component orientation (layout flow direction). - * @default 'horizontal' - */ - orientation?: Orientation; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & StepperOwnProps; + defaultComponent: RootComponent; } export type StepperProps< diff --git a/packages/mui-material/src/SvgIcon/SvgIcon.d.ts b/packages/mui-material/src/SvgIcon/SvgIcon.d.ts index bb0e779712d57f..6400abc7aea08d 100644 --- a/packages/mui-material/src/SvgIcon/SvgIcon.d.ts +++ b/packages/mui-material/src/SvgIcon/SvgIcon.d.ts @@ -9,84 +9,86 @@ export interface SvgIconPropsSizeOverrides {} export interface SvgIconPropsColorOverrides {} +export interface SvgIconOwnProps { + /** + * Node passed into the SVG element. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The color of the component. + * It supports both default and custom theme colors, which can be added as shown in the + * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * You can use the `htmlColor` prop to apply a color attribute to the SVG element. + * @default 'inherit' + */ + color?: OverridableStringUnion< + | 'inherit' + | 'action' + | 'disabled' + | 'primary' + | 'secondary' + | 'error' + | 'info' + | 'success' + | 'warning', + SvgIconPropsColorOverrides + >; + /** + * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. + * @default 'medium' + */ + fontSize?: OverridableStringUnion< + 'inherit' | 'large' | 'medium' | 'small', + SvgIconPropsSizeOverrides + >; + /** + * Applies a color attribute to the SVG element. + */ + htmlColor?: string; + /** + * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox` + * prop will be ignored. + * Useful when you want to reference a custom `component` and have `SvgIcon` pass that + * `component`'s viewBox to the root node. + * @default false + */ + inheritViewBox?: boolean; + /** + * The shape-rendering attribute. The behavior of the different options is described on the + * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering). + * If you are having issues with blurry icons you should investigate this prop. + */ + shapeRendering?: string; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * Provides a human-readable title for the element that contains it. + * https://www.w3.org/TR/SVG-access/#Equivalent + */ + titleAccess?: string; + /** + * Allows you to redefine what the coordinates without units mean inside an SVG element. + * For example, if the SVG element is 500 (width) by 200 (height), + * and you pass viewBox="0 0 50 20", + * this means that the coordinates inside the SVG will go from the top left corner (0,0) + * to bottom right (50,20) and each unit will be worth 10px. + * @default '0 0 24 24' + */ + viewBox?: string; +} + export interface SvgIconTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'svg', + RootComponent extends React.ElementType = 'svg', > { - props: AdditionalProps & { - /** - * Node passed into the SVG element. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The color of the component. - * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). - * You can use the `htmlColor` prop to apply a color attribute to the SVG element. - * @default 'inherit' - */ - color?: OverridableStringUnion< - | 'inherit' - | 'action' - | 'disabled' - | 'primary' - | 'secondary' - | 'error' - | 'info' - | 'success' - | 'warning', - SvgIconPropsColorOverrides - >; - /** - * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. - * @default 'medium' - */ - fontSize?: OverridableStringUnion< - 'inherit' | 'large' | 'medium' | 'small', - SvgIconPropsSizeOverrides - >; - /** - * Applies a color attribute to the SVG element. - */ - htmlColor?: string; - /** - * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox` - * prop will be ignored. - * Useful when you want to reference a custom `component` and have `SvgIcon` pass that - * `component`'s viewBox to the root node. - * @default false - */ - inheritViewBox?: boolean; - /** - * The shape-rendering attribute. The behavior of the different options is described on the - * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering). - * If you are having issues with blurry icons you should investigate this prop. - */ - shapeRendering?: string; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * Provides a human-readable title for the element that contains it. - * https://www.w3.org/TR/SVG-access/#Equivalent - */ - titleAccess?: string; - /** - * Allows you to redefine what the coordinates without units mean inside an SVG element. - * For example, if the SVG element is 500 (width) by 200 (height), - * and you pass viewBox="0 0 50 20", - * this means that the coordinates inside the SVG will go from the top left corner (0,0) - * to bottom right (50,20) and each unit will be worth 10px. - * @default '0 0 24 24' - */ - viewBox?: string; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & SvgIconOwnProps; + defaultComponent: RootComponent; } /** * diff --git a/packages/mui-material/src/Tab/Tab.d.ts b/packages/mui-material/src/Tab/Tab.d.ts index cd3a444504deea..dc19a6eed31db4 100644 --- a/packages/mui-material/src/Tab/Tab.d.ts +++ b/packages/mui-material/src/Tab/Tab.d.ts @@ -5,59 +5,61 @@ import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; import { TabClasses } from './tabClasses'; +export interface TabOwnProps { + /** + * This prop isn't supported. + * Use the `component` prop if you need to change the children structure. + */ + children?: null; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, the component is disabled. + * @default false + */ + disabled?: boolean; + /** + * If `true`, the keyboard focus ripple is disabled. + * @default false + */ + disableFocusRipple?: boolean; + /** + * The icon to display. + */ + icon?: string | React.ReactElement; + /** + * The position of the icon relative to the label. + * @default 'top' + */ + iconPosition?: 'top' | 'bottom' | 'start' | 'end'; + /** + * The label element. + */ + label?: React.ReactNode; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * You can provide your own value. Otherwise, we fallback to the child position index. + */ + value?: any; + /** + * Tab labels appear in a single row. + * They can use a second line if needed. + * @default false + */ + wrapped?: boolean; +} + export type TabTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > = ExtendButtonBaseTypeMap<{ - props: AdditionalProps & { - /** - * This prop isn't supported. - * Use the `component` prop if you need to change the children structure. - */ - children?: null; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * If `true`, the component is disabled. - * @default false - */ - disabled?: boolean; - /** - * If `true`, the keyboard focus ripple is disabled. - * @default false - */ - disableFocusRipple?: boolean; - /** - * The icon to display. - */ - icon?: string | React.ReactElement; - /** - * The position of the icon relative to the label. - * @default 'top' - */ - iconPosition?: 'top' | 'bottom' | 'start' | 'end'; - /** - * The label element. - */ - label?: React.ReactNode; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * You can provide your own value. Otherwise, we fallback to the child position index. - */ - value?: any; - /** - * Tab labels appear in a single row. - * They can use a second line if needed. - * @default false - */ - wrapped?: boolean; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & TabOwnProps; + defaultComponent: RootComponent; }>; /** diff --git a/packages/mui-material/src/Table/Table.d.ts b/packages/mui-material/src/Table/Table.d.ts index 965f71697f4873..cbc37912c61bbf 100644 --- a/packages/mui-material/src/Table/Table.d.ts +++ b/packages/mui-material/src/Table/Table.d.ts @@ -7,42 +7,44 @@ import { TableClasses } from './tableClasses'; export interface TablePropsSizeOverrides {} +export interface TableOwnProps { + /** + * The content of the table, normally `TableHead` and `TableBody`. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * Allows TableCells to inherit padding of the Table. + * @default 'normal' + */ + padding?: 'normal' | 'checkbox' | 'none'; + /** + * Allows TableCells to inherit size of the Table. + * @default 'medium' + */ + size?: OverridableStringUnion<'small' | 'medium', TablePropsSizeOverrides>; + /** + * Set the header sticky. + * + * ⚠️ It doesn't work with IE11. + * @default false + */ + stickyHeader?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface TableTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'table', + RootComponent extends React.ElementType = 'table', > { - props: AdditionalProps & { - /** - * The content of the table, normally `TableHead` and `TableBody`. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * Allows TableCells to inherit padding of the Table. - * @default 'normal' - */ - padding?: 'normal' | 'checkbox' | 'none'; - /** - * Allows TableCells to inherit size of the Table. - * @default 'medium' - */ - size?: OverridableStringUnion<'small' | 'medium', TablePropsSizeOverrides>; - /** - * Set the header sticky. - * - * ⚠️ It doesn't work with IE11. - * @default false - */ - stickyHeader?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & TableOwnProps; + defaultComponent: RootComponent; } /** * diff --git a/packages/mui-material/src/TableBody/TableBody.d.ts b/packages/mui-material/src/TableBody/TableBody.d.ts index 769ab25d7da0ca..144f01676c378e 100644 --- a/packages/mui-material/src/TableBody/TableBody.d.ts +++ b/packages/mui-material/src/TableBody/TableBody.d.ts @@ -4,25 +4,27 @@ import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { TableBodyClasses } from './tableBodyClasses'; +export interface TableBodyOwnProps { + /** + * The content of the component, normally `TableRow`. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface TableBodyTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'tbody', + RootComponent extends React.ElementType = 'tbody', > { - props: AdditionalProps & { - /** - * The content of the component, normally `TableRow`. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & TableBodyOwnProps; + defaultComponent: RootComponent; } /** * diff --git a/packages/mui-material/src/TableContainer/TableContainer.d.ts b/packages/mui-material/src/TableContainer/TableContainer.d.ts index 6bd3ba74d298bd..053af18e278bfa 100644 --- a/packages/mui-material/src/TableContainer/TableContainer.d.ts +++ b/packages/mui-material/src/TableContainer/TableContainer.d.ts @@ -4,25 +4,27 @@ import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { TableContainerClasses } from './tableContainerClasses'; +export interface TableContainerOwnProps { + /** + * The content of the component, normally `Table`. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface TableContainerTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & { - /** - * The content of the component, normally `Table`. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & TableContainerOwnProps; + defaultComponent: RootComponent; } /** * diff --git a/packages/mui-material/src/TableFooter/TableFooter.d.ts b/packages/mui-material/src/TableFooter/TableFooter.d.ts index 8c0441f06880ec..7dacb5fb80492b 100644 --- a/packages/mui-material/src/TableFooter/TableFooter.d.ts +++ b/packages/mui-material/src/TableFooter/TableFooter.d.ts @@ -4,25 +4,27 @@ import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { TableFooterClasses } from './tableFooterClasses'; +export interface TableFooterOwnProps { + /** + * The content of the component, normally `TableRow`. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface TableFooterTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'tfoot', + RootComponent extends React.ElementType = 'tfoot', > { - props: AdditionalProps & { - /** - * The content of the component, normally `TableRow`. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & TableFooterOwnProps; + defaultComponent: RootComponent; } /** * diff --git a/packages/mui-material/src/TableHead/TableHead.d.ts b/packages/mui-material/src/TableHead/TableHead.d.ts index 446d039775ef70..8646071c5c0e4c 100644 --- a/packages/mui-material/src/TableHead/TableHead.d.ts +++ b/packages/mui-material/src/TableHead/TableHead.d.ts @@ -4,25 +4,27 @@ import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { TableHeadClasses } from './tableHeadClasses'; +export interface TableHeadOwnProps { + /** + * The content of the component, normally `TableRow`. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface TableHeadTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'thead', + RootComponent extends React.ElementType = 'thead', > { - props: AdditionalProps & { - /** - * The content of the component, normally `TableRow`. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & TableHeadOwnProps; + defaultComponent: RootComponent; } /** * diff --git a/packages/mui-material/src/TablePagination/TablePagination.d.ts b/packages/mui-material/src/TablePagination/TablePagination.d.ts index da219dbd120ab8..851e6140d2e47f 100644 --- a/packages/mui-material/src/TablePagination/TablePagination.d.ts +++ b/packages/mui-material/src/TablePagination/TablePagination.d.ts @@ -15,116 +15,119 @@ export interface LabelDisplayedRowsArgs { page: number; } -export interface TablePaginationTypeMap< - AdditionalProps, - DefaultComponent extends React.ElementType, -> { - props: AdditionalProps & - TablePaginationBaseProps & { - /** - * The component used for displaying the actions. - * Either a string to use a HTML element or a component. - * @default TablePaginationActions - */ - ActionsComponent?: React.ElementType; - /** - * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component. - */ - backIconButtonProps?: Partial; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The total number of rows. - * - * To enable server side pagination for an unknown number of items, provide -1. - */ - count: number; - /** - * Accepts a function which returns a string value that provides a user-friendly name for the current page. - * This is important for screen reader users. - * - * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/). - * @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous'). - * @returns {string} - * @default function defaultGetAriaLabel(type) { - * return `Go to ${type} page`; - * } - */ - getItemAriaLabel?: (type: 'first' | 'last' | 'next' | 'previous') => string; - /** - * Customize the displayed rows label. Invoked with a `{ from, to, count, page }` - * object. - * - * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/). - * @default function defaultLabelDisplayedRows({ from, to, count }) { - * return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`; - * } - */ - labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode; - /** - * Customize the rows per page label. - * - * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/). - * @default 'Rows per page:' - */ - labelRowsPerPage?: React.ReactNode; - /** - * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element. - */ - nextIconButtonProps?: Partial; - /** - * Callback fired when the page is changed. - * - * @param {React.MouseEvent | null} event The event source of the callback. - * @param {number} page The page selected. - */ - onPageChange: (event: React.MouseEvent | null, page: number) => void; - /** - * Callback fired when the number of rows per page is changed. - * - * @param {React.ChangeEvent} event The event source of the callback. - */ - onRowsPerPageChange?: React.ChangeEventHandler; - /** - * The zero-based index of the current page. - */ - page: number; - /** - * The number of rows per page. - * - * Set -1 to display all the rows. - */ - rowsPerPage: number; - /** - * Customizes the options of the rows per page select field. If less than two options are - * available, no select field will be displayed. - * Use -1 for the value with a custom label to show all the rows. - * @default [10, 25, 50, 100] - */ - rowsPerPageOptions?: Array; - /** - * Props applied to the rows per page [`Select`](/material-ui/api/select/) element. - * @default {} - */ - SelectProps?: Partial; - /** - * If `true`, show the first-page button. - * @default false - */ - showFirstButton?: boolean; - /** - * If `true`, show the last-page button. - * @default false - */ - showLastButton?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; +/** + * This type is kept for compatibility. Use `TablePaginationOwnProps` instead. + */ +export type TablePaginationBaseProps = Omit; + +export interface TablePaginationOwnProps extends TablePaginationBaseProps { + /** + * The component used for displaying the actions. + * Either a string to use a HTML element or a component. + * @default TablePaginationActions + */ + ActionsComponent?: React.ElementType; + /** + * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component. + */ + backIconButtonProps?: Partial; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The total number of rows. + * + * To enable server side pagination for an unknown number of items, provide -1. + */ + count: number; + /** + * Accepts a function which returns a string value that provides a user-friendly name for the current page. + * This is important for screen reader users. + * + * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/). + * @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous'). + * @returns {string} + * @default function defaultGetAriaLabel(type) { + * return `Go to ${type} page`; + * } + */ + getItemAriaLabel?: (type: 'first' | 'last' | 'next' | 'previous') => string; + /** + * Customize the displayed rows label. Invoked with a `{ from, to, count, page }` + * object. + * + * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/). + * @default function defaultLabelDisplayedRows({ from, to, count }) { + * return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`; + * } + */ + labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode; + /** + * Customize the rows per page label. + * + * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/). + * @default 'Rows per page:' + */ + labelRowsPerPage?: React.ReactNode; + /** + * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element. + */ + nextIconButtonProps?: Partial; + /** + * Callback fired when the page is changed. + * + * @param {React.MouseEvent | null} event The event source of the callback. + * @param {number} page The page selected. + */ + onPageChange: (event: React.MouseEvent | null, page: number) => void; + /** + * Callback fired when the number of rows per page is changed. + * + * @param {React.ChangeEvent} event The event source of the callback. + */ + onRowsPerPageChange?: React.ChangeEventHandler; + /** + * The zero-based index of the current page. + */ + page: number; + /** + * The number of rows per page. + * + * Set -1 to display all the rows. + */ + rowsPerPage: number; + /** + * Customizes the options of the rows per page select field. If less than two options are + * available, no select field will be displayed. + * Use -1 for the value with a custom label to show all the rows. + * @default [10, 25, 50, 100] + */ + rowsPerPageOptions?: Array; + /** + * Props applied to the rows per page [`Select`](/material-ui/api/select/) element. + * @default {} + */ + SelectProps?: Partial; + /** + * If `true`, show the first-page button. + * @default false + */ + showFirstButton?: boolean; + /** + * If `true`, show the last-page button. + * @default false + */ + showLastButton?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + +export interface TablePaginationTypeMap { + props: AdditionalProps & TablePaginationOwnProps; + defaultComponent: RootComponent; } /** @@ -143,8 +146,6 @@ declare const TablePagination: OverridableComponent< TablePaginationTypeMap<{}, React.JSXElementConstructor> >; -export type TablePaginationBaseProps = Omit; - export type TablePaginationProps< RootComponent extends React.ElementType = React.JSXElementConstructor, AdditionalProps = {}, diff --git a/packages/mui-material/src/TableRow/TableRow.d.ts b/packages/mui-material/src/TableRow/TableRow.d.ts index aa696929aa91b5..7244439b1fc7a7 100644 --- a/packages/mui-material/src/TableRow/TableRow.d.ts +++ b/packages/mui-material/src/TableRow/TableRow.d.ts @@ -4,35 +4,37 @@ import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { TableRowClasses } from './tableRowClasses'; +export interface TableRowOwnProps { + /** + * Should be valid children such as `TableCell`. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, the table row will shade on hover. + * @default false + */ + hover?: boolean; + /** + * If `true`, the table row will have the selected shading. + * @default false + */ + selected?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface TableRowTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'tr', + RootComponent extends React.ElementType = 'tr', > { - props: AdditionalProps & { - /** - * Should be valid children such as `TableCell`. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * If `true`, the table row will shade on hover. - * @default false - */ - hover?: boolean; - /** - * If `true`, the table row will have the selected shading. - * @default false - */ - selected?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & TableRowOwnProps; + defaultComponent: RootComponent; } /** * Will automatically set dynamic row height diff --git a/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts b/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts index 2684795d4ce11e..6c62dcdd5ddf6e 100644 --- a/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts +++ b/packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts @@ -5,45 +5,49 @@ import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; import { TableSortLabelClasses } from './tableSortLabelClasses'; +export interface TableSortLabelOwnProps { + /** + * If `true`, the label will have the active styling (should be true for the sorted column). + * @default false + */ + active?: boolean; + /** + * Label contents, the arrow will be appended automatically. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The current sort direction. + * @default 'asc' + */ + direction?: 'asc' | 'desc'; + /** + * Hide sort icon when active is false. + * @default false + */ + hideSortIcon?: boolean; + /** + * Sort icon to use. + * @default ArrowDownwardIcon + */ + IconComponent?: React.JSXElementConstructor<{ + className: string; + }>; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export type TableSortLabelTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'span', + RootComponent extends React.ElementType = 'span', > = ExtendButtonBaseTypeMap<{ - props: AdditionalProps & { - /** - * If `true`, the label will have the active styling (should be true for the sorted column). - * @default false - */ - active?: boolean; - /** - * Label contents, the arrow will be appended automatically. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The current sort direction. - * @default 'asc' - */ - direction?: 'asc' | 'desc'; - /** - * Hide sort icon when active is false. - * @default false - */ - hideSortIcon?: boolean; - /** - * Sort icon to use. - * @default ArrowDownwardIcon - */ - IconComponent?: React.JSXElementConstructor<{ className: string }>; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & TableSortLabelOwnProps; + defaultComponent: RootComponent; }>; /** diff --git a/packages/mui-material/src/Tabs/Tabs.d.ts b/packages/mui-material/src/Tabs/Tabs.d.ts index 336208b9c72135..9f2fd56c34e764 100644 --- a/packages/mui-material/src/Tabs/Tabs.d.ts +++ b/packages/mui-material/src/Tabs/Tabs.d.ts @@ -24,158 +24,162 @@ export interface TabsOwnerState extends TabsProps { scrollButtonsHideMobile: boolean; } -export interface TabsTypeMap< - AdditionalProps = {}, - DefaultComponent extends React.ElementType = typeof ButtonBase, -> { - props: AdditionalProps & { - /** - * Callback fired when the component mounts. - * This is useful when you want to trigger an action programmatically. - * It supports two actions: `updateIndicator()` and `updateScrollButtons()` - * - * @param {object} actions This object contains all possible actions - * that can be triggered programmatically. - */ - action?: React.Ref; - /** - * If `true`, the scroll buttons aren't forced hidden on mobile. - * By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`. - * @default false - */ - allowScrollButtonsMobile?: boolean; - /** - * The label for the Tabs as a string. - */ - 'aria-label'?: string; - /** - * An id or list of ids separated by a space that label the Tabs. - */ - 'aria-labelledby'?: string; - /** - * If `true`, the tabs are centered. - * This prop is intended for large views. - * @default false - */ - centered?: boolean; - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The components used for each slot inside. - * @default {} - */ - slots?: { - StartScrollButtonIcon?: React.ElementType; - EndScrollButtonIcon?: React.ElementType; - }; - /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * @default {} - */ - slotProps?: { - startScrollButtonIcon?: SlotComponentProps< - typeof SvgIcon, - TabsStartScrollButtonIconSlotPropsOverrides, - TabsOwnerState - >; - endScrollButtonIcon?: SlotComponentProps< - typeof SvgIcon, - TabsEndScrollButtonIconSlotPropsOverrides, - TabsOwnerState - >; - }; - /** - * Determines the color of the indicator. - * @default 'primary' - */ - indicatorColor?: OverridableStringUnion< - 'secondary' | 'primary', - TabsPropsIndicatorColorOverrides +export interface TabsOwnProps { + /** + * Callback fired when the component mounts. + * This is useful when you want to trigger an action programmatically. + * It supports two actions: `updateIndicator()` and `updateScrollButtons()` + * + * @param {object} actions This object contains all possible actions + * that can be triggered programmatically. + */ + action?: React.Ref; + /** + * If `true`, the scroll buttons aren't forced hidden on mobile. + * By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`. + * @default false + */ + allowScrollButtonsMobile?: boolean; + /** + * The label for the Tabs as a string. + */ + 'aria-label'?: string; + /** + * An id or list of ids separated by a space that label the Tabs. + */ + 'aria-labelledby'?: string; + /** + * If `true`, the tabs are centered. + * This prop is intended for large views. + * @default false + */ + centered?: boolean; + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The components used for each slot inside. + * @default {} + */ + slots?: { + StartScrollButtonIcon?: React.ElementType; + EndScrollButtonIcon?: React.ElementType; + }; + /** + * The extra props for the slot components. + * You can override the existing props or add new ones. + * @default {} + */ + slotProps?: { + startScrollButtonIcon?: SlotComponentProps< + typeof SvgIcon, + TabsStartScrollButtonIconSlotPropsOverrides, + TabsOwnerState + >; + endScrollButtonIcon?: SlotComponentProps< + typeof SvgIcon, + TabsEndScrollButtonIconSlotPropsOverrides, + TabsOwnerState >; - /** - * Callback fired when the value changes. - * - * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event. - * @param {any} value We default to the index of the child (number) - */ - onChange?: (event: React.SyntheticEvent, value: any) => void; - /** - * The component orientation (layout flow direction). - * @default 'horizontal' - */ - orientation?: 'horizontal' | 'vertical'; - /** - * The component used to render the scroll buttons. - * @default TabScrollButton - */ - ScrollButtonComponent?: React.ElementType; - /** - * Determine behavior of scroll buttons when tabs are set to scroll: - * - * - `auto` will only present them when not all the items are visible. - * - `true` will always present them. - * - `false` will never present them. - * - * By default the scroll buttons are hidden on mobile. - * This behavior can be disabled with `allowScrollButtonsMobile`. - * @default 'auto' - */ - scrollButtons?: 'auto' | true | false; - /** - * If `true` the selected tab changes on focus. Otherwise it only - * changes on activation. - */ - selectionFollowsFocus?: boolean; - /** - * Props applied to the tab indicator element. - * @default {} - */ - TabIndicatorProps?: React.HTMLAttributes & { sx?: SxProps }; - /** - * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element. - * @default {} - */ - TabScrollButtonProps?: Partial; - /** - * Determines the color of the `Tab`. - * @default 'primary' - */ - textColor?: 'secondary' | 'primary' | 'inherit'; - /** - * The value of the currently selected `Tab`. - * If you don't want any selected `Tab`, you can set this prop to `false`. - */ - value?: any; - /** - * Determines additional display behavior of the tabs: - * - * - `scrollable` will invoke scrolling properties and allow for horizontally - * scrolling (or swiping) of the tab bar. - * -`fullWidth` will make the tabs grow to use all the available space, - * which should be used for small views, like on mobile. - * - `standard` will render the default state. - * @default 'standard' - */ - variant?: 'standard' | 'scrollable' | 'fullWidth'; - /** - * If `true`, the scrollbar is visible. It can be useful when displaying - * a long vertical list of tabs. - * @default false - */ - visibleScrollbar?: boolean; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ + }; + /** + * Determines the color of the indicator. + * @default 'primary' + */ + indicatorColor?: OverridableStringUnion< + 'secondary' | 'primary', + TabsPropsIndicatorColorOverrides + >; + /** + * Callback fired when the value changes. + * + * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event. + * @param {any} value We default to the index of the child (number) + */ + onChange?: (event: React.SyntheticEvent, value: any) => void; + /** + * The component orientation (layout flow direction). + * @default 'horizontal' + */ + orientation?: 'horizontal' | 'vertical'; + /** + * The component used to render the scroll buttons. + * @default TabScrollButton + */ + ScrollButtonComponent?: React.ElementType; + /** + * Determine behavior of scroll buttons when tabs are set to scroll: + * + * - `auto` will only present them when not all the items are visible. + * - `true` will always present them. + * - `false` will never present them. + * + * By default the scroll buttons are hidden on mobile. + * This behavior can be disabled with `allowScrollButtonsMobile`. + * @default 'auto' + */ + scrollButtons?: 'auto' | true | false; + /** + * If `true` the selected tab changes on focus. Otherwise it only + * changes on activation. + */ + selectionFollowsFocus?: boolean; + /** + * Props applied to the tab indicator element. + * @default {} + */ + TabIndicatorProps?: React.HTMLAttributes & { sx?: SxProps; }; - defaultComponent: DefaultComponent; + /** + * Props applied to the [`TabScrollButton`](/material-ui/api/tab-scroll-button/) element. + * @default {} + */ + TabScrollButtonProps?: Partial; + /** + * Determines the color of the `Tab`. + * @default 'primary' + */ + textColor?: 'secondary' | 'primary' | 'inherit'; + /** + * The value of the currently selected `Tab`. + * If you don't want any selected `Tab`, you can set this prop to `false`. + */ + value?: any; + /** + * Determines additional display behavior of the tabs: + * + * - `scrollable` will invoke scrolling properties and allow for horizontally + * scrolling (or swiping) of the tab bar. + * -`fullWidth` will make the tabs grow to use all the available space, + * which should be used for small views, like on mobile. + * - `standard` will render the default state. + * @default 'standard' + */ + variant?: 'standard' | 'scrollable' | 'fullWidth'; + /** + * If `true`, the scrollbar is visible. It can be useful when displaying + * a long vertical list of tabs. + * @default false + */ + visibleScrollbar?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + +export interface TabsTypeMap< + AdditionalProps = {}, + RootComponent extends React.ElementType = typeof ButtonBase, +> { + props: AdditionalProps & TabsOwnProps; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.d.ts b/packages/mui-material/src/ToggleButton/ToggleButton.d.ts index 668d531471fda5..84ab792b656bc7 100644 --- a/packages/mui-material/src/ToggleButton/ToggleButton.d.ts +++ b/packages/mui-material/src/ToggleButton/ToggleButton.d.ts @@ -10,79 +10,81 @@ export interface ToggleButtonPropsSizeOverrides {} export interface ToggleButtonPropsColorOverrides {} +export interface ToggleButtonOwnProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The color of the button when it is in an active state. + * It supports both default and custom theme colors, which can be added as shown in the + * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). + * @default 'standard' + */ + color?: OverridableStringUnion< + 'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', + ToggleButtonPropsColorOverrides + >; + /** + * If `true`, the component is disabled. + * @default false + */ + disabled?: boolean; + /** + * If `true`, the keyboard focus ripple is disabled. + * @default false + */ + disableFocusRipple?: boolean; + /** + * If `true`, the button will take up the full width of its container. + * @default false + */ + fullWidth?: boolean; + /** + * Callback fired when the state changes. + * + * @param {React.MouseEvent} event The event source of the callback. + * @param {any} value of the selected button. + */ + onChange?: (event: React.MouseEvent, value: any) => void; + /** + * Callback fired when the button is clicked. + * + * @param {React.MouseEvent} event The event source of the callback. + * @param {any} value of the selected button. + */ + onClick?: (event: React.MouseEvent, value: any) => void; + /** + * If `true`, the button is rendered in an active state. + */ + selected?: boolean; + /** + * The size of the component. + * The prop defaults to the value inherited from the parent ToggleButtonGroup component. + * @default 'medium' + */ + size?: OverridableStringUnion<'small' | 'medium' | 'large', ToggleButtonPropsSizeOverrides>; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * The value to associate with the button when selected in a + * ToggleButtonGroup. + */ + value: NonNullable; +} + export type ToggleButtonTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'button', + RootComponent extends React.ElementType = 'button', > = ExtendButtonBaseTypeMap<{ - props: AdditionalProps & { - /** - * The content of the component. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * The color of the button when it is in an active state. - * It supports both default and custom theme colors, which can be added as shown in the - * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors). - * @default 'standard' - */ - color?: OverridableStringUnion< - 'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', - ToggleButtonPropsColorOverrides - >; - /** - * If `true`, the component is disabled. - * @default false - */ - disabled?: boolean; - /** - * If `true`, the keyboard focus ripple is disabled. - * @default false - */ - disableFocusRipple?: boolean; - /** - * If `true`, the button will take up the full width of its container. - * @default false - */ - fullWidth?: boolean; - /** - * Callback fired when the state changes. - * - * @param {React.MouseEvent} event The event source of the callback. - * @param {any} value of the selected button. - */ - onChange?: (event: React.MouseEvent, value: any) => void; - /** - * Callback fired when the button is clicked. - * - * @param {React.MouseEvent} event The event source of the callback. - * @param {any} value of the selected button. - */ - onClick?: (event: React.MouseEvent, value: any) => void; - /** - * If `true`, the button is rendered in an active state. - */ - selected?: boolean; - /** - * The size of the component. - * The prop defaults to the value inherited from the parent ToggleButtonGroup component. - * @default 'medium' - */ - size?: OverridableStringUnion<'small' | 'medium' | 'large', ToggleButtonPropsSizeOverrides>; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * The value to associate with the button when selected in a - * ToggleButtonGroup. - */ - value: NonNullable; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & ToggleButtonOwnProps; + defaultComponent: RootComponent; }>; /** diff --git a/packages/mui-material/src/Toolbar/Toolbar.d.ts b/packages/mui-material/src/Toolbar/Toolbar.d.ts index cb0be2b10e4a34..d5755f4d309999 100644 --- a/packages/mui-material/src/Toolbar/Toolbar.d.ts +++ b/packages/mui-material/src/Toolbar/Toolbar.d.ts @@ -7,36 +7,38 @@ import { ToolbarClasses } from './toolbarClasses'; export interface ToolbarPropsVariantOverrides {} +export interface ToolbarOwnProps { + /** + * The Toolbar children, usually a mixture of `IconButton`, `Button` and `Typography`. + * The Toolbar is a flex container, allowing flex item properties to be used to lay out the children. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, disables gutter padding. + * @default false + */ + disableGutters?: boolean; + /** + * The variant to use. + * @default 'regular' + */ + variant?: OverridableStringUnion<'regular' | 'dense', ToolbarPropsVariantOverrides>; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface ToolbarTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'div', + RootComponent extends React.ElementType = 'div', > { - props: AdditionalProps & { - /** - * The Toolbar children, usually a mixture of `IconButton`, `Button` and `Typography`. - * The Toolbar is a flex container, allowing flex item properties to be used to lay out the children. - */ - children?: React.ReactNode; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * If `true`, disables gutter padding. - * @default false - */ - disableGutters?: boolean; - /** - * The variant to use. - * @default 'regular' - */ - variant?: OverridableStringUnion<'regular' | 'dense', ToolbarPropsVariantOverrides>; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; - defaultComponent: DefaultComponent; + props: AdditionalProps & ToolbarOwnProps; + defaultComponent: RootComponent; } /** * diff --git a/packages/mui-material/src/Typography/Typography.d.ts b/packages/mui-material/src/Typography/Typography.d.ts index 646847c39e0477..4a24b024f7385d 100644 --- a/packages/mui-material/src/Typography/Typography.d.ts +++ b/packages/mui-material/src/Typography/Typography.d.ts @@ -75,10 +75,10 @@ export interface TypographyOwnProps extends SystemProps { export interface TypographyTypeMap< AdditionalProps = {}, - DefaultComponent extends React.ElementType = 'span', + RootComponent extends React.ElementType = 'span', > { props: AdditionalProps & TypographyOwnProps; - defaultComponent: DefaultComponent; + defaultComponent: RootComponent; } /** diff --git a/packages/mui-system/src/Box/Box.d.ts b/packages/mui-system/src/Box/Box.d.ts index 54b917af76e9d2..32bf76f15d13b5 100644 --- a/packages/mui-system/src/Box/Box.d.ts +++ b/packages/mui-system/src/Box/Box.d.ts @@ -170,27 +170,29 @@ export type SystemProps = { | ((theme: Theme) => ResponsiveStyleValue); }; +export interface BoxOwnProps extends SystemProps { + children?: React.ReactNode; + /** + * The component used for the root node. + * Either a string to use a HTML element or a component. + */ + component?: React.ElementType; + ref?: React.Ref; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + export interface BoxTypeMap< AdditionalProps = {}, RootComponent extends React.ElementType = 'div', Theme extends object = SystemTheme, > { - props: AdditionalProps & - SystemProps & { - children?: React.ReactNode; - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component?: React.ElementType; - ref?: React.Ref; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - }; + props: AdditionalProps & BoxOwnProps; defaultComponent: RootComponent; } + /** * * Demos: