;
-
-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..adc600d0895856 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.
diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts
index 7926bafad120c8..92c494eaabb280 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,
@@ -92,7 +90,19 @@ async function generateProptypes(
return GenerateResult.Success;
}
-async function run() {
+interface HandlerArgv {
+ 'disable-cache': boolean;
+ pattern: string;
+ verbose: boolean;
+}
+async function run(argv: HandlerArgv) {
+ const { 'disable-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
@@ -116,8 +126,10 @@ async function run() {
const fileName = path.basename(filePath, '.d.ts');
return fileName === folderName;
+ })
+ .filter((filePath) => {
+ return filePattern.test(filePath);
});
-
const program = ttp.createProgram(files, tsconfig);
const promises = files.map>(async (tsFile) => {
@@ -149,7 +161,31 @@ async function run() {
console.log('Total: %d', results.length);
}
-run().catch((error) => {
- console.error(error);
- process.exit(1);
-});
+yargs
+ .command({
+ command: '$0',
+ describe: 'Generates Component.propTypes from TypeScript declarations',
+ builder: (command) => {
+ return command
+ .option('disable-cache', {
+ default: false,
+ describe: 'Considers all files on every run',
+ type: 'boolean',
+ })
+ .option('verbose', {
+ 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,
+ })
+ .help()
+ .strict(true)
+ .version(false)
+ .parse();