diff --git a/docs/pages/api-docs/alert-title.md b/docs/pages/api-docs/alert-title.md index 65f7a8f364f144..3c121ba762a54b 100644 --- a/docs/pages/api-docs/alert-title.md +++ b/docs/pages/api-docs/alert-title.md @@ -48,3 +48,7 @@ You can override the style of the component thanks to one of these customization If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/AlertTitle/AlertTitle.js) for more detail. +## Demos + +- [Alert](/components/alert/) + diff --git a/docs/pages/api-docs/menu-list.md b/docs/pages/api-docs/menu-list.md index 160b6c49e39f35..39a7b425f0ed54 100644 --- a/docs/pages/api-docs/menu-list.md +++ b/docs/pages/api-docs/menu-list.md @@ -18,7 +18,7 @@ import { MenuList } from '@material-ui/core'; You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). -A permanently displayed menu following https://www.w3.org/TR/wai-aria-practices/#menubutton +A permanently displayed menu following https://www.w3.org/TR/wai-aria-practices/#menubutton. It's exposed to help customization of the [`Menu`](/api/menu/) component. If you use it separately you need to move focus into the component manually. Once the focus is placed inside the component it is fully keyboard accessible. diff --git a/docs/scripts/buildApi.js b/docs/scripts/buildApi.js index 2cb481bb9f97ab..587b101ed9ac68 100644 --- a/docs/scripts/buildApi.js +++ b/docs/scripts/buildApi.js @@ -1,14 +1,21 @@ /* eslint-disable no-console */ +import * as babel from '@babel/core'; +import traverse from '@babel/traverse'; import { mkdir, readFileSync, writeFileSync } from 'fs'; import { getLineFeed } from './helpers'; +import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export'; import path from 'path'; import kebabCase from 'lodash/kebabCase'; +import uniqBy from 'lodash/uniqBy'; import { defaultHandlers, parse as docgenParse } from 'react-docgen'; +import remark from 'remark'; +import remarkVisit from 'unist-util-visit'; import muiDefaultPropsHandler from '../src/modules/utils/defaultPropsHandler'; import generateMarkdown from '../src/modules/utils/generateMarkdown'; import { findPagesMarkdown, findComponents } from '../src/modules/utils/find'; import { getHeaders } from '../src/modules/utils/parseMarkdown'; import parseTest from '../src/modules/utils/parseTest'; +import { pageToTitle } from '../src/modules/utils/helpers'; import createMuiTheme from '../../packages/material-ui/src/styles/createMuiTheme'; import getStylesCreator from '../../packages/material-ui-styles/src/getStylesCreator'; import createGenerateClassName from '../../packages/material-ui-styles/src/createGenerateClassName'; @@ -80,6 +87,123 @@ function getInheritance(testInfo, src) { }; } +/** + * Produces markdown of the description that can be hosted anywhere. + * + * By default we assume that the markdown is hosted on material-ui.com which is + * why the source includes relative url. We transform them to absolute urls with + * this method. + * + * @param {object} api + * @param {object} options + */ +function computeApiDescription(api, options) { + const { host } = options; + return new Promise((resolve, reject) => { + remark() + .use(function docsLinksAttacher() { + return function transformer(tree) { + remarkVisit(tree, 'link', linkNode => { + if (linkNode.url.startsWith('/')) { + linkNode.url = `${host}${linkNode.url}`; + } + }); + }; + }) + .process(api.description, (error, file) => { + if (error) reject(error); + + resolve(file.contents.trim()); + }); + }); +} + +async function annotateComponentDefinition(component, api) { + const HOST = 'https://material-ui.com'; + + const typesFilename = component.filename.replace(/\.js$/, '.d.ts'); + const typesSource = readFileSync(typesFilename, { encoding: 'utf8' }); + const typesAST = await babel.parseAsync(typesSource, { + configFile: false, + filename: typesFilename, + presets: [require.resolve('@babel/preset-typescript')], + }); + + let start = null; + let end = null; + traverse(typesAST, { + ExportDefaultDeclaration(babelPath) { + // export default function Menu() {} + let node = babelPath.node; + if (node.declaration.type === 'Identifier') { + // declare const Menu: {}; + // export default Menu; + const bindingId = babelPath.node.declaration.name; + const binding = babelPath.scope.bindings[bindingId]; + node = binding.path.parentPath.node; + } + + const { leadingComments = [] } = node; + const [jsdocBlock, ...rest] = leadingComments; + if (rest.length > 0) { + throw new Error('Should only have a single leading jsdoc block'); + } + if (jsdocBlock !== undefined) { + start = jsdocBlock.start; + end = jsdocBlock.end; + } else { + start = node.start - 1; + end = start; + } + }, + }); + + if (end === null || start === 0) { + throw new TypeError( + "Don't know where to insert the jsdoc block. Probably no `default export` found", + ); + } + + const demos = uniqBy( + api.pagesMarkdown.filter(page => { + return page.components.includes(api.name); + }, []), + page => page.pathname, + ); + + let inheritanceAPILink = null; + if (api.inheritance !== null) { + const url = api.inheritance.pathname.startsWith('/') + ? `${HOST}${rewriteUrlForNextExport(api.inheritance.pathname)}` + : api.inheritance.pathname; + + inheritanceAPILink = `[${api.inheritance.component} API](${url})`; + } + + const markdownLines = (await computeApiDescription(api, { host: HOST })).split('\n'); + if (demos.length > 0) { + markdownLines.push( + 'Demos:', + '', + ...demos.map( + page => `- [${pageToTitle(page)}](${HOST}${rewriteUrlForNextExport(page.pathname)})`, + ), + '', + ); + } + + markdownLines.push('API:', '', `- [${api.name} API](${HOST}/api/${kebabCase(api.name)}/)`); + if (api.inheritance !== null) { + markdownLines.push(`- inherits ${inheritanceAPILink}`); + } + + const jsdoc = `/**\n${markdownLines + .map(line => (line.length > 0 ? ` * ${line}` : ` *`)) + .join('\n')}\n */`; + const typesSourceNew = typesSource.slice(0, start) + jsdoc + typesSource.slice(end); + writeFileSync(typesFilename, typesSourceNew, { encoding: 'utf8' }); +} + async function buildDocs(options) { const { component: componentObject, pagesMarkdown } = options; const src = readFileSync(componentObject.filename, 'utf8'); @@ -209,6 +333,8 @@ export default function Page() { console.log('Built markdown docs for', reactAPI.name); }); + + await annotateComponentDefinition(componentObject, reactAPI); } function run() { diff --git a/docs/src/pages/components/alert/alert.md b/docs/src/pages/components/alert/alert.md index 6c726cd110b52d..c207f85375df8c 100644 --- a/docs/src/pages/components/alert/alert.md +++ b/docs/src/pages/components/alert/alert.md @@ -1,6 +1,6 @@ --- title: Alert React component -components: Alert +components: Alert, AlertTitle --- # Alert diff --git a/package.json b/package.json index 66b77383a25fb4..300809d9cfd775 100644 --- a/package.json +++ b/package.json @@ -127,6 +127,7 @@ "react": "^16.13.0", "react-dom": "^16.13.0", "react-test-renderer": "^16.13.0", + "remark": "^11.0.2", "rimraf": "^3.0.0", "rollup": "^1.21.4", "rollup-plugin-babel": "^4.3.3", @@ -141,6 +142,7 @@ "tslint": "5.14.0", "typescript": "^3.8.2", "typescript-to-proptypes": "^1.4.0", + "unist-util-visit": "^2.0.2", "vrtest-mui": "^0.3.3", "webpack": "^4.41.0", "webpack-cli": "^3.3.9", diff --git a/packages/material-ui-lab/src/Alert/Alert.d.ts b/packages/material-ui-lab/src/Alert/Alert.d.ts index c164d47df40f76..a902fdb3297e54 100644 --- a/packages/material-ui-lab/src/Alert/Alert.d.ts +++ b/packages/material-ui-lab/src/Alert/Alert.d.ts @@ -70,4 +70,15 @@ export type AlertClassKey = | 'message' | 'action'; +/** + * + * Demos: + * + * - [Alert](https://material-ui.com/components/alert/) + * + * API: + * + * - [Alert API](https://material-ui.com/api/alert/) + * - inherits [Paper API](https://material-ui.com/api/paper/) + */ export default function Alert(props: AlertProps): JSX.Element; diff --git a/packages/material-ui-lab/src/AlertTitle/AlertTitle.d.ts b/packages/material-ui-lab/src/AlertTitle/AlertTitle.d.ts index 7e840cb29e6be8..7e9df09c95cb91 100644 --- a/packages/material-ui-lab/src/AlertTitle/AlertTitle.d.ts +++ b/packages/material-ui-lab/src/AlertTitle/AlertTitle.d.ts @@ -6,4 +6,14 @@ export interface AlertTitleProps export type AlertTitleClassKey = 'root'; +/** + * + * Demos: + * + * - [Alert](https://material-ui.com/components/alert/) + * + * API: + * + * - [AlertTitle API](https://material-ui.com/api/alert-title/) + */ export default function AlertTitle(props: AlertTitleProps): JSX.Element; diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts index 739360dc8d4f00..ab200169a2847d 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts @@ -184,6 +184,16 @@ export type AutocompleteClassKey = | 'groupLabel' | 'groupUl'; +/** + * + * Demos: + * + * - [Autocomplete](https://material-ui.com/components/autocomplete/) + * + * API: + * + * - [Autocomplete API](https://material-ui.com/api/autocomplete/) + */ export default function Autocomplete( props: AutocompleteProps & UseAutocompleteProps, ): JSX.Element; diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts index 62d7792bc53d98..17c3ea3469700b 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts @@ -19,4 +19,14 @@ export interface AvatarGroupProps export type AvatarGroupClassKey = 'root' | 'avatar'; +/** + * + * Demos: + * + * - [Avatars](https://material-ui.com/components/avatars/) + * + * API: + * + * - [AvatarGroup API](https://material-ui.com/api/avatar-group/) + */ export default function AvatarGroup(props: AvatarGroupProps): JSX.Element; diff --git a/packages/material-ui-lab/src/Pagination/Pagination.d.ts b/packages/material-ui-lab/src/Pagination/Pagination.d.ts index 489551f642a95c..2f7294c36798ca 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/Pagination.d.ts @@ -47,4 +47,14 @@ export interface PaginationProps export type PaginationClassKey = 'root' | 'ul'; +/** + * + * Demos: + * + * - [Pagination](https://material-ui.com/components/pagination/) + * + * API: + * + * - [Pagination API](https://material-ui.com/api/pagination/) + */ export default function Pagination(props: PaginationProps): JSX.Element; diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts b/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts index 8f4b5b6cc8a288..872d4723e3acbe 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts @@ -41,6 +41,16 @@ export interface PaginationItemTypeMap

