@progress/kendo-react-layout/expansionpanel/interfaces.d.ts

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { BaseEvent, SVGIcon } from '@progress/kendo-react-common';
/**
 * The ExpansionPanel ref.
 */
export interface ExpansionPanelHandle {
    /**
     * The ExpansionPanel element.
     */
    element: HTMLDivElement | null;
}
/**
 * The arguments for the `onAction` ExpansionPanel event.
 */
export interface ExpansionPanelActionEvent extends BaseEvent<ExpansionPanelHandle> {
    /**
     * Represents the `expanded` state of the ExpansionPanel.
     */
    expanded: boolean;
}
/**
 * The props of the ExpansionPanel component.
 */
export interface ExpansionPanelProps {
    /**
     * The React elements that will be rendered inside the ExpansionPanel.
     */
    children?: React.ReactNode;
    /**
     * Sets additional CSS classes to the ExpansionPanel.
     */
    className?: string;
    /**
     * Sets additional CSS styles to the ExpansionPanel.
     */
    style?: React.CSSProperties;
    /**
     * Sets the `id` property of the root ExpansionPanel element.
     */
    id?: string;
    /**
     * Specifies the primary text in the header of the ExpansionPanel.
     */
    title?: React.ReactNode;
    /**
     * Specifies the secondary text in the header of the ExpansionPanel, which is rendered next to the collapse/expand icon.
     */
    subtitle?: React.ReactNode;
    /**
     * Sets a custom icon via css class(es), for the expanded state of the ExpansionPanel.
     */
    expandIcon?: string;
    /**
     * Sets a custom icon via css class(es), for the collapsed state of the ExpansionPanel.
     */
    collapseIcon?: string;
    /**
     * Sets a custom SVG icon for the expanded state of the ExpansionPanel.
     */
    expandSVGIcon?: SVGIcon;
    /**
     * Sets a custom SVG icon for the collapsed state of the ExpansionPanel.
     */
    collapseSVGIcon?: SVGIcon;
    /**
     * Sets the `dir` property of the ExpansionPanel.
     */
    dir?: string;
    /**
     * Sets the `tabIndex` property of the ExpansionPanel.
     */
    tabIndex?: number;
    /**
     * Sets the `expanded` state of the ExpansionPanel.
     *
     * @default false
     */
    expanded?: boolean;
    /**
     * Sets the `disabled` state of the ExpansionPanel.
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * Sets `aria-controls`. The value should represent the `id` of the controlled content element.
     */
    ariaControls?: string;
    /**
     * The event handler that will be fired when the expanded state of the ExpansionPanel is about to change.
     */
    onAction?: (event: ExpansionPanelActionEvent) => void;
}