@progress/kendo-react-layout/index.d.mts

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

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { BaseEvent } from '@progress/kendo-react-common';
import { ButtonProps } from '@progress/kendo-react-buttons';
import { default as default_2 } from 'prop-types';
import { default as default_3 } from 'react';
import { ForwardRefExoticComponent } from 'react';
import { JSX } from 'react/jsx-runtime';
import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
import { Navigation } from '@progress/kendo-react-common';
import { Offset } from '@progress/kendo-react-popup';
import { PopupAnimation } from '@progress/kendo-react-popup';
import * as React_2 from 'react';
import { RefAttributes } from 'react';
import { SVGIcon } from '@progress/kendo-react-common';

/**
 * Represents the [KendoReact ActionSheet]({% slug overview_actionsheet %}) component.
 */
export declare const ActionSheet: React_2.ForwardRefExoticComponent<ActionSheetProps & React_2.RefAttributes<ActionSheetHandle | null>>;

/**
 * Lists the possible alignment of the ActionSheet action buttons.
 */
export declare type ActionSheetActionsAlignment = 'start' | 'center' | 'end' | 'stretched' | 'justify';

/**
 * Lists the possible orientations of the ActionSheet action buttons.
 */
export declare type ActionSheetActionsOrientation = 'horizontal' | 'vertical';

/**
 * Specifies the animation duration settings of the ActionSheet.
 *
 */
export declare interface ActionSheetAnimationDuration {
    /**
     * Specifies the opening duration of the ActionSheet animation.
     */
    openDuration?: number;
    /**
     * Specifies the closing duration of the ActionSheet animation.
     */
    closeDuration?: number;
}

/**
 * @hidden
 */
declare interface ActionSheetChildrenProps {
    /**
     * ClassName of the rendered element.
     */
    className?: any;
    /**
     * Represents the children that are passed to the ActionSheet.
     */
    children?: any;
}

/**
 * The KendoReact ActionSheetContent component.
 */
export declare const ActionSheetContent: React_2.FunctionComponent<ActionSheetChildrenProps>;

/**
 * The default props of the ActionSheet component.
 */
export declare const actionSheetDefaultProps: ActionSheetDefaultPropsType;

/**
 * The default props interface of the ActionSheet component.
 */
export declare 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 KendoReact ActionSheetFooter component.
 */
export declare const ActionSheetFooter: React_2.FunctionComponent<ActionSheetFooterProps>;

/**
 * The props of the ActionSheetFooter component.
 */
export declare interface ActionSheetFooterProps extends ActionSheetChildrenProps {
    /**
     * Sets the orientation of the action buttons in the footer. Valid values are `"horizontal"` and `"vertical"`.
     *
     * @default "horizontal"
     */
    actionButtonsOrientation?: ActionSheetActionsOrientation;
    /**
     * Sets the alignment of the action buttons in the footer. This configuration works only in `horizontal` orientation.
     *
     * @default "stretched"
     */
    actionButtonsAlignment?: ActionSheetActionsAlignment;
}

/**
 * Represent the `ref` of the ActionSheet component.
 */
export declare interface ActionSheetHandle {
    /**
     * The props of the ActionSheet component.
     */
    props: ActionSheetProps;
    /**
     * The HTML element of the ActionSheet component.
     */
    element?: HTMLDivElement;
}

/**
 * The KendoReact ActionSheetHeader component.
 */
export declare const ActionSheetHeader: React_2.FunctionComponent<ActionSheetChildrenProps>;

/**
 * The KendoReact ActionSheetItem component.
 */
export declare const ActionSheetItem: React_2.FunctionComponent<ActionSheetItemProps>;

/**
 * Represents the props of the KendoReact ActionSheet component.
 */
export declare interface ActionSheetItemProps {
    /**
     * Sets additional CSS classes to the ActionSheet.
     */
    className?: string;
    /**
     * Sets additional CSS styles to the ActionSheet.
     */
    style?: React_2.CSSProperties;
    /**
     * **Deprecated**. Specifies the `tabIndex` of the ActionSheetItem.
     *
     * Set the tabIndex to the ActionSheet component instead.
     *
     * @deprecated
     */
    tabIndex?: number;
    /**
     * Specifies additional text rendered under the item's title.
     */
    description?: string;
    /**
     * Specifies if the ActionSheet item is initially disabled.
     */
    disabled?: boolean;
    /**
     * Defines the group of the item. Items can be segregated in two groups - `top` and `bottom`.
     * Each specifying whether the ActionSheet item will be rendered over the separator or under it.
     */
    group?: 'top' | 'bottom';
    /**
     * Defines the icon rendered inside the ActionSheet item.
     */
    icon?: React_2.ReactElement<any>;
    /**
     * Specifies the text content of the ActionSheet item.
     */
    title?: string;
    /**
     * Specifies the ActionSheet item.
     */
    item?: any;
    /**
     * @hidden
     */
    onClick?: (event: {
        syntheticEvent: React_2.SyntheticEvent;
        title?: string;
    }) => void;
    /**
     * @hidden
     */
    onKeyDown?: (event: React_2.SyntheticEvent, title: string | undefined, id: number | undefined) => void;
    /**
     * @hidden
     */
    focused?: boolean;
    /**
     * @hidden
     */
    id?: number;
}

/**
 * The props of the ActionSheet component.
 */
