Merge branch 'master' into Transition-Alert-Interaction

.circleci/config.yml

@@ -11,7 +11,7 @@ defaults: &defaults
     REACT_DIST_TAG: << parameters.react-dist-tag >>
   working_directory: /tmp/material-ui
   docker:
-    - image: circleci/node:8.16
+    - image: circleci/node:10
 # CircleCI has disabled the cache across forks for security reasons.
 # Following their official statement, it was a quick solution, they
 # are working on providing this feature back with appropriate security measures.
@@ -24,6 +24,11 @@ defaults: &defaults
 commands:
   install_js:
     steps:
+      - run:
+          name: View install environment
+          command: |
+            node --version
+            yarn --version
       - run:
           name: Resolve react version
           command: |
@@ -154,7 +159,7 @@ jobs:
   test_regressions:
     <<: *defaults
     docker:
-      - image: circleci/node:8.16
+      - image: circleci/node:10
       - image: selenium/standalone-chrome:3.11.0
     steps:
       - checkout

.mocharc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  recursive: true,
+  reporter: 'dot',
+  require: [require.resolve('@babel/register'), require.resolve('./test/utils/setup')],
+};

docs/package.json

@@ -108,7 +108,7 @@
     "redux": "^4.0.4",
     "redux-logger": "^3.0.6",
     "rimraf": "^3.0.0",
-    "styled-components": "^4.4.0",
+    "styled-components": "^5.0.0",
     "url-loader": "^2.1.0",
     "webfontloader": "^1.6.28",
     "webpack": "^4.41.0",

docs/pages/api/autocomplete.md

@@ -71,8 +71,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">popupIcon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;ArrowDropDownIcon /></span> | The icon to display in place of the default popup icon. |
 | <span class="prop-name">renderGroup</span> | <span class="prop-type">func</span> |  | Render the group.<br><br>**Signature:**<br>`function(option: any) => ReactNode`<br>*option:* The group to render. |
 | <span class="prop-name required">renderInput&nbsp;*</span> | <span class="prop-type">func</span> |  | Render the input.<br><br>**Signature:**<br>`function(params: object) => ReactNode`<br>*params:* null |
-| <span class="prop-name">renderOption</span> | <span class="prop-type">func</span> |  | Render the option, use `getOptionLabel` by default.<br><br>**Signature:**<br>`function(option: any, state: object) => ReactNode`<br>*option:* The option to render.<br>*state:* The state of the component. |
-| <span class="prop-name">renderTags</span> | <span class="prop-type">func</span> |  | Render the selected value.<br><br>**Signature:**<br>`function(value: any, getTagProps: function) => ReactNode`<br>*value:* The `value` provided to the component.<br>*getTagProps:* A tag props getter. |
+| <span class="prop-name">renderOption</span> | <span class="prop-type">func</span> |  | Render the option, use `getOptionLabel` by default.<br><br>**Signature:**<br>`function(option: T, state: object) => ReactNode`<br>*option:* The option to render.<br>*state:* The state of the component. |
+| <span class="prop-name">renderTags</span> | <span class="prop-type">func</span> |  | Render the selected value.<br><br>**Signature:**<br>`function(value: undefined, getTagProps: function) => ReactNode`<br>*value:* The `value` provided to the component.<br>*getTagProps:* A tag props getter. |
+| <span class="prop-name">selectOnFocus</span> | <span class="prop-type">bool</span> | <span class="prop-default">!props.freeSolo</span> | If `true`, the input's text will be selected on focus. |
 | <span class="prop-name">size</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'medium'</span> | The size of the autocomplete. |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The value of the autocomplete.<br>The value must have reference equality with the option in order to be selected. You can customize the equality behavior with the `getOptionSelected` prop. |
 

docs/src/pages/components/autocomplete/autocomplete.md

@@ -32,7 +32,9 @@ Choose one country between 248.
 
 ## Free solo
 