; export default Rating; diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts b/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts index 21c08420ad84bd..25b1b5022a504a 100644 --- a/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts +++ b/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts @@ -12,6 +12,16 @@ export interface SkeletonTypeMap

{ classKey: SkeletonClassKey; } +/** + * + * Demos: + * + * - [Skeleton](https://material-ui.com/components/skeleton/) + * + * API: + * + * - [Skeleton API](https://material-ui.com/api/skeleton/) + */ declare const Skeleton: OverridableComponent; export type SkeletonClassKey = 'root' | 'text' | 'rect' | 'circle' | 'pulse' | 'wave'; diff --git a/packages/material-ui-lab/src/SpeedDial/SpeedDial.d.ts b/packages/material-ui-lab/src/SpeedDial/SpeedDial.d.ts index 4337f1a3c00cca..a956699a22157a 100644 --- a/packages/material-ui-lab/src/SpeedDial/SpeedDial.d.ts +++ b/packages/material-ui-lab/src/SpeedDial/SpeedDial.d.ts @@ -87,4 +87,14 @@ export type SpeedDialClassKey = | 'actions' | 'actionsClosed'; +/** + * + * Demos: + * + * - [Speed Dial](https://material-ui.com/components/speed-dial/) + * + * API: + * + * - [SpeedDial API](https://material-ui.com/api/speed-dial/) + */ export default function SpeedDial(props: SpeedDialProps): JSX.Element; diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts index 6078a487a73ed8..6fb1aae1f30148 100644 --- a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts +++ b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts @@ -43,4 +43,15 @@ export type SpeedDialActionClassKey = | 'staticTooltipLabel' | 'tooltipPlacementLeft'; +/** + * + * Demos: + * + * - [Speed Dial](https://material-ui.com/components/speed-dial/) + * + * API: + * + * - [SpeedDialAction API](https://material-ui.com/api/speed-dial-action/) + * - inherits [Tooltip API](https://material-ui.com/api/tooltip/) + */ export default function SpeedDialAction(props: SpeedDialActionProps): JSX.Element; diff --git a/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.d.ts b/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.d.ts index 427dc4e09f8d75..3f14e0540cf92a 100644 --- a/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.d.ts +++ b/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.d.ts @@ -26,4 +26,14 @@ export type SpeedDialIconClassKey = | 'openIcon' | 'openIconOpen'; +/** + * + * Demos: + * + * - [Speed Dial](https://material-ui.com/components/speed-dial/) + * + * API: + * + * - [SpeedDialIcon API](https://material-ui.com/api/speed-dial-icon/) + */ export default function SpeedDialIcon(props: SpeedDialIconProps): JSX.Element; diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts b/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts index 5979ada7d7e5c0..9abfb15682e0bb 100644 --- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts +++ b/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts @@ -19,6 +19,17 @@ export type ToggleButtonTypeMap< classKey: ToggleButtonClassKey; }>; +/** + * + * Demos: + * + * - [Toggle Button](https://material-ui.com/components/toggle-button/) + * + * API: + * + * - [ToggleButton API](https://material-ui.com/api/toggle-button/) + * - inherits [ButtonBase API](https://material-ui.com/api/button-base/) + */ declare const ToggleButton: ExtendButtonBase; export type ToggleButtonProps< diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.d.ts b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.d.ts index 0b39271ed8d145..89111813ad4d85 100644 --- a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.d.ts +++ b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.d.ts @@ -42,4 +42,14 @@ export type ToggleButtonGroupClassKey = | 'groupedSizeSmall' | 'groupedSizeLarge'; +/** + * + * Demos: + * + * - [Toggle Button](https://material-ui.com/components/toggle-button/) + * + * API: + * + * - [ToggleButtonGroup API](https://material-ui.com/api/toggle-button-group/) + */ export default function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element; diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts b/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts index a61986ee5f7e87..a5598cba518f7d 100644 --- a/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts +++ b/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts @@ -48,4 +48,14 @@ export type TreeItemClassKey = | 'iconContainer' | 'label'; +/** + * + * Demos: + * + * - [Tree View](https://material-ui.com/components/tree-view/) + * + * API: + * + * - [TreeItem API](https://material-ui.com/api/tree-item/) + */ export default function TreeItem(props: TreeItemProps): JSX.Element; diff --git a/packages/material-ui-lab/src/TreeView/TreeView.d.ts b/packages/material-ui-lab/src/TreeView/TreeView.d.ts index 1bf19b26ce36e6..7a7db0fc069d35 100644 --- a/packages/material-ui-lab/src/TreeView/TreeView.d.ts +++ b/packages/material-ui-lab/src/TreeView/TreeView.d.ts @@ -96,4 +96,14 @@ export type TreeViewProps = SingleSelectTreeViewProps | MultiSelectTreeViewProps export type TreeViewClassKey = 'root'; +/** + * + * Demos: + * + * - [Tree View](https://material-ui.com/components/tree-view/) + * + * API: + * + * - [TreeView API](https://material-ui.com/api/tree-view/) + */ export default function TreeView(props: TreeViewProps): JSX.Element; diff --git a/packages/material-ui/src/AppBar/AppBar.d.ts b/packages/material-ui/src/AppBar/AppBar.d.ts index f54e32bdc79c71..70b73cd4c2c6c3 100644 --- a/packages/material-ui/src/AppBar/AppBar.d.ts +++ b/packages/material-ui/src/AppBar/AppBar.d.ts @@ -25,4 +25,15 @@ export type AppBarClassKey = | 'colorPrimary' | 'colorSecondary'; +/** + * + * Demos: + * + * - [App Bar](https://material-ui.com/components/app-bar/) + * + * API: + * + * - [AppBar API](https://material-ui.com/api/app-bar/) + * - inherits [Paper API](https://material-ui.com/api/paper/) + */ export default function AppBar(props: AppBarProps): JSX.Element; diff --git a/packages/material-ui/src/Avatar/Avatar.d.ts b/packages/material-ui/src/Avatar/Avatar.d.ts index a5ee8fe88f7e6b..2c0df22aa043a8 100644 --- a/packages/material-ui/src/Avatar/Avatar.d.ts +++ b/packages/material-ui/src/Avatar/Avatar.d.ts @@ -14,6 +14,16 @@ export interface AvatarTypeMap

