diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md index a5e80992a6812a..d244b1094203d4 100644 --- a/docs/pages/api/autocomplete.md +++ b/docs/pages/api/autocomplete.md @@ -59,9 +59,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | loadingText | node | 'Loading…' | Text to display when in a loading state.
For localization purposes, you can use the provided [translations](/guides/localization/). | | multiple | bool | false | If `true`, `value` must be an array and the menu will support multiple selections. | | noOptionsText | node | 'No options' | Text to display when there are no options.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| onChange | func | | Callback fired when the value changes.

**Signature:**
`function(event: object, value: any) => void`
*event:* The event source of the callback
*value:* null | +| onChange | func | | Callback fired when the value changes.

**Signature:**
`function(event: object, value: any) => void`
*event:* The event source of the callback.
*value:* null | | onClose | func | | Callback fired when the popup requests to be closed. Use in controlled mode (see open).

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | -| onInputChange | func | | Callback fired when the input value changes.

**Signature:**
`function(event: object, value: string, reason: string) => void`
*event:* The event source of the callback.
*value:* The new value of the text input
*reason:* Can be: "input" (user input), "reset" (programmatic change), `"clear"`. | +| onInputChange | func | | Callback fired when the input value changes.

**Signature:**
`function(event: object, value: string, reason: string) => void`
*event:* The event source of the callback.
*value:* The new value of the text input.
*reason:* Can be: "input" (user input), "reset" (programmatic change), `"clear"`. | | onOpen | func | | Callback fired when the popup requests to be opened. Use in controlled mode (see open).

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | | open | bool | | Control the popup` open state. | | openText | string | 'Open' | Override the default text for the *open popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js index 1ae7a9d1237403..35ff6f637d4be2 100644 --- a/docs/src/modules/components/Ad.js +++ b/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 ( - + {t('likeMui')} @@ -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 = ; } - if (adblock) { + if (!children && adblock) { minHeight = 'auto'; if (Math.random() < 0.2) { - children = getAdblock(classes, t); + children = ; } else { children = ; } @@ -171,7 +173,7 @@ function Ad(props) { if (carbonOut || codeFundOut) { children = ; minHeight = 'auto'; - } else if (Math.random() < 0.35) { + } else if (randomSplit < 0.35) { children = ; } else { children = ; @@ -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 ( @@ -230,4 +240,4 @@ Ad.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styles)(Ad); +export default React.memo(withStyles(styles)(Ad)); diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js index dcdb4affcef377..fe2b1b88142cf7 100644 --- a/docs/src/modules/components/AppTableOfContents.js +++ b/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'; diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js index e9bfe485480100..128135f6794032 100644 --- a/docs/src/modules/components/MarkdownDocs.js +++ b/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]; diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 1060b55a3a914b..91a4a90983c91f 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/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'; diff --git a/docs/src/modules/components/bootstrap.js b/docs/src/modules/components/bootstrap.js index 388d2055e07a45..c38ff34eba52e2 100644 --- a/docs/src/modules/components/bootstrap.js +++ b/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) { diff --git a/docs/src/pages/components/app-bar/app-bar.md b/docs/src/pages/components/app-bar/app-bar.md index f1974133828bb7..048f6b9221e339 100644 --- a/docs/src/pages/components/app-bar/app-bar.md +++ b/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` diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index 791ac759c9e54b..0e8021b84ad31b 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -636,7 +636,7 @@ Autocomplete.propTypes = { /** * Callback fired when the value changes. * - * @param {object} event The event source of the callback + * @param {object} event The event source of the callback. * @param {any} value */ onChange: PropTypes.func, @@ -651,7 +651,7 @@ Autocomplete.propTypes = { * Callback fired when the input value changes. * * @param {object} event The event source of the callback. - * @param {string} value The new value of the text input + * @param {string} value The new value of the text input. * @param {string} reason Can be: "input" (user input), "reset" (programmatic change), `"clear"`. */ onInputChange: PropTypes.func, diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts index 4d0e062c9011b0..1a706f55746125 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts @@ -132,7 +132,7 @@ export interface UseAutocompleteProps { /** * Callback fired when the value changes. * - * @param {object} event The event source of the callback + * @param {object} event The event source of the callback. * @param {any} value */ onChange?: (event: React.ChangeEvent<{}>, value: any) => void; @@ -147,7 +147,7 @@ export interface UseAutocompleteProps { * Callback fired when the input value changes. * * @param {object} event The event source of the callback. - * @param {string} value The new value of the text input + * @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; diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index 1b0cd74fc523c9..e17e10b8a95426 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -61,6 +61,17 @@ export function createFilterOptions(config = {}) { }; } +// 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; +} + const defaultFilterOptions = createFilterOptions(); // Number of options to jump in list box when pageup and pagedown keys are used. @@ -424,13 +435,7 @@ export default function useAutocomplete(props) { const item = newValue; newValue = Array.isArray(value) ? [...value] : []; - let itemIndex = -1; - // To replace with .findIndex() once we stop IE 11 support. - for (let i = 0; i < newValue.length; i += 1) { - if (getOptionSelected(item, newValue[i])) { - itemIndex = i; - } - } + const itemIndex = findIndex(newValue, valueItem => getOptionSelected(item, valueItem)); if (itemIndex === -1) { newValue.push(item); diff --git a/packages/material-ui-utils/src/elementAcceptingRef.test.js b/packages/material-ui-utils/src/elementAcceptingRef.test.js index 2fb4053c2016af..d0994ce2f18429 100644 --- a/packages/material-ui-utils/src/elementAcceptingRef.test.js +++ b/packages/material-ui-utils/src/elementAcceptingRef.test.js @@ -20,7 +20,7 @@ describe('elementAcceptingRef', () => { } before(() => { - mount = createMount(); + mount = createMount({ strict: true }); }); after(() => { diff --git a/packages/material-ui-utils/src/elementTypeAcceptingRef.test.js b/packages/material-ui-utils/src/elementTypeAcceptingRef.test.js index 0b6a7039c40111..da8f7c8328dac6 100644 --- a/packages/material-ui-utils/src/elementTypeAcceptingRef.test.js +++ b/packages/material-ui-utils/src/elementTypeAcceptingRef.test.js @@ -20,7 +20,7 @@ describe('elementTypeAcceptingRef', () => { } before(() => { - mount = createMount(); + mount = createMount({ strict: true }); }); after(() => { diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js index 93be6ce5923d46..c4a31a818b57d3 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.js +++ b/packages/material-ui/src/SvgIcon/SvgIcon.js @@ -79,7 +79,7 @@ const SvgIcon = React.forwardRef(function SvgIcon(props, ref) { focusable="false" viewBox={viewBox} color={htmlColor} - aria-hidden={titleAccess ? 'false' : 'true'} + aria-hidden={titleAccess ? null : 'true'} role={titleAccess ? 'img' : 'presentation'} ref={ref} {...other} diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.test.js b/packages/material-ui/src/SvgIcon/SvgIcon.test.js index 405fa419c56993..9a73a5072ec684 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.test.js +++ b/packages/material-ui/src/SvgIcon/SvgIcon.test.js @@ -59,7 +59,7 @@ describe('', () => { , ); assert.strictEqual(wrapper.find('title').text(), 'Network'); - assert.strictEqual(wrapper.props()['aria-hidden'], 'false'); + assert.strictEqual(wrapper.props()['aria-hidden'], null); }); });