[core] Batch changes (#18264)

docs/src/modules/components/Ad.js

@@ -55,11 +55,20 @@ const inHouses = [
   },
   {
     name: 'themes',
-    link: 'https://themes.material-ui.com/',
+    link:
+      'https://themes.material-ui.com/?utm_source=material_ui&utm_medium=referral&utm_campaign=in-house',
     img: '/static/in-house/themes.png',
     description:
       '<b>Premium Themes</b><br />Kickstart your application development with a ready-made theme.',
   },
+  {
+    name: 'tidelift',
+    link:
+      'https://tidelift.com/subscription/managed-open-source-survey?utm_source=material_ui&utm_medium=referral&utm_campaign=enterprise&utm_content=ad',
+    img: '/static/in-house/tidelift.png',
+    description:
+      '<b>Material-UI for enterprise</b><br />Available in the Tidelift Subscription. Reduce risk, and improve code health.',
+  },
 ];
 
 function Ad(props) {
@@ -70,6 +79,7 @@ function Ad(props) {
   const timerAdblock = React.useRef();
   const [adblock, setAdblock] = React.useState(null);
   const [carbonOut, setCarbonOut] = React.useState(null);
+  const [codeFundOut, setCodeFundOut] = React.useState(null);
 
   const checkAdblock = React.useCallback((attempt = 1) => {
     if (document.querySelector('.cf-wrapper') || document.querySelector('#carbonads')) {
@@ -107,6 +117,18 @@ function Ad(props) {
     };
   }, [checkAdblock]);
 
+  React.useEffect(() => {
+    const handler = event => {
+      if (event.detail.status === 'no-advertiser') {
+        setCodeFundOut(true);
+      }
+    };
+    window.addEventListener('codefund', handler);
+    return () => {
+      window.removeEventListener('codefund', handler);
+    };
+  }, []);
+
   let children;
   let minHeight;
 
@@ -126,13 +148,13 @@ function Ad(props) {
   }
 
   if (!children) {
-    if (random >= 0.6) {
-      children = <AdCodeFund />;
-    } else if (!carbonOut) {
-      children = <AdCarbon />;
-    } else {
+    if (carbonOut || codeFundOut) {
       children = <AdInHouse ad={inHouses[Math.round((inHouses.length - 1) * random)]} />;
       minHeight = 'auto';
+    } else if (random >= 0.5) {
+      children = <AdCodeFund />;
+    } else {
+      children = <AdCarbon />;
     }
   }
 

docs/src/modules/components/AdCarbon.js

@@ -15,6 +15,8 @@ const styles = theme => ({
       '& .carbon-img': {
         float: 'left',
         marginLeft: -130,
+        width: 130,
+        height: 100,
         marginRight: theme.spacing(1.5),
       },
       '& img': {

docs/src/modules/components/AdCodeFund.js

@@ -15,6 +15,8 @@ const styles = theme => ({
       '& .cf-img-wrapper.cf-img-wrapper': {
         float: 'left',
         marginLeft: -130,
+        width: 130,
+        height: 100,
         marginRight: theme.spacing(1.5),
       },
       '& img': {

docs/src/modules/components/AdInHouse.js

@@ -15,6 +15,8 @@ const useStyles = makeStyles(theme => ({
     '& $imageWrapper': {
       float: 'left',
       marginLeft: -130,
+      width: 130,
+      height: 100,
       marginRight: theme.spacing(1.5),
     },
     '& img': {
@@ -43,7 +45,7 @@ export default function AdInHouse(props) {
   const { ad } = props;
   const classes = useStyles();
   return (
-    <span className={classes.root} id="in-house">
+    <span className={classes.root}>
       <a
         className={classes.link}
         href={ad.link}

docs/src/modules/components/AppDrawer.js

@@ -9,6 +9,7 @@ import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
 import Divider from '@material-ui/core/Divider';
 import Hidden from '@material-ui/core/Hidden';
 import AppDrawerNavItem from 'docs/src/modules/components/AppDrawerNavItem';
+import DiamondSponsors from 'docs/src/modules/components/DiamondSponsors';
 import Link from 'docs/src/modules/components/Link';
 import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
 import PageContext from 'docs/src/modules/components/PageContext';
@@ -160,6 +161,7 @@ function AppDrawer(props) {
         </div>
       </div>
       <Divider />
+      <DiamondSponsors />
       {renderNavItems({ props, pages, activePage, depth: 0, t })}
     </PersistScroll>
   );

docs/src/modules/components/DiamondSponsors.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+import { useSelector } from 'react-redux';
+import { makeStyles } from '@material-ui/core/styles';
+import AddIcon from '@material-ui/icons/Add';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& a': {
+      display: 'block',
+      marginTop: theme.spacing(1),
+    },
+    '& img': {
+      width: 125,
+    },
+  },
+  placeholder: {
+    width: 125,
+    height: 35,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: theme.shape.borderRadius,
+    color: theme.palette.divider,
+    border: `1px dashed ${theme.palette.divider}`,
+    transition: theme.transitions.create(['color', 'border-color']),
+    '&&': {
+      display: 'flex',
+    },
+    '&:hover': {
+      borderColor: 'currentColor',
+      color: theme.palette.text.secondary,
+    },
+  },
+}));
+
+export default function DiamondSponsors() {
+  const classes = useStyles();
+  const t = useSelector(state => state.options.t);
+
+  return (
+    <Box mx={3} my={2} className={classes.root}>
+      <Typography variant="caption" color="textSecondary" display="block">
+        {t('diamondSponsors')}
+      </Typography>
+      <a
+        className={classes.placeholder}
+        rel="noopener noreferrer"
+        target="_blank"
+        href="https://www.patreon.com/oliviertassinari"
+      >
+        <AddIcon />
+      </a>
+    </Box>
+  );
+}

docs/src/modules/utils/helpers.js

@@ -71,8 +71,17 @@ function addTypeDeps(deps) {
 
     deps[`@types/${resolvedName}`] = 'latest';
   });
+}
 
-  return deps;
+function includePeerDependencies(deps, versions) {
+  Object.assign(deps, {
+    'react-dom': versions['react-dom'],
+    react: versions.react,
+  });
+
+  if (deps['@material-ui/lab'] && !deps['@material-ui/core']) {
+    deps['@material-ui/core'] = versions['@material-ui/core'];
+  }
 }
 
 /**
@@ -84,11 +93,11 @@ function addTypeDeps(deps) {
  */
 function getDependencies(raw, options = {}) {
   const { codeLanguage = CODE_VARIANTS.JS, reactVersion = 'latest' } = options;
-  const deps = {
+
+  const deps = {};
+  const versions = {
     'react-dom': reactVersion,
     react: reactVersion,
-  };
-  const versions = {
     '@material-ui/core': 'latest',
     '@material-ui/icons': 'latest',
     '@material-ui/lab': 'latest',
@@ -99,6 +108,7 @@ function getDependencies(raw, options = {}) {
     jss: 'next',
     'jss-plugin-template': 'next',
   };
+
   const re = /^import\s'([^']+)'|import\s[\s\S]*?\sfrom\s+'([^']+)/gm;
   let m;
   // eslint-disable-next-line no-cond-assign
@@ -118,6 +128,8 @@ function getDependencies(raw, options = {}) {
     }
   }
 
+  includePeerDependencies(deps, versions);
+
   if (codeLanguage === CODE_VARIANTS.TS) {
     addTypeDeps(deps);
     deps.typescript = 'latest';

docs/src/modules/utils/helpers.test.js

@@ -121,4 +121,17 @@ import {
       'react-dom': 'latest',
     });
   });
+
+  it('should include core if lab present', () => {
+    const source = `
+import lab from '@material-ui/lab';
+    `;
+
+    assert.deepEqual(getDependencies(source), {
+      '@material-ui/core': 'latest',
+      '@material-ui/lab': 'latest',
+      react: 'latest',
+      'react-dom': 'latest',
+    });
+  });
 });

docs/src/pages/components/autocomplete/CustomizedHook.js

@@ -135,6 +135,7 @@ export default function CustomizedHook() {
     focused,
     setAnchorEl,
   } = useAutocomplete({
+    defaultValue: [top100Films[1]],
     multiple: true,
     options: top100Films,
     getOptionLabel: option => option.title,

docs/src/pages/components/autocomplete/CustomizedHook.tsx

@@ -135,6 +135,7 @@ export default function CustomizedHook() {
     focused,
     setAnchorEl,
   } = useAutocomplete({
+    defaultValue: [top100Films[1]],
     multiple: true,
     options: top100Films,
     getOptionLabel: option => option.title,

docs/src/pages/components/autocomplete/GitHubLabel.js

@@ -79,6 +79,7 @@ const useStyles = makeStyles(theme => ({
     fontSize: 13,
   },
   option: {
+    minHeight: 'auto',
     alignItems: 'flex-start',
     padding: 8,
     '&[aria-selected="true"]': {
@@ -175,7 +176,6 @@ export default function GitHubLabel() {
           open
           onClose={handleClose}
           multiple
-          debug
           classes={{
             paper: classes.paper,
             option: classes.option,

docs/src/pages/components/autocomplete/GitHubLabel.tsx

@@ -80,6 +80,7 @@ const useStyles = makeStyles((theme: Theme) =>
       fontSize: 13,
     },
     option: {
+      minHeight: 'auto',
       alignItems: 'flex-start',
       padding: 8,
       '&[aria-selected="true"]': {
@@ -177,7 +178,6 @@ export default function GitHubLabel() {
           open
           onClose={handleClose}
           multiple
-          debug
           classes={{
             paper: classes.paper,
             option: classes.option,

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

@@ -63,7 +63,7 @@ import useAutocomplete from '@material-ui/lab/useAutocomplete';
 
 {{"demo": "pages/components/autocomplete/CustomizedHook.js"}}
 
-Head to [Customized Autocomplete](#customized-autocomplete) for a customization example with the Autocomplete component instead of the hook.
+Head to the [Customized Autocomplete](#customized-autocomplete) section for a customization example with the `Autocomplete` component instead of the hook.
 
 ## Asynchronous requests
 
@@ -72,10 +72,13 @@ Head to [Customized Autocomplete](#customized-autocomplete) for a customization
 ### Google Maps place
 
 A customized UI for Google Maps Places Autocomplete.
-For this demo, we need to load the [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) API.
 
 {{"demo": "pages/components/autocomplete/GoogleMaps.js"}}
 
+For this demo, we need to load the [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) API.
+
+> ⚠️ Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account.
+
 ## Multiple values
 
 Also knowned as tags, the user is allowed to enter more than 1 value.
@@ -98,13 +101,15 @@ This demo reproduces the GitHub's label picker:
 
 {{"demo": "pages/components/autocomplete/GitHubLabel.js"}}
 
+Head to the [Customized hook](#customized-hook) section for a customization example with the `useAutocomplete` hook instead of the component.
+
 ## Highlights
 
 The following demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components.
 
 {{"demo": "pages/components/autocomplete/Highlights.js"}}
 
-## Customer filter
+## Custom filter
 
 The component exposes a factory to create a filter method that can provided to the `filerOption` prop.
 You can use it to change the default option filter behavior.
@@ -135,7 +140,9 @@ const filterOptions = createFilterOptions({
 
 {{"demo": "pages/components/autocomplete/Filter.js", "defaultCodeOpen": false}}
 
-For richer filtering mechanisms, it's recommended to look at [match-sorter](https://github.com/kentcdodds/match-sorter). For instance:
+### Advanced
+
+For richer filtering mechanisms, like fuzzy matching, it's recommended to look at [match-sorter](https://github.com/kentcdodds/match-sorter). For instance:
 
 ```jsx
 import matchSorter from 'match-sorter';

docs/translations/translations.json

@@ -83,6 +83,7 @@
   "increaseSpacing": "increase spacing",
   "decreaseSpacing": "decrease spacing",
   "getProfessionalSupport": "Get Professional Support",
+  "diamondSponsors": "Diamond Sponsors",
   "pages": {
     "/getting-started": "Getting Started",
     "/getting-started/installation": "Installation",

examples/cdn/README.md

@@ -22,7 +22,7 @@ which is great for prototyping. We discourage using this approach in production
 the client has to download the entire library, regardless of which components are actually used,
 affecting performance and bandwidth utilisation.
 
-[The live preview.](https://rawgit.com/mui-org/material-ui/master/examples/cdn/index.html)
+[The live preview.](https://combinatronics.com/mui-org/material-ui/master/examples/cdn/index.html)
 
 ## UMD releases
 

packages/material-ui/src/Slider/Slider.js

@@ -325,6 +325,12 @@ export const styles = theme => ({
       left: 22,
       transform: 'translateY(50%)',
     },
+    '@media (pointer: coarse)': {
+      top: 40,
+      '$vertical &': {
+        left: 31,
+      },
+    },
   },
   /* Styles applied to the mark label element if active (depending on the value). */
   markLabelActive: {