diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts index 6992ed7e08cc73..5a3fbc86bcc4f8 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts +++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts @@ -18,6 +18,9 @@ import useAutocomplete, { import { AutocompleteClasses } from './autocompleteClasses'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; +export interface AutocompletePaperSlotPropsOverrides {} +export interface AutocompletePopperSlotPropsOverrides {} + export { AutocompleteChangeDetails, AutocompleteChangeReason, @@ -94,12 +97,12 @@ export interface AutocompleteSlots { * The component used to render the body of the popup. * @default Paper */ - paper: React.JSXElementConstructor; + paper: React.JSXElementConstructor; /** * The component used to position the popup. * @default Popper */ - popper: React.JSXElementConstructor; + popper: React.JSXElementConstructor; } export type AutocompleteSlotsAndSlotProps< @@ -134,15 +137,14 @@ export type AutocompleteSlotsAndSlotProps< {}, AutocompleteOwnerState >; - paper: SlotProps< React.ElementType>, - {}, + AutocompletePaperSlotPropsOverrides, AutocompleteOwnerState >; popper: SlotProps< React.ElementType>, - {}, + AutocompletePopperSlotPropsOverrides, AutocompleteOwnerState >; popupIndicator: SlotProps< diff --git a/packages/mui-material/test/typescript/moduleAugmentation/autocompleteCustomSlotProps.spec.tsx b/packages/mui-material/test/typescript/moduleAugmentation/autocompleteCustomSlotProps.spec.tsx new file mode 100644 index 00000000000000..60f35df2c18866 --- /dev/null +++ b/packages/mui-material/test/typescript/moduleAugmentation/autocompleteCustomSlotProps.spec.tsx @@ -0,0 +1,85 @@ +import * as React from 'react'; +import Autocomplete from '@mui/material/Autocomplete'; +import Button from '@mui/material/Button'; +import Paper, { PaperProps } from '@mui/material/Paper'; +import Popper, { PopperProps } from '@mui/material/Popper'; +import TextField from '@mui/material/TextField'; + +declare module '@mui/material/Autocomplete' { + interface AutocompletePaperSlotPropsOverrides { + value: Option[]; + } + interface AutocompletePopperSlotPropsOverrides { + value: Option[]; + } +} + +function CustomPaper({ children, value, ...paperProps }: PaperProps & { value: Option[] }) { + return ( + event.preventDefault()}> + {children} + + + ); +} + +function CustomPopper({ children, value, ...popperProps }: PopperProps & { value: Option[] }) { + return ( + + {children as React.ReactNode} + + + ); +} + +interface Option { + title: string; + year: number; +} + +function App() { + const [value, setValue] = React.useState([]); + + return ( + + {/* Testing Paper slot */} + option.title === valueParam.title} + renderInput={(params) => } + onChange={(event, newValue) => { + setValue(newValue); + }} + getOptionLabel={(option) => `(${option?.year}) ${option?.title}`} + options={[...topFilms]} + value={value} + slots={{ paper: CustomPaper }} + slotProps={{ paper: { value } }} + /> + {/* Testing Popper slot */} + option.title === valueParam.title} + renderInput={(params) => } + onChange={(event, newValue) => { + setValue(newValue); + }} + getOptionLabel={(option) => `(${option?.year}) ${option?.title}`} + options={[...topFilms]} + value={value} + slots={{ popper: CustomPopper }} + slotProps={{ popper: { value } }} + /> + + ); +} + +const topFilms = [ + { title: 'The Shawshank Redemption', year: 1994 }, + { title: 'The Godfather', year: 1972 }, + { title: 'The Godfather: Part II', year: 1974 }, + { title: 'The Dark Knight', year: 2008 }, + { title: '12 Angry Men', year: 1957 }, + { title: "Schindler's List", year: 1993 }, + { title: 'Pulp Fiction', year: 1994 }, +]; diff --git a/packages/mui-material/test/typescript/moduleAugmentation/autocompleteCustomSlotProps.tsconfig.json b/packages/mui-material/test/typescript/moduleAugmentation/autocompleteCustomSlotProps.tsconfig.json new file mode 100644 index 00000000000000..0ea52e3b96bbce --- /dev/null +++ b/packages/mui-material/test/typescript/moduleAugmentation/autocompleteCustomSlotProps.tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../../../tsconfig.json", + "files": ["autocompleteCustomSlotProps.spec.tsx"] +}