Merge branch 'master' into fix/hover-background-value-out-of-range-in…

…-table-row

babel.config.js

@@ -53,7 +53,7 @@ module.exports = function getBabelConfig(api) {
       '@babel/preset-env',
       {
         bugfixes: true,
-        browserslistEnv: process.env.BABEL_ENV || process.env.NODE_ENV,
+        browserslistEnv: api.env() || process.env.NODE_ENV,
         debug: process.env.MUI_BUILD_VERBOSE === 'true',
         modules: useESModules ? false : 'commonjs',
         shippedProposals: api.env('modern'),

docs/data/material/components/slider/ContinuousSlider.tsx

@@ -8,8 +8,8 @@ import VolumeUp from '@mui/icons-material/VolumeUp';
 export default function ContinuousSlider() {
   const [value, setValue] = React.useState<number>(30);
 
-  const handleChange = (event: Event, newValue: number | number[]) => {
-    setValue(newValue as number);
+  const handleChange = (event: Event, newValue: number) => {
+    setValue(newValue);
   };
 
   return (

docs/data/material/components/slider/CustomMarks.tsx

@@ -18,8 +18,8 @@ const marks = [
 
 export default function CustomMarks() {
   const [val, setVal] = React.useState<number>(MIN);
-  const handleChange = (_: Event, newValue: number | number[]) => {
-    setVal(newValue as number);
+  const handleChange = (_: Event, newValue: number) => {
+    setVal(newValue);
   };
 
   return (

docs/data/material/components/slider/InputSlider.tsx

@@ -14,8 +14,8 @@ const Input = styled(MuiInput)`
 export default function InputSlider() {
   const [value, setValue] = React.useState(30);
 
-  const handleSliderChange = (event: Event, newValue: number | number[]) => {
-    setValue(newValue as number);
+  const handleSliderChange = (event: Event, newValue: number) => {
+    setValue(newValue);
   };
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {

docs/data/material/components/slider/MinimumDistanceSlider.js

@@ -12,10 +12,6 @@ export default function MinimumDistanceSlider() {
   const [value1, setValue1] = React.useState([20, 37]);
 
   const handleChange1 = (event, newValue, activeThumb) => {
-    if (!Array.isArray(newValue)) {
-      return;
-    }
-
     if (activeThumb === 0) {
       setValue1([Math.min(newValue[0], value1[1] - minDistance), value1[1]]);
     } else {
@@ -26,10 +22,6 @@ export default function MinimumDistanceSlider() {
   const [value2, setValue2] = React.useState([20, 37]);
 
   const handleChange2 = (event, newValue, activeThumb) => {
-    if (!Array.isArray(newValue)) {
-      return;
-    }
-
     if (newValue[1] - newValue[0] < minDistance) {
       if (activeThumb === 0) {
         const clamped = Math.min(newValue[0], 100 - minDistance);

docs/data/material/components/slider/MinimumDistanceSlider.tsx

@@ -11,15 +11,7 @@ const minDistance = 10;
 export default function MinimumDistanceSlider() {
   const [value1, setValue1] = React.useState<number[]>([20, 37]);
 
-  const handleChange1 = (
-    event: Event,
-    newValue: number | number[],
-    activeThumb: number,
-  ) => {
-    if (!Array.isArray(newValue)) {
-      return;
-    }
-
+  const handleChange1 = (event: Event, newValue: number[], activeThumb: number) => {
     if (activeThumb === 0) {
       setValue1([Math.min(newValue[0], value1[1] - minDistance), value1[1]]);
     } else {
@@ -29,15 +21,7 @@ export default function MinimumDistanceSlider() {
 
   const [value2, setValue2] = React.useState<number[]>([20, 37]);
 
-  const handleChange2 = (
-    event: Event,
-    newValue: number | number[],
-    activeThumb: number,
-  ) => {
-    if (!Array.isArray(newValue)) {
-      return;
-    }
-
+  const handleChange2 = (event: Event, newValue: number[], activeThumb: number) => {
     if (newValue[1] - newValue[0] < minDistance) {
       if (activeThumb === 0) {
         const clamped = Math.min(newValue[0], 100 - minDistance);
@@ -47,7 +31,7 @@ export default function MinimumDistanceSlider() {
         setValue2([clamped - minDistance, clamped]);
       }
     } else {
-      setValue2(newValue as number[]);
+      setValue2(newValue);
     }
   };
 

docs/data/material/components/slider/MusicPlayerSlider.tsx

@@ -120,7 +120,7 @@ export default function MusicPlayerSlider() {
           min={0}
           step={1}
           max={duration}
-          onChange={(_, value) => setPosition(value as number)}
+          onChange={(_, value) => setPosition(value)}
           sx={(t) => ({
             color: 'rgba(0,0,0,0.87)',
             height: 4,

docs/data/material/components/slider/NonLinearSlider.js

@@ -25,9 +25,7 @@ export default function NonLinearSlider() {
   const [value, setValue] = React.useState(10);
 
   const handleChange = (event, newValue) => {
-    if (typeof newValue === 'number') {
-      setValue(newValue);
-    }
+    setValue(newValue);
   };
 
   return (

docs/data/material/components/slider/NonLinearSlider.tsx

@@ -24,10 +24,8 @@ function calculateValue(value: number) {
 export default function NonLinearSlider() {
   const [value, setValue] = React.useState<number>(10);
 
-  const handleChange = (event: Event, newValue: number | number[]) => {
-    if (typeof newValue === 'number') {
-      setValue(newValue);
-    }
+  const handleChange = (event: Event, newValue: number) => {
+    setValue(newValue);
   };
 
   return (

docs/data/material/components/slider/RangeSlider.tsx

@@ -9,8 +9,8 @@ function valuetext(value: number) {
 export default function RangeSlider() {
   const [value, setValue] = React.useState<number[]>([20, 37]);
 
-  const handleChange = (event: Event, newValue: number | number[]) => {
-    setValue(newValue as number[]);
+  const handleChange = (event: Event, newValue: number[]) => {
+    setValue(newValue);
   };
 
   return (

docs/data/material/getting-started/templates/dashboard/Dashboard.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type {} from '@mui/x-date-pickers/themeAugmentation';
 import type {} from '@mui/x-charts/themeAugmentation';
-import type {} from '@mui/x-data-grid/themeAugmentation';
+import type {} from '@mui/x-data-grid-pro/themeAugmentation';
 import type {} from '@mui/x-tree-view/themeAugmentation';
 import { alpha } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';

docs/data/material/getting-started/templates/dashboard/theme/customizations/dataGrid.ts

@@ -1,7 +1,6 @@
 import { paperClasses } from '@mui/material/Paper';
 import { alpha, Theme } from '@mui/material/styles';
 import type { DataGridProComponents } from '@mui/x-data-grid-pro/themeAugmentation';
-import type { DataGridComponents } from '@mui/x-data-grid/themeAugmentation';
 import { menuItemClasses } from '@mui/material/MenuItem';
 import { listItemIconClasses } from '@mui/material/ListItemIcon';
 import { iconButtonClasses } from '@mui/material/IconButton';
@@ -12,7 +11,7 @@ import { tablePaginationClasses } from '@mui/material/TablePagination';
 import { gray } from '../../../shared-theme/themePrimitives';
 
 /* eslint-disable import/prefer-default-export */
-export const dataGridCustomizations: DataGridProComponents<Theme> & DataGridComponents<Theme> = {
+export const dataGridCustomizations: DataGridProComponents<Theme> & DataGridProComponents<Theme> = {
   MuiDataGrid: {
     styleOverrides: {
       root: ({ theme }) => ({

docs/data/material/guides/composition/composition.md

@@ -66,7 +66,7 @@ The popper slot in the original example would now have both classes applied to i
 :::
 
 :::info
-`style` object are shallow merged rather than replacing one another. The style keys from the first argument have higher priority.
+`style` object and `sx` are shallow merged rather than replacing one another. Those values from the first argument have higher priority.
 :::
 
 ## Component prop

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

@@ -1693,6 +1693,69 @@ The PaginationItems's `components` prop was deprecated in favor of `slots`:
  />
 ```
 
+## Popover
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#popover-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/popover-props <path>
+```
+
+### BackdropComponent
+
+The Popover's `BackdropComponent` prop was deprecated in favor of `slots.backdrop`:
+
+```diff
+ <Popover
+-  BackdropComponent={Backdrop}
++  slots={{ backdrop: Backdrop }}
+ >
+```
+
+### BackdropProps
+
+The Popover's `BackdropProps` prop was deprecated in favor of `slotProps.backdrop`:
+
+```diff
+ <Popover
+-  BackdropProps={{ timeout: 500 }}
++  slotProps={{ backdrop: { timeout: 500 } }}
+ >
+```
+
+### PaperProps
+
+The Popover's `PaperProps` prop was deprecated in favor of `slotProps.paper`:
+
+```diff
+ <Popover
+-  PaperProps={{ id: 'paper-id' }}
++  slotProps={{ paper: { id: 'paper-id' } }}
+ >
+```
+
+### TransitionComponent
+
+The Popover's `TransitionComponent` prop was deprecated in favor of `slots.transition`:
+
+```diff
+ <Popover
+-  TransitionComponent={Transition}
++  slots={{ transition: Transition }}
+ >
+```
+
+### TransitionProps
+
+The Popover's `TransitionProps` prop was deprecated in favor of `slotProps.transition`:
+
+```diff
+ <Popover
+-  TransitionProps={{ timeout: 500 }}
++  slotProps={{ transition: { timeout: 500 } }}
+ >
+```
+
 ## Popper
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#popper-props) below to migrate the code as described in the following sections:

docs/pages/material-ui/api/menu.json

@@ -18,12 +18,15 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
+        "description": "{ backdrop?: func<br>&#124;&nbsp;object, paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
       },
       "default": "{}"
     },
     "slots": {
-      "type": { "name": "shape", "description": "{ paper?: elementType, root?: elementType }" },
+      "type": {
+        "name": "shape",
+        "description": "{ backdrop?: elementType, paper?: elementType, root?: elementType, transition?: elementType }"
+      },
       "default": "{}"
     },
     "sx": {

docs/pages/material-ui/api/popover.json

@@ -24,12 +24,12 @@
       "type": { "name": "elementType" },
       "default": "styled(Backdrop, {\n  name: 'MuiModal',\n  slot: 'Backdrop',\n  overridesResolver: (props, styles) => {\n    return styles.backdrop;\n  },\n})({\n  zIndex: -1,\n})",
       "deprecated": true,
-      "deprecationInfo": "Use <code>slotProps.root.slots.backdrop</code> instead. While this prop currently works, it will be removed in the next major version."
+      "deprecationInfo": "Use <code>slots.backdrop</code> instead. This prop will be removed in v7. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "BackdropProps": {
       "type": { "name": "object" },
       "deprecated": true,
-      "deprecationInfo": "Use <code>slotProps.root.slotProps.backdrop</code> instead."
+      "deprecationInfo": "Use <code>slotProps.backdrop</code> instead. This prop will be removed in v7. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
@@ -47,12 +47,15 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
+        "description": "{ backdrop?: func<br>&#124;&nbsp;object, paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
       },
       "default": "{}"
     },
     "slots": {
-      "type": { "name": "shape", "description": "{ paper?: elementType, root?: elementType }" },
+      "type": {
+        "name": "shape",
+        "description": "{ backdrop?: elementType, paper?: elementType, root?: elementType, transition?: elementType }"
+      },
       "default": "{}"
     },
     "sx": {
@@ -69,24 +72,56 @@
       },
       "default": "{\n  vertical: 'top',\n  horizontal: 'left',\n}"
     },
-    "TransitionComponent": { "type": { "name": "elementType" }, "default": "Grow" },
+    "TransitionComponent": {
+      "type": { "name": "elementType" },
+      "default": "Grow",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slots.transition</code> prop instead. This prop will be removed in v7. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "transitionDuration": {
       "type": {
         "name": "union",
         "description": "'auto'<br>&#124;&nbsp;number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }"
       },
       "default": "'auto'"
     },
-    "TransitionProps": { "type": { "name": "object" }, "default": "{}" }
+    "TransitionProps": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps.transition</code> prop instead. This prop will be removed in v7. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    }
   },
   "name": "Popover",
   "imports": [
     "import Popover from '@mui/material/Popover';",
     "import { Popover } from '@mui/material';"
   ],
   "slots": [
-    { "name": "root", "description": "", "class": "MuiPopover-root" },
-    { "name": "paper", "description": "", "class": "MuiPopover-paper" }
+    {
+      "name": "root",
+      "description": "The component used for the root slot.",
+      "default": "Modal",
+      "class": "MuiPopover-root"
+    },
+    {
+      "name": "paper",
+      "description": "The component used for the paper slot.",
+      "default": "Paper",
+      "class": "MuiPopover-paper"
+    },
+    {
+      "name": "transition",
+      "description": "The component used for the transition slot.",
+      "default": "Grow",
+      "class": null
+    },
+    {
+      "name": "backdrop",
+      "description": "The component used for the backdrop slot.",
+      "default": "Backdrop",
+      "class": null
+    }
   ],
   "classes": [],
   "spread": true,

docs/pages/material-ui/api/slider.json

@@ -58,14 +58,14 @@
     "onChange": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(event: Event, value: number | Array<number>, activeThumb: number) => void",
+        "type": "function(event: Event, value: Value, activeThumb: number) => void",
         "describedArgs": ["event", "value", "activeThumb"]
       }
     },
     "onChangeCommitted": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(event: React.SyntheticEvent | Event, value: number | Array<number>) => void",
+        "type": "function(event: React.SyntheticEvent | Event, value: Value) => void",
         "describedArgs": ["event", "value"]
       }
     },

docs/src/components/productMaterial/MaterialHero.tsx

@@ -183,7 +183,7 @@ function SlideDemo() {
       <Slider
         aria-labelledby="temperature-slider"
         value={value}
-        onChange={(_, newValue) => setValue(newValue as number[])}
+        onChange={(_, newValue) => setValue(newValue)}
       />
       <LocalFireDepartment
         fontSize="small"