[docs] Move more prop docs into IntelliSense

docs/pages/api-docs/checkbox.md

@@ -27,7 +27,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">checked</span> | <span class="prop-type">bool</span> |  | If `true`, the component is checked. |
 | <span class="prop-name">checkedIcon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;CheckBoxIcon /></span> | The icon to display when the component is checked. |
 | <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">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'default'</span> | <span class="prop-default">'secondary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">color</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'secondary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the checkbox will be disabled. |
 | <span class="prop-name">disableRipple</span> | <span class="prop-type">bool</span> |  | If `true`, the ripple effect will be disabled. |
 | <span class="prop-name">icon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;CheckBoxOutlineBlankIcon /></span> | The icon to display when the component is unchecked. |
@@ -38,7 +38,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">inputRef</span> | <span class="prop-type">ref</span> |  | Pass a ref to the `input` element. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean). |
 | <span class="prop-name">required</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be required. |
-| <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'</span> | <span class="prop-default">'medium'</span> | The size of the checkbox. `small` is equivalent to the dense checkbox styling. |
+| <span class="prop-name">size</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'medium'</span> | The size of the checkbox. `small` is equivalent to the dense checkbox styling. |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The value of the component. The DOM API casts this to a string. The browser uses "on" as the default value. |
 
 The `ref` is forwarded to the root element.

docs/pages/api-docs/circular-progress.md

@@ -29,7 +29,7 @@ attribute to `true` on that region until it has finished loading.
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <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">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'inherit'</span> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">color</span> | <span class="prop-type">'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">disableShrink</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the shrink animation is disabled. This only works if variant is `indeterminate`. |
 | <span class="prop-name">size</span> | <span class="prop-type">number<br>&#124;&nbsp;string</span> | <span class="prop-default">40</span> | The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g '3rem'. |
 | <span class="prop-name">thickness</span> | <span class="prop-type">number</span> | <span class="prop-default">3.6</span> | The thickness of the circle. |

docs/pages/api-docs/click-away-listener.md

@@ -28,7 +28,7 @@ For instance, if you need to hide a menu when people click anywhere else on your
 | <span class="prop-name required">children&nbsp;*</span> | <span class="prop-type">element</span> |  | The wrapped element.<br>⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). |
 | <span class="prop-name">mouseEvent</span> | <span class="prop-type">'onClick'<br>&#124;&nbsp;'onMouseDown'<br>&#124;&nbsp;'onMouseUp'<br>&#124;&nbsp;false</span> | <span class="prop-default">'onClick'</span> | The mouse event to listen to. You can disable the listener by providing `false`. |
 | <span class="prop-name required">onClickAway&nbsp;*</span> | <span class="prop-type">func</span> |  | Callback fired when a "click away" event is detected. |
-| <span class="prop-name">touchEvent</span> | <span class="prop-type">'onTouchStart'<br>&#124;&nbsp;'onTouchEnd'<br>&#124;&nbsp;false</span> | <span class="prop-default">'onTouchEnd'</span> | The touch event to listen to. You can disable the listener by providing `false`. |
+| <span class="prop-name">touchEvent</span> | <span class="prop-type">'onTouchEnd'<br>&#124;&nbsp;'onTouchStart'<br>&#124;&nbsp;false</span> | <span class="prop-default">'onTouchEnd'</span> | The touch event to listen to. You can disable the listener by providing `false`. |
 
 The component cannot hold a ref.
 

docs/pages/api-docs/expansion-panel.md

@@ -30,6 +30,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the panel will be displayed in a disabled state. |
 | <span class="prop-name">expanded</span> | <span class="prop-type">bool</span> |  | If `true`, expands the panel, otherwise collapse it. Setting this prop enables control over the panel. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the expand/collapse state is changed.<br><br>**Signature:**<br>`function(event: object, expanded: boolean) => void`<br>*event:* The event source of the callback.<br>*expanded:* The `expanded` state of the panel. |
+| <span class="prop-name">square</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, rounded corners are disabled. |
 | <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Collapse</span> | The component used for the collapse effect. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. |
 | <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. |
 

package.json

@@ -142,7 +142,7 @@
     "ts-node": "^8.3.0",
     "tslint": "5.14.0",
     "typescript": "^3.8.2",
-    "typescript-to-proptypes": "^1.4.2",
+    "typescript-to-proptypes": "https://pkg.csb.dev/eps1lon/typescript-to-proptypes/commit/93baa632/typescript-to-proptypes",
     "unist-util-visit": "^2.0.2",
     "vrtest-mui": "^0.3.3",
     "webpack": "^4.41.0",

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