{ classKey: AvatarClassKey; } +/** + * + * Demos: + * + * - [Avatars](https://material-ui.com/components/avatars/) + * + * API: + * + * - [Avatar API](https://material-ui.com/api/avatar/) + */ declare const Avatar: OverridableComponent; export type AvatarClassKey = diff --git a/packages/material-ui/src/Backdrop/Backdrop.d.ts b/packages/material-ui/src/Backdrop/Backdrop.d.ts index cb36dd577a13f3..0deddf3c1e2d9a 100644 --- a/packages/material-ui/src/Backdrop/Backdrop.d.ts +++ b/packages/material-ui/src/Backdrop/Backdrop.d.ts @@ -26,4 +26,14 @@ export interface BackdropProps export type BackdropClassKey = 'root' | 'invisible'; +/** + * + * Demos: + * + * - [Backdrop](https://material-ui.com/components/backdrop/) + * + * API: + * + * - [Backdrop API](https://material-ui.com/api/backdrop/) + */ export default function Backdrop(props: BackdropProps): JSX.Element; diff --git a/packages/material-ui/src/Badge/Badge.d.ts b/packages/material-ui/src/Badge/Badge.d.ts index 32aa564b281e6d..91103a3ea2336c 100644 --- a/packages/material-ui/src/Badge/Badge.d.ts +++ b/packages/material-ui/src/Badge/Badge.d.ts @@ -65,7 +65,17 @@ export type BadgeClassKey = | 'anchorOriginBottomRightCircle' | 'anchorOriginTopLeftCircle' | 'invisible'; - +/** + * + * Demos: + * + * - [Avatars](https://material-ui.com/components/avatars/) + * - [Badges](https://material-ui.com/components/badges/) + * + * API: + * + * - [Badge API](https://material-ui.com/api/badge/) + */ declare const Badge: OverridableComponent; export type BadgeProps< diff --git a/packages/material-ui/src/BottomNavigation/BottomNavigation.d.ts b/packages/material-ui/src/BottomNavigation/BottomNavigation.d.ts index 132defc6f21476..c7a3a63778a4cb 100644 --- a/packages/material-ui/src/BottomNavigation/BottomNavigation.d.ts +++ b/packages/material-ui/src/BottomNavigation/BottomNavigation.d.ts @@ -23,7 +23,16 @@ export interface BottomNavigationTypeMap

; +/** + * + * Demos: + * + * - [Bottom Navigation](https://material-ui.com/components/bottom-navigation/) + * + * API: + * + * - [BottomNavigationAction API](https://material-ui.com/api/bottom-navigation-action/) + * - inherits [ButtonBase API](https://material-ui.com/api/button-base/) + */ declare const BottomNavigationAction: ExtendButtonBase< BottomNavigationActionTypeMap<{}, ButtonBaseTypeMap['defaultComponent']> >; diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.d.ts b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.d.ts index 5caeb57c9c9766..bc7884365c2c32 100644 --- a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.d.ts +++ b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.d.ts @@ -12,6 +12,16 @@ export interface BreadcrumbsTypeMap

classKey: BreadcrumbsClassKey; } +/** + * + * Demos: + * + * - [Breadcrumbs](https://material-ui.com/components/breadcrumbs/) + * + * API: + * + * - [Breadcrumbs API](https://material-ui.com/api/breadcrumbs/) + */ declare const Breadcrumbs: OverridableComponent; export type BreadcrumbsClassKey = 'root' | 'ol' | 'li' | 'separator'; diff --git a/packages/material-ui/src/Button/Button.d.ts b/packages/material-ui/src/Button/Button.d.ts index b3b4b1ee4a70c6..d09d8190453b65 100644 --- a/packages/material-ui/src/Button/Button.d.ts +++ b/packages/material-ui/src/Button/Button.d.ts @@ -21,6 +21,18 @@ export type ButtonTypeMap< classKey: ButtonClassKey; }>; +/** + * + * Demos: + * + * - [Button Group](https://material-ui.com/components/button-group/) + * - [Buttons](https://material-ui.com/components/buttons/) + * + * API: + * + * - [Button API](https://material-ui.com/api/button/) + * - inherits [ButtonBase API](https://material-ui.com/api/button-base/) + */ declare const Button: ExtendButtonBase; export type ButtonProps< diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.d.ts b/packages/material-ui/src/ButtonBase/ButtonBase.d.ts index cdfcde59733aec..9bbe235d87c2f5 100644 --- a/packages/material-ui/src/ButtonBase/ButtonBase.d.ts +++ b/packages/material-ui/src/ButtonBase/ButtonBase.d.ts @@ -38,6 +38,18 @@ export type ExtendButtonBase = (( ) => JSX.Element) & OverridableComponent>; +/** + * `ButtonBase` contains as few styles as possible. + * It aims to be a simple building block for creating a button. + * It contains a load of style reset and some focus/ripple logic. + * Demos: + * + * - [Buttons](https://material-ui.com/components/buttons/) + * + * API: + * + * - [ButtonBase API](https://material-ui.com/api/button-base/) + */ declare const ButtonBase: ExtendButtonBase; export type ButtonBaseProps< diff --git a/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts b/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts index 368fe962495050..7a2efa05fed7f9 100644 --- a/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts +++ b/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts @@ -17,6 +17,16 @@ export interface ButtonGroupTypeMap

classKey: ButtonGroupClassKey; } +/** + * + * Demos: + * + * - [Button Group](https://material-ui.com/components/button-group/) + * + * API: + * + * - [ButtonGroup API](https://material-ui.com/api/button-group/) + */ declare const ButtonGroup: OverridableComponent; export type ButtonGroupClassKey = diff --git a/packages/material-ui/src/Card/Card.d.ts b/packages/material-ui/src/Card/Card.d.ts index 0104856e1ed363..113111f40474d1 100644 --- a/packages/material-ui/src/Card/Card.d.ts +++ b/packages/material-ui/src/Card/Card.d.ts @@ -8,6 +8,17 @@ export interface CardProps extends StandardProps { export type CardClassKey = 'root'; +/** + * + * Demos: + * + * - [Cards](https://material-ui.com/components/cards/) + * + * API: + * + * - [Card API](https://material-ui.com/api/card/) + * - inherits [Paper API](https://material-ui.com/api/paper/) + */ declare const Card: React.ComponentType; export default Card; diff --git a/packages/material-ui/src/CardActionArea/CardActionArea.d.ts b/packages/material-ui/src/CardActionArea/CardActionArea.d.ts index 87041b49ada6d4..1cb5142c945507 100644 --- a/packages/material-ui/src/CardActionArea/CardActionArea.d.ts +++ b/packages/material-ui/src/CardActionArea/CardActionArea.d.ts @@ -9,6 +9,17 @@ export type CardActionAreaTypeMap = ExtendButton classKey: CardActionAreaClassKey; }>; +/** + * + * Demos: + * + * - [Cards](https://material-ui.com/components/cards/) + * + * API: + * + * - [CardActionArea API](https://material-ui.com/api/card-action-area/) + * - inherits [ButtonBase API](https://material-ui.com/api/button-base/) + */ declare const CardActionArea: ExtendButtonBase< CardActionAreaTypeMap<{}, ButtonBaseTypeMap['defaultComponent']> >; diff --git a/packages/material-ui/src/CardActions/CardActions.d.ts b/packages/material-ui/src/CardActions/CardActions.d.ts index e6e9421ec9c154..c7b138a5ecbeb2 100644 --- a/packages/material-ui/src/CardActions/CardActions.d.ts +++ b/packages/material-ui/src/CardActions/CardActions.d.ts @@ -8,6 +8,16 @@ export interface CardActionsProps export type CardActionsClassKey = 'root' | 'spacing'; +/** + * + * Demos: + * + * - [Cards](https://material-ui.com/components/cards/) + * + * API: + * + * - [CardActions API](https://material-ui.com/api/card-actions/) + */ declare const CardActions: React.ComponentType; export default CardActions; diff --git a/packages/material-ui/src/CardContent/CardContent.d.ts b/packages/material-ui/src/CardContent/CardContent.d.ts index f79d8b16b65bfb..f19e048222a711 100644 --- a/packages/material-ui/src/CardContent/CardContent.d.ts +++ b/packages/material-ui/src/CardContent/CardContent.d.ts @@ -6,7 +6,16 @@ export interface CardContentTypeMap

