Merge branch 'next' into fix-codemod

mui · Aug 1, 2024 · 04b8ae0 · 04b8ae0
2 parents bd6d127 + edc6d61
commit 04b8ae0
Show file tree

Hide file tree

Showing 61 changed files with 313 additions and 133 deletions.
diff --git a/.github/workflows/publish-canaries.yml b/.github/workflows/publish-canaries.yml
@@ -0,0 +1,23 @@
+name: Publish canary packages to npm
+
+on:
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+        with:
+          fetch-depth: 0
+      - name: Set up pnpm
+        uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+        with:
+          node-version: 18
+          cache: 'pnpm' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies
+      - run: pnpm install
+      - run: pnpm canary:release --ignore @mui/icons-material --yes --skip-last-commit-comparison
+        env:
+          NPM_TOKEN: ${{secrets.NPM_TOKEN}}
diff --git a/docs/data/material/components/about-the-lab/about-the-lab.md b/docs/data/material/components/about-the-lab/about-the-lab.md
@@ -48,10 +48,7 @@ Note that the lab has a peer dependency on the Material UI components.
 In order to benefit from the [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users need to import the following types. Internally, it uses [module augmentation](/material-ui/guides/typescript/#customization-of-theme) to extend the default theme structure with the extension components available in the lab.
 
 ```tsx
-// When using TypeScript 4.x and above
 import type {} from '@mui/lab/themeAugmentation';
-// When using TypeScript 3.x and below
-import '@mui/lab/themeAugmentation';
 
 const theme = createTheme({
   components: {

diff --git a/docs/data/material/components/autocomplete/AutocompleteHint.js b/docs/data/material/components/autocomplete/AutocompleteHint.js
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
-import { Box, Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 
 export default function AutocompleteHint() {
   const hint = React.useRef('');

diff --git a/docs/data/material/components/autocomplete/AutocompleteHint.tsx b/docs/data/material/components/autocomplete/AutocompleteHint.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
-import { Box, Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 
 export default function AutocompleteHint() {
   const hint = React.useRef('');

diff --git a/docs/data/material/components/box/BoxSx.js b/docs/data/material/components/box/BoxSx.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Box, ThemeProvider } from '@mui/material';
+import Box from '@mui/material/Box';
+import { ThemeProvider } from '@mui/material/styles';
 
 export default function BoxSx() {
   return (

diff --git a/docs/data/material/components/box/BoxSx.tsx b/docs/data/material/components/box/BoxSx.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Box, ThemeProvider } from '@mui/material';
+import Box from '@mui/material/Box';
+import { ThemeProvider } from '@mui/material/styles';
 
 export default function BoxSx() {
   return (

diff --git a/docs/data/material/components/cards/ActionAreaCard.js b/docs/data/material/components/cards/ActionAreaCard.js
@@ -3,7 +3,7 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
-import { CardActionArea } from '@mui/material';
+import CardActionArea from '@mui/material/CardActionArea';
 
 export default function ActionAreaCard() {
   return (

diff --git a/docs/data/material/components/cards/ActionAreaCard.tsx b/docs/data/material/components/cards/ActionAreaCard.tsx
@@ -3,7 +3,7 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
-import { CardActionArea } from '@mui/material';
+import CardActionArea from '@mui/material/CardActionArea';
 
 export default function ActionAreaCard() {
   return (

diff --git a/docs/data/material/components/cards/MultiActionAreaCard.js b/docs/data/material/components/cards/MultiActionAreaCard.js
@@ -3,7 +3,9 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
-import { Button, CardActionArea, CardActions } from '@mui/material';
+import Button from '@mui/material/Button';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardActions from '@mui/material/CardActions';
 
 export default function MultiActionAreaCard() {
   return (

diff --git a/docs/data/material/components/cards/MultiActionAreaCard.tsx b/docs/data/material/components/cards/MultiActionAreaCard.tsx
@@ -3,7 +3,9 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
-import { Button, CardActionArea, CardActions } from '@mui/material';
+import Button from '@mui/material/Button';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardActions from '@mui/material/CardActions';
 
 export default function MultiActionAreaCard() {
   return (

diff --git a/docs/data/material/components/icons/icons.md b/docs/data/material/components/icons/icons.md
@@ -303,10 +303,10 @@ const theme = createTheme({
 
 ## Font vs. SVGs: Which approach to use?
 
-Both approaches work fine, however there are some subtle differences, especially in terms of performance and rendering quality.
+Both approaches work fine, however, there are some subtle differences, especially in terms of performance and rendering quality.
 Whenever possible SVG is preferred as it allows code splitting, supports more icons, and renders faster and better.
 
-For more details, take a look at [why GitHub migrated from font icons to SVG icons](https://github.blog/2016-02-22-delivering-octicons-with-svg/).
+For more details, take a look at [why GitHub migrated from font icons to SVG icons](https://github.blog/engineering/delivering-octicons-with-svg/).
 
 ## Accessibility
 

diff --git a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.js b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.js
@@ -2,12 +2,10 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Masonry from '@mui/lab/Masonry';
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Typography,
-} from '@mui/material';
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 

diff --git a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx
@@ -2,12 +2,10 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Masonry from '@mui/lab/Masonry';
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Typography,
-} from '@mui/material';
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 

diff --git a/docs/data/material/customization/palette/AddingColorTokens.js b/docs/data/material/customization/palette/AddingColorTokens.js
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { blue } from '@mui/material/colors';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 const theme = createTheme({
   palette: {

diff --git a/docs/data/material/customization/palette/AddingColorTokens.tsx b/docs/data/material/customization/palette/AddingColorTokens.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { blue } from '@mui/material/colors';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 declare module '@mui/material/styles' {
   interface PaletteColor {

diff --git a/docs/data/material/customization/palette/ManuallyProvideCustomColor.js b/docs/data/material/customization/palette/ManuallyProvideCustomColor.js
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Button from '@mui/material/Button';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 // Augment the palette to include an ochre color
 

diff --git a/docs/data/material/customization/palette/ManuallyProvideCustomColor.tsx b/docs/data/material/customization/palette/ManuallyProvideCustomColor.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Button from '@mui/material/Button';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 // Augment the palette to include an ochre color
 declare module '@mui/material/styles' {

diff --git a/docs/data/material/customization/palette/ManuallyProvidePaletteColor.js b/docs/data/material/customization/palette/ManuallyProvidePaletteColor.js
@@ -2,9 +2,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Button from '@mui/material/Button';
-import { Box, Stack } from '@mui/system';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { unstable_capitalize as capitalize } from '@mui/utils';
-import { Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
 
 const theme = createTheme({
   palette: {

diff --git a/docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx b/docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Button from '@mui/material/Button';
-import { Box, Stack } from '@mui/system';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { unstable_capitalize as capitalize } from '@mui/utils';
-import { Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
 
 const theme = createTheme({
   palette: {

diff --git a/docs/data/material/customization/palette/TonalOffset.js b/docs/data/material/customization/palette/TonalOffset.js
@@ -2,8 +2,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
 import { blue } from '@mui/material/colors';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 const defaultTonalOffsetTheme = createTheme({
   palette: {

diff --git a/docs/data/material/customization/palette/TonalOffset.tsx b/docs/data/material/customization/palette/TonalOffset.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
 import { blue } from '@mui/material/colors';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 const defaultTonalOffsetTheme = createTheme({
   palette: {

diff --git a/docs/data/material/customization/palette/UsingAugmentColor.js b/docs/data/material/customization/palette/UsingAugmentColor.js
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Button from '@mui/material/Button';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 // Augment the palette to include a salmon color
 

diff --git a/docs/data/material/customization/palette/UsingAugmentColor.tsx b/docs/data/material/customization/palette/UsingAugmentColor.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Button from '@mui/material/Button';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 // Augment the palette to include a salmon color
 declare module '@mui/material/styles' {

diff --git a/docs/data/material/customization/palette/UsingStylesUtils.js b/docs/data/material/customization/palette/UsingStylesUtils.js
@@ -6,8 +6,9 @@ import {
   getContrastRatio,
 } from '@mui/material/styles';
 import Button from '@mui/material/Button';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 // Augment the palette to include a violet color
 

diff --git a/docs/data/material/customization/palette/UsingStylesUtils.tsx b/docs/data/material/customization/palette/UsingStylesUtils.tsx
@@ -6,8 +6,9 @@ import {
   getContrastRatio,
 } from '@mui/material/styles';
 import Button from '@mui/material/Button';
-import { Box, Stack } from '@mui/system';
-import { Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 // Augment the palette to include a violet color
 declare module '@mui/material/styles' {

diff --git a/docs/data/material/getting-started/supported-platforms/supported-platforms.md b/docs/data/material/getting-started/supported-platforms/supported-platforms.md
@@ -37,5 +37,5 @@ Have a look at the older [versions](https://mui.com/versions/) for backward comp
 
 ## TypeScript
 
-Material UI requires a minimum version of TypeScript 3.5.
+Material UI requires a minimum version of TypeScript 4.7.
 This aims to match the policy of [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped), with the support of the versions of TypeScript that are less than two years old.
diff --git a/docs/data/material/guides/typescript/typescript.md b/docs/data/material/guides/typescript/typescript.md
@@ -6,7 +6,7 @@
 
 <!-- #default-branch-switch -->
 
-Material UI requires a minimum version of TypeScript 3.5. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-ts) example.
+Material UI requires a minimum version of TypeScript 4.7. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-ts) example.
 
 For types to work, it's recommended that you have at least the following options enabled in your `tsconfig.json`:
 

diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md
@@ -86,7 +86,7 @@ pnpm add react@<version> react-dom@<version>
 
 ### Update TypeScript
 
-The minimum supported version of TypeScript has been increased from v3.5 to 4.1.
+The minimum supported version of TypeScript has been increased from v3.5 to 4.7.
 
 :::info
 We align with types released by [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped) (published on npm under the `@types` namespace).

diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Box, Stack } from '@mui/system';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 // Retain type safety.

diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Box, Stack } from '@mui/system';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 // Retain type safety.

diff --git a/docs/next.config.mjs b/docs/next.config.mjs
@@ -98,8 +98,14 @@ export default withDocsInfra({
           ...config.resolve.alias,
 
           // for 3rd party packages with dependencies in this repository
+          '@mui/material$': path.resolve(workspaceRoot, 'packages/mui-material/src/index.js'),
           '@mui/material': path.resolve(workspaceRoot, 'packages/mui-material/src'),
+
           '@mui/docs': path.resolve(workspaceRoot, 'packages/mui-docs/src'),
+          '@mui/icons-material$': path.resolve(
+            workspaceRoot,
+            'packages/mui-icons-material/lib/esm/index.js',
+          ),
           '@mui/icons-material': path.resolve(workspaceRoot, 'packages/mui-icons-material/lib/esm'),
           '@mui/lab': path.resolve(workspaceRoot, 'packages/mui-lab/src'),
           '@mui/styled-engine': path.resolve(workspaceRoot, 'packages/mui-styled-engine/src'),

diff --git a/docs/notifications.json b/docs/notifications.json
@@ -8,5 +8,10 @@
     "id": 81,
     "title": "Introducing MUI X v7",
     "text": "The new version is packed with new components, exciting features, improved usability, and developer experience. Check out the <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"mui-x-v7\" href=\"https://mui.com/blog/mui-x-v7/\">announcement blog post</a>."
+  },
+  {
+    "id": 82,
+    "title": "Upcoming changes to MUI X pricing in 2024",
+    "text": "Check out the <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"mui-x\" href=\"https://mui.com/blog/mui-x-sep-2024-price-update/\">new pricing updates</a> and how to transition to the new model."
   }
 ]
diff --git a/docs/pages/blog/mui-x-sep-2024-price-update.js b/docs/pages/blog/mui-x-sep-2024-price-update.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
+import { docs } from './mui-x-sep-2024-price-update.md?muiMarkdown';
+
+export default function Page() {
+  return <TopLayoutBlog docs={docs} />;
+}