[docs] Move more prop docs into IntelliSense

docs/pages/api-docs/dialog.md

@@ -26,13 +26,13 @@ Dialogs are overlaid modal paper based components with a backdrop.
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">aria-describedby</span> | <span class="prop-type">string</span> |  | The id(s) of the element(s) that describe the dialog. |
 | <span class="prop-name">aria-labelledby</span> | <span class="prop-type">string</span> |  | The id(s) of the element(s) that label the dialog. |
-| <span class="prop-name required">children&nbsp;*</span> | <span class="prop-type">node</span> |  | Dialog children, usually the included sub-components. |
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | Dialog children, usually the included sub-components. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">disableBackdropClick</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, clicking the backdrop will not fire the `onClose` callback. |
 | <span class="prop-name">disableEscapeKeyDown</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, hitting escape will not fire the `onClose` callback. |
 | <span class="prop-name">fullScreen</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the dialog will be full-screen |
 | <span class="prop-name">fullWidth</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the dialog stretches to `maxWidth`.<br>Notice that the dialog width grow is limited by the default margin. |
-| <span class="prop-name">maxWidth</span> | <span class="prop-type">'xs'<br>&#124;&nbsp;'sm'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'lg'<br>&#124;&nbsp;'xl'<br>&#124;&nbsp;false</span> | <span class="prop-default">'sm'</span> | Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to `false` to disable `maxWidth`. |
+| <span class="prop-name">maxWidth</span> | <span class="prop-type">'lg'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'sm'<br>&#124;&nbsp;'xl'<br>&#124;&nbsp;'xs'<br>&#124;&nbsp;false</span> | <span class="prop-default">'sm'</span> | Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to `false` to disable `maxWidth`. |
 | <span class="prop-name">onBackdropClick</span> | <span class="prop-type">func</span> |  | Callback fired when the backdrop is clicked. |
 | <span class="prop-name">onClose</span> | <span class="prop-type">func</span> |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object, reason: string) => void`<br>*event:* The event source of the callback.<br>*reason:* Can be: `"escapeKeyDown"`, `"backdropClick"`. |
 | <span class="prop-name">onEnter</span> | <span class="prop-type">func</span> |  | Callback fired before the dialog enters. |
@@ -47,7 +47,7 @@ Dialogs are overlaid modal paper based components with a backdrop.
 | <span class="prop-name">PaperProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the [`Paper`](/api/paper/) element. |
 | <span class="prop-name">scroll</span> | <span class="prop-type">'body'<br>&#124;&nbsp;'paper'</span> | <span class="prop-default">'paper'</span> | Determine the container for scrolling the dialog. |
 | <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Fade</span> | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
-| <span class="prop-name">transitionDuration</span> | <span class="prop-type">number<br>&#124;&nbsp;{ enter?: number, exit?: number }</span> | <span class="prop-default">{ enter: duration.enteringScreen, exit: duration.leavingScreen }</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| <span class="prop-name">transitionDuration</span> | <span class="prop-type">number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }</span> | <span class="prop-default">{ enter: duration.enteringScreen, exit: duration.leavingScreen }</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 | <span class="prop-name">TransitionProps</span> | <span class="prop-type">object</span> |  | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. |
 
 The `ref` is forwarded to the root element.

docs/pages/api-docs/native-select.md

@@ -31,7 +31,7 @@ An alternative to `<Select native />` with a much smaller bundle size footprint.
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object</span> |  | Attributes applied to the `select` element. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback function fired when a menu item is selected.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The input value. The DOM API casts this to a string. |
-| <span class="prop-name">variant</span> | <span class="prop-type">'standard'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;'filled'</span> |  | The variant to use. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'filled'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;'standard'</span> |  | The variant to use. |
 
 The `ref` is forwarded to the root element.
 

docs/pages/api-docs/select.md

@@ -45,7 +45,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">renderValue</span> | <span class="prop-type">func</span> |  | Render the selected value. You can only use it when the `native` prop is `false` (default).<br><br>**Signature:**<br>`function(value: any) => ReactNode`<br>*value:* The `value` provided to the component. |
 | <span class="prop-name">SelectDisplayProps</span> | <span class="prop-type">object</span> |  | Props applied to the clickable div element. |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The input value. Providing an empty string will select no options. This prop is required when the `native` prop is `false` (default). Set to an empty string `''` if you don't want any of the available options to be selected.<br>If the value is an object it must have reference equality with the option in order to be selected. If the value is not an object, the string representation must match with the string representation of the option in order to be selected. |
-| <span class="prop-name">variant</span> | <span class="prop-type">'standard'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;'filled'</span> | <span class="prop-default">'standard'</span> | The variant to use. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'filled'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;'standard'</span> | <span class="prop-default">'standard'</span> | The variant to use. |
 
 The `ref` is forwarded to the root element.
 

docs/pages/api-docs/table-cell.md

@@ -25,15 +25,15 @@ or otherwise a `<td>` element.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">align</span> | <span class="prop-type">'inherit'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'center'<br>&#124;&nbsp;'right'<br>&#124;&nbsp;'justify'</span> | <span class="prop-default">'inherit'</span> | Set the text-align on the table cell content.<br>Monetary or generally number fields **should be right aligned** as that allows you to add them up quickly in your head without having to worry about decimals. |
+| <span class="prop-name">align</span> | <span class="prop-type">'center'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'justify'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right'</span> | <span class="prop-default">'inherit'</span> | Set the text-align on the table cell content.<br>Monetary or generally number fields **should be right aligned** as that allows you to add them up quickly in your head without having to worry about decimals. |
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The table cell contents. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> |  | The component used for the root node. Either a string to use a DOM element or a component. |
-| <span class="prop-name">padding</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'checkbox'<br>&#124;&nbsp;'none'</span> |  | Sets the padding applied to the cell. By default, the Table parent component set the value (`default`). |
+| <span class="prop-name">padding</span> | <span class="prop-type">'checkbox'<br>&#124;&nbsp;'default'<br>&#124;&nbsp;'none'</span> |  | Sets the padding applied to the cell. By default, the Table parent component set the value (`default`). |
 | <span class="prop-name">scope</span> | <span class="prop-type">string</span> |  | Set scope attribute. |
-| <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'</span> |  | Specify the size of the cell. By default, the Table parent component set the value (`medium`). |
+| <span class="prop-name">size</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'</span> |  | Specify the size of the cell. By default, the Table parent component set the value (`medium`). |
 | <span class="prop-name">sortDirection</span> | <span class="prop-type">'asc'<br>&#124;&nbsp;'desc'<br>&#124;&nbsp;false</span> |  | Set aria-sort direction. |
-| <span class="prop-name">variant</span> | <span class="prop-type">'head'<br>&#124;&nbsp;'body'<br>&#124;&nbsp;'footer'</span> |  | Specify the cell type. By default, the TableHead, TableBody or TableFooter parent component set the value. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'body'<br>&#124;&nbsp;'footer'<br>&#124;&nbsp;'head'</span> |  | Specify the cell type. By default, the TableHead, TableBody or TableFooter parent component set the value. |
 
 The `ref` is forwarded to the root element.
 

docs/pages/api-docs/textarea-autosize.md

@@ -24,9 +24,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">rows</span> | <span class="prop-type">string<br>&#124;&nbsp;number</span> |  | Use `rowsMin` instead. The prop will be removed in v5. |
-| <span class="prop-name">rowsMax</span> | <span class="prop-type">string<br>&#124;&nbsp;number</span> |  | Maximum number of rows to display. |
-| <span class="prop-name">rowsMin</span> | <span class="prop-type">string<br>&#124;&nbsp;number</span> | <span class="prop-default">1</span> | Minimum number of rows to display. |
+| <span class="prop-name">rows</span> | <span class="prop-type">number<br>&#124;&nbsp;string</span> |  | Use `rowsMin` instead. The prop will be removed in v5. |
+| <span class="prop-name">rowsMax</span> | <span class="prop-type">number<br>&#124;&nbsp;string</span> |  | Maximum number of rows to display. |
+| <span class="prop-name">rowsMin</span> | <span class="prop-type">number<br>&#124;&nbsp;string</span> | <span class="prop-default">1</span> | Minimum number of rows to display. |
 
 The `ref` is forwarded to the root element.
 

docs/pages/api-docs/zoom.md

@@ -28,7 +28,7 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">element</span> |  | A single child content element. |
 | <span class="prop-name">in</span> | <span class="prop-type">bool</span> |  | If `true`, the component will transition in. |
-| <span class="prop-name">timeout</span> | <span class="prop-type">number<br>&#124;&nbsp;{ enter?: number, exit?: number }</span> | <span class="prop-default">{  enter: duration.enteringScreen,  exit: duration.leavingScreen,}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| <span class="prop-name">timeout</span> | <span class="prop-type">number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }</span> | <span class="prop-default">{  enter: duration.enteringScreen,  exit: duration.leavingScreen,}</span> | 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.
 

package.json

@@ -142,7 +142,7 @@
     "ts-node": "^8.3.0",
     "tslint": "5.14.0",
     "typescript": "^3.8.2",
-    "typescript-to-proptypes": "^1.4.0",
+    "typescript-to-proptypes": "^1.4.2",
     "unist-util-visit": "^2.0.2",
     "vrtest-mui": "^0.3.3",
     "webpack": "^4.41.0",

packages/material-ui/src/Dialog/Dialog.d.ts

@@ -6,15 +6,111 @@ import { TransitionHandlerProps, TransitionProps } from '../transitions/transiti
 
 export interface DialogProps
   extends StandardProps<ModalProps & Partial<TransitionHandlerProps>, DialogClassKey, 'children'> {
-  children?: React.ReactNode;
+  /**
+   * The id(s) of the element(s) that describe the dialog.
+   */
+  'aria-describedby'?: string;
+  /**
+   * The id(s) of the element(s) that label the dialog.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Dialog children, usually the included sub-components.
+   */
+  children: React.ReactNode;
+  /**
+   * If `true`, clicking the backdrop will not fire the `onClose` callback.
+   */
+  disableBackdropClick?: boolean;
+  /**
+   * If `true`, hitting escape will not fire the `onClose` callback.
+   */
+  disableEscapeKeyDown?: boolean;
+  /**
+   * If `true`, the dialog will be full-screen
+   */
   fullScreen?: boolean;
+  /**
+   * If `true`, the dialog stretches to `maxWidth`.
+   *
+   * Notice that the dialog width grow is limited by the default margin.
+   */
   fullWidth?: boolean;
+  /**
+   * Determine the max-width of the dialog.
+   * The dialog width grows with the size of the screen.
+   * Set to `false` to disable `maxWidth`.
+   */
   maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
+  /**
+   * Callback fired when the backdrop is clicked.
+   */
+  onBackdropClick?: ModalProps['onBackdropClick'];
+  /**
+   * 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"`.
+   */
+  onClose?: ModalProps['onClose'];
+  /**
+   * Callback fired before the dialog enters.
+   */
+  onEnter?: TransitionHandlerProps['onEnter'];
+  /**
+   * Callback fired when the dialog has entered.
+   */
+  onEntered?: TransitionHandlerProps['onEntered'];
+  /**
+   * Callback fired when the dialog is entering.
+   */
+  onEntering?: TransitionHandlerProps['onEntering'];
+  /**
+   * Callback fired when the escape key is pressed,
+   * `disableKeyboard` is false and the modal is in focus.
+   */
+  onEscapeKeyDown?: ModalProps['onEscapeKeyDown'];
+  /**
+   * Callback fired before the dialog exits.
+   */
+  onExit?: TransitionHandlerProps['onExit'];
+  /**
+   * Callback fired when the dialog has exited.
+   */
+  onExited?: TransitionHandlerProps['onExited'];
+  /**
+   * Callback fired when the dialog is exiting.
+   */
+  onExiting?: TransitionHandlerProps['onExiting'];
+  /**
+   * If `true`, the Dialog is open.
+   */
+  open: ModalProps['open'];
+  /**
+   * The component used to render the body of the dialog.
+   */
   PaperComponent?: React.ComponentType<PaperProps>;