-Set `freeSolo` to true so the textbox can contain any arbitrary value.
+Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search box with suggestions, e.g. Google search.
+
+However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus`.
 
 {{"demo": "pages/components/autocomplete/FreeSolo.js"}}
 

docs/src/pages/components/backdrop/SimpleBackdrop.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Backdrop from '@material-ui/core/Backdrop';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
@@ -16,21 +17,11 @@ export default function SimpleBackdrop() {
 
   return (
     <div>
-      <button
-        type="button"
-        onClick={() => {
-          setOpen(!open);
-        }}
-      >
+
+      <Button variant="outlined" color="primary" onClick={handleToggle}>
         Show backdrop
-      </button>
-      <Backdrop
-        className={classes.backdrop}
-        open={open}
-        onClick={() => {
-          setOpen(false);
-        }}
-      >
+      </Button>
+      <Backdrop className={classes.backdrop} open={open} onClick={handleClose}>
         <CircularProgress color="inherit" />
       </Backdrop>
     </div>

docs/src/pages/components/backdrop/SimpleBackdrop.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Backdrop from '@material-ui/core/Backdrop';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import Button from '@material-ui/core/Button';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -18,21 +19,10 @@ export default function SimpleBackdrop() {
 
   return (
     <div>
-      <button
-        type="button"
-        onClick={() => {
-          setOpen(!open);
-        }}
-      >
+      <Button variant="outlined" color="primary" onClick={handleToggle}>
         Show backdrop
-      </button>
-      <Backdrop
-        className={classes.backdrop}
-        open={open}
-        onClick={() => {
-          setOpen(false);
-        }}
-      >
+      </Button>
+      <Backdrop className={classes.backdrop} open={open} onClick={handleClose}>
         <CircularProgress color="inherit" />
       </Backdrop>
     </div>

docs/src/pages/components/dialogs/CustomizedDialogs.js

@@ -61,7 +61,7 @@ export default function CustomizedDialogs() {
 
   return (
     <div>
-      <Button variant="outlined" color="secondary" onClick={handleClickOpen}>
+      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
         Open dialog
       </Button>
       <Dialog onClose={handleClose} aria-labelledby="customized-dialog-title" open={open}>

docs/src/pages/components/dialogs/CustomizedDialogs.tsx

@@ -68,7 +68,7 @@ export default function CustomizedDialogs() {
 
   return (
     <div>
-      <Button variant="outlined" color="secondary" onClick={handleClickOpen}>
+      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
         Open dialog
       </Button>
       <Dialog onClose={handleClose} aria-labelledby="customized-dialog-title" open={open}>

docs/src/pages/components/dialogs/SimpleDialog.js

@@ -55,7 +55,7 @@ function SimpleDialog(props) {
               <AddIcon />
             </Avatar>
           </ListItemAvatar>
-          <ListItemText primary="add account" />
+          <ListItemText primary="Add account" />
         </ListItem>
       </List>
     </Dialog>

docs/src/pages/components/dialogs/SimpleDialog.tsx

@@ -59,7 +59,7 @@ function SimpleDialog(props: SimpleDialogProps) {
               <AddIcon />
             </Avatar>
           </ListItemAvatar>
-          <ListItemText primary="add account" />
+          <ListItemText primary="Add account" />
         </ListItem>
       </List>
     </Dialog>

docs/src/pages/customization/components/DynamicInlineStyle.tsx

@@ -2,9 +2,8 @@ import React from 'react';
 import Button from '@material-ui/core/Button';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
-import { createStyles } from '@material-ui/core/styles';
 
-const styles = createStyles({
+const styles: Record<'button' | 'buttonBlue', React.CSSProperties> = {
   button: {
     background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
     borderRadius: 3,
@@ -18,7 +17,7 @@ const styles = createStyles({
     background: 'linear-gradient(45deg, #2196f3 30%, #21cbf3 90%)',
     boxShadow: '0 3px 5px 2px rgba(33, 203, 243, .30)',
   },
-});
+};
 
 export default function DynamicInlineStyle() {
   const [color, setColor] = React.useState('default');

docs/src/pages/getting-started/supported-platforms/supported-platforms.md

@@ -19,7 +19,7 @@ You can expect Material-UI's components to render without major issues.
 ## Server
 
 Because Material-UI supports server-side rendering, it needs to support the latest, stable releases of [Node.js](https://github.com/nodejs/node).
-Where possible, the [LTS versions that are in maintenance](https://github.com/nodejs/Release#lts-schedule1) are supported. Right now, it supports **node v8.x** and newer versions.
+Where possible, the [LTS versions that are in maintenance](https://github.com/nodejs/Release#lts-schedule1) are supported. We recommend using **node v10.x** or newever. However we still support **node v8.x**. The support of **node v8.x** will be stopped in Material-UI Version 5.
 
 ### CSS prefixing
 

framer/package.json

@@ -11,7 +11,7 @@
     "case": "1.6.2",
     "deepmerge": "^4.0.0",
     "docs": "^4.0.0",
-    "mustache": "^3.1.0",
+    "mustache": "^4.0.0",
     "react-docgen": "^5.0.0-beta.1"
   },
   "scripts": {

package.json

@@ -101,7 +101,7 @@
     "fs-extra": "^8.1.0",
     "glob": "^7.1.2",
     "glob-gitignore": "^1.0.11",
-    "jsdom": "^15.1.1",
+    "jsdom": "^16.0.0",
     "jsonlint": "^1.6.3",
     "karma": "^4.3.0",
     "karma-browserstack-launcher": "~1.4.0",
@@ -111,7 +111,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^4.0.2",
     "lerna": "^3.16.4",
-    "mocha": "^6.2.0",
+    "mocha": "^7.0.0",
     "nyc": "^15.0.0",
     "prettier": "1.17.0",
     "pretty-bytes": "^5.3.0",

packages/material-ui-icons/package.json

@@ -54,7 +54,7 @@
   "devDependencies": {
     "fs-extra": "^8.1.0",
     "mkdirp": "^0.5.0",
-    "mustache": "^3.0.2",
+    "mustache": "^4.0.0",
     "svgo": "^1.3.0",
     "temp": "^0.9.0",
     "yargs": "^15.0.1"

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

@@ -266,6 +266,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     renderInput,
     renderOption: renderOptionProp,
     renderTags,
+    selectOnFocus = !props.freeSolo,
     size = 'medium',
     value: valueProp,
     ...other
@@ -718,6 +719,10 @@ Autocomplete.propTypes = {
    * @returns {ReactNode}
    */
   renderTags: PropTypes.func,
+  /**
+   * If `true`, the input's text will be selected on focus.
+   */
+  selectOnFocus: PropTypes.bool,
   /**
    * The size of the autocomplete.
    */

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

@@ -150,7 +150,12 @@ export interface UseAutocompleteProps {
    * @param {string} value The new value of the text input.
    * @param {string} reason Can be: "input" (user input), "reset" (programmatic change), `"clear"`.
    */
-  onInputChange?: (event: React.ChangeEvent<{}>, value: any, reason: 'input' | 'reset') => void;
+
+  onInputChange?: (
+    event: React.ChangeEvent<{}>,
+    value: string,
+    reason: 'input' | 'reset' | 'clear',
+  ) => void;
   /**
    * Callback fired when the popup requests to be opened.
    * Use in controlled mode (see open).
@@ -165,7 +170,19 @@ export interface UseAutocompleteProps {
   /**
    * Array of options.
    */
-  options?: any[];
+
+  options?: T[];
+  /**
+   * If `true`, the input's text will be selected on focus.
+   */
+  selectOnFocus?: boolean;
+}
+
+export interface UseAutocompleteMultipleProps<T> extends UseAutocompleteCommonProps<T> {
+  /**
+   * If `true`, `value` must be an array and the menu will support multiple selections.
+   */
+  multiple: true;
   /**
    * The value of the autocomplete.
    *

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

@@ -107,6 +107,7 @@ export default function useAutocomplete(props) {
     onInputChange,
     open: openProp,
     options = [],
+    selectOnFocus = !props.freeSolo,
     value: valueProp,
   } = props;
 
@@ -765,7 +766,10 @@ export default function useAutocomplete(props) {
       inputRef.current.selectionEnd - inputRef.current.selectionStart === 0
     ) {
       inputRef.current.focus();
-      inputRef.current.select();
+
+      if (selectOnFocus) {
+        inputRef.current.select();
+      }
     }
 
     firstFocus.current = false;

packages/material-ui-styles/src/withStyles/withStyles.d.ts

@@ -18,7 +18,14 @@ export interface BaseCSSProperties extends CSS.Properties<number | string> {
 
 export interface CSSProperties extends BaseCSSProperties {
   // Allow pseudo selectors and media queries
-  [k: string]: BaseCSSProperties[keyof BaseCSSProperties] | CSSProperties;
+  // `unknown` is used since TS does not allow assigning an interface without
+  // an index signature to one with an index signature. This is to allow type safe
+  // module augmentation.
+  // Technically we want any key not typed in `BaseCSSProperties` to be of type
+  // `CSSProperties` but this doesn't work. The index signature needs to cover
+  // BaseCSSProperties as well. Usually you would use `BaseCSSProperties[keyof BaseCSSProperties]`
+  // but this would not allow assigning React.CSSProperties to CSSProperties
+  [k: string]: unknown | CSSProperties;
 }
 
 export type BaseCreateCSSProperties<Props extends object = {}> = {
@@ -43,9 +50,12 @@ export interface CreateCSSProperties<Props extends object = {}>
  */
 export type StyleRules<Props extends object = {}, ClassKey extends string = string> = Record<
   ClassKey,
-  IsEmptyInterface<Props> extends true
-    ? CSSProperties | (() => CSSProperties)
-    : CreateCSSProperties<Props> | ((props: Props) => CreateCSSProperties<Props>)
+  // JSS property bag
+  | CSSProperties
+  // JSS property bag where values are based on props
+  | CreateCSSProperties<Props>
+  // JSS property bag based on props
+  | ((props: Props) => CreateCSSProperties<Props>)
 >;
 
 /**

packages/material-ui-styles/test/styles.spec.tsx

@@ -455,14 +455,14 @@ function forwardRefTest() {
   // If there are no props, use the definition that doesn't accept them
   // https://github.com/mui-org/material-ui/issues/16198
 
-  // $ExpectType Record<"root", CSSProperties | (() => CSSProperties)>
+  // $ExpectType Record<"root", CSSProperties | CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)>
   const styles = createStyles({
     root: {
       width: 1,
     },
   });
 
-  // $ExpectType Record<"root", CSSProperties | (() => CSSProperties)>
+  // $ExpectType Record<"root", CSSProperties | CreateCSSProperties<{}> | ((props: {}) => CreateCSSProperties<{}>)>
   const styles2 = createStyles({
     root: () => ({
       width: 1,
@@ -473,7 +473,7 @@ function forwardRefTest() {
     foo: boolean;
   }
 
-  // $ExpectType Record<"root", CreateCSSProperties<testProps> | ((props: testProps) => CreateCSSProperties<testProps>)>
+  // $ExpectType Record<"root", CSSProperties | CreateCSSProperties<testProps> | ((props: testProps) => CreateCSSProperties<testProps>)>
   const styles3 = createStyles({
     root: (props: testProps) => ({
       width: 1,

packages/material-ui/src/Select/Select.test.js

@@ -762,9 +762,6 @@ describe('<Select />', () => {
 
       it('should throw if non array', function test() {
         if (!/jsdom/.test(window.navigator.userAgent)) {
-          // afterEach is not run since the only test in this block is skipped
-          // this is likely a bug in mocha
-          consoleErrorMock.reset();
           // can't catch render errors in the browser for unknown reason
           // tried try-catch + error boundary + window onError preventDefault
           this.skip();

packages/material-ui/src/styles/createMixins.d.ts

@@ -1,10 +1,10 @@
 import { Breakpoints } from './createBreakpoints';
 import { Spacing } from './createSpacing';
-import { CSSProperties } from './withStyles';
+import * as React from 'react';
 
 export interface Mixins {
-  gutters: (styles?: CSSProperties) => CSSProperties;
-  toolbar: CSSProperties;
+  gutters: (styles?: React.CSSProperties) => React.CSSProperties;
+  toolbar: React.CSSProperties;
   // ... use interface declaration merging to add custom mixins
 }