[core] Batch small changes (#18155)

* [docs] Link https://material-ui.com/versions/

This will enable developer landing on an old version to easy find its way to
a different version.

The idea was sparked by https://www.ag-grid.com/archive/.

* [examples] Remove parcel

I have added a Parcel demo 18 months ago, anticipating it would gain traction.
#10575

As it turns out, I was wrong. I think that it's too early to have an official example with Parcel.
Our example has outdated dependencies.

https://npm-stat.com/charts.html?package=parcel-bundler&package=preact&package=webpack&from=2017-11-01&to=2019-11-01

For instance, Preact has more traction, it would be better to improve our example for it.

* [docs] Add missing 180px icon

* Thank you Tom

* [docs] Remove Blokt backer

* [docs] Remove Book affiliation

This is not interesting. It yields about $5/month.

* [TableCell] Smaller source

* [CHANGELOG] Fix typos

* [docs] Use rel=sponsored where appropriate

Bring to light by Sebastien, for more details:
https://moz.com/blog/nofollow-sponsored-ugc

* [docs] Reduce diffs, isolate changes

* [core] Prefer parentNode over parentElement

They are very close, it seems that the difference will never impact us.
https://stackoverflow.com/questions/8685739/difference-between-dom-parentnode-and-parentelement

I went with parentNode as more frequent in the codebase.

* [docs] Stop date picker survey

* [Autocomplete] Add active custom state

CHANGELOG.md

@@ -9,7 +9,7 @@ Here are some highlights ✨:
 
 - 🔍 Introduce a new Autocomplete component in the lab to support the autocomplete, combobox and multi-select use cases (#17037) @dreamsinspace.
 
-  This [new component](https://material-ui.com/components/autocomplete/) will replaces the [third-party integration examples](https://material-ui.com/components/integrated-autocomplete/) once it graduate from the lab to the core.
+  This [new component](https://material-ui.com/components/autocomplete/) will replace the [third-party integration examples](https://material-ui.com/components/integrated-autocomplete/) once it graduates from the lab to the core.
   It was one of the [most requested features](https://twitter.com/MaterialUI/status/1148901411180163073) (by number of 👍 on the corresponding issue).
 
 - 📚 Show the JSX by default for small examples (#17831) @mbrookes.

README.md

@@ -63,17 +63,16 @@ Gold Sponsors are those who have pledged $500/month and more to Material-UI.
 via [Patreon](https://www.patreon.com/oliviertassinari)
 
 <p style="display: flex; justify-content: center;">
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="creative-tim" href="https://www.creative-tim.com/?partner=104080" rel="noopener nofollow" target="_blank" style="margin-right: 16px;"><img width="126" src="https://github.com/creativetimofficial.png?size=126" alt="creative-tim" title="Premium Themes"></a>
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage" rel="noopener nofollow" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/tidelift.png?size=96" alt="tidelift" title="Get Professionally Supported Material-UI"></a>
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener nofollow" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/teambit.png?size=96" alt="bitsrc" title="The fastest way to share code"></a>
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="blokt" href="https://blokt.com/" rel="noopener nofollow" target="_blank" style="margin-right: 16px;"><img width="96" src="https://material-ui.com/static/images/blokt.jpg" alt="blokt" title="Leading Cryptocurrency News"></a>
+  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="creative-tim" href="https://www.creative-tim.com/?partner=104080" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img width="126" src="https://github.com/creativetimofficial.png?size=126" alt="creative-tim" title="Premium Themes"></a>
+  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/tidelift.png?size=96" alt="tidelift" title="Get Professionally Supported Material-UI"></a>
+  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/teambit.png?size=96" alt="bitsrc" title="The fastest way to share code"></a>
 </p>
 
 via [OpenCollective](https://opencollective.com/material-ui)
 
 <p style="display: flex; justify-content: center; flex-wrap: wrap;">
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener nofollow" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group" width="100" loading="lazy"></a>
-  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.crosswordsolver.com" rel="noopener nofollow" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/crosswordsolver/avatar.png" alt="crosswordsolver" title="Crossword Puzzle Solver" width="100" loading="lazy"></a>
+  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="callemall" title="The easy way to message your group" width="100" loading="lazy"></a>
+  <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.crosswordsolver.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/crosswordsolver/avatar.png" alt="crosswordsolver" title="Crossword Puzzle Solver" width="100" loading="lazy"></a>
 </p>
 
 ### There is more!

docs/notifications.json

@@ -8,11 +8,6 @@
     "text": "Let's translate! <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" data-ga-event-category=\"l10n\" data-ga-event-action=\"notification\" data-ga-event-label=\"zh\" href=\"https://translate.material-ui.com/\">帮助 Material-UI 将文档翻译成中文</a>. 🇨🇳",
     "userLanguage": "zh"
   },
-  {
-    "id": 45,
-    "text": "We plan to significantly improve the date picker. <a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://www.surveymonkey.com/r/5XHDL76\">Share your thoughts in our survey!</a>",
-    "route": "/components/pickers"
-  },
   {
     "id": 46,
     "text": "<a style=\"color: inherit;\" target=\"_blank\" rel=\"noopener\" href=\"https://twitter.com/MaterialUI/status/1189292678032306176\">Material-UI v4.5.2 is out 🎉</a>"

docs/pages/_app.js

@@ -280,7 +280,7 @@ function AppWrapper(props) {
     // Remove the server-side injected CSS.
     const jssStyles = document.querySelector('#jss-server-side');
     if (jssStyles) {
-      jssStyles.parentNode.removeChild(jssStyles);
+      jssStyles.parentElement.removeChild(jssStyles);
     }
   }, []);
 

docs/pages/blog/material-ui-v1-is-out.md

@@ -44,7 +44,7 @@ We know the ease of use is a critical part of user acquisition. The more user we
 - **Onboarding**. We have reduced the onboarding friction as much as possible. We know the onboarding is a critical step for user acquisition. The onboarding friction comes in different flavors:
 We have reduced the number of installation steps needed. It should be as simple as 1. npm install @material-ui/core and 2. import Button from '@material-ui/core/Button'; . We don’t ask for polyfill, custom webpack plugin or any specific build tool. The usage of MuiThemeProvider is no longer mandatory.
 
-- **Examples**. We are hosting [example projects](https://github.com/mui-org/material-ui/tree/master/examples) with the most popular solutions to start a project: [create-react-app](https://github.com/facebook/create-react-app), [Next.js](https://github.com/zeit/next.js), [Gatsby](https://github.com/gatsbyjs/gatsby), CDN and [Parcel](https://github.com/parcel-bundler/parcel).
+- **Examples**. We are hosting [example projects](https://github.com/mui-org/material-ui/tree/master/examples) with the most popular solutions to start a project: [create-react-app](https://github.com/facebook/create-react-app), [Next.js](https://github.com/zeit/next.js), [Gatsby](https://github.com/gatsbyjs/gatsby), and CDN.
 
 - **Isolation**. Our components now work in isolation. You should be able to use a single Material-UI component in an existing codebase without any side effect. No global CSS override needed, no bundle size bloat.
 

docs/pages/blog/material-ui-v4-is-out.md

@@ -27,7 +27,7 @@ Material-UI v4 has finally arrived. We are so excited about this release, as it
 
 Material-UI v1 was [released](https://medium.com/material-ui/material-ui-v1-is-out-e73ce13463eb) one year ago. Version 4 is our most important major release since then. For those unfamiliar with the history of the project, we didn't release a v2, and v3 only introduced a slight browsers support change.
 
-This release happens within our [fixed frequency](/versions/#release-frequency) release strategy. We try to release a major at least every 12 months and at most every 6 months. The migration from v0 to v1 was painful, it almost felt like using two different UI libraries. We've done our best to minimize the time needed to migrate from v3 to v4. To help ease the transition, you can follow this [migration guide](/guides/migration-v3/) 📚. It shouldn't take more than a few hours.
+This release happens within our [fixed frequency](https://material-ui.com/versions/#release-frequency) release strategy. We try to release a major at least every 12 months and at most every 6 months. The migration from v0 to v1 was painful, it almost felt like using two different UI libraries. We've done our best to minimize the time needed to migrate from v3 to v4. To help ease the transition, you can follow this [migration guide](/guides/migration-v3/) 📚. It shouldn't take more than a few hours.
 
 This release is influenced by two major factors. First, following the Developer Survey we ran in March, we have [analyzed the results](/blog/2019-developer-survey-results/) and used them to change [our priorities](/discover-more/roadmap/#our-priorities) for the coming year. Secondly, we needed to be up to date with the latest best practices in the React community and with the Material Design Specification.
 

docs/scripts/buildIcons.js

@@ -2,7 +2,7 @@
 const path = require('path');
 const gm = require('gm');
 
-const SIZES = [48, 70, 96, 150, 152, 192, 256, 310, 384, 512];
+const SIZES = [48, 96, 180, 192, 256, 384, 512];
 const INPUT_ICON = path.join(__dirname, '../static/logo.png');
 const OUTPUT_DIR = path.join(__dirname, '../static/icons');
 

docs/src/modules/components/Ad.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
-import { getCookie } from 'docs/src/modules/utils/helpers';
 import Typography from '@material-ui/core/Typography';
 import Paper from '@material-ui/core/Paper';
 import AdCodeFund from 'docs/src/modules/components/AdCodeFund';
@@ -20,16 +19,12 @@ const styles = theme => ({
   },
   paper: {
     padding: theme.spacing(1.5),
+    border: `2px solid ${theme.palette.primary.main}`,
     backgroundColor: theme.palette.background.level2,
     display: 'block',
   },
 });
 
-function getAdblockCount() {
-  const seen = getCookie('adblockCount');
-  return seen === '' ? 0 : parseInt(seen, 10);
-}
-
 function getAdblock(classes, t) {
   return (
     <Paper component="span" elevation={0} className={classes.paper}>
@@ -70,16 +65,22 @@ const inHouses = [
 function Ad(props) {
   const { classes } = props;
   const { current: random } = React.useRef(Math.random());
-  const timerAdblock = React.useRef();
   const t = useSelector(state => state.options.t);
+
+  const timerAdblock = React.useRef();
   const [adblock, setAdblock] = React.useState(null);
+  const [carbonOut, setCarbonOut] = React.useState(null);
 
   const checkAdblock = React.useCallback((attempt = 1) => {
-    if (
-      document.querySelector('.cf-wrapper') ||
-      document.querySelector('#carbonads') ||
-      document.querySelector('#in-house')
-    ) {
+    if (document.querySelector('.cf-wrapper') || document.querySelector('#carbonads')) {
+      if (
+        document.querySelector('#carbonads a') &&
+        document.querySelector('#carbonads a').getAttribute('href') ===
+          'https://material-ui-next.com/discover-more/backers'
+      ) {
+        setCarbonOut(true);
+      }
+
       setAdblock(false);
       return;
     }
@@ -88,8 +89,6 @@ function Ad(props) {
       timerAdblock.current = setTimeout(() => {
         checkAdblock(attempt + 1);
       }, 500);
-    } else {
-      document.cookie = `adblockCount=${getAdblockCount() + 1};path=/`;
     }
 
     if (attempt > 6) {
@@ -108,38 +107,40 @@ function Ad(props) {
     };
   }, [checkAdblock]);
 
-  // Hide the content to google bot.
-  if (/Googlebot/.test(navigator.userAgent)) {
-    return null;
-  }
+  let children;
+  let minHeight;
 
-  if (disable) {
-    return <span className={classes.root}>{getAdblock(classes, t)}</span>;
+  // Hide the content to google bot.
+  if (/Googlebot/.test(navigator.userAgent) || disable) {
+    children = <span />;
   }
 
-  if (getAdblockCount() >= 2) {
-    return (
-      <span className={classes.root} style={{ minHeight: 'auto' }}>
-        <AdInHouse ad={inHouses[Math.round((inHouses.length - 1) * Math.random())]} />
-      </span>
-    );
-  }
+  if (adblock) {
+    minHeight = 'auto';
 
-  if (adblock === true) {
-    return <span className={classes.root}>{getAdblock(classes, t)}</span>;
+    if (random >= 0.8) {
+      children = getAdblock(classes, t);
+    } else {
+      children = <AdInHouse ad={inHouses[Math.round((inHouses.length - 1) * random)]} />;
+    }
   }
 
-  let randomAd;
-
-  if (random < 0.6) {
-    randomAd = <AdCodeFund />;
-  } else if (random < 0.63) {
-    randomAd = <AdInHouse ad={inHouses[0]} />;
-  } else {
-    randomAd = <AdCarbon />;
+  if (!children) {
+    if (random >= 0.6) {
+      children = <AdCodeFund />;
+    } else if (!carbonOut) {
+      children = <AdCarbon />;
+    } else {
+      children = <AdInHouse ad={inHouses[Math.round((inHouses.length - 1) * random)]} />;
+      minHeight = 'auto';
+    }
   }
 
-  return <span className={classes.root}>{randomAd}</span>;
+  return (
+    <span className={classes.root} style={{ minHeight }}>
+      {children}
+    </span>
+  );
 }
 
 Ad.propTypes = {

docs/src/modules/components/AdInHouse.js

@@ -49,7 +49,7 @@ export default function AdInHouse(props) {
         href={ad.link}
         // eslint-disable-next-line react/jsx-no-target-blank
         target="_blank"
-        rel="nofollow noopener"
+        rel="noopener sponsored"
         data-ga-event-category="in-house-ad"
         data-ga-event-action="click"
         data-ga-event-label={ad.name}

docs/src/modules/components/AppDrawer.js

@@ -19,7 +19,7 @@ function PersistScroll(props) {
   const rootRef = React.useRef();
 
   React.useEffect(() => {
-    const parent = rootRef.current ? rootRef.current.parentNode : null;
+    const parent = rootRef.current ? rootRef.current.parentElement : null;
     const activeElement = document.querySelector('.drawer-active');
 
     if (!parent || !activeElement || !activeElement.scrollIntoView) {
@@ -148,7 +148,12 @@ function AppDrawer(props) {
             Material-UI
           </Link>
           {process.env.LIB_VERSION ? (
-            <Link color="textSecondary" variant="caption" href="/versions" onClick={onClose}>
+            <Link
+              color="textSecondary"
+              variant="caption"
+              href="https://material-ui.com/versions/"
+              onClick={onClose}
+            >
               {`v${process.env.LIB_VERSION}`}
             </Link>
           ) : null}

docs/src/modules/components/GoogleAnalytics.js

@@ -27,7 +27,7 @@ function handleClick(event) {
       break;
     }
 
-    element = element.parentNode;
+    element = element.parentElement;
   }
 }
 

docs/src/modules/components/HomeFooter.js

@@ -132,7 +132,7 @@ function HomeFooter(props) {
             <Interpolate
               replacement={{
                 versionNumber: (
-                  <Link color="inherit" href="/versions/">
+                  <Link color="inherit" href="https://material-ui.com/versions/">
                     {`v${process.env.LIB_VERSION}`}
                   </Link>
                 ),

docs/src/modules/components/HomeQuickWord.js

@@ -28,11 +28,6 @@ const backers = [
     alt: 'callemall',
     title: 'Call-Em-All - The easy way to message your group',
   },
-  {
-    href: 'https://blokt.com',
-    alt: 'blokt',
-    title: 'Leading Cryptocurrency News',
-  },
   {
     href: 'https://www.crosswordsolver.com',
     alt: 'crosswordsolver',