@progress/kendo-react-layout/panelbar/interfaces/PanelBarProps.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 { PanelBarSelectEventArguments } from '../../index.js';
import { WebMcpProps } from '@progress/kendo-react-common';
/**
 * Represents the expand modes of the KendoReact PanelBar. Defaults to `multiple`.
 */
export type PanelBarExpandMode = 'single' | 'multiple';
/**
 * Represents the props of the [KendoReact PanelBar component](https://www.telerik.com/kendo-react-ui/components/layout/panelbar).
 */
export interface PanelBarProps {
    /**
     * The child can be either a single PanelBarItem or a PanelBarItem array.
     *
     * @example
     * ```jsx
     * <PanelBar>
     *   <PanelBarItem title="Item 1" />
     *   <PanelBarItem title="Item 2" />
     * </PanelBar>
     * ```
     */
    children?: React.ReactNode;
    /**
     * The class name that is set to the PanelBar.
     *
     * @example
     * ```jsx
     * <PanelBar className="custom-panelbar" />
     * ```
     */
    className?: string;
    /**
     * Sets the animation state of the PanelBar.
     *
     * @example
     * ```jsx
     * <PanelBar animation={false} />
     * ```
     *
     * @default true
     */
    animation?: boolean;
    /**
     * Sets the expand mode of the PanelBar ([see example](https://www.telerik.com/kendo-react-ui/components/layout/panelbar/expand-modes)).
     *
     * The available modes are:
     * - `"single"`&mdash;Allows you to expand only one item at a time. The expanding of an item collapses the item that was previously expanded.
     * - `"multiple"`&mdash;Allows you to expand two or more items at a time. Items can also be toggled.
     *
     * @example
     * ```jsx
     * <PanelBar expandMode="single" />
     * ```
     *
     * @default 'multiple'
     */
    expandMode?: PanelBarExpandMode;
    /**
     * Sets the direction of the PanelBar component.
     *
     * @example
     * ```jsx
     * <PanelBar dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * If set, overrides the currently selected property in the PanelBar state. Takes the `id` of the item.
     *
     * @example
     * ```jsx
     * <PanelBar selected="item1" />
     * ```
     */
    selected?: string;
    /**
     * Sets the initial expanded state of the PanelBar. Takes the `id` of the item.
     *
     * @example
     * ```jsx
     * <PanelBar expanded={['item1', 'item2']} />
     * ```
     */
    expanded?: string[];
    /**
     * Sets the initial focused state of the PanelBar. Takes the `id` of the item.
     *
     * @example
     * ```jsx
     * <PanelBar focused="item1" />
     * ```
     */
    focused?: string;
    /**
     * Determines if the PanelBar items will be mounted after expand collapse.
     *
     * @example
     * ```jsx
     * <PanelBar keepItemsMounted />
     * ```
     *
     * @default false
     */
    keepItemsMounted?: boolean;
    /**
     * Determines if the PanelBar is going to be used in controlled state.
     *
     * @example
     * ```jsx
     * <PanelBar isControlled />
     * ```
     *
     * @default false
     */
    isControlled?: boolean;
    /**
     * Fires each time the user makes a selection ([see example](https://www.telerik.com/kendo-react-ui/components/layout/panelbar/controlling-state)).
     *
     * @example
     * ```jsx
     * <PanelBar onSelect={(event) => console.log(event.item)} />
     * ```
     */
    onSelect?: (event: PanelBarSelectEventArguments) => void;
    /**
     * Sets additional CSS styles to the PanelBar.
     *
     * @example
     * ```jsx
     * <PanelBar style={{ backgroundColor: 'lightblue' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Enables Web MCP tool registration so AI agents can interact with this PanelBar.
     * Set to `true` to use the provider-level `dataName`, or pass a config object to override.
     *
     * Requires a `WebMcpProvider` ancestor from `@progress/kendo-react-webmcp`.
     */
    webMcp?: boolean | WebMcpProps;
}