Merge branch 'master' into remove-stepbuttonicon

mui · Feb 25, 2025 · d6b9186 · d6b9186
2 parents ffa3d57 + 7ca2c0d
commit d6b9186
Show file tree

Hide file tree

Showing 28 changed files with 566 additions and 266 deletions.
diff --git a/docs/data/material/components/autocomplete/Sizes.js b/docs/data/material/components/autocomplete/Sizes.js
@@ -65,20 +65,6 @@ export default function Sizes() {
         options={top100Films}
         getOptionLabel={(option) => option.title}
         defaultValue={top100Films[13]}
-        renderTags={(value, getTagProps) =>
-          value.map((option, index) => {
-            const { key, ...tagProps } = getTagProps({ index });
-            return (
-              <Chip
-                key={key}
-                variant="outlined"
-                label={option.title}
-                size="small"
-                {...tagProps}
-              />
-            );
-          })
-        }
         renderInput={(params) => (
           <TextField
             {...params}

diff --git a/docs/data/material/components/autocomplete/Sizes.tsx b/docs/data/material/components/autocomplete/Sizes.tsx
@@ -65,20 +65,6 @@ export default function Sizes() {
         options={top100Films}
         getOptionLabel={(option) => option.title}
         defaultValue={top100Films[13]}
-        renderTags={(value, getTagProps) =>
-          value.map((option, index) => {
-            const { key, ...tagProps } = getTagProps({ index });
-            return (
-              <Chip
-                key={key}
-                variant="outlined"
-                label={option.title}
-                size="small"
-                {...tagProps}
-              />
-            );
-          })
-        }
         renderInput={(params) => (
           <TextField
             {...params}

diff --git a/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -1925,6 +1925,25 @@ The Popper's prop `componentsProps` was deprecated in favor of `slotProps`:
  />
 ```
 
+## Rating
+
+Use the [codemod](/~https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#rating-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/step-label-props <path>
+```
+
+### IconContainerComponent
+
+The Rating's `IconContainerComponent` prop was deprecated in favor of `slotProps.icon.component`:
+
+```diff
+ <Rating
+-  IconContainerComponent={CustomIconContainer}
++  slotProps={{ icon: { component: CustomIconContainer }}}
+ />
+```
+
 ## Select
 
 Use the [codemod](/~https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#select-classes) below to migrate the code as described in the following sections:

diff --git a/docs/data/material/migration/upgrade-to-v7/upgrade-to-v7.md b/docs/data/material/migration/upgrade-to-v7/upgrade-to-v7.md
@@ -69,6 +69,31 @@ If you were using a Vite alias to force ESM imports for the icons package, you s
    },
 ```
 
+### Dialog's onBackdropClick prop removed
+
+The deprecated `onBackdropClick` prop has been removed from the `Dialog` component.
+Please use the [`onClose`](/material-ui/api/dialog/#dialog-prop-onClose) callback instead, which receives the event and the reason for the dialog closing.
+Here's an example of how to use it:
+
+```jsx
+function Example() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = (event, reason) => {
+    if (reason === 'backdropClick') {
+      // Handle the backdrop click
+    }
+    setOpen(false);
+  };
+
+  return (
+    <Dialog open={open} onClose={handleClose}>
+      {/* Dialog content */}
+    </Dialog>
+  );
+}
+```
+
 ### Grid and Grid2 renamed
 
 The deprecated `Grid` component has been renamed to `GridLegacy`.
@@ -163,6 +188,31 @@ Use the `useMediaQuery` hook to replace `implementation="js"`:
 There's no codemod available for this change, as each project's setup will heavily influence the migration.
 :::
 
+### Modal's onBackdropClick prop removed
+
+The deprecated `onBackdropClick` prop has been removed from the `Modal` component.
+Please use the [`onClose`](/material-ui/api/modal/#modal-prop-onClose) callback instead, which receives the event and the reason for the modal closing.
+Here's an example of how to use it:
+
+```jsx
+function Example() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClose = (event, reason) => {
+    if (reason === 'backdropClick') {
+      // Handle the backdrop click
+    }
+    setOpen(false);
+  };
+
+  return (
+    <Modal open={open} onClose={handleClose}>
+      {/* Modal content */}
+    </Modal>
+  );
+}
+```
+
 ### Lab components moved to the main package
 
 The following `@mui/lab` components and hook have been moved to `@mui/material`:
@@ -229,6 +279,10 @@ npx @mui/codemod@next v7.0.0/input-label-size-normal-medium <path/to/folder>
 
 The default `data-testid` prop has been removed from the icons in `@mui/icons-material` in production bundles. This change ensures that the `data-testid` prop is only defined where needed, reducing the potential for naming clashes and removing unnecessary properties in production.
 
+### Removal of `MuiRating-readOnly` class from Rating
+
+Class name `MuiRating-readOnly` was removed in favor of `Mui-readOnly` global class.
+
 ### StepButtonIcon type removed
 
 The deprecated `StepButtonIcon` type has been removed. Use `StepButtonProps['icon']` instead.

diff --git a/docs/pages/material-ui/api/dialog.json b/docs/pages/material-ui/api/dialog.json
@@ -28,11 +28,6 @@
       },
       "default": "'sm'"
     },
-    "onBackdropClick": {
-      "type": { "name": "func" },
-      "deprecated": true,
-      "deprecationInfo": "Use the <code>onClose</code> prop with the <code>reason</code> argument to handle the <code>backdropClick</code> events."
-    },
     "onClose": {
       "type": { "name": "func" },
       "signature": {

diff --git a/docs/pages/material-ui/api/modal.json b/docs/pages/material-ui/api/modal.json
@@ -40,11 +40,6 @@
     "disableScrollLock": { "type": { "name": "bool" }, "default": "false" },
     "hideBackdrop": { "type": { "name": "bool" }, "default": "false" },
     "keepMounted": { "type": { "name": "bool" }, "default": "false" },
-    "onBackdropClick": {
-      "type": { "name": "func" },
-      "deprecated": true,
-      "deprecationInfo": "Use the <code>onClose</code> prop with the <code>reason</code> argument to handle the <code>backdropClick</code> events."
-    },
     "onClose": {
       "type": { "name": "func" },
       "signature": {

diff --git a/docs/pages/material-ui/api/rating.json b/docs/pages/material-ui/api/rating.json
@@ -15,7 +15,9 @@
     "icon": { "type": { "name": "node" }, "default": "<Star fontSize=\"inherit\" />" },
     "IconContainerComponent": {
       "type": { "name": "elementType" },
-      "default": "function IconContainer(props) {\n  const { value, ...other } = props;\n  return <span {...other} />;\n}"
+      "default": "function IconContainer(props) {\n  const { value, ...other } = props;\n  return <span {...other} />;\n}",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.icon.component</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     },
     "max": { "type": { "name": "number" }, "default": "5" },
     "name": { "type": { "name": "string" } },
@@ -42,6 +44,20 @@
       },
       "default": "'medium'"
     },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ decimal?: func<br>&#124;&nbsp;object, icon?: func<br>&#124;&nbsp;object, label?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ decimal?: elementType, icon?: elementType, label?: elementType, root?: elementType }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -56,13 +72,33 @@
     "import Rating from '@mui/material/Rating';",
     "import { Rating } from '@mui/material';"
   ],
-  "classes": [
+  "slots": [
     {
-      "key": "decimal",
-      "className": "MuiRating-decimal",
-      "description": "Styles applied to the icon wrapping elements when decimals are necessary.",
-      "isGlobal": false
+      "name": "root",
+      "description": "The component used for the root slot.",
+      "default": "'span'",
+      "class": "MuiRating-root"
+    },
+    {
+      "name": "label",
+      "description": "The component used for the label slot.",
+      "default": "'label'",
+      "class": "MuiRating-label"
     },
+    {
+      "name": "icon",
+      "description": "The component used for the icon slot.",
+      "default": "'span'",
+      "class": "MuiRating-icon"
+    },
+    {
+      "name": "decimal",
+      "description": "The component used fo r the decimal slot.",
+      "default": "'span'",
+      "class": "MuiRating-decimal"
+    }
+  ],
+  "classes": [
     {
       "key": "disabled",
       "className": "Mui-disabled",
@@ -75,12 +111,6 @@
       "description": "State class applied to the root element if keyboard focused.",
       "isGlobal": true
     },
-    {
-      "key": "icon",
-      "className": "MuiRating-icon",
-      "description": "Styles applied to the icon wrapping elements.",
-      "isGlobal": false
-    },
     {
       "key": "iconActive",
       "className": "MuiRating-iconActive",
@@ -111,12 +141,6 @@
       "description": "Styles applied to the icon wrapping elements when hover.",
       "isGlobal": false
     },
-    {
-      "key": "label",
-      "className": "MuiRating-label",
-      "description": "Styles applied to the label elements.",
-      "isGlobal": false
-    },
     {
       "key": "labelEmptyValueActive",
       "className": "MuiRating-labelEmptyValueActive",
@@ -129,12 +153,6 @@
       "description": "Styles applied to the root element if `readOnly={true}`.",
       "isGlobal": true
     },
-    {
-      "key": "root",
-      "className": "MuiRating-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
-    },
     {
       "key": "sizeLarge",
       "className": "MuiRating-sizeLarge",

diff --git a/docs/translations/api-docs/dialog/dialog.json b/docs/translations/api-docs/dialog/dialog.json
@@ -21,7 +21,6 @@
     "maxWidth": {
       "description": "Determine the max-width of the dialog. The dialog width grows with the size of the screen. Set to <code>false</code> to disable <code>maxWidth</code>."
     },
-    "onBackdropClick": { "description": "Callback fired when the backdrop is clicked." },
     "onClose": {
       "description": "Callback fired when the component requests to be closed.",
       "typeDescriptions": {

diff --git a/docs/translations/api-docs/modal/modal.json b/docs/translations/api-docs/modal/modal.json
@@ -42,7 +42,6 @@
     "keepMounted": {
       "description": "Always keep the children in the DOM. This prop can be useful in SEO situation or when you want to maximize the responsiveness of the Modal."
     },
-    "onBackdropClick": { "description": "Callback fired when the backdrop is clicked." },
     "onClose": {
       "description": "Callback fired when the component requests to be closed. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>.",
       "typeDescriptions": {

diff --git a/docs/translations/api-docs/rating/rating.json b/docs/translations/api-docs/rating/rating.json
@@ -41,17 +41,14 @@
     "precision": { "description": "The minimum increment value change allowed." },
     "readOnly": { "description": "Removes all hover effects and pointer events." },
     "size": { "description": "The size of the component." },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
     "value": { "description": "The rating value." }
   },
   "classDescriptions": {
-    "decimal": {
-      "description": "Styles applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the icon wrapping elements",
-      "conditions": "decimals are necessary"
-    },
     "disabled": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
@@ -62,10 +59,6 @@
       "nodeName": "the root element",
       "conditions": "keyboard focused"
     },
-    "icon": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the icon wrapping elements"
-    },
     "iconActive": {
       "description": "Styles applied to {{nodeName}} when {{conditions}}.",
       "nodeName": "the icon wrapping elements",
@@ -91,7 +84,6 @@
       "nodeName": "the icon wrapping elements",
       "conditions": "hover"
     },
-    "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the label elements" },
     "labelEmptyValueActive": {
       "description": "Styles applied to {{nodeName}} when {{conditions}}.",
       "nodeName": "the label of the &quot;no value&quot; input",
@@ -102,7 +94,6 @@
       "nodeName": "the root element",
       "conditions": "<code>readOnly={true}</code>"
     },
-    "root": { "description": "Styles applied to the root element." },
     "sizeLarge": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
@@ -119,5 +110,11 @@
       "conditions": "<code>size=\"small\"</code>"
     },
     "visuallyHidden": { "description": "Visually hide an element." }
+  },
+  "slotDescriptions": {
+    "decimal": "The component used fo r the decimal slot.",
+    "icon": "The component used for the icon slot.",
+    "label": "The component used for the label slot.",
+    "root": "The component used for the root slot."
   }
 }
diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md
@@ -1606,6 +1606,21 @@ npx @mui/codemod@latest deprecations/popper-props <path>
 npx @mui/codemod@latest deprecations/outlined-input-props <path>
 ```
 
+#### `rating-props`
+
+```diff
+ <Snackbar
+-  IconContainerComponent={CustomContainer}
++  slots={{
++    icon: { component: CustomContainer }
++  }}
+ />
+```
+
+```bash
+npx @mui/codemod@next deprecations/snackbar-props <path>
+```
+
 #### `select-classes`
 
 JS transforms:

diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js
@@ -42,6 +42,7 @@ import transformerTabsClasses from '../tabs-classes';
 import transformDrawerProps from '../drawer-props';
 import transformMobileStepperProps from '../mobile-stepper-props';
 import transformMenuProps from '../menu-props';
+import transformRatingProps from '../rating-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -92,6 +93,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformDrawerProps(file, api, options);
   file.source = transformMobileStepperProps(file, api, options);
   file.source = transformMenuProps(file, api, options);
+  file.source = transformRatingProps(file, api, options);
 
   return file.source;
 }
diff --git a/packages/mui-codemod/src/deprecations/rating-props/index.js b/packages/mui-codemod/src/deprecations/rating-props/index.js
@@ -0,0 +1 @@
+export { default } from './rating-props';