From b9047c972d5fc72b69b8e019f8456118e4097797 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 25 Aug 2020 10:16:04 +0200 Subject: [PATCH 01/13] Add sanity check for preserving jsdoc docs --- .../test/default-value/input.d.ts | 9 +++++++++ .../typescript-to-proptypes/test/default-value/output.js | 7 +++++++ 2 files changed, 16 insertions(+) create mode 100644 packages/typescript-to-proptypes/test/default-value/input.d.ts create mode 100644 packages/typescript-to-proptypes/test/default-value/output.js diff --git a/packages/typescript-to-proptypes/test/default-value/input.d.ts b/packages/typescript-to-proptypes/test/default-value/input.d.ts new file mode 100644 index 00000000000000..013e60b90d7ae4 --- /dev/null +++ b/packages/typescript-to-proptypes/test/default-value/input.d.ts @@ -0,0 +1,9 @@ +interface Props { + /** + * The type of the button relevant to its `
`. + * @default 'button' + */ + type?: 'button' | 'reset' | 'submit'; +} + +export function Foo(props: Props): JSX.Element; diff --git a/packages/typescript-to-proptypes/test/default-value/output.js b/packages/typescript-to-proptypes/test/default-value/output.js new file mode 100644 index 00000000000000..de9908e5748292 --- /dev/null +++ b/packages/typescript-to-proptypes/test/default-value/output.js @@ -0,0 +1,7 @@ +Foo.propTypes = { + /** + * The type of the button relevant to its ``. + * @default 'button' + */ + type: PropTypes.oneOf(['button', 'reset', 'submit']), +}; From 6f10807dccbb3c259e32831f8afa30618f699d36 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 25 Aug 2020 11:18:40 +0200 Subject: [PATCH 02/13] MVP: default props in IntelliSense Started from ButtonBase --- docs/src/modules/utils/defaultPropsHandler.js | 18 +++++++++++++----- docs/src/modules/utils/generateMarkdown.ts | 2 +- .../src/ToggleButton/ToggleButton.js | 1 + packages/material-ui/src/Button/Button.js | 1 + .../material-ui/src/ButtonBase/ButtonBase.d.ts | 8 ++++++++ .../material-ui/src/ButtonBase/ButtonBase.js | 7 ++++++- .../material-ui/src/IconButton/IconButton.js | 1 + packages/material-ui/src/Tab/Tab.js | 1 + 8 files changed, 32 insertions(+), 7 deletions(-) diff --git a/docs/src/modules/utils/defaultPropsHandler.js b/docs/src/modules/utils/defaultPropsHandler.js index 9f456176855b18..1e87e150ea6cac 100644 --- a/docs/src/modules/utils/defaultPropsHandler.js +++ b/docs/src/modules/utils/defaultPropsHandler.js @@ -76,12 +76,20 @@ function getDefaultValuesFromProps(properties, documentation) { ); const defaultValue = getDefaultValue(propertyPath); - if (jsdocDefaultValue != null && defaultValue != null) { - throw new Error( - `Can't have JavaScript default value and jsdoc @defaultValue in prop '${propName}'. Remove the @defaultValue if you need the JavaScript default value at runtime.`, - ); + if (defaultValue != null && jsdocDefaultValue == null) { + // discriminator for polymorphism for which the default value is hard to extract + if (propName !== 'component') { + // TODO: throw/warn/ignore? + throw new Error(`Missing JSDOC default value for ${propName}`); + } + } else if (jsdocDefaultValue != null && defaultValue != null) { + if (jsdocDefaultValue.value !== defaultValue.value) { + throw new Error( + `Expected JSDOC default value of "${jsdocDefaultValue.value}" to equal runtime default value of "${defaultValue.value}"`, + ); + } } - const usedDefaultValue = defaultValue || jsdocDefaultValue; + const usedDefaultValue = defaultValue ?? jsdocDefaultValue; if (usedDefaultValue) { propDescriptor.defaultValue = usedDefaultValue; } diff --git a/docs/src/modules/utils/generateMarkdown.ts b/docs/src/modules/utils/generateMarkdown.ts index 051cc8499a41ed..a27304de047cc6 100644 --- a/docs/src/modules/utils/generateMarkdown.ts +++ b/docs/src/modules/utils/generateMarkdown.ts @@ -146,7 +146,7 @@ function generatePropDescription(prop: PropDescriptor) { .replace(/(\r?\n){2}/g, '
') .replace(/\r?\n/g, ' '); - if (parsed.tags.some((tag) => tag.title === 'ignore')) { + if (parsed.description.trim() === '' || parsed.tags.some((tag) => tag.title === 'ignore')) { return null; } diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js index 638904357c882d..2fb5c5bc295987 100644 --- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js +++ b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js @@ -147,6 +147,7 @@ ToggleButton.propTypes = { * * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure * to highlight the element by applying separate styles with the `focusVisibleClassName`. + * @default false */ disableRipple: PropTypes.bool, /** diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index 4fd1f1be8d45d5..a3ce641957637e 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.js @@ -389,6 +389,7 @@ Button.propTypes = { * * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure * to highlight the element by applying separate styles with the `focusVisibleClassName`. + * @default false */ disableRipple: PropTypes.bool, /** diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.d.ts b/packages/material-ui/src/ButtonBase/ButtonBase.d.ts index 3ecffa9fa76102..0b268a86b73009 100644 --- a/packages/material-ui/src/ButtonBase/ButtonBase.d.ts +++ b/packages/material-ui/src/ButtonBase/ButtonBase.d.ts @@ -19,6 +19,7 @@ export interface ButtonBaseTypeMap

Date: Tue, 25 Aug 2020 13:10:22 +0200 Subject: [PATCH 03/13] Throw on default mismatch if runtime default value doesn't exist --- docs/src/modules/utils/defaultPropsHandler.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/modules/utils/defaultPropsHandler.js b/docs/src/modules/utils/defaultPropsHandler.js index 1e87e150ea6cac..6186b3d285d76d 100644 --- a/docs/src/modules/utils/defaultPropsHandler.js +++ b/docs/src/modules/utils/defaultPropsHandler.js @@ -80,12 +80,12 @@ function getDefaultValuesFromProps(properties, documentation) { // discriminator for polymorphism for which the default value is hard to extract if (propName !== 'component') { // TODO: throw/warn/ignore? - throw new Error(`Missing JSDOC default value for ${propName}`); + console.warn(`Missing JSDOC default value for ${propName}`); } - } else if (jsdocDefaultValue != null && defaultValue != null) { - if (jsdocDefaultValue.value !== defaultValue.value) { + } else if (jsdocDefaultValue != null) { + if (jsdocDefaultValue.value !== defaultValue?.value) { throw new Error( - `Expected JSDOC default value of "${jsdocDefaultValue.value}" to equal runtime default value of "${defaultValue.value}"`, + `Expected JSDOC default value of "${jsdocDefaultValue.value}" to equal runtime default value of "${defaultValue?.value}"`, ); } } From a2d82e6e7db193bc4e508eda8f437afc08b6ba04 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 25 Aug 2020 14:10:32 +0200 Subject: [PATCH 04/13] Better error reporting for default value mismatch --- docs/scripts/types.d.ts | 2 ++ docs/src/modules/utils/defaultPropsHandler.js | 23 ++++--------- docs/src/modules/utils/generateMarkdown.ts | 33 ++++++++++++++----- 3 files changed, 32 insertions(+), 26 deletions(-) diff --git a/docs/scripts/types.d.ts b/docs/scripts/types.d.ts index 7b10243d03095a..02a90291bee4a6 100644 --- a/docs/scripts/types.d.ts +++ b/docs/scripts/types.d.ts @@ -104,6 +104,8 @@ declare module 'react-docgen' { export interface PropDescriptor { defaultValue?: { computed: boolean; value: string }; + // augmented by docs/src/modules/utils/defaultPropsHandler.js + jsdocDefaultValue?: { computed: boolean; value: string }; description?: string; required?: boolean; /** diff --git a/docs/src/modules/utils/defaultPropsHandler.js b/docs/src/modules/utils/defaultPropsHandler.js index 6186b3d285d76d..63c3ab649034cc 100644 --- a/docs/src/modules/utils/defaultPropsHandler.js +++ b/docs/src/modules/utils/defaultPropsHandler.js @@ -74,24 +74,13 @@ function getDefaultValuesFromProps(properties, documentation) { sloppy: true, }), ); - const defaultValue = getDefaultValue(propertyPath); - - if (defaultValue != null && jsdocDefaultValue == null) { - // discriminator for polymorphism for which the default value is hard to extract - if (propName !== 'component') { - // TODO: throw/warn/ignore? - console.warn(`Missing JSDOC default value for ${propName}`); - } - } else if (jsdocDefaultValue != null) { - if (jsdocDefaultValue.value !== defaultValue?.value) { - throw new Error( - `Expected JSDOC default value of "${jsdocDefaultValue.value}" to equal runtime default value of "${defaultValue?.value}"`, - ); - } + if (jsdocDefaultValue) { + propDescriptor.jsdocDefaultValue = jsdocDefaultValue; } - const usedDefaultValue = defaultValue ?? jsdocDefaultValue; - if (usedDefaultValue) { - propDescriptor.defaultValue = usedDefaultValue; + + const defaultValue = getDefaultValue(propertyPath); + if (defaultValue) { + propDescriptor.defaultValue = defaultValue; } }); } diff --git a/docs/src/modules/utils/generateMarkdown.ts b/docs/src/modules/utils/generateMarkdown.ts index a27304de047cc6..3efe8dbd521960 100644 --- a/docs/src/modules/utils/generateMarkdown.ts +++ b/docs/src/modules/utils/generateMarkdown.ts @@ -323,20 +323,35 @@ function generateProps(reactAPI: ReactApi) { return; } - const renderedDefaultValue = prop.defaultValue?.value.replace(/\r*\n/g, ''); - const renderDefaultValue = - renderedDefaultValue && - // Ignore "large" default values that would break the table layout. - renderedDefaultValue.length <= 150; - let defaultValueColumn = ''; - if (renderDefaultValue) { + + const { defaultValue, jsdocDefaultValue } = prop; + if (defaultValue !== undefined && jsdocDefaultValue === undefined) { + // discriminator for polymorphism for which the default value is hard to extract + if (propName !== 'component') { + throw new Error( + `Missing JSDOC @default for prop '${propName}' with default value "${defaultValue.value}"`, + ); + } + } else if (jsdocDefaultValue !== undefined) { + if (jsdocDefaultValue.value !== defaultValue?.value) { + throw new Error( + `Expected JSDOC @default value for prop '${propName}' of "${jsdocDefaultValue.value}" to equal runtime default value of "${defaultValue?.value}"`, + ); + } + } + + if (defaultValue) { defaultValueColumn = `${escapeCell( - // narrowed `renderedDefaultValue` to non-nullable by `renderDefaultValue` - renderedDefaultValue!, + defaultValue.value.replace(/\r*\n/g, ''), )}`; } + // Give up + if (defaultValueColumn.length > 180) { + defaultValueColumn = ''; + } + const chainedPropType = getChained(prop.type); let propNameColumn = propName; From cac7736e3544c19e145eec1d19dd209065b60107 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 25 Aug 2020 14:18:42 +0200 Subject: [PATCH 05/13] Skip function default values --- docs/src/modules/utils/generateMarkdown.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/docs/src/modules/utils/generateMarkdown.ts b/docs/src/modules/utils/generateMarkdown.ts index 3efe8dbd521960..449efd6b6cc3a8 100644 --- a/docs/src/modules/utils/generateMarkdown.ts +++ b/docs/src/modules/utils/generateMarkdown.ts @@ -326,11 +326,21 @@ function generateProps(reactAPI: ReactApi) { let defaultValueColumn = ''; const { defaultValue, jsdocDefaultValue } = prop; - if (defaultValue !== undefined && jsdocDefaultValue === undefined) { + if (prop.type.name === 'func') { + if (jsdocDefaultValue !== undefined) { + throw new Error( + `Prop '${propName}' is a function for which @default is not supported until we can generate human readable documentation for it and verify it.`, + ); + } + } else if (defaultValue !== undefined && jsdocDefaultValue === undefined) { // discriminator for polymorphism for which the default value is hard to extract if (propName !== 'component') { - throw new Error( - `Missing JSDOC @default for prop '${propName}' with default value "${defaultValue.value}"`, + // TODO: throw/warn/ignore? + // throw new Error( + // `Missing JSDOC @default for prop '${propName}' with default value "${defaultValue.value}"`, + // ); + console.warn( + `${reactAPI.filename}: Missing JSDOC @default for prop '${propName}' with default value "${defaultValue.value}"`, ); } } else if (jsdocDefaultValue !== undefined) { From f09ce9baf5640502371688e2d259b4d8a4ab751a Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 1 Sep 2020 10:48:27 +0200 Subject: [PATCH 06/13] error reporting which is in line with the main branch --- docs/src/modules/utils/generateMarkdown.ts | 47 +++++++++++----------- 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/docs/src/modules/utils/generateMarkdown.ts b/docs/src/modules/utils/generateMarkdown.ts index 449efd6b6cc3a8..9dea287cd8aa51 100644 --- a/docs/src/modules/utils/generateMarkdown.ts +++ b/docs/src/modules/utils/generateMarkdown.ts @@ -323,45 +323,46 @@ function generateProps(reactAPI: ReactApi) { return; } - let defaultValueColumn = ''; - const { defaultValue, jsdocDefaultValue } = prop; - if (prop.type.name === 'func') { - if (jsdocDefaultValue !== undefined) { - throw new Error( - `Prop '${propName}' is a function for which @default is not supported until we can generate human readable documentation for it and verify it.`, - ); - } - } else if (defaultValue !== undefined && jsdocDefaultValue === undefined) { - // discriminator for polymorphism for which the default value is hard to extract + + if (jsdocDefaultValue !== undefined && defaultValue === undefined) { + throw new Error( + `Declared a @default annotation in JSDOC for prop '${propName}' but could not find a default value in the implementation.`, + ); + } else if (jsdocDefaultValue === undefined && defaultValue !== undefined) { + // Discriminator for polymorphism which is not documented at the component level. + // The documentation of `component` does not know in which component it is used. if (propName !== 'component') { // TODO: throw/warn/ignore? // throw new Error( - // `Missing JSDOC @default for prop '${propName}' with default value "${defaultValue.value}"`, + // `JSDOC @default annotation not found for '${propName}'.`, // ); - console.warn( - `${reactAPI.filename}: Missing JSDOC @default for prop '${propName}' with default value "${defaultValue.value}"`, - ); + console.warn(`JSDOC @default annotation not found for '${propName}'.`); } } else if (jsdocDefaultValue !== undefined) { - if (jsdocDefaultValue.value !== defaultValue?.value) { + // `defaultValue` can't be undefined or we would've thrown earlier. + if (jsdocDefaultValue.value !== defaultValue!.value) { throw new Error( - `Expected JSDOC @default value for prop '${propName}' of "${jsdocDefaultValue.value}" to equal runtime default value of "${defaultValue?.value}"`, + `Expected JSDOC @default annotation for prop '${propName}' of "${jsdocDefaultValue.value}" to equal runtime default value of "${defaultValue?.value}"`, ); } } - if (defaultValue) { + const renderedDefaultValue = defaultValue?.value.replace(/\r?\n/g, ''); + const renderDefaultValue = + renderedDefaultValue && + // Ignore "large" default values that would break the table layout. + renderedDefaultValue.length <= 150; + + let defaultValueColumn = ''; + // give up on "large" default values e.g. big functions or objects + if (renderDefaultValue) { defaultValueColumn = `${escapeCell( - defaultValue.value.replace(/\r*\n/g, ''), + // narrowed `renderedDefaultValue` to non-nullable by `renderDefaultValue` + renderedDefaultValue!, )}`; } - // Give up - if (defaultValueColumn.length > 180) { - defaultValueColumn = ''; - } - const chainedPropType = getChained(prop.type); let propNameColumn = propName; From 340e31b8c0e2ded1a79a0815044b2dd76f5d0a32 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 1 Sep 2020 11:43:40 +0200 Subject: [PATCH 07/13] Finish lab --- docs/src/modules/utils/generateMarkdown.ts | 46 +++++++++---------- packages/material-ui-lab/src/Alert/Alert.d.ts | 4 ++ packages/material-ui-lab/src/Alert/Alert.js | 4 ++ .../src/Autocomplete/Autocomplete.d.ts | 18 ++++++++ .../src/Autocomplete/Autocomplete.js | 38 +++++++++++++++ .../src/AvatarGroup/AvatarGroup.d.ts | 2 + .../src/AvatarGroup/AvatarGroup.js | 2 + .../src/LoadingButton/LoadingButton.d.ts | 3 ++ .../src/LoadingButton/LoadingButton.js | 4 ++ .../src/Pagination/Pagination.d.ts | 5 ++ .../src/Pagination/Pagination.js | 32 +++++++++---- .../src/PaginationItem/PaginationItem.d.ts | 7 +++ .../src/PaginationItem/PaginationItem.js | 7 +++ .../material-ui-lab/src/Rating/Rating.d.ts | 16 +++++++ packages/material-ui-lab/src/Rating/Rating.js | 16 +++++++ .../src/Skeleton/Skeleton.d.ts | 2 + .../material-ui-lab/src/Skeleton/Skeleton.js | 2 + .../src/SpeedDial/SpeedDial.d.ts | 8 ++++ .../src/SpeedDial/SpeedDial.js | 8 ++++ .../src/SpeedDialAction/SpeedDialAction.d.ts | 4 ++ .../src/SpeedDialAction/SpeedDialAction.js | 4 ++ .../src/Timeline/Timeline.d.ts | 1 + .../material-ui-lab/src/Timeline/Timeline.js | 1 + .../src/TimelineDot/TimelineDot.d.ts | 2 + .../src/TimelineDot/TimelineDot.js | 2 + .../src/ToggleButton/ToggleButton.d.ts | 3 ++ .../src/ToggleButton/ToggleButton.js | 3 ++ .../ToggleButtonGroup/ToggleButtonGroup.d.ts | 3 ++ .../ToggleButtonGroup/ToggleButtonGroup.js | 3 ++ .../src/TreeItem/TreeItem.d.ts | 1 + .../material-ui-lab/src/TreeItem/TreeItem.js | 1 + .../src/TreeView/TreeView.d.ts | 7 +++ .../material-ui-lab/src/TreeView/TreeView.js | 5 ++ .../src/useAutocomplete/useAutocomplete.d.ts | 20 ++++++++ .../src/TablePagination/TablePagination.d.ts | 6 +++ .../src/TablePagination/TablePagination.js | 6 +++ 36 files changed, 264 insertions(+), 32 deletions(-) diff --git a/docs/src/modules/utils/generateMarkdown.ts b/docs/src/modules/utils/generateMarkdown.ts index 9dea287cd8aa51..ddc7293f62734a 100644 --- a/docs/src/modules/utils/generateMarkdown.ts +++ b/docs/src/modules/utils/generateMarkdown.ts @@ -121,7 +121,7 @@ function resolveType(type: NonNullable): string { throw new TypeError(`resolveType for '${type.type}' not implemented`); } -function generatePropDescription(prop: PropDescriptor) { +function generatePropDescription(prop: PropDescriptor, propName: string) { const { description } = prop; const type = prop.type; let deprecated = ''; @@ -162,28 +162,24 @@ function generatePropDescription(prop: PropDescriptor) { // Split up the parsed tags into 'arguments' and 'returns' parsed objects. If there's no // 'returns' parsed object (i.e., one with title being 'returns'), make one of type 'void'. - const parsedLength = parsed.tags.length; - let parsedArgs: doctrine.Tag[] = []; - let parsedReturns: doctrine.Tag; - - if (parsed.tags[parsedLength - 1].title === 'returns') { - parsedArgs = parsed.tags.slice(0, parsedLength - 1); - parsedReturns = parsed.tags[parsedLength - 1]; - } else { - parsedArgs = parsed.tags; - // @ts-expect-error - parsedReturns = { type: { name: 'void' } }; - } + const parsedArgs: doctrine.Tag[] = parsed.tags.filter((tag) => tag.title === 'param'); + const parsedReturns: doctrine.Tag = + parsed.tags.find((tag) => tag.title === 'returns') ?? + ({ + type: { name: 'void' }, + } as doctrine.Tag); signature += '

**Signature:**
`function('; signature += parsedArgs - .map((tag) => { + .map((tag, index) => { if (tag.type != null && tag.type.type === 'OptionalType') { return `${tag.name}?: ${(tag.type.expression as any).name}`; } if (tag.type === undefined) { - throw new TypeError('Tag has no type'); + throw new TypeError( + `In function signature for prop '${propName}' Argument #${index} has no type.`, + ); } return `${tag.name}: ${resolveType(tag.type!)}`; }) @@ -317,7 +313,7 @@ function generateProps(reactAPI: ReactApi) { prop.description += ' See [CSS API](#css) below for more details.'; } - const description = generatePropDescription(prop); + const description = generatePropDescription(prop, propName); if (description === null) { return; @@ -325,11 +321,21 @@ function generateProps(reactAPI: ReactApi) { const { defaultValue, jsdocDefaultValue } = prop; + const renderedDefaultValue = defaultValue?.value.replace(/\r?\n/g, ''); + const renderDefaultValue = + renderedDefaultValue && + // Ignore "large" default values that would break the table layout. + renderedDefaultValue.length <= 150; + if (jsdocDefaultValue !== undefined && defaultValue === undefined) { throw new Error( `Declared a @default annotation in JSDOC for prop '${propName}' but could not find a default value in the implementation.`, ); - } else if (jsdocDefaultValue === undefined && defaultValue !== undefined) { + } else if ( + jsdocDefaultValue === undefined && + defaultValue !== undefined && + renderDefaultValue + ) { // Discriminator for polymorphism which is not documented at the component level. // The documentation of `component` does not know in which component it is used. if (propName !== 'component') { @@ -348,12 +354,6 @@ function generateProps(reactAPI: ReactApi) { } } - const renderedDefaultValue = defaultValue?.value.replace(/\r?\n/g, ''); - const renderDefaultValue = - renderedDefaultValue && - // Ignore "large" default values that would break the table layout. - renderedDefaultValue.length <= 150; - let defaultValueColumn = ''; // give up on "large" default values e.g. big functions or objects if (renderDefaultValue) { diff --git a/packages/material-ui-lab/src/Alert/Alert.d.ts b/packages/material-ui-lab/src/Alert/Alert.d.ts index 95df4421526883..5f6a7a22fa1bb5 100644 --- a/packages/material-ui-lab/src/Alert/Alert.d.ts +++ b/packages/material-ui-lab/src/Alert/Alert.d.ts @@ -60,6 +60,7 @@ export interface AlertProps extends StandardProps { * Override the default label for the *close popup* icon button. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default 'Close' */ closeText?: string; /** @@ -68,6 +69,7 @@ export interface AlertProps extends StandardProps { color?: Color; /** * The severity of the alert. This defines the color and icon used. + * @default 'success' */ severity?: Color; /** @@ -77,6 +79,7 @@ export interface AlertProps extends StandardProps { icon?: React.ReactNode | false; /** * The ARIA role attribute of the element. + * @default 'alert' */ role?: string; /** @@ -95,6 +98,7 @@ export interface AlertProps extends StandardProps { onClose?: (event: React.SyntheticEvent) => void; /** * The variant to use. + * @default 'standard' */ variant?: OverridableStringUnion; } diff --git a/packages/material-ui-lab/src/Alert/Alert.js b/packages/material-ui-lab/src/Alert/Alert.js index 412769f819272b..6153215d01be4a 100644 --- a/packages/material-ui-lab/src/Alert/Alert.js +++ b/packages/material-ui-lab/src/Alert/Alert.js @@ -242,6 +242,7 @@ Alert.propTypes = { * Override the default label for the *close popup* icon button. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default 'Close' */ closeText: PropTypes.string, /** @@ -274,14 +275,17 @@ Alert.propTypes = { onClose: PropTypes.func, /** * The ARIA role attribute of the element. + * @default 'alert' */ role: PropTypes.string, /** * The severity of the alert. This defines the color and icon used. + * @default 'success' */ severity: PropTypes.oneOf(['error', 'info', 'success', 'warning']), /** * The variant to use. + * @default 'standard' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['filled', 'outlined', 'standard']), diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts index 8d00348aa1249b..d53c40695499cd 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts @@ -112,34 +112,41 @@ export interface AutocompleteProps< }; /** * The icon to display in place of the default close icon. + * @default */ closeIcon?: React.ReactNode; /** * Override the default text for the *clear* icon button. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default 'Clear' */ clearText?: string; /** * Override the default text for the *close popup* icon button. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default 'Close' */ closeText?: string; /** * If `true`, the input will be disabled. + * @default false */ disabled?: boolean; /** * The `Popper` content will be inside the DOM hierarchy of the parent component. + * @default false */ disablePortal?: boolean; /** * Force the visibility display of the popup icon. + * @default 'auto' */ forcePopupIcon?: true | false | 'auto'; /** * If `true`, the input will take up the full width of its container. + * @default false */ fullWidth?: boolean; /** @@ -147,10 +154,12 @@ export interface AutocompleteProps< * * @param {number} more The number of truncated tags. * @returns {ReactNode} + * @default (more) => `+${more}` */ getLimitTagsText?: (more: number) => React.ReactNode; /** * The component used to render the listbox. + * @default 'ul' */ ListboxComponent?: React.ComponentType>; /** @@ -159,41 +168,49 @@ export interface AutocompleteProps< ListboxProps?: object; /** * If `true`, the component is in a loading state. + * @default false */ loading?: boolean; /** * Text to display when in a loading state. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default 'Loading…' */ loadingText?: React.ReactNode; /** * The maximum number of tags that will be visible when not focused. * Set `-1` to disable the limit. + * @default -1 */ limitTags?: number; /** * Text to display when there are no options. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default 'No options' */ noOptionsText?: React.ReactNode; /** * Override the default text for the *open popup* icon button. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default 'Open' */ openText?: string; /** * The component used to render the body of the popup. + * @default Paper */ PaperComponent?: React.ComponentType>; /** * The component used to position the popup. + * @default Popper */ PopperComponent?: React.ComponentType; /** * The icon to display in place of the default popup icon. + * @default */ popupIcon?: React.ReactNode; /** @@ -228,6 +245,7 @@ export interface AutocompleteProps< renderTags?: (value: T[], getTagProps: AutocompleteGetTagProps) => React.ReactNode; /** * The size of the autocomplete. + * @default 'medium' */ size?: 'small' | 'medium'; } diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index 7b87389f3218ea..33ea12f99bda17 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -516,16 +516,19 @@ Autocomplete.propTypes = { * If `true`, the portion of the selected suggestion that has not been typed by the user, * known as the completion string, appears inline after the input cursor in the textbox. * The inline completion string is visually highlighted and has a selected state. + * @default false */ autoComplete: PropTypes.bool, /** * If `true`, the first option is automatically highlighted. + * @default false */ autoHighlight: PropTypes.bool, /** * If `true`, the selected option becomes the value of the input * when the Autocomplete loses focus unless the user chooses * a different option or changes the character string in the input. + * @default false */ autoSelect: PropTypes.bool, /** @@ -535,6 +538,7 @@ Autocomplete.propTypes = { * - `true` the input is always blurred. * - `touch` the input is blurred after a touch event. * - `mouse` the input is blurred after a mouse event. + * @default false */ blurOnSelect: PropTypes.oneOfType([PropTypes.oneOf(['mouse', 'touch']), PropTypes.bool]), /** @@ -554,60 +558,73 @@ Autocomplete.propTypes = { * * Set to `true` if you want to help the user enter a new value. * Set to `false` if you want to help the user resume his search. + * @default !props.freeSolo */ clearOnBlur: PropTypes.bool, /** * If `true`, clear all values when the user presses escape and the popup is closed. + * @default false */ clearOnEscape: PropTypes.bool, /** * Override the default text for the *clear* icon button. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default 'Clear' */ clearText: PropTypes.string, /** * The icon to display in place of the default close icon. + * @default */ closeIcon: PropTypes.node, /** * Override the default text for the *close popup* icon button. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default 'Close' */ closeText: PropTypes.string, /** * If `true`, the popup will ignore the blur event if the input is filled. * You can inspect the popup markup with your browser tools. * Consider this option when you need to customize the component. + * @default false */ debug: PropTypes.bool, /** * The default input value. Use when the component is not controlled. + * @default props.multiple ? [] : null */ defaultValue: PropTypes.any, /** * If `true`, the input can't be cleared. + * @default false */ disableClearable: PropTypes.bool, /** * If `true`, the popup won't close when a value is selected. + * @default false */ disableCloseOnSelect: PropTypes.bool, /** * If `true`, the input will be disabled. + * @default false */ disabled: PropTypes.bool, /** * If `true`, will allow focus on disabled items. + * @default false */ disabledItemsFocusable: PropTypes.bool, /** * If `true`, the list box in the popup will not wrap focus. + * @default false */ disableListWrap: PropTypes.bool, /** * The `Popper` content will be inside the DOM hierarchy of the parent component. + * @default false */ disablePortal: PropTypes.bool, /** @@ -620,18 +637,22 @@ Autocomplete.propTypes = { filterOptions: PropTypes.func, /** * If `true`, hide the selected options from the list box. + * @default false */ filterSelectedOptions: PropTypes.bool, /** * Force the visibility display of the popup icon. + * @default 'auto' */ forcePopupIcon: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.bool]), /** * If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. + * @default false */ freeSolo: PropTypes.bool, /** * If `true`, the input will take up the full width of its container. + * @default false */ fullWidth: PropTypes.bool, /** @@ -639,6 +660,7 @@ Autocomplete.propTypes = { * * @param {number} more The number of truncated tags. * @returns {ReactNode} + * @default (more) => `+${more}` */ getLimitTagsText: PropTypes.func, /** @@ -654,6 +676,7 @@ Autocomplete.propTypes = { * * @param {T} option * @returns {string} + * @default (option) => option.label ?? option */ getOptionLabel: PropTypes.func, /** @@ -676,6 +699,7 @@ Autocomplete.propTypes = { /** * If `true`, the component handles the "Home" and "End" keys when the popup is open. * It should move focus to the first option and last option, respectively. + * @default !props.freeSolo */ handleHomeEndKeys: PropTypes.bool, /** @@ -685,6 +709,7 @@ Autocomplete.propTypes = { id: PropTypes.string, /** * If `true`, the highlight can move to the input. + * @default false */ includeInputInList: PropTypes.bool, /** @@ -694,10 +719,12 @@ Autocomplete.propTypes = { /** * The maximum number of tags that will be visible when not focused. * Set `-1` to disable the limit. + * @default -1 */ limitTags: PropTypes.number, /** * The component used to render the listbox. + * @default 'ul' */ ListboxComponent: PropTypes.elementType, /** @@ -706,22 +733,26 @@ Autocomplete.propTypes = { ListboxProps: PropTypes.object, /** * If `true`, the component is in a loading state. + * @default false */ loading: PropTypes.bool, /** * Text to display when in a loading state. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default 'Loading…' */ loadingText: PropTypes.node, /** * If `true`, `value` must be an array and the menu will support multiple selections. + * @default false */ multiple: PropTypes.bool, /** * Text to display when there are no options. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default 'No options' */ noOptionsText: PropTypes.node, /** @@ -769,12 +800,14 @@ Autocomplete.propTypes = { open: PropTypes.bool, /** * If `true`, the popup will open on input focus. + * @default false */ openOnFocus: PropTypes.bool, /** * Override the default text for the *open popup* icon button. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default 'Open' */ openText: PropTypes.string, /** @@ -783,14 +816,17 @@ Autocomplete.propTypes = { options: PropTypes.array.isRequired, /** * The component used to render the body of the popup. + * @default Paper */ PaperComponent: PropTypes.elementType, /** * The component used to position the popup. + * @default Popper */ PopperComponent: PropTypes.elementType, /** * The icon to display in place of the default popup icon. + * @default */ popupIcon: PropTypes.node, /** @@ -826,10 +862,12 @@ Autocomplete.propTypes = { /** * If `true`, the input's text will be selected on focus. * It helps the user clear the selected value. + * @default !props.freeSolo */ selectOnFocus: PropTypes.bool, /** * The size of the autocomplete. + * @default 'medium' */ size: PropTypes.oneOf(['medium', 'small']), /** diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts index e511e67482c363..3fae9ac89b0ca6 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts @@ -17,10 +17,12 @@ export interface AvatarGroupProps extends StandardProps { if (props.max < 2) { @@ -118,6 +119,7 @@ AvatarGroup.propTypes = { }), /** * Spacing between avatars. + * @default 'medium' */ spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]), }; diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts index 90d96bf78fb274..32fa93bdede0d8 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.d.ts @@ -31,14 +31,17 @@ export type LoadingButtonTypeMap< }; /** * If `true`, the pending indicator will be shown. + * @default false */ pending?: boolean; /** * Element placed before the children if the button is in pending state. + * @default */ pendingIndicator?: React.ReactNode; /** * The pending indicator can be positioned on the start, end, or the center of the button. + * @default 'center' */ pendingPosition?: 'start' | 'end' | 'center'; }; diff --git a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js index 91b5f63194c813..2a36eb800a66a1 100644 --- a/packages/material-ui-lab/src/LoadingButton/LoadingButton.js +++ b/packages/material-ui-lab/src/LoadingButton/LoadingButton.js @@ -112,18 +112,22 @@ LoadingButton.propTypes = { className: PropTypes.string, /** * If `true`, the button will be disabled. + * @default false */ disabled: PropTypes.bool, /** * If `true`, the pending indicator will be shown. + * @default false */ pending: PropTypes.bool, /** * Element placed before the children if the button is in pending state. + * @default */ pendingIndicator: PropTypes.node, /** * The pending indicator can be positioned on the start, end, or the center of the button. + * @default 'center' */ pendingPosition: chainPropTypes(PropTypes.oneOf(['start', 'end', 'center']), (props) => { if (props.pendingPosition === 'start' && !props.startIcon) { diff --git a/packages/material-ui-lab/src/Pagination/Pagination.d.ts b/packages/material-ui-lab/src/Pagination/Pagination.d.ts index 2babec43093cc3..4f6b0c26855e65 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.d.ts +++ b/packages/material-ui-lab/src/Pagination/Pagination.d.ts @@ -31,6 +31,7 @@ export interface PaginationProps }; /** * The active color. + * @default 'standard' */ color?: 'primary' | 'secondary' | 'standard'; /** @@ -53,18 +54,22 @@ export interface PaginationProps * * @param {PaginationRenderItemParams} params The props to spread on a PaginationItem. * @returns {ReactNode} + * @default (item) => */ renderItem?: (params: PaginationRenderItemParams) => React.ReactNode; /** * The shape of the pagination items. + * @default 'circular' */ shape?: 'circular' | 'rounded'; /** * The size of the pagination component. + * @default 'medium' */ size?: 'small' | 'medium' | 'large'; /** * The variant to use. + * @default 'text' */ variant?: OverridableStringUnion; } diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js index cf72d97aaaa2b4..cab85e1a3df094 100644 --- a/packages/material-ui-lab/src/Pagination/Pagination.js +++ b/packages/material-ui-lab/src/Pagination/Pagination.js @@ -33,23 +33,23 @@ function defaultGetAriaLabel(type, page, selected) { const Pagination = React.forwardRef(function Pagination(props, ref) { const { - boundaryCount, + boundaryCount = 1, classes, className, color = 'standard', - count, - defaultPage, - disabled, + count = 1, + defaultPage = 1, + disabled = false, getItemAriaLabel = defaultGetAriaLabel, - hideNextButton, - hidePrevButton, + hideNextButton = false, + hidePrevButton = false, onChange, page, renderItem = (item) => , shape = 'circular', - showFirstButton, - showLastButton, - siblingCount, + showFirstButton = false, + showLastButton = false, + siblingCount = 1, size = 'medium', variant = 'text', ...other @@ -60,10 +60,19 @@ const Pagination = React.forwardRef(function Pagination(props, ref) { const themeVariantsClasses = useThemeVariants( { ...props, + boundaryCount, color, + count, + defaultPage, + disabled, getItemAriaLabel, + hideNextButton, + hidePrevButton, renderItem, shape, + showFirstButton, + showLastButton, + siblingCount, size, variant, }, @@ -117,6 +126,7 @@ Pagination.propTypes = { className: PropTypes.string, /** * The active color. + * @default 'standard' */ color: PropTypes.oneOf(['primary', 'secondary', 'standard']), /** @@ -171,10 +181,12 @@ Pagination.propTypes = { * * @param {PaginationRenderItemParams} params The props to spread on a PaginationItem. * @returns {ReactNode} + * @default (item) => */ renderItem: PropTypes.func, /** * The shape of the pagination items. + * @default 'circular' */ shape: PropTypes.oneOf(['circular', 'rounded']), /** @@ -194,10 +206,12 @@ Pagination.propTypes = { siblingCount: PropTypes.number, /** * The size of the pagination component. + * @default 'medium' */ size: PropTypes.oneOf(['large', 'medium', 'small']), /** * The variant to use. + * @default 'text' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['outlined', 'text']), diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts b/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts index 5033c43e188ccb..5b6c46a2c49291 100644 --- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts +++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts @@ -47,10 +47,12 @@ export interface PaginationItemTypeMap

string; /** * The icon to display. + * @default */ icon?: React.ReactNode; /** * The component containing the icon. + * @default function IconContainer(props) { + * const { value, ...other } = props; + * return ; + * } */ IconContainerComponent?: React.ElementType; /** * Maximum rating. + * @default 5 */ max?: number; /** @@ -103,14 +116,17 @@ export interface RatingProps onChangeActive?: (event: React.ChangeEvent<{}>, value: number) => void; /** * The minimum increment value change allowed. + * @default 1 */ precision?: number; /** * Removes all hover effects and pointer events. + * @default false */ readOnly?: boolean; /** * The size of the rating. + * @default 'medium' */ size?: 'small' | 'medium' | 'large'; /** diff --git a/packages/material-ui-lab/src/Rating/Rating.js b/packages/material-ui-lab/src/Rating/Rating.js index 309ca811dff6bf..6e6cfde6c58edc 100644 --- a/packages/material-ui-lab/src/Rating/Rating.js +++ b/packages/material-ui-lab/src/Rating/Rating.js @@ -466,10 +466,12 @@ Rating.propTypes = { className: PropTypes.string, /** * The default value. Use when the component is not controlled. + * @default null */ defaultValue: PropTypes.number, /** * If `true`, the rating will be disabled. + * @default false */ disabled: PropTypes.bool, /** @@ -478,6 +480,7 @@ Rating.propTypes = { emptyIcon: PropTypes.node, /** * The label read when the rating input is empty. + * @default 'Empty' */ emptyLabelText: PropTypes.node, /** @@ -487,18 +490,28 @@ Rating.propTypes = { * * @param {number} value The rating label's value to format. * @returns {string} + * + * @default function defaultLabelText(value) { + * return `${value} Star${value !== 1 ? 's' : ''}`; + * } */ getLabelText: PropTypes.func, /** * The icon to display. + * @default */ icon: PropTypes.node, /** * The component containing the icon. + * @default function IconContainer(props) { + * const { value, ...other } = props; + * return ; + * } */ IconContainerComponent: PropTypes.elementType, /** * Maximum rating. + * @default 5 */ max: PropTypes.number, /** @@ -541,6 +554,7 @@ Rating.propTypes = { onMouseMove: PropTypes.func, /** * The minimum increment value change allowed. + * @default 1 */ precision: chainPropTypes(PropTypes.number, (props) => { if (props.precision < 0.1) { @@ -555,10 +569,12 @@ Rating.propTypes = { }), /** * Removes all hover effects and pointer events. + * @default false */ readOnly: PropTypes.bool, /** * The size of the rating. + * @default 'medium' */ size: PropTypes.oneOf(['large', 'medium', 'small']), /** diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts b/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts index 14c17a4ed27b61..63c601fea0ec7b 100644 --- a/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts +++ b/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts @@ -10,6 +10,7 @@ export interface SkeletonTypeMap

{ /** * The animation. * If `false` the animation effect is disabled. + * @default 'pulse' */ animation?: 'pulse' | 'wave' | false; /** @@ -46,6 +47,7 @@ export interface SkeletonTypeMap

{ height?: number | string; /** * The type of content that will be rendered. + * @default 'text' */ variant?: OverridableStringUnion; /** diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.js b/packages/material-ui-lab/src/Skeleton/Skeleton.js index eaf5b073952250..280664c18ef95a 100644 --- a/packages/material-ui-lab/src/Skeleton/Skeleton.js +++ b/packages/material-ui-lab/src/Skeleton/Skeleton.js @@ -149,6 +149,7 @@ Skeleton.propTypes = { /** * The animation. * If `false` the animation effect is disabled. + * @default 'pulse' */ animation: PropTypes.oneOf(['pulse', 'wave', false]), /** @@ -179,6 +180,7 @@ Skeleton.propTypes = { style: PropTypes.object, /** * The type of content that will be rendered. + * @default 'text' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['circular', 'rectangular', 'text']), diff --git a/packages/material-ui-lab/src/SpeedDial/SpeedDial.d.ts b/packages/material-ui-lab/src/SpeedDial/SpeedDial.d.ts index 1c49a4bf7b4927..78630864a7e5cb 100644 --- a/packages/material-ui-lab/src/SpeedDial/SpeedDial.d.ts +++ b/packages/material-ui-lab/src/SpeedDial/SpeedDial.d.ts @@ -43,14 +43,17 @@ export interface SpeedDialProps ariaLabel: string; /** * The direction the actions open relative to the floating action button. + * @default 'up' */ direction?: 'up' | 'down' | 'left' | 'right'; /** * If `true`, the SpeedDial will be hidden. + * @default false */ hidden?: boolean; /** * Props applied to the [`Fab`](/api/fab/) element. + * @default {} */ FabProps?: Partial; /** @@ -83,11 +86,16 @@ export interface SpeedDialProps /** * The component used for the transition. * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + * @default Zoom */ TransitionComponent?: React.ComponentType; /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. + * @default { + * enter: duration.enteringScreen, + * exit: duration.leavingScreen, + * } */ transitionDuration?: TransitionProps['timeout']; /** diff --git a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js index 236b49763f62b5..365a299096a980 100644 --- a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js +++ b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js @@ -393,14 +393,17 @@ SpeedDial.propTypes = { className: PropTypes.string, /** * The direction the actions open relative to the floating action button. + * @default 'up' */ direction: PropTypes.oneOf(['down', 'left', 'right', 'up']), /** * Props applied to the [`Fab`](/api/fab/) element. + * @default {} */ FabProps: PropTypes.object, /** * If `true`, the SpeedDial will be hidden. + * @default false */ hidden: PropTypes.bool, /** @@ -453,11 +456,16 @@ SpeedDial.propTypes = { /** * The component used for the transition. * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + * @default Zoom */ TransitionComponent: PropTypes.elementType, /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. + * @default { + * enter: duration.enteringScreen, + * exit: duration.leavingScreen, + * } */ transitionDuration: PropTypes.oneOfType([ PropTypes.number, diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts index 931b2afa244a00..a46b0318bd262c 100644 --- a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts +++ b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts @@ -25,10 +25,12 @@ export interface SpeedDialActionProps extends StandardProps; /** * Adds a transition delay, to allow a series of SpeedDialActions to be animated. + * @default 0 */ delay?: number; /** @@ -41,6 +43,7 @@ export interface SpeedDialActionProps extends StandardProps; } diff --git a/packages/material-ui-lab/src/TimelineDot/TimelineDot.js b/packages/material-ui-lab/src/TimelineDot/TimelineDot.js index 5dc4016419d477..51daa8420f95b0 100644 --- a/packages/material-ui-lab/src/TimelineDot/TimelineDot.js +++ b/packages/material-ui-lab/src/TimelineDot/TimelineDot.js @@ -109,10 +109,12 @@ TimelineDot.propTypes = { className: PropTypes.string, /** * The dot can have a different colors. + * @default 'grey' */ color: PropTypes.oneOf(['grey', 'inherit', 'primary', 'secondary']), /** * The dot can appear filled or outlined. + * @default 'filled' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['filled', 'outlined']), diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts b/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts index 628ed4f45cafce..1dd0d018abdb1a 100644 --- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts +++ b/packages/material-ui-lab/src/ToggleButton/ToggleButton.d.ts @@ -29,10 +29,12 @@ export type ToggleButtonTypeMap< }; /** * If `true`, the button will be disabled. + * @default false */ disabled?: boolean; /** * If `true`, the keyboard focus ripple will be disabled. + * @default false */ disableFocusRipple?: boolean; /** @@ -42,6 +44,7 @@ export type ToggleButtonTypeMap< /** * The size of the button. * The prop defaults to the value injected by the parent ToggleButtonGroup component. + * @default 'medium' */ size?: 'small' | 'medium' | 'large'; /** diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js index 2fb5c5bc295987..903a49c2c16b41 100644 --- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js +++ b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js @@ -136,10 +136,12 @@ ToggleButton.propTypes = { className: PropTypes.string, /** * If `true`, the button will be disabled. + * @default false */ disabled: PropTypes.bool, /** * If `true`, the keyboard focus ripple will be disabled. + * @default false */ disableFocusRipple: PropTypes.bool, /** @@ -165,6 +167,7 @@ ToggleButton.propTypes = { /** * The size of the button. * The prop defaults to the value injected by the parent ToggleButtonGroup component. + * @default 'medium' */ size: PropTypes.oneOf(['large', 'medium', 'small']), /** diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.d.ts b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.d.ts index b6c3c44f0f1644..75eafcb3bfb4b9 100644 --- a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.d.ts +++ b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.d.ts @@ -24,6 +24,7 @@ export interface ToggleButtonGroupProps }; /** * If `true`, only allow one of the child ToggleButton values to be selected. + * @default false */ exclusive?: boolean; /** @@ -37,10 +38,12 @@ export interface ToggleButtonGroupProps onChange?: (event: React.MouseEvent, value: any) => void; /** * The group orientation (layout flow direction). + * @default 'horizontal' */ orientation?: 'horizontal' | 'vertical'; /** * The size of the buttons. + * @default 'medium' */ size?: 'small' | 'medium' | 'large'; /** diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js index dc5c78c05f9db7..ae248bdb0a1ca0 100644 --- a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js +++ b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js @@ -151,6 +151,7 @@ ToggleButtonGroup.propTypes = { className: PropTypes.string, /** * If `true`, only allow one of the child ToggleButton values to be selected. + * @default false */ exclusive: PropTypes.bool, /** @@ -164,10 +165,12 @@ ToggleButtonGroup.propTypes = { onChange: PropTypes.func, /** * The group orientation (layout flow direction). + * @default 'horizontal' */ orientation: PropTypes.oneOf(['horizontal', 'vertical']), /** * The size of the buttons. + * @default 'medium' */ size: PropTypes.oneOf(['large', 'medium', 'small']), /** diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts b/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts index 0f27fd8765325d..d65542ba9dda1e 100644 --- a/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts +++ b/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts @@ -76,6 +76,7 @@ export interface TreeItemProps /** * The component used for the transition. * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + * @default Collapse */ TransitionComponent?: React.ComponentType; /** diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js index 1c9c8b036637ec..deedcf0ac2ce4c 100644 --- a/packages/material-ui-lab/src/TreeItem/TreeItem.js +++ b/packages/material-ui-lab/src/TreeItem/TreeItem.js @@ -401,6 +401,7 @@ TreeItem.propTypes = { /** * The component used for the transition. * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + * @default Collapse */ TransitionComponent: PropTypes.elementType, /** diff --git a/packages/material-ui-lab/src/TreeView/TreeView.d.ts b/packages/material-ui-lab/src/TreeView/TreeView.d.ts index 5e7605843d3dfe..5d6a1a60bcc298 100644 --- a/packages/material-ui-lab/src/TreeView/TreeView.d.ts +++ b/packages/material-ui-lab/src/TreeView/TreeView.d.ts @@ -24,6 +24,7 @@ export interface TreeViewPropsBase extends StandardProps) => T[]; /** * If `true`, hide the selected options from the list box. + * @default false */ filterSelectedOptions?: boolean; /** * If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. + * @default false */ freeSolo?: FreeSolo; /** @@ -123,6 +136,7 @@ export interface UseAutocompleteProps< * * @param {T} option * @returns {string} + * @default (option) => option.label ?? option */ getOptionLabel?: (option: T) => string; /** @@ -145,6 +159,7 @@ export interface UseAutocompleteProps< /** * If `true`, the component handles the "Home" and "End" keys when the popup is open. * It should move focus to the first option and last option, respectively. + * @default !props.freeSolo */ handleHomeEndKeys?: boolean; /** @@ -154,6 +169,7 @@ export interface UseAutocompleteProps< id?: string; /** * If `true`, the highlight can move to the input. + * @default false */ includeInputInList?: boolean; /** @@ -205,6 +221,7 @@ export interface UseAutocompleteProps< open?: boolean; /** * If `true`, the popup will open on input focus. + * @default false */ openOnFocus?: boolean; /** @@ -214,10 +231,12 @@ export interface UseAutocompleteProps< /** * If `true`, the input's text will be selected on focus. * It helps the user clear the selected value. + * @default !props.freeSolo */ selectOnFocus?: boolean; /** * If `true`, `value` must be an array and the menu will support multiple selections. + * @default false */ multiple?: Multiple; /** @@ -229,6 +248,7 @@ export interface UseAutocompleteProps< value?: Value; /** * The default input value. Use when the component is not controlled. + * @default props.multiple ? [] : null */ defaultValue?: Value; /** diff --git a/packages/material-ui/src/TablePagination/TablePagination.d.ts b/packages/material-ui/src/TablePagination/TablePagination.d.ts index ef037d6ed73000..3a8a45dfe2eb3a 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.d.ts +++ b/packages/material-ui/src/TablePagination/TablePagination.d.ts @@ -19,6 +19,7 @@ export interface TablePaginationTypeMap { /** * The component used for displaying the actions. * Either a string to use a HTML element or a component. + * @default TablePaginationActions */ ActionsComponent?: React.ElementType; /** @@ -76,6 +77,7 @@ export interface TablePaginationTypeMap { * Customize the rows per page label. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default 'Rows per page:' */ labelRowsPerPage?: React.ReactNode; /** @@ -106,18 +108,22 @@ export interface TablePaginationTypeMap { /** * Customizes the options of the rows per page select field. If less than two options are * available, no select field will be displayed. + * @default [10, 25, 50, 100] */ rowsPerPageOptions?: Array; /** * Props applied to the rows per page [`Select`](/api/select/) element. + * @default {} */ SelectProps?: Partial; /** * If `true`, show the first-page button. + * @default false */ showFirstButton?: boolean; /** * If `true`, show the last-page button. + * @default false */ showLastButton?: boolean; }; diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js index a607a4dfe1c3a9..b0457a5f96c10f 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.js +++ b/packages/material-ui/src/TablePagination/TablePagination.js @@ -179,6 +179,7 @@ TablePagination.propTypes = { /** * The component used for displaying the actions. * Either a string to use a HTML element or a component. + * @default TablePaginationActions */ ActionsComponent: PropTypes.elementType, /** @@ -228,6 +229,7 @@ TablePagination.propTypes = { * Customize the rows per page label. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default 'Rows per page:' */ labelRowsPerPage: PropTypes.node, /** @@ -273,6 +275,7 @@ TablePagination.propTypes = { /** * Customizes the options of the rows per page select field. If less than two options are * available, no select field will be displayed. + * @default [10, 25, 50, 100] */ rowsPerPageOptions: PropTypes.arrayOf( PropTypes.oneOfType([ @@ -285,14 +288,17 @@ TablePagination.propTypes = { ), /** * Props applied to the rows per page [`Select`](/api/select/) element. + * @default {} */ SelectProps: PropTypes.object, /** * If `true`, show the first-page button. + * @default false */ showFirstButton: PropTypes.bool, /** * If `true`, show the last-page button. + * @default false */ showLastButton: PropTypes.bool, }; From e8aa137eb01585044fd743b1385d40c26fe49059 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 1 Sep 2020 19:04:35 +0200 Subject: [PATCH 08/13] Finish core --- docs/src/modules/utils/generateMarkdown.ts | 20 ++++----- .../material-ui/src/Accordion/Accordion.d.ts | 3 ++ .../material-ui/src/Accordion/Accordion.js | 4 ++ .../AccordionActions/AccordionActions.d.ts | 1 + .../src/AccordionActions/AccordionActions.js | 1 + .../AccordionSummary/AccordionSummary.d.ts | 1 + .../src/AccordionSummary/AccordionSummary.js | 1 + packages/material-ui/src/AppBar/AppBar.d.ts | 2 + packages/material-ui/src/AppBar/AppBar.js | 2 + packages/material-ui/src/Avatar/Avatar.d.ts | 1 + packages/material-ui/src/Avatar/Avatar.js | 1 + .../material-ui/src/Backdrop/Backdrop.d.ts | 1 + packages/material-ui/src/Backdrop/Backdrop.js | 1 + packages/material-ui/src/Badge/Badge.d.ts | 9 ++++ packages/material-ui/src/Badge/Badge.js | 9 ++++ .../BottomNavigation/BottomNavigation.d.ts | 1 + .../src/BottomNavigation/BottomNavigation.js | 1 + .../src/Breadcrumbs/Breadcrumbs.d.ts | 5 +++ .../src/Breadcrumbs/Breadcrumbs.js | 5 +++ packages/material-ui/src/Button/Button.d.ts | 7 ++++ packages/material-ui/src/Button/Button.js | 7 ++++ .../src/ButtonGroup/ButtonGroup.d.ts | 9 ++++ .../src/ButtonGroup/ButtonGroup.js | 9 ++++ packages/material-ui/src/Card/Card.d.ts | 1 + packages/material-ui/src/Card/Card.js | 1 + .../src/CardActions/CardActions.d.ts | 1 + .../src/CardActions/CardActions.js | 1 + .../src/CardHeader/CardHeader.d.ts | 1 + .../material-ui/src/CardHeader/CardHeader.js | 1 + .../material-ui/src/Checkbox/Checkbox.d.ts | 6 +++ packages/material-ui/src/Checkbox/Checkbox.js | 6 +++ packages/material-ui/src/Chip/Chip.d.ts | 4 ++ packages/material-ui/src/Chip/Chip.js | 4 ++ .../CircularProgress/CircularProgress.d.ts | 6 +++ .../src/CircularProgress/CircularProgress.js | 6 +++ .../ClickAwayListener/ClickAwayListener.d.ts | 3 ++ .../ClickAwayListener/ClickAwayListener.js | 3 ++ .../material-ui/src/Collapse/Collapse.d.ts | 3 ++ packages/material-ui/src/Collapse/Collapse.js | 3 ++ .../material-ui/src/Container/Container.d.ts | 3 ++ .../material-ui/src/Container/Container.js | 3 ++ .../src/CssBaseline/CssBaseline.d.ts | 1 + .../src/CssBaseline/CssBaseline.js | 1 + packages/material-ui/src/Dialog/Dialog.d.ts | 10 +++++ packages/material-ui/src/Dialog/Dialog.js | 10 +++++ .../src/DialogActions/DialogActions.d.ts | 1 + .../src/DialogActions/DialogActions.js | 1 + .../src/DialogContent/DialogContent.d.ts | 1 + .../src/DialogContent/DialogContent.js | 1 + .../src/DialogTitle/DialogTitle.d.ts | 1 + .../src/DialogTitle/DialogTitle.js | 1 + packages/material-ui/src/Divider/Divider.d.ts | 6 +++ packages/material-ui/src/Divider/Divider.js | 6 +++ packages/material-ui/src/Drawer/Drawer.d.ts | 7 ++++ packages/material-ui/src/Drawer/Drawer.js | 7 ++++ packages/material-ui/src/Fab/Fab.d.ts | 5 +++ packages/material-ui/src/Fab/Fab.js | 5 +++ packages/material-ui/src/Fade/Fade.d.ts | 4 ++ packages/material-ui/src/Fade/Fade.js | 4 ++ .../src/FilledInput/FilledInput.js | 5 +++ .../src/FormControl/FormControl.d.ts | 8 ++++ .../src/FormControl/FormControl.js | 8 ++++ .../FormControlLabel/FormControlLabel.d.ts | 1 + .../src/FormControlLabel/FormControlLabel.js | 1 + .../material-ui/src/FormGroup/FormGroup.d.ts | 1 + .../material-ui/src/FormGroup/FormGroup.js | 1 + packages/material-ui/src/Grid/Grid.d.ts | 14 +++++++ packages/material-ui/src/Grid/Grid.js | 14 +++++++ packages/material-ui/src/Grow/Grow.d.ts | 1 + packages/material-ui/src/Grow/Grow.js | 1 + packages/material-ui/src/Hidden/Hidden.d.ts | 11 +++++ packages/material-ui/src/Hidden/Hidden.js | 11 +++++ packages/material-ui/src/Icon/Icon.d.ts | 2 + packages/material-ui/src/Icon/Icon.js | 2 + .../src/IconButton/IconButton.d.ts | 5 +++ .../material-ui/src/IconButton/IconButton.js | 5 +++ .../material-ui/src/ImageList/ImageList.d.ts | 3 ++ .../material-ui/src/ImageList/ImageList.js | 3 ++ .../src/ImageListItem/ImageListItem.d.ts | 2 + .../src/ImageListItem/ImageListItem.js | 2 + .../ImageListItemBar/ImageListItemBar.d.ts | 2 + .../src/ImageListItemBar/ImageListItemBar.js | 2 + packages/material-ui/src/Input/Input.js | 5 +++ .../src/InputAdornment/InputAdornment.d.ts | 2 + .../src/InputAdornment/InputAdornment.js | 2 + .../material-ui/src/InputBase/InputBase.d.ts | 5 +++ .../material-ui/src/InputBase/InputBase.js | 5 +++ .../src/InputLabel/InputLabel.d.ts | 1 + .../material-ui/src/InputLabel/InputLabel.js | 1 + .../src/LinearProgress/LinearProgress.d.ts | 2 + .../src/LinearProgress/LinearProgress.js | 2 + packages/material-ui/src/Link/Link.d.ts | 5 ++- packages/material-ui/src/Link/Link.js | 3 ++ packages/material-ui/src/List/List.d.ts | 2 + packages/material-ui/src/List/List.js | 2 + .../material-ui/src/ListItem/ListItem.d.ts | 42 +++++++++++++++---- packages/material-ui/src/ListItem/ListItem.js | 10 +++++ .../src/ListItemText/ListItemText.d.ts | 2 + .../src/ListItemText/ListItemText.js | 2 + .../src/ListSubheader/ListSubheader.d.ts | 4 ++ .../src/ListSubheader/ListSubheader.js | 4 ++ packages/material-ui/src/Menu/Menu.d.ts | 6 +++ packages/material-ui/src/Menu/Menu.js | 6 +++ packages/material-ui/src/MenuItem/MenuItem.js | 2 + .../material-ui/src/MenuList/MenuList.d.ts | 5 +++ packages/material-ui/src/MenuList/MenuList.js | 5 +++ .../src/MobileStepper/MobileStepper.d.ts | 3 ++ .../src/MobileStepper/MobileStepper.js | 3 ++ packages/material-ui/src/Modal/Modal.d.ts | 11 +++++ packages/material-ui/src/Modal/Modal.js | 11 +++++ .../src/NativeSelect/NativeSelect.d.ts | 2 + .../src/NativeSelect/NativeSelect.js | 2 + packages/material-ui/src/NoSsr/NoSsr.d.ts | 2 + packages/material-ui/src/NoSsr/NoSsr.js | 2 + .../src/OutlinedInput/OutlinedInput.d.ts | 1 + .../src/OutlinedInput/OutlinedInput.js | 6 +++ packages/material-ui/src/Paper/Paper.d.ts | 3 ++ packages/material-ui/src/Paper/Paper.js | 3 ++ packages/material-ui/src/Popover/Popover.d.ts | 15 +++++++ packages/material-ui/src/Popover/Popover.js | 15 +++++++ packages/material-ui/src/Popper/Popper.d.ts | 5 +++ packages/material-ui/src/Popper/Popper.js | 5 +++ packages/material-ui/src/Portal/Portal.d.ts | 1 + packages/material-ui/src/Portal/Portal.js | 1 + packages/material-ui/src/Radio/Radio.d.ts | 2 + packages/material-ui/src/Radio/Radio.js | 2 + packages/material-ui/src/Select/Select.d.ts | 7 ++++ packages/material-ui/src/Select/Select.js | 7 ++++ packages/material-ui/src/Slide/Slide.d.ts | 5 +++ packages/material-ui/src/Slide/Slide.js | 5 +++ packages/material-ui/src/Slider/Slider.d.ts | 13 ++++++ packages/material-ui/src/Slider/Slider.js | 13 ++++++ .../material-ui/src/Snackbar/Snackbar.d.ts | 9 ++++ packages/material-ui/src/Snackbar/Snackbar.js | 9 ++++ .../src/SnackbarContent/SnackbarContent.d.ts | 1 + .../src/SnackbarContent/SnackbarContent.js | 1 + packages/material-ui/src/Step/Step.d.ts | 1 + packages/material-ui/src/Step/Step.js | 1 + .../src/StepContent/StepContent.d.ts | 2 + .../src/StepContent/StepContent.js | 2 + .../material-ui/src/StepIcon/StepIcon.d.ts | 3 ++ packages/material-ui/src/StepIcon/StepIcon.js | 3 ++ .../material-ui/src/StepLabel/StepLabel.d.ts | 1 + .../material-ui/src/StepLabel/StepLabel.js | 1 + packages/material-ui/src/Stepper/Stepper.d.ts | 5 +++ packages/material-ui/src/Stepper/Stepper.js | 5 +++ packages/material-ui/src/SvgIcon/SvgIcon.d.ts | 3 ++ packages/material-ui/src/SvgIcon/SvgIcon.js | 3 ++ .../src/SwipeableDrawer/SwipeableDrawer.d.ts | 6 +++ .../src/SwipeableDrawer/SwipeableDrawer.js | 7 ++++ packages/material-ui/src/Switch/Switch.d.ts | 2 + packages/material-ui/src/Switch/Switch.js | 3 ++ packages/material-ui/src/Tab/Tab.d.ts | 3 ++ packages/material-ui/src/Tab/Tab.js | 3 ++ packages/material-ui/src/Table/Table.d.ts | 3 ++ packages/material-ui/src/Table/Table.js | 3 ++ .../material-ui/src/TableCell/TableCell.d.ts | 1 + .../material-ui/src/TableCell/TableCell.js | 1 + .../src/TablePagination/TablePagination.d.ts | 6 +++ .../src/TablePagination/TablePagination.js | 6 +++ .../material-ui/src/TableRow/TableRow.d.ts | 2 + packages/material-ui/src/TableRow/TableRow.js | 2 + .../src/TableSortLabel/TableSortLabel.d.ts | 4 ++ .../src/TableSortLabel/TableSortLabel.js | 4 ++ packages/material-ui/src/Tabs/Tabs.d.ts | 8 ++++ packages/material-ui/src/Tabs/Tabs.js | 8 ++++ .../material-ui/src/TextField/TextField.d.ts | 11 +++++ .../material-ui/src/TextField/TextField.js | 9 ++++ .../TextareaAutosize/TextareaAutosize.d.ts | 1 + .../src/TextareaAutosize/TextareaAutosize.js | 1 + packages/material-ui/src/Toolbar/Toolbar.d.ts | 2 + packages/material-ui/src/Toolbar/Toolbar.js | 2 + packages/material-ui/src/Tooltip/Tooltip.d.ts | 13 ++++++ packages/material-ui/src/Tooltip/Tooltip.js | 13 ++++++ .../src/Typography/Typography.d.ts | 20 +++++++++ .../material-ui/src/Typography/Typography.js | 20 +++++++++ .../Unstable_TrapFocus.d.ts | 3 ++ .../Unstable_TrapFocus/Unstable_TrapFocus.js | 3 ++ packages/material-ui/src/Zoom/Zoom.d.ts | 4 ++ packages/material-ui/src/Zoom/Zoom.js | 4 ++ 180 files changed, 814 insertions(+), 18 deletions(-) diff --git a/docs/src/modules/utils/generateMarkdown.ts b/docs/src/modules/utils/generateMarkdown.ts index ddc7293f62734a..3c8d1a61426f7a 100644 --- a/docs/src/modules/utils/generateMarkdown.ts +++ b/docs/src/modules/utils/generateMarkdown.ts @@ -152,7 +152,16 @@ function generatePropDescription(prop: PropDescriptor, propName: string) { let signature = ''; - if (type.name === 'func' && parsed.tags.length > 0) { + // Split up the parsed tags into 'arguments' and 'returns' parsed objects. If there's no + // 'returns' parsed object (i.e., one with title being 'returns'), make one of type 'void'. + const parsedArgs: doctrine.Tag[] = parsed.tags.filter((tag) => tag.title === 'param'); + let parsedReturns: + | doctrine.Tag + | { description?: undefined; type: { name: string } } + | undefined = parsed.tags.find((tag) => tag.title === 'returns'); + if (type.name === 'func' && (parsedArgs.length > 0 || parsedReturns !== undefined)) { + parsedReturns = parsedReturns ?? { type: { name: 'void' } }; + // Remove new lines from tag descriptions to avoid markdown errors. parsed.tags.forEach((tag) => { if (tag.description) { @@ -160,15 +169,6 @@ function generatePropDescription(prop: PropDescriptor, propName: string) { } }); - // Split up the parsed tags into 'arguments' and 'returns' parsed objects. If there's no - // 'returns' parsed object (i.e., one with title being 'returns'), make one of type 'void'. - const parsedArgs: doctrine.Tag[] = parsed.tags.filter((tag) => tag.title === 'param'); - const parsedReturns: doctrine.Tag = - parsed.tags.find((tag) => tag.title === 'returns') ?? - ({ - type: { name: 'void' }, - } as doctrine.Tag); - signature += '

**Signature:**
`function('; signature += parsedArgs .map((tag, index) => { diff --git a/packages/material-ui/src/Accordion/Accordion.d.ts b/packages/material-ui/src/Accordion/Accordion.d.ts index e01d3628ecd312..ddcb3c7c951b18 100644 --- a/packages/material-ui/src/Accordion/Accordion.d.ts +++ b/packages/material-ui/src/Accordion/Accordion.d.ts @@ -25,10 +25,12 @@ export interface AccordionProps extends StandardProps { }; /** * If `true`, expands the accordion by default. + * @default false */ defaultExpanded?: boolean; /** * If `true`, the accordion will be displayed in a disabled state. + * @default false */ disabled?: boolean; /** @@ -46,6 +48,7 @@ export interface AccordionProps extends StandardProps { /** * The component used for the transition. * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + * @default Collapse */ TransitionComponent?: React.ComponentType< TransitionProps & { children?: React.ReactElement } diff --git a/packages/material-ui/src/Accordion/Accordion.js b/packages/material-ui/src/Accordion/Accordion.js index 4d2b6b10365f9c..1e23c6bdda33d4 100644 --- a/packages/material-ui/src/Accordion/Accordion.js +++ b/packages/material-ui/src/Accordion/Accordion.js @@ -186,10 +186,12 @@ Accordion.propTypes = { className: PropTypes.string, /** * If `true`, expands the accordion by default. + * @default false */ defaultExpanded: PropTypes.bool, /** * If `true`, the accordion will be displayed in a disabled state. + * @default false */ disabled: PropTypes.bool, /** @@ -206,11 +208,13 @@ Accordion.propTypes = { onChange: PropTypes.func, /** * If `true`, rounded corners are disabled. + * @default false */ square: PropTypes.bool, /** * The component used for the transition. * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + * @default Collapse */ TransitionComponent: PropTypes.elementType, /** diff --git a/packages/material-ui/src/AccordionActions/AccordionActions.d.ts b/packages/material-ui/src/AccordionActions/AccordionActions.d.ts index ec2581fc2e0ed1..9afec1bc567f08 100644 --- a/packages/material-ui/src/AccordionActions/AccordionActions.d.ts +++ b/packages/material-ui/src/AccordionActions/AccordionActions.d.ts @@ -17,6 +17,7 @@ export interface AccordionActionsProps extends StandardProps; }; diff --git a/packages/material-ui/src/AccordionSummary/AccordionSummary.js b/packages/material-ui/src/AccordionSummary/AccordionSummary.js index c37b55c7819f61..ecc4fb928157a1 100644 --- a/packages/material-ui/src/AccordionSummary/AccordionSummary.js +++ b/packages/material-ui/src/AccordionSummary/AccordionSummary.js @@ -173,6 +173,7 @@ AccordionSummary.propTypes = { expandIcon: PropTypes.node, /** * Props applied to the `IconButton` element wrapping the expand icon. + * @default {} */ IconButtonProps: PropTypes.object, /** diff --git a/packages/material-ui/src/AppBar/AppBar.d.ts b/packages/material-ui/src/AppBar/AppBar.d.ts index d44755d84c7d63..59aeba6c72d605 100644 --- a/packages/material-ui/src/AppBar/AppBar.d.ts +++ b/packages/material-ui/src/AppBar/AppBar.d.ts @@ -31,12 +31,14 @@ export interface AppBarProps extends StandardProps { }; /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' */ color?: PropTypes.Color | 'transparent'; /** * The positioning type. The behavior of the different options is described * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). * Note: `sticky` is not universally supported and will fall back to `static` when unavailable. + * @default 'fixed' */ position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative'; } diff --git a/packages/material-ui/src/AppBar/AppBar.js b/packages/material-ui/src/AppBar/AppBar.js index a90dafae4b3033..5b6958c2a0ff13 100644 --- a/packages/material-ui/src/AppBar/AppBar.js +++ b/packages/material-ui/src/AppBar/AppBar.js @@ -122,12 +122,14 @@ AppBar.propTypes = { className: PropTypes.string, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' */ color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']), /** * The positioning type. The behavior of the different options is described * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). * Note: `sticky` is not universally supported and will fall back to `static` when unavailable. + * @default 'fixed' */ position: PropTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'sticky']), }; diff --git a/packages/material-ui/src/Avatar/Avatar.d.ts b/packages/material-ui/src/Avatar/Avatar.d.ts index 2da18c423760d6..c7442c433cc218 100644 --- a/packages/material-ui/src/Avatar/Avatar.d.ts +++ b/packages/material-ui/src/Avatar/Avatar.d.ts @@ -56,6 +56,7 @@ export interface AvatarTypeMap

{ srcSet?: string; /** * The shape of the avatar. + * @default 'circular' */ variant?: OverridableStringUnion; }; diff --git a/packages/material-ui/src/Avatar/Avatar.js b/packages/material-ui/src/Avatar/Avatar.js index 693b1088214f0f..38e8b7a0f1fa4d 100644 --- a/packages/material-ui/src/Avatar/Avatar.js +++ b/packages/material-ui/src/Avatar/Avatar.js @@ -210,6 +210,7 @@ Avatar.propTypes = { srcSet: PropTypes.string, /** * The shape of the avatar. + * @default 'circular' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['circular', 'rounded', 'square']), diff --git a/packages/material-ui/src/Backdrop/Backdrop.d.ts b/packages/material-ui/src/Backdrop/Backdrop.d.ts index 6a3cd05785fc4b..2a84e98979ee3f 100644 --- a/packages/material-ui/src/Backdrop/Backdrop.d.ts +++ b/packages/material-ui/src/Backdrop/Backdrop.d.ts @@ -23,6 +23,7 @@ export interface BackdropProps /** * If `true`, the backdrop is invisible. * It can be used when rendering a popover or a custom select component. + * @default false */ invisible?: boolean; /** diff --git a/packages/material-ui/src/Backdrop/Backdrop.js b/packages/material-ui/src/Backdrop/Backdrop.js index d37108dbf1e745..5a396a0018d784 100644 --- a/packages/material-ui/src/Backdrop/Backdrop.js +++ b/packages/material-ui/src/Backdrop/Backdrop.js @@ -79,6 +79,7 @@ Backdrop.propTypes = { /** * If `true`, the backdrop is invisible. * It can be used when rendering a popover or a custom select component. + * @default false */ invisible: PropTypes.bool, /** diff --git a/packages/material-ui/src/Badge/Badge.d.ts b/packages/material-ui/src/Badge/Badge.d.ts index 9b4f54baf401ee..1bce798aea8e67 100644 --- a/packages/material-ui/src/Badge/Badge.d.ts +++ b/packages/material-ui/src/Badge/Badge.d.ts @@ -14,10 +14,15 @@ export interface BadgeTypeMap

{ props: P & { /** * The anchor of the badge. + * @default { + * vertical: 'top', + * horizontal: 'right', + * } */ anchorOrigin?: BadgeOrigin; /** * Wrapped shape the badge should overlap. + * @default 'rectangular' */ overlap?: 'rectangular' | 'circular'; /** @@ -67,6 +72,7 @@ export interface BadgeTypeMap

{ }; /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'default' */ color?: 'primary' | 'secondary' | 'default' | 'error'; /** @@ -75,14 +81,17 @@ export interface BadgeTypeMap

{ invisible?: boolean; /** * Max count to show. + * @default 99 */ max?: number; /** * Controls whether the badge is hidden when `badgeContent` is zero. + * @default false */ showZero?: boolean; /** * The variant to use. + * @default 'standard' */ variant?: OverridableStringUnion; }; diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js index 7ed8dfa4a1084f..2dcb1a3a476608 100644 --- a/packages/material-ui/src/Badge/Badge.js +++ b/packages/material-ui/src/Badge/Badge.js @@ -263,6 +263,10 @@ Badge.propTypes = { // ---------------------------------------------------------------------- /** * The anchor of the badge. + * @default { + * vertical: 'top', + * horizontal: 'right', + * } */ anchorOrigin: PropTypes.shape({ horizontal: PropTypes.oneOf(['left', 'right']).isRequired, @@ -286,6 +290,7 @@ Badge.propTypes = { className: PropTypes.string, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'default' */ color: PropTypes.oneOf(['default', 'error', 'primary', 'secondary']), /** @@ -299,18 +304,22 @@ Badge.propTypes = { invisible: PropTypes.bool, /** * Max count to show. + * @default 99 */ max: PropTypes.number, /** * Wrapped shape the badge should overlap. + * @default 'rectangular' */ overlap: PropTypes.oneOf(['circular', 'rectangular']), /** * Controls whether the badge is hidden when `badgeContent` is zero. + * @default false */ showZero: PropTypes.bool, /** * The variant to use. + * @default 'standard' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['dot', 'standard']), diff --git a/packages/material-ui/src/BottomNavigation/BottomNavigation.d.ts b/packages/material-ui/src/BottomNavigation/BottomNavigation.d.ts index c8895577f22904..fc1bc07ab14a56 100644 --- a/packages/material-ui/src/BottomNavigation/BottomNavigation.d.ts +++ b/packages/material-ui/src/BottomNavigation/BottomNavigation.d.ts @@ -24,6 +24,7 @@ export interface BottomNavigationTypeMap

* Override the default label for the expand button. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default 'Show path' */ expandText?: string; /** * If max items is exceeded, the number of items to show after the ellipsis. + * @default 1 */ itemsAfterCollapse?: number; /** * If max items is exceeded, the number of items to show before the ellipsis. + * @default 1 */ itemsBeforeCollapse?: number; /** * Specifies the maximum number of breadcrumbs to display. When there are more * than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse` * will be shown, with an ellipsis in between. + * @default 8 */ maxItems?: number; /** * Custom separator node. + * @default '/' */ separator?: React.ReactNode; }; diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js index db5bdd2e45ba3b..9291b909d1e0bd 100644 --- a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js +++ b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js @@ -166,24 +166,29 @@ Breadcrumbs.propTypes = { * Override the default label for the expand button. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default 'Show path' */ expandText: PropTypes.string, /** * If max items is exceeded, the number of items to show after the ellipsis. + * @default 1 */ itemsAfterCollapse: PropTypes.number, /** * If max items is exceeded, the number of items to show before the ellipsis. + * @default 1 */ itemsBeforeCollapse: PropTypes.number, /** * Specifies the maximum number of breadcrumbs to display. When there are more * than the maximum number, only the first `itemsBeforeCollapse` and last `itemsAfterCollapse` * will be shown, with an ellipsis in between. + * @default 8 */ maxItems: PropTypes.number, /** * Custom separator node. + * @default '/' */ separator: PropTypes.node, }; diff --git a/packages/material-ui/src/Button/Button.d.ts b/packages/material-ui/src/Button/Button.d.ts index b212204f2a2d43..74879a7330ea60 100644 --- a/packages/material-ui/src/Button/Button.d.ts +++ b/packages/material-ui/src/Button/Button.d.ts @@ -79,18 +79,22 @@ export type ButtonTypeMap< }; /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' */ color?: 'inherit' | 'primary' | 'secondary'; /** * If `true`, the button will be disabled. + * @default false */ disabled?: boolean; /** * If `true`, no elevation is used. + * @default false */ disableElevation?: boolean; /** * If `true`, the keyboard focus ripple will be disabled. + * @default false */ disableFocusRipple?: boolean; /** @@ -99,6 +103,7 @@ export type ButtonTypeMap< endIcon?: React.ReactNode; /** * If `true`, the button will take up the full width of its container. + * @default false */ fullWidth?: boolean; /** @@ -109,6 +114,7 @@ export type ButtonTypeMap< /** * The size of the button. * `small` is equivalent to the dense button styling. + * @default 'medium' */ size?: 'small' | 'medium' | 'large'; /** @@ -117,6 +123,7 @@ export type ButtonTypeMap< startIcon?: React.ReactNode; /** * The variant to use. + * @default 'text' */ variant?: OverridableStringUnion; }; diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index a3ce641957637e..b1d2005f58d1cf 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.js @@ -365,6 +365,7 @@ Button.propTypes = { className: PropTypes.string, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' */ color: PropTypes.oneOf(['inherit', 'primary', 'secondary']), /** @@ -374,14 +375,17 @@ Button.propTypes = { component: PropTypes.elementType, /** * If `true`, the button will be disabled. + * @default false */ disabled: PropTypes.bool, /** * If `true`, no elevation is used. + * @default false */ disableElevation: PropTypes.bool, /** * If `true`, the keyboard focus ripple will be disabled. + * @default false */ disableFocusRipple: PropTypes.bool, /** @@ -402,6 +406,7 @@ Button.propTypes = { focusVisibleClassName: PropTypes.string, /** * If `true`, the button will take up the full width of its container. + * @default false */ fullWidth: PropTypes.bool, /** @@ -412,6 +417,7 @@ Button.propTypes = { /** * The size of the button. * `small` is equivalent to the dense button styling. + * @default 'medium' */ size: PropTypes.oneOf(['large', 'medium', 'small']), /** @@ -424,6 +430,7 @@ Button.propTypes = { type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string]), /** * The variant to use. + * @default 'text' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['contained', 'outlined', 'text']), diff --git a/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts b/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts index 429fbc5277c1b9..80987eefe4ffde 100644 --- a/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts +++ b/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts @@ -70,39 +70,48 @@ export interface ButtonGroupTypeMap

}; /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' */ color?: 'inherit' | 'primary' | 'secondary'; /** * If `true`, the buttons will be disabled. + * @default false */ disabled?: boolean; /** * If `true`, no elevation is used. + * @default false */ disableElevation?: boolean; /** * If `true`, the button keyboard focus ripple will be disabled. + * @default false */ disableFocusRipple?: boolean; /** * If `true`, the button ripple effect will be disabled. + * @default false */ disableRipple?: boolean; /** * If `true`, the buttons will take up the full width of its container. + * @default false */ fullWidth?: boolean; /** * The group orientation (layout flow direction). + * @default 'horizontal' */ orientation?: 'vertical' | 'horizontal'; /** * The size of the button. * `small` is equivalent to the dense button styling. + * @default 'medium' */ size?: 'small' | 'medium' | 'large'; /** * The variant to use. + * @default 'outlined' */ variant?: OverridableStringUnion; }; diff --git a/packages/material-ui/src/ButtonGroup/ButtonGroup.js b/packages/material-ui/src/ButtonGroup/ButtonGroup.js index fd63810382aa73..3a4fd35c990916 100644 --- a/packages/material-ui/src/ButtonGroup/ButtonGroup.js +++ b/packages/material-ui/src/ButtonGroup/ButtonGroup.js @@ -281,6 +281,7 @@ ButtonGroup.propTypes = { className: PropTypes.string, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' */ color: PropTypes.oneOf(['inherit', 'primary', 'secondary']), /** @@ -290,35 +291,43 @@ ButtonGroup.propTypes = { component: PropTypes.elementType, /** * If `true`, the buttons will be disabled. + * @default false */ disabled: PropTypes.bool, /** * If `true`, no elevation is used. + * @default false */ disableElevation: PropTypes.bool, /** * If `true`, the button keyboard focus ripple will be disabled. + * @default false */ disableFocusRipple: PropTypes.bool, /** * If `true`, the button ripple effect will be disabled. + * @default false */ disableRipple: PropTypes.bool, /** * If `true`, the buttons will take up the full width of its container. + * @default false */ fullWidth: PropTypes.bool, /** * The group orientation (layout flow direction). + * @default 'horizontal' */ orientation: PropTypes.oneOf(['horizontal', 'vertical']), /** * The size of the button. * `small` is equivalent to the dense button styling. + * @default 'medium' */ size: PropTypes.oneOf(['large', 'medium', 'small']), /** * The variant to use. + * @default 'outlined' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['contained', 'outlined', 'text']), diff --git a/packages/material-ui/src/Card/Card.d.ts b/packages/material-ui/src/Card/Card.d.ts index deb9c5d27a593b..d89e5ec2d3c164 100644 --- a/packages/material-ui/src/Card/Card.d.ts +++ b/packages/material-ui/src/Card/Card.d.ts @@ -11,6 +11,7 @@ export interface CardProps extends StandardProps { }; /** * If `true`, the card will use raised styling. + * @default false */ raised?: boolean; } diff --git a/packages/material-ui/src/Card/Card.js b/packages/material-ui/src/Card/Card.js index 5cf35705e638a0..fef3360b76570a 100644 --- a/packages/material-ui/src/Card/Card.js +++ b/packages/material-ui/src/Card/Card.js @@ -43,6 +43,7 @@ Card.propTypes = { className: PropTypes.string, /** * If `true`, the card will use raised styling. + * @default false */ raised: PropTypes.bool, }; diff --git a/packages/material-ui/src/CardActions/CardActions.d.ts b/packages/material-ui/src/CardActions/CardActions.d.ts index 088241be77a80e..96b855f260a642 100644 --- a/packages/material-ui/src/CardActions/CardActions.d.ts +++ b/packages/material-ui/src/CardActions/CardActions.d.ts @@ -17,6 +17,7 @@ export interface CardActionsProps extends StandardProps */ checkedIcon?: React.ReactNode; /** @@ -31,6 +32,7 @@ export interface CheckboxProps }; /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'secondary' */ color?: 'primary' | 'secondary' | 'default'; /** @@ -43,6 +45,7 @@ export interface CheckboxProps disableRipple?: SwitchBaseProps['disableRipple']; /** * The icon to display when the component is unchecked. + * @default */ icon?: React.ReactNode; /** @@ -54,10 +57,12 @@ export interface CheckboxProps * 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. + * @default false */ indeterminate?: boolean; /** * The icon to display when the component is indeterminate. + * @default */ indeterminateIcon?: React.ReactNode; /** @@ -82,6 +87,7 @@ export interface CheckboxProps /** * The size of the checkbox. * `small` is equivalent to the dense checkbox styling. + * @default 'medium' */ size?: 'small' | 'medium'; /** diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js index 2aba6a6545c64a..77f88e1b1c0ce3 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.js +++ b/packages/material-ui/src/Checkbox/Checkbox.js @@ -117,6 +117,7 @@ Checkbox.propTypes = { checked: PropTypes.bool, /** * The icon to display when the component is checked. + * @default */ checkedIcon: PropTypes.node, /** @@ -125,6 +126,7 @@ Checkbox.propTypes = { classes: PropTypes.object, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'secondary' */ color: PropTypes.oneOf(['default', 'primary', 'secondary']), /** @@ -137,6 +139,7 @@ Checkbox.propTypes = { disableRipple: PropTypes.bool, /** * The icon to display when the component is unchecked. + * @default */ icon: PropTypes.node, /** @@ -148,10 +151,12 @@ Checkbox.propTypes = { * 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. + * @default false */ indeterminate: PropTypes.bool, /** * The icon to display when the component is indeterminate. + * @default */ indeterminateIcon: PropTypes.node, /** @@ -176,6 +181,7 @@ Checkbox.propTypes = { /** * The size of the checkbox. * `small` is equivalent to the dense checkbox styling. + * @default 'medium' */ size: PropTypes.oneOf(['medium', 'small']), /** diff --git a/packages/material-ui/src/Chip/Chip.d.ts b/packages/material-ui/src/Chip/Chip.d.ts index 9fac9c3c8cd37c..1d85c7c458a8df 100644 --- a/packages/material-ui/src/Chip/Chip.d.ts +++ b/packages/material-ui/src/Chip/Chip.d.ts @@ -94,6 +94,7 @@ export interface ChipTypeMap

{ clickable?: boolean; /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'default' */ color?: Exclude; /** @@ -102,6 +103,7 @@ export interface ChipTypeMap

{ deleteIcon?: React.ReactElement; /** * If `true`, the chip should be displayed in a disabled state. + * @default false */ disabled?: boolean; /** @@ -119,10 +121,12 @@ export interface ChipTypeMap

{ onDelete?: React.EventHandler; /** * The size of the chip. + * @default 'medium' */ size?: 'small' | 'medium'; /** * The variant to use. + * @default 'default' */ variant?: OverridableStringUnion; }; diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index 2cb69af4b1c4a0..7c3d61af8fb6a3 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -475,6 +475,7 @@ Chip.propTypes = { clickable: PropTypes.bool, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'default' */ color: PropTypes.oneOf(['default', 'primary', 'secondary']), /** @@ -488,6 +489,7 @@ Chip.propTypes = { deleteIcon: PropTypes.element, /** * If `true`, the chip should be displayed in a disabled state. + * @default false */ disabled: PropTypes.bool, /** @@ -517,10 +519,12 @@ Chip.propTypes = { onKeyUp: PropTypes.func, /** * The size of the chip. + * @default 'medium' */ size: PropTypes.oneOf(['medium', 'small']), /** * The variant to use. + * @default 'default' */ variant: PropTypes.oneOf(['default', 'outlined']), }; diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.d.ts b/packages/material-ui/src/CircularProgress/CircularProgress.d.ts index cd916d173139d3..4a9aa08a2d85e0 100644 --- a/packages/material-ui/src/CircularProgress/CircularProgress.d.ts +++ b/packages/material-ui/src/CircularProgress/CircularProgress.d.ts @@ -30,31 +30,37 @@ export interface CircularProgressProps }; /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' */ color?: 'primary' | 'secondary' | 'inherit'; /** * If `true`, the shrink animation is disabled. * This only works if variant is `indeterminate`. + * @default false */ 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'. + * @default 40 */ size?: number | string; /** * The thickness of the circle. + * @default 3.6 */ thickness?: number; /** * The value of the progress indicator for the determinate variant. * Value between 0 and 100. + * @default 0 */ value?: number; /** * The variant to use. * Use indeterminate when there is no progress value. + * @default 'indeterminate' */ variant?: 'determinate' | 'indeterminate'; } diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.js b/packages/material-ui/src/CircularProgress/CircularProgress.js index 9888f5e57013f3..ef6c539deda7bc 100644 --- a/packages/material-ui/src/CircularProgress/CircularProgress.js +++ b/packages/material-ui/src/CircularProgress/CircularProgress.js @@ -162,11 +162,13 @@ CircularProgress.propTypes = { className: PropTypes.string, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' */ color: PropTypes.oneOf(['inherit', 'primary', 'secondary']), /** * If `true`, the shrink animation is disabled. * This only works if variant is `indeterminate`. + * @default false */ disableShrink: chainPropTypes(PropTypes.bool, (props) => { if (props.disableShrink && props.variant && props.variant !== 'indeterminate') { @@ -182,6 +184,7 @@ CircularProgress.propTypes = { * 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'. + * @default 40 */ size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** @@ -190,16 +193,19 @@ CircularProgress.propTypes = { style: PropTypes.object, /** * The thickness of the circle. + * @default 3.6 */ thickness: PropTypes.number, /** * The value of the progress indicator for the determinate variant. * Value between 0 and 100. + * @default 0 */ value: PropTypes.number, /** * The variant to use. * Use indeterminate when there is no progress value. + * @default 'indeterminate' */ variant: PropTypes.oneOf(['determinate', 'indeterminate']), }; diff --git a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.d.ts b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.d.ts index a41e2fe9d9b059..1c6dd943c45244 100644 --- a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.d.ts +++ b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.d.ts @@ -8,10 +8,12 @@ export interface ClickAwayListenerProps { /** * If `true`, the React tree is ignored and only the DOM tree is considered. * This prop changes how portaled elements are handled. + * @default false */ disableReactTree?: boolean; /** * The mouse event to listen to. You can disable the listener by providing `false`. + * @default 'onClick' */ mouseEvent?: 'onClick' | 'onMouseDown' | 'onMouseUp' | false; /** @@ -20,6 +22,7 @@ export interface ClickAwayListenerProps { onClickAway: (event: React.MouseEvent) => void; /** * The touch event to listen to. You can disable the listener by providing `false`. + * @default 'onTouchEnd' */ touchEvent?: 'onTouchStart' | 'onTouchEnd' | false; } diff --git a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js index 34143d8b5b5da0..8b0ebebb14b368 100644 --- a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js +++ b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js @@ -155,10 +155,12 @@ ClickAwayListener.propTypes = { /** * If `true`, the React tree is ignored and only the DOM tree is considered. * This prop changes how portaled elements are handled. + * @default false */ disableReactTree: PropTypes.bool, /** * The mouse event to listen to. You can disable the listener by providing `false`. + * @default 'onClick' */ mouseEvent: PropTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', false]), /** @@ -167,6 +169,7 @@ ClickAwayListener.propTypes = { onClickAway: PropTypes.func.isRequired, /** * The touch event to listen to. You can disable the listener by providing `false`. + * @default 'onTouchEnd' */ touchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false]), }; diff --git a/packages/material-ui/src/Collapse/Collapse.d.ts b/packages/material-ui/src/Collapse/Collapse.d.ts index 799ee66a4559ce..f07d6998bc9918 100644 --- a/packages/material-ui/src/Collapse/Collapse.d.ts +++ b/packages/material-ui/src/Collapse/Collapse.d.ts @@ -27,6 +27,7 @@ export interface CollapseProps extends StandardProps }; /** * The width (horizontal) or height (vertical) of the container when collapsed. + * @default '0px' */ collapsedSize?: string | number; /** @@ -40,6 +41,7 @@ export interface CollapseProps extends StandardProps in?: boolean; /** * The collapse transition orientation. + * @default 'vertical' */ orientation?: 'horizontal' | 'vertical'; /** @@ -47,6 +49,7 @@ export interface CollapseProps extends StandardProps * 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. + * @default duration.standard */ timeout?: TransitionProps['timeout'] | 'auto'; } diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js index a27efea69833f9..fd02f78b5968c4 100644 --- a/packages/material-ui/src/Collapse/Collapse.js +++ b/packages/material-ui/src/Collapse/Collapse.js @@ -280,6 +280,7 @@ Collapse.propTypes = { className: PropTypes.string, /** * The width (horizontal) or height (vertical) of the container when collapsed. + * @default '0px' */ collapsedSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** @@ -317,6 +318,7 @@ Collapse.propTypes = { onExiting: PropTypes.func, /** * The collapse transition orientation. + * @default 'vertical' */ orientation: PropTypes.oneOf(['horizontal', 'vertical']), /** @@ -328,6 +330,7 @@ Collapse.propTypes = { * 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. + * @default duration.standard */ timeout: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), diff --git a/packages/material-ui/src/Container/Container.d.ts b/packages/material-ui/src/Container/Container.d.ts index cf41d837f3684c..b079f039ab8ef8 100644 --- a/packages/material-ui/src/Container/Container.d.ts +++ b/packages/material-ui/src/Container/Container.d.ts @@ -27,6 +27,7 @@ export interface ContainerTypeMap

{ }; /** * If `true`, the left and right padding is removed. + * @default false */ disableGutters?: boolean; /** @@ -34,12 +35,14 @@ export interface ContainerTypeMap

{ * This is useful if you'd prefer to design for a fixed set of sizes * instead of trying to accommodate a fully fluid viewport. * It's fluid by default. + * @default false */ fixed?: boolean; /** * Determine the max-width of the container. * The container width grows with the size of the screen. * Set to `false` to disable `maxWidth`. + * @default 'lg' */ maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false; }; diff --git a/packages/material-ui/src/Container/Container.js b/packages/material-ui/src/Container/Container.js index 354a81a7cc1713..d8bffdac64190f 100644 --- a/packages/material-ui/src/Container/Container.js +++ b/packages/material-ui/src/Container/Container.js @@ -119,6 +119,7 @@ Container.propTypes = { component: PropTypes.elementType, /** * If `true`, the left and right padding is removed. + * @default false */ disableGutters: PropTypes.bool, /** @@ -126,12 +127,14 @@ Container.propTypes = { * This is useful if you'd prefer to design for a fixed set of sizes * instead of trying to accommodate a fully fluid viewport. * It's fluid by default. + * @default false */ fixed: PropTypes.bool, /** * Determine the max-width of the container. * The container width grows with the size of the screen. * Set to `false` to disable `maxWidth`. + * @default 'lg' */ maxWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false]), }; diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.d.ts b/packages/material-ui/src/CssBaseline/CssBaseline.d.ts index 51c7c8bcaa1544..46dfe93f7955d0 100644 --- a/packages/material-ui/src/CssBaseline/CssBaseline.d.ts +++ b/packages/material-ui/src/CssBaseline/CssBaseline.d.ts @@ -4,6 +4,7 @@ import { StyledComponentProps } from '@material-ui/core/styles'; export interface CssBaselineProps extends StyledComponentProps { /** * You can wrap a node. + * @default null */ children?: React.ReactNode; } diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.js b/packages/material-ui/src/CssBaseline/CssBaseline.js index 24bef3d3a51a8b..72187760ba77ac 100644 --- a/packages/material-ui/src/CssBaseline/CssBaseline.js +++ b/packages/material-ui/src/CssBaseline/CssBaseline.js @@ -59,6 +59,7 @@ CssBaseline.propTypes = { // ---------------------------------------------------------------------- /** * You can wrap a node. + * @default null */ children: PropTypes.node, }; diff --git a/packages/material-ui/src/Dialog/Dialog.d.ts b/packages/material-ui/src/Dialog/Dialog.d.ts index b36575f0ac103d..f64a1de8805deb 100644 --- a/packages/material-ui/src/Dialog/Dialog.d.ts +++ b/packages/material-ui/src/Dialog/Dialog.d.ts @@ -55,26 +55,31 @@ export interface DialogProps }; /** * If `true`, clicking the backdrop will not fire the `onClose` callback. + * @default false */ disableBackdropClick?: boolean; /** * If `true`, hitting escape will not fire the `onClose` callback. + * @default false */ disableEscapeKeyDown?: boolean; /** * If `true`, the dialog will be full-screen + * @default false */ fullScreen?: boolean; /** * If `true`, the dialog stretches to `maxWidth`. * * Notice that the dialog width grow is limited by the default margin. + * @default false */ 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`. + * @default 'sm' */ maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false; /** @@ -99,19 +104,23 @@ export interface DialogProps open: ModalProps['open']; /** * The component used to render the body of the dialog. + * @default Paper */ PaperComponent?: React.ComponentType; /** * Props applied to the [`Paper`](/api/paper/) element. + * @default {} */ PaperProps?: Partial; /** * Determine the container for scrolling the dialog. + * @default 'paper' */ 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. + * @default Fade */ TransitionComponent?: React.ComponentType< TransitionProps & { children?: React.ReactElement } @@ -119,6 +128,7 @@ export interface DialogProps /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. + * @default { enter: duration.enteringScreen, exit: duration.leavingScreen } */ transitionDuration?: TransitionProps['timeout']; /** diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js index ec84d72f500332..8aa7045e7dd9dd 100644 --- a/packages/material-ui/src/Dialog/Dialog.js +++ b/packages/material-ui/src/Dialog/Dialog.js @@ -277,26 +277,31 @@ Dialog.propTypes = { className: PropTypes.string, /** * If `true`, clicking the backdrop will not fire the `onClose` callback. + * @default false */ disableBackdropClick: PropTypes.bool, /** * If `true`, hitting escape will not fire the `onClose` callback. + * @default false */ disableEscapeKeyDown: PropTypes.bool, /** * If `true`, the dialog will be full-screen + * @default false */ fullScreen: PropTypes.bool, /** * If `true`, the dialog stretches to `maxWidth`. * * Notice that the dialog width grow is limited by the default margin. + * @default false */ fullWidth: PropTypes.bool, /** * Determine the max-width of the dialog. * The dialog width grows with the size of the screen. * Set to `false` to disable `maxWidth`. + * @default 'sm' */ maxWidth: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs', false]), /** @@ -321,24 +326,29 @@ Dialog.propTypes = { open: PropTypes.bool.isRequired, /** * The component used to render the body of the dialog. + * @default Paper */ PaperComponent: PropTypes.elementType, /** * Props applied to the [`Paper`](/api/paper/) element. + * @default {} */ PaperProps: PropTypes.object, /** * Determine the container for scrolling the dialog. + * @default 'paper' */ scroll: PropTypes.oneOf(['body', 'paper']), /** * The component used for the transition. * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + * @default Fade */ TransitionComponent: PropTypes.elementType, /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. + * @default { enter: duration.enteringScreen, exit: duration.leavingScreen } */ transitionDuration: PropTypes.oneOfType([ PropTypes.number, diff --git a/packages/material-ui/src/DialogActions/DialogActions.d.ts b/packages/material-ui/src/DialogActions/DialogActions.d.ts index b78045de77491b..60844eb107dca7 100644 --- a/packages/material-ui/src/DialogActions/DialogActions.d.ts +++ b/packages/material-ui/src/DialogActions/DialogActions.d.ts @@ -17,6 +17,7 @@ export interface DialogActionsProps extends StandardProps { props: P & { /** * Absolutely position the element. + * @default false */ absolute?: boolean; /** @@ -50,22 +51,27 @@ export interface DividerTypeMap

{ /** * If `true`, a vertical divider will have the correct height when used in flex container. * (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.) + * @default false */ flexItem?: boolean; /** * If `true`, the divider will have a lighter color. + * @default false */ light?: boolean; /** * The divider orientation. + * @default 'horizontal' */ orientation?: 'horizontal' | 'vertical'; /** * The text alignment. + * @default 'center' */ textAlign?: 'center' | 'right' | 'left'; /** * The variant to use. + * @default 'fullWidth' */ variant?: OverridableStringUnion; }; diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js index 16698f7bdd7212..f20d5b53cbd2bf 100644 --- a/packages/material-ui/src/Divider/Divider.js +++ b/packages/material-ui/src/Divider/Divider.js @@ -186,6 +186,7 @@ Divider.propTypes = { // ---------------------------------------------------------------------- /** * Absolutely position the element. + * @default false */ absolute: PropTypes.bool, /** @@ -208,14 +209,17 @@ Divider.propTypes = { /** * If `true`, a vertical divider will have the correct height when used in flex container. * (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.) + * @default false */ flexItem: PropTypes.bool, /** * If `true`, the divider will have a lighter color. + * @default false */ light: PropTypes.bool, /** * The divider orientation. + * @default 'horizontal' */ orientation: PropTypes.oneOf(['horizontal', 'vertical']), /** @@ -224,10 +228,12 @@ Divider.propTypes = { role: PropTypes.string, /** * The text alignment. + * @default 'center' */ textAlign: PropTypes.oneOf(['center', 'left', 'right']), /** * The variant to use. + * @default 'fullWidth' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['fullWidth', 'inset', 'middle']), diff --git a/packages/material-ui/src/Drawer/Drawer.d.ts b/packages/material-ui/src/Drawer/Drawer.d.ts index 95bab6681a55f9..9e147f140639e4 100644 --- a/packages/material-ui/src/Drawer/Drawer.d.ts +++ b/packages/material-ui/src/Drawer/Drawer.d.ts @@ -9,6 +9,7 @@ export interface DrawerProps extends StandardProps, 'open' | 'children'> { /** * Side from which the drawer will appear. + * @default 'left' */ anchor?: 'left' | 'top' | 'right' | 'bottom'; /** @@ -46,10 +47,12 @@ export interface DrawerProps }; /** * The elevation of the drawer. + * @default 16 */ elevation?: number; /** * Props applied to the [`Modal`](/api/modal/) element. + * @default {} */ ModalProps?: Partial; /** @@ -60,10 +63,12 @@ export interface DrawerProps onClose?: ModalProps['onClose']; /** * If `true`, the drawer is open. + * @default false */ open?: boolean; /** * Props applied to the [`Paper`](/api/paper/) element. + * @default {} */ PaperProps?: Partial; /** @@ -73,10 +78,12 @@ export interface DrawerProps /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. + * @default { enter: duration.enteringScreen, exit: duration.leavingScreen } */ transitionDuration?: TransitionProps['timeout']; /** * The variant to use. + * @default 'temporary' */ variant?: 'permanent' | 'persistent' | 'temporary'; } diff --git a/packages/material-ui/src/Drawer/Drawer.js b/packages/material-ui/src/Drawer/Drawer.js index 1a84e952de3189..1f2c6bb633f67a 100644 --- a/packages/material-ui/src/Drawer/Drawer.js +++ b/packages/material-ui/src/Drawer/Drawer.js @@ -206,6 +206,7 @@ Drawer.propTypes = { // ---------------------------------------------------------------------- /** * Side from which the drawer will appear. + * @default 'left' */ anchor: PropTypes.oneOf(['bottom', 'left', 'right', 'top']), /** @@ -226,10 +227,12 @@ Drawer.propTypes = { className: PropTypes.string, /** * The elevation of the drawer. + * @default 16 */ elevation: PropTypes.number, /** * Props applied to the [`Modal`](/api/modal/) element. + * @default {} */ ModalProps: PropTypes.object, /** @@ -240,10 +243,12 @@ Drawer.propTypes = { onClose: PropTypes.func, /** * If `true`, the drawer is open. + * @default false */ open: PropTypes.bool, /** * Props applied to the [`Paper`](/api/paper/) element. + * @default {} */ PaperProps: PropTypes.object, /** @@ -253,6 +258,7 @@ Drawer.propTypes = { /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. + * @default { enter: duration.enteringScreen, exit: duration.leavingScreen } */ transitionDuration: PropTypes.oneOfType([ PropTypes.number, @@ -264,6 +270,7 @@ Drawer.propTypes = { ]), /** * The variant to use. + * @default 'temporary' */ variant: PropTypes.oneOf(['permanent', 'persistent', 'temporary']), }; diff --git a/packages/material-ui/src/Fab/Fab.d.ts b/packages/material-ui/src/Fab/Fab.d.ts index 7e82747de49b2b..a90a15010619b4 100644 --- a/packages/material-ui/src/Fab/Fab.d.ts +++ b/packages/material-ui/src/Fab/Fab.d.ts @@ -41,14 +41,17 @@ export type FabTypeMap

= ExtendB }; /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'default' */ color?: PropTypes.Color; /** * If `true`, the button will be disabled. + * @default false */ disabled?: boolean; /** * If `true`, the keyboard focus ripple will be disabled. + * @default false */ disableFocusRipple?: boolean; /** @@ -63,10 +66,12 @@ export type FabTypeMap

= ExtendB /** * The size of the button. * `small` is equivalent to the dense button styling. + * @default 'large' */ size?: 'small' | 'medium' | 'large'; /** * The variant to use. + * @default 'circular' */ variant?: OverridableStringUnion; }; diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js index 43d94adb6d7d0d..412076e0b9e85a 100644 --- a/packages/material-ui/src/Fab/Fab.js +++ b/packages/material-ui/src/Fab/Fab.js @@ -195,6 +195,7 @@ Fab.propTypes = { className: PropTypes.string, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'default' */ color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']), /** @@ -204,10 +205,12 @@ Fab.propTypes = { component: PropTypes.elementType, /** * If `true`, the button will be disabled. + * @default false */ disabled: PropTypes.bool, /** * If `true`, the keyboard focus ripple will be disabled. + * @default false */ disableFocusRipple: PropTypes.bool, /** @@ -226,10 +229,12 @@ Fab.propTypes = { /** * The size of the button. * `small` is equivalent to the dense button styling. + * @default 'large' */ size: PropTypes.oneOf(['large', 'medium', 'small']), /** * The variant to use. + * @default 'circular' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['circular', 'extended']), diff --git a/packages/material-ui/src/Fade/Fade.d.ts b/packages/material-ui/src/Fade/Fade.d.ts index 21cd4d5469c083..4bdfe07c4f95b5 100644 --- a/packages/material-ui/src/Fade/Fade.d.ts +++ b/packages/material-ui/src/Fade/Fade.d.ts @@ -15,6 +15,10 @@ export interface FadeProps extends Omit { /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. + * @default { + * enter: duration.enteringScreen, + * exit: duration.leavingScreen, + * } */ timeout?: TransitionProps['timeout']; } diff --git a/packages/material-ui/src/Fade/Fade.js b/packages/material-ui/src/Fade/Fade.js index 23be27be595740..d66eb9b8568cc1 100644 --- a/packages/material-ui/src/Fade/Fade.js +++ b/packages/material-ui/src/Fade/Fade.js @@ -178,6 +178,10 @@ Fade.propTypes = { /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. + * @default { + * enter: duration.enteringScreen, + * exit: duration.leavingScreen, + * } */ timeout: PropTypes.oneOfType([ PropTypes.number, diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js index a4f7cb2f230587..8063c398c1adb0 100644 --- a/packages/material-ui/src/FilledInput/FilledInput.js +++ b/packages/material-ui/src/FilledInput/FilledInput.js @@ -231,6 +231,7 @@ FilledInput.propTypes = { error: PropTypes.bool, /** * If `true`, the input will take up the full width of its container. + * @default false */ fullWidth: PropTypes.bool, /** @@ -240,10 +241,12 @@ FilledInput.propTypes = { /** * The component used for the `input` element. * Either a string to use a HTML element or a component. + * @default 'input' */ inputComponent: PropTypes.elementType, /** * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. + * @default {} */ inputProps: PropTypes.object, /** @@ -265,6 +268,7 @@ FilledInput.propTypes = { minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * If `true`, a textarea element will be rendered. + * @default false */ multiline: PropTypes.bool, /** @@ -301,6 +305,7 @@ FilledInput.propTypes = { startAdornment: PropTypes.node, /** * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). + * @default 'text' */ type: PropTypes.string, /** diff --git a/packages/material-ui/src/FormControl/FormControl.d.ts b/packages/material-ui/src/FormControl/FormControl.d.ts index cffa9983ba8591..c2e635d09e7836 100644 --- a/packages/material-ui/src/FormControl/FormControl.d.ts +++ b/packages/material-ui/src/FormControl/FormControl.d.ts @@ -23,18 +23,22 @@ export interface FormControlTypeMap

}; /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' */ color?: 'primary' | 'secondary'; /** * If `true`, the label, input and helper text should be displayed in a disabled state. + * @default false */ disabled?: boolean; /** * If `true`, the label should be displayed in an error state. + * @default false */ error?: boolean; /** * If `true`, the component will take up the full width of its container. + * @default false */ fullWidth?: boolean; /** @@ -45,14 +49,17 @@ export interface FormControlTypeMap

* If `true`, the label will be hidden. * This is used to increase density for a `FilledInput`. * Be sure to add `aria-label` to the `input` element. + * @default false */ hiddenLabel?: boolean; /** * If `dense` or `normal`, will adjust vertical spacing of this and contained components. + * @default 'none' */ margin?: PropTypes.Margin; /** * If `true`, the label will indicate that the input is required. + * @default false */ required?: boolean; /** @@ -61,6 +68,7 @@ export interface FormControlTypeMap

size?: 'small' | 'medium'; /** * The variant to use. + * @default 'standard' */ variant?: 'standard' | 'outlined' | 'filled'; }; diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js index 2b37bfb2210037..9b334c48b5d533 100644 --- a/packages/material-ui/src/FormControl/FormControl.js +++ b/packages/material-ui/src/FormControl/FormControl.js @@ -219,6 +219,7 @@ FormControl.propTypes = { className: PropTypes.string, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' */ color: PropTypes.oneOf(['primary', 'secondary']), /** @@ -228,10 +229,12 @@ FormControl.propTypes = { component: PropTypes.elementType, /** * If `true`, the label, input and helper text should be displayed in a disabled state. + * @default false */ disabled: PropTypes.bool, /** * If `true`, the label should be displayed in an error state. + * @default false */ error: PropTypes.bool, /** @@ -240,20 +243,24 @@ FormControl.propTypes = { focused: PropTypes.bool, /** * If `true`, the component will take up the full width of its container. + * @default false */ fullWidth: PropTypes.bool, /** * If `true`, the label will be hidden. * This is used to increase density for a `FilledInput`. * Be sure to add `aria-label` to the `input` element. + * @default false */ hiddenLabel: PropTypes.bool, /** * If `dense` or `normal`, will adjust vertical spacing of this and contained components. + * @default 'none' */ margin: PropTypes.oneOf(['dense', 'none', 'normal']), /** * If `true`, the label will indicate that the input is required. + * @default false */ required: PropTypes.bool, /** @@ -262,6 +269,7 @@ FormControl.propTypes = { size: PropTypes.oneOf(['medium', 'small']), /** * The variant to use. + * @default 'standard' */ variant: PropTypes.oneOf(['filled', 'outlined', 'standard']), }; diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts b/packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts index 7b4cf3397ffc0f..b0c56effcf66df 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts @@ -42,6 +42,7 @@ export interface FormControlLabelProps label: React.ReactNode; /** * The position of the label. + * @default 'end' */ labelPlacement?: 'end' | 'start' | 'top' | 'bottom'; name?: string; diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js index 188d77c48e714a..1fe2dae0011f41 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js @@ -146,6 +146,7 @@ FormControlLabel.propTypes = { label: PropTypes.node, /** * The position of the label. + * @default 'end' */ labelPlacement: PropTypes.oneOf(['bottom', 'end', 'start', 'top']), /** diff --git a/packages/material-ui/src/FormGroup/FormGroup.d.ts b/packages/material-ui/src/FormGroup/FormGroup.d.ts index f567bea6064c09..3f118a55d17875 100644 --- a/packages/material-ui/src/FormGroup/FormGroup.d.ts +++ b/packages/material-ui/src/FormGroup/FormGroup.d.ts @@ -17,6 +17,7 @@ export interface FormGroupProps extends StandardProps { /** * Defines the `align-content` style property. * It's applied for all screen sizes. + * @default 'stretch' */ alignContent?: GridContentAlignment; /** * Defines the `align-items` style property. * It's applied for all screen sizes. + * @default 'stretch' */ alignItems?: GridItemsAlignment; /** @@ -104,61 +106,73 @@ export interface GridTypeMap

{ /** * If `true`, the component will have the flex *container* behavior. * You should be wrapping *items* with a *container*. + * @default false */ container?: boolean; /** * Defines the `flex-direction` style property. * It is applied for all screen sizes. + * @default 'row' */ direction?: GridDirection; /** * If `true`, the component will have the flex *item* behavior. * You should be wrapping *items* with a *container*. + * @default false */ item?: boolean; /** * Defines the `justify-content` style property. * It is applied for all screen sizes. + * @default 'flex-start' */ justifyContent?: GridJustification; /** * Defines the number of grids the component is going to use. * It's applied for the `lg` breakpoint and wider screens if not overridden. + * @default false */ lg?: boolean | GridSize; /** * Defines the number of grids the component is going to use. * It's applied for the `md` breakpoint and wider screens if not overridden. + * @default false */ md?: boolean | GridSize; /** * Defines the number of grids the component is going to use. * It's applied for the `sm` breakpoint and wider screens if not overridden. + * @default false */ sm?: boolean | GridSize; /** * Defines the space between the type `item` component. * It can only be used on a type `container` component. + * @default 0 */ spacing?: GridSpacing; /** * Defines the `flex-wrap` style property. * It's applied for all screen sizes. + * @default 'wrap' */ wrap?: GridWrap; /** * Defines the number of grids the component is going to use. * It's applied for the `xl` breakpoint and wider screens. + * @default false */ xl?: boolean | GridSize; /** * Defines the number of grids the component is going to use. * It's applied for all the screen sizes with the lowest priority. + * @default false */ xs?: boolean | GridSize; /** * If `true`, it sets `min-width: 0` on the item. * Refer to the limitations section of the documentation to better understand the use case. + * @default false */ zeroMinWidth?: boolean; }; diff --git a/packages/material-ui/src/Grid/Grid.js b/packages/material-ui/src/Grid/Grid.js index afd0d00765fa88..253ed3dbfd510a 100644 --- a/packages/material-ui/src/Grid/Grid.js +++ b/packages/material-ui/src/Grid/Grid.js @@ -255,6 +255,7 @@ Grid.propTypes = { /** * Defines the `align-content` style property. * It's applied for all screen sizes. + * @default 'stretch' */ alignContent: PropTypes.oneOf([ 'center', @@ -267,6 +268,7 @@ Grid.propTypes = { /** * Defines the `align-items` style property. * It's applied for all screen sizes. + * @default 'stretch' */ alignItems: PropTypes.oneOf(['baseline', 'center', 'flex-end', 'flex-start', 'stretch']), /** @@ -289,21 +291,25 @@ Grid.propTypes = { /** * If `true`, the component will have the flex *container* behavior. * You should be wrapping *items* with a *container*. + * @default false */ container: PropTypes.bool, /** * Defines the `flex-direction` style property. * It is applied for all screen sizes. + * @default 'row' */ direction: PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), /** * If `true`, the component will have the flex *item* behavior. * You should be wrapping *items* with a *container*. + * @default false */ item: PropTypes.bool, /** * Defines the `justify-content` style property. * It is applied for all screen sizes. + * @default 'flex-start' */ justifyContent: PropTypes.oneOf([ 'center', @@ -316,6 +322,7 @@ Grid.propTypes = { /** * Defines the number of grids the component is going to use. * It's applied for the `lg` breakpoint and wider screens if not overridden. + * @default false */ lg: PropTypes.oneOfType([ PropTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), @@ -324,6 +331,7 @@ Grid.propTypes = { /** * Defines the number of grids the component is going to use. * It's applied for the `md` breakpoint and wider screens if not overridden. + * @default false */ md: PropTypes.oneOfType([ PropTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), @@ -332,6 +340,7 @@ Grid.propTypes = { /** * Defines the number of grids the component is going to use. * It's applied for the `sm` breakpoint and wider screens if not overridden. + * @default false */ sm: PropTypes.oneOfType([ PropTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), @@ -340,16 +349,19 @@ Grid.propTypes = { /** * Defines the space between the type `item` component. * It can only be used on a type `container` component. + * @default 0 */ spacing: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]), /** * Defines the `flex-wrap` style property. * It's applied for all screen sizes. + * @default 'wrap' */ wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']), /** * Defines the number of grids the component is going to use. * It's applied for the `xl` breakpoint and wider screens. + * @default false */ xl: PropTypes.oneOfType([ PropTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), @@ -358,6 +370,7 @@ Grid.propTypes = { /** * Defines the number of grids the component is going to use. * It's applied for all the screen sizes with the lowest priority. + * @default false */ xs: PropTypes.oneOfType([ PropTypes.oneOf(['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]), @@ -366,6 +379,7 @@ Grid.propTypes = { /** * If `true`, it sets `min-width: 0` on the item. * Refer to the limitations section of the documentation to better understand the use case. + * @default false */ zeroMinWidth: PropTypes.bool, }; diff --git a/packages/material-ui/src/Grow/Grow.d.ts b/packages/material-ui/src/Grow/Grow.d.ts index 86022b4a0de57b..da92ebc9dc1625 100644 --- a/packages/material-ui/src/Grow/Grow.d.ts +++ b/packages/material-ui/src/Grow/Grow.d.ts @@ -17,6 +17,7 @@ export interface GrowProps extends Omit { * 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. + * @default 'auto' */ timeout?: TransitionProps['timeout'] | 'auto'; } diff --git a/packages/material-ui/src/Grow/Grow.js b/packages/material-ui/src/Grow/Grow.js index 6ab04f846ddbdf..f0fba17ecff809 100644 --- a/packages/material-ui/src/Grow/Grow.js +++ b/packages/material-ui/src/Grow/Grow.js @@ -231,6 +231,7 @@ Grow.propTypes = { * 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. + * @default 'auto' */ timeout: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), diff --git a/packages/material-ui/src/Hidden/Hidden.d.ts b/packages/material-ui/src/Hidden/Hidden.d.ts index 1b670ac5c9acf0..175c9789404122 100644 --- a/packages/material-ui/src/Hidden/Hidden.d.ts +++ b/packages/material-ui/src/Hidden/Hidden.d.ts @@ -9,6 +9,7 @@ export interface HiddenProps { /** * Specify which implementation to use. 'js' is the default, 'css' works better for * server-side rendering. + * @default 'js' */ implementation?: 'js' | 'css'; /** @@ -25,18 +26,22 @@ export interface HiddenProps { initialWidth?: Breakpoint; /** * If `true`, screens this size and down will be hidden. + * @default false */ lgDown?: boolean; /** * If `true`, screens this size and up will be hidden. + * @default false */ lgUp?: boolean; /** * If `true`, screens this size and down will be hidden. + * @default false */ mdDown?: boolean; /** * If `true`, screens this size and up will be hidden. + * @default false */ mdUp?: boolean; /** @@ -45,26 +50,32 @@ export interface HiddenProps { only?: Breakpoint | Breakpoint[]; /** * If `true`, screens this size and down will be hidden. + * @default false */ smDown?: boolean; /** * If `true`, screens this size and up will be hidden. + * @default false */ smUp?: boolean; /** * If `true`, screens this size and down will be hidden. + * @default false */ xlDown?: boolean; /** * If `true`, screens this size and up will be hidden. + * @default false */ xlUp?: boolean; /** * If `true`, screens this size and down will be hidden. + * @default false */ xsDown?: boolean; /** * If `true`, screens this size and up will be hidden. + * @default false */ xsUp?: boolean; } diff --git a/packages/material-ui/src/Hidden/Hidden.js b/packages/material-ui/src/Hidden/Hidden.js index e187e882b638eb..8ce5ca862f12c9 100644 --- a/packages/material-ui/src/Hidden/Hidden.js +++ b/packages/material-ui/src/Hidden/Hidden.js @@ -69,6 +69,7 @@ Hidden.propTypes = { /** * Specify which implementation to use. 'js' is the default, 'css' works better for * server-side rendering. + * @default 'js' */ implementation: PropTypes.oneOf(['css', 'js']), /** @@ -85,18 +86,22 @@ Hidden.propTypes = { initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), /** * If `true`, screens this size and down will be hidden. + * @default false */ lgDown: PropTypes.bool, /** * If `true`, screens this size and up will be hidden. + * @default false */ lgUp: PropTypes.bool, /** * If `true`, screens this size and down will be hidden. + * @default false */ mdDown: PropTypes.bool, /** * If `true`, screens this size and up will be hidden. + * @default false */ mdUp: PropTypes.bool, /** @@ -108,26 +113,32 @@ Hidden.propTypes = { ]), /** * If `true`, screens this size and down will be hidden. + * @default false */ smDown: PropTypes.bool, /** * If `true`, screens this size and up will be hidden. + * @default false */ smUp: PropTypes.bool, /** * If `true`, screens this size and down will be hidden. + * @default false */ xlDown: PropTypes.bool, /** * If `true`, screens this size and up will be hidden. + * @default false */ xlUp: PropTypes.bool, /** * If `true`, screens this size and down will be hidden. + * @default false */ xsDown: PropTypes.bool, /** * If `true`, screens this size and up will be hidden. + * @default false */ xsUp: PropTypes.bool, }; diff --git a/packages/material-ui/src/Icon/Icon.d.ts b/packages/material-ui/src/Icon/Icon.d.ts index 5da1c71da8a99b..4542e18ef82407 100644 --- a/packages/material-ui/src/Icon/Icon.d.ts +++ b/packages/material-ui/src/Icon/Icon.d.ts @@ -33,10 +33,12 @@ export interface IconTypeMap

{ }; /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'inherit' */ color?: Exclude | 'action' | 'disabled' | 'error'; /** * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. + * @default 'default' */ fontSize?: 'inherit' | 'default' | 'small' | 'large'; }; diff --git a/packages/material-ui/src/Icon/Icon.js b/packages/material-ui/src/Icon/Icon.js index a1397cd695dfee..a83f9712c08a79 100644 --- a/packages/material-ui/src/Icon/Icon.js +++ b/packages/material-ui/src/Icon/Icon.js @@ -98,6 +98,7 @@ Icon.propTypes = { className: PropTypes.string, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'inherit' */ color: PropTypes.oneOf(['action', 'disabled', 'error', 'inherit', 'primary', 'secondary']), /** @@ -107,6 +108,7 @@ Icon.propTypes = { component: PropTypes.elementType, /** * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. + * @default 'default' */ fontSize: PropTypes.oneOf(['default', 'inherit', 'large', 'small']), }; diff --git a/packages/material-ui/src/IconButton/IconButton.d.ts b/packages/material-ui/src/IconButton/IconButton.d.ts index 1b8b7c81f1e3e0..5b81f56e45cf17 100644 --- a/packages/material-ui/src/IconButton/IconButton.d.ts +++ b/packages/material-ui/src/IconButton/IconButton.d.ts @@ -36,14 +36,17 @@ export type IconButtonTypeMap< }; /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'default' */ color?: PropTypes.Color; /** * If `true`, the button will be disabled. + * @default false */ disabled?: boolean; /** * If `true`, the keyboard focus ripple will be disabled. + * @default false */ disableFocusRipple?: boolean; /** @@ -51,11 +54,13 @@ export type IconButtonTypeMap< * side (this is often helpful for aligning the left or right * side of the icon with content above or below, without ruining the border * size and shape). + * @default false */ edge?: 'start' | 'end' | false; /** * The size of the button. * `small` is equivalent to the dense button styling. + * @default 'medium' */ size?: 'small' | 'medium'; }; diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index 95be8c2ee84a62..4335eef644bb9d 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -166,14 +166,17 @@ IconButton.propTypes = { className: PropTypes.string, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'default' */ color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']), /** * If `true`, the button will be disabled. + * @default false */ disabled: PropTypes.bool, /** * If `true`, the keyboard focus ripple will be disabled. + * @default false */ disableFocusRipple: PropTypes.bool, /** @@ -189,11 +192,13 @@ IconButton.propTypes = { * side (this is often helpful for aligning the left or right * side of the icon with content above or below, without ruining the border * size and shape). + * @default false */ edge: PropTypes.oneOf(['end', 'start', false]), /** * The size of the button. * `small` is equivalent to the dense button styling. + * @default 'medium' */ size: PropTypes.oneOf(['medium', 'small']), }; diff --git a/packages/material-ui/src/ImageList/ImageList.d.ts b/packages/material-ui/src/ImageList/ImageList.d.ts index 0e6d3bcff93264..f51477c899ce73 100644 --- a/packages/material-ui/src/ImageList/ImageList.d.ts +++ b/packages/material-ui/src/ImageList/ImageList.d.ts @@ -6,6 +6,7 @@ export interface ImageListTypeMap

{ /** * Number of px for one cell height. * You can set `'auto'` if you want to let the children determine the height. + * @default 180 */ cellHeight?: number | 'auto'; /** @@ -21,10 +22,12 @@ export interface ImageListTypeMap

{ }; /** * Number of columns. + * @default 2 */ cols?: number; /** * Number of px for the spacing between tiles. + * @default 4 */ spacing?: number; }; diff --git a/packages/material-ui/src/ImageList/ImageList.js b/packages/material-ui/src/ImageList/ImageList.js index 0a043f88f34da5..b6f4dc91bd3749 100644 --- a/packages/material-ui/src/ImageList/ImageList.js +++ b/packages/material-ui/src/ImageList/ImageList.js @@ -76,6 +76,7 @@ ImageList.propTypes = { /** * Number of px for one cell height. * You can set `'auto'` if you want to let the children determine the height. + * @default 180 */ cellHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]), /** @@ -92,6 +93,7 @@ ImageList.propTypes = { className: PropTypes.string, /** * Number of columns. + * @default 2 */ cols: PropTypes.number, /** @@ -101,6 +103,7 @@ ImageList.propTypes = { component: PropTypes.elementType, /** * Number of px for the spacing between tiles. + * @default 4 */ spacing: PropTypes.number, /** diff --git a/packages/material-ui/src/ImageListItem/ImageListItem.d.ts b/packages/material-ui/src/ImageListItem/ImageListItem.d.ts index 217aa7d9ebe222..63bef9b7ffac74 100644 --- a/packages/material-ui/src/ImageListItem/ImageListItem.d.ts +++ b/packages/material-ui/src/ImageListItem/ImageListItem.d.ts @@ -11,10 +11,12 @@ export interface ImageListItemTypeMap

; /** * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. + * @default {} */ inputProps?: InputBaseComponentProps; /** @@ -114,6 +117,7 @@ export interface InputBaseProps margin?: 'dense' | 'none'; /** * If `true`, a textarea element will be rendered. + * @default false */ multiline?: boolean; /** @@ -176,6 +180,7 @@ export interface InputBaseProps startAdornment?: React.ReactNode; /** * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). + * @default 'text' */ type?: string; /** diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js index ef1133c66cb0e7..e90471015f70fe 100644 --- a/packages/material-ui/src/InputBase/InputBase.js +++ b/packages/material-ui/src/InputBase/InputBase.js @@ -530,6 +530,7 @@ InputBase.propTypes = { error: PropTypes.bool, /** * If `true`, the input will take up the full width of its container. + * @default false */ fullWidth: PropTypes.bool, /** @@ -539,10 +540,12 @@ InputBase.propTypes = { /** * The component used for the `input` element. * Either a string to use a HTML element or a component. + * @default 'input' */ inputComponent: PropTypes.elementType, /** * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. + * @default {} */ inputProps: PropTypes.object, /** @@ -564,6 +567,7 @@ InputBase.propTypes = { minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * If `true`, a textarea element will be rendered. + * @default false */ multiline: PropTypes.bool, /** @@ -626,6 +630,7 @@ InputBase.propTypes = { startAdornment: PropTypes.node, /** * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). + * @default 'text' */ type: PropTypes.string, /** diff --git a/packages/material-ui/src/InputLabel/InputLabel.d.ts b/packages/material-ui/src/InputLabel/InputLabel.d.ts index 5e540cc3dbc532..e6064b4033deff 100644 --- a/packages/material-ui/src/InputLabel/InputLabel.d.ts +++ b/packages/material-ui/src/InputLabel/InputLabel.d.ts @@ -39,6 +39,7 @@ export interface InputLabelProps extends StandardProps { color?: FormLabelProps['color']; /** * If `true`, the transition animation is disabled. + * @default false */ disableAnimation?: boolean; /** diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js index d3a5fac55d626d..35bd4080b776e4 100644 --- a/packages/material-ui/src/InputLabel/InputLabel.js +++ b/packages/material-ui/src/InputLabel/InputLabel.js @@ -156,6 +156,7 @@ InputLabel.propTypes = { color: PropTypes.oneOf(['primary', 'secondary']), /** * If `true`, the transition animation is disabled. + * @default false */ disableAnimation: PropTypes.bool, /** diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.d.ts b/packages/material-ui/src/LinearProgress/LinearProgress.d.ts index e91bcb39d54a8a..86b7ffede9f935 100644 --- a/packages/material-ui/src/LinearProgress/LinearProgress.d.ts +++ b/packages/material-ui/src/LinearProgress/LinearProgress.d.ts @@ -46,6 +46,7 @@ export interface LinearProgressProps }; /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' */ color?: 'primary' | 'secondary'; /** @@ -61,6 +62,7 @@ export interface LinearProgressProps /** * The variant to use. * Use indeterminate or query when there is no progress value. + * @default 'indeterminate' */ variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query'; } diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.js b/packages/material-ui/src/LinearProgress/LinearProgress.js index 7214b4b0ae8537..7a809f78e3d31d 100644 --- a/packages/material-ui/src/LinearProgress/LinearProgress.js +++ b/packages/material-ui/src/LinearProgress/LinearProgress.js @@ -272,6 +272,7 @@ LinearProgress.propTypes = { className: PropTypes.string, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' */ color: PropTypes.oneOf(['primary', 'secondary']), /** @@ -287,6 +288,7 @@ LinearProgress.propTypes = { /** * The variant to use. * Use indeterminate or query when there is no progress value. + * @default 'indeterminate' */ variant: PropTypes.oneOf(['buffer', 'determinate', 'indeterminate', 'query']), }; diff --git a/packages/material-ui/src/Link/Link.d.ts b/packages/material-ui/src/Link/Link.d.ts index 643af07607359f..0934774a4adc2e 100644 --- a/packages/material-ui/src/Link/Link.d.ts +++ b/packages/material-ui/src/Link/Link.d.ts @@ -28,6 +28,7 @@ export interface LinkTypeMap

{ }; /** * The color of the link. + * @default 'primary' */ color?: TypographyProps['color']; /** @@ -36,10 +37,12 @@ export interface LinkTypeMap

{ TypographyClasses?: TypographyProps['classes']; /** * Controls when the link should have an underline. + * @default 'hover' */ underline?: 'none' | 'hover' | 'always'; /** * Applies the theme typography styles. + * @default 'inherit' */ variant?: TypographyProps['variant']; }; @@ -62,7 +65,7 @@ declare const Link: OverridableComponent; export type LinkClassKey = keyof NonNullable; -export type LinkBaseProps = React.AnchorHTMLAttributes & +export type LinkBaseProps = Omit, 'color'> & Omit; export type LinkProps< diff --git a/packages/material-ui/src/Link/Link.js b/packages/material-ui/src/Link/Link.js index 9d89bfe794ba59..90d0469c4fd3b8 100644 --- a/packages/material-ui/src/Link/Link.js +++ b/packages/material-ui/src/Link/Link.js @@ -137,6 +137,7 @@ Link.propTypes = { className: PropTypes.string, /** * The color of the link. + * @default 'primary' */ color: PropTypes.oneOf([ 'error', @@ -166,10 +167,12 @@ Link.propTypes = { TypographyClasses: PropTypes.object, /** * Controls when the link should have an underline. + * @default 'hover' */ underline: PropTypes.oneOf(['always', 'hover', 'none']), /** * Applies the theme typography styles. + * @default 'inherit' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf([ diff --git a/packages/material-ui/src/List/List.d.ts b/packages/material-ui/src/List/List.d.ts index 7b5dc6c7fe7383..b932b3584ae18e 100644 --- a/packages/material-ui/src/List/List.d.ts +++ b/packages/material-ui/src/List/List.d.ts @@ -24,10 +24,12 @@ export interface ListTypeMap

{ * If `true`, compact vertical padding designed for keyboard and mouse input will be used for * the list and list items. * The prop is available to descendant components as the `dense` context. + * @default false */ dense?: boolean; /** * If `true`, vertical padding will be removed from the list. + * @default false */ disablePadding?: boolean; /** diff --git a/packages/material-ui/src/List/List.js b/packages/material-ui/src/List/List.js index 4d922f1bcc93f0..d43c4ad4189f77 100644 --- a/packages/material-ui/src/List/List.js +++ b/packages/material-ui/src/List/List.js @@ -87,10 +87,12 @@ List.propTypes = { * If `true`, compact vertical padding designed for keyboard and mouse input will be used for * the list and list items. * The prop is available to descendant components as the `dense` context. + * @default false */ dense: PropTypes.bool, /** * If `true`, vertical padding will be removed from the list. + * @default false */ disablePadding: PropTypes.bool, /** diff --git a/packages/material-ui/src/ListItem/ListItem.d.ts b/packages/material-ui/src/ListItem/ListItem.d.ts index f14740d11192fa..a1e5dc6878d4fb 100644 --- a/packages/material-ui/src/ListItem/ListItem.d.ts +++ b/packages/material-ui/src/ListItem/ListItem.d.ts @@ -6,18 +6,15 @@ export interface ListItemTypeMap { props: P & { /** * Defines the `align-items` style property. + * @default 'center' */ alignItems?: 'flex-start' | 'center'; /** * If `true`, the list item will be focused during the first mount. * Focus will also be triggered if the value changes from false to true. + * @default false */ autoFocus?: boolean; - /** - * If `true`, the list item will be a button (using `ButtonBase`). Props intended - * for `ButtonBase` can then be applied to `ListItem`. - */ - button?: boolean; /** * The content of the component. If a `ListItemSecondaryAction` is used it must * be the last child. @@ -52,30 +49,37 @@ export interface ListItemTypeMap { }; /** * The container component used when a `ListItemSecondaryAction` is the last child. + * @default 'li' */ ContainerComponent?: React.ElementType>; /** * Props applied to the container component if used. + * @default {} */ ContainerProps?: React.HTMLAttributes; /** * If `true`, compact vertical padding designed for keyboard and mouse input will be used. + * @default false */ dense?: boolean; /** * If `true`, the list item will be disabled. + * @default false */ disabled?: boolean; /** * If `true`, the left and right padding is removed. + * @default false */ disableGutters?: boolean; /** * If `true`, a 1px light border is added to the bottom of the list item. + * @default false */ divider?: boolean; /** * Use to apply selected styling. + * @default false */ selected?: boolean; }; @@ -93,8 +97,32 @@ export interface ListItemTypeMap { * * - [ListItem API](https://material-ui.com/api/list-item/) */ -declare const ListItem: OverridableComponent> & - ExtendButtonBase>; +declare const ListItem: OverridableComponent< + ListItemTypeMap< + { + /** + * If `true`, the list item will be a button (using `ButtonBase`). Props intended + * for `ButtonBase` can then be applied to `ListItem`. + * @default false + */ + button?: false; + }, + 'li' + > +> & + ExtendButtonBase< + ListItemTypeMap< + { + /** + * If `true`, the list item will be a button (using `ButtonBase`). Props intended + * for `ButtonBase` can then be applied to `ListItem`. + * @default false + */ + button: true; + }, + 'div' + > + >; export type ListItemClassKey = keyof NonNullable; diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js index e5fd14c197a4d5..8a77bd44527807 100644 --- a/packages/material-ui/src/ListItem/ListItem.js +++ b/packages/material-ui/src/ListItem/ListItem.js @@ -219,16 +219,19 @@ ListItem.propTypes = { // ---------------------------------------------------------------------- /** * Defines the `align-items` style property. + * @default 'center' */ alignItems: PropTypes.oneOf(['center', 'flex-start']), /** * If `true`, the list item will be focused during the first mount. * Focus will also be triggered if the value changes from false to true. + * @default false */ autoFocus: PropTypes.bool, /** * If `true`, the list item will be a button (using `ButtonBase`). Props intended * for `ButtonBase` can then be applied to `ListItem`. + * @default false */ button: PropTypes.bool, /** @@ -274,26 +277,32 @@ ListItem.propTypes = { component: PropTypes.elementType, /** * The container component used when a `ListItemSecondaryAction` is the last child. + * @default 'li' */ ContainerComponent: elementTypeAcceptingRef, /** * Props applied to the container component if used. + * @default {} */ ContainerProps: PropTypes.object, /** * If `true`, compact vertical padding designed for keyboard and mouse input will be used. + * @default false */ dense: PropTypes.bool, /** * If `true`, the list item will be disabled. + * @default false */ disabled: PropTypes.bool, /** * If `true`, the left and right padding is removed. + * @default false */ disableGutters: PropTypes.bool, /** * If `true`, a 1px light border is added to the bottom of the list item. + * @default false */ divider: PropTypes.bool, /** @@ -302,6 +311,7 @@ ListItem.propTypes = { focusVisibleClassName: PropTypes.string, /** * Use to apply selected styling. + * @default false */ selected: PropTypes.bool, }; diff --git a/packages/material-ui/src/ListItemText/ListItemText.d.ts b/packages/material-ui/src/ListItemText/ListItemText.d.ts index 9d60097bd4594d..0840ca96b2c16b 100644 --- a/packages/material-ui/src/ListItemText/ListItemText.d.ts +++ b/packages/material-ui/src/ListItemText/ListItemText.d.ts @@ -32,11 +32,13 @@ export interface ListItemTextProps< * This can be useful to render an alternative Typography variant by wrapping * the `children` (or `primary`) text, and optional `secondary` text * with the Typography component. + * @default false */ disableTypography?: boolean; /** * If `true`, the children will be indented. * This should be used if there is no left avatar or left icon. + * @default false */ inset?: boolean; /** diff --git a/packages/material-ui/src/ListItemText/ListItemText.js b/packages/material-ui/src/ListItemText/ListItemText.js index d1689ed3db848f..068922fa511f7e 100644 --- a/packages/material-ui/src/ListItemText/ListItemText.js +++ b/packages/material-ui/src/ListItemText/ListItemText.js @@ -117,11 +117,13 @@ ListItemText.propTypes = { * This can be useful to render an alternative Typography variant by wrapping * the `children` (or `primary`) text, and optional `secondary` text * with the Typography component. + * @default false */ disableTypography: PropTypes.bool, /** * If `true`, the children will be indented. * This should be used if there is no left avatar or left icon. + * @default false */ inset: PropTypes.bool, /** diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.d.ts b/packages/material-ui/src/ListSubheader/ListSubheader.d.ts index 404c57c63c592e..0390498718b8d3 100644 --- a/packages/material-ui/src/ListSubheader/ListSubheader.d.ts +++ b/packages/material-ui/src/ListSubheader/ListSubheader.d.ts @@ -26,18 +26,22 @@ export interface ListSubheaderTypeMap

; /** @@ -58,16 +61,19 @@ export interface MenuProps extends StandardProps, 'children'> { /** * A backdrop component. This prop enables custom backdrop rendering. + * @default SimpleBackdrop */ BackdropComponent?: React.ElementType; /** @@ -19,6 +20,7 @@ export interface ModalProps children: React.ReactElement; /** * When set to true the Modal waits until a nested Transition is completed before closing. + * @default false */ closeAfterTransition?: boolean; /** @@ -36,10 +38,12 @@ export interface ModalProps * * Generally this should never be set to `true` as it makes the modal less * accessible to assistive technologies, like screen readers. + * @default false */ disableAutoFocus?: boolean; /** * If `true`, clicking the backdrop will not fire `onClose`. + * @default false */ disableBackdropClick?: boolean; /** @@ -47,33 +51,40 @@ export interface ModalProps * * Generally this should never be set to `true` as it makes the modal less * accessible to assistive technologies, like screen readers. + * @default false */ disableEnforceFocus?: boolean; /** * If `true`, hitting escape will not fire `onClose`. + * @default false */ disableEscapeKeyDown?: boolean; /** * The `children` will be inside the DOM hierarchy of the parent component. + * @default false */ disablePortal?: PortalProps['disablePortal']; /** * If `true`, the modal will not restore focus to previously focused element once * modal is hidden. + * @default false */ disableRestoreFocus?: boolean; /** * Disable the scroll lock behavior. + * @default false */ disableScrollLock?: boolean; /** * If `true`, the backdrop is not rendered. + * @default false */ hideBackdrop?: boolean; /** * Always keep the children in the DOM. * This prop can be useful in SEO situation or * when you want to maximize the responsiveness of the Modal. + * @default false */ keepMounted?: boolean; /** diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js index 3c6701f8e10d14..a2ff1d66bfd9e7 100644 --- a/packages/material-ui/src/Modal/Modal.js +++ b/packages/material-ui/src/Modal/Modal.js @@ -265,6 +265,7 @@ Modal.propTypes = { // ---------------------------------------------------------------------- /** * A backdrop component. This prop enables custom backdrop rendering. + * @default SimpleBackdrop */ BackdropComponent: PropTypes.elementType, /** @@ -277,6 +278,7 @@ Modal.propTypes = { children: elementAcceptingRef.isRequired, /** * When set to true the Modal waits until a nested Transition is completed before closing. + * @default false */ closeAfterTransition: PropTypes.bool, /** @@ -297,10 +299,12 @@ Modal.propTypes = { * * Generally this should never be set to `true` as it makes the modal less * accessible to assistive technologies, like screen readers. + * @default false */ disableAutoFocus: PropTypes.bool, /** * If `true`, clicking the backdrop will not fire `onClose`. + * @default false */ disableBackdropClick: PropTypes.bool, /** @@ -308,33 +312,40 @@ Modal.propTypes = { * * Generally this should never be set to `true` as it makes the modal less * accessible to assistive technologies, like screen readers. + * @default false */ disableEnforceFocus: PropTypes.bool, /** * If `true`, hitting escape will not fire `onClose`. + * @default false */ disableEscapeKeyDown: PropTypes.bool, /** * The `children` will be inside the DOM hierarchy of the parent component. + * @default false */ disablePortal: PropTypes.bool, /** * If `true`, the modal will not restore focus to previously focused element once * modal is hidden. + * @default false */ disableRestoreFocus: PropTypes.bool, /** * Disable the scroll lock behavior. + * @default false */ disableScrollLock: PropTypes.bool, /** * If `true`, the backdrop is not rendered. + * @default false */ hideBackdrop: PropTypes.bool, /** * Always keep the children in the DOM. * This prop can be useful in SEO situation or * when you want to maximize the responsiveness of the Modal. + * @default false */ keepMounted: PropTypes.bool, /** diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.d.ts b/packages/material-ui/src/NativeSelect/NativeSelect.d.ts index edd9425abbe501..a069ed3a68a4ef 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.d.ts +++ b/packages/material-ui/src/NativeSelect/NativeSelect.d.ts @@ -39,10 +39,12 @@ export interface NativeSelectProps }; /** * The icon that displays the arrow. + * @default ArrowDropDownIcon */ IconComponent?: React.ElementType; /** * An `Input` element; does not have to be a material-ui specific `Input`. + * @default */ input?: React.ReactElement; /** diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js index 623df659269bd4..393d2386027706 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.js +++ b/packages/material-ui/src/NativeSelect/NativeSelect.js @@ -158,10 +158,12 @@ NativeSelect.propTypes = { classes: PropTypes.object, /** * The icon that displays the arrow. + * @default ArrowDropDownIcon */ IconComponent: PropTypes.elementType, /** * An `Input` element; does not have to be a material-ui specific `Input`. + * @default */ input: PropTypes.element, /** diff --git a/packages/material-ui/src/NoSsr/NoSsr.d.ts b/packages/material-ui/src/NoSsr/NoSsr.d.ts index 2ff0253df098b1..a233440dca05c5 100644 --- a/packages/material-ui/src/NoSsr/NoSsr.d.ts +++ b/packages/material-ui/src/NoSsr/NoSsr.d.ts @@ -8,10 +8,12 @@ export interface NoSsrProps { /** * 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. + * @default false */ defer?: boolean; /** * The fallback content to display. + * @default null */ fallback?: React.ReactNode; } diff --git a/packages/material-ui/src/NoSsr/NoSsr.js b/packages/material-ui/src/NoSsr/NoSsr.js index 87bfd7dd696fe6..c4a1e0a1904e1a 100644 --- a/packages/material-ui/src/NoSsr/NoSsr.js +++ b/packages/material-ui/src/NoSsr/NoSsr.js @@ -44,10 +44,12 @@ NoSsr.propTypes = { /** * 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. + * @default false */ defer: PropTypes.bool, /** * The fallback content to display. + * @default null */ fallback: PropTypes.node, }; diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.d.ts b/packages/material-ui/src/OutlinedInput/OutlinedInput.d.ts index 447d3295745227..677ad116d8350e 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.d.ts +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.d.ts @@ -46,6 +46,7 @@ export interface OutlinedInputProps extends StandardProps { /** * The width of the label. Is ignored if `label` is provided. Prefer `label` * if the input label appears with a strike through. + * @default 0 */ labelWidth?: number; /** diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js index 479a719fd55f43..cb91e91861ba53 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js @@ -183,6 +183,7 @@ OutlinedInput.propTypes = { error: PropTypes.bool, /** * If `true`, the input will take up the full width of its container. + * @default false */ fullWidth: PropTypes.bool, /** @@ -192,10 +193,12 @@ OutlinedInput.propTypes = { /** * The component used for the `input` element. * Either a string to use a HTML element or a component. + * @default 'input' */ inputComponent: PropTypes.elementType, /** * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. + * @default {} */ inputProps: PropTypes.object, /** @@ -210,6 +213,7 @@ OutlinedInput.propTypes = { /** * The width of the label. Is ignored if `label` is provided. Prefer `label` * if the input label appears with a strike through. + * @default 0 */ labelWidth: PropTypes.number, /** @@ -227,6 +231,7 @@ OutlinedInput.propTypes = { minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * If `true`, a textarea element will be rendered. + * @default false */ multiline: PropTypes.bool, /** @@ -267,6 +272,7 @@ OutlinedInput.propTypes = { startAdornment: PropTypes.node, /** * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). + * @default 'text' */ type: PropTypes.string, /** diff --git a/packages/material-ui/src/Paper/Paper.d.ts b/packages/material-ui/src/Paper/Paper.d.ts index ed3eab08b2d923..e9da3c6df43d39 100644 --- a/packages/material-ui/src/Paper/Paper.d.ts +++ b/packages/material-ui/src/Paper/Paper.d.ts @@ -56,14 +56,17 @@ export interface PaperProps extends StandardProps; } diff --git a/packages/material-ui/src/Paper/Paper.js b/packages/material-ui/src/Paper/Paper.js index 0db8e9e27ca08f..b1431b60d4333f 100644 --- a/packages/material-ui/src/Paper/Paper.js +++ b/packages/material-ui/src/Paper/Paper.js @@ -99,6 +99,7 @@ Paper.propTypes = { /** * Shadow depth, corresponds to `dp` in the spec. * It accepts values between 0 and 24 inclusive. + * @default 1 */ elevation: chainPropTypes(PropTypes.number, (props) => { const { classes, elevation } = props; @@ -113,10 +114,12 @@ Paper.propTypes = { }), /** * If `true`, rounded corners are disabled. + * @default false */ square: PropTypes.bool, /** * The variant to use. + * @default 'elevation' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['elevation', 'outlined']), diff --git a/packages/material-ui/src/Popover/Popover.d.ts b/packages/material-ui/src/Popover/Popover.d.ts index 2c7052317567fa..d715359ea2aaaf 100644 --- a/packages/material-ui/src/Popover/Popover.d.ts +++ b/packages/material-ui/src/Popover/Popover.d.ts @@ -36,6 +36,10 @@ export interface PopoverProps * Options: * vertical: [top, center, bottom]; * horizontal: [left, center, right]. + * @default { + * vertical: 'top', + * horizontal: 'left', + * } */ anchorOrigin?: PopoverOrigin; /** @@ -48,6 +52,7 @@ export interface PopoverProps /** * This determines which anchor prop to refer to to set * the position of the popover. + * @default 'anchorEl' */ anchorReference?: PopoverReference; /** @@ -73,6 +78,7 @@ export interface PopoverProps container?: ModalProps['container']; /** * The elevation of the popover. + * @default 8 */ elevation?: number; /** @@ -86,6 +92,7 @@ export interface PopoverProps getContentAnchorEl?: null | ((element: Element) => Element); /** * Specifies how close to the edge of the window the popover can appear. + * @default 16 */ marginThreshold?: number; onClose?: ModalProps['onClose']; @@ -95,6 +102,7 @@ export interface PopoverProps open: boolean; /** * Props applied to the [`Paper`](/api/paper/) element. + * @default {} */ PaperProps?: Partial; /** @@ -104,22 +112,29 @@ export interface PopoverProps * Options: * vertical: [top, center, bottom, x(px)]; * horizontal: [left, center, right, x(px)]. + * @default { + * vertical: 'top', + * horizontal: 'left', + * } */ transformOrigin?: PopoverOrigin; /** * The component used for the transition. * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + * @default Grow */ TransitionComponent?: React.ComponentType< TransitionProps & { children?: React.ReactElement } >; /** * Set to 'auto' to automatically calculate transition time based on height. + * @default 'auto' */ transitionDuration?: TransitionProps['timeout'] | 'auto'; /** * Props applied to the transition element. * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component. + * @default {} */ TransitionProps?: TransitionProps; } diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index eddaeb72a600e6..0c9deed3bd8259 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -464,6 +464,10 @@ Popover.propTypes = { * Options: * vertical: [top, center, bottom]; * horizontal: [left, center, right]. + * @default { + * vertical: 'top', + * horizontal: 'left', + * } */ anchorOrigin: PropTypes.shape({ horizontal: PropTypes.oneOfType([ @@ -486,6 +490,7 @@ Popover.propTypes = { /** * This determines which anchor prop to refer to to set * the position of the popover. + * @default 'anchorEl' */ anchorReference: PropTypes.oneOf(['anchorEl', 'anchorPosition', 'none']), /** @@ -513,6 +518,7 @@ Popover.propTypes = { ]), /** * The elevation of the popover. + * @default 8 */ elevation: PropTypes.number, /** @@ -526,6 +532,7 @@ Popover.propTypes = { getContentAnchorEl: PropTypes.func, /** * Specifies how close to the edge of the window the popover can appear. + * @default 16 */ marginThreshold: PropTypes.number, /** @@ -539,6 +546,7 @@ Popover.propTypes = { open: PropTypes.bool.isRequired, /** * Props applied to the [`Paper`](/api/paper/) element. + * @default {} */ PaperProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({ component: elementTypeAcceptingRef, @@ -550,6 +558,10 @@ Popover.propTypes = { * Options: * vertical: [top, center, bottom, x(px)]; * horizontal: [left, center, right, x(px)]. + * @default { + * vertical: 'top', + * horizontal: 'left', + * } */ transformOrigin: PropTypes.shape({ horizontal: PropTypes.oneOfType([ @@ -562,10 +574,12 @@ Popover.propTypes = { /** * The component used for the transition. * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + * @default Grow */ TransitionComponent: PropTypes.elementType, /** * Set to 'auto' to automatically calculate transition time based on height. + * @default 'auto' */ transitionDuration: PropTypes.oneOfType([ PropTypes.oneOf(['auto']), @@ -579,6 +593,7 @@ Popover.propTypes = { /** * Props applied to the transition element. * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component. + * @default {} */ TransitionProps: PropTypes.object, }; diff --git a/packages/material-ui/src/Popper/Popper.d.ts b/packages/material-ui/src/Popper/Popper.d.ts index f3f9c81d9fd038..b69b80976a47e9 100644 --- a/packages/material-ui/src/Popper/Popper.d.ts +++ b/packages/material-ui/src/Popper/Popper.d.ts @@ -49,12 +49,14 @@ export interface PopperProps extends Omit, container?: PortalProps['container']; /** * The `children` will be inside the DOM hierarchy of the parent component. + * @default false */ disablePortal?: PortalProps['disablePortal']; /** * Always keep the children in the DOM. * This prop can be useful in SEO situation or * when you want to maximize the responsiveness of the Popper. + * @default false */ keepMounted?: boolean; /** @@ -73,10 +75,12 @@ export interface PopperProps extends Omit, open: boolean; /** * Popper placement. + * @default 'bottom' */ placement?: PopperPlacementType; /** * Options provided to the [`popper.js`](https://popper.js.org/docs/v1/) instance. + * @default {} */ popperOptions?: object; /** @@ -85,6 +89,7 @@ export interface PopperProps extends Omit, popperRef?: React.Ref; /** * Help supporting a react-transition-group/Transition component. + * @default false */ transition?: boolean; } diff --git a/packages/material-ui/src/Popper/Popper.js b/packages/material-ui/src/Popper/Popper.js index 248f1ada7ec0d0..f5e70dce689301 100644 --- a/packages/material-ui/src/Popper/Popper.js +++ b/packages/material-ui/src/Popper/Popper.js @@ -293,12 +293,14 @@ Popper.propTypes = { ]), /** * The `children` will be inside the DOM hierarchy of the parent component. + * @default false */ disablePortal: PropTypes.bool, /** * Always keep the children in the DOM. * This prop can be useful in SEO situation or * when you want to maximize the responsiveness of the Popper. + * @default false */ keepMounted: PropTypes.bool, /** @@ -317,6 +319,7 @@ Popper.propTypes = { open: PropTypes.bool.isRequired, /** * Popper placement. + * @default 'bottom' */ placement: PropTypes.oneOf([ 'bottom-end', @@ -334,6 +337,7 @@ Popper.propTypes = { ]), /** * Options provided to the [`popper.js`](https://popper.js.org/docs/v1/) instance. + * @default {} */ popperOptions: PropTypes.object, /** @@ -346,6 +350,7 @@ Popper.propTypes = { style: PropTypes.object, /** * Help supporting a react-transition-group/Transition component. + * @default false */ transition: PropTypes.bool, }; diff --git a/packages/material-ui/src/Portal/Portal.d.ts b/packages/material-ui/src/Portal/Portal.d.ts index fd8c37e7b7c0d2..125aa7820188a3 100644 --- a/packages/material-ui/src/Portal/Portal.d.ts +++ b/packages/material-ui/src/Portal/Portal.d.ts @@ -15,6 +15,7 @@ export interface PortalProps { container?: Element | (() => Element | null) | null; /** * The `children` will be inside the DOM hierarchy of the parent component. + * @default false */ disablePortal?: boolean; /** diff --git a/packages/material-ui/src/Portal/Portal.js b/packages/material-ui/src/Portal/Portal.js index da83c8ea287663..8e4c65dcb46cb2 100644 --- a/packages/material-ui/src/Portal/Portal.js +++ b/packages/material-ui/src/Portal/Portal.js @@ -76,6 +76,7 @@ Portal.propTypes = { ]), /** * The `children` will be inside the DOM hierarchy of the parent component. + * @default false */ disablePortal: PropTypes.bool, /** diff --git a/packages/material-ui/src/Radio/Radio.d.ts b/packages/material-ui/src/Radio/Radio.d.ts index 5b2919cd578b7d..d2d56633b31c70 100644 --- a/packages/material-ui/src/Radio/Radio.d.ts +++ b/packages/material-ui/src/Radio/Radio.d.ts @@ -25,6 +25,7 @@ export interface RadioProps }; /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'secondary' */ color?: 'primary' | 'secondary' | 'default'; /** @@ -38,6 +39,7 @@ export interface RadioProps /** * The size of the radio. * `small` is equivalent to the dense radio styling. + * @default 'medium' */ size?: 'small' | 'medium'; } diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js index 1f85b0d55d6e00..d3190b6976e1ad 100644 --- a/packages/material-ui/src/Radio/Radio.js +++ b/packages/material-ui/src/Radio/Radio.js @@ -122,6 +122,7 @@ Radio.propTypes = { classes: PropTypes.object, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'secondary' */ color: PropTypes.oneOf(['default', 'primary', 'secondary']), /** @@ -167,6 +168,7 @@ Radio.propTypes = { /** * The size of the radio. * `small` is equivalent to the dense radio styling. + * @default 'medium' */ size: PropTypes.oneOf(['medium', 'small']), /** diff --git a/packages/material-ui/src/Select/Select.d.ts b/packages/material-ui/src/Select/Select.d.ts index 2b73a4f7a2d7ab..fc3a50279ef02f 100644 --- a/packages/material-ui/src/Select/Select.d.ts +++ b/packages/material-ui/src/Select/Select.d.ts @@ -10,6 +10,7 @@ export interface SelectProps /** * If `true`, the width of the popover will automatically be set according to the items inside the * menu, otherwise it will be at least the width of the select input. + * @default false */ autoWidth?: boolean; /** @@ -55,10 +56,12 @@ export interface SelectProps * * In order to display a meaningful value, a function should be passed to the `renderValue` prop which returns the value to be displayed when no items are selected. * You can only use it when the `native` prop is `false` (default). + * @default false */ displayEmpty?: boolean; /** * The icon that displays the arrow. + * @default ArrowDropDownIcon */ IconComponent?: React.ElementType; /** @@ -85,6 +88,7 @@ export interface SelectProps labelId?: string; /** * See [OutlinedInput#label](/api/outlined-input/#props) + * @default 0 */ labelWidth?: number; /** @@ -93,10 +97,12 @@ export interface SelectProps MenuProps?: Partial; /** * If `true`, `value` must be an array and the menu will support multiple selections. + * @default false */ multiple?: boolean; /** * If `true`, the component will be using a native `select` element. + * @default false */ native?: boolean; /** @@ -149,6 +155,7 @@ export interface SelectProps value?: unknown; /** * The variant to use. + * @default 'standard' */ variant?: 'standard' | 'outlined' | 'filled'; } diff --git a/packages/material-ui/src/Select/Select.js b/packages/material-ui/src/Select/Select.js index 70a13a0c0ff448..6289ddb067f5dd 100644 --- a/packages/material-ui/src/Select/Select.js +++ b/packages/material-ui/src/Select/Select.js @@ -104,6 +104,7 @@ Select.propTypes = { /** * If `true`, the width of the popover will automatically be set according to the items inside the * menu, otherwise it will be at least the width of the select input. + * @default false */ autoWidth: PropTypes.bool, /** @@ -126,10 +127,12 @@ Select.propTypes = { * * In order to display a meaningful value, a function should be passed to the `renderValue` prop which returns the value to be displayed when no items are selected. * You can only use it when the `native` prop is `false` (default). + * @default false */ displayEmpty: PropTypes.bool, /** * The icon that displays the arrow. + * @default ArrowDropDownIcon */ IconComponent: PropTypes.elementType, /** @@ -156,6 +159,7 @@ Select.propTypes = { labelId: PropTypes.string, /** * See [OutlinedInput#label](/api/outlined-input/#props) + * @default 0 */ labelWidth: PropTypes.number, /** @@ -164,10 +168,12 @@ Select.propTypes = { MenuProps: PropTypes.object, /** * If `true`, `value` must be an array and the menu will support multiple selections. + * @default false */ multiple: PropTypes.bool, /** * If `true`, the component will be using a native `select` element. + * @default false */ native: PropTypes.bool, /** @@ -220,6 +226,7 @@ Select.propTypes = { value: PropTypes.any, /** * The variant to use. + * @default 'standard' */ variant: PropTypes.oneOf(['filled', 'outlined', 'standard']), }; diff --git a/packages/material-ui/src/Slide/Slide.d.ts b/packages/material-ui/src/Slide/Slide.d.ts index fddc05aa073417..18dbceacb96e4e 100644 --- a/packages/material-ui/src/Slide/Slide.d.ts +++ b/packages/material-ui/src/Slide/Slide.d.ts @@ -8,6 +8,7 @@ export interface SlideProps extends TransitionProps { children?: React.ReactElement; /** * Direction the child node will enter from. + * @default 'down' */ direction?: 'left' | 'right' | 'up' | 'down'; /** @@ -18,6 +19,10 @@ export interface SlideProps extends TransitionProps { /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. + * @default { + * enter: duration.enteringScreen, + * exit: duration.leavingScreen, + * } */ timeout?: TransitionProps['timeout']; } diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js index a6a1cd3cda39c0..5a0e017f6a794b 100644 --- a/packages/material-ui/src/Slide/Slide.js +++ b/packages/material-ui/src/Slide/Slide.js @@ -249,6 +249,7 @@ Slide.propTypes = { children: elementAcceptingRef, /** * Direction the child node will enter from. + * @default 'down' */ direction: PropTypes.oneOf(['down', 'left', 'right', 'up']), /** @@ -286,6 +287,10 @@ Slide.propTypes = { /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. + * @default { + * enter: duration.enteringScreen, + * exit: duration.leavingScreen, + * } */ timeout: PropTypes.oneOfType([ PropTypes.number, diff --git a/packages/material-ui/src/Slider/Slider.d.ts b/packages/material-ui/src/Slider/Slider.d.ts index a4d8ac67e1e964..45305dabef1a9c 100644 --- a/packages/material-ui/src/Slider/Slider.d.ts +++ b/packages/material-ui/src/Slider/Slider.d.ts @@ -74,6 +74,7 @@ export interface SliderTypeMap

{ }; /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' */ color?: 'primary' | 'secondary'; /** @@ -82,6 +83,7 @@ export interface SliderTypeMap

{ defaultValue?: number | number[]; /** * If `true`, the slider will be disabled. + * @default false */ disabled?: boolean; /** @@ -103,16 +105,19 @@ export interface SliderTypeMap

{ * Marks indicate predetermined values to which the user can move the slider. * If `true` the marks will be spaced according the value of the `step` prop. * If an array, it should contain objects with `value` and an optional `label` keys. + * @default false */ marks?: boolean | Mark[]; /** * The maximum allowed value of the slider. * Should not be equal to min. + * @default 100 */ max?: number; /** * The minimum allowed value of the slider. * Should not be equal to max. + * @default 0 */ min?: number; /** @@ -135,10 +140,12 @@ export interface SliderTypeMap

{ onChangeCommitted?: (event: React.SyntheticEvent, value: number | number[]) => void; /** * The slider orientation. + * @default 'horizontal' */ orientation?: 'horizontal' | 'vertical'; /** * A transformation function, to change the scale of the slider. + * @default (x) => x */ scale?: (value: number) => number; /** @@ -147,10 +154,12 @@ export interface SliderTypeMap

{ * We recommend (max - min) to be evenly divisible by the step. * * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. + * @default 1 */ step?: number | null; /** * The component used to display the value label. + * @default 'span' */ ThumbComponent?: React.ElementType>; /** @@ -159,6 +168,7 @@ export interface SliderTypeMap

{ * - `normal` the track will render a bar representing the slider value. * - `inverted` the track will render a bar representing the remaining slider value. * - `false` the track will render without a bar. + * @default 'normal' */ track?: 'normal' | false | 'inverted'; /** @@ -168,6 +178,7 @@ export interface SliderTypeMap

{ value?: number | number[]; /** * The value label component. + * @default ValueLabel */ ValueLabelComponent?: React.ElementType; /** @@ -176,6 +187,7 @@ export interface SliderTypeMap

{ * - `auto` the value label will display when the thumb is hovered or focused. * - `on` will display persistently. * - `off` will never display. + * @default 'off' */ valueLabelDisplay?: 'on' | 'auto' | 'off'; /** @@ -185,6 +197,7 @@ export interface SliderTypeMap

{ * * - {number} value The value label's value to format * - {number} index The value label's index to format + * @default (x) => x */ valueLabelFormat?: string | ((value: number, index: number) => React.ReactNode); }; diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index fa4ea7e055c09d..2831fcb1282846 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -907,6 +907,7 @@ Slider.propTypes = { className: PropTypes.string, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' */ color: PropTypes.oneOf(['primary', 'secondary']), /** @@ -920,6 +921,7 @@ Slider.propTypes = { defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), /** * If `true`, the slider will be disabled. + * @default false */ disabled: PropTypes.bool, /** @@ -941,6 +943,7 @@ Slider.propTypes = { * Marks indicate predetermined values to which the user can move the slider. * If `true` the marks will be spaced according the value of the `step` prop. * If an array, it should contain objects with `value` and an optional `label` keys. + * @default false */ marks: PropTypes.oneOfType([ PropTypes.arrayOf( @@ -954,11 +957,13 @@ Slider.propTypes = { /** * The maximum allowed value of the slider. * Should not be equal to min. + * @default 100 */ max: PropTypes.number, /** * The minimum allowed value of the slider. * Should not be equal to max. + * @default 0 */ min: PropTypes.number, /** @@ -985,10 +990,12 @@ Slider.propTypes = { onMouseDown: PropTypes.func, /** * The slider orientation. + * @default 'horizontal' */ orientation: PropTypes.oneOf(['horizontal', 'vertical']), /** * A transformation function, to change the scale of the slider. + * @default (x) => x */ scale: PropTypes.func, /** @@ -997,10 +1004,12 @@ Slider.propTypes = { * We recommend (max - min) to be evenly divisible by the step. * * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop. + * @default 1 */ step: PropTypes.number, /** * The component used to display the value label. + * @default 'span' */ ThumbComponent: PropTypes.elementType, /** @@ -1009,6 +1018,7 @@ Slider.propTypes = { * - `normal` the track will render a bar representing the slider value. * - `inverted` the track will render a bar representing the remaining slider value. * - `false` the track will render without a bar. + * @default 'normal' */ track: PropTypes.oneOf(['inverted', 'normal', false]), /** @@ -1018,6 +1028,7 @@ Slider.propTypes = { value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), /** * The value label component. + * @default ValueLabel */ ValueLabelComponent: PropTypes.elementType, /** @@ -1026,6 +1037,7 @@ Slider.propTypes = { * - `auto` the value label will display when the thumb is hovered or focused. * - `on` will display persistently. * - `off` will never display. + * @default 'off' */ valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']), /** @@ -1035,6 +1047,7 @@ Slider.propTypes = { * * - {number} value The value label's value to format * - {number} index The value label's index to format + * @default (x) => x */ valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), }; diff --git a/packages/material-ui/src/Snackbar/Snackbar.d.ts b/packages/material-ui/src/Snackbar/Snackbar.d.ts index ff247cc18bced8..8602758d5e6bdc 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.d.ts +++ b/packages/material-ui/src/Snackbar/Snackbar.d.ts @@ -21,6 +21,7 @@ export interface SnackbarProps * The anchor of the `Snackbar`. * On smaller screens, the component grows to occupy all the available width, * the horizontal alignment is ignored. + * @default { vertical: 'bottom', horizontal: 'left' } */ anchorOrigin?: SnackbarOrigin; /** @@ -28,6 +29,7 @@ export interface SnackbarProps * `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. + * @default null */ autoHideDuration?: number | null; /** @@ -63,6 +65,7 @@ export interface SnackbarProps ContentProps?: Partial; /** * If `true`, the `autoHideDuration` timer will expire even if the window is not focused. + * @default false */ disableWindowBlurListener?: boolean; /** @@ -101,6 +104,7 @@ export interface SnackbarProps /** * The component used for the transition. * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + * @default Grow */ TransitionComponent?: React.ComponentType< TransitionProps & { children?: React.ReactElement } @@ -108,11 +112,16 @@ export interface SnackbarProps /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. + * @default { + * enter: duration.enteringScreen, + * exit: duration.leavingScreen, + * } */ transitionDuration?: TransitionProps['timeout']; /** * Props applied to the transition element. * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component. + * @default {} */ TransitionProps?: TransitionProps; } diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js index 59b7011ec8d22b..c8f7aef3b19051 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.js +++ b/packages/material-ui/src/Snackbar/Snackbar.js @@ -262,6 +262,7 @@ Snackbar.propTypes = { * The anchor of the `Snackbar`. * On smaller screens, the component grows to occupy all the available width, * the horizontal alignment is ignored. + * @default { vertical: 'bottom', horizontal: 'left' } */ anchorOrigin: PropTypes.shape({ horizontal: PropTypes.oneOf(['center', 'left', 'right']).isRequired, @@ -272,6 +273,7 @@ Snackbar.propTypes = { * `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. + * @default null */ autoHideDuration: PropTypes.number, /** @@ -296,6 +298,7 @@ Snackbar.propTypes = { ContentProps: PropTypes.object, /** * If `true`, the `autoHideDuration` timer will expire even if the window is not focused. + * @default false */ disableWindowBlurListener: PropTypes.bool, /** @@ -342,11 +345,16 @@ Snackbar.propTypes = { /** * The component used for the transition. * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + * @default Grow */ TransitionComponent: PropTypes.elementType, /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. + * @default { + * enter: duration.enteringScreen, + * exit: duration.leavingScreen, + * } */ transitionDuration: PropTypes.oneOfType([ PropTypes.number, @@ -359,6 +367,7 @@ Snackbar.propTypes = { /** * Props applied to the transition element. * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component. + * @default {} */ TransitionProps: PropTypes.object, }; diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.d.ts b/packages/material-ui/src/SnackbarContent/SnackbarContent.d.ts index 550260ec5a3249..32eb0509a7904e 100644 --- a/packages/material-ui/src/SnackbarContent/SnackbarContent.d.ts +++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.d.ts @@ -24,6 +24,7 @@ export interface SnackbarContentProps extends StandardProps; /** @@ -28,6 +29,7 @@ export interface StepContentProps extends StandardProps, 'children'> { /** * Whether this step is active. + * @default false */ active?: boolean; /** @@ -24,10 +25,12 @@ export interface StepIconProps }; /** * Mark the step as completed. Is passed to child components. + * @default false */ completed?: boolean; /** * Mark the step as failed. + * @default false */ error?: boolean; /** diff --git a/packages/material-ui/src/StepIcon/StepIcon.js b/packages/material-ui/src/StepIcon/StepIcon.js index 35f455866b22d0..6fa0014366efe0 100644 --- a/packages/material-ui/src/StepIcon/StepIcon.js +++ b/packages/material-ui/src/StepIcon/StepIcon.js @@ -73,6 +73,7 @@ StepIcon.propTypes = { // ---------------------------------------------------------------------- /** * Whether this step is active. + * @default false */ active: PropTypes.bool, /** @@ -81,10 +82,12 @@ StepIcon.propTypes = { classes: PropTypes.object, /** * Mark the step as completed. Is passed to child components. + * @default false */ completed: PropTypes.bool, /** * Mark the step as failed. + * @default false */ error: PropTypes.bool, /** diff --git a/packages/material-ui/src/StepLabel/StepLabel.d.ts b/packages/material-ui/src/StepLabel/StepLabel.d.ts index e97077f2795448..05777ebdc58fb1 100644 --- a/packages/material-ui/src/StepLabel/StepLabel.d.ts +++ b/packages/material-ui/src/StepLabel/StepLabel.d.ts @@ -36,6 +36,7 @@ export interface StepLabelProps extends StandardProps { /** * Set the active step (zero based index). * Set to -1 to disable all the steps. + * @default 0 */ activeStep?: number; /** * If set to 'true' and orientation is horizontal, * then the step label will be positioned under the icon. + * @default false */ alternativeLabel?: boolean; /** @@ -34,14 +36,17 @@ export interface StepperProps extends StandardProps { }; /** * An element to be placed between each step. + * @default */ connector?: React.ReactElement; /** * If set the `Stepper` will not assist in controlling steps for linear flow. + * @default false */ nonLinear?: boolean; /** * The stepper orientation (layout flow direction). + * @default 'horizontal' */ orientation?: Orientation; } diff --git a/packages/material-ui/src/Stepper/Stepper.js b/packages/material-ui/src/Stepper/Stepper.js index 777b799afd7fa2..92f40690e9295e 100644 --- a/packages/material-ui/src/Stepper/Stepper.js +++ b/packages/material-ui/src/Stepper/Stepper.js @@ -85,11 +85,13 @@ Stepper.propTypes = { /** * Set the active step (zero based index). * Set to -1 to disable all the steps. + * @default 0 */ activeStep: PropTypes.number, /** * If set to 'true' and orientation is horizontal, * then the step label will be positioned under the icon. + * @default false */ alternativeLabel: PropTypes.bool, /** @@ -106,14 +108,17 @@ Stepper.propTypes = { className: PropTypes.string, /** * An element to be placed between each step. + * @default */ connector: PropTypes.element, /** * If set the `Stepper` will not assist in controlling steps for linear flow. + * @default false */ nonLinear: PropTypes.bool, /** * The stepper orientation (layout flow direction). + * @default 'horizontal' */ orientation: PropTypes.oneOf(['horizontal', 'vertical']), }; diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts index e43caffbe8bab8..d37d0d7279eb3e 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts +++ b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts @@ -33,10 +33,12 @@ export interface SvgIconTypeMap

{ /** * The color of the component. It supports those theme colors that make sense for this component. * You can use the `htmlColor` prop to apply a color attribute to the SVG element. + * @default 'inherit' */ color?: 'inherit' | 'primary' | 'secondary' | 'action' | 'disabled' | 'error'; /** * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. + * @default 'default' */ fontSize?: 'inherit' | 'default' | 'small' | 'large'; /** @@ -60,6 +62,7 @@ export interface SvgIconTypeMap

{ * and you pass viewBox="0 0 50 20", * this means that the coordinates inside the SVG will go from the top left corner (0,0) * to bottom right (50,20) and each unit will be worth 10px. + * @default '0 0 24 24' */ viewBox?: string; }; diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js index 9e757fb6a81754..91d01445859c37 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.js +++ b/packages/material-ui/src/SvgIcon/SvgIcon.js @@ -110,6 +110,7 @@ SvgIcon.propTypes = { /** * The color of the component. It supports those theme colors that make sense for this component. * You can use the `htmlColor` prop to apply a color attribute to the SVG element. + * @default 'inherit' */ color: PropTypes.oneOf(['action', 'disabled', 'error', 'inherit', 'primary', 'secondary']), /** @@ -119,6 +120,7 @@ SvgIcon.propTypes = { component: PropTypes.elementType, /** * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. + * @default 'default' */ fontSize: PropTypes.oneOf(['default', 'inherit', 'large', 'small']), /** @@ -142,6 +144,7 @@ SvgIcon.propTypes = { * and you pass viewBox="0 0 50 20", * this means that the coordinates inside the SVG will go from the top left corner (0,0) * to bottom right (50,20) and each unit will be worth 10px. + * @default '0 0 24 24' */ viewBox: PropTypes.string, }; diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.d.ts b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.d.ts index 8f799d1ac11ca9..80e13b6a5552a5 100644 --- a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.d.ts +++ b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.d.ts @@ -6,27 +6,32 @@ export interface SwipeableDrawerProps extends Omit = ExtendButt }; /** * If `true`, the tab will be disabled. + * @default false */ disabled?: boolean; /** * If `true`, the keyboard focus ripple will be disabled. + * @default false */ disableFocusRipple?: boolean; /** @@ -57,6 +59,7 @@ export type TabTypeMap

= ExtendButt /** * Tab labels appear in a single row. * They can use a second line if needed. + * @default false */ wrapped?: boolean; }; diff --git a/packages/material-ui/src/Tab/Tab.js b/packages/material-ui/src/Tab/Tab.js index 06a03e82430a86..ed356a8f04bff8 100644 --- a/packages/material-ui/src/Tab/Tab.js +++ b/packages/material-ui/src/Tab/Tab.js @@ -190,10 +190,12 @@ Tab.propTypes = { className: PropTypes.string, /** * If `true`, the tab will be disabled. + * @default false */ disabled: PropTypes.bool, /** * If `true`, the keyboard focus ripple will be disabled. + * @default false */ disableFocusRipple: PropTypes.bool, /** @@ -231,6 +233,7 @@ Tab.propTypes = { /** * Tab labels appear in a single row. * They can use a second line if needed. + * @default false */ wrapped: PropTypes.bool, }; diff --git a/packages/material-ui/src/Table/Table.d.ts b/packages/material-ui/src/Table/Table.d.ts index fa1f0247db84ed..4285a3419f8685 100644 --- a/packages/material-ui/src/Table/Table.d.ts +++ b/packages/material-ui/src/Table/Table.d.ts @@ -22,16 +22,19 @@ export interface TableTypeMap

{ }; /** * Allows TableCells to inherit padding of the Table. + * @default 'default' */ padding?: Padding; /** * Allows TableCells to inherit size of the Table. + * @default 'medium' */ size?: Size; /** * Set the header sticky. * * ⚠️ It doesn't work with IE 11. + * @default false */ stickyHeader?: boolean; }; diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js index 333d770b59ee0e..d08235e1c60b21 100644 --- a/packages/material-ui/src/Table/Table.js +++ b/packages/material-ui/src/Table/Table.js @@ -79,16 +79,19 @@ Table.propTypes = { component: PropTypes.elementType, /** * Allows TableCells to inherit padding of the Table. + * @default 'default' */ padding: PropTypes.oneOf(['checkbox', 'default', 'none']), /** * Allows TableCells to inherit size of the Table. + * @default 'medium' */ size: PropTypes.oneOf(['medium', 'small']), /** * Set the header sticky. * * ⚠️ It doesn't work with IE 11. + * @default false */ stickyHeader: PropTypes.bool, }; diff --git a/packages/material-ui/src/TableCell/TableCell.d.ts b/packages/material-ui/src/TableCell/TableCell.d.ts index 76336496448172..70019b5bae43b2 100644 --- a/packages/material-ui/src/TableCell/TableCell.d.ts +++ b/packages/material-ui/src/TableCell/TableCell.d.ts @@ -18,6 +18,7 @@ export interface TableCellProps extends StandardProps { * * @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous'). * @returns {string} + * @default function defaultGetAriaLabel(type) { + * return `Go to ${type} page`; + * } */ getItemAriaLabel?: (type: 'first' | 'last' | 'next' | 'previous') => string; /** @@ -71,6 +74,9 @@ export interface TablePaginationTypeMap { * object. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default function defaultLabelDisplayedRows({ from, to, count }) { + * return `${from}-${to} of ${count !== -1 ? count : `more than ${to}`}`; + * } */ labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode; /** diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js index b0457a5f96c10f..591c7cbe39ac0b 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.js +++ b/packages/material-ui/src/TablePagination/TablePagination.js @@ -216,6 +216,9 @@ TablePagination.propTypes = { * * @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous'). * @returns {string} + * @default function defaultGetAriaLabel(type) { + * return `Go to ${type} page`; + * } */ getItemAriaLabel: PropTypes.func, /** @@ -223,6 +226,9 @@ TablePagination.propTypes = { * object. * * For localization purposes, you can use the provided [translations](/guides/localization/). + * @default function defaultLabelDisplayedRows({ from, to, count }) { + * return `${from}-${to} of ${count !== -1 ? count : `more than ${to}`}`; + * } */ labelDisplayedRows: PropTypes.func, /** diff --git a/packages/material-ui/src/TableRow/TableRow.d.ts b/packages/material-ui/src/TableRow/TableRow.d.ts index e775961e534203..02349b4cab8333 100644 --- a/packages/material-ui/src/TableRow/TableRow.d.ts +++ b/packages/material-ui/src/TableRow/TableRow.d.ts @@ -24,10 +24,12 @@ export interface TableRowTypeMap

{ }; /** * If `true`, the table row will shade on hover. + * @default false */ hover?: boolean; /** * If `true`, the table row will have the selected shading. + * @default false */ selected?: boolean; }; diff --git a/packages/material-ui/src/TableRow/TableRow.js b/packages/material-ui/src/TableRow/TableRow.js index 1789a4c544ed1a..d060683e57c5c4 100644 --- a/packages/material-ui/src/TableRow/TableRow.js +++ b/packages/material-ui/src/TableRow/TableRow.js @@ -89,10 +89,12 @@ TableRow.propTypes = { component: PropTypes.elementType, /** * If `true`, the table row will shade on hover. + * @default false */ hover: PropTypes.bool, /** * If `true`, the table row will have the selected shading. + * @default false */ selected: PropTypes.bool, }; diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.d.ts b/packages/material-ui/src/TableSortLabel/TableSortLabel.d.ts index e10d5d2d7addef..0ec9c2ee1a11fc 100644 --- a/packages/material-ui/src/TableSortLabel/TableSortLabel.d.ts +++ b/packages/material-ui/src/TableSortLabel/TableSortLabel.d.ts @@ -9,6 +9,7 @@ export type TableSortLabelTypeMap< props: P & { /** * If `true`, the label will have the active styling (should be true for the sorted column). + * @default false */ active?: boolean; /** @@ -32,14 +33,17 @@ export type TableSortLabelTypeMap< }; /** * The current sort direction. + * @default 'asc' */ direction?: 'asc' | 'desc'; /** * Hide sort icon when active is false. + * @default false */ hideSortIcon?: boolean; /** * Sort icon to use. + * @default ArrowDownwardIcon */ IconComponent?: React.ComponentType<{ className: string }>; }; diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.js b/packages/material-ui/src/TableSortLabel/TableSortLabel.js index 5a469795a3f762..ecd8f59930bc24 100644 --- a/packages/material-ui/src/TableSortLabel/TableSortLabel.js +++ b/packages/material-ui/src/TableSortLabel/TableSortLabel.js @@ -95,6 +95,7 @@ TableSortLabel.propTypes = { // ---------------------------------------------------------------------- /** * If `true`, the label will have the active styling (should be true for the sorted column). + * @default false */ active: PropTypes.bool, /** @@ -111,14 +112,17 @@ TableSortLabel.propTypes = { className: PropTypes.string, /** * The current sort direction. + * @default 'asc' */ direction: PropTypes.oneOf(['asc', 'desc']), /** * Hide sort icon when active is false. + * @default false */ hideSortIcon: PropTypes.bool, /** * Sort icon to use. + * @default ArrowDownwardIcon */ IconComponent: PropTypes.elementType, }; diff --git a/packages/material-ui/src/Tabs/Tabs.d.ts b/packages/material-ui/src/Tabs/Tabs.d.ts index 25030c371ff1e1..e7930f32b70e25 100644 --- a/packages/material-ui/src/Tabs/Tabs.d.ts +++ b/packages/material-ui/src/Tabs/Tabs.d.ts @@ -25,6 +25,7 @@ export interface TabsTypeMap

void; /** * The tabs orientation (layout flow direction). + * @default 'horizontal' */ orientation?: 'horizontal' | 'vertical'; /** * The component used to render the scroll buttons. + * @default TabScrollButton */ ScrollButtonComponent?: React.ElementType; /** @@ -84,6 +88,7 @@ export interface TabsTypeMap

>; /** @@ -101,6 +107,7 @@ export interface TabsTypeMap

; /** * Determines the color of the `Tab`. + * @default 'inherit' */ textColor?: 'secondary' | 'primary' | 'inherit'; /** @@ -116,6 +123,7 @@ export interface TabsTypeMap

; /** * If `true`, the input will take up the full width of its container. + * @default false */ fullWidth?: boolean; /** @@ -91,6 +96,7 @@ export interface BaseTextFieldProps margin?: PropTypes.Margin; /** * If `true`, a textarea element will be rendered instead of an input. + * @default false */ multiline?: boolean; /** @@ -105,6 +111,7 @@ export interface BaseTextFieldProps placeholder?: string; /** * If `true`, the label is displayed as required and the `input` element will be required. + * @default false */ required?: boolean; /** @@ -122,6 +129,7 @@ export interface BaseTextFieldProps /** * Render a [`Select`](/api/select/) element while passing the Input element to `Select` as `input` parameter. * If this option is set you must pass the options of the select as children. + * @default false */ select?: boolean; /** @@ -152,6 +160,7 @@ export interface StandardTextFieldProps extends BaseTextFieldProps { onChange?: StandardInputProps['onChange']; /** * The variant to use. + * @default 'standard' */ variant?: 'standard'; /** @@ -173,6 +182,7 @@ export interface FilledTextFieldProps extends BaseTextFieldProps { onChange?: FilledInputProps['onChange']; /** * The variant to use. + * @default 'standard' */ variant: 'filled'; /** @@ -194,6 +204,7 @@ export interface OutlinedTextFieldProps extends BaseTextFieldProps { onChange?: OutlinedInputProps['onChange']; /** * The variant to use. + * @default 'standard' */ variant: 'outlined'; /** diff --git a/packages/material-ui/src/TextField/TextField.js b/packages/material-ui/src/TextField/TextField.js index ee9499d392022b..80470b797a8298 100644 --- a/packages/material-ui/src/TextField/TextField.js +++ b/packages/material-ui/src/TextField/TextField.js @@ -206,6 +206,7 @@ TextField.propTypes = { autoComplete: PropTypes.string, /** * If `true`, the `input` element will be focused during the first mount. + * @default false */ autoFocus: PropTypes.bool, /** @@ -222,6 +223,7 @@ TextField.propTypes = { className: PropTypes.string, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' */ color: PropTypes.oneOf(['primary', 'secondary']), /** @@ -230,10 +232,12 @@ TextField.propTypes = { defaultValue: PropTypes.any, /** * If `true`, the `input` element will be disabled. + * @default false */ disabled: PropTypes.bool, /** * If `true`, the label will be displayed in an error state. + * @default false */ error: PropTypes.bool, /** @@ -242,6 +246,7 @@ TextField.propTypes = { FormHelperTextProps: PropTypes.object, /** * If `true`, the input will take up the full width of its container. + * @default false */ fullWidth: PropTypes.bool, /** @@ -290,6 +295,7 @@ TextField.propTypes = { minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * If `true`, a textarea element will be rendered instead of an input. + * @default false */ multiline: PropTypes.bool, /** @@ -317,6 +323,7 @@ TextField.propTypes = { placeholder: PropTypes.string, /** * If `true`, the label is displayed as required and the `input` element will be required. + * @default false */ required: PropTypes.bool, /** @@ -326,6 +333,7 @@ TextField.propTypes = { /** * Render a [`Select`](/api/select/) element while passing the Input element to `Select` as `input` parameter. * If this option is set you must pass the options of the select as children. + * @default false */ select: PropTypes.bool, /** @@ -346,6 +354,7 @@ TextField.propTypes = { value: PropTypes.any, /** * The variant to use. + * @default 'standard' */ variant: PropTypes.oneOf(['filled', 'outlined', 'standard']), }; diff --git a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.d.ts b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.d.ts index 411c161791a695..5bca7bf79edeeb 100644 --- a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.d.ts +++ b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.d.ts @@ -10,6 +10,7 @@ export interface TextareaAutosizeProps maxRows?: string | number; /** * Minimum number of rows to display. + * @default 1 */ minRows?: string | number; } diff --git a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js index ffc70a5b730aed..6f9194ab6a606a 100644 --- a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js +++ b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.js @@ -189,6 +189,7 @@ TextareaAutosize.propTypes = { maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Minimum number of rows to display. + * @default 1 */ minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** diff --git a/packages/material-ui/src/Toolbar/Toolbar.d.ts b/packages/material-ui/src/Toolbar/Toolbar.d.ts index 6b93ee0c5a60fd..1d8298227555b3 100644 --- a/packages/material-ui/src/Toolbar/Toolbar.d.ts +++ b/packages/material-ui/src/Toolbar/Toolbar.d.ts @@ -26,10 +26,12 @@ export interface ToolbarTypeMap

{ }; /** * If `true`, disables gutter padding. + * @default false */ disableGutters?: boolean; /** * The variant to use. + * @default 'regular' */ variant?: OverridableStringUnion; }; diff --git a/packages/material-ui/src/Toolbar/Toolbar.js b/packages/material-ui/src/Toolbar/Toolbar.js index e47f881ad70444..18299a341408d8 100644 --- a/packages/material-ui/src/Toolbar/Toolbar.js +++ b/packages/material-ui/src/Toolbar/Toolbar.js @@ -89,10 +89,12 @@ Toolbar.propTypes = { component: PropTypes.elementType, /** * If `true`, disables gutter padding. + * @default false */ disableGutters: PropTypes.bool, /** * The variant to use. + * @default 'regular' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf(['dense', 'regular']), diff --git a/packages/material-ui/src/Tooltip/Tooltip.d.ts b/packages/material-ui/src/Tooltip/Tooltip.d.ts index 906dc9521c3241..64329e6915bb52 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.d.ts +++ b/packages/material-ui/src/Tooltip/Tooltip.d.ts @@ -6,6 +6,7 @@ import { PopperProps } from '../Popper/Popper'; export interface TooltipProps extends StandardProps, 'title'> { /** * If `true`, adds an arrow to the tooltip. + * @default false */ arrow?: boolean; /** @@ -41,27 +42,33 @@ export interface TooltipProps extends StandardProps; /** @@ -130,6 +142,7 @@ export interface TooltipProps extends StandardProps } diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index 8b4ecea9b5ab35..c117278a9c03f5 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -558,6 +558,7 @@ Tooltip.propTypes = { // ---------------------------------------------------------------------- /** * If `true`, adds an arrow to the tooltip. + * @default false */ arrow: PropTypes.bool, /** @@ -574,27 +575,33 @@ Tooltip.propTypes = { className: PropTypes.string, /** * Do not respond to focus events. + * @default false */ disableFocusListener: PropTypes.bool, /** * Do not respond to hover events. + * @default false */ disableHoverListener: PropTypes.bool, /** * Do not respond to long press touch events. + * @default false */ disableTouchListener: PropTypes.bool, /** * The number of milliseconds to wait before showing the tooltip. * This prop won't impact the enter touch delay (`enterTouchDelay`). + * @default 100 */ enterDelay: PropTypes.number, /** * The number of milliseconds to wait before showing the tooltip when one was already recently opened. + * @default 0 */ enterNextDelay: PropTypes.number, /** * The number of milliseconds a user must touch the element before showing the tooltip. + * @default 700 */ enterTouchDelay: PropTypes.number, /** @@ -605,15 +612,18 @@ Tooltip.propTypes = { /** * Makes a tooltip interactive, i.e. will not close when the user * hovers over the tooltip before the `leaveDelay` is expired. + * @default false */ interactive: PropTypes.bool, /** * The number of milliseconds to wait before hiding the tooltip. * This prop won't impact the leave touch delay (`leaveTouchDelay`). + * @default 0 */ leaveDelay: PropTypes.number, /** * The number of milliseconds after the user stops touching an element before hiding the tooltip. + * @default 1500 */ leaveTouchDelay: PropTypes.number, /** @@ -634,6 +644,7 @@ Tooltip.propTypes = { open: PropTypes.bool, /** * Tooltip placement. + * @default 'bottom' */ placement: PropTypes.oneOf([ 'bottom-end', @@ -651,6 +662,7 @@ Tooltip.propTypes = { ]), /** * The component used for the popper. + * @default Popper */ PopperComponent: PropTypes.elementType, /** @@ -664,6 +676,7 @@ Tooltip.propTypes = { /** * The component used for the transition. * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + * @default Grow */ TransitionComponent: PropTypes.elementType, /** diff --git a/packages/material-ui/src/Typography/Typography.d.ts b/packages/material-ui/src/Typography/Typography.d.ts index 7d4ed5d7a817a5..a253fe4ef4f15b 100644 --- a/packages/material-ui/src/Typography/Typography.d.ts +++ b/packages/material-ui/src/Typography/Typography.d.ts @@ -11,6 +11,7 @@ export interface TypographyTypeMap

props: P & { /** * Set the text-align on the component. + * @default 'inherit' */ align?: PropTypes.Alignment; /** @@ -84,6 +85,7 @@ export interface TypographyTypeMap

}; /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'initial' */ color?: | 'initial' @@ -95,10 +97,12 @@ export interface TypographyTypeMap

| 'error'; /** * Controls the display type + * @default 'initial' */ display?: 'initial' | 'block' | 'inline'; /** * If `true`, the text will have a bottom margin. + * @default false */ gutterBottom?: boolean; /** @@ -106,14 +110,17 @@ export interface TypographyTypeMap

* * Note that text overflow can only happen with block or inline-block level elements * (the element needs to have a width in order to overflow). + * @default false */ noWrap?: boolean; /** * If `true`, the text will have a bottom margin. + * @default false */ paragraph?: boolean; /** * Applies the theme typography styles. + * @default 'body1' */ variant?: OverridableStringUnion; /** @@ -121,6 +128,19 @@ export interface TypographyTypeMap

* For instance, subtitle1 to `

`. * If you wish to change that mapping, you can provide your own. * Alternatively, you can use the `component` prop. + * @default { + * h1: 'h1', + * h2: 'h2', + * h3: 'h3', + * h4: 'h4', + * h5: 'h5', + * h6: 'h6', + * subtitle1: 'h6', + * subtitle2: 'h6', + * body1: 'p', + * body2: 'p', + * inherit: 'p', + * } */ variantMapping?: Partial< Record< diff --git a/packages/material-ui/src/Typography/Typography.js b/packages/material-ui/src/Typography/Typography.js index 740d2e9f8e3a42..49033ad16b7707 100644 --- a/packages/material-ui/src/Typography/Typography.js +++ b/packages/material-ui/src/Typography/Typography.js @@ -181,6 +181,7 @@ Typography.propTypes = { // ---------------------------------------------------------------------- /** * Set the text-align on the component. + * @default 'inherit' */ align: PropTypes.oneOf(['center', 'inherit', 'justify', 'left', 'right']), /** @@ -197,6 +198,7 @@ Typography.propTypes = { className: PropTypes.string, /** * The color of the component. It supports those theme colors that make sense for this component. + * @default 'initial' */ color: PropTypes.oneOf([ 'error', @@ -214,10 +216,12 @@ Typography.propTypes = { component: PropTypes.elementType, /** * Controls the display type + * @default 'initial' */ display: PropTypes.oneOf(['block', 'initial', 'inline']), /** * If `true`, the text will have a bottom margin. + * @default false */ gutterBottom: PropTypes.bool, /** @@ -225,14 +229,17 @@ Typography.propTypes = { * * Note that text overflow can only happen with block or inline-block level elements * (the element needs to have a width in order to overflow). + * @default false */ noWrap: PropTypes.bool, /** * If `true`, the text will have a bottom margin. + * @default false */ paragraph: PropTypes.bool, /** * Applies the theme typography styles. + * @default 'body1' */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.oneOf([ @@ -258,6 +265,19 @@ Typography.propTypes = { * For instance, subtitle1 to `
`. * If you wish to change that mapping, you can provide your own. * Alternatively, you can use the `component` prop. + * @default { + * h1: 'h1', + * h2: 'h2', + * h3: 'h3', + * h4: 'h4', + * h5: 'h5', + * h6: 'h6', + * subtitle1: 'h6', + * subtitle2: 'h6', + * body1: 'p', + * body2: 'p', + * inherit: 'p', + * } */ variantMapping: PropTypes /* @typescript-to-proptypes-ignore */.object, }; diff --git a/packages/material-ui/src/Unstable_TrapFocus/Unstable_TrapFocus.d.ts b/packages/material-ui/src/Unstable_TrapFocus/Unstable_TrapFocus.d.ts index be232c4777cf90..2a01523174277d 100644 --- a/packages/material-ui/src/Unstable_TrapFocus/Unstable_TrapFocus.d.ts +++ b/packages/material-ui/src/Unstable_TrapFocus/Unstable_TrapFocus.d.ts @@ -27,6 +27,7 @@ export interface TrapFocusProps { * * Generally this should never be set to `true` as it makes the trap focus less * accessible to assistive technologies, like screen readers. + * @default false */ disableAutoFocus?: boolean; /** @@ -34,11 +35,13 @@ export interface TrapFocusProps { * * Generally this should never be set to `true` as it makes the trap focus less * accessible to assistive technologies, like screen readers. + * @default false */ disableEnforceFocus?: boolean; /** * If `true`, the trap focus will not restore focus to previously focused element once * trap focus is hidden. + * @default false */ disableRestoreFocus?: boolean; } diff --git a/packages/material-ui/src/Unstable_TrapFocus/Unstable_TrapFocus.js b/packages/material-ui/src/Unstable_TrapFocus/Unstable_TrapFocus.js index 196edd99d5fc0b..ba4e5b9257e3f4 100644 --- a/packages/material-ui/src/Unstable_TrapFocus/Unstable_TrapFocus.js +++ b/packages/material-ui/src/Unstable_TrapFocus/Unstable_TrapFocus.js @@ -230,6 +230,7 @@ Unstable_TrapFocus.propTypes = { * * Generally this should never be set to `true` as it makes the trap focus less * accessible to assistive technologies, like screen readers. + * @default false */ disableAutoFocus: PropTypes.bool, /** @@ -237,11 +238,13 @@ Unstable_TrapFocus.propTypes = { * * Generally this should never be set to `true` as it makes the trap focus less * accessible to assistive technologies, like screen readers. + * @default false */ disableEnforceFocus: PropTypes.bool, /** * If `true`, the trap focus will not restore focus to previously focused element once * trap focus is hidden. + * @default false */ disableRestoreFocus: PropTypes.bool, /** diff --git a/packages/material-ui/src/Zoom/Zoom.d.ts b/packages/material-ui/src/Zoom/Zoom.d.ts index 576f48247a0d72..407d0c3cafc4b9 100644 --- a/packages/material-ui/src/Zoom/Zoom.d.ts +++ b/packages/material-ui/src/Zoom/Zoom.d.ts @@ -14,6 +14,10 @@ export interface ZoomProps extends TransitionProps { /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. + * @default { + * enter: duration.enteringScreen, + * exit: duration.leavingScreen, + * } */ timeout?: TransitionProps['timeout']; } diff --git a/packages/material-ui/src/Zoom/Zoom.js b/packages/material-ui/src/Zoom/Zoom.js index 81a4470fe3f801..e438394305069e 100644 --- a/packages/material-ui/src/Zoom/Zoom.js +++ b/packages/material-ui/src/Zoom/Zoom.js @@ -179,6 +179,10 @@ Zoom.propTypes = { /** * The duration for the transition, in milliseconds. * You may specify a single timeout for all transitions, or individually with an object. + * @default { + * enter: duration.enteringScreen, + * exit: duration.leavingScreen, + * } */ timeout: PropTypes.oneOfType([ PropTypes.number, From 7d16daaccca1fa1393bf09c0b49851567bb067a3 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 2 Sep 2020 09:38:05 +0200 Subject: [PATCH 09/13] Reduce diff --- docs/src/modules/utils/generateMarkdown.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/src/modules/utils/generateMarkdown.ts b/docs/src/modules/utils/generateMarkdown.ts index 3c8d1a61426f7a..127f4dfb07cbef 100644 --- a/docs/src/modules/utils/generateMarkdown.ts +++ b/docs/src/modules/utils/generateMarkdown.ts @@ -319,14 +319,13 @@ function generateProps(reactAPI: ReactApi) { return; } - const { defaultValue, jsdocDefaultValue } = prop; - - const renderedDefaultValue = defaultValue?.value.replace(/\r?\n/g, ''); + const renderedDefaultValue = prop.defaultValue?.value.replace(/\r?\n/g, ''); const renderDefaultValue = renderedDefaultValue && // Ignore "large" default values that would break the table layout. renderedDefaultValue.length <= 150; + const { defaultValue, jsdocDefaultValue } = prop; if (jsdocDefaultValue !== undefined && defaultValue === undefined) { throw new Error( `Declared a @default annotation in JSDOC for prop '${propName}' but could not find a default value in the implementation.`, From 494986eb4a006085ad323f6395af00904e267f6a Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 2 Sep 2020 09:52:21 +0200 Subject: [PATCH 10/13] Encode verification in types --- docs/src/modules/utils/generateMarkdown.ts | 90 ++++++++++++---------- 1 file changed, 49 insertions(+), 41 deletions(-) diff --git a/docs/src/modules/utils/generateMarkdown.ts b/docs/src/modules/utils/generateMarkdown.ts index 127f4dfb07cbef..bd2d402891f71c 100644 --- a/docs/src/modules/utils/generateMarkdown.ts +++ b/docs/src/modules/utils/generateMarkdown.ts @@ -9,6 +9,10 @@ import { import { SOURCE_CODE_ROOT_URL, LANGUAGES_IN_PROGRESS } from 'docs/src/modules/constants'; import { pageToTitle } from './helpers'; +interface DescribeablePropDescriptor extends PropDescriptor { + description: string; +} + export interface ReactApi extends ReactDocgenApi { EOL: string; filename: string; @@ -121,7 +125,7 @@ function resolveType(type: NonNullable): string { throw new TypeError(`resolveType for '${type.type}' not implemented`); } -function generatePropDescription(prop: PropDescriptor, propName: string) { +function generatePropDescription(prop: DescribeablePropDescriptor, propName: string) { const { description } = prop; const type = prop.type; let deprecated = ''; @@ -133,9 +137,6 @@ function generatePropDescription(prop: PropDescriptor, propName: string) { } } - if (description === undefined) { - throw new Error('wrong doctrine#parse type'); - } const parsed = doctrine.parse(description, { sloppy: true, }); @@ -294,6 +295,42 @@ The \`${reactAPI.styles.name}\` name can be used for providing [default props](/ `; } +function assertDescribeableProp( + prop: PropDescriptor, + propName: string, + options: { renderDefaultValue: boolean }, +): asserts prop is DescribeablePropDescriptor { + const { defaultValue, jsdocDefaultValue, description } = prop; + const { renderDefaultValue } = options; + + if (description === undefined) { + throw new Error(`The "${propName}" prop is missing a description.`); + } + + if (jsdocDefaultValue !== undefined && defaultValue === undefined) { + throw new Error( + `Declared a @default annotation in JSDOC for prop '${propName}' but could not find a default value in the implementation.`, + ); + } else if (jsdocDefaultValue === undefined && defaultValue !== undefined && renderDefaultValue) { + // Discriminator for polymorphism which is not documented at the component level. + // The documentation of `component` does not know in which component it is used. + if (propName !== 'component') { + // TODO: throw/warn/ignore? + // throw new Error( + // `JSDOC @default annotation not found for '${propName}'.`, + // ); + console.warn(`JSDOC @default annotation not found for '${propName}'.`); + } + } else if (jsdocDefaultValue !== undefined) { + // `defaultValue` can't be undefined or we would've thrown earlier. + if (jsdocDefaultValue.value !== defaultValue!.value) { + throw new Error( + `Expected JSDOC @default annotation for prop '${propName}' of "${jsdocDefaultValue.value}" to equal runtime default value of "${defaultValue?.value}"`, + ); + } + } +} + function generateProps(reactAPI: ReactApi) { const header = '## Props'; @@ -305,9 +342,14 @@ function generateProps(reactAPI: ReactApi) { Object.keys(reactAPI.props).forEach((propName) => { const prop = reactAPI.props[propName]; - if (typeof prop.description === 'undefined') { - throw new Error(`The "${propName}" prop is missing a description`); - } + const renderedDefaultValue = prop.defaultValue?.value.replace(/\r?\n/g, ''); + const renderDefaultValue = Boolean( + renderedDefaultValue && + // Ignore "large" default values that would break the table layout. + renderedDefaultValue.length <= 150, + ); + + assertDescribeableProp(prop, propName, { renderDefaultValue }); if (propName === 'classes') { prop.description += ' See [CSS API](#css) below for more details.'; @@ -319,40 +361,6 @@ function generateProps(reactAPI: ReactApi) { return; } - const renderedDefaultValue = prop.defaultValue?.value.replace(/\r?\n/g, ''); - const renderDefaultValue = - renderedDefaultValue && - // Ignore "large" default values that would break the table layout. - renderedDefaultValue.length <= 150; - - const { defaultValue, jsdocDefaultValue } = prop; - if (jsdocDefaultValue !== undefined && defaultValue === undefined) { - throw new Error( - `Declared a @default annotation in JSDOC for prop '${propName}' but could not find a default value in the implementation.`, - ); - } else if ( - jsdocDefaultValue === undefined && - defaultValue !== undefined && - renderDefaultValue - ) { - // Discriminator for polymorphism which is not documented at the component level. - // The documentation of `component` does not know in which component it is used. - if (propName !== 'component') { - // TODO: throw/warn/ignore? - // throw new Error( - // `JSDOC @default annotation not found for '${propName}'.`, - // ); - console.warn(`JSDOC @default annotation not found for '${propName}'.`); - } - } else if (jsdocDefaultValue !== undefined) { - // `defaultValue` can't be undefined or we would've thrown earlier. - if (jsdocDefaultValue.value !== defaultValue!.value) { - throw new Error( - `Expected JSDOC @default annotation for prop '${propName}' of "${jsdocDefaultValue.value}" to equal runtime default value of "${defaultValue?.value}"`, - ); - } - } - let defaultValueColumn = ''; // give up on "large" default values e.g. big functions or objects if (renderDefaultValue) { From eb6343c9f6a3aeb6b8fc4d64cd227707cd334e32 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 2 Sep 2020 10:26:58 +0200 Subject: [PATCH 11/13] Don't warn on missing default if the prop is ignored --- docs/src/modules/utils/generateMarkdown.ts | 104 ++++++++++++--------- 1 file changed, 60 insertions(+), 44 deletions(-) diff --git a/docs/src/modules/utils/generateMarkdown.ts b/docs/src/modules/utils/generateMarkdown.ts index bd2d402891f71c..3c40acde1d4dd8 100644 --- a/docs/src/modules/utils/generateMarkdown.ts +++ b/docs/src/modules/utils/generateMarkdown.ts @@ -9,8 +9,11 @@ import { import { SOURCE_CODE_ROOT_URL, LANGUAGES_IN_PROGRESS } from 'docs/src/modules/constants'; import { pageToTitle } from './helpers'; -interface DescribeablePropDescriptor extends PropDescriptor { - description: string; +interface DescribeablePropDescriptor { + annotation: doctrine.Annotation; + defaultValue: string | null; + required: boolean; + type: PropTypeDescriptor; } export interface ReactApi extends ReactDocgenApi { @@ -125,8 +128,8 @@ function resolveType(type: NonNullable): string { throw new TypeError(`resolveType for '${type.type}' not implemented`); } -function generatePropDescription(prop: DescribeablePropDescriptor, propName: string) { - const { description } = prop; +function generatePropDescription(prop: DescribeablePropDescriptor, propName: string): string { + const { annotation } = prop; const type = prop.type; let deprecated = ''; @@ -137,34 +140,26 @@ function generatePropDescription(prop: DescribeablePropDescriptor, propName: str } } - const parsed = doctrine.parse(description, { - sloppy: true, - }); - // Two new lines result in a newline in the table. // All other new lines must be eliminated to prevent markdown mayhem. - const jsDocText = escapeCell(parsed.description) + const jsDocText = escapeCell(annotation.description) .replace(/(\r?\n){2}/g, '
') .replace(/\r?\n/g, ' '); - if (parsed.description.trim() === '' || parsed.tags.some((tag) => tag.title === 'ignore')) { - return null; - } - let signature = ''; // Split up the parsed tags into 'arguments' and 'returns' parsed objects. If there's no // 'returns' parsed object (i.e., one with title being 'returns'), make one of type 'void'. - const parsedArgs: doctrine.Tag[] = parsed.tags.filter((tag) => tag.title === 'param'); + const parsedArgs: doctrine.Tag[] = annotation.tags.filter((tag) => tag.title === 'param'); let parsedReturns: | doctrine.Tag | { description?: undefined; type: { name: string } } - | undefined = parsed.tags.find((tag) => tag.title === 'returns'); + | undefined = annotation.tags.find((tag) => tag.title === 'returns'); if (type.name === 'func' && (parsedArgs.length > 0 || parsedReturns !== undefined)) { parsedReturns = parsedReturns ?? { type: { name: 'void' } }; // Remove new lines from tag descriptions to avoid markdown errors. - parsed.tags.forEach((tag) => { + annotation.tags.forEach((tag) => { if (tag.description) { tag.description = tag.description.replace(/\r*\n/g, ' '); } @@ -295,26 +290,52 @@ The \`${reactAPI.styles.name}\` name can be used for providing [default props](/ `; } -function assertDescribeableProp( +/** + * Returns `null` if the prop should be ignored. + * Throws if it is invalid. + * + * @param prop + * @param propName + */ +function createDescribeableProp( prop: PropDescriptor, propName: string, - options: { renderDefaultValue: boolean }, -): asserts prop is DescribeablePropDescriptor { - const { defaultValue, jsdocDefaultValue, description } = prop; - const { renderDefaultValue } = options; +): DescribeablePropDescriptor | null { + const { defaultValue, jsdocDefaultValue, description, required, type } = prop; + + const renderedDefaultValue = defaultValue?.value.replace(/\r?\n/g, ''); + const renderDefaultValue = Boolean( + renderedDefaultValue && + // Ignore "large" default values that would break the table layout. + renderedDefaultValue.length <= 150, + ); if (description === undefined) { throw new Error(`The "${propName}" prop is missing a description.`); } + const annotation = doctrine.parse(description, { + sloppy: true, + }); + + if ( + annotation.description.trim() === '' || + annotation.tags.some((tag) => tag.title === 'ignore') + ) { + return null; + } + if (jsdocDefaultValue !== undefined && defaultValue === undefined) { throw new Error( `Declared a @default annotation in JSDOC for prop '${propName}' but could not find a default value in the implementation.`, ); } else if (jsdocDefaultValue === undefined && defaultValue !== undefined && renderDefaultValue) { - // Discriminator for polymorphism which is not documented at the component level. - // The documentation of `component` does not know in which component it is used. - if (propName !== 'component') { + const shouldHaveDefaultAnnotation = + // Discriminator for polymorphism which is not documented at the component level. + // The documentation of `component` does not know in which component it is used. + propName !== 'component'; + + if (shouldHaveDefaultAnnotation) { // TODO: throw/warn/ignore? // throw new Error( // `JSDOC @default annotation not found for '${propName}'.`, @@ -329,6 +350,13 @@ function assertDescribeableProp( ); } } + + return { + annotation, + defaultValue: renderDefaultValue ? renderedDefaultValue! : null, + required: Boolean(required), + type, + }; } function generateProps(reactAPI: ReactApi) { @@ -340,34 +368,22 @@ function generateProps(reactAPI: ReactApi) { |:-----|:-----|:--------|:------------|\n`; Object.keys(reactAPI.props).forEach((propName) => { - const prop = reactAPI.props[propName]; - - const renderedDefaultValue = prop.defaultValue?.value.replace(/\r?\n/g, ''); - const renderDefaultValue = Boolean( - renderedDefaultValue && - // Ignore "large" default values that would break the table layout. - renderedDefaultValue.length <= 150, - ); - - assertDescribeableProp(prop, propName, { renderDefaultValue }); - + const propDescriptor = reactAPI.props[propName]; if (propName === 'classes') { - prop.description += ' See [CSS API](#css) below for more details.'; + propDescriptor.description += ' See [CSS API](#css) below for more details.'; } - const description = generatePropDescription(prop, propName); - - if (description === null) { + const prop = createDescribeableProp(propDescriptor, propName); + if (prop === null) { return; } + const description = generatePropDescription(prop, propName); + let defaultValueColumn = ''; // give up on "large" default values e.g. big functions or objects - if (renderDefaultValue) { - defaultValueColumn = `${escapeCell( - // narrowed `renderedDefaultValue` to non-nullable by `renderDefaultValue` - renderedDefaultValue!, - )}`; + if (prop.defaultValue) { + defaultValueColumn = `${escapeCell(prop.defaultValue!)}`; } const chainedPropType = getChained(prop.type); From 746a15a176dd1bc4710aa76afb76ae9bbba456e5 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 2 Sep 2020 10:49:53 +0200 Subject: [PATCH 12/13] yarn docs:typescript:formatted --- docs/src/pages/components/progress/CircularWithValueLabel.js | 1 + docs/src/pages/components/steppers/CustomizedSteppers.js | 4 ++++ .../premium-themes/onepirate/modules/components/Typography.js | 1 + 3 files changed, 6 insertions(+) diff --git a/docs/src/pages/components/progress/CircularWithValueLabel.js b/docs/src/pages/components/progress/CircularWithValueLabel.js index 55a76e6aa6005c..a4be0b6df6c869 100644 --- a/docs/src/pages/components/progress/CircularWithValueLabel.js +++ b/docs/src/pages/components/progress/CircularWithValueLabel.js @@ -30,6 +30,7 @@ CircularProgressWithLabel.propTypes = { /** * The value of the progress indicator for the determinate variant. * Value between 0 and 100. + * @default 0 */ value: PropTypes.number.isRequired, }; diff --git a/docs/src/pages/components/steppers/CustomizedSteppers.js b/docs/src/pages/components/steppers/CustomizedSteppers.js index 5ac310b60f2599..782482329d9435 100644 --- a/docs/src/pages/components/steppers/CustomizedSteppers.js +++ b/docs/src/pages/components/steppers/CustomizedSteppers.js @@ -81,10 +81,12 @@ function QontoStepIcon(props) { QontoStepIcon.propTypes = { /** * Whether this step is active. + * @default false */ active: PropTypes.bool, /** * Mark the step as completed. Is passed to child components. + * @default false */ completed: PropTypes.bool, }; @@ -161,10 +163,12 @@ function ColorlibStepIcon(props) { ColorlibStepIcon.propTypes = { /** * Whether this step is active. + * @default false */ active: PropTypes.bool, /** * Mark the step as completed. Is passed to child components. + * @default false */ completed: PropTypes.bool, /** diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/Typography.js b/docs/src/pages/premium-themes/onepirate/modules/components/Typography.js index 165a2e4807ef0e..f2e31b1fa7b08a 100644 --- a/docs/src/pages/premium-themes/onepirate/modules/components/Typography.js +++ b/docs/src/pages/premium-themes/onepirate/modules/components/Typography.js @@ -99,6 +99,7 @@ Typography.propTypes = { marked: PropTypes.oneOf(['center', 'left', 'none']), /** * Applies the theme typography styles. + * @default 'body1' */ variant: PropTypes.oneOf([ 'body1', From 50d155b40f8a86991f506c535eecc49f646f414c Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 3 Sep 2020 10:27:38 +0200 Subject: [PATCH 13/13] Throw instead of warn --- docs/src/modules/utils/generateMarkdown.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/docs/src/modules/utils/generateMarkdown.ts b/docs/src/modules/utils/generateMarkdown.ts index 3c40acde1d4dd8..e41dab98f1881b 100644 --- a/docs/src/modules/utils/generateMarkdown.ts +++ b/docs/src/modules/utils/generateMarkdown.ts @@ -336,11 +336,7 @@ function createDescribeableProp( propName !== 'component'; if (shouldHaveDefaultAnnotation) { - // TODO: throw/warn/ignore? - // throw new Error( - // `JSDOC @default annotation not found for '${propName}'.`, - // ); - console.warn(`JSDOC @default annotation not found for '${propName}'.`); + throw new Error(`JSDOC @default annotation not found for '${propName}'.`); } } else if (jsdocDefaultValue !== undefined) { // `defaultValue` can't be undefined or we would've thrown earlier.