export declare 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_2.ReactNode;
    /**
     * Specifies the text that is rendered as title.
     *
     * @example
     * ```jsx
     * <ActionSheet title="Title text" />
     * ```
     */
    title?: React_2.ReactNode;
    /**
     * **Deprecated**. Fires when the modal overlay is clicked. Use `onClose` event instead.
     *
     * @deprecated
     * @example
     * ```jsx
     * <ActionSheet onOverlayClick={(e) => console.log('Overlay clicked')} />
     * ```
     */
    onOverlayClick?: (event: React_2.SyntheticEvent) => void;
    /**
     * Fires when the modal overlay is clicked.
     *
     * @example
     * ```jsx
     * <ActionSheet onClose={(e) => console.log('Overlay clicked')} />
     * ```
     */
    onClose?: (event: React_2.SyntheticEvent) => void;
    /**
     * Fires when an ActionSheet item is clicked.
     *
     * @example
     * ```jsx
     * <ActionSheet onItemSelect={(e) => console.log(e.item)} />
     * ```
     */
    onItemSelect?: (event: {
        syntheticEvent: React_2.SyntheticEvent;
        title?: string;
        item?: any;
    }) => void;
    /**
     * **Deprecated**. Fires when an ActionSheet item is clicked. Use `onItemSelect` event instead.
     *
     * @deprecated
     * @example
     * ```jsx
     * <ActionSheet onItemClick={(e) => console.log(e.item)} />
     * ```
     */
    onItemClick?: (event: {
        syntheticEvent: React_2.SyntheticEvent;
        title?: string;
        item?: any;
    }) => void;
    /**
     * Represents the children that are passed to the ActionSheet.
     *
     * @example
     * ```jsx
     * <ActionSheet>
     *   <div>Custom Content</div>
     * </ActionSheet>
     * ```
     */
    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_2.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_2.ReactNode;
    /**
     * Specifies the actions rendered at the end of the header.
     *
     * @example
     * ```jsx
     * <ActionSheet suffixActions={<button>Action</button>} />
     * ```
     */
    suffixActions?: React_2.ReactNode;
    /**
     * @hidden
     */
    filter?: React_2.ReactNode;
    /**
     * Specifies the styles of the ActionSheet component.
     */
    style?: React_2.CSSProperties;
}

/**
 * @hidden
 */
export declare interface ActionSheetState {
    show?: boolean;
    slide?: boolean;
}

/**
 * @hidden
 */
export declare const ActionSheetView: default_3.ForwardRefExoticComponent<Omit<any, "ref"> & default_3.RefAttributes<unknown>>;

/**
 * @hidden
 */
export declare const ActionSheetViewDisplayName = "ActionSheetView";

/**
 * @hidden
 */
export declare const addYearsFlags: (eventsData: TimelineEventProps[]) => (TimelineEventProps | yearFlagProps)[];

/**
 * Represents the [KendoReact AppBar component]({% slug overview_appbar %}).
 * Used to display information, actions, branding titles and additional navigation on the current screen.
 *
 * @example
 * ```jsx
 *
 * const App = () => {
 *   return (
 *       <AppBar>
 *           <AppBarSection>
 *               <span className="k-icon k-i-menu" />
 *           </AppBarSection>
 *
 *           <AppBarSpacer style={{ width: 8 }} />
 *
 *           <AppBarSection>
 *               <h1 className="title">{tc.text} AppBar</h1>
 *           </AppBarSection>
 *
 *           <AppBarSpacer />
 *
 *           <AppBarSection>
 *               <BadgeContainer>
 *                   <span className="k-icon k-i-bell" />
 *                   <Badge themeColor="info" shape="dot" />
 *               </BadgeContainer>
 *           </AppBarSection>
 *      </AppBar>
 *   );
 * };
 *    ReactDOM.render(<App />, document.querySelector('my-app'));
 * ```
 */
export declare const AppBar: React_2.ForwardRefExoticComponent<AppBarProps & React_2.RefAttributes<AppBarHandle | null>>;

/**
 * The AppBar ref.
 */
export declare interface AppBarHandle {
    /**
     * The AppBar element.
     */
    element: HTMLDivElement | null;
    /**
     * Focus the AppBar.
     */
    focus: () => void;
}

/**
 * Specifies the position of the AppBar ([see example]({% slug positioning_appbar %}#toc-position)).
 *
 * * The possible values are:
 * * 'top' (Default)
 * * 'bottom'
 *
 */
export declare type AppBarPosition = 'top' | 'bottom';

/**
 * Specifies the positionMode of the AppBar ([see example]({% slug positioning_appbar %}#toc-position-mode)).
 *
 * * The possible values are:
 * * 'static' (Default)
 * * 'sticky'
 * * 'fixed'
 */
export declare type AppBarPositionMode = 'static' | 'sticky' | 'fixed';

/**
 * Represents the props of the [KendoReact AppBar component]({% slug overview_appbar %}).
 * Used to display information, actions, branding titles and additional navigation on the current screen.
 */