defaultComponent: D; classKey: CardContentClassKey; } - +/** + * + * Demos: + * + * - [Cards](https://material-ui.com/components/cards/) + * + * API: + * + * - [CardContent API](https://material-ui.com/api/card-content/) + */ declare const CardContent: OverridableComponent; export type CardContentClassKey = 'root'; diff --git a/packages/material-ui/src/CardHeader/CardHeader.d.ts b/packages/material-ui/src/CardHeader/CardHeader.d.ts index 3bb5a422b24bb5..0a3c3f564e2f8b 100644 --- a/packages/material-ui/src/CardHeader/CardHeader.d.ts +++ b/packages/material-ui/src/CardHeader/CardHeader.d.ts @@ -15,7 +15,16 @@ export interface CardHeaderTypeMap

defaultComponent: D; classKey: CardHeaderClassKey; } - +/** + * + * Demos: + * + * - [Cards](https://material-ui.com/components/cards/) + * + * API: + * + * - [CardHeader API](https://material-ui.com/api/card-header/) + */ declare const CardHeader: OverridableComponent; export type CardHeaderClassKey = 'root' | 'avatar' | 'action' | 'content' | 'title' | 'subheader'; diff --git a/packages/material-ui/src/CardMedia/CardMedia.d.ts b/packages/material-ui/src/CardMedia/CardMedia.d.ts index 3ab409785c3448..4c6baaa7046704 100644 --- a/packages/material-ui/src/CardMedia/CardMedia.d.ts +++ b/packages/material-ui/src/CardMedia/CardMedia.d.ts @@ -10,6 +10,16 @@ export interface CardMediaTypeMap { classKey: CardMediaClassKey; } +/** + * + * Demos: + * + * - [Cards](https://material-ui.com/components/cards/) + * + * API: + * + * - [CardMedia API](https://material-ui.com/api/card-media/) + */ declare const CardMedia: OverridableComponent>; export type CardMediaClassKey = 'root' | 'media'; diff --git a/packages/material-ui/src/Checkbox/Checkbox.d.ts b/packages/material-ui/src/Checkbox/Checkbox.d.ts index 6931df5620daa0..e5a28ca4fb5c17 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.d.ts +++ b/packages/material-ui/src/Checkbox/Checkbox.d.ts @@ -18,6 +18,18 @@ export type CheckboxClassKey = | 'colorPrimary' | 'colorSecondary'; +/** + * + * Demos: + * + * - [Checkboxes](https://material-ui.com/components/checkboxes/) + * - [Transfer List](https://material-ui.com/components/transfer-list/) + * + * API: + * + * - [Checkbox API](https://material-ui.com/api/checkbox/) + * - inherits [IconButton API](https://material-ui.com/api/icon-button/) + */ declare const Checkbox: React.ComponentType; export default Checkbox; diff --git a/packages/material-ui/src/Chip/Chip.d.ts b/packages/material-ui/src/Chip/Chip.d.ts index 03b02df927056b..e2d164623f6fd8 100644 --- a/packages/material-ui/src/Chip/Chip.d.ts +++ b/packages/material-ui/src/Chip/Chip.d.ts @@ -19,6 +19,16 @@ export interface ChipTypeMap

{ classKey: ChipClassKey; } +/** + * Chips represent complex entities in small blocks, such as a contact. + * Demos: + * + * - [Chips](https://material-ui.com/components/chips/) + * + * API: + * + * - [Chip API](https://material-ui.com/api/chip/) + */ declare const Chip: OverridableComponent; export type ChipClassKey = diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.d.ts b/packages/material-ui/src/CircularProgress/CircularProgress.d.ts index 898764051fe7f8..53fd3bea72aa57 100644 --- a/packages/material-ui/src/CircularProgress/CircularProgress.d.ts +++ b/packages/material-ui/src/CircularProgress/CircularProgress.d.ts @@ -23,6 +23,20 @@ export type CircularProgressClassKey = | 'circleIndeterminate' | 'circleDisableShrink'; +/** + * ## ARIA + * + * If the progress bar is describing the loading progress of a particular region of a page, + * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy` + * attribute to `true` on that region until it has finished loading. + * Demos: + * + * - [Progress](https://material-ui.com/components/progress/) + * + * API: + * + * - [CircularProgress API](https://material-ui.com/api/circular-progress/) + */ declare const CircularProgress: React.ComponentType; export default CircularProgress; diff --git a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.d.ts b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.d.ts index c8184f86d78107..d4d9179993f98b 100644 --- a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.d.ts +++ b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.d.ts @@ -7,6 +7,18 @@ export interface ClickAwayListenerProps { touchEvent?: 'onTouchStart' | 'onTouchEnd' | false; } +/** + * Listen for click events that occur somewhere in the document, outside of the element itself. + * For instance, if you need to hide a menu when people click anywhere else on your page. + * Demos: + * + * - [Click Away Listener](https://material-ui.com/components/click-away-listener/) + * - [Menus](https://material-ui.com/components/menus/) + * + * API: + * + * - [ClickAwayListener API](https://material-ui.com/api/click-away-listener/) + */ declare const ClickAwayListener: React.ComponentType; export default ClickAwayListener; diff --git a/packages/material-ui/src/Collapse/Collapse.d.ts b/packages/material-ui/src/Collapse/Collapse.d.ts index 19f6be1e45f17a..c49623260e2986 100644 --- a/packages/material-ui/src/Collapse/Collapse.d.ts +++ b/packages/material-ui/src/Collapse/Collapse.d.ts @@ -13,6 +13,21 @@ export interface CollapseProps extends StandardProps; export default Collapse; diff --git a/packages/material-ui/src/Container/Container.d.ts b/packages/material-ui/src/Container/Container.d.ts index 64a4ee00c8e26d..d56638613429ff 100644 --- a/packages/material-ui/src/Container/Container.d.ts +++ b/packages/material-ui/src/Container/Container.d.ts @@ -10,7 +10,16 @@ export interface ContainerTypeMap

