UNPKG

4.32 kBTypeScriptView Raw
1import * as React from 'react';
2import { SxProps } from '@mui/system';
3import { Theme } from '..';
4import { TransitionProps } from '../transitions/transition';
5import { AccordionClasses } from './accordionClasses';
6import { OverridableComponent, OverrideProps } from '../OverridableComponent';
7import { ExtendPaperTypeMap } from '../Paper/Paper';
8import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
9
10export interface AccordionSlots {
11 /**
12 * The component that renders the heading.
13 * @default 'h3'
14 */
15 heading: React.ElementType;
16 /**
17 * The component that renders the transition.
18 * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
19 * @default Collapse
20 */
21 transition: React.JSXElementConstructor<
22 TransitionProps & { children?: React.ReactElement<unknown, any> }
23 >;
24}
25
26export interface AccordionTransitionSlotPropsOverrides {}
27export interface AccordionHeadingSlotPropsOverrides {}
28
29export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<
30 AccordionSlots,
31 {
32 heading: SlotProps<
33 React.ElementType<React.HTMLProps<HTMLHeadingElement>>,
34 AccordionHeadingSlotPropsOverrides,
35 AccordionOwnerState
36 >;
37 transition: SlotProps<
38 React.ElementType<TransitionProps>,
39 AccordionTransitionSlotPropsOverrides,
40 AccordionOwnerState
41 >;
42 }
43>;
44
45export type AccordionTypeMap<
46 AdditionalProps = {},
47 RootComponent extends React.ElementType = 'div',
48> = ExtendPaperTypeMap<
49 {
50 props: AdditionalProps & {
51 /**
52 * The content of the component.
53 */
54 children: NonNullable<React.ReactNode>;
55 /**
56 * Override or extend the styles applied to the component.
57 */
58 classes?: Partial<AccordionClasses>;
59 /**
60 * If `true`, expands the accordion by default.
61 * @default false
62 */
63 defaultExpanded?: boolean;
64 /**
65 * If `true`, the component is disabled.
66 * @default false
67 */
68 disabled?: boolean;
69 /**
70 * If `true`, it removes the margin between two expanded accordion items and the increase of height.
71 * @default false
72 */
73 disableGutters?: boolean;
74 /**
75 * If `true`, expands the accordion, otherwise collapse it.
76 * Setting this prop enables control over the accordion.
77 */
78 expanded?: boolean;
79 /**
80 * Callback fired when the expand/collapse state is changed.
81 *
82 * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
83 * @param {boolean} expanded The `expanded` state of the accordion.
84 */
85 onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
86 /**
87 * The system prop that allows defining system overrides as well as additional CSS styles.
88 */
89 sx?: SxProps<Theme>;
90 /**
91 * The component used for the transition.
92 * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
93 */
94 TransitionComponent?: React.JSXElementConstructor<
95 TransitionProps & { children?: React.ReactElement<unknown, any> }
96 >;
97 /**
98 * Props applied to the transition element.
99 * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
100 */
101 TransitionProps?: TransitionProps;
102 } & AccordionSlotsAndSlotProps;
103 defaultComponent: RootComponent;
104 },
105 'onChange' | 'classes'
106>;
107
108/**
109 *
110 * Demos:
111 *
112 * - [Accordion](https://mui.com/material-ui/react-accordion/)
113 *
114 * API:
115 *
116 * - [Accordion API](https://mui.com/material-ui/api/accordion/)
117 * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
118 */
119declare const Accordion: OverridableComponent<AccordionTypeMap>;
120
121export type AccordionProps<
122 RootComponent extends React.ElementType = AccordionTypeMap['defaultComponent'],
123 AdditionalProps = {},
124> = OverrideProps<AccordionTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
125 component?: React.ElementType;
126};
127
128export interface AccordionOwnerState extends AccordionProps {}
129
130export default Accordion;