export declare interface AppBarProps {
    /**
     * Represents the children that are passed to the AppBar.
     *
     * @example
     * ```jsx
     * <AppBar>
     *   <div>Custom Content</div>
     * </AppBar>
     * ```
     */
    children?: any;
    /**
     * Sets additional CSS classes to the AppBar.
     *
     * @example
     * ```jsx
     * <AppBar className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Sets additional CSS styles to the AppBar.
     *
     * @example
     * ```jsx
     * <AppBar style={{ backgroundColor: 'blue' }} />
     * ```
     */
    style?: React_2.CSSProperties;
    /**
     * Sets the `id` property of the root AppBar element.
     *
     * @example
     * ```jsx
     * <AppBar id="appbar1" />
     * ```
     */
    id?: string;
    /**
     * Specifies the position of the AppBar ([see example]({% slug positioning_appbar %}#toc-position)).
     *
     * * The possible values are:
     * * 'top' (Default)
     * * 'bottom'
     *
     * @example
     * ```jsx
     * <AppBar position="bottom" />
     * ```
     */
    position?: AppBarPosition;
    /**
     * Specifies the positionMode of the AppBar ([see example]({% slug positioning_appbar %}#toc-position-mode)).
     *
     * * The possible values are:
     * * 'static' (Default)
     * * 'sticky'
     * * 'fixed'
     *
     * @example
     * ```jsx
     * <AppBar positionMode="sticky" />
     * ```
     */
    positionMode?: AppBarPositionMode;
    /**
     * Specifies the theme color of the AppBar ([see example]({% slug appearance_appbar %})).
     *
     * * The possible values are:
     * * `light` (Default)
     * * 'primary'
     * * 'secondary'
     * * 'tertiary'
     * * 'info'
     * * 'success'
     * * 'warning'
     * * 'error'
     * * 'dark'
     * * 'inherit'
     * * 'inverse'
     *
     * @example
     * ```jsx
     * <AppBar themeColor="primary" />
     * ```
     */
    themeColor?: AppBarThemeColor;
}

/**
 * Represents the [KendoReact AppBarSection component]({% slug contentarrangement_appbar %}#toc-sections).
 *
 * @example
 * ```jsx
 *
 * const App = () => {
 *   return (
 *       <AppBar>
 *           <AppBarSection>
 *               <span className="k-icon k-i-menu" />
 *           </AppBarSection>
 *
 *           <AppBarSpacer style={{ width: 8 }} />
 *
 *           <AppBarSection>
 *               <h1 className="title">{tc.text} AppBar</h1>
 *           </AppBarSection>
 *
 *           <AppBarSpacer />
 *
 *           <AppBarSection>
 *               <BadgeContainer>
 *                   <span className="k-icon k-i-bell" />
 *                   <Badge themeColor="info" shape="dot" />
 *               </BadgeContainer>
 *           </AppBarSection>
 *      </AppBar>
 *   );
 * };
 *    ReactDOM.render(<App />, document.querySelector('my-app'));
 * ```
 */
export declare const AppBarSection: React_2.ForwardRefExoticComponent<AppBarSectionProps & React_2.RefAttributes<AppBarSectionHandle | null>>;

/**
 * The AppBarSection ref.
 */
export declare interface AppBarSectionHandle {
    /**
     * The AppBarSection element.
     */
    element: HTMLDivElement | null;
    /**
     * Focus the AppBarSection.
     */
    focus: () => void;
}

/**
 * Represents the props of the [KendoReact AppBarSection component]({% slug contentarrangement_appbar %}#toc-sections).
 */
export declare interface AppBarSectionProps {
    /**
     * Represents the children that are passed to the AppBarSection.
     */
    children?: any;
    /**
     * Sets additional CSS classes to the AppBarSection.
     */
    className?: string;
    /**
     * Sets additional CSS styles to the AppBarSection.
     */
    style?: React_2.CSSProperties;
}

/**
 * Represents the [KendoReact AppBarSpacer component]({% slug contentarrangement_appbar %}#toc-spacings).
 * Used to give additional white space between the AppBar sections and provides a way for customizing its width.
 *
 * @example
 * ```jsx
 *
 * const App = () => {
 *   return (
 *       <AppBar>
 *           <AppBarSection>
 *               <span className="k-icon k-i-menu" />
 *           </AppBarSection>
 *
 *           <AppBarSpacer style={{ width: 8 }} />
 *
 *           <AppBarSection>
 *               <h1 className="title">{tc.text} AppBar</h1>
 *           </AppBarSection>
 *
 *           <AppBarSpacer />
 *
 *           <AppBarSection>
 *               <BadgeContainer>
 *                   <span className="k-icon k-i-bell" />
 *                   <Badge themeColor="info" shape="dot" />
 *               </BadgeContainer>
 *           </AppBarSection>
 *      </AppBar>
 *   );
 * };
 *    ReactDOM.render(<App />, document.querySelector('my-app'));
 * ```
 */
export declare const AppBarSpacer: React_2.ForwardRefExoticComponent<AppBarSpacerProps & React_2.RefAttributes<AppBarSpacerHandle | null>>;

/**
 * The AppBarSpacer ref.
 */
export declare interface AppBarSpacerHandle {
    /**
     * The AppBarSpacer element.
     */
    element: HTMLDivElement | null;
    /**
     * Focus the AppBarSpacer.
     */
    focus: () => void;
}

/**
 * Represents the props of the [KendoReact AppBarSpacer component]({% slug contentarrangement_appbar %}#toc-spacings).
 * Used to give additional white space between the AppBar sections and provides a way for customizing its width.
 */
export declare interface AppBarSpacerProps {
    /**
     * Sets additional CSS classes to the AppBarSpacer.
     */
    className?: string;
    /**
     * Sets additional CSS styles to the AppBarSpacer.
     */
    style?: React_2.CSSProperties;
    /**
     * Determines the children nodes.
     */
    children?: React_2.ReactNode;
}

/**
 * Specifies the theme color of the AppBar ([see example]({% slug appearance_appbar %})).
 *
 * * The possible values are:
 * * `light` (Default)
 * * 'primary'
 * * 'secondary'
 * * 'tertiary'
 * * 'info'
 * * 'success'
 * * 'warning'
 * * 'error'
 * * 'dark'
 * * 'inherit'
 * * 'inverse'
 *
 */
export declare type AppBarThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inherit' | 'inverse';

export declare const Avatar: React_2.FunctionComponent<AvatarProps>;