{ defaultComponent: D; classKey: ContainerClassKey; } - +/** + * + * Demos: + * + * - [Container](https://material-ui.com/components/container/) + * + * API: + * + * - [Container API](https://material-ui.com/api/container/) + */ declare const Container: OverridableComponent; export type ContainerClassKey = diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.d.ts b/packages/material-ui/src/CssBaseline/CssBaseline.d.ts index a1dd5369948ce1..d4d8bdaa5f36a0 100644 --- a/packages/material-ui/src/CssBaseline/CssBaseline.d.ts +++ b/packages/material-ui/src/CssBaseline/CssBaseline.d.ts @@ -4,6 +4,16 @@ export interface CssBaselineProps { children?: React.ReactNode; } +/** + * Kickstart an elegant, consistent, and simple baseline to build upon. + * Demos: + * + * - [Css Baseline](https://material-ui.com/components/css-baseline/) + * + * API: + * + * - [CssBaseline API](https://material-ui.com/api/css-baseline/) + */ declare const CssBaseline: React.ComponentType; export type CssBaselineClassKey = '@global'; diff --git a/packages/material-ui/src/Dialog/Dialog.d.ts b/packages/material-ui/src/Dialog/Dialog.d.ts index 0e9cf170edc4b9..358a3b1f87fe2f 100644 --- a/packages/material-ui/src/Dialog/Dialog.d.ts +++ b/packages/material-ui/src/Dialog/Dialog.d.ts @@ -35,6 +35,17 @@ export type DialogClassKey = | 'paperFullWidth' | 'paperFullScreen'; +/** + * Dialogs are overlaid modal paper based components with a backdrop. + * Demos: + * + * - [Dialogs](https://material-ui.com/components/dialogs/) + * + * API: + * + * - [Dialog API](https://material-ui.com/api/dialog/) + * - inherits [Modal API](https://material-ui.com/api/modal/) + */ declare const Dialog: React.ComponentType; export default Dialog; diff --git a/packages/material-ui/src/DialogActions/DialogActions.d.ts b/packages/material-ui/src/DialogActions/DialogActions.d.ts index 3c9ca64f073567..02f0932a507e91 100644 --- a/packages/material-ui/src/DialogActions/DialogActions.d.ts +++ b/packages/material-ui/src/DialogActions/DialogActions.d.ts @@ -8,6 +8,16 @@ export interface DialogActionsProps export type DialogActionsClassKey = 'root' | 'spacing'; +/** + * + * Demos: + * + * - [Dialogs](https://material-ui.com/components/dialogs/) + * + * API: + * + * - [DialogActions API](https://material-ui.com/api/dialog-actions/) + */ declare const DialogActions: React.ComponentType; export default DialogActions; diff --git a/packages/material-ui/src/DialogContent/DialogContent.d.ts b/packages/material-ui/src/DialogContent/DialogContent.d.ts index d1fb737f6a18af..de79eae7ccc2fa 100644 --- a/packages/material-ui/src/DialogContent/DialogContent.d.ts +++ b/packages/material-ui/src/DialogContent/DialogContent.d.ts @@ -8,6 +8,16 @@ export interface DialogContentProps export type DialogContentClassKey = 'root' | 'dividers'; +/** + * + * Demos: + * + * - [Dialogs](https://material-ui.com/components/dialogs/) + * + * API: + * + * - [DialogContent API](https://material-ui.com/api/dialog-content/) + */ declare const DialogContent: React.ComponentType; export default DialogContent; diff --git a/packages/material-ui/src/DialogContentText/DialogContentText.d.ts b/packages/material-ui/src/DialogContentText/DialogContentText.d.ts index db3026ae7e7028..54f656437a5794 100644 --- a/packages/material-ui/src/DialogContentText/DialogContentText.d.ts +++ b/packages/material-ui/src/DialogContentText/DialogContentText.d.ts @@ -14,6 +14,17 @@ export interface DialogContentTextTypeMap< export type DialogContentTextClassKey = 'root'; +/** + * + * Demos: + * + * - [Dialogs](https://material-ui.com/components/dialogs/) + * + * API: + * + * - [DialogContentText API](https://material-ui.com/api/dialog-content-text/) + * - inherits [Typography API](https://material-ui.com/api/typography/) + */ declare const DialogContentText: OverridableComponent; export type DialogContentTextProps< diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.d.ts b/packages/material-ui/src/DialogTitle/DialogTitle.d.ts index 9b507422ea6bf0..189e3215990bca 100644 --- a/packages/material-ui/src/DialogTitle/DialogTitle.d.ts +++ b/packages/material-ui/src/DialogTitle/DialogTitle.d.ts @@ -8,6 +8,16 @@ export interface DialogTitleProps export type DialogTitleClassKey = 'root'; +/** + * + * Demos: + * + * - [Dialogs](https://material-ui.com/components/dialogs/) + * + * API: + * + * - [DialogTitle API](https://material-ui.com/api/dialog-title/) + */ declare const DialogTitle: React.ComponentType; export default DialogTitle; diff --git a/packages/material-ui/src/Divider/Divider.d.ts b/packages/material-ui/src/Divider/Divider.d.ts index 9866ac6f1e07ad..8094b9fc074492 100644 --- a/packages/material-ui/src/Divider/Divider.d.ts +++ b/packages/material-ui/src/Divider/Divider.d.ts @@ -12,6 +12,17 @@ export interface DividerTypeMap

{ classKey: DividerClassKey; } +/** + * + * Demos: + * + * - [Dividers](https://material-ui.com/components/dividers/) + * - [Lists](https://material-ui.com/components/lists/) + * + * API: + * + * - [Divider API](https://material-ui.com/api/divider/) + */ declare const Divider: OverridableComponent; export type DividerClassKey = 'root' | 'absolute' | 'inset' | 'light' | 'middle' | 'vertical'; diff --git a/packages/material-ui/src/Drawer/Drawer.d.ts b/packages/material-ui/src/Drawer/Drawer.d.ts index 3c41daf7d06349..28d4154432a353 100644 --- a/packages/material-ui/src/Drawer/Drawer.d.ts +++ b/packages/material-ui/src/Drawer/Drawer.d.ts @@ -38,6 +38,17 @@ export type DrawerClassKey = | 'paperAnchorDockedBottom' | 'modal'; +/** + * The props of the [Modal](https://material-ui.com/api/modal/) component are available + * when `variant="temporary"` is set. + * Demos: + * + * - [Drawers](https://material-ui.com/components/drawers/) + * + * API: + * + * - [Drawer API](https://material-ui.com/api/drawer/) + */ declare const Drawer: React.ComponentType; export default Drawer; diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.d.ts b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.d.ts index f54b6efcab151f..028aa02a69a9a4 100644 --- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.d.ts +++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.d.ts @@ -15,6 +15,17 @@ export interface ExpansionPanelProps export type ExpansionPanelClassKey = 'root' | 'rounded' | 'expanded' | 'disabled'; +/** + * + * Demos: + * + * - [Expansion Panels](https://material-ui.com/components/expansion-panels/) + * + * API: + * + * - [ExpansionPanel API](https://material-ui.com/api/expansion-panel/) + * - inherits [Paper API](https://material-ui.com/api/paper/) + */ declare const ExpansionPanel: React.ComponentType; export default ExpansionPanel; diff --git a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.d.ts b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.d.ts index b4fb6a6c9444f6..921edbec443295 100644 --- a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.d.ts +++ b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.d.ts @@ -6,6 +6,16 @@ export interface ExpansionPanelActionsProps export type ExpansionPanelActionsClassKey = 'root' | 'spacing'; +/** + * + * Demos: + * + * - [Expansion Panels](https://material-ui.com/components/expansion-panels/) + * + * API: + * + * - [ExpansionPanelActions API](https://material-ui.com/api/expansion-panel-actions/) + */ declare const ExpansionPanelActions: React.ComponentType; export default ExpansionPanelActions; diff --git a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.d.ts b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.d.ts index 53c1cbbeb24dd9..224e472b44144e 100644 --- a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.d.ts +++ b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.d.ts @@ -6,6 +6,16 @@ export interface ExpansionPanelDetailsProps export type ExpansionPanelDetailsClassKey = 'root'; +/** + * + * Demos: + * + * - [Expansion Panels](https://material-ui.com/components/expansion-panels/) + * + * API: + * + * - [ExpansionPanelDetails API](https://material-ui.com/api/expansion-panel-details/) + */ declare const ExpansionPanelDetails: React.ComponentType; export default ExpansionPanelDetails; diff --git a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.d.ts b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.d.ts index e40b2625af0f91..a8a859d7713eef 100644 --- a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.d.ts +++ b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.d.ts @@ -15,6 +15,17 @@ export type ExpansionPanelSummaryTypeMap< classKey: ExpansionPanelSummaryClassKey; }>; +/** + * + * Demos: + * + * - [Expansion Panels](https://material-ui.com/components/expansion-panels/) + * + * API: + * + * - [ExpansionPanelSummary API](https://material-ui.com/api/expansion-panel-summary/) + * - inherits [ButtonBase API](https://material-ui.com/api/button-base/) + */ declare const ExpansionPanelSummary: ExtendButtonBase; export type ExpansionPanelSummaryClassKey = diff --git a/packages/material-ui/src/Fab/Fab.d.ts b/packages/material-ui/src/Fab/Fab.d.ts index f88add00a69fd4..c8a449b86b4988 100644 --- a/packages/material-ui/src/Fab/Fab.d.ts +++ b/packages/material-ui/src/Fab/Fab.d.ts @@ -14,6 +14,17 @@ export type FabTypeMap

= ExtendB classKey: FabClassKey; }>; +/** + * + * Demos: + * + * - [Floating Action Button](https://material-ui.com/components/floating-action-button/) + * + * API: + * + * - [Fab API](https://material-ui.com/api/fab/) + * - inherits [ButtonBase API](https://material-ui.com/api/button-base/) + */ declare const Fab: ExtendButtonBase; export type FabProps< diff --git a/packages/material-ui/src/Fade/Fade.d.ts b/packages/material-ui/src/Fade/Fade.d.ts index 61b02a47136cfc..ca2f44435d21c9 100644 --- a/packages/material-ui/src/Fade/Fade.d.ts +++ b/packages/material-ui/src/Fade/Fade.d.ts @@ -7,6 +7,18 @@ export interface FadeProps extends TransitionProps { theme?: Theme; } +/** + * The Fade transition is used by the [Modal](https://material-ui.com/components/modal/) component. + * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. + * Demos: + * + * - [Transitions](https://material-ui.com/components/transitions/) + * + * API: + * + * - [Fade API](https://material-ui.com/api/fade/) + * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition#Transition-props) + */ declare const Fade: React.ComponentType; export default Fade; diff --git a/packages/material-ui/src/FilledInput/FilledInput.d.ts b/packages/material-ui/src/FilledInput/FilledInput.d.ts index 1dd0668f7dd93b..4aa90d11bd679c 100644 --- a/packages/material-ui/src/FilledInput/FilledInput.d.ts +++ b/packages/material-ui/src/FilledInput/FilledInput.d.ts @@ -8,6 +8,17 @@ export interface FilledInputProps extends StandardProps; export default FilledInput; diff --git a/packages/material-ui/src/FormControl/FormControl.d.ts b/packages/material-ui/src/FormControl/FormControl.d.ts index 23e35427d28468..09dca4729f4df2 100644 --- a/packages/material-ui/src/FormControl/FormControl.d.ts +++ b/packages/material-ui/src/FormControl/FormControl.d.ts @@ -18,6 +18,39 @@ export interface FormControlTypeMap

