[Card] Fix TypeScript not recognizing "component" prop

.eslintrc.js

@@ -32,6 +32,8 @@ module.exports = {
   rules: {
     'consistent-this': ['error', 'self'],
     'linebreak-style': 'off', // Doesn't play nicely with Windows
+    // just as bad as "max components per file"
+    'max-classes-per-file': 'off',
     'no-alert': 'error',
     // Strict, airbnb is using warn; allow warn and error for dev environments
     'no-console': ['error', { allow: ['warn', 'error'] }],
@@ -44,7 +46,7 @@ module.exports = {
     // we have to be disciplined about the usage and ensure the Number type for its
     // arguments
     'no-restricted-globals': ['error'].concat(confusingBrowserGlobals),
-    'no-underscore-dangle': ['error', { allow: ['_rewriteUrlForNextExport'] }],
+    'no-underscore-dangle': 'error',
     'prefer-arrow-callback': ['error', { allowNamedFunctions: true }],
     'prefer-destructuring': 'off', // Destructuring harm grep potential.
 
@@ -61,6 +63,8 @@ module.exports = {
     // It's buggy
     'react/forbid-prop-types': 'off',
     'react/jsx-curly-brace-presence': 'off',
+    // prefer <React.Fragment> over <>. The former allows `key` while the latter doesn't
+    'react/jsx-fragments': ['error', 'element'],
     'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx
     'react/jsx-handler-names': [
       'error',
@@ -70,13 +74,19 @@ module.exports = {
         eventHandlerPropPrefix: 'on',
       },
     ],
+    // not a good rule for components close to the DOM
+    'react/jsx-props-no-spreading': 'off',
     'react/no-danger': 'error',
     // Strict, airbnb is using off
     'react/no-direct-mutation-state': 'error',
     'react/no-find-dom-node': 'off',
     'react/no-multi-comp': 'off',
     'react/require-default-props': 'off',
     'react/sort-prop-types': 'error',
+    // This depends entirely on what you're doing. There's no universal pattern
+    'react/state-in-constructor': 'off',
+    // stylistic opinion. For conditional assignment we want it outside, otherwise as static
+    'react/static-property-placement': 'off',
 
     'import/no-extraneous-dependencies': 'off', // It would be better to enable this rule.
     'import/namespace': ['error', { allowComputed: true }],
@@ -89,10 +99,7 @@ module.exports = {
     ],
 
     'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': [
-      'error',
-      { additionalHooks: 'useEnhancedEffect' },
-    ],
+    'react-hooks/exhaustive-deps': ['error', { additionalHooks: 'useEnhancedEffect' }],
   },
   overrides: [
     {

CHANGELOG.md

@@ -1,5 +1,121 @@
 ### [Versions](https://material-ui.com/versions/)
 
+## 4.9.6
+###### *Mar 18, 2020*
+
+Big thanks to the 39 contributors who made this release possible.
+
+Here are some highlights ✨:
+
+- ⚛️ Improve the DX in Visual Studio Code (#20079, #19962, #19280) @eps1lon @jedwards1211.
+  - Preview the colors in right in the editor
+    ![](https://user-images.githubusercontent.com/12292047/76473891-2b70ad80-63fa-11ea-8afe-38ceee43eeaa.png)
+    ![](https://user-images.githubusercontent.com/12292047/76473890-2ad81700-63fa-11ea-9bb3-005f79a195e7.png)
+  - Preview the purpose of each theme.spacing arguments right in the editor
+    ![](https://user-images.githubusercontent.com/12292047/75786858-31192400-5d66-11ea-9382-94dd74c42985.png)
+  - Leverage code snippets to save time with [this extension](https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-snippets).
+- 🔍 12 patches on the Autocomplete component.
+- 💄 Polish on the Pagination component (#19933, #19964, #19966, #19987) @pvdstel @eps1lon @mbrookes.
+
+### `@material-ui/core@v4.9.6`
+
+- [Chip] Prevent event default when onDelete is triggered (#20051) @eps1lon
+- [Container] Reset display block (#19971) @oliviertassinari
+- [DatePicker] Fix codesandbox demo (#19926) @netochaves
+- [Drawer] Add a comment for clarity on the styling of height of the toolbar (#19934) @smerriman18
+- [Grid] Fix row-reverse typo (#20048) @jhthompson
+- [Link] Fix color mismatch with Typography component (#19949) Weslen do Nascimento
+- [ListItemText] Fix display block issue (#20039) @psdr03
+- [Select] Simplify the demos (remove ref) (#20076) @captain-yossarian
+- [TablePagination] Out of range warning when "count={-1}" (#19874) @dbarabashdev
+- [TextField] Avoid outline label CSS leak (#19937) @ivoiv
+- [TextField] Fix outlined render gap if label = empty string (#19722) @captain-yossarian
+- [TextField] Minimize usage of z-index (#19547)" (#20016) @piotros
+- [theme] Describe what each argument of theme.spacing affects (#19962) @eps1lon
+- [theme] Array reject on spacing transformation fixed (#19900) Weslen do Nascimento
+- [Tooltip] Fix useMemo dependency (#19899) @NMinhNguyen
+- [Tooltip] Reduce enterDelay to 100ms (#19898) @oliviertassinari
+
+### `@material-ui/styles@v4.9.6`
+
+- [styles] Fix theme default props overriden by Component default (#20091) @adridavid
+- [styles] Name anonymous function type (#19996) @eps1lon
+
+### `@material-ui/system@v4.9.6`
+
+- [theme] Array reject on spacing transformation fixed (#19900) Weslen do Nascimento
+
+### `@material-ui/utils@v4.9.6`
+
+- [core] Fix deepmerge of DOM elements (#20100) @ValentinH
+
+### `@material-ui/lab@v4.0.0-alpha.46`
+
+- [Autocomplete] Add more details in the onChange event (#19959) @akharkhonov
+- [Autocomplete] Add scrollbar support in IE11 (#19969) @SergeyUstinovich
+- [Autocomplete] Better synchronize the highlight with the value (#19923) @captain-yossarian
+- [Autocomplete] Document listbox limitation (#20101) @zatine
+- [Autocomplete] Fix clearOnEscape + multiple combination (#20065) @chaudharykiran
+- [Autocomplete] Fix GitHub's demo behavior (#19928) @hasanozacar
+- [Autocomplete] Fix typo in prop description  (#20086) @vince1995
+- [Autocomplete] Improvement popup open logic (#19901) @haseebdaone
+- [Autocomplete] Make categories more obvious (#20142) @embeddedt
+- [Autocomplete] Simplify error for wrong getOptionLabel (#20103) @oliviertassinari
+- [Autocomplete] Update onChange API @oliviertassinari
+- [Autocomplete] Use getOptionLabel over stringify (#19974) @a-type
+- [AvatarGroup] Add max avatar prop (#19853) @GFynbo
+- [Pagination] Add TypeScript types (#19933) @pvdstel
+- [Pagination] Fix prop forwarding of `onChange` and `page` (#19964) @eps1lon
+- [Pagination] Leverage `@default` over default values (#19966) @eps1lon
+- [Pagination] Remove children prop (#19987) @mbrookes
+- [Rating] Fix text alignment inheritance (#20055) @mlizchap
+- [Skeleton] Fix SkeletonClassKey type (#20047) @100terres
+- [Skeleton] Improve wave dark mode support (#20112) @oliviertassinari
+
+### Docs
+
+- [docs] Add radio error demo (#19599) @mbrookes
+- [docs] Bump next to latest (#19995) @eps1lon
+- [docs] Display color preview in IntelliSense (#20079) @eps1lon
+- [docs] Document typescript:transpile script (#19951) @eps1lon
+- [docs] Fix @material-ui/styles release version number (#19939) @jkjustjoshing
+- [docs] Fix OutlinedLabel typo (#20006) @ljcooke
+- [docs] Fix SEO issues (#20108) @oliviertassinari
+- [docs] Fix Sketch link (#19944) @mbrookes
+- [docs] Fix grammar in autocomplete doc (#20066) @dandv
+- [docs] Fix incorrect type for fontWeight @eps1lon
+- [docs] Fix missing OutlinedLabel#label link in Select API docs (#19993) @eps1lon
+- [docs] Flexbox, add element for show the good effect (#19956) @tbredillet
+- [docs] Flexbox: update item number (#19954) @tbredillet
+- [docs] Improve font size scaling of some demos (#19950) @eps1lon
+- [docs] Remove premium support offerings (#19972) @mbrookes
+- [docs] Simplify checkbox examples (#20052) @tacigar
+- [docs] Simplify some demos (#19608) @mbrookes
+- [docs] Track bundle size of pages (#19978) @eps1lon
+- [docs] Upgrade to next 9 (#18441) @eps1lon
+- [docs] Simplify drawer examples (#20040) @TommyJackson85
+- [examples] Fix typo in gatsby readme (#19998) @eps1lon
+
+### Core
+
+- [test] Match against messages not args on console methods (#20046) @eps1lon
+- [test] Resize screenshots with sharp (#19979) @oliviertassinari
+- [test] Run snapshot tests on the a11y tree (#20019) @eps1lon
+- [ci] Fix azure not running (#20127) @eps1lon
+- [ci] Fix incorre pr number for experimental scripts (#20021) @eps1lon
+- [ci] Let failed types-next jobs pass (#20007) @eps1lon
+- [ci] Let failed types-next jobs pass (#20017) @eps1lon
+- [core] Add missing properties to TypeAction (#20075) @timonweber
+- [core] Add spacing after prettier command (#20073) @dandv
+- [core] Batch small changes (#20111) @oliviertassinari
+- [core] Fix typos in code comments (#19999) @eps1lon
+- [core] Improve the DX when iterating on components (#20128) @oliviertassinari
+- [core] Use Babel 7 version of transform-react-constant-elements (#20015) @merceyz
+- [security] Bump acorn from 5.7.3 to 5.7.4 (#20105) @dependabot-preview
+- [core] Batch small changes (#19896) @oliviertassinari
+- [core] Update type defs to use OverridableComponent (#20110) @theGirrafish
+- [core] Fix docs:api cleaning the wrong directory #20164 @ro7584
+
 ## 4.9.5
 ###### *Feb 29, 2020*
 
@@ -3322,7 +3438,7 @@ Here are some highlights ✨:
   We have removed the `labelContainer`, `label` and `labelWrapped` class keys.
   We have removed 2 intermediary DOM elements.
   You should be able to move the custom styles to the root class key.
-  ![capture d ecran 2019-02-23 a 15 46 48](https://user-images.githubusercontent.com/3165635/53287870-53a35500-3782-11e9-9431-2d1a14a41be0.png)
+  ![](https://user-images.githubusercontent.com/3165635/53287870-53a35500-3782-11e9-9431-2d1a14a41be0.png)
 
 - [Table] Add dense support (#14561) @leMaik
 

azure-pipelines.yml

@@ -6,9 +6,18 @@ trigger:
       - l10n
       - dependabot/*
 
+# https://developercommunity.visualstudio.com/comments/949241/view.html
+pr:
+  branches:
+    include:
+      - '*'
+
 pool:
   vmImage: 'ubuntu-latest'
 
+variables:
+  DOCS_NEXT_CACHE_FOLDER: $(Build.SourcesDirectory)/docs/.next/cache
+
 steps:
   - task: NodeTool@0
     inputs:
@@ -48,6 +57,15 @@ steps:
       artifactName: 'canaries'
       targetPath: 'material-ui-core.tgz'
 
+  - task: Cache@2
+    inputs:
+      key: 'yarn | "$(Agent.OS)" | yarn.lock'
+      restoreKeys: |
+        yarn | "$(Agent.OS)"
+        yarn
+      path: $(DOCS_NEXT_CACHE_FOLDER)
+    displayName: Cache nextjs build
+
   - script: |
       set -o pipefail
       mkdir -p scripts/sizeSnapshot/build	

docs/next.config.js

@@ -13,6 +13,11 @@ const workspaceRoot = path.join(__dirname, '../');
 const reactMode = 'legacy';
 
 module.exports = {
+  typescript: {
+    // Motivated by https://github.com/zeit/next.js/issues/7687
+    ignoreDevErrors: true,
+    ignoreBuildErrors: true,
+  },
   webpack: (config, options) => {
     const plugins = config.plugins.concat([
       new webpack.DefinePlugin({
@@ -72,12 +77,14 @@ module.exports = {
       ];
     }
 
-    return Object.assign({}, config, {
+    return {
+      ...config,
       plugins,
       node: {
         fs: 'empty',
       },
-      module: Object.assign({}, config.module, {
+      module: {
+        ...config.module,
         rules: config.module.rules.concat([
           {
             test: /\.(css|md)$/,
@@ -122,8 +129,8 @@ module.exports = {
             use: options.defaultLoaders.babel,
           },
         ]),
-      }),
-    });
+      },
+    };
   },
   exportTrailingSlash: true,
   // Next.js provides a `defaultPathMap` argument, we could simplify the logic.

docs/package.json

@@ -5,7 +5,8 @@
   "author": "Material-UI Team",
   "license": "MIT",
   "scripts": {
-    "build": "rimraf .next && cross-env NODE_ENV=production next build",
+    "build": "cross-env NODE_ENV=production next build",
+    "build:clean": "rimraf .next && yarn build",
     "build-sw": "node ./scripts/buildServiceWorker.js",
     "dev": "rimraf ./node_modules/.cache/babel-loader && next dev",
     "deploy": "git push material-ui-docs master:latest",
@@ -64,7 +65,7 @@
     "cross-fetch": "^3.0.4",
     "css-loader": "^3.1.0",
     "css-mediaquery": "^0.1.2",
-    "date-fns": "2.10.0",
+    "date-fns": "2.11.0",
     "docsearch.js": "^2.6.3",
     "doctrine": "^3.0.0",
     "express": "^4.17.1",

docs/pages/_app.js

@@ -11,7 +11,8 @@ import PropTypes from 'prop-types';
 import acceptLanguage from 'accept-language';
 import { create } from 'jss';
 import rtl from 'jss-rtl';
-import { Router as Router2, useRouter } from 'next/router';
+import { useRouter } from 'next/router';
+import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
 import { StylesProvider, jssPreset } from '@material-ui/styles';
 import pages from 'docs/src/pages';
 import initRedux from 'docs/src/modules/redux/initRedux';
@@ -58,7 +59,7 @@ function LanguageNegotiation() {
 
   React.useEffect(() => {
     const { userLanguage: userLanguageUrl, canonical } = pathnameToLanguage(
-      Router2._rewriteUrlForNextExport(router.asPath),
+      rewriteUrlForNextExport(router.asPath),
     );
     const preferedLanguage =
       getCookie('userLanguage') !== 'noDefault' && userLanguage === 'en'
@@ -289,7 +290,7 @@ function AppWrapper(props) {
   if (pathname !== '/') {
     // The leading / is only added to support static hosting (resolve /index.html).
     // We remove it to normalize the pathname.
-    // See `_rewriteUrlForNextExport` on Next.js side.
+    // See `rewriteUrlForNextExport` on Next.js side.
     pathname = pathname.replace(/\/$/, '');
   }
   const activePage = findActivePage(pages, pathname);

docs/pages/_document.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ServerStyleSheets } from '@material-ui/styles';
 import Document, { Head, Main, NextScript } from 'next/document';
-import { Router as Router2 } from 'next/router';
+import { rewriteUrlForNextExport } from 'next/dist/next-server/lib/router/rewrite-url-for-export';
 import { LANGUAGES_SSR } from 'docs/src/modules/constants';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import { themeColor } from 'docs/src/modules/components/ThemeContext';
@@ -48,20 +48,20 @@ export default class MyDocument extends Document {
           {/* SEO */}
           <link
             rel="canonical"
-            href={`https://material-ui.com${Router2._rewriteUrlForNextExport(
+            href={`https://material-ui.com${rewriteUrlForNextExport(
               `${userLanguage === 'en' ? '' : `/${userLanguage}`}${canonical}`,
             )}`}
           />
           <link
             rel="alternate"
-            href={`https://material-ui.com${Router2._rewriteUrlForNextExport(canonical)}`}
+            href={`https://material-ui.com${rewriteUrlForNextExport(canonical)}`}
             hrefLang="x-default"
           />
           {LANGUAGES_SSR.map(userLanguage2 => (
             <link
               key={userLanguage2}
               rel="alternate"
-              href={`https://material-ui.com${Router2._rewriteUrlForNextExport(
+              href={`https://material-ui.com${rewriteUrlForNextExport(
                 `${userLanguage2 === 'en' ? '' : `/${userLanguage2}`}${canonical}`,
               )}`}
               hrefLang={userLanguage2}

docs/pages/api-docs/alert-title.md

@@ -48,3 +48,7 @@ You can override the style of the component thanks to one of these customization
 
 If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/AlertTitle/AlertTitle.js) for more detail.
 
+## Demos
+
+- [Alert](/components/alert/)
+

docs/pages/api-docs/autocomplete.md

@@ -34,7 +34,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">clearText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Clear'</span> | Override the default text for the *clear* icon button.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
 | <span class="prop-name">closeIcon</span> | <span class="prop-type">node</span> | <span class="prop-default">&lt;CloseIcon fontSize="small" /></span> | The icon to display in place of the default close icon. |
 | <span class="prop-name">closeText</span> | <span class="prop-type">string</span> | <span class="prop-default">'Close'</span> | Override the default text for the *close popup* icon button.<br>For localization purposes, you can use the provided [translations](/guides/localization/). |
-| <span class="prop-name">debug</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the popup will ignore the blur event if the input if filled. You can inspect the popup markup with your browser tools. Consider this option when you need to customize the component. |
+| <span class="prop-name">debug</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the popup will ignore the blur event if the input is filled. You can inspect the popup markup with your browser tools. Consider this option when you need to customize the component. |
 | <span class="prop-name">defaultValue</span> | <span class="prop-type">any<br>&#124;&nbsp;array</span> | <span class="prop-default">props.multiple ? [] : null</span> | The default input value. Use when the component is not controlled. |
 | <span class="prop-name">disableClearable</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the input can't be cleared. |
 | <span class="prop-name">disableCloseOnSelect</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the popup won't close when a value is selected. |
@@ -59,7 +59,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <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: T, reason: string) => void`<br>*event:* The event source of the callback.<br>*value:* null<br>*reason:* One of "create-option", "select-option", "remove-option", "blur" or "clear". |
-| <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">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, reason: string) => void`<br>*event:* The event source of the callback.<br>*reason:* Can be: `"toggleInput"`, `"escape"`, `"select-option"`, `"blur"`. |
 | <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. |