[docs] Update the API (mui#7963)

pages/api/app-bar.md

@@ -7,7 +7,7 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | Element |  | The content of the component. |
+| children | Node |  | The content of the component. |
 | classes | Object |  | Useful to extend the style applied to components. |
 | color | union:&nbsp;'inherit'<br>&nbsp;'primary'<br>&nbsp;'accent'<br>&nbsp;'default'<br> | 'primary' | The color of the component. It's using the theme palette when that makes sense. |
 | position | union:&nbsp;'static'<br>&nbsp;'fixed'<br>&nbsp;'absolute'<br> | 'fixed' | The positioning type. |

pages/api/avatar.md

@@ -10,7 +10,7 @@
 | alt | string |  | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. |
 | children | Element |  | Used to render icon or text elements inside the Avatar. `src` and `alt` props will not be used and no `img` will be rendered by default.<br>This can be an element, or just a string. |
 | classes | Object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string<br>&nbsp;Function<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
+| component | union:&nbsp;string<br>&nbsp;ComponentType<*><br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
 | imgProps | Object |  | Properties applied to the `img` element when the component is used to display an image. |
 | sizes | string |  | The `sizes` attribute for the `img` element. |
 | src | string |  | The `src` attribute for the `img` element. |

pages/api/bottom-navigation-button.md

@@ -7,10 +7,10 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| classes | object |  | Useful to extend the style applied to components. |
-| icon | node |  | The icon element. If a string is provided, it will be used as a font ligature. |
-| label | node |  | The label element. |
-| showLabel | bool |  | If `true`, the BottomNavigationButton will show its label. |
+| classes | Object |  | Useful to extend the style applied to components. |
+| icon | Element |  | The icon element. If a string is provided, it will be used as a font ligature. |
+| label | Element |  | The label element. |
+| showLabel | boolean |  | If `true`, the BottomNavigationButton will show its label. |
 | value | any |  | You can provide your own value. Otherwise, we fallback to the child position index. |
 
 Any other properties supplied will be spread to the root element.

pages/api/button-base.md

@@ -8,14 +8,14 @@
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | centerRipple | boolean | false | If `true`, the ripples will be centered. They won't start at the cursor interaction position. |
-| children | Element |  | The content of the component. |
+| children | Node |  | The content of the component. |
 | classes | Object | {} | Useful to extend the style applied to components. |
-| component | union:&nbsp;string<br>&nbsp;Function<br> |  | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. |
+| component | union:&nbsp;string<br>&nbsp;ComponentType<*><br> |  | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. |
 | disableRipple | boolean | false | If `true`, the ripple effect will be disabled. |
 | disabled | boolean |  | If `true`, the base button will be disabled. |
 | focusRipple | boolean | false | If `true`, the base button will have a keyboard focus ripple. `disableRipple` must also be `false`. |
 | keyboardFocusedClassName | string |  | The CSS class applied while the component is keyboard focused. |
-| onKeyboardFocus | Function |  | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
+| onKeyboardFocus | signature |  | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. |
 
 Any other properties supplied will be spread to the root element.
 

pages/api/button.md

@@ -7,10 +7,10 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | Element |  | The content of the button. |
+| <span style="color: #31a148">children *</span> | Node |  | The content of the button. |
 | classes | Object |  | Useful to extend the style applied to components. |
 | color | union:&nbsp;'default', 'inherit', 'primary', 'accent', 'contrast'<br> | 'default' | The color of the component. It's using the theme palette when that makes sense. |
-| component | union:&nbsp;string<br>&nbsp;Function<br> |  | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. |
+| component | union:&nbsp;string<br>&nbsp;ComponentType<*><br> |  | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. |
 | dense | boolean | false | Uses a smaller minWidth, ideal for things like card actions. |
 | disableFocusRipple | boolean | false | If `true`, the  keyboard focus ripple will be disabled. `disableRipple` must also be true. |
 | disableRipple | boolean | false | If `true`, the ripple effect will be disabled. |

pages/api/card-actions.md

@@ -7,7 +7,7 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | Element |  | The content of the component. |
+| children | Node |  | The content of the component. |
 | classes | Object |  | Useful to extend the style applied to components. |
 | disableActionSpacing | boolean | false | If `true`, the card actions do not have additional margin. |
 

pages/api/card-header.md

@@ -7,10 +7,10 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| avatar | Element |  | The Avatar  for the Card Header. |
+| avatar | Node |  | The Avatar for the Card Header. |
 | classes | Object |  | Useful to extend the style applied to components. |
-| subheader | Element |  | The content of the component. |
-| title | Element |  | The content of the Card Title. |
+| subheader | Node |  | The content of the component. |
+| title | Node |  | The content of the Card Title. |
 
 Any other properties supplied will be spread to the root element.
 

pages/api/checkbox.md

@@ -9,14 +9,14 @@
 |:-----|:-----|:--------|:------------|
 | checked | union:&nbsp;boolean<br>&nbsp;string<br> |  | If `true`, the component is checked. |
 | checkedClassName | string |  | The CSS class name of the root element when checked. |
-| checkedIcon | Element |  | The icon to display when the component is checked. If a string is provided, it will be used as a font ligature. |
+| checkedIcon | Node |  | The icon to display when the component is checked. If a string is provided, it will be used as a font ligature. |
 | classes | Object |  | Useful to extend the style applied to components. |
 | disableRipple | boolean |  | If `true`, the ripple effect will be disabled. |
 | disabled | boolean |  | If `true`, the switch will be disabled. |
 | disabledClassName | string |  | The CSS class name of the root element when disabled. |
-| icon | Element |  | The icon to display when the component is unchecked. If a string is provided, it will be used as a font ligature. |
+| icon | Node |  | The icon to display when the component is unchecked. If a string is provided, it will be used as a font ligature. |
 | indeterminate | boolean | false | If `true`, the component appears indeterminate. |
-| indeterminateIcon | union:&nbsp;string<br>&nbsp;Element<*><br> | <IndeterminateCheckBoxIcon /> | The icon to display when the component is indeterminate. If a string is provided, it will be used as a font ligature. |
+| indeterminateIcon | Node | <IndeterminateCheckBoxIcon /> | The icon to display when the component is indeterminate. If a string is provided, it will be used as a font ligature. |
 | inputProps | Object |  | Properties applied to the `input` element. |
 | inputRef | Function |  | Use that property to pass a ref callback to the native input component. |
 | name | string |  |  |

pages/api/chip.md

@@ -7,10 +7,10 @@ Chips represent complex entities in small blocks, such as a contact.
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| avatar | node |  | Avatar element. |
-| classes | object |  | Useful to extend the style applied to components. |
-| label | node |  | The content of the label. |
-| onRequestDelete | function |  | Callback function fired when the delete icon is clicked. If set, the delete icon will be shown.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
+| avatar | Element |  | Avatar element. |
+| classes | Object |  | Useful to extend the style applied to components. |
+| label | Element |  | The content of the label. |
+| onRequestDelete | signature |  | Callback function fired when the delete icon is clicked. If set, the delete icon will be shown. |
 
 Any other properties supplied will be spread to the root element.
 

pages/api/collapse.md

@@ -7,7 +7,7 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | Element |  | The content node to be collapsed. |
+| children | Node |  | The content node to be collapsed. |
 | classes | Object | {} | Useful to extend the style applied to components. |
 | in | boolean | false | If `true`, the component will transition in. |
 | onEnter | TransitionCallback |  | Callback fired before the component is entering. |

pages/api/dialog.md

@@ -7,7 +7,7 @@ Dialogs are overlaid modal paper based components with a backdrop.
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | Element |  | Dialog children, usually the included sub-components. |
+| children | Node |  | Dialog children, usually the included sub-components. |
 | classes | Object |  | Useful to extend the style applied to components. |
 | enterTransitionDuration | number | duration.enteringScreen | Duration of the animation when the element is entering. |
 | fullScreen | boolean | false | If `true`, it will be full-screen |
@@ -25,7 +25,7 @@ Dialogs are overlaid modal paper based components with a backdrop.
 | onExiting | TransitionCallback |  | Callback fired when the dialog is exiting. |
 | onRequestClose | Function |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
 | open | boolean | false | If `true`, the Dialog is open. |
-| transition | union:&nbsp;Function<br>&nbsp;Element<*><br> | Fade | Transition component. |
+| transition | Node | Fade | Transition component. |
 
 Any other properties supplied will be spread to the root element.
 

pages/api/drawer.md

@@ -7,16 +7,17 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
+| ModalProps | Object |  | Properties applied to the `Modal` element. |
 | SlideProps | Object |  | Properties applied to the `Slide` element. |
-| anchor | union:&nbsp;'left'<br>&nbsp;'top'<br>&nbsp;'right'<br>&nbsp;'bottom'<br> | 'left' | Side which will the drawer will appear from. |
-| children | Element |  | The contents of the drawer. |
+| anchor | union:&nbsp;'left'<br>&nbsp;'top'<br>&nbsp;'right'<br>&nbsp;'bottom'<br> | 'left' | Side from which the drawer will appear. |
+| <span style="color: #31a148">children *</span> | Node |  | The contents of the drawer. |
 | classes | Object | {} | Useful to extend the style applied to components. |
-| docked | boolean | false | If `true`, the drawer will dock itself and will no longer slide in with an overlay. |
 | elevation | number | 16 | The elevation of the drawer. |
 | enterTransitionDuration | number | duration.enteringScreen | Customizes duration of enter animation (ms) |
 | leaveTransitionDuration | number | duration.leavingScreen | Customizes duration of leave animation (ms) |
 | onRequestClose | Function |  | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
 | open | boolean | false | If `true`, the drawer is open. |
+| <span style="color: #31a148">type *</span> | union:&nbsp;'permanent'<br>&nbsp;'persistent'<br>&nbsp;'temporary'<br> | 'temporary' | The type of drawer. |
 
 Any other properties supplied will be spread to the root element.
 

pages/api/fade.md

@@ -7,7 +7,7 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | Element |  |  |
+| children | Element |  | A single child content element. |
 | enterTransitionDuration | number | duration.enteringScreen | Duration of the animation when the element is entering. |
 | in | boolean | false | If `true`, the component will transition in. |
 | leaveTransitionDuration | number | duration.leavingScreen | Duration of the animation when the element is exiting. |

pages/api/form-control-label.md

@@ -12,7 +12,7 @@
 | <span style="color: #31a148">control *</span> | Element |  | A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`. |
 | disabled | boolean | false | If `true`, the control will be disabled. |
 | inputRef | Function |  | Use that property to pass a ref callback to the native input component. |
-| <span style="color: #31a148">label *</span> | node |  | The text to be used in an enclosing label element. |
+| <span style="color: #31a148">label *</span> | Node |  | The text to be used in an enclosing label element. |
 | name | string |  |  |
 | onChange | Function |  | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback<br>*checked:* The `checked` value of the switch |
 | value | string |  | The value of the component. |

pages/api/form-control.md

@@ -7,9 +7,9 @@ Provides context such as dirty/focused/error/required for form inputs.
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | Element |  | The contents of the form control. |
+| children | $ReadOnlyArray |  | The contents of the form control. |
 | classes | Object | {} | Useful to extend the style applied to components. |
-| component | union:&nbsp;string<br>&nbsp;Function<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
+| component | union:&nbsp;string<br>&nbsp;ComponentType<*><br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
 | disabled | boolean | false | If `true`, the label, input and helper text should be displayed in a disabled state. |
 | error | boolean | false | If `true`, the label should be displayed in an error state. |
 | fullWidth | boolean | false | If `true`, the label will take up the full width of its container. |

pages/api/form-group.md

@@ -8,7 +8,7 @@ It provides compact row layout and FormLabel awareness.
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | Element |  | The content of the component. |
+| children | Node |  | The content of the component. |
 | classes | Object |  | Useful to extend the style applied to components. |
 | row | boolean | false | Display group of elements in a compact row. |
 

pages/api/form-helper-text.md

@@ -7,7 +7,7 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | Element |  | The content of the component. |
+| children | Node |  | The content of the component. |
 | classes | Object |  | Useful to extend the style applied to components. |
 | disabled | boolean |  | If `true`, the helper text should be displayed in a disabled state. |
 | error | boolean |  | If `true`, helper text should be displayed in an error state. |

pages/api/form-label.md

@@ -7,9 +7,9 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | Element |  | The content of the component. |
+| children | Node |  | The content of the component. |
 | classes | Object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string<br>&nbsp;Function<br> | 'label' | The component used for the root node. Either a string to use a DOM element or a component. |
+| component | union:&nbsp;string<br>&nbsp;ComponentType<*><br> | 'label' | The component used for the root node. Either a string to use a DOM element or a component. |
 | disabled | boolean |  | If `true`, the label should be displayed in a disabled state. |
 | error | boolean |  | If `true`, the label should be displayed in an error state. |
 | focused | boolean |  | If `true`, the input of this label is focused (used by `FormGroup` components). |

pages/api/grid-list-tile.md

@@ -7,10 +7,10 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | node |  | Theoretically you can pass any node as children, but the main use case is to pass an img, in which case GridListTile takes care of making the image "cover" available space (similar to `background-size: cover` or to `object-fit: cover`). |
-| classes | object |  | Useful to extend the style applied to components. |
+| children | $ReadOnlyArray |  | Theoretically you can pass any node as children, but the main use case is to pass an img, in which case GridListTile takes care of making the image "cover" available space (similar to `background-size: cover` or to `object-fit: cover`). |
+| classes | Object |  | Useful to extend the style applied to components. |
 | cols | number | 1 | Width of the tile in number of grid cells. |
-| component | union:&nbsp;string<br>&nbsp;func<br> | 'li' | The component used for the root node. Either a string to use a DOM element or a component. |
+| component | union:&nbsp;string<br>&nbsp;ComponentType<*><br> | 'li' | The component used for the root node. Either a string to use a DOM element or a component. |
 | rows | number | 1 | Height of the tile in number of grid cells. |
 
 Any other properties supplied will be spread to the root element.

pages/api/grid.md

@@ -8,9 +8,9 @@
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | align | union:&nbsp;'flex-start', 'center', 'flex-end', 'stretch', 'baseline'<br> | 'stretch' | Defines the `align-items` style property. It's applied for all screen sizes. |
-| children | Element |  | The content of the component. |
+| children | Node |  | The content of the component. |
 | classes | Object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string<br>&nbsp;Function<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
+| component | union:&nbsp;string<br>&nbsp;ComponentType<*><br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
 | container | boolean | false | If `true`, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. |
 | direction | union:&nbsp;'row'<br>&nbsp;'row-reverse'<br>&nbsp;'column'<br>&nbsp;'column-reverse'<br> | 'row' | Defines the `flex-direction` style property. It is applied for all screen sizes. |
 | hidden | [HiddenProps](/layout/hidden) | undefined | If provided, will wrap with [Hidden](/api/hidden) component and given properties. |

pages/api/grow.md

@@ -7,7 +7,7 @@ Grow transition used by popovers such as Menu.
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | Element |  | The content of the component. |
+| children | Element |  | A single child content element. |
 | onEnter | TransitionCallback |  | Callback fired before the component is entering |
 | onEntered | TransitionCallback |  | Callback fired when the component has entered |
 | onEntering | TransitionCallback |  | Callback fired when the component is entering |