export declare interface AvatarProps {
    /**
     * Sets the Avatar children elements.
     *
     * @example
     * ```jsx
     * <Avatar>AB</Avatar>
     * ```
     */
    children?: React.ReactNode;
    /**
     * Sets additional CSS styles to the Avatar.
     *
     * @example
     * ```jsx
     * <Avatar style={{ backgroundColor: 'blue' }}>AB</Avatar>
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Sets additional classes to the Avatar.
     *
     * @example
     * ```jsx
     * <Avatar className="custom-class">AB</Avatar>
     * ```
     */
    className?: string;
    /**
     * Sets the type of the Avatar.
     *
     * The supported values are:
     * * `image`
     * * `text`
     * * `icon`
     *
     * @example
     * ```jsx
     * <Avatar type="image" src="avatar.jpg" />
     * ```
     */
    type?: avatarType | string;
    /**
     * Configures the `size` of the Avatar.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     * - null&mdash;Does not set a size `className`.
     *
     * @default `medium`
     *
     * @example
     * ```jsx
     * <Avatar size="large">AB</Avatar>
     * ```
     */
    size?: null | 'small' | 'medium' | 'large';
    /**
     * Configures the `roundness` of the Avatar.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     * - full
     * - null&mdash;Does not set a rounded `className`.
     *
     * @default `medium`
     *
     * @example
     * ```jsx
     * <Avatar rounded="full">AB</Avatar>
     * ```
     */
    rounded?: null | 'small' | 'medium' | 'large' | 'full';
    /**
     * Sets a border to the Avatar.
     *
     * @example
     * ```jsx
     * <Avatar border>AB</Avatar>
     * ```
     */
    border?: boolean;
    /**
     * Configures the `fillMode` of the Avatar.
     *
     * The available options are:
     * - solid
     * - outline
     * - null&mdash;Does not set a fillMode `className`.
     *
     * @default `solid`
     *
     * @example
     * ```jsx
     * <Avatar fillMode="outline">AB</Avatar>
     * ```
     */
    fillMode?: null | 'solid' | 'outline';
    /**
     * Configures the `themeColor` of the Avatar.
     *
     * The available options are:
     * - base
     * - primary
     * - secondary
     * - tertiary
     * - info
     * - success
     * - error
     * - warning
     * - dark
     * - light
     * - inverse
     * - null&mdash;Does not set a themeColor `className`.
     *
     * @default `base`
     *
     * @example
     * ```jsx
     * <Avatar themeColor="primary">AB</Avatar>
     * ```
     */
    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'error' | 'warning' | 'dark' | 'light' | 'inverse';
}

export declare enum avatarType {
    TEXT = "text",
    IMAGE = "image",
    ICON = "icon"
}

/**
 * An interface which holds the shared properties of the MenuItemModel and the MenuItem components.
 */
declare interface BaseMenuItem {
    /**
     * Specifies the item text ([see example]({% slug itemproperties_menu %}#toc-text)).
     */
    text?: string;
    /**
     * Specifies a URL which is rendered as a `href` attribute on the item link ([see example]({% slug itemproperties_menu %}#toc-url)).
     */
    url?: string;
    /**
     * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will be rendered for the item ([see example]({% slug itemproperties_menu %}#toc-icon)).
     */
    icon?: string;
    /**
     * Specifies the SVG icon that will be rendered for the item ([see example]({% slug itemproperties_menu %}#toc-icon)).
     */
    svgIcon?: SVGIcon;
    /**
     * Specifies if the item is disabled ([see example]({% slug itemproperties_menu %}#toc-disabled-items)).
     */
    disabled?: boolean;
    /**
     * The additional CSS classes that will be rendered on the item ([see example]({% slug itemproperties_menu %}#toc-styles-and-classes)).
     */
    cssClass?: string;
    /**
     * The CSS styles that will be rendered on the item ([see example]({% slug itemproperties_menu %}#toc-styles-and-classes)).
     */
    cssStyle?: React.CSSProperties;
    /**
     * A React functional or class component which is used for rendering the innermost part of the Menu item ([see example]({% slug rendering_menu %}#toc-items)). By default, the innermost item part includes only the text for the item.
     */
    render?: any;
    /**
     * A React functional or class component which is used for rendering the link of the item ([see example]({% slug rendering_menu %}#toc-links)). The item link is a part of the visual representation of the item which, by default, includes an arrow, icon, and text.
     */
    linkRender?: any;
    /**
     * A React functional or class component which is used for rendering content instead of the item children ([see example]({% slug rendering_menu %}#toc-content)).
     */
    contentRender?: any;
    /**
     * Represents any additional data that is associated with the Menu item.
     */
    data?: any;
    /**
     * @hidden
     */
    children?: React.ReactNode;
    /**
     * Specifies if this is a separator item. If set to true only the `cssClass` and `cssStyle` props should be rendered along.
     */
    separator?: boolean;
}

/**
 * @hidden
 */
declare interface BaseMenuItemInternalProps {
    focusedItemId: string;
    lastItemIdToBeOpened: string;
    tabbableItemId: string;
    itemRender?: any;
    linkRender?: any;
    isMenuVertical: boolean;
    isDirectionRightToLeft?: boolean;
    menuGuid: string;
    onMouseOver: any;
    onMouseLeave: any;
    onMouseDown: any;
    onFocus: any;
    onClick: any;
    onBlur: any;
    onOriginalItemNeeded: any;
}

