[lab] Generate proptypes from type definitions (#17300)

docs/package.json

@@ -115,7 +115,6 @@
     "redux-logger": "^3.0.6",
     "rimraf": "^3.0.0",
     "styled-components": "^4.3.2",
-    "typescript-to-proptypes": "^1.2.3",
     "url-loader": "^2.1.0",
     "warning": "^4.0.3",
     "webfontloader": "^1.6.28",

docs/pages/api/speed-dial-action.md

@@ -27,11 +27,11 @@ You can learn more about the difference by [reading our guide](/guides/minimizin
 | <span class="prop-name">ButtonProps</span> | <span class="prop-type">object</span> |  | Props applied to the [`Button`](/api/button/) component. |
 | <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">delay</span> | <span class="prop-type">number</span> | <span class="prop-default">0</span> | Adds a transition delay, to allow a series of SpeedDialActions to be animated. |
-| <span class="prop-name required">icon&nbsp;*</span> | <span class="prop-type">node</span> |  | The Icon to display in the SpeedDial Floating Action Button. |
+| <span class="prop-name">icon</span> | <span class="prop-type">node</span> |  | The Icon to display in the SpeedDial Floating Action Button. |
 | <span class="prop-name">TooltipClasses</span> | <span class="prop-type">object</span> |  | Classes applied to the [`Tooltip`](/api/tooltip/) element. |
 | <span class="prop-name">tooltipOpen</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Make the tooltip always visible when the SpeedDial is open. |
 | <span class="prop-name">tooltipPlacement</span> | <span class="prop-type">'bottom-end'<br>&#124;&nbsp;'bottom-start'<br>&#124;&nbsp;'bottom'<br>&#124;&nbsp;'left-end'<br>&#124;&nbsp;'left-start'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right-end'<br>&#124;&nbsp;'right-start'<br>&#124;&nbsp;'right'<br>&#124;&nbsp;'top-end'<br>&#124;&nbsp;'top-start'<br>&#124;&nbsp;'top'</span> | <span class="prop-default">'left'</span> | Placement of the tooltip. |
-| <span class="prop-name required">tooltipTitle&nbsp;*</span> | <span class="prop-type">node</span> |  | Label to display in the tooltip. |
+| <span class="prop-name">tooltipTitle</span> | <span class="prop-type">node</span> |  | Label to display in the tooltip. |
 
 The component cannot hold a ref.
 

docs/pages/api/speed-dial.md

@@ -26,16 +26,16 @@ You can learn more about the difference by [reading our guide](/guides/minimizin
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name required">ariaLabel&nbsp;*</span> | <span class="prop-type">string</span> |  | The aria-label of the `Button` element. Also used to provide the `id` for the `SpeedDial` element and its children. |
 | <span class="prop-name">ButtonProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the [`Button`](/api/button/) element. |
-| <span class="prop-name required">children&nbsp;*</span> | <span class="prop-type">node</span> |  | SpeedDialActions to display when the SpeedDial is `open`. |
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | SpeedDialActions to display when the SpeedDial is `open`. |
 | <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">direction</span> | <span class="prop-type">'up'<br>&#124;&nbsp;'down'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right'</span> | <span class="prop-default">'up'</span> | The direction the actions open relative to the floating action button. |
+| <span class="prop-name">direction</span> | <span class="prop-type">'down'<br>&#124;&nbsp;'left'<br>&#124;&nbsp;'right'<br>&#124;&nbsp;'up'</span> | <span class="prop-default">'up'</span> | The direction the actions open relative to the floating action button. |
 | <span class="prop-name">hidden</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the SpeedDial will be hidden. |
-| <span class="prop-name required">icon&nbsp;*</span> | <span class="prop-type">element</span> |  | The icon to display in the SpeedDial Floating Action Button. The `SpeedDialIcon` component provides a default Icon with animation. |
+| <span class="prop-name">icon</span> | <span class="prop-type">node</span> |  | The icon to display in the SpeedDial Floating Action Button. The `SpeedDialIcon` component provides a default Icon with animation. |
 | <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, key: string) => void`<br>*event:* The event source of the callback.<br>*key:* The key pressed. |
 | <span class="prop-name required">open&nbsp;*</span> | <span class="prop-type">bool</span> |  | If `true`, the SpeedDial is open. |
 | <span class="prop-name">openIcon</span> | <span class="prop-type">node</span> |  | The icon to display in the SpeedDial Floating Action Button when the SpeedDial is open. |
 | <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Zoom</span> | The component used for the transition. |
-| <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` element. |
 
 The component cannot hold a ref.

docs/pages/api/toggle-button-group.md

@@ -24,11 +24,11 @@ You can learn more about the difference by [reading our guide](/guides/minimizin
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name required">children&nbsp;*</span> | <span class="prop-type">node</span> |  | The content of the button. |
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the button. |
 | <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">exclusive</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, only allow one of the child ToggleButton values to be selected. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: object) => void`<br>*event:* The event source of the callback.<br>*value:* of the selected buttons. When `exclusive` is true this is a single value; when false an array of selected values. If no value is selected and `exclusive` is true the value is null; when false an empty array. |
-| <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'large'</span> | <span class="prop-default">'medium'</span> | The size of the buttons. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback.<br>*value:* of the selected buttons. When `exclusive` is true this is a single value; when false an array of selected values. If no value is selected and `exclusive` is true the value is null; when false an empty array. |
+| <span class="prop-name">size</span> | <span class="prop-type">'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'medium'</span> | The size of the buttons. |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The currently selected value within the group or an array of selected values when `exclusive` is false. |
 
 The component cannot hold a ref.

package.json

@@ -2,7 +2,7 @@
   "version": "4.4.0",
   "private": true,
   "scripts": {
-    "proptypes": "ts-node --skip-project ./packages/material-ui/scripts/generateProptypes.ts",
+    "proptypes": "ts-node --skip-project ./scripts/generateProptypes.ts",
     "deduplicate": "node scripts/deduplicate.js",
     "argos": "argos upload test/regressions/screenshots/chrome --token $ARGOS_TOKEN",
     "docs:api": "rimraf ./docs/pages/api && cross-env BABEL_ENV=test babel-node ./docs/scripts/buildApi.js ./packages/material-ui/src ./docs/pages/api && cross-env BABEL_ENV=test babel-node ./docs/scripts/buildApi.js ./packages/material-ui-lab/src ./docs/pages/api",
@@ -127,6 +127,7 @@
     "ts-node": "^8.3.0",
     "tslint": "5.14.0",
     "typescript": "3.2.4",
+    "typescript-to-proptypes": "^1.3.0",
     "vrtest": "^0.2.0",
     "warning": "^4.0.3",
     "webpack": "^4.39.3",

packages/material-ui-lab/src/SpeedDial/SpeedDial.d.ts

@@ -7,18 +7,62 @@ import { TransitionHandlerProps } from '@material-ui/core/transitions';
 export interface SpeedDialProps
   extends StandardProps<
     React.HTMLAttributes<HTMLDivElement> & Partial<TransitionHandlerProps>,
-    SpeedDialClassKey
+    SpeedDialClassKey,
+    'children'
   > {
+  /**
+   * SpeedDialActions to display when the SpeedDial is `open`.
+   */
+  children?: React.ReactNode;
+  /**
+   * The aria-label of the `Button` element.
+   * Also used to provide the `id` for the `SpeedDial` element and its children.
+   */
   ariaLabel: string;
+  /**
+   * Props applied to the [`Button`](/api/button/) element.
+   */
   ButtonProps?: Partial<ButtonProps>;
+  /**
+   * The direction the actions open relative to the floating action button.
+   */
   direction?: 'up' | 'down' | 'left' | 'right';
+  /**
+   * If `true`, the SpeedDial will be hidden.
+   */
   hidden?: boolean;
-  icon: React.ReactNode;
-  onClose?: React.ReactEventHandler<{}>;
+  /**
+   * The icon to display in the SpeedDial Floating Action Button. The `SpeedDialIcon` component
+   * provides a default Icon with animation.
+   */
+  icon?: React.ReactNode;
+  /**
+   * Callback fired when the component requests to be closed.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {string} key The key pressed.
+   */
+  onClose?: (event: React.SyntheticEvent<{}>, key: string) => void;
+  /**
+   * If `true`, the SpeedDial is open.
+   */
   open: boolean;
+  /**
+   * The icon to display in the SpeedDial Floating Action Button when the SpeedDial is open.
+   */
   openIcon?: React.ReactNode;
+  /**
+   * The component used for the transition.
+   */
   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` element.
+   */
   TransitionProps?: TransitionProps;
 }
 
@@ -32,6 +76,4 @@ export type SpeedDialClassKey =
   | 'directionLeft'
   | 'directionRight';
 
-declare const SpeedDial: React.ComponentType<SpeedDialProps>;
-
-export default SpeedDial;
+export default function SpeedDial(props: SpeedDialProps): JSX.Element;

packages/material-ui-lab/src/SpeedDial/SpeedDial.js

@@ -279,6 +279,10 @@ const SpeedDial = React.forwardRef(function SpeedDial(props, ref) {
 });
 
 SpeedDial.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The aria-label of the `Button` element.
    * Also used to provide the `id` for the `SpeedDial` element and its children.
@@ -291,20 +295,20 @@ SpeedDial.propTypes = {
   /**
    * SpeedDialActions to display when the SpeedDial is `open`.
    */
-  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
    */
   className: PropTypes.string,
   /**
    * The direction the actions open relative to the floating action button.
    */
-  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
+  direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),
   /**
    * If `true`, the SpeedDial will be hidden.
    */
@@ -313,7 +317,7 @@ SpeedDial.propTypes = {
    * The icon to display in the SpeedDial Floating Action Button. The `SpeedDialIcon` component
    * provides a default Icon with animation.
    */
-  icon: PropTypes.element.isRequired,
+  icon: PropTypes.node,
   /**
    * @ignore
    */
@@ -347,7 +351,11 @@ SpeedDial.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` element.

packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts

@@ -4,18 +4,37 @@ import { ButtonProps } from '@material-ui/core/Button';
 import { TooltipProps } from '@material-ui/core/Tooltip';
 
 export interface SpeedDialActionProps
-  extends StandardProps<Partial<TooltipProps>, SpeedDialActionClassKey> {
+  extends StandardProps<Partial<TooltipProps>, SpeedDialActionClassKey, 'children'> {
+  /**
+   * Props applied to the [`Button`](/api/button/) component.
+   */
   ButtonProps?: Partial<ButtonProps>;
+  /**
+   * Adds a transition delay, to allow a series of SpeedDialActions to be animated.
+   */
   delay?: number;
-  icon: React.ReactNode;
+  /**
+   * The Icon to display in the SpeedDial Floating Action Button.
+   */
+  icon?: React.ReactNode;
+  /**
+   * Classes applied to the [`Tooltip`](/api/tooltip/) element.
+   */
   TooltipClasses?: TooltipProps['classes'];
+  /**
+   * Placement of the tooltip.
+   */
   tooltipPlacement?: TooltipProps['placement'];
+  /**
+   * Label to display in the tooltip.
+   */
   tooltipTitle?: React.ReactNode;
+  /**
+   * Make the tooltip always visible when the SpeedDial is open.
+   */
   tooltipOpen?: boolean;
 }
 
 export type SpeedDialActionClassKey = 'root' | 'button' | 'buttonClosed';
 
-declare const SpeedDialAction: React.ComponentType<SpeedDialActionProps>;
-
-export default SpeedDialAction;
+export default function SpeedDialAction(props: SpeedDialActionProps): JSX.Element;

packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js

@@ -126,6 +126,10 @@ const SpeedDialAction = React.forwardRef(function SpeedDialAction(props, ref) {
 });
 
 SpeedDialAction.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * Props applied to the [`Button`](/api/button/) component.
    */
@@ -134,7 +138,7 @@ SpeedDialAction.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
    */
@@ -146,7 +150,7 @@ SpeedDialAction.propTypes = {
   /**
    * The Icon to display in the SpeedDial Floating Action Button.
    */
-  icon: PropTypes.node.isRequired,
+  icon: PropTypes.node,
   /**
    * @ignore
    */
@@ -191,7 +195,7 @@ SpeedDialAction.propTypes = {
   /**
    * Label to display in the tooltip.
    */
-  tooltipTitle: PropTypes.node.isRequired,
+  tooltipTitle: PropTypes.node,
 };
 
 export default withStyles(styles, { name: 'MuiSpeedDialAction' })(SpeedDialAction);

packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.d.ts

@@ -2,9 +2,20 @@ import * as React from 'react';
 import { StandardProps } from '@material-ui/core';
 
 export interface SpeedDialIconProps
-  extends StandardProps<React.HTMLAttributes<HTMLSpanElement>, SpeedDialIconClassKey> {
+  extends StandardProps<React.HTMLAttributes<HTMLSpanElement>, SpeedDialIconClassKey, 'children'> {
+  /**
+   * The icon to display in the SpeedDial Floating Action Button.
+   */
   icon?: React.ReactNode;
+  /**
+   * The icon to display in the SpeedDial Floating Action Button when the SpeedDial is open.
+   */
   openIcon?: React.ReactNode;
+  /**
+   * @ignore
+   * If `true`, the SpeedDial is open.
+   */
+  open?: boolean;
 }
 
 export type SpeedDialIconClassKey =
@@ -15,6 +26,4 @@ export type SpeedDialIconClassKey =
   | 'openIcon'
   | 'openIconOpen';
 
-declare const SpeedDialIcon: React.ComponentType<SpeedDialIconProps>;
-
-export default SpeedDialIcon;
+export default function SpeedDialIcon(props: SpeedDialIconProps): JSX.Element;

packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js

@@ -46,6 +46,7 @@ const SpeedDialIcon = React.forwardRef(function SpeedDialIcon(props, ref) {
     [classes.iconOpen]: open,
     [classes.iconWithOpenIconOpen]: openIconProp && open,
   });
+
   const openIconClassName = clsx(classes.openIcon, { [classes.openIconOpen]: open });
 
   function formatIcon(icon, className) {
@@ -65,11 +66,15 @@ const SpeedDialIcon = React.forwardRef(function SpeedDialIcon(props, ref) {
 });
 
 SpeedDialIcon.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,
   /**
    * The icon to display in the SpeedDial Floating Action Button.
    */

packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -6,12 +6,33 @@ export interface ToggleButtonGroupProps
   extends StandardProps<
     React.HTMLAttributes<HTMLDivElement>,
     ToggleButtonGroupClassKey,
-    'onChange'
+    'onChange' | 'children'
   > {
-  selected?: boolean;
+  /**
+   * The content of the button.
+   */
+  children?: React.ReactNode;
+  /**
+   * If `true`, only allow one of the child ToggleButton values to be selected.
+   */
   exclusive?: boolean;
+  /**
+   * Callback fired when the value changes.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {any} value of the selected buttons. When `exclusive` is true
+   * this is a single value; when false an array of selected values. If no value
+   * is selected and `exclusive` is true the value is null; when false an empty array.
+   */
   onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
+  /**
+   * The size of the buttons.
+   */
   size?: 'small' | 'medium' | 'large';
+  /**
+   * The currently selected value within the group or an array of selected
+   * values when `exclusive` is false.
+   */
   value?: any;
 }
 
@@ -21,6 +42,4 @@ export type ToggleButtonGroupClassKey =
   | 'groupedSizeSmall'
   | 'groupedSizeLarge';
 
-declare const ToggleButtonGroup: React.ComponentType<ToggleButtonGroupProps>;
-
-export default ToggleButtonGroup;
+export default function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element;