@mantine/core/lib/components/Accordion/Accordion.d.ts

React components library focused on usability, accessibility and developer experience

import { BoxProps, ElementProps, Factory, MantineRadius, StylesApiProps } from '../../core';
import { AccordionChevronPosition, AccordionHeadingOrder, AccordionValue } from './Accordion.types';
import { AccordionChevron } from './AccordionChevron';
import { AccordionControl } from './AccordionControl/AccordionControl';
import { AccordionItem } from './AccordionItem/AccordionItem';
import { AccordionPanel } from './AccordionPanel/AccordionPanel';
export type AccordionStylesNames = 'root' | 'content' | 'item' | 'panel' | 'icon' | 'chevron' | 'label' | 'itemTitle' | 'control';
export type AccordionVariant = 'default' | 'contained' | 'filled' | 'separated';
export type AccordionCssVariables = {
    root: '--accordion-transition-duration' | '--accordion-chevron-size' | '--accordion-radius';
};
export interface AccordionProps<Multiple extends boolean = false> extends BoxProps, StylesApiProps<AccordionFactory>, ElementProps<'div', 'value' | 'defaultValue' | 'onChange'> {
    /** If set, multiple items can be opened at the same time */
    multiple?: Multiple;
    /** Controlled component value */
    value?: AccordionValue<Multiple>;
    /** Uncontrolled component default value */
    defaultValue?: AccordionValue<Multiple>;
    /** Called when value changes, payload type depends on `multiple` prop */
    onChange?: (value: AccordionValue<Multiple>) => void;
    /** If set, arrow keys loop through items (first to last and last to first) @default true */
    loop?: boolean;
    /** Transition duration in ms @default 200 */
    transitionDuration?: number;
    /** If set, chevron rotation is disabled */
    disableChevronRotation?: boolean;
    /** Position of the chevron relative to the item label @default right */
    chevronPosition?: AccordionChevronPosition;
    /** Size of the chevron icon container @default auto */
    chevronSize?: number | string;
    /** Size of the default chevron icon. Ignored when `chevron` prop is set. Use `chevronSize` instead when using custom chevron. @default 16 */
    chevronIconSize?: number | string;
    /** Sets heading level (h2-h6) for `Accordion.Control` elements to meet WAI-ARIA requirements. Has no visual effect. */
    order?: AccordionHeadingOrder;
    /** Custom chevron icon */
    chevron?: React.ReactNode;
    /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius */
    radius?: MantineRadius;
    /** If set to `false`, panels are unmounted when collapsed. By default, panels stay mounted when collapsed. */
    keepMounted?: boolean;
}
export type AccordionFactory = Factory<{
    props: AccordionProps;
    ref: HTMLDivElement;
    stylesNames: AccordionStylesNames;
    vars: AccordionCssVariables;
    variant: AccordionVariant;
    signature: <Multiple extends boolean = false>(props: AccordionProps<Multiple>) => React.JSX.Element;
    staticComponents: {
        Item: typeof AccordionItem;
        Panel: typeof AccordionPanel;
        Control: typeof AccordionControl;
        Chevron: typeof AccordionChevron;
    };
}>;
export declare const Accordion: (<Multiple extends boolean = false>(props: AccordionProps<Multiple>) => React.JSX.Element) & import("../..").ThemeExtend<{
    props: AccordionProps;
    ref: HTMLDivElement;
    stylesNames: AccordionStylesNames;
    vars: AccordionCssVariables;
    variant: AccordionVariant;
    signature: <Multiple extends boolean = false>(props: AccordionProps<Multiple>) => React.JSX.Element;
    staticComponents: {
        Item: typeof AccordionItem;
        Panel: typeof AccordionPanel;
        Control: typeof AccordionControl;
        Chevron: typeof AccordionChevron;
    };
}> & import("../..").ComponentClasses<{
    props: AccordionProps;
    ref: HTMLDivElement;
    stylesNames: AccordionStylesNames;
    vars: AccordionCssVariables;
    variant: AccordionVariant;
    signature: <Multiple extends boolean = false>(props: AccordionProps<Multiple>) => React.JSX.Element;
    staticComponents: {
        Item: typeof AccordionItem;
        Panel: typeof AccordionPanel;
        Control: typeof AccordionControl;
        Chevron: typeof AccordionChevron;
    };
}> & {
    Item: typeof AccordionItem;
    Panel: typeof AccordionPanel;
    Control: typeof AccordionControl;
    Chevron: typeof AccordionChevron;
} & {
    varsResolver: import("../..").VarsResolver<{
        props: AccordionProps;
        ref: HTMLDivElement;
        stylesNames: AccordionStylesNames;
        vars: AccordionCssVariables;
        variant: AccordionVariant;
        signature: <Multiple extends boolean = false>(props: AccordionProps<Multiple>) => React.JSX.Element;
        staticComponents: {
            Item: typeof AccordionItem;
            Panel: typeof AccordionPanel;
            Control: typeof AccordionControl;
            Chevron: typeof AccordionChevron;
        };
    }>;
} & import("../..").FactoryComponentWithProps<{
    props: AccordionProps;
    ref: HTMLDivElement;
    stylesNames: AccordionStylesNames;
    vars: AccordionCssVariables;
    variant: AccordionVariant;
    signature: <Multiple extends boolean = false>(props: AccordionProps<Multiple>) => React.JSX.Element;
    staticComponents: {
        Item: typeof AccordionItem;
        Panel: typeof AccordionPanel;
        Control: typeof AccordionControl;
        Chevron: typeof AccordionChevron;
    };
}> & {
    displayName?: string;
};