diff --git a/docs/pages/material-ui/api/rating.json b/docs/pages/material-ui/api/rating.json index 165226db997490..aabb90b519a7c9 100644 --- a/docs/pages/material-ui/api/rating.json +++ b/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": "" }, diff --git a/docs/translations/api-docs/rating/rating.json b/docs/translations/api-docs/rating/rating.json index 277a5c7034490a..44c6a0da5b2590 100644 --- a/docs/translations/api-docs/rating/rating.json +++ b/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." }, diff --git a/packages/mui-material/src/Rating/Rating.d.ts b/packages/mui-material/src/Rating/Rating.d.ts index 839946456d83d4..7af3ee1e29e0fb 100644 --- a/packages/mui-material/src/Rating/Rating.d.ts +++ b/packages/mui-material/src/Rating/Rating.d.ts @@ -1,8 +1,9 @@ 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 { value: number; @@ -10,8 +11,7 @@ export interface IconContainerProps extends React.HTMLAttributes, '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; + +export type RatingProps< + RootComponent extends React.ElementType = RatingTypeMap['defaultComponent'], + AdditionalProps = {}, +> = OverrideProps, RootComponent> & { + component?: React.ElementType; +}; + +export default Rating; diff --git a/packages/mui-material/src/Rating/Rating.js b/packages/mui-material/src/Rating/Rating.js index 0bdc81e0b81c0f..d6b5f761603982 100644 --- a/packages/mui-material/src/Rating/Rating.js +++ b/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 ( = + function CustomComponent() { + return
; + }; + +const children: React.ReactNode =
; + +function RatingTest() { + return ( +
+ + + + {children} + { + expectType(value); + expectType(event); + }} + /> + + { + expectType, typeof event>(event); + }} + /> + + {/* @ts-expect-error missing stringProp and numberProp */} + +
+ ); +} diff --git a/packages/mui-material/src/Rating/Rating.test.js b/packages/mui-material/src/Rating/Rating.test.js index 5e8f8e948f7216..7c84b7e72ce4fb 100644 --- a/packages/mui-material/src/Rating/Rating.test.js +++ b/packages/mui-material/src/Rating/Rating.test.js @@ -18,7 +18,7 @@ describe('', () => { testDeepOverrides: { slotName: 'label', slotClassName: classes.label }, testStateOverrides: { prop: 'size', value: 'small', styleKey: 'sizeSmall' }, refInstanceof: window.HTMLSpanElement, - skip: ['componentProp', 'componentsProp'], + skip: ['componentsProp'], })); it('should render', () => {