classKey: FormControlClassKey; } +/** + * Provides context such as filled/focused/error/required for form inputs. + * Relying on the context provides high flexibility and ensures that the state always stays + * consistent across the children of the `FormControl`. + * This context is used by the following components: + * + * - FormLabel + * - FormHelperText + * - Input + * - InputLabel + * + * You can find one composition example below and more going to [the demos](https://material-ui.com/components/text-fields/#components). + * + * ```jsx + * + * Email address + * + * We'll never share your email. + * + * ``` + * + * ⚠️Only one input can be used within a FormControl. + * Demos: + * + * - [Checkboxes](https://material-ui.com/components/checkboxes/) + * - [Radio Buttons](https://material-ui.com/components/radio-buttons/) + * - [Switches](https://material-ui.com/components/switches/) + * - [Text Fields](https://material-ui.com/components/text-fields/) + * + * API: + * + * - [FormControl API](https://material-ui.com/api/form-control/) + */ declare const FormControl: OverridableComponent; export type FormControlClassKey = 'root' | 'marginNormal' | 'marginDense' | 'fullWidth'; diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts b/packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts index d877ddaf85f88a..e2ff2b5d2d5811 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts @@ -26,6 +26,19 @@ export type FormControlLabelClassKey = | 'disabled' | 'label'; +/** + * Drop in replacement of the `Radio`, `Switch` and `Checkbox` component. + * Use this component if you want to display an extra label. + * Demos: + * + * - [Checkboxes](https://material-ui.com/components/checkboxes/) + * - [Radio Buttons](https://material-ui.com/components/radio-buttons/) + * - [Switches](https://material-ui.com/components/switches/) + * + * API: + * + * - [FormControlLabel API](https://material-ui.com/api/form-control-label/) + */ declare const FormControlLabel: React.ComponentType; export default FormControlLabel; diff --git a/packages/material-ui/src/FormGroup/FormGroup.d.ts b/packages/material-ui/src/FormGroup/FormGroup.d.ts index 9dce2af915b922..11a421a3c644c7 100644 --- a/packages/material-ui/src/FormGroup/FormGroup.d.ts +++ b/packages/material-ui/src/FormGroup/FormGroup.d.ts @@ -8,6 +8,19 @@ export interface FormGroupProps export type FormGroupClassKey = 'root' | 'row'; +/** + * `FormGroup` wraps controls such as `Checkbox` and `Switch`. + * It provides compact row layout. + * For the `Radio`, you should be using the `RadioGroup` component instead of this one. + * Demos: + * + * - [Checkboxes](https://material-ui.com/components/checkboxes/) + * - [Switches](https://material-ui.com/components/switches/) + * + * API: + * + * - [FormGroup API](https://material-ui.com/api/form-group/) + */ declare const FormGroup: React.ComponentType; export default FormGroup; diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.d.ts b/packages/material-ui/src/FormHelperText/FormHelperText.d.ts index bad06a1cd7a99f..1194526df04d76 100644 --- a/packages/material-ui/src/FormHelperText/FormHelperText.d.ts +++ b/packages/material-ui/src/FormHelperText/FormHelperText.d.ts @@ -14,7 +14,16 @@ export interface FormHelperTextTypeMap

; export type FormHelperTextClassKey = diff --git a/packages/material-ui/src/FormLabel/FormLabel.d.ts b/packages/material-ui/src/FormLabel/FormLabel.d.ts index dcf75a1c89f647..2aca7e945597ed 100644 --- a/packages/material-ui/src/FormLabel/FormLabel.d.ts +++ b/packages/material-ui/src/FormLabel/FormLabel.d.ts @@ -15,6 +15,18 @@ export interface FormLabelTypeMap

classKey: FormLabelClassKey; } +/** + * + * Demos: + * + * - [Checkboxes](https://material-ui.com/components/checkboxes/) + * - [Radio Buttons](https://material-ui.com/components/radio-buttons/) + * - [Switches](https://material-ui.com/components/switches/) + * + * API: + * + * - [FormLabel API](https://material-ui.com/api/form-label/) + */ declare const FormLabel: OverridableComponent; export type FormLabelClassKey = diff --git a/packages/material-ui/src/Grid/Grid.d.ts b/packages/material-ui/src/Grid/Grid.d.ts index c71e7afefc1c1b..191d1d8cfe7215 100644 --- a/packages/material-ui/src/Grid/Grid.d.ts +++ b/packages/material-ui/src/Grid/Grid.d.ts @@ -94,6 +94,16 @@ export interface GridTypeMap

{ classKey: GridClassKey; } +/** + * + * Demos: + * + * - [Grid](https://material-ui.com/components/grid/) + * + * API: + * + * - [Grid API](https://material-ui.com/api/grid/) + */ declare const Grid: OverridableComponent; export type GridProps< diff --git a/packages/material-ui/src/GridList/GridList.d.ts b/packages/material-ui/src/GridList/GridList.d.ts index 2598cf93851d3b..70be66c6df23a5 100644 --- a/packages/material-ui/src/GridList/GridList.d.ts +++ b/packages/material-ui/src/GridList/GridList.d.ts @@ -10,7 +10,16 @@ export interface GridListTypeMap

{ defaultComponent: D; classKey: GridListClassKey; } - +/** + * + * Demos: + * + * - [Grid List](https://material-ui.com/components/grid-list/) + * + * API: + * + * - [GridList API](https://material-ui.com/api/grid-list/) + */ declare const GridList: OverridableComponent; export type GridListClassKey = 'root'; diff --git a/packages/material-ui/src/GridListTile/GridListTile.d.ts b/packages/material-ui/src/GridListTile/GridListTile.d.ts index 958cb324e3ab17..8cc6c45f45e1a2 100644 --- a/packages/material-ui/src/GridListTile/GridListTile.d.ts +++ b/packages/material-ui/src/GridListTile/GridListTile.d.ts @@ -9,7 +9,16 @@ export interface GridListTileTypeMap

defaultComponent: D; classKey: GridListTileClassKey; } - +/** + * + * Demos: + * + * - [Grid List](https://material-ui.com/components/grid-list/) + * + * API: + * + * - [GridListTile API](https://material-ui.com/api/grid-list-tile/) + */ declare const GridListTile: OverridableComponent; export type GridListTileClassKey = 'root' | 'tile' | 'imgFullHeight' | 'imgFullWidth'; diff --git a/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts b/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts index 3565c3009c3a1d..e364c078bb672a 100644 --- a/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts +++ b/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts @@ -22,6 +22,16 @@ export type GridListTileBarClassKey = | 'actionIcon' | 'actionIconActionPosLeft'; +/** + * + * Demos: + * + * - [Grid List](https://material-ui.com/components/grid-list/) + * + * API: + * + * - [GridListTileBar API](https://material-ui.com/api/grid-list-tile-bar/) + */ declare const GridListTileBar: React.ComponentType; export default GridListTileBar; diff --git a/packages/material-ui/src/Grow/Grow.d.ts b/packages/material-ui/src/Grow/Grow.d.ts index f6e8e989b0ad85..f7e183836bbed5 100644 --- a/packages/material-ui/src/Grow/Grow.d.ts +++ b/packages/material-ui/src/Grow/Grow.d.ts @@ -9,6 +9,20 @@ export interface GrowProps extends Omit { timeout?: TransitionProps['timeout'] | 'auto'; } +/** + * The Grow transition is used by the [Tooltip](https://material-ui.com/components/tooltips/) and + * [Popover](https://material-ui.com/components/popover/) components. + * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally. + * Demos: + * + * - [Popover](https://material-ui.com/components/popover/) + * - [Transitions](https://material-ui.com/components/transitions/) + * + * API: + * + * - [Grow API](https://material-ui.com/api/grow/) + * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition#Transition-props) + */ declare const Grow: React.ComponentType; export default Grow; diff --git a/packages/material-ui/src/Hidden/Hidden.d.ts b/packages/material-ui/src/Hidden/Hidden.d.ts index d7a2285e96e375..663f218fc1a634 100644 --- a/packages/material-ui/src/Hidden/Hidden.d.ts +++ b/packages/material-ui/src/Hidden/Hidden.d.ts @@ -17,6 +17,16 @@ export interface HiddenProps { xsUp?: boolean; } +/** + * Responsively hides children based on the selected implementation. + * Demos: + * + * - [Hidden](https://material-ui.com/components/hidden/) + * + * API: + * + * - [Hidden API](https://material-ui.com/api/hidden/) + */ declare const Hidden: React.ComponentType; export default Hidden; diff --git a/packages/material-ui/src/Icon/Icon.d.ts b/packages/material-ui/src/Icon/Icon.d.ts index 98d08d787e7d21..b2d176b41014b2 100644 --- a/packages/material-ui/src/Icon/Icon.d.ts +++ b/packages/material-ui/src/Icon/Icon.d.ts @@ -10,7 +10,17 @@ export interface IconTypeMap

