Merge branch 'next' into fix-Material-Icon-search-lag

Author: ZeeshanTamboli

.eslintrc.js

@@ -13,6 +13,32 @@ const forbidCreateStylesMessage =
 
 const ENABLE_REACT_COMPILER_PLUGIN = false;
 
+const NO_RESTRICTED_IMPORTS_PATHS_TOP_LEVEL_PACKAGES = [
+  {
+    name: '@mui/material',
+    message: OneLevelImportMessage,
+  },
+  {
+    name: '@mui/lab',
+    message: OneLevelImportMessage,
+  },
+];
+
+const NO_RESTRICTED_IMPORTS_PATTERNS_DEEPLY_NESTED = [
+  {
+    group: [
+      '@mui/*/*/*',
+      '@pigment-css/*/*/*',
+      '@base_ui/*/*/*',
+      // Allow any import depth with any internal packages
+      '!@mui/internal-*/**',
+      // TODO delete, @mui/docs should be @mui/internal-docs
+      '!@mui/docs/**',
+    ],
+    message: OneLevelImportMessage,
+  },
+];
+
 module.exports = {
   root: true, // So parent files don't get applied
   env: {
@@ -67,20 +93,7 @@ module.exports = {
     'no-restricted-imports': [
       'error',
       {
-        patterns: [
-          {
-            group: [
-              '@mui/*/*/*',
-              '@pigment-css/*/*/*',
-              '@base_ui/*/*/*',
-              // Allow any import depth with any internal packages
-              '!@mui/internal-*/**',
-              // TODO delete, @mui/docs should be @mui/internal-docs
-              '!@mui/docs/**',
-            ],
-            message: OneLevelImportMessage,
-          },
-        ],
+        patterns: NO_RESTRICTED_IMPORTS_PATTERNS_DEEPLY_NESTED,
       },
     ],
     'no-continue': 'off',
@@ -417,23 +430,26 @@ module.exports = {
         'no-bitwise': 'off',
       },
     },
+    {
+      files: ['docs/**/*{.ts,.tsx,.js}'],
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            paths: NO_RESTRICTED_IMPORTS_PATHS_TOP_LEVEL_PACKAGES,
+            patterns: NO_RESTRICTED_IMPORTS_PATTERNS_DEEPLY_NESTED,
+          },
+        ],
+      },
+    },
     {
       files: ['packages/*/src/**/*{.ts,.tsx,.js}'],
       excludedFiles: ['*.d.ts', '*.spec.ts', '*.spec.tsx'],
       rules: {
         'no-restricted-imports': [
           'error',
           {
-            paths: [
-              {
-                name: '@mui/material',
-                message: OneLevelImportMessage,
-              },
-              {
-                name: '@mui/lab',
-                message: OneLevelImportMessage,
-              },
-            ],
+            paths: NO_RESTRICTED_IMPORTS_PATHS_TOP_LEVEL_PACKAGES,
           },
         ],
         // TODO: Consider setting back to `ignoreExternal: true` when the expected behavior is fixed:

CHANGELOG.md

@@ -1,5 +1,107 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.0.0-beta.5
+
+<!-- generated comparing v6.0.0-beta.4..next -->
+
+_Aug 8, 2024_
+
+A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- Remove some deprecated props from the ListItem component (#41566) @thathva
+- Bumped the minimum supported version of TypeScript (#43116) @mnajdova
+
+### `@mui/material@6.0.0-beta.5`
+
+#### BREAKING CHANGES
+
+- &#8203;<!-- 14 -->[material-ui][ListItem] Removing deprecated props (#41566) @thathva
+
+  `ListItem`'s props `autoFocus`, `button`, `disabled`, and `selected`, deprecated in v5, have been removed. To replace the `button` prop, use `ListItemButton` instead. The other removed props are available in the `ListItemButton` component as well.
+
+  ```diff
+  -<ListItem button />
+  +<ListItemButton />
+  ```
+
+  Use this codemod to migrate your project to the `ListItemButton` component:
+
+  ```bash
+  npx @mui/codemod@next v6.0.0/list-item-button-prop <path/to/folder>
+  ```
+
+  As the `ListItem` no longer supports these props, the class names related to these props were removed. You should use the `listItemButtonClasses` object instead.
+
+  ```diff
+  -import { listItemClasses } from '@mui/material/ListItem';
+  +import { listItemButtonClasses } from '@mui/material/ListItemButton';
+
+  - listItemClasses.button
+  + listItemButtonClasses.root
+
+  - listItemClasses.focusVisible
+  + listItemButtonClasses.focusVisible
+
+  - listItemClasses.disabled
+  + listItemButtonClasses.disabled
+
+  - listItemClasses.selected
+  + listItemButtonClasses.selected
+  ```
+
+#### Changes
+
+- &#8203;<!-- 36 -->[material-ui][Autocomplete] Fix default value for multiple mode getting redefined with React 19 (#43189) @DiegoAndai
+- &#8203;<!-- 12 -->[material-ui] Merge `CssVarsProvider` into `ThemeProvider` (#43115) @siriwatknp
+- &#8203;<!-- 11 -->[material-ui] Make tests compatible with React 19 (#43155) @DiegoAndai
+- &#8203;<!-- 10 -->[material-ui] Refine Blog template (#42825) @zanivan
+- &#8203;<!-- 09 -->[material-ui] Element ref access React 19 compatibility (#43132) @DiegoAndai
+- &#8203;<!-- 08 -->[material-ui][mui-system] Add support for version runtime checks (#43190) @DiegoAndai
+
+### `@mui/material-pigment-css@6.0.0-beta.5`
+
+- &#8203;<!-- 13 -->Reexport Pigment CSS from index file (#43218) @siriwatknp
+
+### `@mui/codemod@6.0.0-beta.5`
+
+- &#8203;<!-- 31 -->Fix codemod crash on MuiDivider property (#43125) @Janpot
+
+### Docs
+
+- &#8203;<!-- 37 -->Fix resolution of @mui/material-ui in docs (#43108) @Janpot
+- &#8203;<!-- 25 -->Refine and polish out Templates page (#43131) @zanivan
+- &#8203;<!-- 24 -->Fix the link test script (#43195) @alexfauquette
+- &#8203;<!-- 23 -->Fix alpha usage (#43194) @siriwatknp
+- &#8203;<!-- 22 -->Link Toolpad Core components from Material UI docs (#43036) @prakhargupta1
+- &#8203;<!-- 21 -->Link Toolpad core docs to the docs menu (#42952) @prakhargupta1
+- &#8203;<!-- 20 -->Polish migration guide (#43021) @oliviertassinari
+- &#8203;<!-- 19 -->Fix 404 link to migration pages @oliviertassinari
+- &#8203;<!-- 18 -->Support inject dynamic theme (#42879) @Vxee
+- &#8203;<!-- 17 -->Fix 301 @oliviertassinari
+- &#8203;<!-- 35 -->[blog] Announcing pricing changes Sep 2024 (#43061) @joserodolfofreitas
+- &#8203;<!-- 15 -->[material-ui][TextField] Remove mentions of `redux-form` from TextField documentation (#43176) @AbdurRahman2004
+
+### Core
+
+- &#8203;<!-- 34 -->[code-infra] Fix `@mui/internal-test-utils` `screen` export type (#43150) @LukasTy
+- &#8203;<!-- 33 -->[code-infra] Do not look for changes with previous commit when releasing a canary version (#43129) @michaldudak
+- &#8203;<!-- 32 -->[code-infra] Automate canary releases (#43066) @michaldudak
+- &#8203;<!-- 30 -->[core] Apply top-level eslint rule to docs and fix violations (#43126) @Janpot
+- &#8203;<!-- 29 -->[core] Patch styled-components to use React.JSX namespace (#43205) @aarongarciah
+- &#8203;<!-- 28 -->[core] Replace JSX namespace usages with React.JSX (#43204) @aarongarciah
+- &#8203;<!-- 27 -->[core] Remove `react-router` package from `pigment-css-vite-app` (#43201) @ZeeshanTamboli
+- &#8203;<!-- 26 -->[core] Remove unnecessary types packages from `@mui/internal-babel-macros` (#43193) @ZeeshanTamboli
+- &#8203;<!-- 16 -->[docs-infra] Move `ApiPage` to TS (#43149) @alexfauquette
+- &#8203;<!-- 07 -->[test] Remove unnecessary prop type check in test (#43211) @aarongarciah
+- &#8203;<!-- 06 -->[test] Make conformance tests work with async render function (#43156) @michaldudak
+- &#8203;<!-- 05 -->[typescript] Update the minimum supported version (#43116) @mnajdova
+- &#8203;<!-- 04 -->[website] Add icons to core page products (#43151) @zanivan
+- &#8203;<!-- 03 -->[website] Copyedit Docs and Product menu taglines (#43075) @samuelsycamore
+- &#8203;<!-- 02 -->[website] Fix wrong link in pricing table (#43141) @zanivan
+- &#8203;<!-- 01 -->[website] Add blog link to pricing table (#43123) @zanivan
+
+All contributors of this release in alphabetical order: @aarongarciah, @AbdurRahman2004, @alexfauquette, @DiegoAndai, @Janpot, @joserodolfofreitas, @LukasTy, @michaldudak, @mnajdova, @oliviertassinari, @prakhargupta1, @samuelsycamore, @siriwatknp, @thathva, @Vxee, @zanivan, @ZeeshanTamboli
+
 ## 6.0.0-beta.4
 
 <!-- generated comparing v6.0.0-beta.3..next -->

apps/pigment-css-next-app/package.json

@@ -23,7 +23,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "0.0.18",
+    "@pigment-css/nextjs-plugin": "0.0.20",
     "@types/node": "^20.5.7",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

apps/pigment-css-vite-app/package.json

@@ -25,7 +25,7 @@
   "devDependencies": {
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@pigment-css/vite-plugin": "0.0.18",
+    "@pigment-css/vite-plugin": "0.0.20",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",

docs/README.md

@@ -5,7 +5,7 @@ This is the website of the company (MUI), the documentation of Material UI, Bas
 To start the docs site in development mode, from the project root, run:
 
 ```bash
-pnpm start
+pnpm docs:dev
 ```
 
 If you do not have pnpm installed, select your OS and follow the instructions on the [pnpm website](https://pnpm.io/installation).

docs/data/experiments/renderers/renderCountry.js

@@ -2,13 +2,10 @@ import * as React from 'react';
 import { useGridApiContext } from '@mui/x-data-grid';
 // eslint-disable-next-line no-restricted-imports
 import { COUNTRY_ISO_OPTIONS } from '@mui/x-data-grid-generator/services/static-data';
-import {
-  Autocomplete,
-  autocompleteClasses,
-  Box,
-  InputBase,
-  styled,
-} from '@mui/material';
+import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
+import Box from '@mui/material/Box';
+import InputBase from '@mui/material/InputBase';
+import { styled } from '@mui/material/styles';
 
 const Country = React.memo(function Country(props) {
   const { value } = props;

docs/data/experiments/renderers/renderEmail.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@mui/material';
+import { styled } from '@mui/material/styles';
 
 const Link = styled('a')({
   textOverflow: 'ellipsis',

docs/data/experiments/renderers/renderIncoterm.js

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import {
-  Box,
-  ListItemIcon,
-  ListItemText,
-  MenuItem,
-  Select,
-  Tooltip,
-} from '@mui/material';
+import Box from '@mui/material/Box';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Tooltip from '@mui/material/Tooltip';
 import InfoIcon from '@mui/icons-material/Info';
 import { useGridApiContext } from '@mui/x-data-grid';
 // eslint-disable-next-line no-restricted-imports

docs/data/experiments/renderers/renderProgress.js

@@ -1,14 +1,10 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { useGridApiContext } from '@mui/x-data-grid';
-import {
-  alpha,
-  debounce,
-  Slider,
-  sliderClasses,
-  styled,
-  Tooltip,
-} from '@mui/material';
+import Slider, { sliderClasses } from '@mui/material/Slider';
+import Tooltip from '@mui/material/Tooltip';
+import { alpha, styled } from '@mui/material/styles';
+import { debounce } from '@mui/material/utils';
 
 const Center = styled('div')({
   height: '100%',

docs/data/experiments/renderers/renderRating.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Box, Rating } from '@mui/material';
+import Box from '@mui/material/Box';
+import Rating from '@mui/material/Rating';
 import { useGridApiContext } from '@mui/x-data-grid';
 
 const RatingValue = React.memo(function RatingValue(props) {

docs/data/experiments/renderers/renderStatus.js

@@ -1,12 +1,10 @@
 import * as React from 'react';
-import {
-  Chip,
-  ListItemIcon,
-  ListItemText,
-  MenuItem,
-  Select,
-  styled,
-} from '@mui/material';
+import Chip from '@mui/material/Chip';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import { styled } from '@mui/material/styles';
 import ReportProblemIcon from '@mui/icons-material/ReportProblem';
 import InfoIcon from '@mui/icons-material/Info';
 import AutorenewIcon from '@mui/icons-material/Autorenew';

docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.tsx

@@ -1,8 +1,12 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { ThemeProvider, useTheme, createTheme } from '@mui/material/styles';
+import {
+  ThemeProvider,
+  useTheme,
+  createTheme,
+  PaletteMode,
+} from '@mui/material/styles';
 import { amber, deepOrange, grey } from '@mui/material/colors';
-import { PaletteMode } from '@mui/material';
 
 const getDesignTokens = (mode: PaletteMode) => ({
   palette: {

docs/data/material/customization/typography/ResponsiveFontSizesChart.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 // import of a small, pure module in a private demo
 // bundle size and module duplication is negligible
-/* eslint-disable-next-line no-restricted-imports */
+// eslint-disable-next-line no-restricted-imports
 import { convertLength } from '@mui/material/styles/cssUtils';
 import { createTheme, responsiveFontSizes } from '@mui/material/styles';
 import Box from '@mui/material/Box';

docs/data/material/getting-started/templates/blog/Blog.tsx

@@ -4,8 +4,7 @@ import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { PaletteMode } from '@mui/material';
+import { createTheme, ThemeProvider, PaletteMode } from '@mui/material/styles';
 
 import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
 

docs/data/material/getting-started/templates/blog/components/AppAppBar.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';

docs/data/material/getting-started/templates/blog/components/AppAppBar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PaletteMode, styled } from '@mui/material';
+import { PaletteMode, styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';

docs/data/material/getting-started/templates/blog/components/Latest.js

@@ -6,7 +6,7 @@ import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid2';
 import Pagination from '@mui/material/Pagination';
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
 
 const articleInfo = [

docs/data/material/getting-started/templates/blog/components/Latest.tsx

@@ -5,7 +5,7 @@ import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid2';
 import Pagination from '@mui/material/Pagination';
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
 
 const articleInfo = [

docs/data/material/getting-started/templates/blog/components/MainContent.js

@@ -13,7 +13,7 @@ import Typography from '@mui/material/Typography';
 import FormControl from '@mui/material/FormControl';
 import InputAdornment from '@mui/material/InputAdornment';
 import OutlinedInput from '@mui/material/OutlinedInput';
-import { styled } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import RssFeedRoundedIcon from '@mui/icons-material/RssFeedRounded';