diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js index fe0fb90f4c1839..4440bff11eb99b 100644 --- a/docs/src/modules/components/Ad.js +++ b/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: 'Premium Themes
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: + 'Material-UI for enterprise
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 = ; - } else if (!carbonOut) { - children = ; - } else { + if (carbonOut || codeFundOut) { children = ; minHeight = 'auto'; + } else if (random >= 0.5) { + children = ; + } else { + children = ; } } diff --git a/docs/src/modules/components/AdCarbon.js b/docs/src/modules/components/AdCarbon.js index aff7439efd85fb..fa0e85c03fdc5f 100644 --- a/docs/src/modules/components/AdCarbon.js +++ b/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': { diff --git a/docs/src/modules/components/AdCodeFund.js b/docs/src/modules/components/AdCodeFund.js index 8353d31664c545..727b24a33d7774 100644 --- a/docs/src/modules/components/AdCodeFund.js +++ b/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': { diff --git a/docs/src/modules/components/AdInHouse.js b/docs/src/modules/components/AdInHouse.js index 0f93dfd15b2bb1..1679fdf35f9781 100644 --- a/docs/src/modules/components/AdInHouse.js +++ b/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 ( - + + + + + ); +} diff --git a/docs/src/modules/utils/helpers.js b/docs/src/modules/utils/helpers.js index 7bd699356fa68a..3090d9dc245253 100644 --- a/docs/src/modules/utils/helpers.js +++ b/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'; diff --git a/docs/src/modules/utils/helpers.test.js b/docs/src/modules/utils/helpers.test.js index a47030f5d98ad1..1f7fc07f8dd9c5 100644 --- a/docs/src/modules/utils/helpers.test.js +++ b/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', + }); + }); }); diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.js b/docs/src/pages/components/autocomplete/CustomizedHook.js index 5716deb02ca4dd..c3b6e5465e9193 100644 --- a/docs/src/pages/components/autocomplete/CustomizedHook.js +++ b/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, diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.tsx b/docs/src/pages/components/autocomplete/CustomizedHook.tsx index bdb4c943787d98..620f1fb66aa98a 100644 --- a/docs/src/pages/components/autocomplete/CustomizedHook.tsx +++ b/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, diff --git a/docs/src/pages/components/autocomplete/GitHubLabel.js b/docs/src/pages/components/autocomplete/GitHubLabel.js index 2c4c9518ad60ef..ae6f5f6ad17914 100644 --- a/docs/src/pages/components/autocomplete/GitHubLabel.js +++ b/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, diff --git a/docs/src/pages/components/autocomplete/GitHubLabel.tsx b/docs/src/pages/components/autocomplete/GitHubLabel.tsx index d082cc0fe1d18f..c7079b5fe0e684 100644 --- a/docs/src/pages/components/autocomplete/GitHubLabel.tsx +++ b/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, diff --git a/docs/src/pages/components/autocomplete/autocomplete.md b/docs/src/pages/components/autocomplete/autocomplete.md index e618b32b43b88f..956d664d0d00b1 100644 --- a/docs/src/pages/components/autocomplete/autocomplete.md +++ b/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'; diff --git a/docs/static/in-house/tidelift.png b/docs/static/in-house/tidelift.png new file mode 100644 index 00000000000000..933d8eace01298 Binary files /dev/null and b/docs/static/in-house/tidelift.png differ diff --git a/docs/translations/translations.json b/docs/translations/translations.json index d92bc76a07992e..28d9b53a0b05fa 100644 --- a/docs/translations/translations.json +++ b/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", diff --git a/examples/cdn/README.md b/examples/cdn/README.md index 3ed3519ae4cca4..924c812b0f59c8 100644 --- a/examples/cdn/README.md +++ b/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 diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 2877043ebd4eac..ed3487c0af741c 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/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: {