@@ -8,12 +8,74 @@ export interface CheckboxProps
     CheckboxClassKey,
     'checkedIcon' | 'color' | 'icon' | 'type'
   > {
+  /**
+   * If `true`, the component is checked.
+   */
+  checked?: SwitchBaseProps['checked'];
+  /**
+   * The icon to display when the component is checked.
+   */
   checkedIcon?: React.ReactNode;
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
   color?: 'primary' | 'secondary' | 'default';
+  /**
+   * If `true`, the checkbox will be disabled.
+   */
+  disabled?: SwitchBaseProps['disabled'];
+  /**
+   * If `true`, the ripple effect will be disabled.
+   */
+  disableRipple?: SwitchBaseProps['disableRipple'];
+  /**
+   * The icon to display when the component is unchecked.
+   */
   icon?: React.ReactNode;
+  /**
+   * The id of the `input` element.
+   */
+  id?: SwitchBaseProps['id'];
+  /**
+   * If `true`, the component appears indeterminate.
+   * This does not set the native input element to indeterminate due
+   * to inconsistent behavior across browsers.
+   * However, we set a `data-indeterminate` attribute on the input.
+   */
   indeterminate?: boolean;
+  /**
+   * The icon to display when the component is indeterminate.
+   */
   indeterminateIcon?: React.ReactNode;
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   */
+  inputProps?: SwitchBaseProps['inputProps'];
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef?: React.Ref<HTMLInputElement>;
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange?: SwitchBaseProps['onChange'];
+  /**
+   * If `true`, the `input` element will be required.
+   */
+  required?: SwitchBaseProps['required'];
+  /**
+   * The size of the checkbox.
+   * `small` is equivalent to the dense checkbox styling.
+   */
   size?: 'small' | 'medium';
+  /**
+   * The value of the component. The DOM API casts this to a string.
+   * The browser uses "on" as the default value.
+   */
+  value?: SwitchBaseProps['value'];
 }
 
 export type CheckboxClassKey =
