diff --git a/packages/mui-material/src/Slider/Slider.d.ts b/packages/mui-material/src/Slider/Slider.d.ts index b383a43b00352a..288eca0cdee481 100644 --- a/packages/mui-material/src/Slider/Slider.d.ts +++ b/packages/mui-material/src/Slider/Slider.d.ts @@ -20,7 +20,7 @@ export interface SliderOwnerState extends SliderProps { focusedThumbIndex: number; } -export interface SliderOwnProps { +export interface SliderOwnProps { /** * The label of the slider. */ @@ -317,18 +317,19 @@ export interface SliderOwnProps { export interface SliderTypeMap< RootComponent extends React.ElementType = 'span', AdditionalProps = {}, - Value extends number | number[] = number | number[], + Value extends number | readonly number[] = number | number[], > { props: AdditionalProps & SliderOwnProps; defaultComponent: RootComponent; } -export type SliderComponent = OverridableComponent< +export type SliderComponent = OverridableComponent< SliderTypeMap<'span', {}, Value> >; export type SliderType = SliderComponent & SliderComponent & + SliderComponent & SliderComponent; export interface SliderValueLabelProps extends React.HTMLAttributes { @@ -368,7 +369,8 @@ declare const Slider: SliderType; export type SliderProps< RootComponent extends React.ElementType = SliderTypeMap['defaultComponent'], AdditionalProps = {}, -> = OverrideProps, RootComponent> & { + Value extends number | readonly number[] = number | number[], +> = OverrideProps, RootComponent> & { component?: React.ElementType | undefined; }; diff --git a/packages/mui-material/src/Slider/Slider.spec.tsx b/packages/mui-material/src/Slider/Slider.spec.tsx index e67ec81db65454..5205ee044041d0 100644 --- a/packages/mui-material/src/Slider/Slider.spec.tsx +++ b/packages/mui-material/src/Slider/Slider.spec.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import Slider from '@mui/material/Slider'; +import type { SliderProps } from '@mui/material/Slider'; function testOnChange() { function handleSliderChange(event: Event, value: unknown) {} @@ -82,6 +83,19 @@ function testOnChange() { onChange={(event, value: number[]) => {}} onChangeCommitted={(event, value: number[]) => {}} />; +const values = [5, 10] as const; + {}} + onChangeCommitted={(event, value: readonly number[]) => {}} +/>; + +const sliderProps: SliderProps<'span', {}, readonly number[]> = { + value: values, + onChange: (event, value: readonly number[]) => {}, + onChangeCommitted: (event, value: readonly number[]) => {}, +}; +; const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = function CustomComponent() {