@progress/kendo-react-layout/drawer/interfaces/DrawerProps.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 { DrawerSelectEvent } from './DrawerSelectEvent';
import { DrawerAnimation } from '../interfaces/DrawerAnimation';
import { DrawerItemProps } from './DrawerItemProps';
import { WebMcpProps } from '@progress/kendo-react-common';
import * as React from 'react';
/**
 * The properties of the [KendoReact Drawer component](https://www.telerik.com/kendo-react-ui/components/layout/drawer).
 */
export interface DrawerProps {
    /**
     * Specifies the animation settings of the Drawer.
     *
     * Example:
     * ```jsx
     * <Drawer animation={{ duration: 300 }} />
     * ```
     *
     * @default true
     */
    animation?: boolean | DrawerAnimation;
    /**
     * Specifies the state of the Drawer
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/drawer/expanded_state)).
     *
     * Example:
     * ```jsx
     * <Drawer expanded={true} />
     * ```
     *
     * @default false
     */
    expanded?: boolean;
    /**
     * Sets the Drawer items declaratively.
     *
     * Example:
     * ```jsx
     * <Drawer>
     *   <DrawerItem text="Home" />
     * </Drawer>
     * ```
     */
    children?: any;
    /**
     * Specifies a list of CSS classes that will be added to the `k-drawer-container` element.
     */
    className?: string;
    /**
     * Specifies a list of CSS classes that will be added to the `k-drawer` element.
     */
    drawerClassName?: string;
    /**
     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
     */
    dir?: string;
    /**
     * Specifies the mode in which the Drawer will be displayed
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/drawer/display_modes#toc-expand-modes)).
     *
     * Example:
     * ```jsx
     * <Drawer mode="push" />
     * ```
     *
     * @default 'overlay'
     */
    mode?: 'overlay' | 'push';
    /**
     * Specifies the position of the Drawer
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/drawer/positioning)).
     *
     * Example:
     * ```jsx
     * <Drawer position="end" />
     * ```
     *
     * @default 'start'
     */
    position?: 'start' | 'end';
    /**
     * Sets additional CSS styles to the Drawer.
     */
    style?: React.CSSProperties;
    /**
     * Sets the `tabIndex` property of the Drawer.
     *
     * Example:
     * ```jsx
     * <Drawer tabIndex={0} />
     * ```
     */
    tabIndex?: number;
    /**
     * Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/drawer/display_modes#toc-mini-view)).
     *
     * Example:
     * ```jsx
     * <Drawer mini={true} />
     * ```
     *
     * @default false
     */
    mini?: boolean;
    /**
     * Defines the width of the Drawer when the mini view is enabled and the component is collapsed.
     *
     * Example:
     * ```jsx
     * <Drawer miniWidth={60} />
     * ```
     *
     */
    miniWidth?: number;
    /**
     * Defines the width of the Drawer when it is expanded.
     *
     * Example:
     * ```jsx
     * <Drawer width={300} />
     * ```
     *
     * @default 240
     */
    width?: number;
    /**
     * The collection of items that will be rendered in the Drawer
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/drawer)).
     *
     * Example:
     * ```jsx
     * <Drawer items={[{ text: 'Home' }, { text: 'Settings' }]} />
     * ```
     */
    items?: Array<DrawerItemProps>;
    /**
     * Overrides the default component responsible for visualizing a single item
     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/drawer/custom_rendering)).
     *
     * Example:
     * ```jsx
     * <Drawer item={CustomDrawerItem} />
     * ```
     */
    item?: React.ComponentType<DrawerItemProps>;
    /**
     * The event handler that will be fired when the overlay is clicked.
     * Used in overlay mode only.
     *
     * Example:
     * ```jsx
     * <Drawer onOverlayClick={(e) => console.log('Overlay clicked')} />
     * ```
     */
    onOverlayClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
    /**
     * Fires when a Drawer item is selected.
     *
     * Example:
     * ```jsx
     * <Drawer onSelect={(e) => console.log('Item selected', e)} />
     * ```
     */
    onSelect?: (event: DrawerSelectEvent) => void;
    /**
     * Enables Web MCP tool registration so AI agents can interact with this Drawer.
     * 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;
}