@@ -34,6 +96,4 @@ export type CheckboxClassKey =
  * - [Checkbox API](https://material-ui.com/api/checkbox/)
  * - inherits [IconButton API](https://material-ui.com/api/icon-button/)
  */
-declare const Checkbox: React.ComponentType<CheckboxProps>;
-
-export default Checkbox;
+export default function Checkbox(props: CheckboxProps): JSX.Element;

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

@@ -100,6 +100,10 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) {
 });
 
 Checkbox.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`, the component is checked.
    */
@@ -112,11 +116,11 @@ Checkbox.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,
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    */
-  color: PropTypes.oneOf(['primary', 'secondary', 'default']),
+  color: PropTypes.oneOf(['default', 'primary', 'secondary']),
   /**
    * If `true`, the checkbox will be disabled.
    */
@@ -167,7 +171,7 @@ Checkbox.propTypes = {
    * The size of the checkbox.
    * `small` is equivalent to the dense checkbox styling.
    */
-  size: PropTypes.oneOf(['small', 'medium']),
+  size: PropTypes.oneOf(['medium', 'small']),
   /**
    * The value of the component. The DOM API casts this to a string.
    * The browser uses "on" as the default value.

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

@@ -2,12 +2,39 @@ import * as React from 'react';
 import { StandardProps } from '..';
 
 export interface CircularProgressProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CircularProgressClassKey> {
+  extends StandardProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    CircularProgressClassKey,
+    'children'
+  > {
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
   color?: 'primary' | 'secondary' | 'inherit';
+  /**
+   * If `true`, the shrink animation is disabled.
+   * This only works if variant is `indeterminate`.
+   */
   disableShrink?: boolean;
+  /**
+   * The size of the circle.
+   * If using a number, the pixel unit is assumed.
+   * If using a string, you need to provide the CSS unit, e.g '3rem'.
+   */
   size?: number | string;
+  /**
+   * The thickness of the circle.
+   */
   thickness?: number;
+  /**
+   * The value of the progress indicator for the determinate and static variants.
+   * Value between 0 and 100.
+   */
   value?: number;
+  /**
+   * The variant to use.
+   * Use indeterminate when there is no progress value.
+   */
   variant?: 'determinate' | 'indeterminate' | 'static';
 }
 
@@ -37,6 +64,4 @@ export type CircularProgressClassKey =
  *
  * - [CircularProgress API](https://material-ui.com/api/circular-progress/)
  */
-declare const CircularProgress: React.ComponentType<CircularProgressProps>;
-
-export default CircularProgress;
+export default function CircularProgress(props: CircularProgressProps): JSX.Element;

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

@@ -167,19 +167,23 @@ const CircularProgress = React.forwardRef(function CircularProgress(props, ref)
 });
 
 CircularProgress.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
    */
   className: PropTypes.string,
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    */
-  color: PropTypes.oneOf(['primary', 'secondary', 'inherit']),
+  color: PropTypes.oneOf(['inherit', 'primary', 'secondary']),
   /**
    * If `true`, the shrink animation is disabled.
    * This only works if variant is `indeterminate`.

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

@@ -1,9 +1,21 @@
 import * as React from 'react';
 
 export interface ClickAwayListenerProps {
-  children: React.ReactNode;
+  /**
+   * The wrapped element.
+   */
+  children: React.ReactElement<any, any>;
+  /**
+   * The mouse event to listen to. You can disable the listener by providing `false`.
+   */
   mouseEvent?: 'onClick' | 'onMouseDown' | 'onMouseUp' | false;
+  /**
+   * Callback fired when a "click away" event is detected.
+   */
   onClickAway: (event: React.MouseEvent<Document>) => void;
+  /**
+   * The touch event to listen to. You can disable the listener by providing `false`.
+   */
   touchEvent?: 'onTouchStart' | 'onTouchEnd' | false;
 }
 
@@ -19,6 +31,4 @@ export interface ClickAwayListenerProps {
  *
  * - [ClickAwayListener API](https://material-ui.com/api/click-away-listener/)
  */
-declare const ClickAwayListener: React.ComponentType<ClickAwayListenerProps>;
-
-export default ClickAwayListener;
+export default function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element;

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

@@ -37,6 +37,7 @@ const ClickAwayListener = React.forwardRef(function ClickAwayListener(props, ref
     },
     [handleNodeRef],
   );
+
   const handleRef = useForkRef(children.ref, handleOwnRef);
 
   const handleClickAway = useEventCallback((event) => {
@@ -115,6 +116,10 @@ const ClickAwayListener = React.forwardRef(function ClickAwayListener(props, ref
 });
 
 ClickAwayListener.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The wrapped element.
    */
@@ -130,7 +135,7 @@ ClickAwayListener.propTypes = {
   /**
    * The touch event to listen to. You can disable the listener by providing `false`.
    */
-  touchEvent: PropTypes.oneOf(['onTouchStart', 'onTouchEnd', false]),
+  touchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false]),
 };
 
 if (process.env.NODE_ENV !== 'production') {

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

@@ -5,13 +5,40 @@ import { PaperProps } from '../Paper';
 
 export interface ExpansionPanelProps
   extends StandardProps<PaperProps, ExpansionPanelClassKey, 'onChange'> {
+  /**
+   * The content of the expansion panel.
+   */
+  children: Exclude<React.ReactNode, null | undefined>;
+  /**
+   * If `true`, expands the panel by default.
+   */
   defaultExpanded?: boolean;
+  /**
+   * If `true`, the panel will be displayed in a disabled state.
+   */
   disabled?: boolean;
+  /**
+   * If `true`, expands the panel, otherwise collapse it.
+   * Setting this prop enables control over the panel.
+   */
   expanded?: boolean;
+  /**
+   * Callback fired when the expand/collapse state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {boolean} expanded The `expanded` state of the panel.
+   */
   onChange?: (event: React.ChangeEvent<{}>, expanded: boolean) => void;
+  /**
+   * The component used for the collapse effect.
+   * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   */
   TransitionComponent?: React.ComponentType<
     TransitionProps & { children?: React.ReactElement<any, any> }
   >;
+  /**
+   * Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.
+   */
   TransitionProps?: TransitionProps;
 }
 
@@ -28,6 +55,4 @@ export type ExpansionPanelClassKey = 'root' | 'rounded' | 'expanded' | 'disabled
  * - [ExpansionPanel API](https://material-ui.com/api/expansion-panel/)
  * - inherits [Paper API](https://material-ui.com/api/paper/)
  */
-declare const ExpansionPanel: React.ComponentType<ExpansionPanelProps>;
-
-export default ExpansionPanel;
+export default function ExpansionPanel(props: ExpansionPanelProps): JSX.Element;

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

@@ -147,6 +147,10 @@ const ExpansionPanel = React.forwardRef(function ExpansionPanel(props, ref) {
 });
 
 ExpansionPanel.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.
    */
@@ -171,7 +175,7 @@ ExpansionPanel.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
    */
@@ -197,7 +201,7 @@ ExpansionPanel.propTypes = {
    */
   onChange: PropTypes.func,
   /**
-   * @ignore
+   * If `true`, rounded corners are disabled.
    */
   square: PropTypes.bool,
   /**

packages/material-ui/src/internal/SwitchBase.d.ts

@@ -3,7 +3,11 @@ import { StandardProps } from '..';
 import { IconButtonProps } from '../IconButton';
 
 export interface SwitchBaseProps
-  extends StandardProps<IconButtonProps, SwitchBaseClassKey, 'onChange' | 'type' | 'value'> {
+  extends StandardProps<
+    IconButtonProps,
+    SwitchBaseClassKey,
+    'children' | 'onChange' | 'type' | 'value'
+  > {
   autoFocus?: boolean;
   checked?: boolean;
   checkedIcon: React.ReactNode;