+  /**
+   * Props applied to the [`Paper`](/api/paper/) element.
+   */
   PaperProps?: Partial<PaperProps>;
+  /**
+   * Determine the container for scrolling the dialog.
+   */
   scroll?: 'body' | 'paper';
+  /**
+   * 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<TransitionProps>;
+  /**
+   * 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;
 }
 
@@ -46,6 +142,4 @@ export type DialogClassKey =
  * - [Dialog API](https://material-ui.com/api/dialog/)
  * - inherits [Modal API](https://material-ui.com/api/modal/)
  */
-declare const Dialog: React.ComponentType<DialogProps>;
-
-export default Dialog;
+export default function Dialog(props: DialogProps): JSX.Element;

packages/material-ui/src/Dialog/Dialog.js

@@ -264,6 +264,10 @@ const Dialog = React.forwardRef(function Dialog(props, ref) {
 });
 
 Dialog.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The id(s) of the element(s) that describe the dialog.
    */
@@ -279,12 +283,12 @@ Dialog.propTypes = {
   /**
    * Dialog children, usually the included sub-components.
    */
-  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
    */
@@ -312,7 +316,7 @@ Dialog.propTypes = {
    * The dialog width grows with the size of the screen.
    * Set to `false` to disable `maxWidth`.
    */
-  maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]),
+  maxWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false]),
   /**
    * Callback fired when the backdrop is clicked.
    */
@@ -380,7 +384,11 @@ Dialog.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.

packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.d.ts

@@ -1,7 +1,12 @@
 import { StandardProps } from '..';
 
 export interface ListItemSecondaryActionProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ListItemSecondaryActionClassKey> {}
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ListItemSecondaryActionClassKey> {
+  /**
+   * The content of the component, normally an `IconButton` or selection control.
+   */
+  children?: React.ReactNode;
+}
 
 export type ListItemSecondaryActionClassKey = 'root';
 
@@ -15,6 +20,4 @@ export type ListItemSecondaryActionClassKey = 'root';
  *
  * - [ListItemSecondaryAction API](https://material-ui.com/api/list-item-secondary-action/)
  */
-declare const ListItemSecondaryAction: React.ComponentType<ListItemSecondaryActionProps>;
-
-export default ListItemSecondaryAction;
+export default function ListItemSecondaryAction(props: ListItemSecondaryActionProps): JSX.Element;