@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 { ForwardRefExoticComponent } from 'react';
import { JSX as JSX_2 } 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>>;

/**
 * @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<ActionSheetContentProps>;

/**
 * @hidden
 */
export declare interface ActionSheetContentProps extends ActionSheetChildrenProps {
    /**
     * @hidden
     */
    overflowHidden?: boolean;
}

/**
 * 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<ActionSheetChildrenProps>;

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

/**
 * 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;
    /**
     * 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.
     */
    items?: ActionSheetItemProps[];
    /**
     * Specifies the text that is rendered under the title.
     */
    subTitle?: string | React_2.ReactNode;
    /**
     * Specifies the text that is rendered as title.
     */
    title?: string | React_2.ReactNode;
    /**
     * **Deprecated**. Fires when the modal overlay is clicked. Use `onClose` event instead.
     *
     * @deprecated
     */
    onOverlayClick?: (event: React_2.SyntheticEvent) => void;
    /**
     * Fires when the modal overlay is clicked.
     */
    onClose?: (event: React_2.SyntheticEvent) => void;
    /**
     * Fires when an ActionSheet item is clicked.
     */
    onItemSelect?: (event: {
        syntheticEvent: React_2.SyntheticEvent;
        title?: string;
        item?: any;
    }) => void;
    /**
     * **Deprecated**. Fires when an ActionSheet item is clicked. Use `onItemSelect` event instead.
     *
     * @deprecated
     */
    onItemClick?: (event: {
        syntheticEvent: React_2.SyntheticEvent;
        title?: string;
        item?: any;
    }) => void;
    /**
     * Represents the children that are passed to the ActionSheet.
     */
    children?: any;
    /**
     * Specifies the `tabIndex` of the ActionSheet.
     */
    tabIndex?: number;
    /**
     * 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[];
    /**
     * Controls the popup animation. By default, the open and close animations are disabled.
     */
    animation?: boolean;
    /**
     * @hidden
     */
    animationStyles?: React_2.CSSProperties;
    /**
     * Specifies the duration of the transition for the entering and closing Animation. Defaults to `300ms`.
     */
    animationDuration?: number;
    /**
     * The CSS classes that will be rendered on the inner ActionSheet element.
     */
    className?: string;
    /**
     * Specifies the state of the ActionSheet.
     */
    expand?: boolean;
    /**
     * Specifies the position of the ActionSheet.
     *
     * @default 'bottom'
     */
    position?: 'top' | 'bottom' | 'left' | 'right' | 'fullscreen';
    /**
     * @hidden
     */
    actions?: React_2.ReactNode;
    /**
     * @hidden
     */
    filter?: React_2.ReactNode;
}

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

