@progress/kendo-react-layout/actionsheet/ActionSheet.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 { ActionSheetItemProps } from './interfaces/ActionSheetItemProps';
import * as React from 'react';
/**
 * Specifies the animation duration settings of the ActionSheet.
 *
 */
export interface ActionSheetAnimationDuration {
    /**
     * Specifies the opening duration of the ActionSheet animation.
     */
    openDuration?: number;
    /**
     * Specifies the closing duration of the ActionSheet animation.
     */
    closeDuration?: number;
}
/**
 * The props of the ActionSheet component.
 */
export interface ActionSheetProps {
    /**
     * The collection of items that will be rendered in the ActionSheet.
     *
     * @example
     * ```jsx
     * const items = [{ text: 'Item 1' }, { text: 'Item 2' }];
     * <ActionSheet items={items} />
     * ```
     */
    items?: ActionSheetItemProps[];
    /**
     * Specifies the text that is rendered under the title.
     *
     * @example
     * ```jsx
     * <ActionSheet subTitle="Subtitle text" />
     * ```
     */
    subTitle?: React.ReactNode;
    /**
     * Specifies the text that is rendered as title.
     *
     * @example
     * ```jsx
     * <ActionSheet title="Title text" />
     * ```
     */
    title?: React.ReactNode;
    /**
     * Fires when the modal overlay is clicked.
     *
     * @example
     * ```jsx
     * <ActionSheet onClose={(e) => console.log('Overlay clicked')} />
     * ```
     */
    onClose?: (event: React.SyntheticEvent) => void;
    /**
     * Fires when an ActionSheet item is clicked.
     *
     * @example
     * ```jsx
     * <ActionSheet onItemSelect={(e) => console.log(e.item)} />
     * ```
     */
    onItemSelect?: (event: {
        syntheticEvent: React.SyntheticEvent;
        title?: string;
        item?: any;
    }) => void;
    /**
     * Represents the children that are passed to the ActionSheet.
     *
     * @hidden
     */
    children?: any;
    /**
     * Specifies the `tabIndex` of the ActionSheet.
     *
     * @example
     * ```jsx
     * <ActionSheet tabIndex={0} />
     * ```
     */
    tabIndex?: number;
    /**
     * Specifies if the ActionSheet can be navigatable with keyboard.
     * Defaults to `true`.
     *
     * @default true
     * @example
     * ```jsx
     * <ActionSheet navigatable={false} />
     * ```
     */
    navigatable?: boolean;
    /**
     * Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.
     *
     * @default []
     * @example
     * ```jsx
     * <ActionSheet navigatableElements={['.custom-class']} />
     * ```
     */
    navigatableElements?: string[];
    /**
     * Controls the popup animation. By default, the open and close animations are disabled.
     *
     * @example
     * ```jsx
     * <ActionSheet animation={true} />
     * ```
     */
    animation?: boolean;
    /**
     * @hidden
     */
    animationStyles?: React.CSSProperties;
    /**
     * Specifies the duration of the transition for the entering and closing Animation. Defaults to `300ms`.
     *
     * @example
     * ```jsx
     * <ActionSheet animationDuration={500} />
     * ```
     */
    animationDuration?: number | ActionSheetAnimationDuration;
    /**
     * The CSS classes that will be rendered on the inner ActionSheet element.
     *
     * @example
     * ```jsx
     * <ActionSheet className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Specifies the state of the ActionSheet.
     *
     * @example
     * ```jsx
     * <ActionSheet expand={true} />
     * ```
     */
    expand?: boolean;
    /**
     * Specifies the position of the ActionSheet.
     *
     * @default 'bottom'
     * @example
     * ```jsx
     * <ActionSheet position="top" />
     * ```
     */
    position?: 'top' | 'bottom' | 'left' | 'right' | 'fullscreen';
    /**
     * Specifies the actions rendered at the start of the header.
     *
     * @example
     * ```jsx
     * <ActionSheet prefixActions={<Button>Action</Button>} />
     * ```
     */
    prefixActions?: React.ReactNode;
    /**
     * Specifies the actions rendered at the end of the header.
     *
     * @example
     * ```jsx
     * <ActionSheet suffixActions={<Button>Action</Button>} />
     * ```
     */
    suffixActions?: React.ReactNode;
    /**
     * @hidden
     */
    filter?: React.ReactNode;
    /**
     * Specifies the styles of the ActionSheet component.
     */
    style?: React.CSSProperties;
    /**
     * Specifies the container element where the ActionSheet will be appended.
     * Defaults to `null` (renders in place). Set to a DOM element (e.g. `document.body`)
     * to escape CSS containing blocks created by `transform`, `backdrop-filter`, etc.
     *
     * @default null
     * @example
     * ```jsx
     * <ActionSheet appendTo={document.body} />
     * ```
     */
    appendTo?: HTMLElement | null;
}
/**
 * @hidden
 */
export interface ActionSheetState {
    show?: boolean;
    slide?: boolean;
}
/**
 * Represent the `ref` of the ActionSheet component.
 */
export interface ActionSheetHandle {
    /**
     * The props of the ActionSheet component.
     */
    props: ActionSheetProps;
    /**
     * The HTML element of the ActionSheet component.
     */
    element?: HTMLDivElement;
}
/**
 * Represents the [KendoReact ActionSheet](https://www.telerik.com/kendo-react-ui/components/layout/actionsheet) component.
 */
export declare const ActionSheet: React.ForwardRefExoticComponent<ActionSheetProps & React.RefAttributes<ActionSheetHandle | null>>;
/**
 * The default props interface of the ActionSheet component.
 */
export type ActionSheetDefaultPropsType = {
    /**
     * Specifies if the ActionSheet can be navigatable with keyboard.
     * Defaults to `true`.
     *
     * @default true
     */
    navigatable: boolean;
    /**
     * Specifies the selectors of the navigatable elements inside the templates of the ActionSheet.
     *
     * @default []
     */
    navigatableElements: string[];
    /**
     * Specifies the position of the ActionSheet.
     *
     * @default 'bottom'
     */
    position: 'top' | 'bottom' | 'left' | 'right' | 'fullscreen';
};
/**
 * The default props of the ActionSheet component.
 */
export declare const actionSheetDefaultProps: ActionSheetDefaultPropsType;