Merge branch 'next' of https://github.com/mui/material-ui into v6-mig…

…ration-edit
mui · Aug 16, 2024 · 38ae702 · 38ae702
2 parents 171a071 + cee8714
commit 38ae702
Show file tree

Hide file tree

Showing 50 changed files with 418 additions and 242 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -9,7 +9,6 @@ on:
   pull_request:
     paths-ignore:
       # should sync with ci-check.yml as a workaround to bypass github checks
-      - 'docs/**'
       - 'examples/**'
 
 permissions: {}

diff --git a/SECURITY.md b/SECURITY.md
@@ -4,11 +4,14 @@
 
 The versions of the project that are currently supported with security updates.
 
-| Version | Supported          |
-| ------: | :----------------- |
-|     5.x | :white_check_mark: |
-|     4.x | :white_check_mark: |
-|   < 4.0 | :x:                |
+| Material UI version | Release    | Supported            |
+| ------------------: | :--------- | :------------------- |
+|              ^5.0.0 | 2021-09-16 | ✅ Stable major      |
+|              ^4.0.0 | 2019-06-23 | ✅ Long-term support |
+|              ^3.0.0 | 2018-08-27 | ❌                   |
+|              ^2.0.0 | /          | ❌                   |
+|              ^1.0.0 | 2018-06-18 | ❌                   |
+|             <=1.0.0 | 2014-10-05 | ❌                   |
 
 ## Reporting a vulnerability
 

diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-popover/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-popover/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import BasicPopover from '../../../../../../docs/data/material/components/popover/BasicPopover';
-import MouseOverPopover from '../../../../../../docs/data/material/components/popover/MouseOverPopover';
+import MouseHoverPopover from '../../../../../../docs/data/material/components/popover/MouseHoverPopover';
 import PopoverPopupState from '../../../../../../docs/data/material/components/popover/PopoverPopupState';
 import VirtualElementPopover from '../../../../../../docs/data/material/components/popover/VirtualElementPopover';
 