/**
 * @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.
     */
    children?: any;
    /**
     * Sets additional CSS classes to the AppBar.
     */
    className?: string;
    /**
     * Sets additional CSS styles to the AppBar.
     */
    style?: React_2.CSSProperties;
    /**
     * Sets the `id` property of the root AppBar element.
     */
    id?: string;
    /**
     * Specifies the position of the AppBar ([see example]({% slug positioning_appbar %}#toc-position)).
     *
     * * The possible values are:
     * * 'top' (Default)
     * * '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'
     */
    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'
     *
     */
    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.
     */
    children?: React.ReactNode;
    /**
     * Sets additional CSS styles to the Avatar.
     */
    style?: React.CSSProperties;
    /**
     * Add additional classes to the Avatar.
     */
    className?: string;
    /**
     * Set the type of the Avatar.
     *
     * The supported values are:
     * * `image`
     * * `text`
     * * `icon`
     */
    type?: avatarType | string;
    /**
     * Configures the `size` of the Button.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     * - null&mdash;Does not set a size `className`.
     *
     * @default `medium`
     */
    size?: null | 'small' | 'medium' | 'large';
    /**
     * Configures the `roundness` of the Button.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     * - full
     * - null&mdash;Does not set a rounded `className`.
     *
     * @default `medium`
     */
    rounded?: null | 'small' | 'medium' | 'large' | 'full';
    /**
     * Sets a border to the Avatar.
     */
    border?: boolean;
    /**
     * Configures the `fillMode` of the Button.
     *
     * The available options are:
     * - solid
     * - outline
     * - null&mdash;Does not set a fillMode `className`.
     *
     * @default `solid`
     */
    fillMode?: null | 'solid' | 'outline';
    /**
     * Configures the `themeColor` of the Button.
     *
     * 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`
     */
    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.
     */
    className?: string;
    /**
     * Sets additional CSS styles to the BottomNavigation item.
     */
    style?: React.CSSProperties;
    /**
     * Disables the BottomNavigation item.
     */
    disabled?: boolean;
    /**
     * Specifies if the BottomNavigation item is selected.
     */
    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.
     */
    icon?: string;
    /**
     * Defines an SVG icon.
     * The icon is rendered inside the BottomNavigation item.
     */
    svgIcon?: SVGIcon;
    /**
     * Specifies the text content of the BottomNavigation item.
     */
    text?: React.ReactNode;
    /**
     * Sets the `tabIndex` property of the BottomNavigation item. Defaults to `0`.
     */
    tabIndex?: number;
    /**
     * Sets a custom property. Contained in the BottomNavItem props that are returned from the `onSelect` BottomNavigation event.
     */
    [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.
     */
    className?: string;
    /**
     * Sets additional CSS styles to the BottomNavigation.
     */
    style?: React.CSSProperties;
    /**
     * Sets the `id` property of the root BottomNavigation element.
     */
    id?: string;
    /**
     * Represents the `dir` HTML attribute. This is used to switch from LTR to 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.
     */
    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.
     */
    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.
     */
    itemFlow?: BottomNavigationItemFlow;
    /**
     * Sets a border to the BottomNavigation.
     */
    border?: boolean;
    /**
     * Disables the whole BottomNavigation.
     */
    disabled?: boolean;
    /**
     * The collection of items that will be rendered in the BottomNavigation ([see example]({% slug overview_bottomnavigation %})).
     */
    items?: Array<BottomNavigationItemProps>;
    /**
     * Overrides the default component's content responsible for visualizing a single item
     * ([see example]({% slug custom_rendering_bottomnavigation %}#toc-custom-rendering)).
     */
    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.
     */
    onSelect?: (event: BottomNavigationSelectEvent) => void;
    /**
     * Triggered on `onKeyDown` event.
     */
    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.
     */
    id?: string;
    /**
     * Sets additional CSS styles to the Breadcrumb.
     */
    style?: React_2.CSSProperties;
    /**
     * Sets additional classes to the Breadcrumb.
     */
    className?: string;
    /**
     * Represents the Breadcrumb ordered list component.
     */
    breadcrumbOrderedList?: React_2.ComponentType<BreadcrumbOrderedListProps>;
    /**
     * Represents the Breadcrumb list item component.
     */
    breadcrumbListItem?: React_2.ComponentType<BreadcrumbListItemProps>;
    /**
     * Represents the Breadcrumb delimiter component.
     */
    breadcrumbDelimiter?: React_2.ComponentType<BreadcrumbDelimiterProps>;
    /**
     * Represents the Breadcrumb link component.
     */
    breadcrumbLink?: React_2.ComponentType<BreadcrumbLinkProps>;
    /**
     * Represents the data of the Breadcrumb from type DataModel.
     */
    data: DataModel[];
    /**
     * Specifies the padding of all Breadcrumb elements.
     *
     * The possible values are:
     * * `small`
     * * `medium`
     * * `large`
     *
     * @default `medium`
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * The Breadcrumb direction `ltr` or `rtl`.
     */
    dir?: 'ltr' | 'rtl';
    /**
     * Sets the `tabIndex` attribute to the Breadcrumb.
     */
    tabIndex?: number;
    /**
     * Determines the `disabled` mode of the Breadcrumb. If `true`, the component is disabled.
     */
    disabled?: boolean;
    /**
     * Represents the `value` field. Used for setting the key of the BreadcrumbListItem component and the `id` of the BreadcrumbLink component.
     */
    valueField?: string;
    /**
     * Represents the `text` field. Used for setting the `text` inside the BreadcrumbLink component.
     */
    textField?: string;
    /**
     * Represents the `icon` field. Used for setting the `icon` inside the BreadcrumbLink component.
     */
    iconField?: string;
    /**
     * Represents the `iconClass` field. Used for setting the `iconClass` inside the BreadcrumbLink component.
     */
    iconClassField?: string;
    /**
     * Represents the `onItemSelect` event. Triggered after click on the Breadcrumb.
     */
    onItemSelect?: (event: BreadcrumbLinkMouseEvent) => void;
    /**
     * Represents the `onKeyDown` event. Triggered after keyboard click on the Breadcrumb.
     */
    onKeyDown?: (event: BreadcrumbLinkKeyDownEvent) => void;
    /**
     * Represents the label of the Breadcrumb component.
     */
    ariaLabel?: string;
}

export declare const Card: React_2.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React_2.RefAttributes<CardHandle | null>>;

export declare const CardActions: React_2.FunctionComponent<CardActionsProps>;

export declare enum cardActionsLayout {
    START = "start",
    CENTER = "center",
    END = "end",
    STRETCHED = "stretched"
}

export declare interface CardActionsProps {
    /**
     * Sets the CardActions children elements.
     */
    children?: React.ReactNode;
    /**
     * Sets additional CSS styles to the CardActions.
     */
    style?: React.CSSProperties;
    /**
     * Add additional classes to the CardActions.
     */
    className?: string;
    /**
     * Set the layout of the actions.
     *
     * The supported values are:
     * * (Default) `start`
     * * `center`
     * * `end`
     * * `stretched`
     */
    layout?: cardActionsLayout | string;
    /**
     * Specifies the orientation of the Card action buttons.
     *
     * * The possible values are:
     * * (Default) `horizontal`
     * * `vertical`
     *
     */
    orientation?: cardOrientation | string;
}