{ defaultComponent: D; classKey: IconClassKey; } - +/** + * + * Demos: + * + * - [Icons](https://material-ui.com/components/icons/) + * - [Material Icons](https://material-ui.com/components/material-icons/) + * + * API: + * + * - [Icon API](https://material-ui.com/api/icon/) + */ declare const Icon: OverridableComponent; export type IconClassKey = diff --git a/packages/material-ui/src/IconButton/IconButton.d.ts b/packages/material-ui/src/IconButton/IconButton.d.ts index 8f4050f1c4c1aa..90ec38cf8931cd 100644 --- a/packages/material-ui/src/IconButton/IconButton.d.ts +++ b/packages/material-ui/src/IconButton/IconButton.d.ts @@ -16,6 +16,19 @@ export type IconButtonTypeMap< classKey: IconButtonClassKey; }>; +/** + * Refer to the [Icons](https://material-ui.com/components/icons/) section of the documentation + * regarding the available icon options. + * Demos: + * + * - [Buttons](https://material-ui.com/components/buttons/) + * - [Grid List](https://material-ui.com/components/grid-list/) + * + * API: + * + * - [IconButton API](https://material-ui.com/api/icon-button/) + * - inherits [ButtonBase API](https://material-ui.com/api/button-base/) + */ declare const IconButton: ExtendButtonBase; export type IconButtonClassKey = diff --git a/packages/material-ui/src/Input/Input.d.ts b/packages/material-ui/src/Input/Input.d.ts index 69d0e2a23c32e6..768aba37c8a45f 100644 --- a/packages/material-ui/src/Input/Input.d.ts +++ b/packages/material-ui/src/Input/Input.d.ts @@ -22,6 +22,17 @@ export type InputClassKey = | 'inputMultiline' | 'inputTypeSearch'; +/** + * + * Demos: + * + * - [Text Fields](https://material-ui.com/components/text-fields/) + * + * API: + * + * - [Input API](https://material-ui.com/api/input/) + * - inherits [InputBase API](https://material-ui.com/api/input-base/) + */ declare const Input: React.ComponentType; export default Input; diff --git a/packages/material-ui/src/InputAdornment/InputAdornment.d.ts b/packages/material-ui/src/InputAdornment/InputAdornment.d.ts index d1c94e09c25f00..1b5587dd7750ae 100644 --- a/packages/material-ui/src/InputAdornment/InputAdornment.d.ts +++ b/packages/material-ui/src/InputAdornment/InputAdornment.d.ts @@ -11,7 +11,16 @@ export interface InputAdornmentTypeMap

; export default InputBase; diff --git a/packages/material-ui/src/InputLabel/InputLabel.d.ts b/packages/material-ui/src/InputLabel/InputLabel.d.ts index 4fd58506110278..c5ca70925119b5 100644 --- a/packages/material-ui/src/InputLabel/InputLabel.d.ts +++ b/packages/material-ui/src/InputLabel/InputLabel.d.ts @@ -27,6 +27,17 @@ export type InputLabelClassKey = | 'filled' | 'outlined'; +/** + * + * Demos: + * + * - [Text Fields](https://material-ui.com/components/text-fields/) + * + * API: + * + * - [InputLabel API](https://material-ui.com/api/input-label/) + * - inherits [FormLabel API](https://material-ui.com/api/form-label/) + */ declare const InputLabel: React.ComponentType; export default InputLabel; diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.d.ts b/packages/material-ui/src/LinearProgress/LinearProgress.d.ts index 6d2f9b37d5d121..e47e8e59b8c24c 100644 --- a/packages/material-ui/src/LinearProgress/LinearProgress.d.ts +++ b/packages/material-ui/src/LinearProgress/LinearProgress.d.ts @@ -29,6 +29,20 @@ export type LinearProgressClassKey = | 'bar1Buffer' | 'bar2Buffer'; +/** + * ## ARIA + * + * If the progress bar is describing the loading progress of a particular region of a page, + * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy` + * attribute to `true` on that region until it has finished loading. + * Demos: + * + * - [Progress](https://material-ui.com/components/progress/) + * + * API: + * + * - [LinearProgress API](https://material-ui.com/api/linear-progress/) + */ declare const LinearProgress: React.ComponentType; export default LinearProgress; diff --git a/packages/material-ui/src/Link/Link.d.ts b/packages/material-ui/src/Link/Link.d.ts index 79b820a9bdd99b..66875403418a76 100644 --- a/packages/material-ui/src/Link/Link.d.ts +++ b/packages/material-ui/src/Link/Link.d.ts @@ -13,6 +13,18 @@ export interface LinkTypeMap

{ classKey: LinkClassKey; } +/** + * + * Demos: + * + * - [Breadcrumbs](https://material-ui.com/components/breadcrumbs/) + * - [Links](https://material-ui.com/components/links/) + * + * API: + * + * - [Link API](https://material-ui.com/api/link/) + * - inherits [Typography API](https://material-ui.com/api/typography/) + */ declare const Link: OverridableComponent; export type LinkClassKey = diff --git a/packages/material-ui/src/List/List.d.ts b/packages/material-ui/src/List/List.d.ts index e7792466c502b3..7387f8def2128d 100644 --- a/packages/material-ui/src/List/List.d.ts +++ b/packages/material-ui/src/List/List.d.ts @@ -11,6 +11,17 @@ export interface ListTypeMap