/**
 * Represents the [KendoReact BottomNavigation component]({% slug overview_bottomnavigation %}).
 * Used to switch between primary destinations in an application.
 *
 * @example
 * ```jsx
 * const items = [
 *    { text: 'Photos', icon: 'photo', selected: true },
 *    { text: 'Albums', icon: 'folder' },
 *    { text: 'Search', icon: 'search' },
 *    { text: 'More', icon: 'more-horizontal' },
 * ];
 *
 * const App = () => {
 *   return (
 *       <BottomNavigation items={items} />
 *   );
 * };
 *    ReactDOM.render(<App />, document.querySelector('my-app'));
 * ```
 */
export declare const BottomNavigation: React_2.ForwardRefExoticComponent<BottomNavigationProps & React_2.RefAttributes<BottomNavigationHandle | null>>;

/**
 * Represents the return type of the BottomNavigation events.
 */
export declare interface BottomNavigationEvent extends BaseEvent<BottomNavigationHandle> {
}

/**
 * The fill style of the BottomNavigation
 * ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
 *
 * The possible values are:
 * * `flat`(Default) &mdash; Sets the theme color as the text color. The background will be white.
 * * `solid` &mdash; Sets the theme color as a background color.
 *
 */
export declare type BottomNavigationFill = 'solid' | 'flat';

/**
 * Represents the Object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom)
 * callback of the BottomNavigation component.
 */
export declare interface BottomNavigationHandle {
    /**
     * The current element or `null` if there is no one.
     */
    element: HTMLElement | null;
    /**
     * Focus the BottomNavigation first item.
     */
    focus: () => void;
}

/**
 * Represents the [KendoReact BottomNavigationItem component]({% slug overview_bottomnavigation %}).
 */
export declare const BottomNavigationItem: React_2.ForwardRefExoticComponent<Omit<BottomNavigationItemProps, "ref"> & React_2.RefAttributes<BottomNavigationItemHandle | null>>;

/**
 * Specifies how the icon and text label are positioned in each item of the BottomNavigation
 * ([see example]({% slug content_types_bottomnavigation %}#toc-item-flow)).
 *
 * The possible values are:
 * * `vertical`(Default) &mdash; Renders the text below the icon.
 * * `horizontal` &mdash; Renders the text and the icon on the same line.
 */
export declare type BottomNavigationItemFlow = 'vertical' | 'horizontal';

/**
 * @hidden
 */
export declare interface BottomNavigationItemHandle {
    element: HTMLElement | null;
}

/**
 * The interface for describing items that can be passed to the `items` property of the BottomNavigation component.
 */
export declare interface BottomNavigationItemProps {
    /**
     * Sets additional CSS classes to the BottomNavigation item.
     *
     * @example
     * ```jsx
     * <BottomNavigationItem className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Sets additional CSS styles to the BottomNavigation item.
     *
     * @example
     * ```jsx
     * <BottomNavigationItem style={{ color: 'red' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Disables the BottomNavigation item.
     *
     * @example
     * ```jsx
     * <BottomNavigationItem disabled={true} />
     * ```
     */
    disabled?: boolean;
    /**
     * Specifies if the BottomNavigation item is selected.
     *
     * @example
     * ```jsx
     * <BottomNavigationItem selected={true} />
     * ```
     */
    selected?: boolean;
    /**
     * Defines the name for an existing icon in a KendoReact theme.
     * The icon is rendered inside the BottomNavigation item by a `span.k-icon` element.
     *
     * @example
     * ```jsx
     * <BottomNavigationItem icon="home" />
     * ```
     */
    icon?: string;
    /**
     * Defines an SVG icon.
     * The icon is rendered inside the BottomNavigation item.
     *
     * @example
     * ```jsx
     * import { gearIcon } from '@progress/kendo-svg-icons';
     *
     * <BottomNavigationItem svgIcon={gearIcon} />
     * ```
     */
    svgIcon?: SVGIcon;
    /**
     * Specifies the text content of the BottomNavigation item.
     *
     * @example
     * ```jsx
     * <BottomNavigationItem text="Home" />
     * ```
     */
    text?: React.ReactNode;
    /**
     * Sets the `tabIndex` property of the BottomNavigation item. Defaults to `0`.
     *
     * @example
     * ```jsx
     * <BottomNavigationItem tabIndex={-1} />
     * ```
     */
    tabIndex?: number;
    /**
     * Sets a custom property. Contained in the BottomNavItem props that are returned from the `onSelect` BottomNavigation event.
     *
     * @example
     * ```jsx
     * <BottomNavigationItem customProp="customValue" />
     * ```
     */
    [customProp: string]: any;
    /**
     * @hidden
     */
    index?: number;
    /**
     * @hidden
     */
    item?: any;
    /**
     * @hidden
     */
    dataItem?: any;
    /**
     * @hidden
     */
    id?: string;
}

/**
 * Specifies the position and behavior of the BottomNavigation when the page is scrolled
 * ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).
 *
 * The possible values are:
 * * `fixed`(Default) &mdash; The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
 * * `sticky` &mdash; Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between
 * static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
 * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
 */
export declare type BottomNavigationPositionMode = 'sticky' | 'fixed';

/**
 * Represents the props of the [KendoReact BottomNavigation component]({% slug overview_bottomnavigation %}).
 */