export declare const CardBody: React_2.FunctionComponent<CardBodyProps>;

declare interface CardBodyProps {
    /**
     * Sets the CardBody children elements.
     */
    children?: React.ReactNode;
    /**
     * Sets additional CSS styles to the CardBody.
     */
    style?: React.CSSProperties;
    /**
     * Add additional classes to the CardBody.
     */
    className?: string;
}

export declare const CardFooter: React_2.FunctionComponent<CardFooterProps>;

declare interface CardFooterProps {
    /**
     * Sets the CardFooter children elements.
     */
    children?: React.ReactNode;
    /**
     * Sets additional CSS styles to the CardFooter.
     */
    style?: React.CSSProperties;
    /**
     * Add additional classes to the CardFooter.
     */
    className?: string;
}

/**
 * Represents the target(element and props) of the Card component.
 */
export declare interface CardHandle {
    /**
     * The current element or `null` if there is no one.
     */
    element: HTMLDivElement | null;
    /**
     * The props values of the Card.
     */
    props: CardProps;
}

export declare const CardHeader: React_2.FunctionComponent<CardHeaderProps>;

declare interface CardHeaderProps {
    /**
     * Sets the CardHeader children elements.
     */
    children?: React.ReactNode;
    /**
     * Sets additional CSS styles to the CardHeader.
     */
    style?: React.CSSProperties;
    /**
     * Add additional classes to the CardHeader.
     */
    className?: string;
}

export declare const CardImage: React_2.FunctionComponent<CardImageProps>;

declare interface CardImageProps {
    /**
     * Sets additional CSS styles to the CardImageProps.
     */
    style?: React.CSSProperties;
    /**
     * Add additional classes to the CardImageProps.
     */
    className?: string;
    /**
     * Set the source of the image.
     */
    src?: string;
    /**
     * Specifies an alternate text for the image.
     */
    alt?: string;
}

export declare enum cardOrientation {
    HORIZONTAL = "horizontal",
    VERTICAL = "vertical"
}

export declare interface CardProps {
    /**
     * Sets the Card children elements.
     */
    children?: React.ReactNode;
    /**
     * Sets the [dir](https://www.w3schools.com/tags/att_global_dir.asp) of the Card.
     */
    dir?: string;
    /**
     * Sets additional CSS styles to the Card.
     */
    style?: React.CSSProperties;
    /**
     * Add additional classes to the Card.
     */
    className?: string;
    /**
     * Set the type of the Card.
     *
     * The supported values are:
     * * `default`
     * * `primary`
     * * `info`
     * * `success`
     * * `warning`
     * * `error`
     */
    type?: cardType | string;
    /**
     * Set the orientation of the Card.
     *
     * The supported values are:
     * * `horizontal` - Default
     * * `vertical`
     */
    orientation?: cardOrientation | string;
    /**
     * Sets a custom property to component DOM element.
     */
    [customProp: string]: any;
}

export declare const CardSubtitle: React_2.FunctionComponent<CardSubtitleProps>;

declare interface CardSubtitleProps {
    /**
     * Sets the CardSubtitle children elements.
     */
    children?: React.ReactNode;
    /**
     * Sets additional CSS styles to the CardSubtitle.
     */
    style?: React.CSSProperties;
    /**
     * Add additional classes to the CardSubtitle.
     */
    className?: string;
}

export declare const CardTitle: React_2.FunctionComponent<CardTitleProps>;

declare interface CardTitleProps {
    /**
     * Sets the CardTitle children elements.
     */
    children?: React.ReactNode;
    /**
     * Sets additional CSS styles to the CardTitle.
     */
    style?: React.CSSProperties;
    /**
     * Add additional classes to the CardTitle.
     */
    className?: string;
}

export declare enum cardType {
    DEFAULT = "default",
    primary = "primary",
    INFO = "info",
    SUCCESS = "success",
    WARNING = "warning",
    ERROR = "error"
}

/**
 * @hidden
 */
export declare const contentDisplayName = "ActionSheetContent";

/**
 * Represents the [KendoReact ContextMenu component]({% slug overview_contextmenu %}).
 */
export declare const ContextMenu: {
    (props: ContextMenuProps): JSX_2.Element;
    displayName: string;
};

/**
 * The props of the [KendoReact ContextMenu component]({% slug overview_contextmenu %}).
 */
export declare interface ContextMenuProps extends Omit<MenuProps, 'onClose' | 'openOnClick' | 'hoverOpenDelay' | 'hoverCloseDelay'> {
    /**
     * Controls the Popup visibility of the ContextMenu.
     */
    show: boolean;
    /**
     * Specifies the absolute position of the ContextMenu. The Popover opens next to that point.
     */
    offset: Offset;
    /**
     * Triggers when the ContextMenu needs to hide.