diff --git a/docs/pages/api-docs/checkbox.md b/docs/pages/api-docs/checkbox.md index dd7583b2feb070..96053f83d40a4d 100644 --- a/docs/pages/api-docs/checkbox.md +++ b/docs/pages/api-docs/checkbox.md @@ -31,7 +31,7 @@ The `MuiCheckbox` name can be used for providing [default props](/customization/ | checked | bool | | If `true`, the component is checked. | | checkedIcon | node | <CheckBoxIcon /> | The icon to display when the component is checked. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'primary'
| 'secondary'
| 'default' | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. | +| color | 'default'
| 'primary'
| 'secondary' | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. | | disabled | bool | | If `true`, the checkbox will be disabled. | | disableRipple | bool | | If `true`, the ripple effect will be disabled. | | icon | node | <CheckBoxOutlineBlankIcon /> | The icon to display when the component is unchecked. | @@ -42,7 +42,7 @@ The `MuiCheckbox` name can be used for providing [default props](/customization/ | inputRef | ref | | Pass a ref to the `input` element. | | onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean). | | required | bool | | If `true`, the `input` element will be required. | -| size | 'small'
| 'medium' | 'medium' | The size of the checkbox. `small` is equivalent to the dense checkbox styling. | +| size | 'medium'
| 'small' | 'medium' | The size of the checkbox. `small` is equivalent to the dense checkbox styling. | | value | any | | The value of the component. The DOM API casts this to a string. The browser uses "on" as the default value. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/circular-progress.md b/docs/pages/api-docs/circular-progress.md index 5f082518f51282..a6d86808dd113b 100644 --- a/docs/pages/api-docs/circular-progress.md +++ b/docs/pages/api-docs/circular-progress.md @@ -33,7 +33,7 @@ The `MuiCircularProgress` name can be used for providing [default props](/custom | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'primary'
| 'secondary'
| 'inherit' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | +| color | 'inherit'
| 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | | disableShrink | bool | false | If `true`, the shrink animation is disabled. This only works if variant is `indeterminate`. | | size | number
| string | 40 | 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'. | | thickness | number | 3.6 | The thickness of the circle. | diff --git a/docs/pages/api-docs/click-away-listener.md b/docs/pages/api-docs/click-away-listener.md index 3498863f606f2a..c1dc348d395f6d 100644 --- a/docs/pages/api-docs/click-away-listener.md +++ b/docs/pages/api-docs/click-away-listener.md @@ -28,10 +28,10 @@ For instance, if you need to hide a menu when people click anywhere else on your | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children * | element | | The wrapped element.
⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). | -| disableReactTree | bool | false | If `true`, the React tree is ignored and only the DOM tree is considered. This prop changes how portaled elements are handled. | +| disableReactTree | bool | false | The mouse event to listen to. You can disable the listener by providing `false`. | | mouseEvent | 'onClick'
| 'onMouseDown'
| 'onMouseUp'
| false | 'onClick' | The mouse event to listen to. You can disable the listener by providing `false`. | | onClickAway * | func | | Callback fired when a "click away" event is detected. | -| touchEvent | 'onTouchStart'
| 'onTouchEnd'
| false | 'onTouchEnd' | The touch event to listen to. You can disable the listener by providing `false`. | +| touchEvent | 'onTouchEnd'
| 'onTouchStart'
| false | 'onTouchEnd' | The touch event to listen to. You can disable the listener by providing `false`. | The component cannot hold a ref. diff --git a/docs/pages/api-docs/expansion-panel.md b/docs/pages/api-docs/expansion-panel.md index 60c0a3c08be562..25ab8209794329 100644 --- a/docs/pages/api-docs/expansion-panel.md +++ b/docs/pages/api-docs/expansion-panel.md @@ -34,6 +34,7 @@ The `MuiExpansionPanel` name can be used for providing [default props](/customiz | disabled | bool | false | If `true`, the panel will be displayed in a disabled state. | | expanded | bool | | If `true`, expands the panel, otherwise collapse it. Setting this prop enables control over the panel. | | onChange | func | | Callback fired when the expand/collapse state is changed.

**Signature:**
`function(event: object, expanded: boolean) => void`
*event:* The event source of the callback.
*expanded:* The `expanded` state of the panel. | +| square | bool | false | If `true`, rounded corners are disabled. | | TransitionComponent | elementType | Collapse | The component used for the collapse effect. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. | | TransitionProps | object | | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. | diff --git a/docs/pages/api-docs/filled-input.md b/docs/pages/api-docs/filled-input.md index 13a390ddaa663e..4594b2b599ddba 100644 --- a/docs/pages/api-docs/filled-input.md +++ b/docs/pages/api-docs/filled-input.md @@ -31,7 +31,6 @@ The `MuiFilledInput` name can be used for providing [default props](/customizati | autoComplete | string | | This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). | | autoFocus | bool | | If `true`, the `input` element will be focused during the first mount. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| className | string | | The CSS class name of the wrapper element. | | color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | | defaultValue | any | | The default `input` element value. Use when the component is not controlled. | | disabled | bool | | If `true`, the `input` element will be disabled. | @@ -40,7 +39,7 @@ The `MuiFilledInput` name can be used for providing [default props](/customizati | error | bool | | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. | | fullWidth | bool | false | If `true`, the input will take up the full width of its container. | | id | string | | The id of the `input` element. | -| inputComponent | elementType | 'input' | The component used for the native input. Either a string to use a DOM element or a component. | +| inputComponent | elementType | 'input' | The component used for the `input` element. Either a string to use a DOM element or a component. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | | inputRef | ref | | Pass a ref to the `input` element. | | margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | @@ -50,8 +49,8 @@ The `MuiFilledInput` name can be used for providing [default props](/customizati | placeholder | string | | The short hint displayed in the input before the user enters a value. | | readOnly | bool | | It prevents the user from changing the value of the field (not from interacting with the field). | | required | bool | | If `true`, the `input` element will be required. | -| rows | string
| number | | Number of rows to display when multiline option is set to true. | -| rowsMax | string
| number | | Maximum number of rows to display when multiline option is set to true. | +| rows | number
| string | | Number of rows to display when multiline option is set to true. | +| rowsMax | number
| string | | Maximum number of rows to display when multiline option is set to true. | | startAdornment | node | | Start `InputAdornment` for this component. | | type | string | 'text' | 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). | | value | any | | The value of the `input` element, required for a controlled component. | diff --git a/docs/pages/api-docs/form-control-label.md b/docs/pages/api-docs/form-control-label.md index bbb320adaf3df5..236bad97c926f1 100644 --- a/docs/pages/api-docs/form-control-label.md +++ b/docs/pages/api-docs/form-control-label.md @@ -31,12 +31,11 @@ The `MuiFormControlLabel` name can be used for providing [default props](/custom |:-----|:-----|:--------|:------------| | checked | bool | | If `true`, the component appears selected. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| control | element | | A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`. | +| control * | element | | A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`. | | disabled | bool | | If `true`, the control will be disabled. | | inputRef | ref | | Pass a ref to the `input` element. | | label | node | | The text to be used in an enclosing label element. | -| labelPlacement | 'end'
| 'start'
| 'top'
| 'bottom' | 'end' | The position of the label. | -| name | string | | | +| labelPlacement | 'bottom'
| 'end'
| 'start'
| 'top' | 'end' | The position of the label. | | onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean). | | value | any | | The value of the component. | diff --git a/docs/pages/api-docs/input-base.md b/docs/pages/api-docs/input-base.md index 453d0806b7d4ef..1c8889e21276c3 100644 --- a/docs/pages/api-docs/input-base.md +++ b/docs/pages/api-docs/input-base.md @@ -33,7 +33,6 @@ The `MuiInputBase` name can be used for providing [default props](/customization | autoComplete | string | | This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). | | autoFocus | bool | | If `true`, the `input` element will be focused during the first mount. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| className | string | | The CSS class name of the wrapper element. | | color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | | defaultValue | any | | The default `input` element value. Use when the component is not controlled. | | disabled | bool | | If `true`, the `input` element will be disabled. | @@ -52,9 +51,9 @@ The `MuiInputBase` name can be used for providing [default props](/customization | placeholder | string | | The short hint displayed in the input before the user enters a value. | | readOnly | bool | | It prevents the user from changing the value of the field (not from interacting with the field). | | required | bool | | If `true`, the `input` element will be required. | -| rows | string
| number | | Number of rows to display when multiline option is set to true. | -| rowsMax | string
| number | | Maximum number of rows to display when multiline option is set to true. | -| rowsMin | string
| number | | Minimum number of rows to display when multiline option is set to true. | +| rows | number
| string | | Number of rows to display when multiline option is set to true. | +| rowsMax | number
| string | | Maximum number of rows to display when multiline option is set to true. | +| rowsMin | number
| string | | Minimum number of rows to display when multiline option is set to true. | | startAdornment | node | | Start `InputAdornment` for this component. | | type | string | 'text' | 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). | | value | any | | The value of the `input` element, required for a controlled component. | diff --git a/docs/pages/api-docs/input-label.md b/docs/pages/api-docs/input-label.md index 596bd85f9fe055..034d046aa8f21e 100644 --- a/docs/pages/api-docs/input-label.md +++ b/docs/pages/api-docs/input-label.md @@ -38,7 +38,7 @@ The `MuiInputLabel` name can be used for providing [default props](/customizatio | margin | 'dense' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | | required | bool | | if `true`, the label will indicate that the input is required. | | shrink | bool | | If `true`, the label is shrunk. | -| variant | 'standard'
| 'outlined'
| 'filled' | | The variant to use. | +| variant | 'filled'
| 'outlined'
| 'standard' | | The variant to use. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/input.md b/docs/pages/api-docs/input.md index 5d4383ad819ae9..0f0ffe89423c2b 100644 --- a/docs/pages/api-docs/input.md +++ b/docs/pages/api-docs/input.md @@ -31,7 +31,6 @@ The `MuiInput` name can be used for providing [default props](/customization/glo | autoComplete | string | | This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). | | autoFocus | bool | | If `true`, the `input` element will be focused during the first mount. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| className | string | | The CSS class name of the wrapper element. | | color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | | defaultValue | any | | The default `input` element value. Use when the component is not controlled. | | disabled | bool | | If `true`, the `input` element will be disabled. | @@ -40,7 +39,7 @@ The `MuiInput` name can be used for providing [default props](/customization/glo | error | bool | | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. | | fullWidth | bool | false | If `true`, the input will take up the full width of its container. | | id | string | | The id of the `input` element. | -| inputComponent | elementType | 'input' | The component used for the native input. Either a string to use a DOM element or a component. | +| inputComponent | elementType | 'input' | The component used for the `input` element. Either a string to use a DOM element or a component. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | | inputRef | ref | | Pass a ref to the `input` element. | | margin | 'dense'
| 'none' | | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. | @@ -50,8 +49,8 @@ The `MuiInput` name can be used for providing [default props](/customization/glo | placeholder | string | | The short hint displayed in the input before the user enters a value. | | readOnly | bool | | It prevents the user from changing the value of the field (not from interacting with the field). | | required | bool | | If `true`, the `input` element will be required. | -| rows | string
| number | | Number of rows to display when multiline option is set to true. | -| rowsMax | string
| number | | Maximum number of rows to display when multiline option is set to true. | +| rows | number
| string | | Number of rows to display when multiline option is set to true. | +| rowsMax | number
| string | | Maximum number of rows to display when multiline option is set to true. | | startAdornment | node | | Start `InputAdornment` for this component. | | type | string | 'text' | 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). | | value | any | | The value of the `input` element, required for a controlled component. | diff --git a/docs/pages/api-docs/outlined-input.md b/docs/pages/api-docs/outlined-input.md index 69f7e3868b40a2..717695c3b5eba3 100644 --- a/docs/pages/api-docs/outlined-input.md +++ b/docs/pages/api-docs/outlined-input.md @@ -31,7 +31,6 @@ The `MuiOutlinedInput` name can be used for providing [default props](/customiza | autoComplete | string | | This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). | | autoFocus | bool | | If `true`, the `input` element will be focused during the first mount. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| className | string | | The CSS class name of the wrapper element. | | color | 'primary'
| 'secondary' | | The color of the component. It supports those theme colors that make sense for this component. | | defaultValue | any | | The default `input` element value. Use when the component is not controlled. | | disabled | bool | | If `true`, the `input` element will be disabled. | @@ -39,7 +38,7 @@ The `MuiOutlinedInput` name can be used for providing [default props](/customiza | error | bool | | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. | | fullWidth | bool | false | If `true`, the input will take up the full width of its container. | | id | string | | The id of the `input` element. | -| inputComponent | elementType | 'input' | The component used for the native input. Either a string to use a DOM element or a component. | +| inputComponent | elementType | 'input' | The component used for the `input` element. Either a string to use a DOM element or a component. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | | inputRef | ref | | Pass a ref to the `input` element. | | label | node | | The label of the input. It is only used for layout. The actual labelling is handled by `InputLabel`. If specified `labelWidth` is ignored. | @@ -52,8 +51,8 @@ The `MuiOutlinedInput` name can be used for providing [default props](/customiza | placeholder | string | | The short hint displayed in the input before the user enters a value. | | readOnly | bool | | It prevents the user from changing the value of the field (not from interacting with the field). | | required | bool | | If `true`, the `input` element will be required. | -| rows | string
| number | | Number of rows to display when multiline option is set to true. | -| rowsMax | string
| number | | Maximum number of rows to display when multiline option is set to true. | +| rows | number
| string | | Number of rows to display when multiline option is set to true. | +| rowsMax | number
| string | | Maximum number of rows to display when multiline option is set to true. | | startAdornment | node | | Start `InputAdornment` for this component. | | type | string | 'text' | 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). | | value | any | | The value of the `input` element, required for a controlled component. | diff --git a/docs/pages/api-docs/popover.md b/docs/pages/api-docs/popover.md index 9b7dd7add283d1..766632db2b27cf 100644 --- a/docs/pages/api-docs/popover.md +++ b/docs/pages/api-docs/popover.md @@ -30,16 +30,16 @@ The `MuiPopover` name can be used for providing [default props](/customization/g |:-----|:-----|:--------|:------------| | action | ref | | A ref for imperative actions. It currently only supports updatePosition() action. | | anchorEl | object
| func | | This is the DOM element, or a function that returns the DOM element, that may be used to set the position of the popover. | -| anchorOrigin | { horizontal: number
| 'left'
| 'center'
| 'right', vertical: number
| 'top'
| 'center'
| 'bottom' } | { vertical: 'top', horizontal: 'left',} | This is the point on the anchor where the popover's `anchorEl` will attach to. This is not used when the anchorReference is 'anchorPosition'.
Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. | +| anchorOrigin | { horizontal: 'center'
| 'left'
| 'right'
| number, vertical: 'bottom'
| 'center'
| 'top'
| number } | { vertical: 'top', horizontal: 'left',} | This is the point on the anchor where the popover's `anchorEl` will attach to. This is not used when the anchorReference is 'anchorPosition'.
Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. | | anchorPosition | { left: number, top: number } | | This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area. | -| anchorReference | 'anchorEl'
| 'anchorPosition'
| 'none' | 'anchorEl' | | +| anchorReference | 'anchorEl'
| 'anchorPosition'
| 'none' | 'anchorEl' | This determines which anchor prop to refer to to set the position of the popover. | | children | node | | The content of the component. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| container | object
| func | | A node, component instance, or function that returns either. The `container` will passed to the Modal component. By default, it uses the body of the anchorEl's top-level document object, so it's simply `document.body` most of the time. | +| container | func
| React.Component
| Element | | A node, component instance, or function that returns either. The `container` will passed to the Modal component. By default, it uses the body of the anchorEl's top-level document object, so it's simply `document.body` most of the time. | | elevation | number | 8 | The elevation of the popover. | | getContentAnchorEl | func | | This function is called in order to retrieve the content anchor element. It's the opposite of the `anchorEl` prop. The content anchor element should be an element inside the popover. It's used to correctly scroll and set the position of the popover. The positioning strategy tries to make the content anchor element just above the anchor element. | | marginThreshold | number | 16 | Specifies how close to the edge of the window the popover can appear. | -| onClose | func | | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object, reason: string) => void`
*event:* The event source of the callback.
*reason:* Can be: `"escapeKeyDown"`, `"backdropClick"`. | +| onClose | func | | Callback fired when the component requests to be closed. | | onEnter | func | | Callback fired before the component is entering. | | onEntered | func | | Callback fired when the component has entered. | | onEntering | func | | Callback fired when the component is entering. | @@ -48,9 +48,9 @@ The `MuiPopover` name can be used for providing [default props](/customization/g | onExiting | func | | Callback fired when the component is exiting. | | open * | bool | | If `true`, the popover is visible. | | PaperProps | { component?: element type } | {} | Props applied to the [`Paper`](/api/paper/) element. | -| transformOrigin | { horizontal: number
| 'left'
| 'center'
| 'right', vertical: number
| 'top'
| 'center'
| 'bottom' } | { vertical: 'top', horizontal: 'left',} | This is the point on the popover which will attach to the anchor's origin.
Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. | +| transformOrigin | { horizontal: 'center'
| 'left'
| 'right'
| number, vertical: 'bottom'
| 'center'
| 'top'
| number } | { vertical: 'top', horizontal: 'left',} | This is the point on the popover which will attach to the anchor's origin.
Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. | | TransitionComponent | elementType | Grow | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. | -| transitionDuration | number
| { enter?: number, exit?: number }
| 'auto' | 'auto' | Set to 'auto' to automatically calculate transition time based on height. | +| transitionDuration | 'auto'
| number
| { appear?: number, enter?: number, exit?: number } | 'auto' | Set to 'auto' to automatically calculate transition time based on height. | | TransitionProps | object | {} | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/popper.md b/docs/pages/api-docs/popper.md index 3215bfb8683845..065b88fd458ec8 100644 --- a/docs/pages/api-docs/popper.md +++ b/docs/pages/api-docs/popper.md @@ -28,7 +28,7 @@ Poppers rely on the 3rd party library [Popper.js](https://github.com/FezVrasta/p |:-----|:-----|:--------|:------------| | anchorEl | object
| func | | This is the reference element, or a function that returns the reference element, that may be used to set the position of the popover. The return value will passed as the reference object of the Popper instance.
The reference element should be an HTML Element instance or a referenceObject: https://popper.js.org/popper-documentation.html#referenceObject. | | children * | node
| func | | Popper render function or node. | -| container | object
| func | | A node, component instance, or function that returns either. The `container` will passed to the Modal component. By default, it uses the body of the anchorEl's top-level document object, so it's simply `document.body` most of the time. | +| container | func
| React.Component
| Element | | A node, component instance, or function that returns either. The `container` will passed to the Modal component. By default, it uses the body of the anchorEl's top-level document object, so it's simply `document.body` most of the time. | | disablePortal | bool | false | Disable the portal behavior. The children stay within it's parent DOM hierarchy. | | keepMounted | bool | false | 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. | | modifiers | object | | Popper.js is based on a "plugin-like" architecture, most of its features are fully encapsulated "modifiers".
A modifier is a function that is called each time Popper.js needs to compute the position of the popper. For this reason, modifiers should be very performant to avoid bottlenecks. To learn how to create a modifier, [read the modifiers documentation](https://github.com/FezVrasta/popper.js/blob/master/docs/_includes/popper-documentation.md#modifiers--object). | diff --git a/docs/pages/api-docs/radio.md b/docs/pages/api-docs/radio.md index 17f2df7e1f4c76..c4f0b9921bbfa5 100644 --- a/docs/pages/api-docs/radio.md +++ b/docs/pages/api-docs/radio.md @@ -31,7 +31,7 @@ The `MuiRadio` name can be used for providing [default props](/customization/glo | checked | bool | | If `true`, the component is checked. | | checkedIcon | node | | The icon to display when the component is checked. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'primary'
| 'secondary'
| 'default' | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. | +| color | 'default'
| 'primary'
| 'secondary' | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. | | disabled | bool | | If `true`, the radio will be disabled. | | disableRipple | bool | | If `true`, the ripple effect will be disabled. | | icon | node | | The icon to display when the component is unchecked. | @@ -41,7 +41,7 @@ The `MuiRadio` name can be used for providing [default props](/customization/glo | name | string | | Name attribute of the `input` element. | | onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). You can pull out the new checked state by accessing `event.target.checked` (boolean). | | required | bool | | If `true`, the `input` element will be required. | -| size | 'small'
| 'medium' | 'medium' | The size of the radio. `small` is equivalent to the dense radio styling. | +| size | 'medium'
| 'small' | 'medium' | The size of the radio. `small` is equivalent to the dense radio styling. | | value | any | | The value of the component. The DOM API casts this to a string. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/rating.md b/docs/pages/api-docs/rating.md index 32b0bbda6ed7c8..1f34f238bfeef2 100644 --- a/docs/pages/api-docs/rating.md +++ b/docs/pages/api-docs/rating.md @@ -42,7 +42,7 @@ The `MuiRating` name can be used for providing [default props](/customization/gl | onChangeActive | func | | Callback function that is fired when the hover state changes.

**Signature:**
`function(event: object, value: number) => void`
*event:* The event source of the callback.
*value:* The new value. | | precision | number | 1 | The minimum increment value change allowed. | | readOnly | bool | false | Removes all hover effects and pointer events. | -| size | 'small'
| 'medium'
| 'large' | 'medium' | The size of the rating. | +| size | 'large'
| 'medium'
| 'small' | 'medium' | The size of the rating. | | value | number | | The rating value. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/select.md b/docs/pages/api-docs/select.md index d69a7d42e56ad4..608cfe90e5c955 100644 --- a/docs/pages/api-docs/select.md +++ b/docs/pages/api-docs/select.md @@ -34,6 +34,7 @@ The `MuiSelect` name can be used for providing [default props](/customization/gl | defaultValue | any | | The default element value. Use when the component is not controlled. | | displayEmpty | bool | false | If `true`, a value is displayed even if no items are selected.
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). | | IconComponent | elementType | ArrowDropDownIcon | The icon that displays the arrow. | +| id | string | | The `id` of the wrapper element or the `select` elment when `native`. | | input | element | | An `Input` element; does not have to be a material-ui specific `Input`. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. When `native` is `true`, the attributes are applied on the `select` element. | | label | node | | See [OutlinedInput#label](/api/outlined-input/#props) | diff --git a/docs/pages/api-docs/slide.md b/docs/pages/api-docs/slide.md index 4805bbd9ee0779..1e80d1ca3aac16 100644 --- a/docs/pages/api-docs/slide.md +++ b/docs/pages/api-docs/slide.md @@ -28,9 +28,9 @@ It uses [react-transition-group](https://github.com/reactjs/react-transition-gro | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| | children | element | | A single child content element.
⚠️ [Needs to be able to hold a ref](/guides/composition/#caveat-with-refs). | -| direction | 'left'
| 'right'
| 'up'
| 'down' | 'down' | Direction the child node will enter from. | +| direction | 'down'
| 'left'
| 'right'
| 'up' | 'down' | Direction the child node will enter from. | | in | bool | | If `true`, show the component; triggers the enter or exit animation. | -| timeout | number
| { enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | +| timeout | number
| { appear?: number, enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen,} | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/speed-dial-action.md b/docs/pages/api-docs/speed-dial-action.md index d0aab8f7d03a53..c11ea47e33482a 100644 --- a/docs/pages/api-docs/speed-dial-action.md +++ b/docs/pages/api-docs/speed-dial-action.md @@ -32,6 +32,8 @@ The `MuiSpeedDialAction` name can be used for providing [default props](/customi | delay | number | 0 | Adds a transition delay, to allow a series of SpeedDialActions to be animated. | | FabProps | object | {} | Props applied to the [`Fab`](/api/fab/) component. | | icon | node | | The Icon to display in the SpeedDial Fab. | +| id | string | | This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id. | +| open | bool | | If `true`, the tooltip is shown. | | TooltipClasses | object | | `classes` prop applied to the [`Tooltip`](/api/tooltip/) element. | | tooltipOpen | bool | false | Make the tooltip always visible when the SpeedDial is open. | | tooltipPlacement | 'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top' | 'left' | Placement of the tooltip. | diff --git a/docs/pages/api-docs/step-content.md b/docs/pages/api-docs/step-content.md index 42d528e02d210c..0bd3a31b8881c2 100644 --- a/docs/pages/api-docs/step-content.md +++ b/docs/pages/api-docs/step-content.md @@ -31,7 +31,7 @@ The `MuiStepContent` name can be used for providing [default props](/customizati | children | node | | Step content. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | TransitionComponent | elementType | Collapse | The component used for the transition. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. | -| transitionDuration | number
| { enter?: number, exit?: number }
| 'auto' | 'auto' | Adjust the duration of the content expand transition. Passed as a prop to the transition component.
Set to 'auto' to automatically calculate transition time based on height. | +| transitionDuration | 'auto'
| number
| { appear?: number, enter?: number, exit?: number } | 'auto' | Adjust the duration of the content expand transition. Passed as a prop to the transition component.
Set to 'auto' to automatically calculate transition time based on height. | | TransitionProps | object | | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/step-icon.md b/docs/pages/api-docs/step-icon.md index 2f48fec3f803c2..2805e172fdab4f 100644 --- a/docs/pages/api-docs/step-icon.md +++ b/docs/pages/api-docs/step-icon.md @@ -32,7 +32,7 @@ The `MuiStepIcon` name can be used for providing [default props](/customization/ | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | completed | bool | false | Mark the step as completed. Is passed to child components. | | error | bool | false | Mark the step as failed. | -| icon * | node | | The label displayed in the step icon. | +| icon | node | | The label displayed in the step icon. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/stepper.md b/docs/pages/api-docs/stepper.md index c376584168fe2b..97746f831d9f39 100644 --- a/docs/pages/api-docs/stepper.md +++ b/docs/pages/api-docs/stepper.md @@ -30,7 +30,7 @@ The `MuiStepper` name can be used for providing [default props](/customization/g |:-----|:-----|:--------|:------------| | activeStep | number | 0 | Set the active step (zero based index). Set to -1 to disable all the steps. | | alternativeLabel | bool | false | If set to 'true' and orientation is horizontal, then the step label will be positioned under the icon. | -| children * | node | | Two or more `` components. | +| children | node | | Two or more `` components. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | connector | element | <StepConnector /> | An element to be placed between each step. | | nonLinear | bool | false | If set the `Stepper` will not assist in controlling steps for linear flow. | diff --git a/docs/pages/api-docs/switch.md b/docs/pages/api-docs/switch.md index d302f28d49d22d..953aaa1a7228ce 100644 --- a/docs/pages/api-docs/switch.md +++ b/docs/pages/api-docs/switch.md @@ -31,18 +31,17 @@ The `MuiSwitch` name can be used for providing [default props](/customization/gl | checked | bool | | If `true`, the component is checked. | | checkedIcon | node | | The icon to display when the component is checked. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| color | 'primary'
| 'secondary'
| 'default' | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. | +| color | 'default'
| 'primary'
| 'secondary' | 'secondary' | The color of the component. It supports those theme colors that make sense for this component. | | disabled | bool | | If `true`, the switch will be disabled. | | disableRipple | bool | | If `true`, the ripple effect will be disabled. | -| edge | 'start'
| 'end'
| false | false | If given, uses a negative margin to counteract the padding on one 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). | +| edge | 'end'
| 'start'
| false | false | If given, uses a negative margin to counteract the padding on one 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). | | icon | node | | The icon to display when the component is unchecked. | | id | string | | The id of the `input` element. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | | inputRef | ref | | Pass a ref to the `input` element. | -| onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean). | +| onChange | func | | Callback fired when the state is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). You can pull out the new checked state by accessing `event.target.checked` (boolean). | | required | bool | | If `true`, the `input` element will be required. | -| size | 'small'
| 'medium' | 'medium' | The size of the switch. `small` is equivalent to the dense switch styling. | -| type | string | | The input component prop `type`. | +| size | 'medium'
| 'small' | 'medium' | The size of the switch. `small` is equivalent to the dense switch styling. | | value | any | | The value of the component. The DOM API casts this to a string. The browser uses "on" as the default value. | The `ref` is forwarded to the root element. diff --git a/docs/pages/api-docs/text-field.md b/docs/pages/api-docs/text-field.md index 6d747d1ec55cb2..b2584f10dd6fb8 100644 --- a/docs/pages/api-docs/text-field.md +++ b/docs/pages/api-docs/text-field.md @@ -69,24 +69,24 @@ The `MuiTextField` name can be used for providing [default props](/customization | helperText | node | | The helper text content. | | id | string | | The id of the `input` element. Use this prop to make `label` and `helperText` accessible for screen readers. | | InputLabelProps | object | | Props applied to the [`InputLabel`](/api/input-label/) element. | -| InputProps | object | | Props applied to the Input element. It will be a [`FilledInput`](/api/filled-input/), [`OutlinedInput`](/api/outlined-input/) or [`Input`](/api/input/) component depending on the `variant` prop value. | | inputProps | object | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. | +| InputProps | object | | Props applied to the Input element. It will be a [`FilledInput`](/api/filled-input/), [`OutlinedInput`](/api/outlined-input/) or [`Input`](/api/input/) component depending on the `variant` prop value. | | inputRef | ref | | Pass a ref to the `input` element. | | label | node | | The label content. | -| margin | 'none'
| 'dense'
| 'normal' | | If `dense` or `normal`, will adjust vertical spacing of this and contained components. | +| margin | 'dense'
| 'none'
| 'normal' | | If `dense` or `normal`, will adjust vertical spacing of this and contained components. | | multiline | bool | false | If `true`, a textarea element will be rendered instead of an input. | | name | string | | Name attribute of the `input` element. | | onChange | func | | Callback fired when the value is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value` (string). | | placeholder | string | | The short hint displayed in the input before the user enters a value. | | required | bool | false | If `true`, the label is displayed as required and the `input` element` will be required. | -| rows | string
| number | | Number of rows to display when multiline option is set to true. | -| rowsMax | string
| number | | Maximum number of rows to display when multiline option is set to true. | +| rows | number
| string | | Number of rows to display when multiline option is set to true. | +| rowsMax | number
| string | | Maximum number of rows to display when multiline option is set to true. | | select | bool | false | 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. | | SelectProps | object | | Props applied to the [`Select`](/api/select/) element. | -| size | 'small'
| 'medium' | | The size of the text field. | +| size | 'medium'
| 'small' | | The size of the text field. | | type | string | | 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). | | value | any | | The value of the `input` element, required for a controlled component. | -| variant | 'standard'
| 'outlined'
| 'filled' | 'standard' | The variant to use. | +| variant | 'filled'
| 'outlined'
| 'standard' | 'standard' | The variant to use. | The `ref` is forwarded to the root element. diff --git a/docs/src/pages/components/steppers/CustomizedSteppers.js b/docs/src/pages/components/steppers/CustomizedSteppers.js index c66fb4bd44e106..d546c499514469 100644 --- a/docs/src/pages/components/steppers/CustomizedSteppers.js +++ b/docs/src/pages/components/steppers/CustomizedSteppers.js @@ -75,7 +75,13 @@ function QontoStepIcon(props) { } QontoStepIcon.propTypes = { + /** + * Whether this step is active. + */ active: PropTypes.bool, + /** + * Mark the step as completed. Is passed to child components. + */ completed: PropTypes.bool, }; @@ -149,8 +155,17 @@ function ColorlibStepIcon(props) { } ColorlibStepIcon.propTypes = { + /** + * Whether this step is active. + */ active: PropTypes.bool, + /** + * Mark the step as completed. Is passed to child components. + */ completed: PropTypes.bool, + /** + * The label displayed in the step icon. + */ icon: PropTypes.node, }; diff --git a/package.json b/package.json index ce1f87e38bfc40..8b9a7afb7e8958 100644 --- a/package.json +++ b/package.json @@ -142,7 +142,7 @@ "ts-node": "^8.3.0", "tslint": "5.14.0", "typescript": "^3.8.2", - "typescript-to-proptypes": "^1.4.2", + "typescript-to-proptypes": "^1.5.0", "unist-util-visit": "^2.0.2", "vrtest-mui": "^0.3.3", "webpack": "^4.41.0", diff --git a/packages/material-ui-lab/src/Rating/Rating.d.ts b/packages/material-ui-lab/src/Rating/Rating.d.ts index 2da1171284ce56..d11bb7c5478ebd 100644 --- a/packages/material-ui-lab/src/Rating/Rating.d.ts +++ b/packages/material-ui-lab/src/Rating/Rating.d.ts @@ -6,20 +6,83 @@ export interface IconContainerProps extends React.HTMLAttributes, RatingClassKey, 'onChange'> { + extends StandardProps< + React.HTMLAttributes, + RatingClassKey, + 'children' | 'onChange' + > { + /** + * The default value. Use when the component is not controlled. + */ defaultValue?: number; + /** + * If `true`, the rating will be disabled. + */ disabled?: boolean; - emptyIcon?: React.ReactElement; + /** + * The icon to display when empty. + */ + emptyIcon?: React.ReactNode; + /** + * The label read when the rating input is empty. + */ + emptyLabelText?: React.ReactNode; + /** + * Accepts a function which returns a string value that provides a user-friendly name for the current value of the rating. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). + * + * @param {number} value The rating label's value to format. + * @returns {string} + */ getLabelText?: (value: number) => string; - icon?: React.ReactElement; + /** + * The icon to display. + */ + icon?: React.ReactNode; + /** + * The component containing the icon. + */ IconContainerComponent?: React.ElementType; + /** + * Maximum rating. + */ max?: number; + /** + * The name attribute of the radio `input` elements. + * If `readOnly` is false, the prop is required, + * this input name`should be unique within the parent form. + */ name?: string; + /** + * Callback fired when the value changes. + * + * @param {object} event The event source of the callback. + * @param {number} value The new value. + */ onChange?: (event: React.ChangeEvent<{}>, value: number | null) => void; + /** + * Callback function that is fired when the hover state changes. + * + * @param {object} event The event source of the callback. + * @param {number} value The new value. + */ onChangeActive?: (event: React.ChangeEvent<{}>, value: number) => void; + /** + * The minimum increment value change allowed. + */ precision?: number; + /** + * Removes all hover effects and pointer events. + */ readOnly?: boolean; + /** + * The size of the rating. + */ size?: 'small' | 'medium' | 'large'; + /** + * The rating value. + */ value?: number | null; } @@ -51,6 +114,4 @@ export type RatingClassKey = * * - [Rating API](https://material-ui.com/api/rating/) */ -declare const Rating: React.ComponentType; - -export default Rating; +export default function Rating(props: RatingProps): JSX.Element; diff --git a/packages/material-ui-lab/src/Rating/Rating.js b/packages/material-ui-lab/src/Rating/Rating.js index a89cbce9a9b0c2..1cb78131b6fbc3 100644 --- a/packages/material-ui-lab/src/Rating/Rating.js +++ b/packages/material-ui-lab/src/Rating/Rating.js @@ -478,11 +478,15 @@ const Rating = React.forwardRef(function Rating(props, ref) { }); Rating.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ @@ -573,7 +577,7 @@ Rating.propTypes = { /** * The size of the rating. */ - size: PropTypes.oneOf(['small', 'medium', 'large']), + size: PropTypes.oneOf(['large', 'medium', 'small']), /** * The rating value. */ diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js index fd1f0ceb20eca7..4aedb8e58d849b 100644 --- a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js +++ b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js @@ -184,11 +184,12 @@ SpeedDialAction.propTypes = { */ icon: PropTypes.node, /** - * @ignore + * This prop is used to help implement the accessibility logic. + * If you don't provide this prop. It falls back to a randomly generated id. */ id: PropTypes.string, /** - * @ignore + * If `true`, the tooltip is shown. */ open: PropTypes.bool, /** diff --git a/packages/material-ui/src/Checkbox/Checkbox.d.ts b/packages/material-ui/src/Checkbox/Checkbox.d.ts index 2de30e2ba2e930..ef3a0b8a604abd 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.d.ts +++ b/packages/material-ui/src/Checkbox/Checkbox.d.ts @@ -8,12 +8,74 @@ export interface CheckboxProps CheckboxClassKey, 'checkedIcon' | 'color' | 'icon' | 'type' > { + /** + * If `true`, the component is checked. + */ + checked?: SwitchBaseProps['checked']; + /** + * The icon to display when the component is checked. + */ checkedIcon?: React.ReactNode; + /** + * The color of the component. It supports those theme colors that make sense for this component. + */ color?: 'primary' | 'secondary' | 'default'; + /** + * If `true`, the checkbox will be disabled. + */ + disabled?: SwitchBaseProps['disabled']; + /** + * If `true`, the ripple effect will be disabled. + */ + disableRipple?: SwitchBaseProps['disableRipple']; + /** + * The icon to display when the component is unchecked. + */ icon?: React.ReactNode; + /** + * The id of the `input` element. + */ + id?: SwitchBaseProps['id']; + /** + * If `true`, the component appears indeterminate. + * This does not set the native input element to indeterminate due + * to inconsistent behavior across browsers. + * However, we set a `data-indeterminate` attribute on the input. + */ indeterminate?: boolean; + /** + * The icon to display when the component is indeterminate. + */ indeterminateIcon?: React.ReactNode; + /** + * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. + */ + inputProps?: SwitchBaseProps['inputProps']; + /** + * Pass a ref to the `input` element. + */ + inputRef?: React.Ref; + /** + * Callback fired when the state is changed. + * + * @param {object} event The event source of the callback. + * You can pull out the new checked state by accessing `event.target.checked` (boolean). + */ + onChange?: SwitchBaseProps['onChange']; + /** + * If `true`, the `input` element will be required. + */ + required?: SwitchBaseProps['required']; + /** + * The size of the checkbox. + * `small` is equivalent to the dense checkbox styling. + */ size?: 'small' | 'medium'; + /** + * The value of the component. The DOM API casts this to a string. + * The browser uses "on" as the default value. + */ + value?: SwitchBaseProps['value']; } export type CheckboxClassKey = @@ -34,6 +96,4 @@ export type CheckboxClassKey = * - [Checkbox API](https://material-ui.com/api/checkbox/) * - inherits [IconButton API](https://material-ui.com/api/icon-button/) */ -declare const Checkbox: React.ComponentType; - -export default Checkbox; +export default function Checkbox(props: CheckboxProps): JSX.Element; diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js index ceff0e119b2e32..7916091ab5830a 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.js +++ b/packages/material-ui/src/Checkbox/Checkbox.js @@ -100,6 +100,10 @@ const Checkbox = React.forwardRef(function Checkbox(props, ref) { }); Checkbox.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * If `true`, the component is checked. */ @@ -112,11 +116,11 @@ Checkbox.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * The color of the component. It supports those theme colors that make sense for this component. */ - color: PropTypes.oneOf(['primary', 'secondary', 'default']), + color: PropTypes.oneOf(['default', 'primary', 'secondary']), /** * If `true`, the checkbox will be disabled. */ @@ -167,7 +171,7 @@ Checkbox.propTypes = { * The size of the checkbox. * `small` is equivalent to the dense checkbox styling. */ - size: PropTypes.oneOf(['small', 'medium']), + size: PropTypes.oneOf(['medium', 'small']), /** * The value of the component. The DOM API casts this to a string. * The browser uses "on" as the default value. diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.d.ts b/packages/material-ui/src/CircularProgress/CircularProgress.d.ts index 53fd3bea72aa57..64564d065e48a7 100644 --- a/packages/material-ui/src/CircularProgress/CircularProgress.d.ts +++ b/packages/material-ui/src/CircularProgress/CircularProgress.d.ts @@ -2,12 +2,39 @@ import * as React from 'react'; import { StandardProps } from '..'; export interface CircularProgressProps - extends StandardProps, CircularProgressClassKey> { + extends StandardProps< + React.HTMLAttributes, + CircularProgressClassKey, + 'children' + > { + /** + * The color of the component. It supports those theme colors that make sense for this component. + */ color?: 'primary' | 'secondary' | 'inherit'; + /** + * If `true`, the shrink animation is disabled. + * This only works if variant is `indeterminate`. + */ disableShrink?: boolean; + /** + * The size of the circle. + * If using a number, the pixel unit is assumed. + * If using a string, you need to provide the CSS unit, e.g '3rem'. + */ size?: number | string; + /** + * The thickness of the circle. + */ thickness?: number; + /** + * The value of the progress indicator for the determinate and static variants. + * Value between 0 and 100. + */ value?: number; + /** + * The variant to use. + * Use indeterminate when there is no progress value. + */ variant?: 'determinate' | 'indeterminate' | 'static'; } @@ -37,6 +64,4 @@ export type CircularProgressClassKey = * * - [CircularProgress API](https://material-ui.com/api/circular-progress/) */ -declare const CircularProgress: React.ComponentType; - -export default CircularProgress; +export default function CircularProgress(props: CircularProgressProps): JSX.Element; diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.js b/packages/material-ui/src/CircularProgress/CircularProgress.js index b27681d90a8caa..cdfeeae9a86305 100644 --- a/packages/material-ui/src/CircularProgress/CircularProgress.js +++ b/packages/material-ui/src/CircularProgress/CircularProgress.js @@ -167,11 +167,15 @@ const CircularProgress = React.forwardRef(function CircularProgress(props, ref) }); CircularProgress.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ @@ -179,7 +183,7 @@ CircularProgress.propTypes = { /** * The color of the component. It supports those theme colors that make sense for this component. */ - color: PropTypes.oneOf(['primary', 'secondary', 'inherit']), + color: PropTypes.oneOf(['inherit', 'primary', 'secondary']), /** * If `true`, the shrink animation is disabled. * This only works if variant is `indeterminate`. diff --git a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.d.ts b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.d.ts index 8fab0de0a13b89..1f63430bf0b61e 100644 --- a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.d.ts +++ b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.d.ts @@ -1,10 +1,25 @@ import * as React from 'react'; export interface ClickAwayListenerProps { + /** + * The wrapped element. + */ children: React.ReactNode; + /** + * The mouse event to listen to. You can disable the listener by providing `false`. + */ disableReactTree?: boolean; + /** + * The mouse event to listen to. You can disable the listener by providing `false`. + */ mouseEvent?: 'onClick' | 'onMouseDown' | 'onMouseUp' | false; + /** + * Callback fired when a "click away" event is detected. + */ onClickAway: (event: React.MouseEvent) => void; + /** + * The touch event to listen to. You can disable the listener by providing `false`. + */ touchEvent?: 'onTouchStart' | 'onTouchEnd' | false; } @@ -20,6 +35,4 @@ export interface ClickAwayListenerProps { * * - [ClickAwayListener API](https://material-ui.com/api/click-away-listener/) */ -declare const ClickAwayListener: React.ComponentType; - -export default ClickAwayListener; +export default function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element; diff --git a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js index a5b26792912c31..f21becace8739e 100644 --- a/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js +++ b/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js @@ -146,13 +146,16 @@ function ClickAwayListener(props) { } ClickAwayListener.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The wrapped element. */ children: elementAcceptingRef.isRequired, /** - * If `true`, the React tree is ignored and only the DOM tree is considered. - * This prop changes how portaled elements are handled. + * The mouse event to listen to. You can disable the listener by providing `false`. */ disableReactTree: PropTypes.bool, /** @@ -166,7 +169,7 @@ ClickAwayListener.propTypes = { /** * The touch event to listen to. You can disable the listener by providing `false`. */ - touchEvent: PropTypes.oneOf(['onTouchStart', 'onTouchEnd', false]), + touchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false]), }; if (process.env.NODE_ENV !== 'production') { diff --git a/packages/material-ui/src/Collapse/Collapse.d.ts b/packages/material-ui/src/Collapse/Collapse.d.ts index 356285615cd0b0..ec428355b69784 100644 --- a/packages/material-ui/src/Collapse/Collapse.d.ts +++ b/packages/material-ui/src/Collapse/Collapse.d.ts @@ -21,21 +21,6 @@ export interface CollapseProps extends StandardProps { + /** + * You can wrap a node. + */ children?: React.ReactNode; } +/** + * @deprecated The name of this type is misleading. `CssBaseline` implements no class at all. + */ +export type CssBaselineClassKey = '@global'; + /** * Kickstart an elegant, consistent, and simple baseline to build upon. * Demos: @@ -14,11 +23,4 @@ export interface CssBaselineProps { * * - [CssBaseline API](https://material-ui.com/api/css-baseline/) */ -declare const CssBaseline: React.ComponentType; - -/** - * @deprecated The name of this type is misleading. `CssBaseline` implements no class at all. - */ -export type CssBaselineClassKey = '@global'; - -export default CssBaseline; +export default function CssBaseline(props: CssBaselineProps): JSX.Element; diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.js b/packages/material-ui/src/CssBaseline/CssBaseline.js index 095cd96f9a2c76..d62176ddcde7db 100644 --- a/packages/material-ui/src/CssBaseline/CssBaseline.js +++ b/packages/material-ui/src/CssBaseline/CssBaseline.js @@ -53,6 +53,10 @@ function CssBaseline(props) { } CssBaseline.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * You can wrap a node. */ diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.d.ts b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.d.ts index 1e9a466eac8532..87757f1ac3e223 100644 --- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.d.ts +++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.d.ts @@ -5,13 +5,40 @@ import { PaperProps } from '../Paper'; export interface ExpansionPanelProps extends StandardProps { + /** + * The content of the expansion panel. + */ + children: Exclude; + /** + * If `true`, expands the panel by default. + */ defaultExpanded?: boolean; + /** + * If `true`, the panel will be displayed in a disabled state. + */ disabled?: boolean; + /** + * If `true`, expands the panel, otherwise collapse it. + * Setting this prop enables control over the panel. + */ expanded?: boolean; + /** + * Callback fired when the expand/collapse state is changed. + * + * @param {object} event The event source of the callback. + * @param {boolean} expanded The `expanded` state of the panel. + */ onChange?: (event: React.ChangeEvent<{}>, expanded: boolean) => void; + /** + * The component used for the collapse effect. + * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + */ TransitionComponent?: React.ComponentType< TransitionProps & { children?: React.ReactElement } >; + /** + * Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. + */ TransitionProps?: TransitionProps; } @@ -28,6 +55,4 @@ export type ExpansionPanelClassKey = 'root' | 'rounded' | 'expanded' | 'disabled * - [ExpansionPanel API](https://material-ui.com/api/expansion-panel/) * - inherits [Paper API](https://material-ui.com/api/paper/) */ -declare const ExpansionPanel: React.ComponentType; - -export default ExpansionPanel; +export default function ExpansionPanel(props: ExpansionPanelProps): JSX.Element; diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js index 28eecfb722ce2f..8acf7a33aef641 100644 --- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js +++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js @@ -148,6 +148,10 @@ const ExpansionPanel = React.forwardRef(function ExpansionPanel(props, ref) { }); ExpansionPanel.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The content of the expansion panel. */ @@ -172,7 +176,7 @@ ExpansionPanel.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ @@ -198,7 +202,7 @@ ExpansionPanel.propTypes = { */ onChange: PropTypes.func, /** - * @ignore + * If `true`, rounded corners are disabled. */ square: PropTypes.bool, /** diff --git a/packages/material-ui/src/Fade/Fade.d.ts b/packages/material-ui/src/Fade/Fade.d.ts index fa9fdd99f4fe3d..21cd4d5469c083 100644 --- a/packages/material-ui/src/Fade/Fade.d.ts +++ b/packages/material-ui/src/Fade/Fade.d.ts @@ -11,12 +11,6 @@ export interface FadeProps extends Omit { * If `true`, the component will transition in. */ in?: boolean; - /** - */ - onEnter?: TransitionProps['onEnter']; - /** - */ - onExit?: TransitionProps['onExit']; ref?: React.Ref; /** * The duration for the transition, in milliseconds. diff --git a/packages/material-ui/src/FilledInput/FilledInput.d.ts b/packages/material-ui/src/FilledInput/FilledInput.d.ts index 4aa90d11bd679c..4578a973e8ebdb 100644 --- a/packages/material-ui/src/FilledInput/FilledInput.d.ts +++ b/packages/material-ui/src/FilledInput/FilledInput.d.ts @@ -1,8 +1,10 @@ -import * as React from 'react'; import { StandardProps } from '..'; import { InputBaseProps, InputBaseClassKey } from '../InputBase'; export interface FilledInputProps extends StandardProps { + /** + * If `true`, the input will not have an underline. + */ disableUnderline?: boolean; } @@ -19,6 +21,4 @@ export type FilledInputClassKey = InputBaseClassKey | 'colorSecondary' | 'underl * - [FilledInput API](https://material-ui.com/api/filled-input/) * - inherits [InputBase API](https://material-ui.com/api/input-base/) */ -declare const FilledInput: React.ComponentType; - -export default FilledInput; +export default function FilledInput(props: FilledInputProps): JSX.Element; diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js index 0998b68cb6be16..f4523c46b95dfd 100644 --- a/packages/material-ui/src/FilledInput/FilledInput.js +++ b/packages/material-ui/src/FilledInput/FilledInput.js @@ -179,6 +179,10 @@ const FilledInput = React.forwardRef(function FilledInput(props, ref) { }); FilledInput.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * This prop helps users to fill forms faster, especially on mobile devices. * The name can be confusing, as it's more like an autofill. @@ -193,11 +197,7 @@ FilledInput.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, - /** - * The CSS class name of the wrapper element. - */ - className: PropTypes.string, + classes: PropTypes.object, /** * The color of the component. It supports those theme colors that make sense for this component. */ @@ -232,7 +232,7 @@ FilledInput.propTypes = { */ id: PropTypes.string, /** - * The component used for the native input. + * The component used for the `input` element. * Either a string to use a DOM element or a component. */ inputComponent: PropTypes.elementType, @@ -280,11 +280,11 @@ FilledInput.propTypes = { /** * Number of rows to display when multiline option is set to true. */ - rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Maximum number of rows to display when multiline option is set to true. */ - rowsMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + rowsMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Start `InputAdornment` for this component. */ diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts b/packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts index e2ff2b5d2d5811..f2063020d15e69 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.d.ts @@ -5,16 +5,43 @@ export interface FormControlLabelProps extends StandardProps< React.LabelHTMLAttributes, FormControlLabelClassKey, - 'onChange' + 'children' | 'onChange' > { + /** + * If `true`, the component appears selected. + */ checked?: boolean; - control: React.ReactElement; + /** + * A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`. + */ + control: React.ReactElement; + /** + * If `true`, the control will be disabled. + */ disabled?: boolean; + /** + * Pass a ref to the `input` element. + */ inputRef?: React.Ref; + /** + * The text to be used in an enclosing label element. + */ label: React.ReactNode; + /** + * The position of the label. + */ + labelPlacement?: 'end' | 'start' | 'top' | 'bottom'; name?: string; + /** + * Callback fired when the state is changed. + * + * @param {object} event The event source of the callback. + * You can pull out the new checked state by accessing `event.target.checked` (boolean). + */ onChange?: (event: React.ChangeEvent<{}>, checked: boolean) => void; - labelPlacement?: 'end' | 'start' | 'top' | 'bottom'; + /** + * The value of the component. + */ value?: unknown; } @@ -39,6 +66,4 @@ export type FormControlLabelClassKey = * * - [FormControlLabel API](https://material-ui.com/api/form-control-label/) */ -declare const FormControlLabel: React.ComponentType; - -export default FormControlLabel; +export default function FormControlLabel(props: FormControlLabelProps): JSX.Element; diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js index 0353adb04fc1bb..51b6411aa9b8ad 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js @@ -80,6 +80,7 @@ const FormControlLabel = React.forwardRef(function FormControlLabel(props, ref) const controlProps = { disabled, }; + ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach((key) => { if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') { controlProps[key] = props[key]; @@ -111,6 +112,10 @@ const FormControlLabel = React.forwardRef(function FormControlLabel(props, ref) }); FormControlLabel.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * If `true`, the component appears selected. */ @@ -119,7 +124,7 @@ FormControlLabel.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ @@ -127,7 +132,7 @@ FormControlLabel.propTypes = { /** * A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`. */ - control: PropTypes.element, + control: PropTypes.element.isRequired, /** * If `true`, the control will be disabled. */ @@ -143,8 +148,8 @@ FormControlLabel.propTypes = { /** * The position of the label. */ - labelPlacement: PropTypes.oneOf(['end', 'start', 'top', 'bottom']), - /* + labelPlacement: PropTypes.oneOf(['bottom', 'end', 'start', 'top']), + /** * @ignore */ name: PropTypes.string, diff --git a/packages/material-ui/src/FormLabel/FormLabel.d.ts b/packages/material-ui/src/FormLabel/FormLabel.d.ts index 2aca7e945597ed..da2b4619080d7e 100644 --- a/packages/material-ui/src/FormLabel/FormLabel.d.ts +++ b/packages/material-ui/src/FormLabel/FormLabel.d.ts @@ -4,6 +4,9 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent'; export interface FormLabelTypeMap

{ props: P & FormLabelBaseProps & { + /** + * The color of the component. It supports those theme colors that make sense for this component. + */ color?: 'primary' | 'secondary'; disabled?: boolean; error?: boolean; diff --git a/packages/material-ui/src/Grow/Grow.d.ts b/packages/material-ui/src/Grow/Grow.d.ts index 7fa41cde3802de..0b3136238a55e7 100644 --- a/packages/material-ui/src/Grow/Grow.d.ts +++ b/packages/material-ui/src/Grow/Grow.d.ts @@ -12,12 +12,6 @@ export interface GrowProps extends Omit { * If `true`, show the component; triggers the enter or exit animation. */ in?: boolean; - /** - */ - onEnter?: TransitionProps['onEnter']; - /** - */ - onExit?: TransitionProps['onExit']; ref?: React.Ref; /** * The duration for the transition, in milliseconds. diff --git a/packages/material-ui/src/IconButton/IconButton.d.ts b/packages/material-ui/src/IconButton/IconButton.d.ts index 90ec38cf8931cd..987fa20ccb9d97 100644 --- a/packages/material-ui/src/IconButton/IconButton.d.ts +++ b/packages/material-ui/src/IconButton/IconButton.d.ts @@ -9,6 +9,12 @@ export type IconButtonTypeMap< props: P & { color?: PropTypes.Color; disableFocusRipple?: boolean; + /** + * If given, uses a negative margin to counteract the padding on one + * 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). + */ edge?: 'start' | 'end' | false; size?: 'small' | 'medium'; }; diff --git a/packages/material-ui/src/Input/Input.d.ts b/packages/material-ui/src/Input/Input.d.ts index 768aba37c8a45f..ef2269ce42a5ee 100644 --- a/packages/material-ui/src/Input/Input.d.ts +++ b/packages/material-ui/src/Input/Input.d.ts @@ -3,6 +3,9 @@ import { StandardProps } from '..'; import { InputBaseProps } from '../InputBase'; export interface InputProps extends StandardProps { + /** + * If `true`, the input will not have an underline. + */ disableUnderline?: boolean; } @@ -33,6 +36,4 @@ export type InputClassKey = * - [Input API](https://material-ui.com/api/input/) * - inherits [InputBase API](https://material-ui.com/api/input-base/) */ -declare const Input: React.ComponentType; - -export default Input; +export default function Input(props: InputProps): JSX.Element; diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js index 284d2f178ebb19..0f03a5d14f3b0d 100644 --- a/packages/material-ui/src/Input/Input.js +++ b/packages/material-ui/src/Input/Input.js @@ -128,6 +128,10 @@ const Input = React.forwardRef(function Input(props, ref) { }); Input.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * This prop helps users to fill forms faster, especially on mobile devices. * The name can be confusing, as it's more like an autofill. @@ -142,11 +146,7 @@ Input.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, - /** - * The CSS class name of the wrapper element. - */ - className: PropTypes.string, + classes: PropTypes.object, /** * The color of the component. It supports those theme colors that make sense for this component. */ @@ -181,7 +181,7 @@ Input.propTypes = { */ id: PropTypes.string, /** - * The component used for the native input. + * The component used for the `input` element. * Either a string to use a DOM element or a component. */ inputComponent: PropTypes.elementType, @@ -229,11 +229,11 @@ Input.propTypes = { /** * Number of rows to display when multiline option is set to true. */ - rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Maximum number of rows to display when multiline option is set to true. */ - rowsMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + rowsMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Start `InputAdornment` for this component. */ diff --git a/packages/material-ui/src/InputBase/InputBase.d.ts b/packages/material-ui/src/InputBase/InputBase.d.ts index 125924b28d449b..d0b9e0efe5d4c0 100644 --- a/packages/material-ui/src/InputBase/InputBase.d.ts +++ b/packages/material-ui/src/InputBase/InputBase.d.ts @@ -5,27 +5,109 @@ export interface InputBaseProps extends StandardProps< React.HTMLAttributes, InputBaseClassKey, - 'onChange' | 'onKeyUp' | 'onKeyDown' | 'onBlur' | 'onFocus' | 'defaultValue' + /* + * `onChange`, `onKeyUp`, `onKeyDown`, `onBlur`, `onFocus` are applied to the inner `InputComponent`, + * which by default is an input or textarea. Since these handlers differ from the + * ones inherited by `React.HTMLAttributes` we need to omit them. + */ + 'children' | 'onChange' | 'onKeyUp' | 'onKeyDown' | 'onBlur' | 'onFocus' | 'defaultValue' > { + 'aria-describedby'?: string; + /** + * This prop helps users to fill forms faster, especially on mobile devices. + * The name can be confusing, as it's more like an autofill. + * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). + */ autoComplete?: string; + /** + * If `true`, the `input` element will be focused during the first mount. + */ autoFocus?: boolean; + /** + * The color of the component. It supports those theme colors that make sense for this component. + */ color?: 'primary' | 'secondary'; + /** + * The default `input` element value. Use when the component is not controlled. + */ defaultValue?: unknown; + /** + * If `true`, the `input` element will be disabled. + */ disabled?: boolean; + /** + * End `InputAdornment` for this component. + */ endAdornment?: React.ReactNode; + /** + * If `true`, the input will indicate an error. This is normally obtained via context from + * FormControl. + */ error?: boolean; + /** + * If `true`, the input will take up the full width of its container. + */ fullWidth?: boolean; + /** + * The id of the `input` element. + */ id?: string; + /** + * The component used for the `input` element. + * Either a string to use a DOM element or a component. + */ inputComponent?: React.ElementType; + /** + * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. + */ inputProps?: InputBaseComponentProps; + /** + * Pass a ref to the `input` element. + */ inputRef?: React.Ref; + /** + * If `dense`, will adjust vertical spacing. This is normally obtained via context from + * FormControl. + */ margin?: 'dense' | 'none'; + /** + * If `true`, a textarea element will be rendered. + */ multiline?: boolean; + /** + * Name attribute of the `input` element. + */ name?: string; + /** + * Callback fired when the input is blurred. + * + * Notice that the first argument (event) might be undefined. + */ + onBlur?: React.FocusEventHandler; + /** + * Callback fired when the value is changed. + * + * @param {object} event The event source of the callback. + * You can pull out the new value by accessing `event.target.value` (string). + */ + onChange?: React.ChangeEventHandler; + onFocus?: React.FocusEventHandler; + onKeyDown?: React.KeyboardEventHandler; + onKeyUp?: React.KeyboardEventHandler; + /** + * The short hint displayed in the input before the user enters a value. + */ placeholder?: string; + /** + * It prevents the user from changing the value of the field + * (not from interacting with the field). + */ readOnly?: boolean; + /** + * If `true`, the `input` element will be required. + */ required?: boolean; - renderPrefix?: (state: { + renderSuffix?: (state: { disabled?: boolean; error?: boolean; filled?: boolean; @@ -34,22 +116,30 @@ export interface InputBaseProps required?: boolean; startAdornment?: React.ReactNode; }) => React.ReactNode; + /** + * Number of rows to display when multiline option is set to true. + */ rows?: string | number; + /** + * Maximum number of rows to display when multiline option is set to true. + */ rowsMax?: string | number; + /** + * Minimum number of rows to display when multiline option is set to true. + */ rowsMin?: string | number; + /** + * Start `InputAdornment` for this component. + */ 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). + */ type?: string; - value?: unknown; /** - * `onChange`, `onKeyUp`, `onKeyDown`, `onBlur`, `onFocus` are applied to the inner `InputComponent`, - * which by default is an input or textarea. Since these handlers differ from the - * ones inherited by `React.HTMLAttributes` we need to omit them. + * The value of the `input` element, required for a controlled component. */ - onChange?: React.ChangeEventHandler; - onKeyDown?: React.KeyboardEventHandler; - onKeyUp?: React.KeyboardEventHandler; - onBlur?: React.FocusEventHandler; - onFocus?: React.FocusEventHandler; + value?: unknown; } export interface InputBaseComponentProps @@ -90,6 +180,4 @@ export type InputBaseClassKey = * * - [InputBase API](https://material-ui.com/api/input-base/) */ -declare const InputBase: React.ComponentType; - -export default InputBase; +export default function InputBase(props: InputBaseProps): JSX.Element; diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js index 9e2e9594c53583..5d39fd3dbba1d2 100644 --- a/packages/material-ui/src/InputBase/InputBase.js +++ b/packages/material-ui/src/InputBase/InputBase.js @@ -20,9 +20,11 @@ export const styles = (theme) => { duration: theme.transitions.duration.shorter, }), }; + const placeholderHidden = { opacity: '0 !important', }; + const placeholderVisible = { opacity: light ? 0.42 : 0.5, }; @@ -239,6 +241,7 @@ const InputBase = React.forwardRef(function InputBase(props, ref) { muiFormControl, states: ['color', 'disabled', 'error', 'hiddenLabel', 'margin', 'required', 'filled'], }); + fcs.focused = muiFormControl ? muiFormControl.focused : focused; // The blur won't fire when the disabled state is set on a focused input. @@ -377,6 +380,7 @@ const InputBase = React.forwardRef(function InputBase(props, ref) { rowsMax, ...inputProps, }; + InputComponent = TextareaAutosize; } } else { @@ -469,6 +473,10 @@ const InputBase = React.forwardRef(function InputBase(props, ref) { }); InputBase.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * @ignore */ @@ -487,9 +495,9 @@ InputBase.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** - * The CSS class name of the wrapper element. + * @ignore */ className: PropTypes.string, /** @@ -596,15 +604,15 @@ InputBase.propTypes = { /** * Number of rows to display when multiline option is set to true. */ - rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Maximum number of rows to display when multiline option is set to true. */ - rowsMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + rowsMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Minimum number of rows to display when multiline option is set to true. */ - rowsMin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + rowsMin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Start `InputAdornment` for this component. */ diff --git a/packages/material-ui/src/InputLabel/InputLabel.d.ts b/packages/material-ui/src/InputLabel/InputLabel.d.ts index c5ca70925119b5..5fcfe7288a2758 100644 --- a/packages/material-ui/src/InputLabel/InputLabel.d.ts +++ b/packages/material-ui/src/InputLabel/InputLabel.d.ts @@ -3,13 +3,43 @@ import { StandardProps } from '..'; import { FormLabelProps } from '../FormLabel'; export interface InputLabelProps extends StandardProps { + /** + * The contents of the `InputLabel`. + */ + children?: React.ReactNode; + color?: FormLabelProps['color']; + /** + * If `true`, the transition animation is disabled. + */ disableAnimation?: boolean; + /** + * If `true`, apply disabled class. + */ disabled?: boolean; + /** + * If `true`, the label will be displayed in an error state. + */ error?: boolean; + /** + * If `true`, the input of this label is focused. + */ focused?: boolean; + /** + * If `dense`, will adjust vertical spacing. This is normally obtained via context from + * FormControl. + */ margin?: 'dense'; + /** + * if `true`, the label will indicate that the input is required. + */ required?: boolean; + /** + * If `true`, the label is shrunk. + */ shrink?: boolean; + /** + * The variant to use. + */ variant?: 'standard' | 'outlined' | 'filled'; } @@ -38,6 +68,4 @@ export type InputLabelClassKey = * - [InputLabel API](https://material-ui.com/api/input-label/) * - inherits [FormLabel API](https://material-ui.com/api/form-label/) */ -declare const InputLabel: React.ComponentType; - -export default InputLabel; +export default function InputLabel(props: InputLabelProps): JSX.Element; diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js index 78a475c5efb24b..03e54385e16636 100644 --- a/packages/material-ui/src/InputLabel/InputLabel.js +++ b/packages/material-ui/src/InputLabel/InputLabel.js @@ -134,6 +134,10 @@ const InputLabel = React.forwardRef(function InputLabel(props, ref) { }); InputLabel.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The contents of the `InputLabel`. */ @@ -142,7 +146,7 @@ InputLabel.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ @@ -183,7 +187,7 @@ InputLabel.propTypes = { /** * The variant to use. */ - variant: PropTypes.oneOf(['standard', 'outlined', 'filled']), + variant: PropTypes.oneOf(['filled', 'outlined', 'standard']), }; export default withStyles(styles, { name: 'MuiInputLabel' })(InputLabel); diff --git a/packages/material-ui/src/Menu/Menu.d.ts b/packages/material-ui/src/Menu/Menu.d.ts index 6af9c66a18665e..36bdd0533a4507 100644 --- a/packages/material-ui/src/Menu/Menu.d.ts +++ b/packages/material-ui/src/Menu/Menu.d.ts @@ -75,9 +75,6 @@ export interface MenuProps * If `true`, the menu is visible. */ open: boolean; - /** - */ - PaperProps?: Partial; /** * `classes` prop applied to the [`Popover`](/api/popover/) element. */ diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js index 2a96e5d3735e9b..15f51712e87d04 100644 --- a/packages/material-ui/src/Menu/Menu.js +++ b/packages/material-ui/src/Menu/Menu.js @@ -173,7 +173,7 @@ Menu.propTypes = { /** * The DOM element used to set the position of the menu. */ - anchorEl: PropTypes.oneOfType([ + anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.func, PropTypes.instanceOf(typeof Element === 'undefined' ? Object : Element), ]), diff --git a/packages/material-ui/src/Modal/Modal.d.ts b/packages/material-ui/src/Modal/Modal.d.ts index 17b1788d670550..8d22a51e86e4be 100644 --- a/packages/material-ui/src/Modal/Modal.d.ts +++ b/packages/material-ui/src/Modal/Modal.d.ts @@ -21,6 +21,12 @@ export interface ModalProps keepMounted?: boolean; manager?: ModalManager; onBackdropClick?: React.ReactEventHandler<{}>; + /** + * Callback fired when the component requests to be closed. + * + * @param {object} event The event source of the callback. + * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`. + */ onClose?: { bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void; }['bivarianceHack']; diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.d.ts b/packages/material-ui/src/OutlinedInput/OutlinedInput.d.ts index 424bcd9effc543..b56598f6df0a80 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.d.ts +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.d.ts @@ -3,9 +3,20 @@ import { StandardProps } from '..'; import { InputBaseProps } from '../InputBase'; export interface OutlinedInputProps extends StandardProps { + /** + * The label of the input. It is only used for layout. The actual labelling + * is handled by `InputLabel`. If specified `labelWidth` is ignored. + */ label?: React.ReactNode; - notched?: boolean; + /** + * The width of the label. Is ignored if `label` is provided. Prefer `label` + * if the input label appears with a strike through. + */ labelWidth?: number; + /** + * If `true`, the outline is notched to accommodate the label. + */ + notched?: boolean; } export type OutlinedInputClassKey = @@ -36,6 +47,4 @@ export type OutlinedInputClassKey = * - [OutlinedInput API](https://material-ui.com/api/outlined-input/) * - inherits [InputBase API](https://material-ui.com/api/input-base/) */ -declare const OutlinedInput: React.ComponentType; - -export default OutlinedInput; +export default function OutlinedInput(props: OutlinedInputProps): JSX.Element; diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js index e0fa4b4df174f7..718be6d73bd19d 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js @@ -141,6 +141,10 @@ const OutlinedInput = React.forwardRef(function OutlinedInput(props, ref) { }); OutlinedInput.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * This prop helps users to fill forms faster, especially on mobile devices. * The name can be confusing, as it's more like an autofill. @@ -155,11 +159,7 @@ OutlinedInput.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, - /** - * The CSS class name of the wrapper element. - */ - className: PropTypes.string, + classes: PropTypes.object, /** * The color of the component. It supports those theme colors that make sense for this component. */ @@ -190,7 +190,7 @@ OutlinedInput.propTypes = { */ id: PropTypes.string, /** - * The component used for the native input. + * The component used for the `input` element. * Either a string to use a DOM element or a component. */ inputComponent: PropTypes.elementType, @@ -252,11 +252,11 @@ OutlinedInput.propTypes = { /** * Number of rows to display when multiline option is set to true. */ - rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Maximum number of rows to display when multiline option is set to true. */ - rowsMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + rowsMax: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Start `InputAdornment` for this component. */ diff --git a/packages/material-ui/src/Popover/Popover.d.ts b/packages/material-ui/src/Popover/Popover.d.ts index fddfb7a7ebe0cc..9ffee7a7625de2 100644 --- a/packages/material-ui/src/Popover/Popover.d.ts +++ b/packages/material-ui/src/Popover/Popover.d.ts @@ -18,23 +18,122 @@ export type PopoverReference = 'anchorEl' | 'anchorPosition' | 'none'; export interface PopoverProps extends StandardProps, PopoverClassKey, 'children'> { + /** + * A ref for imperative actions. + * It currently only supports updatePosition() action. + */ action?: React.Ref; + /** + * This is the DOM element, or a function that returns the DOM element, + * that may be used to set the position of the popover. + */ anchorEl?: null | Element | ((element: Element) => Element); + /** + * This is the point on the anchor where the popover's + * `anchorEl` will attach to. This is not used when the + * anchorReference is 'anchorPosition'. + * + * Options: + * vertical: [top, center, bottom]; + * horizontal: [left, center, right]. + */ anchorOrigin?: PopoverOrigin; + /** + * This is the position that may be used + * to set the position of the popover. + * The coordinates are relative to + * the application's client area. + */ anchorPosition?: PopoverPosition; + /** + * This determines which anchor prop to refer to to set + * the position of the popover. + */ anchorReference?: PopoverReference; + /** + * The content of the component. + */ children?: React.ReactNode; + /** + * A node, component instance, or function that returns either. + * The `container` will passed to the Modal component. + * By default, it uses the body of the anchorEl's top-level document object, + * so it's simply `document.body` most of the time. + */ + container?: ModalProps['container']; + /** + * The elevation of the popover. + */ elevation?: number; + /** + * This function is called in order to retrieve the content anchor element. + * It's the opposite of the `anchorEl` prop. + * The content anchor element should be an element inside the popover. + * It's used to correctly scroll and set the position of the popover. + * The positioning strategy tries to make the content anchor element just above the + * anchor element. + */ getContentAnchorEl?: null | ((element: Element) => Element); + /** + * Specifies how close to the edge of the window the popover can appear. + */ marginThreshold?: number; - modal?: boolean; + onClose?: ModalProps['onClose']; + /** + * Callback fired before the component is entering. + */ + onEnter?: TransitionHandlerProps['onEnter']; + /** + * Callback fired when the component has entered. + */ + onEntered?: TransitionHandlerProps['onEntered']; + /** + * Callback fired when the component is entering. + */ + onEntering?: TransitionHandlerProps['onEntering']; + /** + * Callback fired before the component is exiting. + */ + onExit?: TransitionHandlerProps['onExit']; + /** + * Callback fired when the component has exited. + */ + onExited?: TransitionHandlerProps['onExited']; + /** + * Callback fired when the component is exiting. + */ + onExiting?: TransitionHandlerProps['onExiting']; + /** + * If `true`, the popover is visible. + */ + open: boolean; + /** + * Props applied to the [`Paper`](/api/paper/) element. + */ PaperProps?: Partial; - role?: string; + /** + * This is the point on the popover which + * will attach to the anchor's origin. + * + * Options: + * vertical: [top, center, bottom, x(px)]; + * horizontal: [left, center, right, x(px)]. + */ transformOrigin?: PopoverOrigin; + /** + * The component used for the transition. + * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + */ TransitionComponent?: React.ComponentType< TransitionProps & { children?: React.ReactElement } >; + /** + * Set to 'auto' to automatically calculate transition time based on height. + */ transitionDuration?: TransitionProps['timeout'] | 'auto'; + /** + * Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. + */ TransitionProps?: TransitionProps; } @@ -56,6 +155,4 @@ export interface PopoverActions { * - [Popover API](https://material-ui.com/api/popover/) * - inherits [Modal API](https://material-ui.com/api/modal/) */ -declare const Popover: React.ComponentType; - -export default Popover; +export default function Popover(props: PopoverProps): JSX.Element; diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index 85980fc7003712..e172fb34dba3cc 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -422,6 +422,10 @@ const Popover = React.forwardRef(function Popover(props, ref) { }); Popover.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * A ref for imperative actions. * It currently only supports updatePosition() action. @@ -477,10 +481,10 @@ Popover.propTypes = { */ anchorOrigin: PropTypes.shape({ horizontal: PropTypes.oneOfType([ + PropTypes.oneOf(['center', 'left', 'right']), PropTypes.number, - PropTypes.oneOf(['left', 'center', 'right']), ]).isRequired, - vertical: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['top', 'center', 'bottom'])]) + vertical: PropTypes.oneOfType([PropTypes.oneOf(['bottom', 'center', 'top']), PropTypes.number]) .isRequired, }), /** @@ -493,7 +497,7 @@ Popover.propTypes = { left: PropTypes.number.isRequired, top: PropTypes.number.isRequired, }), - /* + /** * This determines which anchor prop to refer to to set * the position of the popover. */ @@ -506,7 +510,7 @@ Popover.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ @@ -517,7 +521,11 @@ Popover.propTypes = { * By default, it uses the body of the anchorEl's top-level document object, * so it's simply `document.body` most of the time. */ - container: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.func, + PropTypes.instanceOf(React.Component), + PropTypes.instanceOf(typeof Element === 'undefined' ? Object : Element), + ]), /** * The elevation of the popover. */ @@ -537,9 +545,6 @@ Popover.propTypes = { marginThreshold: PropTypes.number, /** * Callback fired when the component requests to be closed. - * - * @param {object} event The event source of the callback. - * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`. */ onClose: PropTypes.func, /** @@ -573,7 +578,7 @@ Popover.propTypes = { /** * Props applied to the [`Paper`](/api/paper/) element. */ - PaperProps: PropTypes.shape({ + PaperProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({ component: elementTypeAcceptingRef, }), /** @@ -586,10 +591,10 @@ Popover.propTypes = { */ transformOrigin: PropTypes.shape({ horizontal: PropTypes.oneOfType([ + PropTypes.oneOf(['center', 'left', 'right']), PropTypes.number, - PropTypes.oneOf(['left', 'center', 'right']), ]).isRequired, - vertical: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['top', 'center', 'bottom'])]) + vertical: PropTypes.oneOfType([PropTypes.oneOf(['bottom', 'center', 'top']), PropTypes.number]) .isRequired, }), /** @@ -601,9 +606,13 @@ Popover.propTypes = { * Set to 'auto' to automatically calculate transition time based on height. */ transitionDuration: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), PropTypes.oneOf(['auto']), + PropTypes.number, + PropTypes.shape({ + appear: PropTypes.number, + enter: PropTypes.number, + exit: PropTypes.number, + }), ]), /** * Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. diff --git a/packages/material-ui/src/Popper/Popper.d.ts b/packages/material-ui/src/Popper/Popper.d.ts index 9161a861b12fd1..d11f231f5d9dbf 100644 --- a/packages/material-ui/src/Popper/Popper.d.ts +++ b/packages/material-ui/src/Popper/Popper.d.ts @@ -1,7 +1,6 @@ import * as React from 'react'; import PopperJs, { ReferenceObject } from 'popper.js'; import { PortalProps } from '../Portal'; -import { TransitionProps } from '../transitions/transition'; export type PopperPlacementType = | 'bottom-end' @@ -17,8 +16,20 @@ export type PopperPlacementType = | 'top-start' | 'top'; -export interface PopperProps extends React.HTMLAttributes { +export interface PopperProps extends Omit, 'children'> { + /** + * This is the reference element, or a function that returns the reference element, + * that may be used to set the position of the popover. + * The return value will passed as the reference object of the Popper + * instance. + * + * The reference element should be an HTML Element instance or a referenceObject: + * https://popper.js.org/popper-documentation.html#referenceObject. + */ anchorEl?: null | ReferenceObject | (() => ReferenceObject); + /** + * Popper render function or node. + */ children: | React.ReactNode | ((props: { @@ -29,14 +40,53 @@ export interface PopperProps extends React.HTMLAttributes { onExited: () => {}; }; }) => React.ReactNode); + /** + * A node, component instance, or function that returns either. + * The `container` will passed to the Modal component. + * By default, it uses the body of the anchorEl's top-level document object, + * so it's simply `document.body` most of the time. + */ container?: PortalProps['container']; + /** + * Disable the portal behavior. + * The children stay within it's parent DOM hierarchy. + */ 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. + */ keepMounted?: boolean; + /** + * Popper.js is based on a "plugin-like" architecture, + * most of its features are fully encapsulated "modifiers". + * + * A modifier is a function that is called each time Popper.js needs to + * compute the position of the popper. + * For this reason, modifiers should be very performant to avoid bottlenecks. + * To learn how to create a modifier, [read the modifiers documentation](https://github.com/FezVrasta/popper.js/blob/master/docs/_includes/popper-documentation.md#modifiers--object). + */ modifiers?: object; + /** + * If `true`, the popper is visible. + */ open: boolean; + /** + * Popper placement. + */ placement?: PopperPlacementType; + /** + * Options provided to the [`popper.js`](https://github.com/FezVrasta/popper.js) instance. + */ popperOptions?: object; + /** + * A ref that points to the used popper instance. + */ popperRef?: React.Ref; + /** + * Help supporting a react-transition-group/Transition component. + */ transition?: boolean; } @@ -52,6 +102,4 @@ export interface PopperProps extends React.HTMLAttributes { * * - [Popper API](https://material-ui.com/api/popper/) */ -declare const Popper: React.ComponentType; - -export default Popper; +export default function Popper(props: PopperProps): JSX.Element; diff --git a/packages/material-ui/src/Popper/Popper.js b/packages/material-ui/src/Popper/Popper.js index 1c492a2ce08cd9..ba7c6699299fee 100644 --- a/packages/material-ui/src/Popper/Popper.js +++ b/packages/material-ui/src/Popper/Popper.js @@ -53,6 +53,7 @@ const Popper = React.forwardRef(function Popper(props, ref) { placement: initialPlacement = 'bottom', popperOptions = defaultPopperOptions, popperRef: popperRefProp, + style, transition = false, ...other } = props; @@ -143,6 +144,7 @@ const Popper = React.forwardRef(function Popper(props, ref) { onCreate: createChainedFunction(handlePopperUpdate, popperOptions.onCreate), onUpdate: createChainedFunction(handlePopperUpdate, popperOptions.onUpdate), }); + handlePopperRefRef.current(popper); }, [anchorEl, disablePortal, modifiers, open, rtlPlacement, popperOptions]); @@ -216,7 +218,7 @@ const Popper = React.forwardRef(function Popper(props, ref) { // Fix Popper.js display issue top: 0, left: 0, - ...other.style, + ...style, }} > {typeof children === 'function' ? children(childProps) : children} @@ -226,6 +228,10 @@ const Popper = React.forwardRef(function Popper(props, ref) { }); Popper.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * This is the reference element, or a function that returns the reference element, * that may be used to set the position of the popover. @@ -279,14 +285,21 @@ Popper.propTypes = { /** * Popper render function or node. */ - children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired, + children: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.node, + PropTypes.func, + ]).isRequired, /** * A node, component instance, or function that returns either. * The `container` will passed to the Modal component. * By default, it uses the body of the anchorEl's top-level document object, * so it's simply `document.body` most of the time. */ - container: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.func, + PropTypes.instanceOf(React.Component), + PropTypes.instanceOf(typeof Element === 'undefined' ? Object : Element), + ]), /** * Disable the portal behavior. * The children stay within it's parent DOM hierarchy. @@ -337,6 +350,10 @@ Popper.propTypes = { * A ref that points to the used popper instance. */ popperRef: refType, + /** + * @ignore + */ + style: PropTypes.object, /** * Help supporting a react-transition-group/Transition component. */ diff --git a/packages/material-ui/src/Portal/Portal.js b/packages/material-ui/src/Portal/Portal.js index 9d38da191c08c8..c2d4da67b48d5a 100644 --- a/packages/material-ui/src/Portal/Portal.js +++ b/packages/material-ui/src/Portal/Portal.js @@ -72,7 +72,7 @@ Portal.propTypes = { * By default, it uses the body of the top-level document object, * so it's simply `document.body` most of the time. */ - container: PropTypes.oneOfType([ + container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ PropTypes.func, PropTypes.instanceOf(React.Component), PropTypes.instanceOf(typeof Element === 'undefined' ? Object : Element), diff --git a/packages/material-ui/src/Radio/Radio.d.ts b/packages/material-ui/src/Radio/Radio.d.ts index 9984793dc2945d..f62bdbf61bf630 100644 --- a/packages/material-ui/src/Radio/Radio.d.ts +++ b/packages/material-ui/src/Radio/Radio.d.ts @@ -4,9 +4,26 @@ import { SwitchBaseProps, SwitchBaseClassKey } from '../internal/SwitchBase'; export interface RadioProps extends StandardProps { + /** + * The icon to display when the component is checked. + */ checkedIcon?: React.ReactNode; + /** + * The color of the component. It supports those theme colors that make sense for this component. + */ color?: 'primary' | 'secondary' | 'default'; + /** + * If `true`, the radio will be disabled. + */ + disabled?: boolean; + /** + * The icon to display when the component is unchecked. + */ icon?: React.ReactNode; + /** + * The size of the radio. + * `small` is equivalent to the dense radio styling. + */ size?: 'small' | 'medium'; } @@ -23,6 +40,4 @@ export type RadioClassKey = SwitchBaseClassKey | 'colorPrimary' | 'colorSecondar * - [Radio API](https://material-ui.com/api/radio/) * - inherits [IconButton API](https://material-ui.com/api/icon-button/) */ -declare const Radio: React.ComponentType; - -export default Radio; +export default function Radio(props: RadioProps): JSX.Element; diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js index 37c9f2b40919fa..d4c855d7f8b080 100644 --- a/packages/material-ui/src/Radio/Radio.js +++ b/packages/material-ui/src/Radio/Radio.js @@ -104,6 +104,10 @@ const Radio = React.forwardRef(function Radio(props, ref) { }); Radio.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * If `true`, the component is checked. */ @@ -116,11 +120,11 @@ Radio.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * The color of the component. It supports those theme colors that make sense for this component. */ - color: PropTypes.oneOf(['primary', 'secondary', 'default']), + color: PropTypes.oneOf(['default', 'primary', 'secondary']), /** * If `true`, the radio will be disabled. */ @@ -165,7 +169,7 @@ Radio.propTypes = { * The size of the radio. * `small` is equivalent to the dense radio styling. */ - size: PropTypes.oneOf(['small', 'medium']), + size: PropTypes.oneOf(['medium', 'small']), /** * The value of the component. The DOM API casts this to a string. */ diff --git a/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.d.ts b/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.d.ts index a77f45a18181b9..7caeb563b88b9e 100644 --- a/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.d.ts +++ b/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.d.ts @@ -1,8 +1,10 @@ import * as React from 'react'; +import { StandardProps } from '..'; -export interface ScopedCssBaselineProps { - children?: React.ReactNode; -} +export type ScopedCssBaselineClassKey = 'root'; + +export interface ScopedCssBaselineProps + extends StandardProps, ScopedCssBaselineClassKey> {} /** * @@ -14,8 +16,4 @@ export interface ScopedCssBaselineProps { * * - [ScopedCssBaseline API](https://material-ui.com/api/scoped-css-baseline/) */ -declare const ScopedCssBaseline: React.ComponentType; - -export type ScopedCssBaselineClassKey = 'root'; - -export default ScopedCssBaseline; +export default function ScopedCssBaseline(props: ScopedCssBaselineProps): JSX.Element; diff --git a/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.js b/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.js index ec369c5d5e5a7c..c4889e5a1e5717 100644 --- a/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.js +++ b/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.js @@ -25,6 +25,10 @@ const ScopedCssBaseline = React.forwardRef(function ScopedCssBaseline(props, ref }); ScopedCssBaseline.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * The content of the component. */ diff --git a/packages/material-ui/src/Select/Select.d.ts b/packages/material-ui/src/Select/Select.d.ts index 3539eb5a1bf9f0..00ed926b0c41ba 100644 --- a/packages/material-ui/src/Select/Select.d.ts +++ b/packages/material-ui/src/Select/Select.d.ts @@ -35,6 +35,10 @@ export interface SelectProps * The icon that displays the arrow. */ IconComponent?: React.ElementType; + /** + * The `id` of the wrapper element or the `select` elment when `native`. + */ + id?: string; /** * An `Input` element; does not have to be a material-ui specific `Input`. */ diff --git a/packages/material-ui/src/Select/Select.js b/packages/material-ui/src/Select/Select.js index e5e5b35cc30a58..0b78f94eb9d922 100644 --- a/packages/material-ui/src/Select/Select.js +++ b/packages/material-ui/src/Select/Select.js @@ -134,7 +134,7 @@ Select.propTypes = { */ IconComponent: PropTypes.elementType, /** - * @ignore + * The `id` of the wrapper element or the `select` elment when `native`. */ id: PropTypes.string, /** diff --git a/packages/material-ui/src/Slide/Slide.d.ts b/packages/material-ui/src/Slide/Slide.d.ts index 4bdfeb8da95201..1f25d0931037b8 100644 --- a/packages/material-ui/src/Slide/Slide.d.ts +++ b/packages/material-ui/src/Slide/Slide.d.ts @@ -3,10 +3,24 @@ import { Theme } from '../styles/createMuiTheme'; import { TransitionProps } from '../transitions/transition'; export interface SlideProps extends TransitionProps { + /** + * A single child content element. + */ children?: React.ReactElement; + /** + * Direction the child node will enter from. + */ direction?: 'left' | 'right' | 'up' | 'down'; + /** + * If `true`, show the component; triggers the enter or exit animation. + */ + in?: TransitionProps['in']; ref?: React.Ref; - theme?: Theme; + /** + * The duration for the transition, in milliseconds. + * You may specify a single timeout for all transitions, or individually with an object. + */ + timeout?: TransitionProps['timeout']; } /** @@ -22,6 +36,4 @@ export interface SlideProps extends TransitionProps { * - [Slide API](https://material-ui.com/api/slide/) * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition#Transition-props) */ -declare const Slide: React.ComponentType; - -export default Slide; +export default function Slide(props: SlideProps): JSX.Element; diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js index 775c81fc8b0223..7d6118ce678d2b 100644 --- a/packages/material-ui/src/Slide/Slide.js +++ b/packages/material-ui/src/Slide/Slide.js @@ -113,14 +113,17 @@ const Slide = React.forwardRef(function Slide(props, ref) { mode: 'enter', }, ); + node.style.webkitTransition = theme.transitions.create('-webkit-transform', { ...transitionProps, easing: theme.transitions.easing.easeOut, }); + node.style.transition = theme.transitions.create('transform', { ...transitionProps, easing: theme.transitions.easing.easeOut, }); + node.style.webkitTransform = 'none'; node.style.transform = 'none'; if (onEntering) { @@ -136,14 +139,17 @@ const Slide = React.forwardRef(function Slide(props, ref) { mode: 'exit', }, ); + node.style.webkitTransition = theme.transitions.create('-webkit-transform', { ...transitionProps, easing: theme.transitions.easing.sharp, }); + node.style.transition = theme.transitions.create('transform', { ...transitionProps, easing: theme.transitions.easing.sharp, }); + setTranslateValue(direction, node); if (onExit) { @@ -222,6 +228,10 @@ const Slide = React.forwardRef(function Slide(props, ref) { }); Slide.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * A single child content element. */ @@ -229,7 +239,7 @@ Slide.propTypes = { /** * Direction the child node will enter from. */ - direction: PropTypes.oneOf(['left', 'right', 'up', 'down']), + direction: PropTypes.oneOf(['down', 'left', 'right', 'up']), /** * If `true`, show the component; triggers the enter or exit animation. */ @@ -260,7 +270,11 @@ Slide.propTypes = { */ timeout: PropTypes.oneOfType([ PropTypes.number, - PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), + PropTypes.shape({ + appear: PropTypes.number, + enter: PropTypes.number, + exit: PropTypes.number, + }), ]), }; diff --git a/packages/material-ui/src/StepButton/StepButton.d.ts b/packages/material-ui/src/StepButton/StepButton.d.ts index 337ee57b7d6324..6f0f3481ad71e6 100644 --- a/packages/material-ui/src/StepButton/StepButton.d.ts +++ b/packages/material-ui/src/StepButton/StepButton.d.ts @@ -3,7 +3,10 @@ import { Orientation } from '../Stepper'; import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; -export type StepButtonIcon = React.ReactElement | string | number | null; +/** + * @deprecated use `StepButtonProps['icon']` instead + */ +export type StepButtonIcon = React.ReactNode; export type StepButtonTypeMap = ExtendButtonBaseTypeMap<{ props: P & { @@ -11,7 +14,7 @@ export type StepButtonTypeMap = ExtendButtonBase alternativeLabel?: boolean; completed?: boolean; disabled?: boolean; - icon?: StepButtonIcon; + icon?: React.ReactNode; last?: boolean; optional?: React.ReactNode; orientation?: Orientation; diff --git a/packages/material-ui/src/StepConnector/StepConnector.d.ts b/packages/material-ui/src/StepConnector/StepConnector.d.ts index ae3a2ac07e8148..3b3f16ce350eb0 100644 --- a/packages/material-ui/src/StepConnector/StepConnector.d.ts +++ b/packages/material-ui/src/StepConnector/StepConnector.d.ts @@ -1,18 +1,10 @@ import * as React from 'react'; import { StandardProps } from '..'; -import { Orientation } from '../Stepper'; export type StepConnectorIcon = React.ReactElement | string | number; export interface StepConnectorProps - extends StandardProps, StepConnectorClasskey> { - active?: boolean; - alternativeLabel?: boolean; - completed?: boolean; - disabled?: boolean; - index?: number; - orientation?: Orientation; -} + extends StandardProps, StepConnectorClasskey, 'children'> {} export type StepConnectorClasskey = | 'root' @@ -36,6 +28,4 @@ export type StepConnectorClasskey = * * - [StepConnector API](https://material-ui.com/api/step-connector/) */ -declare const StepConnector: React.ComponentType; - -export default StepConnector; +export default function StepConnector(props: StepConnectorProps): JSX.Element; diff --git a/packages/material-ui/src/StepConnector/StepConnector.js b/packages/material-ui/src/StepConnector/StepConnector.js index 028cadba9f5cee..e0ded8ee2674eb 100644 --- a/packages/material-ui/src/StepConnector/StepConnector.js +++ b/packages/material-ui/src/StepConnector/StepConnector.js @@ -48,13 +48,19 @@ export const styles = (theme) => ({ const StepConnector = React.forwardRef(function StepConnector(props, ref) { const { + // eslint-disable-next-line react/prop-types active, + // eslint-disable-next-line react/prop-types alternativeLabel = false, classes, className, + // eslint-disable-next-line react/prop-types completed, + // eslint-disable-next-line react/prop-types disabled, + // eslint-disable-next-line react/prop-types index, + // eslint-disable-next-line react/prop-types orientation = 'horizontal', ...other } = props; @@ -86,40 +92,19 @@ const StepConnector = React.forwardRef(function StepConnector(props, ref) { }); StepConnector.propTypes = { - /** - * @ignore - */ - active: PropTypes.bool, - /** - * @ignore - * Set internally by Step when it's supplied with the alternativeLabel property. - */ - alternativeLabel: PropTypes.bool, + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ className: PropTypes.string, - /** - * @ignore - */ - completed: PropTypes.bool, - /** - * @ignore - */ - disabled: PropTypes.bool, - /** - * @ignore - */ - index: PropTypes.number, - /** - * @ignore - */ - orientation: PropTypes.oneOf(['horizontal', 'vertical']), }; export default withStyles(styles, { name: 'MuiStepConnector' })(StepConnector); diff --git a/packages/material-ui/src/StepContent/StepContent.d.ts b/packages/material-ui/src/StepContent/StepContent.d.ts index 2dad8dc2b3658a..3dbad048c2935b 100644 --- a/packages/material-ui/src/StepContent/StepContent.d.ts +++ b/packages/material-ui/src/StepContent/StepContent.d.ts @@ -5,15 +5,25 @@ import { TransitionProps } from '../transitions/transition'; export interface StepContentProps extends StandardProps, StepContentClasskey> { - active?: boolean; - alternativeLabel?: boolean; + /** + * Step content. + */ children: React.ReactNode; - completed?: boolean; - last?: boolean; - optional?: boolean; - orientation?: Orientation; + /** + * The component used for the transition. + * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + */ TransitionComponent?: React.ComponentType; + /** + * Adjust the duration of the content expand transition. + * Passed as a prop to the transition component. + * + * Set to 'auto' to automatically calculate transition time based on height. + */ transitionDuration?: TransitionProps['timeout'] | 'auto'; + /** + * Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. + */ TransitionProps?: TransitionProps; } @@ -29,6 +39,4 @@ export type StepContentClasskey = 'root' | 'last' | 'transition'; * * - [StepContent API](https://material-ui.com/api/step-content/) */ -declare const StepContent: React.ComponentType; - -export default StepContent; +export default function StepContent(props: StepContentProps): JSX.Element; diff --git a/packages/material-ui/src/StepContent/StepContent.js b/packages/material-ui/src/StepContent/StepContent.js index b5c5080442d0b7..185fbdaaaaaf8c 100644 --- a/packages/material-ui/src/StepContent/StepContent.js +++ b/packages/material-ui/src/StepContent/StepContent.js @@ -25,15 +25,22 @@ export const styles = (theme) => ({ const StepContent = React.forwardRef(function StepContent(props, ref) { const { + // eslint-disable-next-line react/prop-types active, + // eslint-disable-next-line react/prop-types alternativeLabel, children, classes, className, + // eslint-disable-next-line react/prop-types completed, + // eslint-disable-next-line react/prop-types expanded, + // eslint-disable-next-line react/prop-types last, + // eslint-disable-next-line react/prop-types optional, + // eslint-disable-next-line react/prop-types orientation, TransitionComponent = Collapse, transitionDuration: transitionDurationProp = 'auto', @@ -71,16 +78,10 @@ const StepContent = React.forwardRef(function StepContent(props, ref) { }); StepContent.propTypes = { - /** - * @ignore - * Expands the content. - */ - active: PropTypes.bool, - /** - * @ignore - * Set internally by Step when it's supplied with the alternativeLabel prop. - */ - alternativeLabel: PropTypes.bool, + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * Step content. */ @@ -89,32 +90,11 @@ StepContent.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ className: PropTypes.string, - /** - * @ignore - */ - completed: PropTypes.bool, - /** - * @ignore - */ - expanded: PropTypes.bool, - /** - * @ignore - */ - last: PropTypes.bool, - /** - * @ignore - * Set internally by Step when it's supplied with the optional prop. - */ - optional: PropTypes.bool, - /** - * @ignore - */ - orientation: PropTypes.oneOf(['horizontal', 'vertical']), /** * The component used for the transition. * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. @@ -127,9 +107,13 @@ StepContent.propTypes = { * Set to 'auto' to automatically calculate transition time based on height. */ transitionDuration: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }), PropTypes.oneOf(['auto']), + PropTypes.number, + PropTypes.shape({ + appear: PropTypes.number, + enter: PropTypes.number, + exit: PropTypes.number, + }), ]), /** * Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. diff --git a/packages/material-ui/src/StepIcon/StepIcon.d.ts b/packages/material-ui/src/StepIcon/StepIcon.d.ts index 629155de469e7d..e0f652a630e03c 100644 --- a/packages/material-ui/src/StepIcon/StepIcon.d.ts +++ b/packages/material-ui/src/StepIcon/StepIcon.d.ts @@ -2,10 +2,22 @@ import * as React from 'react'; import { StandardProps } from '..'; export interface StepIconProps - extends StandardProps, StepIconClasskey> { + extends StandardProps, StepIconClasskey, 'children'> { + /** + * Whether this step is active. + */ active?: boolean; + /** + * Mark the step as completed. Is passed to child components. + */ completed?: boolean; + /** + * Mark the step as failed. + */ error?: boolean; + /** + * The label displayed in the step icon. + */ icon: React.ReactNode; } @@ -21,6 +33,4 @@ export type StepIconClasskey = 'root' | 'text' | 'active' | 'completed' | 'error * * - [StepIcon API](https://material-ui.com/api/step-icon/) */ -declare const StepIcon: React.ComponentType; - -export default StepIcon; +export default function StepIcon(props: StepIconProps): JSX.Element; diff --git a/packages/material-ui/src/StepIcon/StepIcon.js b/packages/material-ui/src/StepIcon/StepIcon.js index 0950249186e3ba..9e1aaeedac6513 100644 --- a/packages/material-ui/src/StepIcon/StepIcon.js +++ b/packages/material-ui/src/StepIcon/StepIcon.js @@ -67,6 +67,10 @@ const StepIcon = React.forwardRef(function StepIcon(props, ref) { }); StepIcon.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * Whether this step is active. */ @@ -75,7 +79,7 @@ StepIcon.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * Mark the step as completed. Is passed to child components. */ @@ -87,7 +91,7 @@ StepIcon.propTypes = { /** * The label displayed in the step icon. */ - icon: PropTypes.node.isRequired, + icon: PropTypes.node, }; export default withStyles(styles, { name: 'MuiStepIcon' })(StepIcon); diff --git a/packages/material-ui/src/StepLabel/StepLabel.d.ts b/packages/material-ui/src/StepLabel/StepLabel.d.ts index 31c4f0ebce1801..8970a2c3cde2a0 100644 --- a/packages/material-ui/src/StepLabel/StepLabel.d.ts +++ b/packages/material-ui/src/StepLabel/StepLabel.d.ts @@ -1,22 +1,37 @@ import * as React from 'react'; import { StandardProps } from '..'; -import { Orientation } from '../Stepper'; -import { StepButtonIcon } from '../StepButton'; import { StepIconProps } from '../StepIcon'; export interface StepLabelProps extends StandardProps, StepLabelClasskey> { - active?: boolean; - alternativeLabel?: boolean; + /** + * In most cases will simply be a string containing a title for the label. + */ children: React.ReactNode; - completed?: boolean; + /** + * Mark the step as disabled, will also disable the button if + * `StepLabelButton` is a child of `StepLabel`. Is passed to child components. + */ disabled?: boolean; + /** + * Mark the step as failed. + */ error?: boolean; - icon?: StepButtonIcon; - last?: boolean; + /** + * Override the default label of the step icon. + */ + icon?: React.ReactNode; + /** + * The optional node to display. + */ optional?: React.ReactNode; - orientation?: Orientation; + /** + * The component to render in place of the [`StepIcon`](/api/step-icon/). + */ StepIconComponent?: React.ElementType; + /** + * Props applied to the [`StepIcon`](/api/step-icon/) element. + */ StepIconProps?: Partial; } @@ -43,6 +58,4 @@ export type StepLabelClasskey = * * - [StepLabel API](https://material-ui.com/api/step-label/) */ -declare const StepLabel: React.ComponentType; - -export default StepLabel; +export default function StepLabel(props: StepLabelProps): JSX.Element; diff --git a/packages/material-ui/src/StepLabel/StepLabel.js b/packages/material-ui/src/StepLabel/StepLabel.js index 2ef078eb2b2a8e..cecf7125e8c096 100644 --- a/packages/material-ui/src/StepLabel/StepLabel.js +++ b/packages/material-ui/src/StepLabel/StepLabel.js @@ -67,18 +67,24 @@ export const styles = (theme) => ({ const StepLabel = React.forwardRef(function StepLabel(props, ref) { const { + // eslint-disable-next-line react/prop-types active = false, + // eslint-disable-next-line react/prop-types alternativeLabel = false, children, classes, className, + // eslint-disable-next-line react/prop-types completed = false, disabled = false, error = false, + // eslint-disable-next-line react/prop-types expanded, icon, + // eslint-disable-next-line react/prop-types last, optional, + // eslint-disable-next-line react/prop-types orientation = 'horizontal', StepIconComponent: StepIconComponentProp, StepIconProps, @@ -142,14 +148,10 @@ const StepLabel = React.forwardRef(function StepLabel(props, ref) { }); StepLabel.propTypes = { - /** - * @ignore - */ - active: PropTypes.bool, - /** - * @ignore - */ - alternativeLabel: PropTypes.bool, + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * In most cases will simply be a string containing a title for the label. */ @@ -158,15 +160,11 @@ StepLabel.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ className: PropTypes.string, - /** - * @ignore - */ - completed: PropTypes.bool, /** * Mark the step as disabled, will also disable the button if * `StepLabelButton` is a child of `StepLabel`. Is passed to child components. @@ -176,26 +174,14 @@ StepLabel.propTypes = { * Mark the step as failed. */ error: PropTypes.bool, - /** - * @ignore - */ - expanded: PropTypes.bool, /** * Override the default label of the step icon. */ icon: PropTypes.node, - /** - * @ignore - */ - last: PropTypes.bool, /** * The optional node to display. */ optional: PropTypes.node, - /** - * @ignore - */ - orientation: PropTypes.oneOf(['horizontal', 'vertical']), /** * The component to render in place of the [`StepIcon`](/api/step-icon/). */ diff --git a/packages/material-ui/src/Stepper/Stepper.d.ts b/packages/material-ui/src/Stepper/Stepper.d.ts index c8e1399405fd4c..492c01065dbaca 100644 --- a/packages/material-ui/src/Stepper/Stepper.d.ts +++ b/packages/material-ui/src/Stepper/Stepper.d.ts @@ -5,11 +5,31 @@ import { PaperProps } from '../Paper'; export type Orientation = 'horizontal' | 'vertical'; export interface StepperProps extends StandardProps { + /** + * Set the active step (zero based index). + * Set to -1 to disable all the steps. + */ activeStep?: number; + /** + * If set to 'true' and orientation is horizontal, + * then the step label will be positioned under the icon. + */ alternativeLabel?: boolean; + /** + * Two or more `` components. + */ children: React.ReactNode; - connector?: React.ReactElement | React.ReactNode; + /** + * An element to be placed between each step. + */ + connector?: React.ReactElement; + /** + * If set the `Stepper` will not assist in controlling steps for linear flow. + */ nonLinear?: boolean; + /** + * The stepper orientation (layout flow direction). + */ orientation?: Orientation; } @@ -26,6 +46,4 @@ export type StepperClasskey = 'root' | 'horizontal' | 'vertical' | 'alternativeL * - [Stepper API](https://material-ui.com/api/stepper/) * - inherits [Paper API](https://material-ui.com/api/paper/) */ -declare const Stepper: React.ComponentType; - -export default Stepper; +export default function Stepper(props: StepperProps): JSX.Element; diff --git a/packages/material-ui/src/Stepper/Stepper.js b/packages/material-ui/src/Stepper/Stepper.js index 9b59d1ae2d7f2f..e16aa1e3322958 100644 --- a/packages/material-ui/src/Stepper/Stepper.js +++ b/packages/material-ui/src/Stepper/Stepper.js @@ -101,6 +101,10 @@ const Stepper = React.forwardRef(function Stepper(props, ref) { }); Stepper.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * Set the active step (zero based index). * Set to -1 to disable all the steps. @@ -114,12 +118,12 @@ Stepper.propTypes = { /** * Two or more `` components. */ - children: PropTypes.node.isRequired, + children: PropTypes.node, /** * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ diff --git a/packages/material-ui/src/Switch/Switch.d.ts b/packages/material-ui/src/Switch/Switch.d.ts index e5ecf765089119..1bc1e2c08b3b23 100644 --- a/packages/material-ui/src/Switch/Switch.d.ts +++ b/packages/material-ui/src/Switch/Switch.d.ts @@ -4,10 +4,32 @@ import { SwitchBaseProps, SwitchBaseClassKey } from '../internal/SwitchBase'; export interface SwitchProps extends StandardProps { + /** + * The icon to display when the component is checked. + */ checkedIcon?: React.ReactNode; + /** + * The color of the component. It supports those theme colors that make sense for this component. + */ color?: 'primary' | 'secondary' | 'default'; + /** + * If `true`, the switch will be disabled. + */ + disabled?: boolean; + /** + * The icon to display when the component is unchecked. + */ icon?: React.ReactNode; + /** + * The size of the switch. + * `small` is equivalent to the dense switch styling. + */ size?: 'small' | 'medium'; + /** + * The value of the component. The DOM API casts this to a string. + * The browser uses "on" as the default value. + */ + value?: unknown; } export type SwitchClassKey = @@ -31,6 +53,4 @@ export type SwitchClassKey = * - [Switch API](https://material-ui.com/api/switch/) * - inherits [IconButton API](https://material-ui.com/api/icon-button/) */ -declare const Switch: React.ComponentType; - -export default Switch; +export default function Switch(props: SwitchProps): JSX.Element; diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js index 1ff416a3c1e698..49b4a71f5f4830 100644 --- a/packages/material-ui/src/Switch/Switch.js +++ b/packages/material-ui/src/Switch/Switch.js @@ -189,6 +189,10 @@ const Switch = React.forwardRef(function Switch(props, ref) { }); Switch.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- /** * If `true`, the component is checked. */ @@ -201,7 +205,7 @@ Switch.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * @ignore */ @@ -209,7 +213,7 @@ Switch.propTypes = { /** * The color of the component. It supports those theme colors that make sense for this component. */ - color: PropTypes.oneOf(['primary', 'secondary', 'default']), + color: PropTypes.oneOf(['default', 'primary', 'secondary']), /** * @ignore */ @@ -228,7 +232,7 @@ Switch.propTypes = { * side of the icon with content above or below, without ruining the border * size and shape). */ - edge: PropTypes.oneOf(['start', 'end', false]), + edge: PropTypes.oneOf(['end', 'start', false]), /** * The icon to display when the component is unchecked. */ @@ -249,6 +253,7 @@ Switch.propTypes = { * Callback fired when the state is changed. * * @param {object} event The event source of the callback. + * You can pull out the new value by accessing `event.target.value` (string). * You can pull out the new checked state by accessing `event.target.checked` (boolean). */ onChange: PropTypes.func, @@ -260,11 +265,7 @@ Switch.propTypes = { * The size of the switch. * `small` is equivalent to the dense switch styling. */ - size: PropTypes.oneOf(['small', 'medium']), - /** - * The input component prop `type`. - */ - type: PropTypes.string, + size: PropTypes.oneOf(['medium', 'small']), /** * The value of the component. The DOM API casts this to a string. * The browser uses "on" as the default value. diff --git a/packages/material-ui/src/TextField/TextField.d.ts b/packages/material-ui/src/TextField/TextField.d.ts index 0c02b4b549a0e6..4dcb535398c465 100644 --- a/packages/material-ui/src/TextField/TextField.d.ts +++ b/packages/material-ui/src/TextField/TextField.d.ts @@ -15,58 +15,194 @@ export interface BaseTextFieldProps // event handlers are declared on derived interfaces 'onChange' | 'onBlur' | 'onFocus' | 'defaultValue' > { + /** + * This prop helps users to fill forms faster, especially on mobile devices. + * The name can be confusing, as it's more like an autofill. + * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). + */ autoComplete?: string; + /** + * If `true`, the `input` element will be focused during the first mount. + */ autoFocus?: boolean; - color?: 'primary' | 'secondary'; + /** + * @ignore + */ children?: React.ReactNode; + /** + * The color of the component. It supports those theme colors that make sense for this component. + */ + color?: 'primary' | 'secondary'; + /** + * The default value of the `input` element. + */ defaultValue?: unknown; + /** + * If `true`, the `input` element will be disabled. + */ disabled?: boolean; + /** + * If `true`, the label will be displayed in an error state. + */ error?: boolean; + /** + * Props applied to the [`FormHelperText`](/api/form-helper-text/) element. + */ FormHelperTextProps?: Partial; + /** + * If `true`, the input will take up the full width of its container. + */ fullWidth?: boolean; + /** + * The helper text content. + */ helperText?: React.ReactNode; + /** + * The id of the `input` element. + * Use this prop to make `label` and `helperText` accessible for screen readers. + */ id?: string; + /** + * Props applied to the [`InputLabel`](/api/input-label/) element. + */ InputLabelProps?: Partial; + /** + * Pass a ref to the `input` element. + */ inputRef?: React.Ref; + /** + * The label content. + */ label?: React.ReactNode; + /** + * If `dense` or `normal`, will adjust vertical spacing of this and contained components. + */ margin?: PropTypes.Margin; + /** + * If `true`, a textarea element will be rendered instead of an input. + */ multiline?: boolean; + /** + * Name attribute of the `input` element. + */ name?: string; + /** + * The short hint displayed in the input before the user enters a value. + */ placeholder?: string; + /** + * If `true`, the label is displayed as required and the `input` element` will be required. + */ required?: boolean; + /** + * Number of rows to display when multiline option is set to true. + */ rows?: string | number; + /** + * Maximum number of rows to display when multiline option is set to true. + */ rowsMax?: string | number; - size?: 'small' | 'medium'; + /** + * 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. + */ select?: boolean; + /** + * Props applied to the [`Select`](/api/select/) element. + */ SelectProps?: Partial; - type?: string; + /** + * The size of the text field. + */ + size?: 'small' | 'medium'; + /** + * 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). + */ + type?: React.InputHTMLAttributes['type']; + /** + * The value of the `input` element, required for a controlled component. + */ value?: unknown; } export interface StandardTextFieldProps extends BaseTextFieldProps { onBlur?: StandardInputProps['onBlur']; + /** + * Callback fired when the value is changed. + * + * @param {object} event The event source of the callback. + * You can pull out the new value by accessing `event.target.value` (string). + */ onChange?: StandardInputProps['onChange']; onFocus?: StandardInputProps['onFocus']; + /** + * The variant to use. + */ variant?: 'standard'; + /** + * Props applied to the Input element. + * It will be a [`FilledInput`](/api/filled-input/), + * [`OutlinedInput`](/api/outlined-input/) or [`Input`](/api/input/) + * component depending on the `variant` prop value. + */ InputProps?: Partial; + /** + * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. + */ inputProps?: StandardInputProps['inputProps']; } export interface FilledTextFieldProps extends BaseTextFieldProps { onBlur?: FilledInputProps['onBlur']; + /** + * Callback fired when the value is changed. + * + * @param {object} event The event source of the callback. + * You can pull out the new value by accessing `event.target.value` (string). + */ onChange?: FilledInputProps['onChange']; onFocus?: FilledInputProps['onFocus']; + /** + * The variant to use. + */ variant: 'filled'; + /** + * Props applied to the Input element. + * It will be a [`FilledInput`](/api/filled-input/), + * [`OutlinedInput`](/api/outlined-input/) or [`Input`](/api/input/) + * component depending on the `variant` prop value. + */ InputProps?: Partial; + /** + * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. + */ inputProps?: FilledInputProps['inputProps']; } export interface OutlinedTextFieldProps extends BaseTextFieldProps { onBlur?: OutlinedInputProps['onBlur']; + /** + * Callback fired when the value is changed. + * + * @param {object} event The event source of the callback. + * You can pull out the new value by accessing `event.target.value` (string). + */ onChange?: OutlinedInputProps['onChange']; onFocus?: OutlinedInputProps['onFocus']; + /** + * The variant to use. + */ variant: 'outlined'; + /** + * Props applied to the Input element. + * It will be a [`FilledInput`](/api/filled-input/), + * [`OutlinedInput`](/api/outlined-input/) or [`Input`](/api/input/) + * component depending on the `variant` prop value. + */ InputProps?: Partial; + /** + * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. + */ inputProps?: OutlinedInputProps['inputProps']; } @@ -116,6 +252,4 @@ export type TextFieldClassKey = 'root'; * - [TextField API](https://material-ui.com/api/text-field/) * - inherits [FormControl API](https://material-ui.com/api/form-control/) */ -declare const TextField: React.ComponentType; - -export default TextField; +export default function TextField(props: TextFieldProps): JSX.Element; diff --git a/packages/material-ui/src/TextField/TextField.js b/packages/material-ui/src/TextField/TextField.js index 4488422dd1d3e4..b256dd4f62c3ad 100644 --- a/packages/material-ui/src/TextField/TextField.js +++ b/packages/material-ui/src/TextField/TextField.js @@ -169,6 +169,7 @@ const TextField = React.forwardRef(function TextField(props, ref) { {label} )} + {select ? (