[core] Batch small changes

docs/pages/api/autocomplete.md

@@ -59,9 +59,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">loadingText</span> | <span class="prop-type">node</span> | <span class="prop-default">'Loading…'</span> | Text to display when in a loading state.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name">multiple</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, `value` must be an array and the menu will support multiple selections. |
 | <span class="prop-name">noOptionsText</span> | <span class="prop-type">node</span> | <span class="prop-default">'No options'</span> | Text to display when there are no options.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback<br>*value:* null |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func</span> |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback.<br>*value:* null |
 | <span class="prop-name">onClose</span> | <span class="prop-type">func</span> |  | Callback fired when the popup requests to be closed. Use in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
-| <span class="prop-name">onInputChange</span> | <span class="prop-type">func</span> |  | Callback fired when the input value changes.<br><br>**Signature:**<br>`function(event: object, value: string, reason: string) => void`<br>*event:* The event source of the callback.<br>*value:* The new value of the text input<br>*reason:* Can be: "input" (user input), "reset" (programmatic change), `"clear"`. |
+| <span class="prop-name">onInputChange</span> | <span class="prop-type">func</span> |  | Callback fired when the input value changes.<br><br>**Signature:**<br>`function(event: object, value: string, reason: string) => void`<br>*event:* The event source of the callback.<br>*value:* The new value of the text input.<br>*reason:* Can be: "input" (user input), "reset" (programmatic change), `"clear"`. |
 | <span class="prop-name">onOpen</span> | <span class="prop-type">func</span> |  | Callback fired when the popup requests to be opened. Use in controlled mode (see open).<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback. |
 | <span class="prop-name">open</span> | <span class="prop-type">bool</span> |  | Control the popup` open state. |
 | <span class="prop-name">openText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Open'</span> | Override the default text for the *open popup* icon button.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |

docs/pages/api/snackbar.md

@@ -26,7 +26,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">action</span> | <span class="prop-type">node</span> |  | The action to display. |
 | <span class="prop-name">anchorOrigin</span> | <span class="prop-type">{ horizontal: 'left'<br>&#124;&nbsp;'center'<br>&#124;&nbsp;'right', vertical: 'top'<br>&#124;&nbsp;'bottom' }</span> | <span class="prop-default">{ vertical: 'bottom', horizontal: 'center' }</span> | The anchor of the `Snackbar`. |
-| <span class="prop-name">autoHideDuration</span> | <span class="prop-type">number</span> |  | The number of milliseconds to wait before automatically calling the `onClose` function. `onClose` should then set the state of the `open` prop to hide the Snackbar. This behavior is disabled by default with the `null` value. |
+| <span class="prop-name">autoHideDuration</span> | <span class="prop-type">number</span> | <span class="prop-default">null</span> | The number of milliseconds to wait before automatically calling the `onClose` function. `onClose` should then set the state of the `open` prop to hide the Snackbar. This behavior is disabled by default with the `null` value. |
 | <span class="prop-name">children</span> | <span class="prop-type">element</span> |  | Replace the `SnackbarContent` component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">ClickAwayListenerProps</span> | <span class="prop-type">object</span> |  | Props applied to the `ClickAwayListener` element. |

docs/src/modules/components/Ad.js

@@ -25,9 +25,11 @@ const styles = theme => ({
   },
 });
 
-function getAdblock(classes, t) {
+function Adblock(props) {
+  const t = useSelector(state => state.options.t);
+
   return (
-    <Paper component="span" elevation={0} className={classes.paper}>
+    <Paper component="span" elevation={0} {...props}>
       <Typography variant="body2" display="block" component="span" gutterBottom>
         {t('likeMui')}
       </Typography>
@@ -86,9 +88,9 @@ const inHouseAds = [
 
 function Ad(props) {
   const { classes } = props;
-  const t = useSelector(state => state.options.t);
 
   const timerAdblock = React.useRef();
+  const { current: randomSplit } = React.useRef(Math.random());
   const [adblock, setAdblock] = React.useState(null);
   const [carbonOut, setCarbonOut] = React.useState(null);
   const [codeFundOut, setCodeFundOut] = React.useState(null);
@@ -157,11 +159,11 @@ function Ad(props) {
     children = <span />;
   }
 
-  if (adblock) {
+  if (!children && adblock) {
     minHeight = 'auto';
 
     if (Math.random() < 0.2) {
-      children = getAdblock(classes, t);
+      children = <Adblock className={classes.paper} />;
     } else {
       children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * Math.random())]} />;
     }
@@ -171,7 +173,7 @@ function Ad(props) {
     if (carbonOut || codeFundOut) {
       children = <AdInHouse ad={inHouseAds[Math.floor(inHouseAds.length * Math.random())]} />;
       minHeight = 'auto';
-    } else if (Math.random() < 0.35) {
+    } else if (randomSplit < 0.35) {
       children = <AdCodeFund />;
     } else {
       children = <AdCarbon />;
@@ -180,8 +182,8 @@ function Ad(props) {
 
   React.useEffect(() => {
     // Avoid a flood of events.
-    if (Math.random < 0.1) {
-      return null;
+    if (Math.random() < 0.9) {
+      return undefined;
     }
 
     const delay = setTimeout(() => {
@@ -192,9 +194,17 @@ function Ad(props) {
       } else if (children.type === AdCarbon) {
         type = 'carbon';
       } else if (children.type === AdInHouse) {
-        type = 'in-house';
+        if (!adblock && codeFundOut) {
+          type = 'in-house-codefund';
+        } else if (!adblock && carbonOut) {
+          type = 'in-house-carbon';
+        } else {
+          type = 'in-house';
+        }
+      } else if (children.type === Adblock) {
+        type = 'in-house-adblock';
       } else {
-        type = 'disable-adblock';
+        return;
       }
 
       window.ga('send', {
@@ -212,12 +222,12 @@ function Ad(props) {
           eventLabel: children.props.ad.name,
         });
       }
-    }, 2000);
+    }, 2500);
 
     return () => {
       clearTimeout(delay);
     };
-  }, [children.type, children.props.ad]);
+  }, [children.type, children.props.ad, codeFundOut, carbonOut, adblock]);
 
   return (
     <span className={classes.root} style={{ minHeight }}>
@@ -230,4 +240,4 @@ Ad.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(Ad);
+export default React.memo(withStyles(styles)(Ad));

docs/src/modules/components/AppTableOfContents.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
-import marked from 'marked';
+import marked from 'marked/lib/marked';
 import throttle from 'lodash/throttle';
 import clsx from 'clsx';
 import Box from '@material-ui/core/Box';

docs/src/modules/components/MarkdownDocs.js

@@ -90,6 +90,17 @@ function flattenPages(pages, current = []) {
   }, current);
 }
 
+// To replace with .findIndex() once we stop IE 11 support.
+function findIndex(array, comp) {
+  for (let i = 0; i < array.length; i += 1) {
+    if (comp(array[i])) {
+      return i;
+    }
+  }
+
+  return -1;
+}
+
 function MarkdownDocs(props) {
   const {
     blog,
@@ -145,7 +156,7 @@ function MarkdownDocs(props) {
 
   const { activePage, pages } = React.useContext(PageContext);
   const pageList = flattenPages(pages);
-  const currentPageNum = pageList.findIndex(page => page.pathname === activePage.pathname);
+  const currentPageNum = findIndex(pageList, page => page.pathname === activePage.pathname);
   const currentPage = pageList[currentPageNum];
   const prevPage = pageList[currentPageNum - 1];
   const nextPage = pageList[currentPageNum + 1];

docs/src/modules/components/MarkdownElement.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { useSelector } from 'react-redux';
-import marked from 'marked';
+import marked from 'marked/lib/marked';
 import { withStyles } from '@material-ui/core/styles';
 import textToHash from 'docs/src/modules/utils/textToHash';
 import prism from 'docs/src/modules/components/prism';

docs/src/modules/components/bootstrap.js

@@ -1,7 +1,3 @@
-// Use the same helper as Babel to avoid bundle bloat.
-import 'core-js/modules/es6.array.find-index';
-import 'core-js/modules/es6.set';
-
 // Disable auto highlighting
 // https://github.com/PrismJS/prism/issues/765
 if (process.browser) {

docs/src/pages/components/app-bar/app-bar.md

@@ -43,7 +43,7 @@ A prominent app bar.
 
 ## Bottom App Bar
 
-{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 500}}
+{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}}
 
 ## Fixed placement
 
@@ -93,19 +93,19 @@ You can use the `useScrollTrigger()` hook to respond to user scroll actions.
 
 The app bar hides on scroll down to leave more space for reading.
 
-{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true, "maxWidth": 500}}
+{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}}
 
 ### Elevate App Bar
 
 The app bar elevates on scroll to communicate that the user is not at the top of the page.
 
-{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true, "maxWidth": 500}}
+{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}}
 
 ### Back to top
 
 A floating action buttons appears on scroll to make it easy to get back to the top of the page.
 
-{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true, "maxWidth": 500}}
+{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}}
 
 ### `useScrollTrigger([options]) => trigger`
 

docs/src/pages/components/snackbars/ConsecutiveSnackbars.js

@@ -64,10 +64,7 @@ export default function ConsecutiveSnackbars() {
         autoHideDuration={6000}
         onClose={handleClose}
         onExited={handleExited}
-        ContentProps={{
-          'aria-describedby': 'message-id',
-        }}
-        message={<span id="message-id">{messageInfo ? messageInfo.message : undefined}</span>}
+        message={messageInfo ? messageInfo.message : undefined}
         action={[
           <Button key="undo" color="secondary" size="small" onClick={handleClose}>
             UNDO

docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx

@@ -76,10 +76,7 @@ export default function ConsecutiveSnackbars() {
         autoHideDuration={6000}
         onClose={handleClose}
         onExited={handleExited}
-        ContentProps={{
-          'aria-describedby': 'message-id',
-        }}
-        message={<span id="message-id">{messageInfo ? messageInfo.message : undefined}</span>}
+        message={messageInfo ? messageInfo.message : undefined}
         action={[
           <Button key="undo" color="secondary" size="small" onClick={handleClose}>
             UNDO

docs/src/pages/components/snackbars/DirectionSnackbar.js

@@ -42,10 +42,7 @@ export default function DirectionSnackbar() {
         open={open}
         onClose={handleClose}
         TransitionComponent={transition}
-        ContentProps={{
-          'aria-describedby': 'message-id',
-        }}
-        message={<span id="message-id">I love snacks</span>}
+        message="I love snacks"
       />
     </div>
   );

docs/src/pages/components/snackbars/DirectionSnackbar.tsx

@@ -45,10 +45,7 @@ export default function DirectionSnackbar() {
         open={open}
         onClose={handleClose}
         TransitionComponent={transition}
-        ContentProps={{
-          'aria-describedby': 'message-id',
-        }}
-        message={<span id="message-id">I love snacks</span>}
+        message="I love snacks"
       />
     </div>
   );

docs/src/pages/components/snackbars/FabIntegrationSnackbar.js

@@ -59,11 +59,8 @@ export default function FabIntegrationSnackbar() {
         </Fab>
         <Snackbar
           open
-          autoHideDuration={4000}
-          ContentProps={{
-            'aria-describedby': 'snackbar-fab-message-id',
-          }}
-          message={<span id="snackbar-fab-message-id">Archived</span>}
+          autoHideDuration={6000}
+          message="Archived"
           action={
             <Button color="inherit" size="small">
               Undo

docs/src/pages/components/snackbars/FabIntegrationSnackbar.tsx

@@ -61,11 +61,8 @@ export default function FabIntegrationSnackbar() {
         </Fab>
         <Snackbar
           open
-          autoHideDuration={4000}
-          ContentProps={{
-            'aria-describedby': 'snackbar-fab-message-id',
-          }}
-          message={<span id="snackbar-fab-message-id">Archived</span>}
+          autoHideDuration={6000}
+          message="Archived"
           action={
             <Button color="inherit" size="small">
               Undo

docs/src/pages/components/snackbars/PositionedSnackbar.js

@@ -36,10 +36,7 @@ export default function PositionedSnackbar() {
         key={`${vertical},${horizontal}`}
         open={open}
         onClose={handleClose}
-        ContentProps={{
-          'aria-describedby': 'message-id',
-        }}
-        message={<span id="message-id">I love snacks</span>}
+        message="I love snacks"
       />
     </div>
   );

docs/src/pages/components/snackbars/PositionedSnackbar.tsx

@@ -39,10 +39,7 @@ export default function PositionedSnackbar() {
         key={`${vertical},${horizontal}`}
         open={open}
         onClose={handleClose}
-        ContentProps={{
-          'aria-describedby': 'message-id',
-        }}
-        message={<span id="message-id">I love snacks</span>}
+        message="I love snacks"
       />
     </div>
   );

docs/src/pages/components/snackbars/SimpleSnackbar.js

@@ -38,10 +38,7 @@ export default function SimpleSnackbar() {
         open={open}
         autoHideDuration={6000}
         onClose={handleClose}
-        ContentProps={{
-          'aria-describedby': 'message-id',
-        }}
-        message={<span id="message-id">Note archived</span>}
+        message="Note archived"
         action={[
           <Button key="undo" color="secondary" size="small" onClick={handleClose}>
             UNDO

docs/src/pages/components/snackbars/SimpleSnackbar.tsx

@@ -40,10 +40,7 @@ export default function SimpleSnackbar() {
         open={open}
         autoHideDuration={6000}
         onClose={handleClose}
-        ContentProps={{
-          'aria-describedby': 'message-id',
-        }}
-        message={<span id="message-id">Note archived</span>}
+        message="Note archived"
         action={[
           <Button key="undo" color="secondary" size="small" onClick={handleClose}>
             UNDO

docs/src/pages/components/snackbars/TransitionsSnackbar.js

@@ -42,10 +42,7 @@ export default function TransitionsSnackbar() {
         open={state.open}
         onClose={handleClose}
         TransitionComponent={state.Transition}
-        ContentProps={{
-          'aria-describedby': 'message-id',
-        }}
-        message={<span id="message-id">I love snacks</span>}
+        message="I love snacks"
       />
     </div>
   );

docs/src/pages/components/snackbars/TransitionsSnackbar.tsx

@@ -43,10 +43,7 @@ export default function TransitionsSnackbar() {
         open={state.open}
         onClose={handleClose}
         TransitionComponent={state.Transition}
-        ContentProps={{
-          'aria-describedby': 'message-id',
-        }}
-        message={<span id="message-id">I love snacks</span>}
+        message="I love snacks"
       />
     </div>
   );

docs/src/pages/components/snackbars/snackbars.md

@@ -53,7 +53,7 @@ When multiple snackbar updates are necessary, they should appear one at a time.
 
 Snackbars should appear above FABs (on mobile).
 
-{{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 500}}
+{{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 400}}
 
 ### Change Transition
 
@@ -86,27 +86,20 @@ It also enables you to **stack** them on top of one another (although this is di
 
 (WAI-ARIA: https://www.w3.org/TR/wai-aria-1.1/#alert)
 
-- Since alerts are not required to receive focus, content authors should not require users to close a Snackbar if the role is set to `alert` through the SnackbarContent `role` prop. This is the default role.
-- If a Snackbar requires focus to close it, then content authors should use the `role` of `alertdialog`.
+- By default, the toast won't auto-hide. However, if you decide to use the `autoHideDuration` prop, it's recommended giving users [enough time](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html).
+- Since alerts are not required to receive focus, content authors should not require users to close a Snackbar if the role is set to `role="alert"` through the SnackbarContent. This is the default role.
+- If a Snackbar requires focus to close it, then content authors should use `role= "alertdialog"`.
 
 ```jsx
-<SnackbarContent
-  message="This is a Snackbar message."
-  role="alert"
-/>
+<SnackbarContent role="alert" message="This is a Snackbar message." />
 ```
 
 ```jsx
 <Snackbar
   ContentProps={{
-    'aria-describedby': 'snackbar-fab-message-id',
     'role': 'alertdialog',
   }}
-  message={<span id="snackbar-fab-message-id">Archived</span>}
-  action={
-    <Button color="inherit" size="small">
-      Undo
-    </Button>
-  }
+  message="Archived"
+  action={<Button color="inherit" size="small">Undo</Button>}
 />
 ```