[core] Batch small changes

CHANGELOG.md

@@ -7,7 +7,7 @@ Big thanks to the 27 contributors who made this release possible.
 
 Here are some highlights ✨:
 
-- 💎 A new diamond sponsor: [Sencha](https://www.creative-tim.com/), thank you!
+- 💎 A new diamond sponsor: [Sencha](https://sencha.com/), thank you!
 - ⚛️ More tests migrated from enzyme to testing-library @marcosvega91.
 - And many more 🐛 bug fixes and 📚 improvements.
 

docs/pages/discover-more/backers.js

@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} disableAd />;
 }
 
 Page.getInitialProps = () => {

docs/pages/discover-more/showcase.js

@@ -11,7 +11,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} disableToc />;
 }
 
 Page.getInitialProps = () => {

docs/pages/getting-started/templates.js

@@ -15,7 +15,7 @@ const requireRaw = require.context(
 );
 
 export default function Page({ demos, docs }) {
-  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} disableToc />;
 }
 
 Page.getInitialProps = () => {

docs/src/modules/components/AppTableOfContents.js

@@ -27,7 +27,7 @@ const useStyles = makeStyles((theme) => ({
   },
   contents: {
     marginTop: theme.spacing(2),
-    paddingLeft: theme.spacing(1),
+    paddingLeft: 8,
   },
   ul: {
     padding: 0,
@@ -36,20 +36,16 @@ const useStyles = makeStyles((theme) => ({
   },
   item: {
     fontSize: '.8125rem',
-    lineHeight: 2,
-    // paddingLeft: theme.spacing(1) where `border` is used as the "active" marker
-    paddingLeft: Math.max(0, theme.spacing(1) - 4),
-    borderLeft: `4px solid transparent`,
+    padding: `4px 0 4px 5px`,
+    borderLeft: `3px solid transparent`,
     boxSizing: 'border-box',
     '&:hover': {
-      borderLeft: `4px solid ${
-        theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900]
-      }`,
+      borderLeftColor:
+        theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900],
     },
     '&$active,&:active': {
-      borderLeft: `4px solid ${
-        theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[800]
-      }`,
+      borderLeftColor:
+        theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[800],
     },
   },
   secondaryItem: {

docs/src/modules/components/Demo.js

@@ -638,9 +638,6 @@ const useStyles = makeStyles(
       [theme.breakpoints.up('sm')]: {
         borderRadius: theme.shape.borderRadius,
       },
-      '&:focus': {
-        outline: `2px dashed ${theme.palette.text.primary}`,
-      },
     },
     /* Isolate the demo with an outline. */
     demoBgOutlined: {
@@ -682,7 +679,7 @@ const useStyles = makeStyles(
       '& pre': {
         overflow: 'auto',
         lineHeight: 1.5,
-        margin: '0px !important',
+        margin: '0 !important',
         maxHeight: 1000,
       },
     },

docs/src/modules/constants.js

@@ -15,7 +15,7 @@ const LANGUAGES = ['en', 'zh', 'ru', 'pt', 'es', 'fr', 'de', 'ja', 'aa'];
 const LANGUAGES_SSR = ['en', 'zh', 'ru', 'pt', 'es'];
 
 // Work in progress
-const LANGUAGES_IN_PROGRESS = [...LANGUAGES];
+const LANGUAGES_IN_PROGRESS = LANGUAGES.slice();
 
 // Valid languages to use in production
 const LANGUAGES_LABEL = [

docs/src/pages/components/material-icons/SearchIcons.js

@@ -144,7 +144,7 @@ const useDialogStyles = makeStyles((theme) => ({
     color: theme.palette.primary.dark,
     backgroundSize: '30px 30px',
     backgroundColor: '#fff',
-    backgroundPosition: '0 0, 0 15px, 15px -15px, -15px 0px',
+    backgroundPosition: '0 0, 0 15px, 15px -15px, -15px 0',
     backgroundImage:
       'linear-gradient(45deg, #f4f4f4 25%, transparent 25%), linear-gradient(-45deg, #f4f4f4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f4f4f4 75%), linear-gradient(-45deg, transparent 75%, #f4f4f4 75%)',
   },

docs/src/pages/components/slider/CustomizedSlider.js

@@ -141,9 +141,9 @@ const AirbnbSlider = withStyles({
     border: '1px solid currentColor',
     marginTop: -12,
     marginLeft: -13,
-    boxShadow: '#ebebeb 0px 2px 2px',
+    boxShadow: '#ebebeb 0 2px 2px',
     '&:focus, &:hover, &$active': {
-      boxShadow: '#ccc 0px 2px 3px 1px',
+      boxShadow: '#ccc 0 2px 3px 1px',
     },
     '& .bar': {
       // display: inline-block !important;

docs/src/pages/components/slider/CustomizedSlider.tsx

@@ -142,9 +142,9 @@ const AirbnbSlider = withStyles({
     border: '1px solid currentColor',
     marginTop: -12,
     marginLeft: -13,
-    boxShadow: '#ebebeb 0px 2px 2px',
+    boxShadow: '#ebebeb 0 2px 2px',
     '&:focus, &:hover, &$active': {
-      boxShadow: '#ccc 0px 2px 3px 1px',
+      boxShadow: '#ccc 0 2px 3px 1px',
     },
     '& .bar': {
       // display: inline-block !important;

docs/src/pages/components/tables/ReactVirtualizedTable.js

@@ -17,7 +17,7 @@ const styles = (theme) => ({
     // https://github.com/bvaughn/react-virtualized/issues/454
     '& .ReactVirtualized__Table__headerRow': {
       flip: false,
-      paddingRight: theme.direction === 'rtl' ? '0px !important' : undefined,
+      paddingRight: theme.direction === 'rtl' ? '0 !important' : undefined,
     },
   },
   tableRow: {

docs/src/pages/components/tables/ReactVirtualizedTable.tsx

@@ -27,7 +27,7 @@ const styles = (theme: Theme) =>
       // https://github.com/bvaughn/react-virtualized/issues/454
       '& .ReactVirtualized__Table__headerRow': {
         flip: false,
-        paddingRight: theme.direction === 'rtl' ? '0px !important' : undefined,
+        paddingRight: theme.direction === 'rtl' ? '0 !important' : undefined,
       },
     },
     tableRow: {

docs/src/pages/components/tabs/tabs.md

@@ -71,7 +71,7 @@ Here is an example of customizing the component. You can learn more about this i
 
 {{"demo": "pages/components/tabs/CustomizedTabs.js", "bg": true}}
 
-👑 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://deprecate.mui-treasury.com/components/tabs).
+👑 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/tabs/).
 
 ## Vertical tabs
 

docs/src/pages/customization/theming/theming.md

@@ -220,4 +220,4 @@ function App() {
     </React.StrictMode>,
   );
 }
-````
+```

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

@@ -169,7 +169,7 @@ export const styles = (theme) => ({
   listbox: {
     listStyle: 'none',
     margin: 0,
-    padding: '8px 0px',
+    padding: '8px 0',
     maxHeight: '40vh',
     overflow: 'auto',
   },

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

@@ -58,10 +58,10 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButton(props, ref) {
     let newValue;
 
     if (value && index >= 0) {
-      newValue = [...value];
+      newValue = value.slice();
       newValue.splice(index, 1);
     } else {
-      newValue = value ? [...value, buttonValue] : [buttonValue];
+      newValue = value ? value.concat(buttonValue) : [buttonValue];
     }
 
     onChange(event, newValue);

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import TreeViewContext from './TreeViewContext';
 import { withStyles } from '@material-ui/core/styles';
 import { useControlled } from '@material-ui/core/utils';
+import TreeViewContext from './TreeViewContext';
 
 export const styles = {
   /* Styles applied to the root element. */
@@ -196,7 +196,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
         return oldTabbable;
       });
     } else {
-      newExpanded = [value, ...expanded];
+      newExpanded = [value].concat(expanded);
     }
 
     if (onNodeToggle) {
@@ -217,7 +217,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
       const topLevelNodes = nodeMap.current[-1].children;
       diff = topLevelNodes.filter((node) => !isExpanded(node));
     }
-    const newExpanded = [...expanded, ...diff];
+    const newExpanded = expanded.concat(diff);
 
     if (diff.length > 0) {
       setExpandedState(newExpanded);
@@ -295,7 +295,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
     if (selected.indexOf(value) !== -1) {
       newSelected = selected.filter((id) => id !== value);
     } else {
-      newSelected = [value, ...selected];
+      newSelected = [value].concat(selected);
     }
 
     if (onNodeSelect) {
@@ -411,9 +411,9 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
     if (map) {
       nodes.push(id);
       if (map.children) {
-        nodes.push(...map.children);
+        nodes.concat(map.children);
         map.children.forEach((node) => {
-          nodes.push(...getNodesToRemove(node));
+          nodes.concat(getNodesToRemove(node));
         });
       }
     }

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

@@ -500,7 +500,7 @@ export default function useAutocomplete(props) {
     let newValue = option;
 
     if (multiple) {
-      newValue = Array.isArray(value) ? [...value] : [];
+      newValue = Array.isArray(value) ? value.slice() : [];
 
       if (process.env.NODE_ENV !== 'production') {
         const matches = newValue.filter((val) => getOptionSelected(option, val));
@@ -716,7 +716,7 @@ export default function useAutocomplete(props) {
       case 'Backspace':
         if (multiple && inputValue === '' && value.length > 0) {
           const index = focusedTag === -1 ? value.length - 1 : focusedTag;
-          const newValue = [...value];
+          const newValue = value.slice();
           newValue.splice(index, 1);
           handleValue(event, newValue, 'remove-option', {
             option: value[index],
@@ -805,7 +805,7 @@ export default function useAutocomplete(props) {
   };
 
   const handleTagDelete = (index) => (event) => {
-    const newValue = [...value];
+    const newValue = value.slice();
     newValue.splice(index, 1);
     handleValue(event, newValue, 'remove-option', {
       option: value[index],

packages/material-ui-styles/src/withStyles/withStyles.test.js

@@ -1,4 +1,4 @@
-import { expect, assert } from 'chai';
+import { expect } from 'chai';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { stub } from 'sinon';
@@ -57,7 +57,7 @@ describe('withStyles', () => {
 
       const ref = React.createRef();
       mount(<StyledTarget ref={ref} />);
-      assert.instanceOf(ref.current, TargetComponent);
+      expect(ref.current instanceof TargetComponent).to.equal(true);
     });
 
     it('forwards refs to React.forwardRef types', () => {
@@ -69,33 +69,6 @@ describe('withStyles', () => {
       mount(<StyledTarget ref={ref} />);
       expect(ref.current.nodeName).to.equal('DIV');
     });
-
-    // describe('innerRef', () => {
-    //   beforeEach(() => {
-    //     consoleErrorMock.spy();
-    //     PropTypes.resetWarningCache();
-    //   });
-
-    //   afterEach(() => {
-    //     consoleErrorMock.reset();
-    //   });
-
-    //   it('is deprecated', () => {
-    //     const ThemedDiv = withStyles({})('div');
-
-    //     mount(
-    //       <React.Fragment>
-    //         <ThemedDiv innerRef={React.createRef()} />
-    //       </React.Fragment>,
-    //     );
-
-    //     assert.strictEqual(consoleErrorMock.callCount(), 1);
-    //     assert.include(
-    //       consoleErrorMock.messages()[0],
-    //       'Warning: Failed prop type: Material-UI: The `innerRef` prop is deprecated',
-    //     );
-    //   });
-    // });
   });
 
   it('should forward the props', () => {

packages/material-ui-system/src/spacing.test.js

@@ -142,20 +142,6 @@ describe('spacing', () => {
         padding: 16,
       },
     });
-
-    // const output3 = spacing({
-    //   theme: {},
-    //   p: 1,
-    //   sm: {
-    //     p: 2,
-    //   },
-    // });
-    // assert.deepEqual(output3, {
-    //   padding: 8,
-    //   '@media (min-width:600px)': {
-    //     padding: 16,
-    //   },
-    // });
   });
 
   it('should support full version', () => {

packages/material-ui-system/src/style.test.js

@@ -47,20 +47,6 @@ describe('style', () => {
         backgroundColor: 'red',
       },
     });
-
-    // const output3 = bgcolor({
-    //   theme: {},
-    //   bgcolor: 'blue',
-    //   sm: {
-    //     bgcolor: 'red',
-    //   },
-    // });
-    // assert.deepEqual(output3, {
-    //   backgroundColor: 'blue',
-    //   '@media (min-width:600px)': {
-    //     backgroundColor: 'red',
-    //   },
-    // });
   });
 
   const boxShadow = style({

packages/material-ui/src/LinearProgress/LinearProgress.js

@@ -57,13 +57,13 @@ export const styles = (theme) => {
     dashedColorPrimary: {
       backgroundImage: `radial-gradient(${backgroundPrimary} 0%, ${backgroundPrimary} 16%, transparent 42%)`,
       backgroundSize: '10px 10px',
-      backgroundPosition: '0px -23px',
+      backgroundPosition: '0 -23px',
     },
     /* Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`. */
     dashedColorSecondary: {
       backgroundImage: `radial-gradient(${backgroundSecondary} 0%, ${backgroundSecondary} 16%, transparent 42%)`,
       backgroundSize: '10px 10px',
-      backgroundPosition: '0px -23px',
+      backgroundPosition: '0 -23px',
     },
     /* Styles applied to the layered bar1 and bar2 elements. */
     bar: {
@@ -145,11 +145,11 @@ export const styles = (theme) => {
     '@keyframes buffer': {
       '0%': {
         opacity: 1,
-        backgroundPosition: '0px -23px',
+        backgroundPosition: '0 -23px',
       },
       '50%': {
         opacity: 0,
-        backgroundPosition: '0px -23px',
+        backgroundPosition: '0 -23px',
       },
       '100%': {
         opacity: 1,

packages/material-ui/src/Popover/Popover.test.js

@@ -465,12 +465,6 @@ describe('<Popover />', () => {
         'Warning: Failed prop type: Invalid prop `PaperProps.component` supplied to `MockedPopover`. Expected an element type that can hold a ref.',
       );
     });
-
-    // it('should warn if anchorEl is not visible', () => {
-    //   mount(<Popover open anchorEl={document.createElement('div')} />);
-    //   assert.strictEqual(consoleErrorMock.callCount(), 1);
-    //   assert.include(consoleErrorMock.messages()[0], 'The node element should be visible');
-    // });
   });
 
   describe('prop anchorReference="anchorPosition"', () => {