[material-ui][Rating] Add component prop (#44199)

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

@@ -1,6 +1,7 @@
 {
   "props": {
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
+    "component": { "type": { "name": "elementType" } },
     "defaultValue": { "type": { "name": "number" }, "default": "null" },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "emptyIcon": { "type": { "name": "node" }, "default": "<StarBorder fontSize=\"inherit\" />" },

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

@@ -2,6 +2,9 @@
   "componentDescription": "",
   "propDescriptions": {
     "classes": { "description": "Override or extend the styles applied to the component." },
+    "component": {
+      "description": "The component used for the root node. Either a string to use a HTML element or a component."
+    },
     "defaultValue": {
       "description": "The default value. Use when the component is not controlled."
     },

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

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
-import { InternalStandardProps as StandardProps, Theme } from '..';
+import { Theme } from '..';
 import { RatingClasses } from './ratingClasses';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface IconContainerProps extends React.HTMLAttributes<HTMLSpanElement> {
   value: number;
 }
 
 export interface RatingPropsSizeOverrides {}
 
-export interface RatingProps
-  extends StandardProps<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'onChange'> {
+export interface RatingOwnProps {
   /**
    * Override or extend the styles applied to the component.
    */
@@ -114,6 +114,14 @@ export interface RatingProps
   value?: number | null;
 }
 
+export type RatingTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'span',
+> = {
+  props: AdditionalProps & RatingOwnProps;
+  defaultComponent: RootComponent;
+};
+
 /**
  *
  * Demos:
@@ -124,4 +132,13 @@ export interface RatingProps
  *
  * - [Rating API](https://mui.com/material-ui/api/rating/)
  */
-export default function Rating(props: RatingProps): React.JSX.Element;
+declare const Rating: OverridableComponent<RatingTypeMap>;
+
+export type RatingProps<
+  RootComponent extends React.ElementType = RatingTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<RatingTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+
+export default Rating;

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

@@ -337,6 +337,7 @@ function defaultLabelText(value) {
 const Rating = React.forwardRef(function Rating(inProps, ref) {
   const props = useDefaultProps({ name: 'MuiRating', props: inProps });
   const {
+    component = 'span',
     className,
     defaultValue = null,
     disabled = false,
@@ -505,6 +506,7 @@ const Rating = React.forwardRef(function Rating(inProps, ref) {
 
   const ownerState = {
     ...props,
+    component,
     defaultValue,
     disabled,
     emptyIcon,
@@ -524,6 +526,7 @@ const Rating = React.forwardRef(function Rating(inProps, ref) {
 
   return (
     <RatingRoot
+      as={component}
       ref={handleRef}
       onMouseMove={handleMouseMove}
       onMouseLeave={handleMouseLeave}
@@ -644,6 +647,10 @@ Rating.propTypes /* remove-proptypes */ = {
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -652,6 +659,11 @@ Rating.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
   /**
    * The default value. Use when the component is not controlled.
    * @default null

packages/mui-material/src/Rating/Rating.spec.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { expectType } from '@mui/types';
+import Rating from '@mui/material/Rating';
+
+const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
+  function CustomComponent() {
+    return <div />;
+  };
+
+const children: React.ReactNode = <div />;
+
+function RatingTest() {
+  return (
+    <div>
+      <Rating />
+      <Rating precision={0.5} />
+
+      <Rating>{children}</Rating>
+      <Rating
+        onChange={(event, value) => {
+          expectType<number | null, typeof value>(value);
+          expectType<React.SyntheticEvent, typeof event>(event);
+        }}
+      />
+
+      <Rating
+        component="a"
+        href="test"
+        onClick={(event) => {
+          expectType<React.MouseEvent<HTMLAnchorElement, MouseEvent>, typeof event>(event);
+        }}
+      />
+      <Rating component={CustomComponent} stringProp="test" numberProp={0} />
+      {/* @ts-expect-error missing stringProp and numberProp */}
+      <Rating component={CustomComponent} />
+    </div>
+  );
+}

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

@@ -18,7 +18,7 @@ describe('<Rating />', () => {
     testDeepOverrides: { slotName: 'label', slotClassName: classes.label },
     testStateOverrides: { prop: 'size', value: 'small', styleKey: 'sizeSmall' },
     refInstanceof: window.HTMLSpanElement,
-    skip: ['componentProp', 'componentsProp'],
+    skip: ['componentsProp'],
   }));
 
   it('should render', () => {