@@ -17,7 +17,7 @@ export default function Popover() {
       <section>
         <h2> Mouse Over Popover</h2>
         <div className="demo-container">
-          <MouseOverPopover />
+          <MouseHoverPopover />
         </div>
       </section>
       <section>

diff --git a/docs/babel.config.js b/docs/babel.config.js
@@ -8,10 +8,10 @@ const { version: transformRuntimeVersion } = fse.readJSONSync(
 );
 
 module.exports = {
-  // TODO: Enable once nextjs uses babel 7.13
-  // assumptions: {
-  //   noDocumentAll: true,
-  // },
+  assumptions: {
+    noDocumentAll: true,
+    setSpreadProperties: true,
+  },
   presets: [
     // backport of https://github.com/vercel/next.js/pull/9511
     [

diff --git a/docs/data/material/components/dividers/VerticalDividerMiddle.js b/docs/data/material/components/dividers/VerticalDividerMiddle.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Card from '@mui/material/Card';
-import Divider from '@mui/material/Divider';
+import Divider, { dividerClasses } from '@mui/material/Divider';
 import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
 import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
@@ -16,7 +16,7 @@ export default function VerticalDividerMiddle() {
         '& svg': {
           m: 1,
         },
-        '& hr': {
+        [`& .${dividerClasses.root}`]: {
           mx: 0.5,
         },
       }}

diff --git a/docs/data/material/components/dividers/VerticalDividerMiddle.tsx b/docs/data/material/components/dividers/VerticalDividerMiddle.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Card from '@mui/material/Card';
-import Divider from '@mui/material/Divider';
+import Divider, { dividerClasses } from '@mui/material/Divider';
 import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
 import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
@@ -16,7 +16,7 @@ export default function VerticalDividerMiddle() {
         '& svg': {
           m: 1,
         },
-        '& hr': {
+        [`& .${dividerClasses.root}`]: {
           mx: 0.5,
         },
       }}

diff --git a/docs/data/material/components/dividers/VerticalDividers.js b/docs/data/material/components/dividers/VerticalDividers.js
@@ -4,7 +4,7 @@ import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
 import FormatBoldIcon from '@mui/icons-material/FormatBold';
 import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
+import Divider, { dividerClasses } from '@mui/material/Divider';
 
 export default function VerticalDividers() {
   return (
@@ -20,7 +20,7 @@ export default function VerticalDividers() {
         '& svg': {
           m: 1,
         },
-        '& hr': {
+        [`& .${dividerClasses.root}`]: {
           mx: 0.5,
         },
       }}

diff --git a/docs/data/material/components/dividers/VerticalDividers.tsx b/docs/data/material/components/dividers/VerticalDividers.tsx
@@ -4,7 +4,7 @@ import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
 import FormatBoldIcon from '@mui/icons-material/FormatBold';
 import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
+import Divider, { dividerClasses } from '@mui/material/Divider';
 
 export default function VerticalDividers() {
   return (
@@ -20,7 +20,7 @@ export default function VerticalDividers() {
         '& svg': {
           m: 1,
         },
-        '& hr': {
+        [`& .${dividerClasses.root}`]: {
           mx: 0.5,
         },
       }}

diff --git a/docs/data/material/components/dividers/dividers.md b/docs/data/material/components/dividers/dividers.md
@@ -32,7 +32,7 @@ The Divider component supports three variants: `fullWidth` (default), `inset`, a
 
 ### Orientation
 
-Use the `orientation` prop to change the Divider from horizontal to vertical.
+Use the `orientation` prop to change the Divider from horizontal to vertical. When using vertical orientation, the Divider renders a `<div>` with the corresponding accessibility attributes instead of `<hr>` to adhere to the WAI-ARIA [spec](https://www.w3.org/TR/wai-aria-1.2/#separator).
 
 {{"demo": "VerticalDividers.js", "bg": true}}
 

diff --git a/...al/components/popover/MouseOverPopover.js → ...l/components/popover/MouseHoverPopover.js b/...al/components/popover/MouseOverPopover.js → ...l/components/popover/MouseHoverPopover.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Popover from '@mui/material/Popover';
 import Typography from '@mui/material/Typography';
 
-export default function MouseOverPopover() {
+export default function MouseHoverPopover() {
   const [anchorEl, setAnchorEl] = React.useState(null);
 
   const handlePopoverOpen = (event) => {

diff --git a/...l/components/popover/MouseOverPopover.tsx → .../components/popover/MouseHoverPopover.tsx b/...l/components/popover/MouseOverPopover.tsx → .../components/popover/MouseHoverPopover.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Popover from '@mui/material/Popover';
 import Typography from '@mui/material/Typography';
 
-export default function MouseOverPopover() {
+export default function MouseHoverPopover() {
   const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
 
   const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {

diff --git a/docs/data/material/components/popover/popover.md b/docs/data/material/components/popover/popover.md
@@ -30,11 +30,11 @@ the position of the popover.
 
 {{"demo": "AnchorPlayground.js", "hideToolbar": true}}
 
-## Mouse over interaction
+## Mouse hover interaction
 
-This demo demonstrates how to use the `Popover` component and the mouseover event to achieve popover behavior.
+This demo demonstrates how to use the `Popover` component with `mouseenter` and `mouseleave` events to achieve popover behavior.
 
-{{"demo": "MouseOverPopover.js"}}
+{{"demo": "MouseHoverPopover.js"}}
 
 ## Virtual element
 

diff --git a/docs/data/material/getting-started/support/support.md b/docs/data/material/getting-started/support/support.md
@@ -72,12 +72,14 @@ This includes issues introduced by external sources, like browser upgrades or ch
 
 ### Supported versions
 
-- Material UI v5: ✅ Stable major (Continuous support)
-- [Material UI v4](https://v4.mui.com/): ⚠️ Long-term support (Guaranteed Support for security issues and regressions).
-- [Material UI v3](https://v3.mui.com/): 🅧 No longer supported.
-- Material UI v2: 🅧 Never existed.
-- [Material UI v1](https://v1.mui.com/): 🅧 No longer supported.
-- [Material UI v0.x](https://v0.mui.com/#/): 🅧 No longer supported.
+| Material UI version | Release    | Supported                                                           |
+| ------------------: | :--------- | :------------------------------------------------------------------ |
+|              ^5.0.0 | 2021-09-16 | ✅ Stable major (Continuous support)                                |
+|              ^4.0.0 | 2019-06-23 | ⚠️ Long-term support (Support for security issues and regressions). |
+|              ^3.0.0 | 2018-08-27 | ❌                                                                  |
+|              ^2.0.0 | /          | ❌                                                                  |
+|              ^1.0.0 | 2018-06-18 | ❌                                                                  |
+|             <=1.0.0 | 2014-10-05 | ❌                                                                  |
 
 ## Community
 

diff --git a/docs/data/material/getting-started/supported-platforms/supported-platforms.md b/docs/data/material/getting-started/supported-platforms/supported-platforms.md
@@ -25,7 +25,7 @@ You can expect Material UI's components to render without major issues.
 
 <!-- #stable-snapshot -->
 
-Material UI supports [Node.js](https://github.com/nodejs/node) starting with version 12.0 for server-side rendering.
+Material UI supports [Node.js](https://github.com/nodejs/node) starting with version 14.0 for server-side rendering.
 The objective is to support Node.js down to the [last version in maintenance mode](https://github.com/nodejs/Release#release-schedule).
 
 ## React