{ classKey: ListClassKey; } +/** + * + * Demos: + * + * - [Lists](https://material-ui.com/components/lists/) + * - [Transfer List](https://material-ui.com/components/transfer-list/) + * + * API: + * + * - [List API](https://material-ui.com/api/list/) + */ declare const List: OverridableComponent; export type ListClassKey = 'root' | 'padding' | 'dense' | 'subheader'; diff --git a/packages/material-ui/src/ListItem/ListItem.d.ts b/packages/material-ui/src/ListItem/ListItem.d.ts index 5064222a3d2347..e8a8a549eb270e 100644 --- a/packages/material-ui/src/ListItem/ListItem.d.ts +++ b/packages/material-ui/src/ListItem/ListItem.d.ts @@ -20,6 +20,17 @@ export interface ListItemTypeMap { classKey: ListItemClassKey; } +/** + * Uses an additional container component if `ListItemSecondaryAction` is the last child. + * Demos: + * + * - [Lists](https://material-ui.com/components/lists/) + * - [Transfer List](https://material-ui.com/components/transfer-list/) + * + * API: + * + * - [ListItem API](https://material-ui.com/api/list-item/) + */ declare const ListItem: OverridableComponent> & ExtendButtonBase>; diff --git a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.d.ts b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.d.ts index ff9c5e6d442591..21463c0d2392a6 100644 --- a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.d.ts +++ b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.d.ts @@ -6,6 +6,16 @@ export interface ListItemAvatarProps extends StandardProps<{}, ListItemAvatarCla export type ListItemAvatarClassKey = 'root' | 'icon'; +/** + * A simple wrapper to apply `List` styles to an `Avatar`. + * Demos: + * + * - [Lists](https://material-ui.com/components/lists/) + * + * API: + * + * - [ListItemAvatar API](https://material-ui.com/api/list-item-avatar/) + */ declare const ListItemAvatar: React.ComponentType; export default ListItemAvatar; diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.d.ts b/packages/material-ui/src/ListItemIcon/ListItemIcon.d.ts index ee9f375d3f10af..24ceab7eee575b 100644 --- a/packages/material-ui/src/ListItemIcon/ListItemIcon.d.ts +++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.d.ts @@ -7,6 +7,16 @@ export interface ListItemIconProps export type ListItemIconClassKey = 'root'; +/** + * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`. + * Demos: + * + * - [Lists](https://material-ui.com/components/lists/) + * + * API: + * + * - [ListItemIcon API](https://material-ui.com/api/list-item-icon/) + */ declare const ListItemIcon: React.ComponentType; export default ListItemIcon; diff --git a/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.d.ts b/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.d.ts index 0f556459bbf934..1193bb8de299a9 100644 --- a/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.d.ts +++ b/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.d.ts @@ -5,6 +5,16 @@ export interface ListItemSecondaryActionProps export type ListItemSecondaryActionClassKey = 'root'; +/** + * Must be used as the last child of ListItem to function properly. + * Demos: + * + * - [Lists](https://material-ui.com/components/lists/) + * + * API: + * + * - [ListItemSecondaryAction API](https://material-ui.com/api/list-item-secondary-action/) + */ declare const ListItemSecondaryAction: React.ComponentType; export default ListItemSecondaryAction; diff --git a/packages/material-ui/src/ListItemText/ListItemText.d.ts b/packages/material-ui/src/ListItemText/ListItemText.d.ts index 9d5c98b9ee0b57..9ea6fd3282b146 100644 --- a/packages/material-ui/src/ListItemText/ListItemText.d.ts +++ b/packages/material-ui/src/ListItemText/ListItemText.d.ts @@ -55,7 +55,16 @@ export type ListItemTextClassKey = | 'inset' | 'primary' | 'secondary'; - +/** + * + * Demos: + * + * - [Lists](https://material-ui.com/components/lists/) + * + * API: + * + * - [ListItemText API](https://material-ui.com/api/list-item-text/) + */ export default function ListItemText< PrimaryTypographyComponent extends React.ElementType = 'span', SecondaryTypographyComponent extends React.ElementType = 'p' diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.d.ts b/packages/material-ui/src/ListSubheader/ListSubheader.d.ts index 757bdb92b45a99..046678fd4f7e09 100644 --- a/packages/material-ui/src/ListSubheader/ListSubheader.d.ts +++ b/packages/material-ui/src/ListSubheader/ListSubheader.d.ts @@ -13,6 +13,17 @@ export interface ListSubheaderTypeMap

; export type ListSubheaderClassKey = diff --git a/packages/material-ui/src/Menu/Menu.d.ts b/packages/material-ui/src/Menu/Menu.d.ts index 8198fd9a9cc209..b417acdbbdb8e7 100644 --- a/packages/material-ui/src/Menu/Menu.d.ts +++ b/packages/material-ui/src/Menu/Menu.d.ts @@ -18,6 +18,18 @@ export interface MenuProps export type MenuClassKey = 'paper' | 'list'; +/** + * + * Demos: + * + * - [App Bar](https://material-ui.com/components/app-bar/) + * - [Menus](https://material-ui.com/components/menus/) + * + * API: + * + * - [Menu API](https://material-ui.com/api/menu/) + * - inherits [Popover API](https://material-ui.com/api/popover/) + */ declare const Menu: React.ComponentType; export default Menu; diff --git a/packages/material-ui/src/MenuItem/MenuItem.d.ts b/packages/material-ui/src/MenuItem/MenuItem.d.ts index 54a40eceb8d6a1..a412b4cbc052b8 100644 --- a/packages/material-ui/src/MenuItem/MenuItem.d.ts +++ b/packages/material-ui/src/MenuItem/MenuItem.d.ts @@ -12,6 +12,17 @@ export type MenuItemTypeMap

= Omit< classKey: MenuItemClassKey; }; +/** + * + * Demos: + * + * - [Menus](https://material-ui.com/components/menus/) + * + * API: + * + * - [MenuItem API](https://material-ui.com/api/menu-item/) + * - inherits [ListItem API](https://material-ui.com/api/list-item/) + */ declare const MenuItem: OverridableComponent< MenuItemTypeMap<{ button: false }, MenuItemTypeMap['defaultComponent']> > & diff --git a/packages/material-ui/src/MenuList/MenuList.d.ts b/packages/material-ui/src/MenuList/MenuList.d.ts index 2dd82b3453c7f7..43e753e40b53f6 100644 --- a/packages/material-ui/src/MenuList/MenuList.d.ts +++ b/packages/material-ui/src/MenuList/MenuList.d.ts @@ -11,6 +11,20 @@ export interface MenuListProps extends StandardProps. + * It's exposed to help customization of the [`Menu`](https://material-ui.com/api/menu/) component. If you + * use it separately you need to move focus into the component manually. Once + * the focus is placed inside the component it is fully keyboard accessible. + * Demos: + * + * - [Menus](https://material-ui.com/components/menus/) + * + * API: + * + * - [MenuList API](https://material-ui.com/api/menu-list/) + * - inherits [List API](https://material-ui.com/api/list/) + */ declare const MenuList: React.ComponentType; export default MenuList; diff --git a/packages/material-ui/src/MenuList/MenuList.js b/packages/material-ui/src/MenuList/MenuList.js index 4b9f32a7073ab0..da1d9798227473 100644 --- a/packages/material-ui/src/MenuList/MenuList.js +++ b/packages/material-ui/src/MenuList/MenuList.js @@ -78,7 +78,7 @@ function moveFocus(list, currentFocus, disableListWrap, traversalFunction, textC const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect; /** - * A permanently displayed menu following https://www.w3.org/TR/wai-aria-practices/#menubutton + * A permanently displayed menu following https://www.w3.org/TR/wai-aria-practices/#menubutton. * It's exposed to help customization of the [`Menu`](/api/menu/) component. If you * use it separately you need to move focus into the component manually. Once * the focus is placed inside the component it is fully keyboard accessible. diff --git a/packages/material-ui/src/MobileStepper/MobileStepper.d.ts b/packages/material-ui/src/MobileStepper/MobileStepper.d.ts index fe9250a76480ca..807b8d1d44c0e3 100644 --- a/packages/material-ui/src/MobileStepper/MobileStepper.d.ts +++ b/packages/material-ui/src/MobileStepper/MobileStepper.d.ts @@ -24,6 +24,17 @@ export type MobileStepperClassKey = | 'dotActive' | 'progress'; +/** + * + * Demos: + * + * - [Steppers](https://material-ui.com/components/steppers/) + * + * API: + * + * - [MobileStepper API](https://material-ui.com/api/mobile-stepper/) + * - inherits [Paper API](https://material-ui.com/api/paper/) + */ declare const MobileStepper: React.ComponentType; export default MobileStepper; diff --git a/packages/material-ui/src/Modal/Modal.d.ts b/packages/material-ui/src/Modal/Modal.d.ts index 90456de7567bf0..17b1788d670550 100644 --- a/packages/material-ui/src/Modal/Modal.d.ts +++ b/packages/material-ui/src/Modal/Modal.d.ts @@ -29,6 +29,26 @@ export interface ModalProps open: boolean; } +/** + * Modal is a lower-level construct that is leveraged by the following components: + * + * - [Dialog](https://material-ui.com/api/dialog/) + * - [Drawer](https://material-ui.com/api/drawer/) + * - [Menu](https://material-ui.com/api/menu/) + * - [Popover](https://material-ui.com/api/popover/) + * + * If you are creating a modal dialog, you probably want to use the [Dialog](https://material-ui.com/api/dialog/) component + * rather than directly using Modal. + * + * This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals). + * Demos: + * + * - [Modal](https://material-ui.com/components/modal/) + * + * API: + * + * - [Modal API](https://material-ui.com/api/modal/) + */ declare const Modal: React.ComponentType; export default Modal; diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.d.ts b/packages/material-ui/src/NativeSelect/NativeSelect.d.ts index 65930036695dc8..5e1bfe44e8a408 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.d.ts +++ b/packages/material-ui/src/NativeSelect/NativeSelect.d.ts @@ -23,6 +23,17 @@ export type NativeSelectClassKey = | 'iconFilled' | 'iconOutlined'; +/** + * An alternative to `