[core] Batch small changes

.github/ISSUE_TEMPLATE/1.bug.md

@@ -55,7 +55,7 @@ Steps:
 
 <!--
   Include as many relevant details about the environment with which you experienced the bug.
-  If you encounter issues with typescript please include version and tsconfig.
+  If you encounter issues with TypeScript please include version and tsconfig.
 -->
 
 | Tech        | Version |

docs/scripts/formattedTSDemos.js

@@ -174,7 +174,7 @@ async function main(argv) {
 yargs
   .command({
     command: '$0',
-    description: 'transpile typescript demos',
+    description: 'transpile TypeScript demos',
     builder: (command) => {
       return command
         .option('watch', {

docs/src/pages/discover-more/related-projects/related-projects.md

@@ -18,6 +18,7 @@ You didn't find the design assets your team is looking for? [Let us know!](mailt
 
 - [Unsplash](https://unsplash.com): 📷 A great resource for finding beautiful, high-resolution, free photos that you can use in your projects.
 - [unDraw](https://undraw.co/): 📐 Like Unsplash but for amazing vector illustrations.
+- [Simple Icons](https://simpleicons.org/): Over 1000 Free SVG icons for popular brands.
 
 ## IDE Tools
 

docs/src/pages/discover-more/roadmap/roadmap.md

@@ -4,20 +4,19 @@
 
 ## Methodology
 
-Material-UI is community driven – issues that resonate most with the community get the most attention.
+Material-UI is community-driven – issues that resonate most with the community get the most attention.
 Please **upvote** (👍) on GitHub the issues you are most interested in.
-Thank you for participating [in the developer survey](https://material-ui.com/blog/2019-developer-survey-results/).
+Thank you for participating [in the developer survey](https://material-ui.com/blog/2020-developer-survey-results/).
 
 ## Priorities
 
 Here are the top priorities:
 
 - 1.0 - **More components**. 🧰 This is challenging to address, as developing a fully-fledged component takes a considerable amount of time.
-  We are going to try the following strategy:
-  - Identify frequently needed components. There are many resources we can leverage for this: the developer survey answers, GitHub issue upvotes, Algolia search volume, Google search volume, documentation usage, npm downloads, etc.
+  We apply the following strategy:
+  - Identify frequently needed components. There are many resources we leverage for this: the developer survey answers, GitHub issue upvotes, Algolia search volume, Google search volume, documentation usage, npm downloads, etc.
   - Prioritize the creation of frequently needed components.
   - Encourage the usage of third-party components if they already exist and are well maintained.
-  - Offer an option to the highly used and well maintained components to move to the official organization: mui-org/x on GitHub, @material-ui/x on npm and x.material-ui.com for the documentation.
 - 0.5 - **Better customization.** 💅 We want to make our component customization intuitive, no matter if you are using global CSS or styled-components:
   - Use styled-components by default: [#6115](https://github.com/mui-org/material-ui/issues/6115).
   - Allow the use of the Box props in all the core components: [#15561](https://github.com/mui-org/material-ui/issues/15561).
@@ -29,12 +28,7 @@ Here are the top priorities:
   - Page documentation rating 🥇🥈🥉. We will integrate a rating module in all our documentation pages. This way, we can collect high-quality data points and prioritize the pages that need the most to be improved.
   - Templates. They get people started really quickly, we need more of them!
   - Beginner tutorials & Video lessons.
-- 0.3 - **TypeScript.** 📏 There are two dimensions to this problem:
-  - The documentation. We want to provide a TypeScript variant of most of our demos.
-    You can help us out in [#14897](https://github.com/mui-org/material-ui/issues/14897), we have already covered +90% of them.
-  - The definitions. We are **continuously** improving them. For instance, we are working on moving the props descriptions to TypeScript, so you can access them directly from your IDE.
-    The codebase is written in JavaScript, we don't plan on migrating it to TypeScript in the near future. Upvote [#15984](https://github.com/mui-org/material-ui/issues/15984) if you want us to rewrite the core in a future version.
-- 0.3 - **Performance.** 🚀 React abstraction has a cost. The more components you render, the slower your page will be. You will notice stark differences when rendering a large table or list.
+- 0.2 - **Performance.** 🚀 React abstraction has a cost. The more components you render, the slower your page will be. You will notice stark differences when rendering a large table or list.
   Performance is all about doing less work. We can leverage the following:
   - Make the core faster.
   - Avoid re-rendering. It's the responsibility of the user to prune the React rendering tree efficiently,
@@ -44,57 +38,65 @@ Here are the top priorities:
 - 0.2 - **Bundle size.** 📦 You can keep track of our progress [following bundlephobia.com report](https://bundlephobia.com/result?p=@material-ui/core).
   It's a continuous effort – v4 was [18% smaller](https://bundlephobia.com/result?p=@material-ui/core@3.9.2) than v3, while adding new features.
   We are eager to find new bundle size reduction opportunities. We hope we can leverage these two in the future:
-  - A JSS to styled-component migration should help. Compare [JSS v10.0.0-alpha.24](https://bundlephobia.com/result?p=react-jss@10.0.0-alpha.24) with [styled-components v5.0.0-beta.8](https://bundlephobia.com/result?p=styled-components@5.0.0-beta.8). We could save ~6 kB gzipped.
-  - Popper.js is working [on a smaller v2](https://bundlephobia.com/result?p=popper.js@2.0.0-next.4) version. We could save ~4 kB gzipped.
+- 0.2 - **TypeScript.** 📏 There are two dimensions to this problem:
+  - The definitions. We are **continuously** improving them. For instance, we are working on moving the props descriptions to TypeScript, so you can access them directly from your IDE.
+    The codebase is written in JavaScript, we don't plan on migrating it to TypeScript in the near future. Upvote [#15984](https://github.com/mui-org/material-ui/issues/15984) if you want us to rewrite the core in a future version.
 - 0.2 - **Accessibility.** ♿️ We have relatively [few accessibility issues](https://darekkay.com/blog/accessible-ui-frameworks/), but we are eager to address them all. We would appreciate the help of accessibility experts.
 - 0.2 - **Material Design Update.** 🎀 We are relatively up-to-date but the material design specification [is evolving](https://material.io/whats-new/), so should we.
 
 ## New components
 
-Here are the components we will work on being supported in the Material-UI ecosystem, no matter if they are from @material-ui/core, a third-party project or a paid source:
+Here are the components we will work on being supported in the Material-UI ecosystem, no matter if they are part of the [community edition](https://github.com/mui-org/material-ui) (MIT license) or [Material-UI X](https://github.com/mui-org/material-ui-x), a paid extension for enterprises:
 
-- 🧪 In the lab, in progress to move into the core
-- 🛠 Work in progress, will likely land in the lab
+- 🧪 Close to becoming stable, already released as unstable
+- 🛠 Work in progress, will be or already released as unstable
 - ⏳ Planning to build
-- ⭐️ We will consider making some of the features paid (non MIT)
+- ⭐️ We will make some of the features available in [Material-UI X](https://github.com/mui-org/material-ui-x) (non-MIT)
 
-| Name                    | Status |
-| ----------------------- | ------ |
-| Rating                  | 🧪     |
-| Skeleton                | 🧪     |
-| Speed Dial              | 🧪     |
-| Toggle Button           | 🧪     |
-| Tree View               | 🧪     |
-| Autocomplete            | 🧪     |
-| Combo Box               | 🧪     |
-| Multiselect             | 🧪     |
-| Alert                   | 🧪     |
-| Pagination              | 🧪     |
-| Date Picker (& range)   | 🛠      |
-| Data Table              | 🛠⭐️   |
-| Carousel                | ⏳     |
-| Dropdown                | ⏳     |
-| Dropzone                | ⏳     |
-| File Upload             | ⏳     |
-| Image                   | ⏳     |
-| Navbar                  | ⏳     |
-| Nested Menu             | ⏳     |
-| Numeric Input           | ⏳     |
-| Scrollspy               | ⏳     |
-| TopLayout               | ⏳     |
-| Big Calendar            | ⏳⭐️  |
-| Charts                  | ⏳⭐️  |
-| Sparkline               | ⏳⭐️  |
-| Color Picker            | ⏳⭐️  |
-| Gantt Chart             | ⏳⭐️  |
-| Gauge                   | ⏳⭐️  |
-| Masonry                 | ⏳⭐️  |
-| Pivot Grid              | ⏳⭐️  |
-| Rich Text Editor        | ⏳⭐️  |
-| Scheduler               | ⏳⭐️  |
-| Splitter                | ⏳⭐️  |
-| Tree View - Checkbox    | ⏳⭐️  |
-| Tree View - Drag & Drop | ⏳⭐️  |
-| TreeSelect              | ⏳⭐️  |
+| Name                       | Status |
+| :------------------------- | ------ |
+| Rating                     | 🧪     |
+| Skeleton                   | 🧪     |
+| Speed Dial                 | 🧪     |
+| Toggle Button              | 🧪     |
+| Autocomplete               | 🧪     |
+| Combo Box                  | 🧪     |
+| Multiselect                | 🧪     |
+| Alert                      | 🧪     |
+| Pagination                 | 🧪     |
+| Timeline                   | 🧪     |
+| Date Picker                | 🛠      |
+| Date Range Picker          | 🛠⭐    |
+| Data Grid                  | 🛠⭐️   |
+| Data Grid - Column pinning | ⏳⭐️  |
+| Data Grid - Nested row     | ⏳⭐️  |
+| Tree View                  | 🛠      |
+| Tree View - Multiselect    | 🛠⭐️   |
+| Tree View - Checkbox       | ⏳⭐️  |
+| Tree View - Drag & Drop    | ⏳⭐️  |
+| Tree View - Virtualization | ⏳⭐️  |
+| Carousel                   | ⏳     |
+| Dropdown                   | ⏳     |
+| Dropzone                   | ⏳     |
+| File Upload                | ⏳     |
+| Image                      | ⏳     |
+| Stack                      | ⏳     |
+| Navbar                     | ⏳     |
+| NProgress                  | ⏳     |
+| Nested Menu                | ⏳     |
+| Numeric Input              | ⏳     |
+| Scrollspy                  | ⏳     |
+| TopLayout                  | ⏳     |
+| Splitter                   | ⏳⭐️  |
+| Masonry                    | ⏳⭐️  |
+| Pivot Grid                 | ⏳⭐️  |
+| Big Calendar               | ⏳⭐️  |
+| Sparkline                  | ⏳⭐️  |
+| Gauge                      | ⏳⭐️  |
+| Charts                     | ⏳⭐️  |
+| TreeSelect                 | ⏳⭐️  |
+| Rich Text Editor           | ⏳⭐️  |
+| Gantt Chart                | ⏳⭐️  |
+| Color Picker               | ⏳⭐️  |
 
 > ⚠️ **Disclaimer**: We operate in a dynamic environment, and things are subject to change. The information provided is intended to outline the general framework direction. It's intended for informational purposes only. We may decide to add/remove new items at any time depending on our capability to deliver while meeting our quality standards. The development, releases and timing of any features or functionality of Material-UI remains at the sole discretion of Material-UI. The roadmap does not represent a commitment, obligation or promise to deliver at any time.

docs/src/pages/guides/composition/ListRouter.tsx

@@ -17,9 +17,9 @@ import {
 import { Omit } from '@material-ui/types';
 
 interface ListItemLinkProps {
-  to: string;
-  primary: string;
   icon?: React.ReactElement;
+  primary: string;
+  to: string;
 }
 
 function ListItemLink(props: ListItemLinkProps) {

framer/Material-UI.framerfx/README.md

@@ -2,6 +2,9 @@
 
 This is the official resource for Material-UI React components in Framer.
 
+[Material-UI](https://material-ui.com/) is a library of React components for faster and easier web development.
+You can build your own design system, or start with Material Design.
+
 ## Supported components
 
 The following components are currently supported:
@@ -55,7 +58,7 @@ If multiple options are supplied, they take the following priority:
 ## Resources
 
 - [Material-UI documentation](https://material-ui.com/)
-- [GitHub repo](https://github.com/mui-org/material-ui/tree/master/framer)
+- [GitHub repository](https://github.com/mui-org/material-ui/tree/master/framer)
 
 ## Releases
 

package.json

@@ -57,10 +57,10 @@
     "@babel/register": "^7.10.1",
     "@rollup/plugin-replace": "^2.3.1",
     "@testing-library/dom": "^7.0.3",
-    "@testing-library/react-hooks": "3.3.0",
     "@testing-library/react": "^10.0.1",
-    "@types/chai-dom": "^0.0.10",
+    "@testing-library/react-hooks": "3.3.0",
     "@types/chai": "^4.2.3",
+    "@types/chai-dom": "^0.0.10",
     "@types/enzyme": "^3.10.3",
     "@types/fs-extra": "^9.0.0",
     "@types/glob": "^7.1.1",
@@ -82,8 +82,8 @@
     "babel-plugin-tester": "^9.0.0",
     "babel-plugin-transform-dev-warning": "^0.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.21",
-    "chai-dom": "^1.8.1",
     "chai": "^4.1.2",
+    "chai-dom": "^1.8.1",
     "chalk": "^4.0.0",
     "compression-webpack-plugin": "^4.0.0",
     "confusing-browser-globals": "^1.0.9",
@@ -92,31 +92,31 @@
     "danger": "^10.0.0",
     "dom-accessibility-api": "^0.4.3",
     "dtslint": "^3.2.0",
-    "enzyme-adapter-react-16": "^1.14.0",
     "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "eslint": "^7.4.0",
     "eslint-config-airbnb-typescript": "^8.0.2",
     "eslint-config-prettier": "^6.11.0",
     "eslint-import-resolver-webpack": "^0.12.2",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-mocha": "^7.0.1",
-    "eslint-plugin-react-hooks": "^4.0.7",
     "eslint-plugin-react": "^7.20.3",
-    "eslint": "^7.4.0",
+    "eslint-plugin-react-hooks": "^4.0.7",
     "expect-puppeteer": "^4.3.0",
     "format-util": "^1.0.5",
     "fs-extra": "^9.0.0",
-    "glob-gitignore": "^1.0.11",
     "glob": "^7.1.2",
+    "glob-gitignore": "^1.0.11",
     "jsdom": "^16.0.0",
+    "karma": "^5.0.1",
     "karma-browserstack-launcher": "~1.4.0",
     "karma-chrome-launcher": "^3.0.0",
-    "karma-mocha-reporter": "^2.2.5",
     "karma-mocha": "^2.0.0",
+    "karma-mocha-reporter": "^2.2.5",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^4.0.2",
-    "karma": "^5.0.1",
     "lerna": "^3.16.4",
     "lodash": "^4.17.15",
     "mocha": "^8.0.1",
@@ -126,18 +126,18 @@
     "pretty-format-v24": "npm:pretty-format@24",
     "prop-types": "^15.7.2",
     "puppeteer": "^5.0.0",
+    "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-test-renderer": "^16.13.0",
-    "react": "^16.13.0",
     "remark": "^12.0.0",
     "rimraf": "^3.0.0",
+    "rollup": "^2.10.8",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-size-snapshot": "^0.12.0",
     "rollup-plugin-terser": "^6.1.0",
-    "rollup": "^2.10.8",
     "sinon": "^9.0.0",
     "size-limit": "^0.21.0",
     "ts-node": "^8.3.0",
@@ -146,8 +146,8 @@
     "unist-util-visit": "^2.0.2",
     "url-loader": "^4.1.0",
     "vrtest-mui": "^0.3.3",
-    "webpack-cli": "^3.3.9",
     "webpack": "^4.41.0",
+    "webpack-cli": "^3.3.9",
     "yargs": "^15.2.0",
     "yarn-deduplicate": "^2.0.0"
   },

packages/material-ui-lab/src/TreeItem/TreeItem.js

@@ -98,8 +98,8 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
     label,
     nodeId,
     onClick,
-    onLabelClick,
     onIconClick,
+    onLabelClick,
     onMouseDown,
     TransitionComponent = Collapse,
     TransitionProps,
@@ -285,7 +285,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
       aria-selected={ariaSelected}
       ref={handleRef}
       id={id}
-      tabIndex="-1"
+      tabIndex={-1}
       {...other}
     >
       {/* Key event is handled by the TreeView */}