From bd67cdf7c521f763f2c0cdb425b02f438b83d6a4 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sun, 22 Mar 2020 13:55:19 +0100 Subject: [PATCH 01/15] chore: format all ts files --- scripts/generateProptypes.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index 7926bafad120c8..f726397a0567fc 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -75,6 +75,7 @@ async function generateProptypes( prop.jsDoc = prop.jsDoc.replace(documentRegExp, ''); return true; } + console.log(prop); return undefined; }, From 1b584943ef0e452eedb4365aa5c30a77974b1b82 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sun, 22 Mar 2020 14:27:59 +0100 Subject: [PATCH 02/15] Use yargs --- scripts/generateProptypes.ts | 40 ++++++++++++++++++++++++++++-------- 1 file changed, 31 insertions(+), 9 deletions(-) diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index f726397a0567fc..6c6712d07e6a7f 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -5,13 +5,11 @@ import * as prettier from 'prettier'; import * as globCallback from 'glob'; import { promisify } from 'util'; import * as _ from 'lodash'; +import * as yargs from 'yargs'; import { fixBabelGeneratorIssues, fixLineEndings } from '../docs/scripts/helpers'; const glob = promisify(globCallback); -const ignoreCache = process.argv.includes('--disable-cache'); -const verbose = process.argv.includes('--verbose'); - enum GenerateResult { Success, Skipped, @@ -75,7 +73,6 @@ async function generateProptypes( prop.jsDoc = prop.jsDoc.replace(documentRegExp, ''); return true; } - console.log(prop); return undefined; }, @@ -93,7 +90,13 @@ async function generateProptypes( return GenerateResult.Success; } -async function run() { +interface HandlerArgv { + 'ignore-cache': boolean; + verbose: boolean; +} +async function run(argv: HandlerArgv) { + const { 'ignore-cache': ignoreCache, verbose } = argv; + // Matches files where the folder and file both start with uppercase letters // Example: AppBar/AppBar.d.ts @@ -150,7 +153,26 @@ async function run() { console.log('Total: %d', results.length); } -run().catch((error) => { - console.error(error); - process.exit(1); -}); +yargs + .command({ + command: '$0', + describe: 'formats codebase', + builder: (command) => { + return command + .option('ignore-cache', { + default: false, + describe: 'Considers all files on every run', + type: 'boolean', + }) + .option('verbose', { + default: false, + describe: 'Logs result for each file', + type: 'boolean', + }); + }, + handler: run, + }) + .help() + .strict(true) + .version(false) + .parse(); From 474b11b7ad198fff2f7a51a6bc5610f20aa39768 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sun, 22 Mar 2020 14:40:54 +0100 Subject: [PATCH 03/15] add ability to filter --- scripts/generateProptypes.ts | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index 6c6712d07e6a7f..ab46f9acf2e4c9 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -92,10 +92,16 @@ async function generateProptypes( interface HandlerArgv { 'ignore-cache': boolean; + pattern: string; verbose: boolean; } async function run(argv: HandlerArgv) { - const { 'ignore-cache': ignoreCache, verbose } = argv; + const { 'ignore-cache': ignoreCache, pattern, verbose } = argv; + + const filePattern = new RegExp(pattern); + if (pattern.length > 0) { + console.log(`Only considering declaration files matching ${filePattern}`); + } // Matches files where the folder and file both start with uppercase letters // Example: AppBar/AppBar.d.ts @@ -112,7 +118,7 @@ async function run(argv: HandlerArgv) { ), ); - const files = _.flatten(allFiles) + const programFiles = _.flatten(allFiles) // Filter out files where the directory name and filename doesn't match // Example: Modal/ModalManager.d.ts .filter((filePath) => { @@ -121,8 +127,13 @@ async function run(argv: HandlerArgv) { return fileName === folderName; }); + // I believe that the program still needs every file + // for import-extends. Not sure but compiling all to be sure + const program = ttp.createProgram(programFiles, tsconfig); - const program = ttp.createProgram(files, tsconfig); + const files = programFiles.filter((filePath) => { + return filePattern.test(filePath); + }); const promises = files.map>(async (tsFile) => { const jsFile = tsFile.replace('.d.ts', '.js'); @@ -168,6 +179,11 @@ yargs default: false, describe: 'Logs result for each file', type: 'boolean', + }) + .option('pattern', { + default: '', + describe: 'Only considers declaration files matching this pattern.', + type: 'string', }); }, handler: run, From 33a6073bc53e9c3ce6b5ef2aea7075d90275715e Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 24 Mar 2020 22:11:28 +0100 Subject: [PATCH 04/15] [docs] Add more props documentation to IntelliSense --- packages/material-ui/src/Card/Card.d.ts | 7 +- packages/material-ui/src/Card/Card.js | 6 +- .../src/CardActions/CardActions.d.ts | 7 +- .../src/CardActions/CardActions.js | 6 +- .../material-ui/src/Collapse/Collapse.d.ts | 39 +++++++- packages/material-ui/src/Collapse/Collapse.js | 16 +++- .../src/DialogActions/DialogActions.d.ts | 7 +- .../src/DialogActions/DialogActions.js | 6 +- .../src/DialogContent/DialogContent.d.ts | 7 +- .../src/DialogContent/DialogContent.js | 6 +- .../src/DialogTitle/DialogTitle.d.ts | 8 +- .../src/DialogTitle/DialogTitle.js | 8 +- packages/material-ui/src/Drawer/Drawer.d.ts | 35 ++++++- packages/material-ui/src/Drawer/Drawer.js | 14 ++- .../ExpansionPanelActions.d.ts | 7 +- .../ExpansionPanelActions.js | 8 +- .../ExpansionPanelDetails.d.ts | 7 +- .../ExpansionPanelDetails.js | 8 +- packages/material-ui/src/Fade/Fade.d.ts | 14 ++- packages/material-ui/src/Fade/Fade.js | 12 ++- .../material-ui/src/FormGroup/FormGroup.d.ts | 7 +- .../material-ui/src/FormGroup/FormGroup.js | 6 +- .../src/GridListTileBar/GridListTileBar.d.ts | 20 +++- .../src/GridListTileBar/GridListTileBar.js | 8 +- packages/material-ui/src/Grow/Grow.d.ts | 25 ++++- packages/material-ui/src/Grow/Grow.js | 12 ++- packages/material-ui/src/Hidden/Hidden.d.ts | 48 ++++++++++ .../src/LinearProgress/LinearProgress.d.ts | 21 +++- .../src/LinearProgress/LinearProgress.js | 8 +- .../src/ListItemAvatar/ListItemAvatar.d.ts | 3 + .../src/ListItemAvatar/ListItemAvatar.js | 6 +- .../src/ListItemIcon/ListItemIcon.d.ts | 8 +- .../src/ListItemIcon/ListItemIcon.js | 6 +- packages/material-ui/src/Menu/Menu.d.ts | 80 +++++++++++++++- packages/material-ui/src/Menu/Menu.js | 18 ++-- .../material-ui/src/MenuList/MenuList.d.ts | 18 ++++ packages/material-ui/src/MenuList/MenuList.js | 6 +- .../src/MobileStepper/MobileStepper.d.ts | 28 +++++- .../src/MobileStepper/MobileStepper.js | 13 ++- packages/material-ui/src/NoSsr/NoSsr.d.ts | 14 ++- packages/material-ui/src/NoSsr/NoSsr.js | 4 + packages/material-ui/src/Paper/Paper.d.ts | 18 +++- packages/material-ui/src/Paper/Paper.js | 6 +- .../src/RadioGroup/RadioGroup.d.ts | 21 +++- .../material-ui/src/RadioGroup/RadioGroup.js | 33 ++++--- .../material-ui/src/Snackbar/Snackbar.d.ts | 96 ++++++++++++++++++- packages/material-ui/src/Snackbar/Snackbar.js | 16 +++- 47 files changed, 658 insertions(+), 119 deletions(-) diff --git a/packages/material-ui/src/Card/Card.d.ts b/packages/material-ui/src/Card/Card.d.ts index 113111f40474d1..684339eab7cda0 100644 --- a/packages/material-ui/src/Card/Card.d.ts +++ b/packages/material-ui/src/Card/Card.d.ts @@ -3,6 +3,9 @@ import { StandardProps } from '..'; import { PaperProps } from '../Paper'; export interface CardProps extends StandardProps { + /** + * If `true`, the card will use raised styling. + */ raised?: boolean; } @@ -19,6 +22,4 @@ export type CardClassKey = 'root'; * - [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; +export default function Card(props: CardProps): JSX.Element; diff --git a/packages/material-ui/src/Card/Card.js b/packages/material-ui/src/Card/Card.js index 42df3f421d6ba7..71c7d9ce7e31b3 100644 --- a/packages/material-ui/src/Card/Card.js +++ b/packages/material-ui/src/Card/Card.js @@ -25,6 +25,10 @@ const Card = React.forwardRef(function Card(props, ref) { }); Card.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The content of the component. */ @@ -33,7 +37,7 @@ Card.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ diff --git a/packages/material-ui/src/CardActions/CardActions.d.ts b/packages/material-ui/src/CardActions/CardActions.d.ts index c7b138a5ecbeb2..0b24a5b78df3da 100644 --- a/packages/material-ui/src/CardActions/CardActions.d.ts +++ b/packages/material-ui/src/CardActions/CardActions.d.ts @@ -3,6 +3,9 @@ import { StandardProps } from '..'; export interface CardActionsProps extends StandardProps, CardActionsClassKey> { + /** + * If `true`, the actions do not have additional margin. + */ disableSpacing?: boolean; } @@ -18,6 +21,4 @@ export type CardActionsClassKey = 'root' | 'spacing'; * * - [CardActions API](https://material-ui.com/api/card-actions/) */ -declare const CardActions: React.ComponentType; - -export default CardActions; +export default function CardActions(props: CardActionsProps): JSX.Element; diff --git a/packages/material-ui/src/CardActions/CardActions.js b/packages/material-ui/src/CardActions/CardActions.js index 86aa4e8d22d0a1..e2499ce6e3996e 100644 --- a/packages/material-ui/src/CardActions/CardActions.js +++ b/packages/material-ui/src/CardActions/CardActions.js @@ -31,6 +31,10 @@ const CardActions = React.forwardRef(function CardActions(props, ref) { }); CardActions.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The content of the component. */ @@ -39,7 +43,7 @@ CardActions.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ diff --git a/packages/material-ui/src/Collapse/Collapse.d.ts b/packages/material-ui/src/Collapse/Collapse.d.ts index c49623260e2986..356285615cd0b0 100644 --- a/packages/material-ui/src/Collapse/Collapse.d.ts +++ b/packages/material-ui/src/Collapse/Collapse.d.ts @@ -4,10 +4,44 @@ import { Theme } from '../styles/createMuiTheme'; import { TransitionProps } from '../transitions/transition'; export interface CollapseProps extends StandardProps { + /** + * The content node to be collapsed. + */ children?: React.ReactNode; + /** + * The height of the container when collapsed. + */ collapsedHeight?: string | number; + /** + * The component used for the root node. + * Either a string to use a DOM element or a component. + */ component?: React.ElementType; - theme?: Theme; + /** + * If `true`, the component will transition in. + */ + in?: boolean; + /** + */ + onEnter?: TransitionProps['onEnter']; + /** + */ + onEntered?: TransitionProps['onEntered']; + /** + */ + onEntering?: TransitionProps['onEntering']; + /** + */ + onExit?: TransitionProps['onExit']; + /** + */ + onExiting?: TransitionProps['onExiting']; + /** + * The duration for the transition, in milliseconds. + * You may specify a single timeout for all transitions, or individually with an object. + * + * Set to 'auto' to automatically calculate transition time based on height. + */ timeout?: TransitionProps['timeout'] | 'auto'; } @@ -28,6 +62,5 @@ export type CollapseClassKey = 'container' | 'entered' | 'hidden' | 'wrapper' | * - [Collapse API](https://material-ui.com/api/collapse/) * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition#Transition-props) */ -declare const Collapse: React.ComponentType; -export default Collapse; +export default function Collapse(props: CollapseProps): JSX.Element; diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js index 80389e4a955fd7..88c812840d259e 100644 --- a/packages/material-ui/src/Collapse/Collapse.js +++ b/packages/material-ui/src/Collapse/Collapse.js @@ -191,6 +191,10 @@ const Collapse = React.forwardRef(function Collapse(props, ref) { }); Collapse.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The content node to be collapsed. */ @@ -199,7 +203,7 @@ Collapse.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ @@ -207,7 +211,7 @@ Collapse.propTypes = { /** * The height of the container when collapsed. */ - collapsedHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + collapsedHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * The component used for the root node. * Either a string to use a DOM element or a component. @@ -248,9 +252,13 @@ Collapse.propTypes = { * Set to 'auto' to automatically calculate transition time based on height. */ timeout: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), PropTypes.oneOf(['auto']), + PropTypes.number, + PropTypes.shape({ + appear: PropTypes.number, + enter: PropTypes.number, + exit: PropTypes.number, + }), ]), }; diff --git a/packages/material-ui/src/DialogActions/DialogActions.d.ts b/packages/material-ui/src/DialogActions/DialogActions.d.ts index 02f0932a507e91..dc913bb5c3338f 100644 --- a/packages/material-ui/src/DialogActions/DialogActions.d.ts +++ b/packages/material-ui/src/DialogActions/DialogActions.d.ts @@ -3,6 +3,9 @@ import { StandardProps } from '..'; export interface DialogActionsProps extends StandardProps, DialogActionsClassKey> { + /** + * If `true`, the actions do not have additional margin. + */ disableSpacing?: boolean; } @@ -18,6 +21,4 @@ export type DialogActionsClassKey = 'root' | 'spacing'; * * - [DialogActions API](https://material-ui.com/api/dialog-actions/) */ -declare const DialogActions: React.ComponentType; - -export default DialogActions; +export default function DialogActions(props: DialogActionsProps): JSX.Eleement; diff --git a/packages/material-ui/src/DialogActions/DialogActions.js b/packages/material-ui/src/DialogActions/DialogActions.js index 3d900c05697f3e..ba1553a2ab495f 100644 --- a/packages/material-ui/src/DialogActions/DialogActions.js +++ b/packages/material-ui/src/DialogActions/DialogActions.js @@ -33,6 +33,10 @@ const DialogActions = React.forwardRef(function DialogActions(props, ref) { }); DialogActions.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The content of the component. */ @@ -41,7 +45,7 @@ DialogActions.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ diff --git a/packages/material-ui/src/DialogContent/DialogContent.d.ts b/packages/material-ui/src/DialogContent/DialogContent.d.ts index de79eae7ccc2fa..3d86c2cca47657 100644 --- a/packages/material-ui/src/DialogContent/DialogContent.d.ts +++ b/packages/material-ui/src/DialogContent/DialogContent.d.ts @@ -3,6 +3,9 @@ import { StandardProps } from '..'; export interface DialogContentProps extends StandardProps, DialogContentClassKey> { + /** + * Display the top and bottom dividers. + */ dividers?: boolean; } @@ -18,6 +21,4 @@ export type DialogContentClassKey = 'root' | 'dividers'; * * - [DialogContent API](https://material-ui.com/api/dialog-content/) */ -declare const DialogContent: React.ComponentType; - -export default DialogContent; +export default function DialogContent(props: DialogContentProps): JSX.Element; diff --git a/packages/material-ui/src/DialogContent/DialogContent.js b/packages/material-ui/src/DialogContent/DialogContent.js index 804b64f38e3f2d..bfbbda63f5504a 100644 --- a/packages/material-ui/src/DialogContent/DialogContent.js +++ b/packages/material-ui/src/DialogContent/DialogContent.js @@ -42,6 +42,10 @@ const DialogContent = React.forwardRef(function DialogContent(props, ref) { }); DialogContent.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The content of the component. */ @@ -50,7 +54,7 @@ DialogContent.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.d.ts b/packages/material-ui/src/DialogTitle/DialogTitle.d.ts index 189e3215990bca..5be489e42a9b38 100644 --- a/packages/material-ui/src/DialogTitle/DialogTitle.d.ts +++ b/packages/material-ui/src/DialogTitle/DialogTitle.d.ts @@ -3,6 +3,10 @@ import { StandardProps } from '..'; export interface DialogTitleProps extends StandardProps, DialogTitleClassKey> { + /** + * If `true`, the children won't be wrapped by a typography component. + * For instance, this can be useful to render an h4 instead of the default h2. + */ disableTypography?: boolean; } @@ -18,6 +22,4 @@ export type DialogTitleClassKey = 'root'; * * - [DialogTitle API](https://material-ui.com/api/dialog-title/) */ -declare const DialogTitle: React.ComponentType; - -export default DialogTitle; +export default function DialogTitle(props: DialogTitleProps): JSX.Element; diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.js b/packages/material-ui/src/DialogTitle/DialogTitle.js index 7c35c854515f90..cdfbacbd736dbd 100644 --- a/packages/material-ui/src/DialogTitle/DialogTitle.js +++ b/packages/material-ui/src/DialogTitle/DialogTitle.js @@ -30,15 +30,19 @@ const DialogTitle = React.forwardRef(function DialogTitle(props, ref) { }); DialogTitle.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The content of the component. */ - children: PropTypes.node.isRequired, + children: PropTypes.node, /** * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ diff --git a/packages/material-ui/src/Drawer/Drawer.d.ts b/packages/material-ui/src/Drawer/Drawer.d.ts index 28d4154432a353..e932cd0977d119 100644 --- a/packages/material-ui/src/Drawer/Drawer.d.ts +++ b/packages/material-ui/src/Drawer/Drawer.d.ts @@ -12,15 +12,48 @@ export interface DrawerProps DrawerClassKey, 'open' | 'children' > { + /** + * Side from which the drawer will appear. + */ anchor?: 'left' | 'top' | 'right' | 'bottom'; + /** + * The contents of the drawer. + */ children?: React.ReactNode; + /** + * The elevation of the drawer. + */ elevation?: number; + /** + * Props applied to the [`Modal`](/api/modal/) element. + */ ModalProps?: Partial; + /** + * Callback fired when the component requests to be closed. + * + * @param {object} event The event source of the callback. + */ + onClose?: ModalProps['onClose']; + /** + * If `true`, the drawer is open. + */ open?: boolean; + /** + * Props applied to the [`Paper`](/api/paper/) element. + */ PaperProps?: Partial; + /** + * Props applied to the [`Slide`](/api/slide/) element. + */ SlideProps?: Partial; - theme?: Theme; + /** + * 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 variant to use. + */ variant?: 'permanent' | 'persistent' | 'temporary'; } diff --git a/packages/material-ui/src/Drawer/Drawer.js b/packages/material-ui/src/Drawer/Drawer.js index a4a2df2dc741da..f60ddc8dad855b 100644 --- a/packages/material-ui/src/Drawer/Drawer.js +++ b/packages/material-ui/src/Drawer/Drawer.js @@ -198,10 +198,14 @@ const Drawer = React.forwardRef(function Drawer(props, ref) { }); Drawer.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * Side from which the drawer will appear. */ - anchor: PropTypes.oneOf(['left', 'top', 'right', 'bottom']), + anchor: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), /** * @ignore */ @@ -214,7 +218,7 @@ Drawer.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ @@ -251,7 +255,11 @@ Drawer.propTypes = { */ transitionDuration: PropTypes.oneOfType([ PropTypes.number, - PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), + PropTypes.shape({ + appear: PropTypes.number, + enter: PropTypes.number, + exit: PropTypes.number, + }), ]), /** * The variant to use. diff --git a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.d.ts b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.d.ts index 921edbec443295..78426162bdf158 100644 --- a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.d.ts +++ b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.d.ts @@ -2,7 +2,12 @@ import * as React from 'react'; import { StandardProps } from '..'; export interface ExpansionPanelActionsProps - extends StandardProps, ExpansionPanelActionsClassKey> {} + extends StandardProps, ExpansionPanelActionsClassKey> { + /** + * If `true`, the actions do not have additional margin. + */ + disableSpacing?: boolean; +} export type ExpansionPanelActionsClassKey = 'root' | 'spacing'; diff --git a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js index 2b054e07780084..647be17fa32f2e 100644 --- a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js +++ b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js @@ -32,15 +32,19 @@ const ExpansionPanelActions = React.forwardRef(function ExpansionPanelActions(pr }); ExpansionPanelActions.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The content of the component. */ - children: PropTypes.node.isRequired, + children: PropTypes.node, /** * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ diff --git a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.d.ts b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.d.ts index 224e472b44144e..55b982e37ba42d 100644 --- a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.d.ts +++ b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.d.ts @@ -2,7 +2,12 @@ import * as React from 'react'; import { StandardProps } from '..'; export interface ExpansionPanelDetailsProps - extends StandardProps, ExpansionPanelDetailsClassKey> {} + extends StandardProps, ExpansionPanelDetailsClassKey> { + /** + * The content of the expansion panel details. + */ + children?: React.ReactNode; +} export type ExpansionPanelDetailsClassKey = 'root'; diff --git a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js index 487e1fb383ab2c..5d13dd37a19a84 100644 --- a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js +++ b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js @@ -18,15 +18,19 @@ const ExpansionPanelDetails = React.forwardRef(function ExpansionPanelDetails(pr }); ExpansionPanelDetails.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The content of the expansion panel details. */ - children: PropTypes.node.isRequired, + children: PropTypes.node, /** * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ diff --git a/packages/material-ui/src/Fade/Fade.d.ts b/packages/material-ui/src/Fade/Fade.d.ts index ca2f44435d21c9..4f4f41f55aac8e 100644 --- a/packages/material-ui/src/Fade/Fade.d.ts +++ b/packages/material-ui/src/Fade/Fade.d.ts @@ -3,8 +3,20 @@ import { Theme } from '../styles/createMuiTheme'; import { TransitionProps } from '../transitions/transition'; export interface FadeProps extends TransitionProps { + /** + * A single child content element. + */ + children?: React.ReactElement; + /** + * If `true`, the component will transition in. + */ + in?: boolean; ref?: React.Ref; - theme?: Theme; + /** + * The duration for the transition, in milliseconds. + * You may specify a single timeout for all transitions, or individually with an object. + */ + timeout?: TransitionProps['timeout']; } /** diff --git a/packages/material-ui/src/Fade/Fade.js b/packages/material-ui/src/Fade/Fade.js index a09d439ffb8888..a1076108e737dd 100644 --- a/packages/material-ui/src/Fade/Fade.js +++ b/packages/material-ui/src/Fade/Fade.js @@ -46,6 +46,7 @@ const Fade = React.forwardRef(function Fade(props, ref) { mode: 'enter', }, ); + node.style.webkitTransition = theme.transitions.create('opacity', transitionProps); node.style.transition = theme.transitions.create('opacity', transitionProps); @@ -61,6 +62,7 @@ const Fade = React.forwardRef(function Fade(props, ref) { mode: 'exit', }, ); + node.style.webkitTransition = theme.transitions.create('opacity', transitionProps); node.style.transition = theme.transitions.create('opacity', transitionProps); @@ -96,6 +98,10 @@ const Fade = React.forwardRef(function Fade(props, ref) { }); Fade.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * A single child content element. */ @@ -122,7 +128,11 @@ Fade.propTypes = { */ timeout: PropTypes.oneOfType([ PropTypes.number, - PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), + PropTypes.shape({ + appear: PropTypes.number, + enter: PropTypes.number, + exit: PropTypes.number, + }), ]), }; diff --git a/packages/material-ui/src/FormGroup/FormGroup.d.ts b/packages/material-ui/src/FormGroup/FormGroup.d.ts index 11a421a3c644c7..5accd812d7477a 100644 --- a/packages/material-ui/src/FormGroup/FormGroup.d.ts +++ b/packages/material-ui/src/FormGroup/FormGroup.d.ts @@ -3,6 +3,9 @@ import { StandardProps } from '..'; export interface FormGroupProps extends StandardProps, FormGroupClassKey> { + /** + * Display group of elements in a compact row. + */ row?: boolean; } @@ -21,6 +24,4 @@ export type FormGroupClassKey = 'root' | 'row'; * * - [FormGroup API](https://material-ui.com/api/form-group/) */ -declare const FormGroup: React.ComponentType; - -export default FormGroup; +export default function FormGroup(props: FormGroupProps): JSX.Element; diff --git a/packages/material-ui/src/FormGroup/FormGroup.js b/packages/material-ui/src/FormGroup/FormGroup.js index 53a85805d15b61..1f9d9177c4d2b2 100644 --- a/packages/material-ui/src/FormGroup/FormGroup.js +++ b/packages/material-ui/src/FormGroup/FormGroup.js @@ -40,6 +40,10 @@ const FormGroup = React.forwardRef(function FormGroup(props, ref) { }); FormGroup.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The content of the component. */ @@ -48,7 +52,7 @@ FormGroup.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ diff --git a/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts b/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts index e364c078bb672a..f35075dacbb55e 100644 --- a/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts +++ b/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts @@ -2,10 +2,26 @@ import * as React from 'react'; import { StandardProps } from '..'; export interface GridListTileBarProps extends StandardProps<{}, GridListTileBarClassKey> { + /** + * An IconButton element to be used as secondary action target + * (primary action target is the tile itself). + */ actionIcon?: React.ReactNode; + /** + * Position of secondary action IconButton. + */ actionPosition?: 'left' | 'right'; + /** + * String or element serving as subtitle (support text). + */ subtitle?: React.ReactNode; + /** + * Title to be displayed on tile. + */ title?: React.ReactNode; + /** + * Position of the title bar. + */ titlePosition?: 'top' | 'bottom'; } @@ -32,6 +48,4 @@ export type GridListTileBarClassKey = * * - [GridListTileBar API](https://material-ui.com/api/grid-list-tile-bar/) */ -declare const GridListTileBar: React.ComponentType; - -export default GridListTileBar; +export default function GridListTileBar(props: GridListTileBarProps): JSX.Element; diff --git a/packages/material-ui/src/GridListTileBar/GridListTileBar.js b/packages/material-ui/src/GridListTileBar/GridListTileBar.js index 78a3b030d10161..528a58a78f7ca2 100644 --- a/packages/material-ui/src/GridListTileBar/GridListTileBar.js +++ b/packages/material-ui/src/GridListTileBar/GridListTileBar.js @@ -118,6 +118,10 @@ const GridListTileBar = React.forwardRef(function GridListTileBar(props, ref) { }); GridListTileBar.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * An IconButton element to be used as secondary action target * (primary action target is the tile itself). @@ -131,7 +135,7 @@ GridListTileBar.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ @@ -147,7 +151,7 @@ GridListTileBar.propTypes = { /** * Position of the title bar. */ - titlePosition: PropTypes.oneOf(['top', 'bottom']), + titlePosition: PropTypes.oneOf(['bottom', 'top']), }; export default withStyles(styles, { name: 'MuiGridListTileBar' })(GridListTileBar); diff --git a/packages/material-ui/src/Grow/Grow.d.ts b/packages/material-ui/src/Grow/Grow.d.ts index f7e183836bbed5..7fa41cde3802de 100644 --- a/packages/material-ui/src/Grow/Grow.d.ts +++ b/packages/material-ui/src/Grow/Grow.d.ts @@ -4,8 +4,27 @@ import { Theme } from '../styles/createMuiTheme'; import { TransitionProps } from '../transitions/transition'; export interface GrowProps extends Omit { + /** + * A single child content element. + */ + children?: React.ReactElement; + /** + * If `true`, show the component; triggers the enter or exit animation. + */ + in?: boolean; + /** + */ + onEnter?: TransitionProps['onEnter']; + /** + */ + onExit?: TransitionProps['onExit']; ref?: React.Ref; - theme?: Theme; + /** + * The duration for the transition, in milliseconds. + * You may specify a single timeout for all transitions, or individually with an object. + * + * Set to 'auto' to automatically calculate transition time based on height. + */ timeout?: TransitionProps['timeout'] | 'auto'; } @@ -23,6 +42,4 @@ export interface GrowProps extends Omit { * - [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; +export default function Grow(props: GrowProps): JSX.Element; diff --git a/packages/material-ui/src/Grow/Grow.js b/packages/material-ui/src/Grow/Grow.js index ef6fbba1f4bc5f..51857f9d390695 100644 --- a/packages/material-ui/src/Grow/Grow.js +++ b/packages/material-ui/src/Grow/Grow.js @@ -142,6 +142,10 @@ const Grow = React.forwardRef(function Grow(props, ref) { }); Grow.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * A single child content element. */ @@ -169,9 +173,13 @@ Grow.propTypes = { * Set to 'auto' to automatically calculate transition time based on height. */ timeout: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), PropTypes.oneOf(['auto']), + PropTypes.number, + PropTypes.shape({ + appear: PropTypes.number, + enter: PropTypes.number, + exit: PropTypes.number, + }), ]), }; diff --git a/packages/material-ui/src/Hidden/Hidden.d.ts b/packages/material-ui/src/Hidden/Hidden.d.ts index 663f218fc1a634..a99230636d1ff5 100644 --- a/packages/material-ui/src/Hidden/Hidden.d.ts +++ b/packages/material-ui/src/Hidden/Hidden.d.ts @@ -2,18 +2,66 @@ import * as React from 'react'; import { Breakpoint } from '../styles/createBreakpoints'; export interface HiddenProps { + /** + * Specify which implementation to use. 'js' is the default, 'css' works better for + * server-side rendering. + */ implementation?: 'js' | 'css'; + /** + * You can use this prop when choosing the `js` implementation with server-side rendering. + * + * As `window.innerWidth` is unavailable on the server, + * we default to rendering an empty component during the first mount. + * You might want to use an heuristic to approximate + * the screen width of the client browser screen width. + * + * For instance, you could be using the user-agent or the client-hints. + * https://caniuse.com/#search=client%20hint + */ initialWidth?: Breakpoint; + /** + * If `true`, screens this size and down will be hidden. + */ lgDown?: boolean; + /** + * If `true`, screens this size and up will be hidden. + */ lgUp?: boolean; + /** + * If `true`, screens this size and down will be hidden. + */ mdDown?: boolean; + /** + * If `true`, screens this size and up will be hidden. + */ mdUp?: boolean; + /** + * Hide the given breakpoint(s). + */ only?: Breakpoint | Breakpoint[]; + /** + * If `true`, screens this size and down will be hidden. + */ smDown?: boolean; + /** + * If `true`, screens this size and up will be hidden. + */ smUp?: boolean; + /** + * If `true`, screens this size and down will be hidden. + */ xlDown?: boolean; + /** + * If `true`, screens this size and up will be hidden. + */ xlUp?: boolean; + /** + * If `true`, screens this size and down will be hidden. + */ xsDown?: boolean; + /** + * If `true`, screens this size and up will be hidden. + */ xsUp?: boolean; } diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.d.ts b/packages/material-ui/src/LinearProgress/LinearProgress.d.ts index e47e8e59b8c24c..9021d228f74d6f 100644 --- a/packages/material-ui/src/LinearProgress/LinearProgress.d.ts +++ b/packages/material-ui/src/LinearProgress/LinearProgress.d.ts @@ -2,10 +2,25 @@ import * as React from 'react'; import { StandardProps } from '..'; export interface LinearProgressProps - extends StandardProps, LinearProgressClassKey> { + extends StandardProps, LinearProgressClassKey, 'children'> { + /** + * The color of the component. It supports those theme colors that make sense for this component. + */ color?: 'primary' | 'secondary'; + /** + * The value of the progress indicator for the determinate and buffer variants. + * Value between 0 and 100. + */ value?: number; + /** + * The value for the buffer variant. + * Value between 0 and 100. + */ valueBuffer?: number; + /** + * The variant to use. + * Use indeterminate or query when there is no progress value. + */ variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query'; } @@ -43,6 +58,4 @@ export type LinearProgressClassKey = * * - [LinearProgress API](https://material-ui.com/api/linear-progress/) */ -declare const LinearProgress: React.ComponentType; - -export default LinearProgress; +export default function LinearProgress(props: LinearProgressProps): JSX.Element; diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.js b/packages/material-ui/src/LinearProgress/LinearProgress.js index 6f9139bb6609c3..130423d787cf7e 100644 --- a/packages/material-ui/src/LinearProgress/LinearProgress.js +++ b/packages/material-ui/src/LinearProgress/LinearProgress.js @@ -253,11 +253,15 @@ const LinearProgress = React.forwardRef(function LinearProgress(props, ref) { }); LinearProgress.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ @@ -280,7 +284,7 @@ LinearProgress.propTypes = { * The variant to use. * Use indeterminate or query when there is no progress value. */ - variant: PropTypes.oneOf(['determinate', 'indeterminate', 'buffer', 'query']), + variant: PropTypes.oneOf(['buffer', 'determinate', 'indeterminate', 'query']), }; export default withStyles(styles, { name: 'MuiLinearProgress' })(LinearProgress); diff --git a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.d.ts b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.d.ts index 21463c0d2392a6..c6493a5e236892 100644 --- a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.d.ts +++ b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.d.ts @@ -1,6 +1,9 @@ import { StandardProps } from '..'; export interface ListItemAvatarProps extends StandardProps<{}, ListItemAvatarClassKey> { + /** + * The content of the component – normally `Avatar`. + */ children: React.ReactElement; } diff --git a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js index 45d2a545568283..28347b111ffc11 100644 --- a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js +++ b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js @@ -39,6 +39,10 @@ const ListItemAvatar = React.forwardRef(function ListItemAvatar(props, ref) { }); ListItemAvatar.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The content of the component – normally `Avatar`. */ @@ -47,7 +51,7 @@ ListItemAvatar.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.d.ts b/packages/material-ui/src/ListItemIcon/ListItemIcon.d.ts index 24ceab7eee575b..029ca35a368760 100644 --- a/packages/material-ui/src/ListItemIcon/ListItemIcon.d.ts +++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.d.ts @@ -2,6 +2,10 @@ import { StandardProps } from '..'; export interface ListItemIconProps extends StandardProps, ListItemIconClassKey> { + /** + * The content of the component, normally `Icon`, `SvgIcon`, + * or a `@material-ui/icons` SVG icon element. + */ children: React.ReactElement; } @@ -17,6 +21,4 @@ export type ListItemIconClassKey = 'root'; * * - [ListItemIcon API](https://material-ui.com/api/list-item-icon/) */ -declare const ListItemIcon: React.ComponentType; - -export default ListItemIcon; +export default function ListItemIcon(props: ListItemIconProps): JSX.Element; diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.js index 59fac363403f57..69447bd9d5858f 100644 --- a/packages/material-ui/src/ListItemIcon/ListItemIcon.js +++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.js @@ -41,6 +41,10 @@ const ListItemIcon = React.forwardRef(function ListItemIcon(props, ref) { }); ListItemIcon.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The content of the component, normally `Icon`, `SvgIcon`, * or a `@material-ui/icons` SVG icon element. @@ -50,7 +54,7 @@ ListItemIcon.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ diff --git a/packages/material-ui/src/Menu/Menu.d.ts b/packages/material-ui/src/Menu/Menu.d.ts index b417acdbbdb8e7..836decedeb6563 100644 --- a/packages/material-ui/src/Menu/Menu.d.ts +++ b/packages/material-ui/src/Menu/Menu.d.ts @@ -7,12 +7,88 @@ import { TransitionHandlerProps, TransitionProps } from '../transitions/transiti export interface MenuProps extends StandardProps, MenuClassKey> { + /** + * The DOM element used to set the position of the menu. + */ + anchorEl?: PopoverProps['anchorEl']; + /** + * If `true` (Default) will focus the `[role="menu"]` if no focusable child is found. Disabled + * children are not focusable. If you set this prop to `false` focus will be placed + * on the parent modal container. This has severe accessibility implications + * and should only be considered if you manage focus otherwise. + */ autoFocus?: boolean; + /** + * Menu contents, normally `MenuItem`s. + */ + children?: React.ReactNode; + /** + * When opening the menu will not focus the active item but the `[role="menu"]` + * unless `autoFocus` is also set to `false`. Not using the default means not + * following WAI-ARIA authoring practices. Please be considerate about possible + * accessibility implications. + */ disableAutoFocusItem?: boolean; + /** + * Props applied to the [`MenuList`](/api/menu-list/) element. + */ MenuListProps?: Partial; + /** + * Callback fired when the component requests to be closed. + * + * @param {object} event The event source of the callback. + * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`, `"tabKeyDown"`. + */ + onClose?: PopoverProps['onClose']; + /** + * Callback fired before the Menu enters. + * @document + */ + onEnter?: PopoverProps['onEnter']; + /** + * Callback fired when the Menu has entered. + * @document + */ + onEntered?: PopoverProps['onEntered']; + /** + * Callback fired when the Menu is entering. + * @document + */ + onEntering?: PopoverProps['onEntering']; + /** + * Callback fired before the Menu exits. + * @document + */ + onExit?: PopoverProps['onExit']; + /** + * Callback fired when the Menu has exited. + * @document + */ + onExited?: PopoverProps['onExited']; + /** + * Callback fired when the Menu is exiting. + * @document + */ + onExiting?: PopoverProps['onExiting']; + /** + * If `true`, the menu is visible. + */ + open: boolean; + /** + */ PaperProps?: Partial; + /** + * `classes` prop applied to the [`Popover`](/api/popover/) element. + */ PopoverClasses?: PopoverProps['classes']; + /** + * The length of the transition in `ms`, or 'auto' + */ transitionDuration?: TransitionProps['timeout'] | 'auto'; + /** + * The variant to use. Use `menu` to prevent selected items from impacting the initial focus + * and the vertical alignment relative to the anchor element. + */ variant?: 'menu' | 'selectedMenu'; } @@ -30,6 +106,4 @@ export type MenuClassKey = 'paper' | 'list'; * - [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; +export default function Menu(props: MenuProps): JSX.Element; diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js index 1dc0e1bf45ed02..8b9bf900dc675f 100644 --- a/packages/material-ui/src/Menu/Menu.js +++ b/packages/material-ui/src/Menu/Menu.js @@ -166,10 +166,10 @@ const Menu = React.forwardRef(function Menu(props, ref) { }); Menu.propTypes = { - /** - * The DOM element used to set the position of the menu. - */ - anchorEl: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * If `true` (Default) will focus the `[role="menu"]` if no focusable child is found. Disabled * children are not focusable. If you set this prop to `false` focus will be placed @@ -185,7 +185,7 @@ Menu.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * When opening the menu will not focus the active item but the `[role="menu"]` * unless `autoFocus` is also set to `false`. Not using the default means not @@ -244,9 +244,13 @@ Menu.propTypes = { * The length of the transition in `ms`, or 'auto' */ transitionDuration: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), PropTypes.oneOf(['auto']), + PropTypes.number, + PropTypes.shape({ + appear: PropTypes.number, + enter: PropTypes.number, + exit: PropTypes.number, + }), ]), /** * The variant to use. Use `menu` to prevent selected items from impacting the initial focus diff --git a/packages/material-ui/src/MenuList/MenuList.d.ts b/packages/material-ui/src/MenuList/MenuList.d.ts index 43e753e40b53f6..a9c416440c6345 100644 --- a/packages/material-ui/src/MenuList/MenuList.d.ts +++ b/packages/material-ui/src/MenuList/MenuList.d.ts @@ -3,9 +3,27 @@ import { StandardProps } from '..'; import { ListProps, ListClassKey } from '../List'; export interface MenuListProps extends StandardProps { + /** + * If `true`, will focus the `[role="menu"]` container and move into tab order + */ autoFocus?: boolean; + /** + * If `true`, will focus the first menuitem if `variant="menu"` or selected item + * if `variant="selectedMenu"` + */ autoFocusItem?: boolean; + /** + * MenuList contents, normally `MenuItem`s. + */ + children?: React.ReactNode; + /** + * If `true`, the menu items will not wrap focus. + */ 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. + */ variant?: 'menu' | 'selectedMenu'; } diff --git a/packages/material-ui/src/MenuList/MenuList.js b/packages/material-ui/src/MenuList/MenuList.js index 049b44c97dc1e4..67cdf1965e55bb 100644 --- a/packages/material-ui/src/MenuList/MenuList.js +++ b/packages/material-ui/src/MenuList/MenuList.js @@ -85,6 +85,8 @@ const useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : Reac */ const MenuList = React.forwardRef(function MenuList(props, ref) { const { + // private + // eslint-disable-next-line react/prop-types actions, autoFocus = false, autoFocusItem = false, @@ -259,10 +261,6 @@ const MenuList = React.forwardRef(function MenuList(props, ref) { }); MenuList.propTypes = { - /** - * @ignore - */ - actions: PropTypes.shape({ current: PropTypes.object }), /** * If `true`, will focus the `[role="menu"]` container and move into tab order */ diff --git a/packages/material-ui/src/MobileStepper/MobileStepper.d.ts b/packages/material-ui/src/MobileStepper/MobileStepper.d.ts index 807b8d1d44c0e3..9371eebea85d3d 100644 --- a/packages/material-ui/src/MobileStepper/MobileStepper.d.ts +++ b/packages/material-ui/src/MobileStepper/MobileStepper.d.ts @@ -4,13 +4,35 @@ import { PaperProps } from '../Paper'; import { LinearProgressProps } from '../LinearProgress'; export interface MobileStepperProps - extends StandardProps { + extends StandardProps { + /** + * Set the active step (zero based index). + * Defines which dot is highlighted when the variant is 'dots'. + */ activeStep?: number; + /** + * A back button element. For instance, it can be a `Button` or an `IconButton`. + */ backButton: React.ReactNode; + /** + * Props applied to the `LinearProgress` element. + */ LinearProgressProps?: Partial; + /** + * A next button element. For instance, it can be a `Button` or an `IconButton`. + */ nextButton: React.ReactNode; + /** + * Set the positioning type. + */ position?: 'bottom' | 'top' | 'static'; + /** + * The total steps. + */ steps: number; + /** + * The variant to use. + */ variant?: 'text' | 'dots' | 'progress'; } @@ -35,6 +57,4 @@ export type MobileStepperClassKey = * - [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; +export default function MobileStepper(props: MobileStepperProps): JSX.Element; diff --git a/packages/material-ui/src/MobileStepper/MobileStepper.js b/packages/material-ui/src/MobileStepper/MobileStepper.js index 7199e087d685e0..b9a8f7a5b28cd1 100644 --- a/packages/material-ui/src/MobileStepper/MobileStepper.js +++ b/packages/material-ui/src/MobileStepper/MobileStepper.js @@ -85,6 +85,7 @@ const MobileStepper = React.forwardRef(function MobileStepper(props, ref) { {activeStep + 1} / {steps} )} + {variant === 'dots' && (
{[...new Array(steps)].map((_, index) => ( @@ -97,6 +98,7 @@ const MobileStepper = React.forwardRef(function MobileStepper(props, ref) { ))}
)} + {variant === 'progress' && ( )} + {nextButton} ); }); MobileStepper.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * Set the active step (zero based index). * Defines which dot is highlighted when the variant is 'dots'. @@ -124,7 +131,7 @@ MobileStepper.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ @@ -140,7 +147,7 @@ MobileStepper.propTypes = { /** * Set the positioning type. */ - position: PropTypes.oneOf(['bottom', 'top', 'static']), + position: PropTypes.oneOf(['bottom', 'static', 'top']), /** * The total steps. */ @@ -148,7 +155,7 @@ MobileStepper.propTypes = { /** * The variant to use. */ - variant: PropTypes.oneOf(['text', 'dots', 'progress']), + variant: PropTypes.oneOf(['dots', 'progress', 'text']), }; export default withStyles(styles, { name: 'MuiMobileStepper' })(MobileStepper); diff --git a/packages/material-ui/src/NoSsr/NoSsr.d.ts b/packages/material-ui/src/NoSsr/NoSsr.d.ts index 4284742f0de637..2ff0253df098b1 100644 --- a/packages/material-ui/src/NoSsr/NoSsr.d.ts +++ b/packages/material-ui/src/NoSsr/NoSsr.d.ts @@ -1,8 +1,18 @@ import * as React from 'react'; export interface NoSsrProps { + /** + * You can wrap a node. + */ children?: React.ReactNode; + /** + * If `true`, the component will not only prevent server-side rendering. + * It will also defer the rendering of the children into a different screen frame. + */ defer?: boolean; + /** + * The fallback content to display. + */ fallback?: React.ReactNode; } @@ -23,6 +33,4 @@ export interface NoSsrProps { * * - [NoSsr API](https://material-ui.com/api/no-ssr/) */ -declare const NoSsr: React.ComponentType; - -export default NoSsr; +export default function NoSsr(props: NoSsrProps): JSX.Element; diff --git a/packages/material-ui/src/NoSsr/NoSsr.js b/packages/material-ui/src/NoSsr/NoSsr.js index 1c9c44fcd148f9..f90da8e1dbb858 100644 --- a/packages/material-ui/src/NoSsr/NoSsr.js +++ b/packages/material-ui/src/NoSsr/NoSsr.js @@ -37,6 +37,10 @@ function NoSsr(props) { } NoSsr.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * You can wrap a node. */ diff --git a/packages/material-ui/src/Paper/Paper.d.ts b/packages/material-ui/src/Paper/Paper.d.ts index 72d892ef0d555f..6cdc933f2dc611 100644 --- a/packages/material-ui/src/Paper/Paper.d.ts +++ b/packages/material-ui/src/Paper/Paper.d.ts @@ -3,9 +3,23 @@ import { StandardProps } from '..'; export interface PaperProps extends StandardProps, PaperClassKey> { + /** + * The component used for the root node. + * Either a string to use a DOM element or a component. + */ component?: React.ElementType>; + /** + * Shadow depth, corresponds to `dp` in the spec. + * It accepts values between 0 and 24 inclusive. + */ elevation?: number; + /** + * If `true`, rounded corners are disabled. + */ square?: boolean; + /** + * The variant to use. + */ variant?: 'elevation' | 'outlined'; } @@ -50,6 +64,4 @@ export type PaperClassKey = * * - [Paper API](https://material-ui.com/api/paper/) */ -declare const Paper: React.ComponentType; - -export default Paper; +export default function Paper(props: PaperProps): JSX.Element; diff --git a/packages/material-ui/src/Paper/Paper.js b/packages/material-ui/src/Paper/Paper.js index 0fd9310bb6e6dd..99b78c1bbb792d 100644 --- a/packages/material-ui/src/Paper/Paper.js +++ b/packages/material-ui/src/Paper/Paper.js @@ -65,6 +65,10 @@ const Paper = React.forwardRef(function Paper(props, ref) { }); Paper.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The content of the component. */ @@ -73,7 +77,7 @@ Paper.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ diff --git a/packages/material-ui/src/RadioGroup/RadioGroup.d.ts b/packages/material-ui/src/RadioGroup/RadioGroup.d.ts index bea3676b0e6e00..020a6b139cbeed 100644 --- a/packages/material-ui/src/RadioGroup/RadioGroup.d.ts +++ b/packages/material-ui/src/RadioGroup/RadioGroup.d.ts @@ -4,8 +4,25 @@ import { FormGroupProps, FormGroupClassKey } from '../FormGroup'; export interface RadioGroupProps extends StandardProps { + /** + * The default `input` element value. Use when the component is not controlled. + */ + defaultValue?: FormGroupProps['defaultValue']; + /** + * The name used to reference the value of the control. + * If you don't provide this prop, it falls back to a randomly generated name. + */ name?: string; + /** + * Callback fired when a radio button is selected. + * + * @param {object} event The event source of the callback. + * You can pull out the new value by accessing `event.target.value` (string). + */ onChange?: (event: React.ChangeEvent, value: string) => void; + /** + * Value of the selected radio button. The DOM API casts this to a string. + */ value?: any; } @@ -22,6 +39,4 @@ export type RadioGroupClassKey = FormGroupClassKey; * - [RadioGroup API](https://material-ui.com/api/radio-group/) * - inherits [FormGroup API](https://material-ui.com/api/form-group/) */ -declare const RadioGroup: React.ComponentType; - -export default RadioGroup; +export default function RadioGroup(props: RadioGroupProps): JSX.Element; diff --git a/packages/material-ui/src/RadioGroup/RadioGroup.js b/packages/material-ui/src/RadioGroup/RadioGroup.js index 48c62bcfdc1395..29ddee6a9a63b6 100644 --- a/packages/material-ui/src/RadioGroup/RadioGroup.js +++ b/packages/material-ui/src/RadioGroup/RadioGroup.js @@ -6,7 +6,16 @@ import useControlled from '../utils/useControlled'; import RadioGroupContext from './RadioGroupContext'; const RadioGroup = React.forwardRef(function RadioGroup(props, ref) { - const { actions, children, name: nameProp, value: valueProp, onChange, ...other } = props; + const { + // private + // eslint-disable-next-line react/prop-types + actions, + children, + name: nameProp, + value: valueProp, + onChange, + ...other + } = props; const rootRef = React.useRef(null); const [value, setValue] = useControlled({ @@ -62,10 +71,10 @@ const RadioGroup = React.forwardRef(function RadioGroup(props, ref) { }); RadioGroup.propTypes = { - /** - * @ignore - */ - actions: PropTypes.shape({ current: PropTypes.object }), + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The content of the component. */ @@ -73,16 +82,16 @@ RadioGroup.propTypes = { /** * The default `input` element value. Use when the component is not controlled. */ - defaultValue: PropTypes.any, + defaultValue: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.string), + PropTypes.number, + PropTypes.string, + ]), /** * The name used to reference the value of the control. * If you don't provide this prop, it falls back to a randomly generated name. */ name: PropTypes.string, - /** - * @ignore - */ - onBlur: PropTypes.func, /** * Callback fired when a radio button is selected. * @@ -90,10 +99,6 @@ RadioGroup.propTypes = { * You can pull out the new value by accessing `event.target.value` (string). */ onChange: PropTypes.func, - /** - * @ignore - */ - onKeyDown: PropTypes.func, /** * Value of the selected radio button. The DOM API casts this to a string. */ diff --git a/packages/material-ui/src/Snackbar/Snackbar.d.ts b/packages/material-ui/src/Snackbar/Snackbar.d.ts index 73607d5a33219c..9307c81720e7ae 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.d.ts +++ b/packages/material-ui/src/Snackbar/Snackbar.d.ts @@ -16,20 +16,110 @@ export interface SnackbarProps React.HTMLAttributes & Partial, SnackbarClassKey > { + /** + * The action to display. It renders after the message, at the end of the snackbar. + */ action?: SnackbarContentProps['action']; + /** + * The anchor of the `Snackbar`. + */ anchorOrigin?: SnackbarOrigin; + /** + * The number of milliseconds to wait before automatically calling the + * `onClose` function. `onClose` should then set the state of the `open` + * prop to hide the Snackbar. This behavior is disabled by default with + * the `null` value. + */ autoHideDuration?: number | null; + /** + * Replace the `SnackbarContent` component. + */ + children?: React.ReactElement; + /** + * Props applied to the `ClickAwayListener` element. + */ ClickAwayListenerProps?: Partial; + /** + * Props applied to the [`SnackbarContent`](/api/snackbar-content/) element. + */ ContentProps?: Partial; + /** + * If `true`, the `autoHideDuration` timer will expire even if the window is not focused. + */ disableWindowBlurListener?: boolean; + /** + * When displaying multiple consecutive Snackbars from a parent rendering a single + * , add the key prop to ensure independent treatment of each message. + * e.g. , otherwise, the message may update-in-place and + * features such as autoHideDuration may be canceled. + * @document + */ + key?: any; + /** + * The message to display. + */ message?: SnackbarContentProps['message']; + /** + * Callback fired when the component requests to be closed. + * Typically `onClose` is used to set state in the parent component, + * which is used to control the `Snackbar` `open` prop. + * The `reason` parameter can optionally be used to control the response to `onClose`, + * for example ignoring `clickaway`. + * + * @param {object} event The event source of the callback. + * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`. + */ onClose?: (event: React.SyntheticEvent, reason: SnackbarCloseReason) => void; + /** + * Callback fired before the transition is entering. + */ + onEnter: TransitionHandlerProps['onEnter']; + /** + * Callback fired when the transition has entered. + */ + onEntered: TransitionHandlerProps['onEntered']; + /** + * Callback fired when the transition is entering. + */ + onEntering: TransitionHandlerProps['onEntering']; + /** + * Callback fired before the transition is exiting. + */ + onExit: TransitionHandlerProps['onExit']; + /** + * Callback fired when the transition has exited. + */ + onExited: TransitionHandlerProps['onExited']; + /** + * Callback fired when the transition is exiting. + */ + onExiting: TransitionHandlerProps['onExiting']; onMouseEnter?: React.MouseEventHandler; onMouseLeave?: React.MouseEventHandler; - open: boolean; + /** + * If `true`, `Snackbar` is open. + */ + open?: boolean; + /** + * The number of milliseconds to wait before dismissing after user interaction. + * If `autoHideDuration` prop isn't specified, it does nothing. + * If `autoHideDuration` prop is specified but `resumeHideDuration` isn't, + * we default to `autoHideDuration / 2` ms. + */ resumeHideDuration?: number; + /** + * The component used for the transition. + * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + */ TransitionComponent?: React.ComponentType; + /** + * The duration for the transition, in milliseconds. + * You may specify a single timeout for all transitions, or individually with an object. + */ transitionDuration?: TransitionProps['timeout']; + /** + * Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. + */ TransitionProps?: TransitionProps; } @@ -52,6 +142,4 @@ export type SnackbarClassKey = * * - [Snackbar API](https://material-ui.com/api/snackbar/) */ -declare const Snackbar: React.ComponentType; - -export default Snackbar; +export default function Snackbar(props: SnackbarProps): JSX.Element; diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js index 94f2d1c7e11ec7..51e93c0e5ad30f 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.js +++ b/packages/material-ui/src/Snackbar/Snackbar.js @@ -252,6 +252,10 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) { }); Snackbar.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The action to display. It renders after the message, at the end of the snackbar. */ @@ -260,8 +264,8 @@ Snackbar.propTypes = { * The anchor of the `Snackbar`. */ anchorOrigin: PropTypes.shape({ - horizontal: PropTypes.oneOf(['left', 'center', 'right']).isRequired, - vertical: PropTypes.oneOf(['top', 'bottom']).isRequired, + horizontal: PropTypes.oneOf(['center', 'left', 'right']).isRequired, + vertical: PropTypes.oneOf(['bottom', 'top']).isRequired, }), /** * The number of milliseconds to wait before automatically calling the @@ -278,7 +282,7 @@ Snackbar.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ @@ -371,7 +375,11 @@ Snackbar.propTypes = { */ transitionDuration: PropTypes.oneOfType([ PropTypes.number, - PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), + PropTypes.shape({ + appear: PropTypes.number, + enter: PropTypes.number, + exit: PropTypes.number, + }), ]), /** * Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. From 350c65b02b5102aa1d28d7ddbabf38c55387dec9 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 24 Mar 2020 22:18:38 +0100 Subject: [PATCH 05/15] revert: ignore-cache -> disable-cache --- scripts/generateProptypes.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index ab46f9acf2e4c9..c78feeaca33b43 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -91,12 +91,12 @@ async function generateProptypes( } interface HandlerArgv { - 'ignore-cache': boolean; + 'disable-cache': boolean; pattern: string; verbose: boolean; } async function run(argv: HandlerArgv) { - const { 'ignore-cache': ignoreCache, pattern, verbose } = argv; + const { 'disable-cache': ignoreCache, pattern, verbose } = argv; const filePattern = new RegExp(pattern); if (pattern.length > 0) { @@ -170,7 +170,7 @@ yargs describe: 'formats codebase', builder: (command) => { return command - .option('ignore-cache', { + .option('disable-cache', { default: false, describe: 'Considers all files on every run', type: 'boolean', From 7a96dab0e6a1ddd0512130692c598cc156f19bd1 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 24 Mar 2020 22:38:19 +0100 Subject: [PATCH 06/15] fix: Backdrop allows Node while Fade allows Element --- packages/material-ui/src/Backdrop/Backdrop.d.ts | 2 +- packages/material-ui/src/Fade/Fade.d.ts | 15 +++++++++------ 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/material-ui/src/Backdrop/Backdrop.d.ts b/packages/material-ui/src/Backdrop/Backdrop.d.ts index 0deddf3c1e2d9a..9f309a944b82d8 100644 --- a/packages/material-ui/src/Backdrop/Backdrop.d.ts +++ b/packages/material-ui/src/Backdrop/Backdrop.d.ts @@ -5,7 +5,7 @@ import { TransitionProps } from '../transitions/transition'; export interface BackdropProps extends StandardProps< - React.HTMLAttributes & Partial, + React.HTMLAttributes & Partial>, BackdropClassKey > { /** diff --git a/packages/material-ui/src/Fade/Fade.d.ts b/packages/material-ui/src/Fade/Fade.d.ts index 4f4f41f55aac8e..6b13062a191407 100644 --- a/packages/material-ui/src/Fade/Fade.d.ts +++ b/packages/material-ui/src/Fade/Fade.d.ts @@ -1,16 +1,21 @@ import * as React from 'react'; -import { Theme } from '../styles/createMuiTheme'; import { TransitionProps } from '../transitions/transition'; -export interface FadeProps extends TransitionProps { +export interface FadeProps extends Omit { /** * A single child content element. */ - children?: React.ReactElement; + children?: React.ReactElement; /** * If `true`, the component will transition in. */ in?: boolean; + /** + */ + onEnter?: TransitionProps['onEnter']; + /** + */ + onExit?: TransitionProps['onExit']; ref?: React.Ref; /** * The duration for the transition, in milliseconds. @@ -31,6 +36,4 @@ export interface FadeProps extends TransitionProps { * - [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; +export default function Fade(props: FadeProps): JSX.Element; From 5ad8d5b2b9043cde40f8c4aa7ca37fd6234f437c Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 24 Mar 2020 22:39:08 +0100 Subject: [PATCH 07/15] fix: typo in DIalogActions returntype --- packages/material-ui/src/DialogActions/DialogActions.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/DialogActions/DialogActions.d.ts b/packages/material-ui/src/DialogActions/DialogActions.d.ts index dc913bb5c3338f..9355f3fe27de21 100644 --- a/packages/material-ui/src/DialogActions/DialogActions.d.ts +++ b/packages/material-ui/src/DialogActions/DialogActions.d.ts @@ -21,4 +21,4 @@ export type DialogActionsClassKey = 'root' | 'spacing'; * * - [DialogActions API](https://material-ui.com/api/dialog-actions/) */ -export default function DialogActions(props: DialogActionsProps): JSX.Eleement; +export default function DialogActions(props: DialogActionsProps): JSX.Element; From 16f86ae7aceafe8c81382d4caa59d19834c192a9 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 24 Mar 2020 22:45:52 +0100 Subject: [PATCH 08/15] fix: Actually generate MenuList and fix typos --- packages/material-ui/src/MenuList/MenuList.d.ts | 8 +++----- packages/material-ui/src/MenuList/MenuList.js | 8 ++++++-- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/material-ui/src/MenuList/MenuList.d.ts b/packages/material-ui/src/MenuList/MenuList.d.ts index a9c416440c6345..8d91ab6ed7643e 100644 --- a/packages/material-ui/src/MenuList/MenuList.d.ts +++ b/packages/material-ui/src/MenuList/MenuList.d.ts @@ -4,12 +4,12 @@ import { ListProps, ListClassKey } from '../List'; export interface MenuListProps extends StandardProps { /** - * If `true`, will focus the `[role="menu"]` container and move into tab order + * If `true`, will focus the `[role="menu"]` container and move into tab order. */ autoFocus?: boolean; /** * If `true`, will focus the first menuitem if `variant="menu"` or selected item - * if `variant="selectedMenu"` + * if `variant="selectedMenu"`. */ autoFocusItem?: boolean; /** @@ -43,6 +43,4 @@ export type MenuListClassKey = ListClassKey; * - [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; +export default function MenuList(props: MenuListProps): JSX.Element; diff --git a/packages/material-ui/src/MenuList/MenuList.js b/packages/material-ui/src/MenuList/MenuList.js index 67cdf1965e55bb..aa25a97cb84325 100644 --- a/packages/material-ui/src/MenuList/MenuList.js +++ b/packages/material-ui/src/MenuList/MenuList.js @@ -261,13 +261,17 @@ const MenuList = React.forwardRef(function MenuList(props, ref) { }); MenuList.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** - * If `true`, will focus the `[role="menu"]` container and move into tab order + * If `true`, will focus the `[role="menu"]` container and move into tab order. */ autoFocus: PropTypes.bool, /** * If `true`, will focus the first menuitem if `variant="menu"` or selected item - * if `variant="selectedMenu"` + * if `variant="selectedMenu"`. */ autoFocusItem: PropTypes.bool, /** From 739b5c179d99904ed0c34a9cde850349f9033138 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 24 Mar 2020 22:54:12 +0100 Subject: [PATCH 09/15] fix: skip resolving default values for props without description --- docs/pages/api-docs/collapse.md | 4 ++-- docs/pages/api-docs/dialog-title.md | 2 +- docs/pages/api-docs/drawer.md | 4 ++-- docs/pages/api-docs/expansion-panel-actions.md | 2 +- docs/pages/api-docs/expansion-panel-details.md | 2 +- docs/pages/api-docs/fade.md | 2 +- docs/pages/api-docs/grid-list-tile-bar.md | 2 +- docs/pages/api-docs/grow.md | 2 +- docs/pages/api-docs/linear-progress.md | 2 +- docs/pages/api-docs/menu-list.md | 4 ++-- docs/pages/api-docs/menu.md | 3 +-- docs/pages/api-docs/mobile-stepper.md | 4 ++-- docs/pages/api-docs/radio-group.md | 2 +- docs/pages/api-docs/snackbar.md | 4 ++-- docs/src/modules/utils/defaultPropsHandler.js | 7 +++++++ 15 files changed, 26 insertions(+), 20 deletions(-) diff --git a/docs/pages/api-docs/collapse.md b/docs/pages/api-docs/collapse.md index 87a983dde7e51c..4b7eaf8e07dc16 100644 --- a/docs/pages/api-docs/collapse.md +++ b/docs/pages/api-docs/collapse.md @@ -28,10 +28,10 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro |:-----|:-----|:--------|:------------| | children | node | | The content node to be collapsed. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| collapsedHeight | string
| number | '0px' | The height of the container when collapsed. | +| collapsedHeight | number
| string | '0px' | The height of the container when collapsed. | | component | elementType | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | | in | bool | | If `true`, the component will transition in. | -| timeout | number
| { enter?: number, exit?: number }
| 'auto' | duration.standard | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height. | +| timeout | 'auto'
| number
| { appear?: number, enter?: number, exit?: number } | duration.standard | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/dialog-title.md b/docs/pages/api-docs/dialog-title.md index d539bf04e51d22..1b088ca2355dbc 100644 --- a/docs/pages/api-docs/dialog-title.md +++ b/docs/pages/api-docs/dialog-title.md @@ -24,7 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the component. | +| children | node | | The content of the component. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | disableTypography | bool | false | If `true`, the children won't be wrapped by a typography component. For instance, this can be useful to render an h4 instead of the default h2. | diff --git a/docs/pages/api-docs/drawer.md b/docs/pages/api-docs/drawer.md index 1990635c0f441d..4cd0ba37d5f311 100644 --- a/docs/pages/api-docs/drawer.md +++ b/docs/pages/api-docs/drawer.md @@ -25,7 +25,7 @@ when `variant="temporary"` is set. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| anchor | 'left'
| 'top'
| 'right'
| 'bottom' | 'left' | Side from which the drawer will appear. | +| anchor | 'bottom'
| 'left'
| 'right'
| 'top' | 'left' | Side from which the drawer will appear. | | children | node | | The contents of the drawer. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | elevation | number | 16 | The elevation of the drawer. | @@ -34,7 +34,7 @@ when `variant="temporary"` is set. | open | bool | false | If `true`, the drawer is open. | | PaperProps | object | {} | Props applied to the [`Paper`](/api/paper/) element. | | SlideProps | object | | Props applied to the [`Slide`](/api/slide/) element. | -| transitionDuration | number
| { enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | +| transitionDuration | number
| { appear?: number, enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | | variant | 'permanent'
| 'persistent'
| 'temporary' | 'temporary' | The variant to use. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/expansion-panel-actions.md b/docs/pages/api-docs/expansion-panel-actions.md index 98332c1600d962..1e6448c023f3c2 100644 --- a/docs/pages/api-docs/expansion-panel-actions.md +++ b/docs/pages/api-docs/expansion-panel-actions.md @@ -24,7 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the component. | +| children | node | | The content of the component. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | disableSpacing | bool | false | If `true`, the actions do not have additional margin. | diff --git a/docs/pages/api-docs/expansion-panel-details.md b/docs/pages/api-docs/expansion-panel-details.md index d5fd6c28a6dc01..2bdb266a2860e3 100644 --- a/docs/pages/api-docs/expansion-panel-details.md +++ b/docs/pages/api-docs/expansion-panel-details.md @@ -24,7 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | The content of the expansion panel details. | +| children | node | | The content of the expansion panel details. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/fade.md b/docs/pages/api-docs/fade.md index 0032e4d0847cfa..958648b27fa10c 100644 --- a/docs/pages/api-docs/fade.md +++ b/docs/pages/api-docs/fade.md @@ -27,7 +27,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro |:-----|:-----|:--------|:------------| | children | element | | A single child content element. | | in | bool | | If `true`, the component will transition in. | -| timeout | number
| { enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | +| timeout | number
| { appear?: number, enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/grid-list-tile-bar.md b/docs/pages/api-docs/grid-list-tile-bar.md index 8b8c24395e9334..9194cb0a411be5 100644 --- a/docs/pages/api-docs/grid-list-tile-bar.md +++ b/docs/pages/api-docs/grid-list-tile-bar.md @@ -29,7 +29,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | subtitle | node | | String or element serving as subtitle (support text). | | title | node | | Title to be displayed on tile. | -| titlePosition | 'top'
| 'bottom' | 'bottom' | Position of the title bar. | +| titlePosition | 'bottom'
| 'top' | 'bottom' | Position of the title bar. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/grow.md b/docs/pages/api-docs/grow.md index 6be835581d90b6..ec9b1a21b75d80 100644 --- a/docs/pages/api-docs/grow.md +++ b/docs/pages/api-docs/grow.md @@ -28,7 +28,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro |:-----|:-----|:--------|:------------| | children | element | | A single child content element. | | in | bool | | If `true`, show the component; triggers the enter or exit animation. | -| timeout | number
| { enter?: number, exit?: number }
| 'auto' | 'auto' | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height. | +| timeout | 'auto'
| number
| { appear?: number, enter?: number, exit?: number } | 'auto' | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
Set to 'auto' to automatically calculate transition time based on height. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/linear-progress.md b/docs/pages/api-docs/linear-progress.md index a45999a6133292..c2aa4275694edf 100644 --- a/docs/pages/api-docs/linear-progress.md +++ b/docs/pages/api-docs/linear-progress.md @@ -32,7 +32,7 @@ attribute to `true` on that region until it has finished loading. | color | 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | | value | number | | The value of the progress indicator for the determinate and buffer variants. Value between 0 and 100. | | valueBuffer | number | | The value for the buffer variant. Value between 0 and 100. | -| variant | 'determinate'
| 'indeterminate'
| 'buffer'
| 'query' | 'indeterminate' | The variant to use. Use indeterminate or query when there is no progress value. | +| variant | 'buffer'
| 'determinate'
| 'indeterminate'
| 'query' | 'indeterminate' | The variant to use. Use indeterminate or query when there is no progress value. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/menu-list.md b/docs/pages/api-docs/menu-list.md index 39a7b425f0ed54..be4b6d4cfdb414 100644 --- a/docs/pages/api-docs/menu-list.md +++ b/docs/pages/api-docs/menu-list.md @@ -27,8 +27,8 @@ the focus is placed inside the component it is fully keyboard accessible. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| autoFocus | bool | false | If `true`, will focus the `[role="menu"]` container and move into tab order | -| autoFocusItem | bool | false | If `true`, will focus the first menuitem if `variant="menu"` or selected item if `variant="selectedMenu"` | +| autoFocus | bool | false | If `true`, will focus the `[role="menu"]` container and move into tab order. | +| autoFocusItem | bool | false | If `true`, will focus the first menuitem if `variant="menu"` or selected item if `variant="selectedMenu"`. | | children | node | | MenuList contents, normally `MenuItem`s. | | disableListWrap | bool | false | If `true`, the menu items will not wrap focus. | | variant | 'menu'
| 'selectedMenu' | 'selectedMenu' | The variant to use. Use `menu` to prevent selected items from impacting the initial focus and the vertical alignment relative to the anchor element. | diff --git a/docs/pages/api-docs/menu.md b/docs/pages/api-docs/menu.md index 5abae1f0a9ce7c..8ba672bf5d1dfd 100644 --- a/docs/pages/api-docs/menu.md +++ b/docs/pages/api-docs/menu.md @@ -24,7 +24,6 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| anchorEl | object
| func | | The DOM element used to set the position of the menu. | | autoFocus | bool | true | If `true` (Default) will focus the `[role="menu"]` if no focusable child is found. Disabled children are not focusable. If you set this prop to `false` focus will be placed on the parent modal container. This has severe accessibility implications and should only be considered if you manage focus otherwise. | | children | node | | Menu contents, normally `MenuItem`s. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | @@ -39,7 +38,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | onExiting | func | | Callback fired when the Menu is exiting. | | open * | bool | | If `true`, the menu is visible. | | PopoverClasses | object | | `classes` prop applied to the [`Popover`](/api/popover/) element. | -| transitionDuration | number
| { enter?: number, exit?: number }
| 'auto' | 'auto' | The length of the transition in `ms`, or 'auto' | +| transitionDuration | 'auto'
| number
| { appear?: number, enter?: number, exit?: number } | 'auto' | The length of the transition in `ms`, or 'auto' | | variant | 'menu'
| 'selectedMenu' | 'selectedMenu' | The variant to use. Use `menu` to prevent selected items from impacting the initial focus and the vertical alignment relative to the anchor element. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/mobile-stepper.md b/docs/pages/api-docs/mobile-stepper.md index 20289217e97884..33f57ddc40901f 100644 --- a/docs/pages/api-docs/mobile-stepper.md +++ b/docs/pages/api-docs/mobile-stepper.md @@ -29,9 +29,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | LinearProgressProps | object | | Props applied to the `LinearProgress` element. | | nextButton | node | | A next button element. For instance, it can be a `Button` or an `IconButton`. | -| position | 'bottom'
| 'top'
| 'static' | 'bottom' | Set the positioning type. | +| position | 'bottom'
| 'static'
| 'top' | 'bottom' | Set the positioning type. | | steps * | number | | The total steps. | -| variant | 'text'
| 'dots'
| 'progress' | 'dots' | The variant to use. | +| variant | 'dots'
| 'progress'
| 'text' | 'dots' | The variant to use. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/radio-group.md b/docs/pages/api-docs/radio-group.md index 4fe300e1e5d0ba..9190a69909414a 100644 --- a/docs/pages/api-docs/radio-group.md +++ b/docs/pages/api-docs/radio-group.md @@ -25,7 +25,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | node | | The content of the component. | -| defaultValue | any | | The default `input` element value. Use when the component is not controlled. | +| defaultValue | Array<string>
| number
| string | | The default `input` element value. Use when the component is not controlled. | | name | string | | The name used to reference the value of the control. If you don't provide this prop, it falls back to a randomly generated name. | | onChange | func | | Callback fired when a radio button is selected.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). | | value | any | | Value of the selected radio button. The DOM API casts this to a string. | diff --git a/docs/pages/api-docs/snackbar.md b/docs/pages/api-docs/snackbar.md index 144faf806a0505..5bc80a34616c5c 100644 --- a/docs/pages/api-docs/snackbar.md +++ b/docs/pages/api-docs/snackbar.md @@ -25,7 +25,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | action | node | | The action to display. It renders after the message, at the end of the snackbar. | -| anchorOrigin | { horizontal: 'left'
| 'center'
| 'right', vertical: 'top'
| 'bottom' } | { vertical: 'bottom', horizontal: 'center' } | The anchor of the `Snackbar`. | +| anchorOrigin | { horizontal: 'center'
| 'left'
| 'right', vertical: 'bottom'
| 'top' } | { vertical: 'bottom', horizontal: 'center' } | The anchor of the `Snackbar`. | | autoHideDuration | number | null | The number of milliseconds to wait before automatically calling the `onClose` function. `onClose` should then set the state of the `open` prop to hide the Snackbar. This behavior is disabled by default with the `null` value. | | children | element | | Replace the `SnackbarContent` component. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | @@ -44,7 +44,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | open | bool | | If `true`, `Snackbar` is open. | | resumeHideDuration | number | | The number of milliseconds to wait before dismissing after user interaction. If `autoHideDuration` prop isn't specified, it does nothing. If `autoHideDuration` prop is specified but `resumeHideDuration` isn't, we default to `autoHideDuration / 2` ms. | | TransitionComponent | elementType | Grow | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. | -| transitionDuration | number
| { enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | +| transitionDuration | number
| { appear?: number, enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | | TransitionProps | object | | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. | The `ref` is forwarded to the root element. diff --git a/docs/src/modules/utils/defaultPropsHandler.js b/docs/src/modules/utils/defaultPropsHandler.js index 961a1524b2d4a0..9f456176855b18 100644 --- a/docs/src/modules/utils/defaultPropsHandler.js +++ b/docs/src/modules/utils/defaultPropsHandler.js @@ -61,6 +61,13 @@ function getDefaultValuesFromProps(properties, documentation) { if (!propName) return; const propDescriptor = documentation.getPropDescriptor(propName); + if (propDescriptor.description === undefined) { + // private props have no propsType validator and therefore + // not description. + // They are either not subject to eslint react/prop-types + // or are and then we catch these issues during linting. + return; + } const jsdocDefaultValue = getJsdocDefaultValue( parseDoctrine(propDescriptor.description, { From 15342c73d066f7dc68fad02ea8fbfb58a3cb35fe Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 24 Mar 2020 23:00:40 +0100 Subject: [PATCH 10/15] fix: Accidentally required Transitionprops in Snackbar --- packages/material-ui/src/Snackbar/Snackbar.d.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/material-ui/src/Snackbar/Snackbar.d.ts b/packages/material-ui/src/Snackbar/Snackbar.d.ts index 9307c81720e7ae..adc600d0895856 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.d.ts +++ b/packages/material-ui/src/Snackbar/Snackbar.d.ts @@ -73,27 +73,27 @@ export interface SnackbarProps /** * Callback fired before the transition is entering. */ - onEnter: TransitionHandlerProps['onEnter']; + onEnter?: TransitionHandlerProps['onEnter']; /** * Callback fired when the transition has entered. */ - onEntered: TransitionHandlerProps['onEntered']; + onEntered?: TransitionHandlerProps['onEntered']; /** * Callback fired when the transition is entering. */ - onEntering: TransitionHandlerProps['onEntering']; + onEntering?: TransitionHandlerProps['onEntering']; /** * Callback fired before the transition is exiting. */ - onExit: TransitionHandlerProps['onExit']; + onExit?: TransitionHandlerProps['onExit']; /** * Callback fired when the transition has exited. */ - onExited: TransitionHandlerProps['onExited']; + onExited?: TransitionHandlerProps['onExited']; /** * Callback fired when the transition is exiting. */ - onExiting: TransitionHandlerProps['onExiting']; + onExiting?: TransitionHandlerProps['onExiting']; onMouseEnter?: React.MouseEventHandler; onMouseLeave?: React.MouseEventHandler; /** From d00a8ab44ff92879af9ddb0900ef29bc066fa967 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 24 Mar 2020 23:08:48 +0100 Subject: [PATCH 11/15] fix: Skip type inference This is why it's actually bad to rely on it too much. Goes against one of the strengths of TS: refactoring --- docs/src/pages/components/snackbars/TransitionsSnackbar.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx b/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx index 3826a3b6bc7216..7a44e0377a6806 100644 --- a/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx +++ b/docs/src/pages/components/snackbars/TransitionsSnackbar.tsx @@ -15,7 +15,10 @@ function GrowTransition(props: TransitionProps) { } export default function TransitionsSnackbar() { - const [state, setState] = React.useState({ + const [state, setState] = React.useState<{ + open: boolean; + Transition: React.ComponentType; + }>({ open: false, Transition: Fade, }); From 34d0939c9b2d4d6098e52b61da615635d4d5199b Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 25 Mar 2020 10:50:30 +0100 Subject: [PATCH 12/15] fix: use proper description for command --- scripts/generateProptypes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index c78feeaca33b43..4302a39db30636 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -167,7 +167,7 @@ async function run(argv: HandlerArgv) { yargs .command({ command: '$0', - describe: 'formats codebase', + describe: 'Generates Component.propTypes from TypeScript declarations', builder: (command) => { return command .option('disable-cache', { From d8baa075b19a96a5ae736e95e7cfa3ab881881c7 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 25 Mar 2020 10:53:56 +0100 Subject: [PATCH 13/15] chore: remove seemingly unused program files vs files branching --- scripts/generateProptypes.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index 4302a39db30636..92c494eaabb280 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -118,7 +118,7 @@ async function run(argv: HandlerArgv) { ), ); - const programFiles = _.flatten(allFiles) + const files = _.flatten(allFiles) // Filter out files where the directory name and filename doesn't match // Example: Modal/ModalManager.d.ts .filter((filePath) => { @@ -126,14 +126,11 @@ async function run(argv: HandlerArgv) { const fileName = path.basename(filePath, '.d.ts'); return fileName === folderName; + }) + .filter((filePath) => { + return filePattern.test(filePath); }); - // I believe that the program still needs every file - // for import-extends. Not sure but compiling all to be sure - const program = ttp.createProgram(programFiles, tsconfig); - - const files = programFiles.filter((filePath) => { - return filePattern.test(filePath); - }); + const program = ttp.createProgram(files, tsconfig); const promises = files.map>(async (tsFile) => { const jsFile = tsFile.replace('.d.ts', '.js'); From 9212d46cac118fa5d6cdf2e21096c914d4230145 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 25 Mar 2020 10:56:08 +0100 Subject: [PATCH 14/15] fix: restore Menu#anchorEl documentation --- docs/pages/api-docs/menu.md | 1 + packages/material-ui/src/Menu/Menu.d.ts | 1 + packages/material-ui/src/Menu/Menu.js | 7 +++++++ 3 files changed, 9 insertions(+) diff --git a/docs/pages/api-docs/menu.md b/docs/pages/api-docs/menu.md index 8ba672bf5d1dfd..33b469cc05f0a7 100644 --- a/docs/pages/api-docs/menu.md +++ b/docs/pages/api-docs/menu.md @@ -24,6 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| +| anchorEl | func
| Element | | The DOM element used to set the position of the menu. | | autoFocus | bool | true | If `true` (Default) will focus the `[role="menu"]` if no focusable child is found. Disabled children are not focusable. If you set this prop to `false` focus will be placed on the parent modal container. This has severe accessibility implications and should only be considered if you manage focus otherwise. | | children | node | | Menu contents, normally `MenuItem`s. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | diff --git a/packages/material-ui/src/Menu/Menu.d.ts b/packages/material-ui/src/Menu/Menu.d.ts index 836decedeb6563..6af9c66a18665e 100644 --- a/packages/material-ui/src/Menu/Menu.d.ts +++ b/packages/material-ui/src/Menu/Menu.d.ts @@ -9,6 +9,7 @@ export interface MenuProps extends StandardProps, MenuClassKey> { /** * The DOM element used to set the position of the menu. + * @document */ anchorEl?: PopoverProps['anchorEl']; /** diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js index 8b9bf900dc675f..2a96e5d3735e9b 100644 --- a/packages/material-ui/src/Menu/Menu.js +++ b/packages/material-ui/src/Menu/Menu.js @@ -170,6 +170,13 @@ Menu.propTypes = { // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the d.ts file and run "yarn proptypes" | // ---------------------------------------------------------------------- + /** + * The DOM element used to set the position of the menu. + */ + anchorEl: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.instanceOf(typeof Element === 'undefined' ? Object : Element), + ]), /** * If `true` (Default) will focus the `[role="menu"]` if no focusable child is found. Disabled * children are not focusable. If you set this prop to `false` focus will be placed From dbd1d3e7677e6e40d366032a1f76610633f49197 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 25 Mar 2020 12:19:34 +0100 Subject: [PATCH 15/15] fixup: some components were not considered for automatic propTypes generation --- packages/material-ui/src/Drawer/Drawer.d.ts | 4 +--- .../src/ExpansionPanelActions/ExpansionPanelActions.d.ts | 4 +--- .../src/ExpansionPanelDetails/ExpansionPanelDetails.d.ts | 4 +--- packages/material-ui/src/ListItemAvatar/ListItemAvatar.d.ts | 4 +--- 4 files changed, 4 insertions(+), 12 deletions(-) diff --git a/packages/material-ui/src/Drawer/Drawer.d.ts b/packages/material-ui/src/Drawer/Drawer.d.ts index e932cd0977d119..e647049b5f42a4 100644 --- a/packages/material-ui/src/Drawer/Drawer.d.ts +++ b/packages/material-ui/src/Drawer/Drawer.d.ts @@ -82,6 +82,4 @@ export type DrawerClassKey = * * - [Drawer API](https://material-ui.com/api/drawer/) */ -declare const Drawer: React.ComponentType; - -export default Drawer; +export default function Drawer(props: DrawerProps): JSX.Element; diff --git a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.d.ts b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.d.ts index 78426162bdf158..679eb1ddabe821 100644 --- a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.d.ts +++ b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.d.ts @@ -21,6 +21,4 @@ export type ExpansionPanelActionsClassKey = 'root' | 'spacing'; * * - [ExpansionPanelActions API](https://material-ui.com/api/expansion-panel-actions/) */ -declare const ExpansionPanelActions: React.ComponentType; - -export default ExpansionPanelActions; +export default function ExpansionPanelActions(props: ExpansionPanelActionsProps): JSX.Element; diff --git a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.d.ts b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.d.ts index 55b982e37ba42d..2678f5e6c9ee57 100644 --- a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.d.ts +++ b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.d.ts @@ -21,6 +21,4 @@ export type ExpansionPanelDetailsClassKey = 'root'; * * - [ExpansionPanelDetails API](https://material-ui.com/api/expansion-panel-details/) */ -declare const ExpansionPanelDetails: React.ComponentType; - -export default ExpansionPanelDetails; +export default function ExpansionPanelDetails(props: ExpansionPanelDetailsProps): JSX.Element; diff --git a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.d.ts b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.d.ts index c6493a5e236892..29261a4b86e632 100644 --- a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.d.ts +++ b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.d.ts @@ -19,6 +19,4 @@ export type ListItemAvatarClassKey = 'root' | 'icon'; * * - [ListItemAvatar API](https://material-ui.com/api/list-item-avatar/) */ -declare const ListItemAvatar: React.ComponentType; - -export default ListItemAvatar; +export default function ListItemAvatar(props: ListItemAvatarProps): JSX.Element;