export declare interface BottomNavigationProps {
    /**
     * Sets additional CSS classes to the BottomNavigation.
     *
     * @example
     * ```jsx
     * <BottomNavigation className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Sets additional CSS styles to the BottomNavigation.
     *
     * @example
     * ```jsx
     * <BottomNavigation style={{ backgroundColor: 'blue' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Sets the `id` property of the root BottomNavigation element.
     *
     * @example
     * ```jsx
     * <BottomNavigation id="bottomNav1" />
     * ```
     */
    id?: string;
    /**
     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
     *
     * @example
     * ```jsx
     * <BottomNavigation dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * Specifies the theme color of the BottomNavigation
     * ([see example]({% slug appearance_bottomnavigation %}#toc-theme-color)).
     *
     * The possible values are:
     * * `primary` (Default) &mdash; Applies coloring based on the primary theme color.
     * * `secondary` &mdash; Applies coloring based on the secondary theme color.
     * * `tertiary` &mdash; Applies coloring based on the tertiary theme color.
     * * `info` &mdash; Applies coloring based on the info theme color.
     * * `success` &mdash; Applies coloring based on the success theme color.
     * * `warning` &mdash; Applies coloring based on the warning theme color.
     * * `error` &mdash; Applies coloring based on the error theme color.
     * * `dark` &mdash; Applies coloring based on the dark theme color.
     * * `light` &mdash; Applies coloring based on the light theme color.
     * * `inverse` &mdash; Applies coloring based on the inverted theme color.
     *
     * @example
     * ```jsx
     * <BottomNavigation themeColor="primary" />
     * ```
     */
    themeColor?: BottomNavigationThemeColor;
    /**
     * **Deprecated**. Use `fillMode` prop instead.
     *
     * @deprecated
     */
    fill?: BottomNavigationFill;
    /**
     * The fill style of the BottomNavigation
     * ([see example]({% slug appearance_bottomnavigation %}#toc-fill)).
     *
     * The possible values are:
     * * `flat`(Default) &mdash; Sets the theme color as the text color. The background will be white.
     * * `solid` &mdash; Sets the theme color as a background color.
     */
    fillMode?: BottomNavigationFill;
    /**
     * Specifies the position and behavior of the BottomNavigation when the page is scrolled
     * ([see example]({% slug positioning_bottomnavigation %}#toc-position-mode)).
     *
     * The possible values are:
     * * `fixed`(Default) &mdash; The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
     * * `sticky` &mdash; Positions the BottomNavigation based on the user's scroll position. A sticky element toggles between static
     * and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
     * It is positioned static until a given offset position is met in the viewport - then it "sticks" in place like `fixed` positionMode.
     *
     * @example
     * ```jsx
     * <BottomNavigation positionMode="sticky" />
     * ```
     */
    positionMode?: BottomNavigationPositionMode;
    /**
     * Specifies how the icon and text label are positioned in each item of the BottomNavigation
     * ([see example]({% slug content_types_bottomnavigation %}#toc-item-flow)).
     *
     * The possible values are:
     * * `vertical`(Default) &mdash; Renders the text below the icon.
     * * `horizontal` &mdash; Renders the text and the icon on the same line.
     *
     * @example
     * ```jsx
     * <BottomNavigation itemFlow="horizontal" />
     * ```
     */
    itemFlow?: BottomNavigationItemFlow;
    /**
     * Sets a border to the BottomNavigation.
     *
     * @example
     * ```jsx
     * <BottomNavigation border={true} />
     * ```
     */
    border?: boolean;
    /**
     * Disables the whole BottomNavigation.
     *
     * @example
     * ```jsx
     * <BottomNavigation disabled={true} />
     * ```
     */
    disabled?: boolean;
    /**
     * The collection of items that will be rendered in the BottomNavigation ([see example]({% slug overview_bottomnavigation %})).
     *
     * @example
     * ```jsx
     * const items = [{ text: 'Home', icon: 'home' }, { text: 'Profile', icon: 'user' }];
     * <BottomNavigation items={items} />
     * ```
     */
    items?: Array<BottomNavigationItemProps>;
    /**
     * Overrides the default component's content responsible for visualizing a single item
     * ([see example]({% slug custom_rendering_bottomnavigation %}#toc-custom-rendering)).
     *
     * @example
     * ```jsx
     * const CustomItem = (props) => <div>{props.text}</div>;
     * <BottomNavigation item={CustomItem} />
     * ```
     */
    item?: React.ComponentType<BottomNavigationItemProps>;
    /**
     * Fires when a BottomNavigation item is about to be rendered
     * ([see example]({% slug custom_rendering_bottomnavigation %}#toc-item-render-property)).
     * Used to override the default appearance of the items.
     */
    itemRender?: (span: React.ReactElement<HTMLSpanElement>, itemProps: BottomNavigationItemProps) => React.ReactNode;
    /**
     * Fires when a BottomNavigation item is selected.
     *
     * @example
     * ```jsx
     * <BottomNavigation onSelect={(e) => console.log(e.item)} />
     * ```
     */
    onSelect?: (event: BottomNavigationSelectEvent) => void;
    /**
     * Triggered on `onKeyDown` event.
     *
     * @example
     * ```jsx
     * <BottomNavigation onKeyDown={(e) => console.log('Key pressed')} />
     * ```
     */
    onKeyDown?: (event: BottomNavigationEvent) => void;
}

/**
 * The arguments for the `onSelect` BottomNavigation event.
 */
export declare interface BottomNavigationSelectEvent extends BaseEvent<BottomNavigationHandle> {
    /**
     * A BottomNavigation item event target.
     */
    itemTarget: any;
    /**
     * The index of the selected BottomNavigation item.
     */
    itemIndex: number;
}

