diff --git a/packages/mui-material/src/Accordion/Accordion.d.ts b/packages/mui-material/src/Accordion/Accordion.d.ts index 01800d8d96983a..bab72ffa4308f3 100644 --- a/packages/mui-material/src/Accordion/Accordion.d.ts +++ b/packages/mui-material/src/Accordion/Accordion.d.ts @@ -1,64 +1,71 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; -import { InternalStandardProps as StandardProps, Theme } from '..'; +import { Theme } from '..'; import { TransitionProps } from '../transitions/transition'; -import { PaperProps } from '../Paper'; import { AccordionClasses } from './accordionClasses'; +import { OverridableComponent, OverrideProps } from '../OverridableComponent'; +import { ExtendPaperTypeMap } from '../Paper/Paper'; -export interface AccordionProps extends StandardProps { - /** - * The content of the component. - */ - children: NonNullable; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * If `true`, expands the accordion by default. - * @default false - */ - defaultExpanded?: boolean; - /** - * If `true`, the component is disabled. - * @default false - */ - disabled?: boolean; - /** - * If `true`, it removes the margin between two expanded accordion items and the increase of height. - * @default false - */ - disableGutters?: boolean; - /** - * If `true`, expands the accordion, otherwise collapse it. - * Setting this prop enables control over the accordion. - */ - expanded?: boolean; - /** - * Callback fired when the expand/collapse state is changed. - * - * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event. - * @param {boolean} expanded The `expanded` state of the accordion. - */ - onChange?: (event: React.SyntheticEvent, expanded: boolean) => void; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; - /** - * The component used for the transition. - * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. - * @default Collapse - */ - TransitionComponent?: React.JSXElementConstructor< - TransitionProps & { children?: React.ReactElement } - >; - /** - * Props applied to the transition element. - * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. - */ - TransitionProps?: TransitionProps; -} +export type AccordionTypeMap

= ExtendPaperTypeMap< + { + props: P & { + /** + * The content of the component. + */ + children: NonNullable; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, expands the accordion by default. + * @default false + */ + defaultExpanded?: boolean; + /** + * If `true`, the component is disabled. + * @default false + */ + disabled?: boolean; + /** + * If `true`, it removes the margin between two expanded accordion items and the increase of height. + * @default false + */ + disableGutters?: boolean; + /** + * If `true`, expands the accordion, otherwise collapse it. + * Setting this prop enables control over the accordion. + */ + expanded?: boolean; + /** + * Callback fired when the expand/collapse state is changed. + * + * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event. + * @param {boolean} expanded The `expanded` state of the accordion. + */ + onChange?: (event: React.SyntheticEvent, expanded: boolean) => void; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + /** + * The component used for the transition. + * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. + * @default Collapse + */ + TransitionComponent?: React.JSXElementConstructor< + TransitionProps & { children?: React.ReactElement } + >; + /** + * Props applied to the transition element. + * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. + */ + TransitionProps?: TransitionProps; + }; + defaultComponent: D; + }, + 'onChange' | 'classes' +>; /** * @@ -71,4 +78,11 @@ export interface AccordionProps extends StandardProps { * - [Accordion API](https://mui.com/material-ui/api/accordion/) * - inherits [Paper API](https://mui.com/material-ui/api/paper/) */ -export default function Accordion(props: AccordionProps): JSX.Element; +declare const Accordion: OverridableComponent; + +export type AccordionProps< + D extends React.ElementType = AccordionTypeMap['defaultComponent'], + P = {}, +> = OverrideProps, D>; + +export default Accordion; diff --git a/packages/mui-material/src/Accordion/Accordion.spec.tsx b/packages/mui-material/src/Accordion/Accordion.spec.tsx index 529b52e6cb3588..6c473cd6161026 100644 --- a/packages/mui-material/src/Accordion/Accordion.spec.tsx +++ b/packages/mui-material/src/Accordion/Accordion.spec.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import Accordion from '@mui/material/Accordion'; +import { expectType } from '@mui/types'; function testOnChange() { function handleAccordionChange(event: React.SyntheticEvent, tabsValue: unknown) {} @@ -15,3 +16,38 @@ function testOnChange() {

; } + +const CustomComponent: React.FC<{ prop1: string; prop2: number }> = function CustomComponent() { + return
; +}; + +const requiredProps = { + children:
, +}; + +const AccordionComponentTest = () => { + return ( +
+ + + { + expectType, typeof event>(event); + }} + /> + + {/* @ts-expect-error */} + + {/* @ts-expect-error */} + + + {/* @ts-expect-error */} + + {/* @ts-expect-error */} + +
+ ); +}; diff --git a/packages/mui-material/src/Paper/Paper.d.ts b/packages/mui-material/src/Paper/Paper.d.ts index d6433bfb764713..3fdf79c2528e79 100644 --- a/packages/mui-material/src/Paper/Paper.d.ts +++ b/packages/mui-material/src/Paper/Paper.d.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; import { Theme } from '../styles'; -import { OverrideProps, OverridableComponent } from '../OverridableComponent'; +import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent'; import { PaperClasses } from './paperClasses'; export interface PaperPropsVariantOverrides {} @@ -54,6 +54,11 @@ export interface PaperTypeMap

{ */ declare const Paper: OverridableComponent; +export interface ExtendPaperTypeMap { + props: M['props'] & Omit; + defaultComponent: M['defaultComponent']; +} + export type PaperProps< D extends React.ElementType = PaperTypeMap['defaultComponent'], P = {},