[material-ui][Rating] Use Rating name as prefix of input element ids

docs/translations/api-docs/rating/rating.json

@@ -19,7 +19,7 @@
     "IconContainerComponent": { "description": "The component containing the icon." },
     "max": { "description": "Maximum rating." },
     "name": {
-      "description": "The name attribute of the radio <code>input</code> elements. This input <code>name</code> should be unique within the page. Being unique within a form is insufficient since the <code>name</code> is used to generated IDs."
+      "description": "The name attribute of the radio <code>input</code> elements. This input <code>name</code> should be unique within the page. Being unique within a form is insufficient since the <code>name</code> is used to generate IDs."
     },
     "onChange": {
       "description": "Callback fired when the value changes.",

packages/mui-material/src/Rating/Rating.d.ts

@@ -74,7 +74,7 @@ export interface RatingProps
   /**
    * The name attribute of the radio `input` elements.
    * This input `name` should be unique within the page.
-   * Being unique within a form is insufficient since the `name` is used to generated IDs.
+   * Being unique within a form is insufficient since the `name` is used to generate IDs.
    */
   name?: string;
   /**

packages/mui-material/src/Rating/Rating.js

@@ -242,7 +242,12 @@ function RatingItem(props) {
   const isFocused = itemValue <= focus;
   const isChecked = itemValue === ratingValueRounded;
 
-  const id = useId();
+  // "name" ensures unique IDs across different Rating components in React 17,
+  // preventing one component from affecting another. React 18's useId already handles this.
+  // Update to const id = useId(); when React 17 support is dropped.
+  // More details: https://github.com/mui/material-ui/issues/40997
+  const id = `${name}-${useId()}`;
+
   const container = (
     <RatingIcon
       as={IconContainerComponent}
@@ -705,7 +710,7 @@ Rating.propTypes /* remove-proptypes */ = {
   /**
    * The name attribute of the radio `input` elements.
    * This input `name` should be unique within the page.
-   * Being unique within a form is insufficient since the `name` is used to generated IDs.
+   * Being unique within a form is insufficient since the `name` is used to generate IDs.
    */
   name: PropTypes.string,
   /**

packages/mui-material/src/Rating/Rating.test.js

@@ -212,6 +212,16 @@ describe('<Rating />', () => {
     expect(new Set(radios.map((radio) => radio.name))).to.have.length(1);
   });
 
+  it('should use `name` as prefix of input element ids', () => {
+    render(<Rating name="rating-test" />);
+
+    const radios = document.querySelectorAll('input[type="radio"]');
+
+    for (let i = 0; i < radios.length; i += 1) {
+      expect(radios[i].getAttribute('id')).to.match(/^rating-test-/);
+    }
+  });
+
   describe('prop: readOnly', () => {
     it('renders a role="img"', () => {
       render(<Rating readOnly value={2} />);