/**
 * Specifies the theme color of the BottomNavigationThemeColor.
 * ([see example]({% slug appearance_bottomnavigation %}#toc-theme-color)).
 *
 * The possible values are:
 * * `primary` (Default) &mdash; Applies coloring based on the primary theme color.
 * * `secondary` &mdash; Applies coloring based on the secondary theme color.
 * * `tertiary` &mdash; Applies coloring based on the tertiary theme color.
 * * `info` &mdash; Applies coloring based on the info theme color.
 * * `success` &mdash; Applies coloring based on the success theme color.
 * * `warning` &mdash; Applies coloring based on the warning theme color.
 * * `error` &mdash; Applies coloring based on the error theme color.
 * * `dark` &mdash; Applies coloring based on the dark theme color.
 * * `light` &mdash; Applies coloring based on the light theme color.
 * * `inverse` &mdash; Applies coloring based on the inverted theme color.
 */
export declare type BottomNavigationThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';

/**
 * Represents the Breadcrumb component.
 */
export declare const Breadcrumb: React_2.ForwardRefExoticComponent<BreadcrumbProps & React_2.RefAttributes<BreadcrumbHandle | null>>;

/**
 * Represents the BreadcrumbDelimiter component.
 */
export declare const BreadcrumbDelimiter: React_2.ForwardRefExoticComponent<BreadcrumbDelimiterProps & React_2.RefAttributes<BreadcrumbDelimiterHandle | null>>;

/**
 * Represents the target (element, props, and focus()) of the BreadcrumbDelimiter.
 */
export declare interface BreadcrumbDelimiterHandle {
    /**
     * The current element or `null` if there is none.
     */
    element: HTMLSpanElement | null;
    /**
     * The props values of the BreadcrumbDelimiter.
     */
    props: BreadcrumbDelimiterProps;
}

/**
 * Represents the properties of [BreadcrumbDelimiter](% slug api_layout_breadcrumbdelimiter %) component.
 */
export declare interface BreadcrumbDelimiterProps {
    /**
     * Sets the `id` property of the BreadcrumbDelimiter component.
     */
    id?: string;
    /**
     * Sets additional classes to the BreadcrumbDelimiter component.
     */
    className?: string;
    /**
     * Sets additional CSS styles to the BreadcrumbDelimiter component.
     */
    style?: React_2.CSSProperties;
    /**
     * Sets the `tabIndex` attribute to the BreadcrumbDelimiter.
     */
    tabIndex?: number;
    /**
     * @hidden
     */
    dir?: string;
}

/**
 * Represents the target (element, props, and focus()) of the `BreadcrumbClickEvent`.
 */
export declare interface BreadcrumbHandle {
    /**
     * The current element or `null` if there is none.
     */
    element: HTMLDivElement | null;
    /**
     * The props values of the Breadcrumb.
     */
    props: BreadcrumbProps;
    /**
     * The `focus` method of the Breadcrumb component.
     */
    focus: () => void;
}

/**
 * Represents the [BreadcrumbLink](% slug api_layout_breadcrumblink %) component.
 *
 * @example
 * ```jsx
 * import { Breadcrumb, BreadcrumbLink } from '@progress/kendo-react-layout';
 * const items = [
 *   {
 *     id: 'home',
 *     text: 'Home',
 *     iconClass: 'k-i-home',
 *   },
 *   {
 *     id: 'products',
 *     text: 'Products',
 *   },
 *   {
 *     id: 'computer',
 *     text: 'Computer',
 *   }
 * ];
 *
 * const App = () => {
 * const [data,setData] = React.useState(items);
 * const handleItemSelect = (event, id) => {
 *   const itemIndex = data.findIndex((curValue) => curValue.id === id);
 *   const newData = data.slice(0, itemIndex + 1);
 *   setData(newData);
 * };
 *
 * const CustomLink = (data) => {
 *  return (
 *     <BreadcrumbLink
 *       id={data.id}
 *       text={data.text}
 *       onItemSelect={(event) => handleItemSelect(event, data.id)}
 *     />
 *   );
 * };
 *
 * return (
 *   <Breadcrumb
 *     data={data}
 *     breadcrumbLink={(items) => CustomLink(items)}
 *   />
 * )}
 *
 * ReactDOM.render(<App />, document.querySelector('my-app'));
 * ```
 */
export declare const BreadcrumbLink: React_2.ForwardRefExoticComponent<BreadcrumbLinkProps & React_2.RefAttributes<BreadcrumbLinkHandle | null>>;

/**
 * Represents the target (element, props, and focus()) of the `BreadcrumbClickEvent`.
 */
export declare interface BreadcrumbLinkHandle {
    /**
     * The current element or `null` if there is none.
     */
    element: HTMLAnchorElement | null;
    /**
     * The props values of the BreadcrumbLink.
     */
    props: BreadcrumbLinkProps;
    /**
     * The `focus` method of the BreadcrumbLink component.
     */
    focus: () => void;
}

/**
 * Represents the `BreadcrumbLinkKeyDownEvent`.
 */
export declare interface BreadcrumbLinkKeyDownEvent extends BaseEvent<BreadcrumbLinkHandle> {
    /**
     * Represents the `id` of the `BreadcrumbLinkKeyDownEvent`.
     */
    id?: string;
}

/**
 * Represents the `BreadcrumbLinkMouseEvent`.
 */
export declare interface BreadcrumbLinkMouseEvent extends BaseEvent<BreadcrumbLinkHandle> {
    /**
     * Represents the `id` of the `BreadcrumbLinkMouseEvent`.
     */
    id?: string;
}

/**
 * Represents the properties of [BreadcrumbLink](% slug api_layout_breadcrumblink %) component.
 */
export declare interface BreadcrumbLinkProps {
    /**
     * Sets the `id` property of the top `div` element of the BreadcrumbLink.
     */
    id?: string;
    /**
     * Sets additional classes to the BreadcrumbLink.
     */
    style?: React_2.CSSProperties;
    /**
     * Sets additional classes to the BreadcrumbLink.
     */
    className?: string;
    /**
     * Sets the `tabIndex` attribute to the BreadcrumbLink.
     */
    tabIndex?: number;
    /**
     * The Breadcrumb direction `ltr` or `rtl`.
     */
    dir?: string;
    /**
     * Determines the `disabled` mode of the BreadcrumbLink. If `true`, the component is disabled.
     */
    disabled?: boolean;
    /**
     * Represents the `text` of the BreadcrumbLink component.
     */
    text?: string;
    /**
     * Represents the `icon` of the BreadcrumbLink component.
     */
    icon?: React_2.ReactNode;
    /**
     * Represents the `iconClass` of the BreadcrumbLink component.
     */
    iconClass?: string;
    /**
     * Represents the `onItemSelect` event. Triggered after click on the BreadcrumbLink item.
     */
    onItemSelect?: (event: BaseEvent<BreadcrumbLinkHandle>) => void;
    /**
     * Represents the `onKeyDown` event. Triggered after key down on the BreadcrumbLink item.
     */
    onKeyDown?: (event: BaseEvent<BreadcrumbLinkHandle>) => void;
    /**
     * Sets the `aria-current` value.
     */
    ariaCurrent?: boolean;
    /**
     * @hidden
     */
    isLast?: boolean;
    /**
     * @hidden
     */
    isFirst?: boolean;
}

/**
 * Represents the BreadcrumbListItem component.
 */
export declare const BreadcrumbListItem: React_2.ForwardRefExoticComponent<BreadcrumbListItemProps & React_2.RefAttributes<BreadcrumbListItemHandle | null>>;

/**
 * Represents the target (element, props, and focus()) of the BreadcrumbListItem.
 */
export declare interface BreadcrumbListItemHandle {
    /**
     * The current element or `null` if there is none.
     */
    element: any;
    /**
     * The props values of the Breadcrumb.
     */
    props: BreadcrumbListItemProps;
    /**
     * The `focus` method of the BreadcrumbListItem component.
     */
    focus: () => void;
}

/**
 * Represents the properties of [BreadcrumbListItem](% slug api_layout_breadcrumblistitem %) component.
 */
export declare interface BreadcrumbListItemProps {
    /**
     * Sets the `id` property of the top `div` element of the BreadcrumbListItem.
     */
    id?: string;
    /**
     * Sets additional CSS styles to the BreadcrumbListItem.
     */
    style?: React_2.CSSProperties;
    /**
     * Sets additional classes to the BreadcrumbListItem.
     */
    className?: string;
    /**
     * Determines the children nodes.
     */
    children?: React_2.ReactNode;
    /**
     * @hidden
     */
    isFirstItem: any;
    /**
     * @hidden
     */
    isLastItem: any;
}

/**
 * Represents the BreadcrumbOrderedList component.
 */
export declare const BreadcrumbOrderedList: React_2.ForwardRefExoticComponent<BreadcrumbOrderedListProps & React_2.RefAttributes<BreadcrumbOrderedListHandle | null>>;

/**
 * Represents the target (element, props, and focus()) of the BreadcrumbOrderedList.
 */
export declare interface BreadcrumbOrderedListHandle {
    /**
     * The current element or `null` if there is none.
     */
    element: HTMLOListElement | null;
    /**
     * The props values of the BreadcrumbOrderedList.
     */
    props: BreadcrumbOrderedListProps;
}

/**
 * Represents the properties of [BreadcrumbOrderedList](% slug api_layout_breadcrumborderedlist %) component.
 */
export declare interface BreadcrumbOrderedListProps {
    /**
     * Sets the `id` property of the top `div` element of the BreadcrumbOrderedList.
     */
    id?: string;
    /**
     * Sets additional CSS styles to the BreadcrumbOrderedList.
     */
    style?: React_2.CSSProperties;
    /**
     * Sets additional classes to the BreadcrumbOrderedList.
     */
    className?: string;
    /**
     * Determines the children nodes.
     */
    children?: React_2.ReactNode;
    /**
     * Sets the `tabIndex` attribute to the BreadcrumbOrderedList.
     */
    tabIndex?: number;
    /**
     * The BreadcrumbOrderedList direction `ltr` or `rtl`.
     */
    dir?: string;
    /**
     * Determines the `disabled` mode of the BreadcrumbOrderedList. If `true`, the component is disabled.
     */
    disabled?: boolean;
    /**
     * @hidden
     */
    rootItem?: boolean;
}

/**
 * Represents the properties of [Breadcrumb](% slug api_layout_breadcrumb %) component.
 */
export declare interface BreadcrumbProps {
    /**
     * Sets the `id` property of the top `div` element of the Breadcrumb.
     *
     * @example
     * ```jsx
     * <Breadcrumb id="breadcrumb1" />
     * ```
     */
    id?: string;
    /**
     * Sets additional CSS styles to the Breadcrumb.
     *
     * @example
     * ```jsx
     * <Breadcrumb style={{ backgroundColor: 'lightgray' }} />
     * ```
     */
    style?: React_2.CSSProperties;
    /**
     * Sets additional classes to the Breadcrumb.
     *
     * @example
     * ```jsx
     * <Breadcrumb className="custom-breadcrumb" />
     * ```
     */
    className?: string;
    /**
     * Represents the Breadcrumb ordered list component.
     *
     * @example
     * ```jsx
     * const CustomOrderedList = (props) => <ol {...props} />;
     * <Breadcrumb breadcrumbOrderedList={CustomOrderedList} />
     * ```
     */
    breadcrumbOrderedList?: Rea